﻿html, form, body { height: 100%; margin: 0; padding: 0; }
body { background-color: White; display: block; width: 100%; text-align: center; font-family: 'Open Sans', Tahoma; }

.hidden { display: none; }

.clearfix:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }

h1 { font-family: 'Lato', Verdana; font-weight: bold; font-size: 1.9em; line-height: 1.4em; color: #0e2158; margin: 0.3em 0 0.75em; }
h2 { font-family: 'Lato', Verdana; font-weight: bold; font-size: 1.25em; color: #283744; padding-bottom: 0.28em; }
h2 img { display: inline; margin: 0; padding: 5px; vertical-align: middle; }

.disablingPanel { display: none; z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: Black; opacity: 0.6; filter: alpha(opacity=60); margin: 0; padding: 0; }

p { margin: 0; padding: 0; }
a { text-decoration: none; color: #000080; }
a:hover { cursor: pointer; text-decoration: underline; }
a img { border: medium none; }
img { border: 0 none; max-width: 100%; width: auto; /* ie8 fix*/ }

.failureText, .successText { font-family: 'Open Sans', Tahoma; font-weight: bold; }
.failureText { color: #CE2D2D; }
.successText { color: #000080; }

#container { min-height: 62.5em; position: relative; width: 100%; margin: 0 auto; text-align: left; }

#header-wrapper { position: relative; width: 100%; background: url('../Images/GeneralWebSiteImages/backgrounds.jpg') repeat-x scroll 0 -38px #798985; }
#header { max-width: 70em; margin: 0 auto; padding: 0; position: relative; }
#headerLevel1 { padding: 0.625em 0.5em 0; height: 1.25em; }
.headerLevel1Right { display: inline-block; float: right; font-size: 0.75em; font-family: 'Open Sans', Tahoma; font-weight: 500; color: White; 
                     vertical-align: top; text-align: right; }
.headerLevel1Right a:hover { text-decoration: none; }

#menu-wrapper { position: relative; width: 100%; background: url('../Images/GeneralWebSiteImages/backgrounds.jpg') repeat-x scroll 0 0 #224f7b; }
#divMenu { clear: both; max-width: 70em; margin: 0 auto; padding: 0; position: relative; }
.menu { list-style: none outside none; margin: 0; padding: 0 0.5em; position: relative; float: right; text-align: left; 
        background: url('../Images/GeneralWebSiteImages/backgrounds.jpg') repeat-x scroll 0 0 #325998; }
.menu li { background-color: Transparent; display: inline-block; font-family: 'Open Sans', Tahoma; font-size: 0.88em; font-weight: bold; line-height: 2.65em; }
.menu li a { color: White; }
.menu li a:hover { background-color: #283744; color: White; text-decoration: none; }
.menu li.priority-1 a { font-size: 1.21em; }
.menu li a p { padding: 0 1.25em; }
.menu li a:hover p { background-color: #283744; }
#menu-icon, .onlyResponsive { display: none; }
ul.topnav { list-style: none; margin: 0; padding: 0; }
ul.topnav li { float: left; padding: 0 1.5em 0 0; }
ul.topnav li.firstFromProfile { border-left: 1px solid White; padding-left: 1.45em; }
ul.topnav li.newCustomer { padding-left: 1.5em; border-left: 1px solid white; line-height: 1.75em; }
ul.topnav li a, ul.topnav li p { display: inline-block; color: White; margin: 0; }
#logo, #logoName { margin-top: -0.5em; padding: 0 0 1em 0; display: block; float: left; }
#logo { max-width: 18%; padding-left: 1.35em; }
#logoName { max-width: 32%; }

#content { max-width: 71em; padding: 1.85em 0.5em 22em; background-color: White; text-align: left; vertical-align: top; margin: 0 auto; min-height: 35em; font-family: 'Open Sans', Tahoma; }

#footer-wrapper { clear: both; width: 100%; position: absolute; bottom: 0; left: 0; }
#footer-level-1, #footer-level-2 { float: left; width: 100%; }
.footer-disclaimer { max-width: 70em; margin: 0 auto; }
.footer-disclaimer p { font-size: 11px; margin: 10px 3% 15px 1%; }
#footer-level-2 { background: url('../Images/GeneralWebSiteImages/backgrounds.jpg') repeat-x scroll 0 -38px #798985; }
#footer { max-width: 70em; margin: 0 auto; padding: 1.25em 1.5em 1em; clear: both; display: block; font-size: 0.8em; font-family: 'Open Sans', Tahoma; 
		  color: White; text-align: center; line-height: 1.5em; }
#footer p { margin: 0; }
#footer p.firstLine { padding-bottom: 0.27em; }
#footer a { color: White; }
#footer a:hover { text-decoration: none; }
#footer img { width: 2em; height: 2em; vertical-align: middle; }
#footerSecure { float: right; margin-right: 5px; margin-top: -37px; z-index: 1; position: relative; }
@media (max-width: 1350px) { .footer-disclaimer p { margin: 10px 15% 15px 2%; } }
@media (max-width: 991px) { .footer-disclaimer p { margin: 10px 20% 15px 2%; } }
@media (max-width: 740px) { .footer-disclaimer p { margin: 10px 3% 45px 3%; } }
@media (max-width: 575px) { .footer-disclaimer p { margin: 10px 4% 45px 4%; } }

.contentSingleColumn90 { width: 90%; padding: 0 5%; }
.contentSingleColumn96 { width: 96%; padding: 0 2%; }

.commonText, .commonTextForm { font-family: 'Open Sans', Tahoma; font-size: 0.85em; line-height: 1.75em; font-weight: normal; color: Black; }
.commonText span.highlighted { font-weight: bold; color: #142171; font-size: 1.1em; }
.passwordHint { color: #65657a; font-family: 'Open Sans', Tahoma; font-weight: normal; line-height: 1.455em; }
.commonText .passwordHint, .commonTextForm .passwordHint { font-size: 0.92em; padding: 0.727em 0; }

.validationGroup { border-style: none; border-width: 0; padding: 0; margin: 0; }

input[type="checkbox"], input[type="radio"] { margin: 2px 5px 3px; vertical-align: middle; }
input[type="checkbox"]:focus, input[type="radio"]:focus { border: 1px solid Grey; }
input[type="text"], input[type="password"], select, textarea { border: 1px solid #d7d7d7; padding-left: 5px; background-color: White; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; 
                                                               transition: all .3s ease-in-out; font-family: 'Open Sans', Tahoma; font-size: 0.95em; }
input[type="text"], input[type="password"] { height: 21px; }
select { height: 25px; line-height: 24px; }
textarea { height: 50px; }
input[type="text"]:focus, textarea:focus, input[type="password"]:focus, select:focus { border: 1px solid Grey; padding-left: 5px; background-color: White; }
.textareaPadding { padding: 5px; }

input[type="text"].error, textarea.error, input[type="password"].error, select.error { border: 1px solid #dc3545 !important; background-color: #FBF9EE; -moz-box-shadow: 0 0 1px 1px #e66670; 
                                                                                       -webkit-box-shadow: 0 0 1px 1px #e66670; box-shadow: 0 0 1px 1px #e66670; }
input[type="submit"].error { -moz-box-shadow: 0 0 1px 1px #e66670; -webkit-box-shadow: 0 0 1px 1px #e66670; box-shadow: 0 0 1px 1px #e66670; }
div.error { position: absolute; margin-left: 5px; margin-top: 2px; z-index: 5; opacity: 0.9; }
div.error div.errorMessage { vertical-align: middle; text-align: left; background-color: #000; font-size: 11.5px; color: #FFF; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; 
                             padding: 5px 10px; line-height: 1.4em; }
div.error div.arrow { border-color: transparent transparent #000 transparent; border-style: solid; border-width: 0 10px 10px 10px; height: 0; width: 0; position: relative; top: 1px; left: 5px; }

.requiredFieldAsterisk { font-family: 'Open Sans', Tahoma; font-size: 15px; font-weight: 700; color: #CE2D2D; padding: 2px; }
.requiredFieldAsteriskLegend { font-family: 'Open Sans', Tahoma; font-size: 13px; font-weight: 500; color: #CE2D2D; padding: 2px; }

#divRecaptchaError { display: none; }
@media (max-width: 350px) { .g-recaptcha { -webkit-transform:scale(0.92); -ms-transform:scale(0.92); transform:scale(0.92); -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; } }

div.tooltipReadMore { position: absolute; margin-top: -8px; margin-left: 1%; z-index: 5; opacity: 0.95; max-width: 500px; text-align: left; }
div.tooltipReadMore div.tooltipMessage { vertical-align: middle; background-color: #333; font-size: 11px; line-height: 1.6em; color: #FFF; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
                                         -moz-box-shadow: 3px 3px 6px #ddd; -webkit-box-shadow: 3px 3px 6px #ddd; box-shadow: 3px 3px 6px #ddd; padding: 7px 7px 22px; font-family: 'Open Sans', Tahoma; max-width: 490px; }
div.tooltipReadMore div.tooltipMessage a { float: right; color: #FFF; }
div.tooltipReadMore div.arrow { display: inline-block; border-color: transparent transparent #333 transparent; border-style: solid; border-width: 0 10px 10px 10px; height: 0; width: 0; 
                                position: relative; top: 8px; left: 78%; }

.hiddenCenteredPanel { visibility: hidden; }
.centeredPanelDisabledPage { background-color: Transparent; position: fixed; z-index: 1011; padding: 0; margin: 0; top: 3%; left: 3%; width: 94%; height: 94%; }
.centeredPanelControl { max-width: 100%; position: relative; margin-left: auto; margin-right: auto; }
.centeredPanelContainer { border: 5px solid White; height: 100%; background-color: transparent; font-size: 0.85em; font-family: 'Open Sans', Tahoma; }
.centeredPanelCaption { background: url('../Images/GeneralWebSiteImages/popUpBackgrounds.jpg') repeat-x scroll 0 0 #798985; font-weight: bold; color: White; height: 3.3em; padding: 0 0.9em; }
.centeredPanelLineSeparator { background: url('../Images/GeneralWebSiteImages/popUpBackgrounds.jpg') repeat-x scroll 0 -60px #1a2f59; height: 0.583em; line-height: 0.583em; }
.centeredPanelText { color: Black; line-height: 1.6em; background-color: White; padding: 1.65em; min-height: 11.67em; }
.centeredPanelTextBold { font-weight: bold; color: Black; background-color: White; padding: 0.83em 1.67em; min-height: 11.67em; }
.centeredPanelFooter { background: url('../Images/GeneralWebSiteImages/popUpBackgrounds.jpg') repeat-x scroll 0 0 #798985; font-size: 0.9167em; color: White; height: 2.8em; padding: 0.4em 0.9em; line-height: 2em; }
.centeredPanelFooter a { color: White; }
@media (max-width: 400px) { .centeredPanelText { padding: 1.67em 3%; } }

.validateAddress-col-1 { float: left; width: 80%; }
.validateAddress-col-2 { float: right; width: 20%; text-align: right; padding-top: 1.2em; }
.listBoxAddress option { padding: 2px 0; }
@media (max-width: 575px) { .validateAddress-col-1, .validateAddress-col-2 { width: 100%; } }

.btn { height: 30px; min-width: 80px; background-color: #345B9A; border: 1px solid #264474; font-family: 'Open Sans', Tahoma; font-size: 13.6px; line-height: 1.5em; color: white; cursor: pointer; 
       white-space: normal; padding: 3px 15px; }
.btn:hover { background-color: #969696; border: 1px solid #7a7a7a; }
.btnPIM { height:26px; font-size:13px; padding: 3px 6px; }
.btnSmall { width: 120px; }
.btnMedium { width: 150px; }
.btnMarginLeft { margin-left: 10px; }

.cookiesRequired { padding: 0.525em 1.2em 1.2em; margin: 0 auto 2em; max-width: 37.5em; border: 2px solid #2A4B7F; background-color: #f9fafc; text-align: center; font-size: 0.88em; }
.cookiesRequired span { font-weight: bold; color: #0e2158; line-height: 2em; font-size: 1.25em; }
.cookiesRequired .btn { margin: 1.5em 0 0 auto; }
@media (max-width: 1000px) { .cookiesRequired .btn { margin-top: 2em; } }
@media (max-width: 800px) { .cookiesRequired { margin-top: 0.5em; } }
@media (max-width: 550px) { .cookiesRequired { margin-top: 1.5em; } }

div.pass-container { font-family: Arial; font-size: 0.825em; line-height: 1em; width: 60px; display: inline-block; padding-left: 0.45em; vertical-align: bottom; }
div.pass-bar { height: 0.45em; width: 100%; margin-bottom: 0.25em; }
div.pass-hint { text-align: right; width: 100%; }

@media (max-width: 975px) { #logo, #logoName { margin-top: 0; } }
@media (max-width: 800px) {
    #logo { max-width: 20%; }
    #logoName { max-width: 35%; }
    #logo, #logoName { margin-top: 0.25em; } 
}
@media (max-width: 768px) {
    #logo { max-width: 22%; }
    #logoName { max-width: 38%; }
    #logo, #logoName { margin-top: -0.5em; }
    #headerLevel1 { padding-right: 0.75em; }
    #menu-icon, .onlyResponsive { display: inline-block; }

    ul.topnav li { display: none; }
    ul.topnav li.loginName { display: inline-block; line-height: 2em; position: absolute; top: 0.875em; right: 4.2em; padding-right: 0; }
            
    ul.topnav.responsive { display: block; position: absolute; right: 0.5em; width: 30%; padding: 0; margin-top: 0.75em; }
    ul.topnav.responsive li { z-index: 500; position: relative; display: inline-block; background-color: #424242; width: 85%; padding: 0.75em 6%; border-left: 2px solid White; border-right: 2px solid White; }
    ul.topnav.responsive li:hover { background-color: #333333; font-weight: bold; }
    ul.topnav.responsive li a { display: block; text-align: left; }
    ul.topnav.responsive li a:hover { text-decoration: none; }
    ul.topnav.responsive li.firstFromProfile, ul.topnav.responsive li:first-child { border-top: 2px solid White; padding-top: 1.15em; }
    ul.topnav.responsive li.lastFromProfile { border-bottom: 1px solid White; padding-bottom: 1.15em; }
    ul.topnav.responsive li.lastFromProfile.newCustomer { border-bottom: 2px solid White; }
    ul.topnav.responsive li:last-child { border-bottom: 2px solid White; }
    ul.topnav.responsive li.loginName { top: -2.7em; right: 3.7em; width: 200%; z-index: 20; position: absolute; border: none; padding: 0; background-color: transparent; }
    ul.topnav.responsive li.onlyResponsive { font-weight: normal; font-size: 1.1em; }
    ul.topnav.responsive li.onlyResponsive.first { padding-top: 1em; padding-bottom: 0.5em; }
        
    .menu { padding: 0; float: none; }
    .menu li { display: block; }
    .menu li a:hover p { background-color: none; }
    .menu li.priority-2 { display: none; }

    #content { padding-top: 1.5em; }
    h1 { font-size: 1.75em; }
    .commonText, .commonTextForm { line-height: 1.7em; }
}
@media (max-width: 600px) { 
    #footer p.firstLine { padding-bottom: 0.8em; } 
    #logo { max-width: 25%; padding-left: 1em; }
    #logoName { max-width: 42%; }
    #logo, #logoName { margin-top: -0.25em; }
}
@media (max-width: 530px) {
    #logo { max-width: 30%; padding-left: 1em; }
    #logoName { max-width: 50%; }
    ul.topnav.responsive { width: 40%; }
}
@media (max-width: 430px) {
    #logo, #logoName { padding-bottom: 0.7em; }
    #logo { margin-top: 0.75em; }
    #logoName { max-width: 60%; margin-top: 0; }
    ul.topnav.responsive { width: 60%; }
}

.verification-code { text-align: center; height: 35px; width: 96%; }