/* Franklin Templeton - Base Styles

Primary - Blue: #2385C6
Secondary - Light blue: #70badf
Light Grey - border and bg: #DDDDDD
Light Green - button: #38C2AB border: #09957B

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Base
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('/FormBuilder/_Resource/_module/plugin/base.css');

html { height: 100%; }
body {height: 100%;font-family: Arial, sans-serif;color: #000;font-size: 80%;background: url(/FormBuilder/_Resource/_module/fo3aPqE1JkePrpQCLlLqZA/FTI/Franklin-top.gif) left top repeat-x;line-height: inherit;}
.wrapper{/* background: #FFFFFF; */position: relative;width: 100%;margin: 0 auto;}

ul { margin: 10px 0; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
    font-family: 'Roboto-Medium';
    src: url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.eot');
    src: url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
         url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.woff2') format('woff2'),
         url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.woff') format('woff'),
         url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.ttf') format('truetype'),
         url('/FormBuilder/_Resource/_module/4vHi22bWVUafVHH3pVoyhw/fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em 0; color: #2385C6; font-weight: normal; }
h1 {font-family: Minion Pro, Arial, Helvetica, sans-serif;font-size: 2.3em;line-height: 1.2;color: #005598;font-weight: bold; margin: 0.5em 0;}
h2 {font-family: Minion Pro, Arial, Helvetica, sans-serif;color: #005598;font-size: 1.6em;font-weight: bold;margin: 10px 0 1px 0; padding: 5px 0;}
h3 { font-size: 20px;  }
h4 { font-size:1.2em;  }
h4.row {margin: 4px 0 !important;color: #000;font-weight: bold;padding: 15px 0 5px 0 !important;background: #fff !important;}
h5 { font-size: 16px;  }
h6 { font-size: 16px;  }

p { margin: 5px 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a, a:visited, a:focus { text-decoration: none;color:#007cc1; word-wrap:break-word; }
a:hover { color: #007cc1; text-decoration: underline; }
a span { display: none; }


/* Primary Header - branding
--------------------------------------------------------*/
#mobileMenuBtn {display: none; position: absolute; cursor: pointer; right: 15px; top: 25px; }
#mobileMenuBtn span { display: none; }
#mobileMenuBtn:after { content: "\f0c9";  position:absolute; font-family: 'FontAwesome'; top:0px; right:0px; font-size: 30px; color: #2385C6; }
#mobileMenuBtn.selected:after { content: "\f00d";  position:absolute; font-family: 'FontAwesome'; top:0px; right:0px; font-size: 30px; color: #2385C6; }

.page-title { height: 187px; }
.page-header h1 { margin: 0; color: #fff; font-family: "Times New Roman", arial, sans-serif; font-weight: 100; font-size: 44px; padding: 23px 0 10px 0; letter-spacing: 0.5px; }
.page-header span { color: #fff; font-family: "Times New Roman", arial, sans-serif; font-size: 16px; letter-spacing: 0.5px; }

/* Primary Header - Main Navigation
--------------------------------------------------------*/
.navigation { background: #FFFFFF; }
.nav { margin: 0; padding: 0; }
.nav > li { cursor: pointer; }
.nav > li > a { color: #FFFFFF; text-decoration: none; }
.nav > li > a:hover { color: #38C2AB; }

/* Primary Page content
--------------------------------------------------------*/
.page-content { background: #FFF; width: 100%; min-height: 500px; padding: 10px 0; }
.page-content .TextModule:after { content: ""; display: table; clear: both; }

.container {max-width: 802px;}

.terms {
    text-align: left;
    width: 100%;
    padding: 10px;
    height: 350px;
    overflow: auto;
    border: 1px solid #ccc;
}

/* Footer
--------------------------------------------------------*/
.page-footer {background-color: #fff;border-top: 1px solid #797979;color: #797979;font-weight: bold;}
.page-footer .footer-row { padding: 10px 0 10px 0px; }
.infoline {  border-bottom: 1px solid #FFFFFF; }
.page-footer a {color: #797979;}
.mobileFooter { display: none; }


/* HIPPO Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/******************* Forms **********************/
.step .row {clear: both;margin: 4px 0;background-color: #f1f1f1;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;padding: 10px;}
.fid-red { color: red; }
.row label {display:inline-block; *display: inline; zoom: 1; width:300px; padding:5px 10px 0 0; font-weight:bold; vertical-align: top; }
.row .inputFields { display:inline-block; *display: inline; zoom: 1; }
    .inputFields label { display: inline; float: none; padding: 0 20px 0 0; text-align: left; width: auto;}
.row select, .row input.text {  padding:5px; margin:0; width:250px; display:inline-block; *display: inline; zoom: 1; border: 1px solid #DDDDDD; font-size: inherit; }
.row input.text.tiny {width:150px; }
.row strong {font-weight:bold; }
.row .hint {display:block; color:#666;clear:both;font-size: 0.85em; }
.row .text { display:inline-block; *display: inline; zoom: 1; }

.row .inputFields input.checkbox {margin: 0px 7px 0 0;padding:0;}
.row .SelectApplicationType2, .row .SelectApplicationType3 {*display:inline; }
.row.checkboxFullWidth {padding: 1%;border: 0px;background: #f1f1f1;}
.row.checkboxFullWidth .inputFields {width:100%; }
.row.checkboxFullWidth label {width: auto; }


.formNav {padding:20px 0;clear:both; }

/******************* Buttons **********************/

input.next {float:right; margin-left: 10px; }

input.next,
input.back,
.btn, .ok-button {
    position: relative;
    line-height: 22px;
    font-weight: normal;
    border: none;
    outline: none;
    color: #fff;
    background-color: #00a0dc;
    border-color: #00a0dc;
    padding: 10px 20px !important;
    cursor: pointer;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    font-size: 1.2em;
    font-family: Minion Pro, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.ok-button { display: inline-block; margin: 20px 0 0 0; color: #fff !important; text-decoration: none !important; }


/******************* Errors **********************/
.errorContainer { border: 1px solid red; }
.error {clear:both;color:red;padding: 5px 20px;position:relative;margin: 10px 0;display: block;}
.error h6 { color:red; margin: 10px 0 0 0; }
.error ul { padding: 0 15px; }
span.error { padding:0 0 0 5px;clear: none; color:red; display:inline; }

/******************* Icons **********************/
.iconLink {background:#DDDDDD; padding:10px 0;margin: 15px 0; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; }
.iconLink a { background-image: none !important; padding: 10px 15px 10px 70px !important; display:block; position:relative; text-decoration: none; }
    .iconLink a[href*="/DocumentDownload"]:before { content: "\f1c1";  position:absolute; font-family: FontAwesome; top:0px; left:20px; font-size: 30px; } /* for PDF icons */
    .iconLink a[href*="print"]:before { content: "\f02f";  position:absolute; font-family: FontAwesome; top:0px; left:20px; font-size: 30px; } /* for PDF icons */

/*** Content table ***/
.tablestyle { width:100%; margin: 0 0 1em 0; }
.tablestyle th { background:#2385C6; font-weight:bold; color:#FFF; padding:10px; text-align:left; }
.tablestyle td { padding:10px; border-bottom:1px solid #DDDDDD; }

/* Print Styles */
@media print {
    #main-nav, .iconLink, .returnhome, a.btn { display: none; }
    .branding { height: auto !important; float: none; width: 100%; background: none; }
    .confirmation table { width: 100%; }
    .page-content { padding: 0; margin-left: 0; }
    .confirmation, #bpayBox {page-break-inside: avoid; margin: 0 0 20px; }
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 960px) {
    .container { clear: both; display: block; margin: 0; width: 100%; padding: 20px 3%; }
    .page-header .container { padding: 0 3%; }
}

@media (max-width: 767px) {

    /* general */
    #wrapper { width: 100%; margin: 0 auto; }
    .column, .columns { float: none; width: 100% !important; display: block; margin: 0; }

    h1, h2, h3, h4, h5, h6 {}
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }
    h4 { font-size: 1.2em; }
    h5 { font-size: 1.2em; }
    h6 { font-size: 1.2em; }

    /* Header */
    .page-header #logo img { width: 200px; }
    h1.top-title{ display: block; }

    /* page-content */
    .inputFields { width: 100% !important; }
    .step .row { margin: 0.25em 0; }
    .row label, .row select, .row input.text { width: 94%; }

    .terms a { word-break: break-word; }

    /* buttons */
    a[data-icon="button"]:after { content: " "; top: 0; right: 0; font-size: 0; }

      /*footer*/
    .footer-row > column { text-align:center; font-size: 0.8em; }
}

@media (max-width: 520px) {
     body { background: url(/FormBuilder/_Resource/_module/fo3aPqE1JkePrpQCLlLqZA/FTI/Franklin-top-mobile.gif) left top repeat-x; }
    .page-title { height: 134px; }
    .page-title h1 { font-size: 30px; }
}

@media (max-width: 420px) {
    .page-title h1 { font-size: 24px; }
}

@media (max-width: 380px) {
    .desktopFooter { display: none; }
    .mobileFooter { display: block; line-height: 1.5; }
}
