/* 
    // Not used colors. use these for debugging
    #0099FF blueish 
    #FF99FF pinkish 
    #66FF33 greenish 

    #474747 - dark grey
    #808080 - medium grey
    #E6E6E6 light grey

*/


/* Global layouts
    dark color: slategray
    light color: lightgray
    top and bottom: black

    border-just-to-see: blue;

    */

* { margin: 0px; font-family: Calibri; }
html { background-color: black; margin: 0; padding: 0; }
body { background-color: #fff; border-top: solid 10px black; font-size: 18px; }
td { padding: 5px; border-collapse: collapse; }

h1, h2, h3, h4, h5 { padding: 0; color: #666666; font-variant: small-caps; font-weight: bold; }
hr { border-color: #cdcdcd; }
p, li, .well, td { font-size: 18px; }

.twp-main-inner { border: solid 1px #9E2C4B; padding: 5px; background-color: #fff; border-radius: 4px; }
.twp-main-outer { border: solid 1px #9E2C4B; margin: 0; background-color: white; border-radius: 4px; }

/* prevents the entire site from exceding a certain width */
.twp-max-width { max-width: 1200px; }

/* make links not underline */
.twp-no-underline, a.twp-no-underline { text-decoration: none; }

/* Generally the title of each page. Usually and H1 element */
.twp-title { padding: 0; margin: 0px 0 0 0; text-align: center; padding: 10px; }

.twp-footer { line-height: 1.8em; clear: both; background-color: #fff; font-size: .8em; padding: 15px; font-size: 14px; text-align: center; }

/* THESE SHOULD BE PHASED OUT. DELETE THEM WHEN THEY ARE NO LONGER USED */
.main-outer { border: solid 5px #9E2C4B; margin: 0; background-color: white; }

/* bootstrap add-ons */
.navbar { margin-bottom: 5px; }
.twp-no-padding { padding: 0px; }

@media only screen and (max-width: 767px) {
    .twp-center-when-xs { text-align: center; }
    .twp-left-when-xs { text-align: left; }
    .twp-pad-left-when-xs { padding-left: 10px; }
}

@media only screen and (max-width: 750px) {
    .twp-center-when-small { text-align: center; }
    .twp-left-when-small { text-align: left; }
    .twp-pad-left-when-small { padding-left: 10px; }
}

@media only screen and (min-width: 992px) {
    .twp-no-right-padding-when-not-small { padding-right: 0; }
    .twp-no-left-padding-when-not-small { padding-left: 0; }
    .twp-pad-right-when-large { padding-right: 10px; }
    .twp-pad-left-when-large { padding-left: 10px; }
}

/* Home Page */
div.bannerDiv { height: 200px; background-position: center; background-repeat: no-repeat; background-size: cover; }
div.bannerDiv1 { background-image: url('images/is/bigstock-Online-Payment-78757847.jpg'); }
div.bannerDiv2 { background-image: url('images/iStock_000004384999XSmall.jpg'); }
.bigButton { cursor: pointer; text-align: center; font-variant: small-caps; font-size: 2em; background-color: #9E2C4B; color: white; border: solid 1px #cdcdcd; }
    .bigButton:hover { border: solid 1px black; background-color: white; color: #9E2C4B; }

/* Big button as link */
a.bigButton { text-align: center; font-variant: small-caps; font-size: 2em; background-color: #9E2C4B; border: solid 1px #cdcdcd; display: block; }
    a.bigButton:link, a.bigButton:visited, a.bigButton:active { color: white; text-decoration: none; }
    a.bigButton:hover { color: #9E2C4B; }

/* Payment Screens */
div.payHeader { background-color: white; color: #9E2C4B; font-weight: bold; border: solid 1px #9E2C4B; padding: 10px; text-align: center; margin: 10px auto; }

/* The primary navigation for logged in users */
.mainNavigation { border: solid 5px slategray; border-bottom: 0; font-size: 14px; font-family: Georgia, Serif; font-weight: bold; height: 47px; clear: both; margin-top: 0px; width: 840px; margin: 0 auto; }
    .mainNavigation ul, .mainNavigation ul li { margin: 0px; list-style: none; display: inline; padding: 0; font-size: 16px; line-height: 13pt; }
        .mainNavigation ul li a { display: block; float: left; padding: 13px 32px 14px 32px; font-weight: bold; color: #666; border: 1px solid #fff; border-bottom-width: 2px; text-decoration: none; }
            .mainNavigation ul li a:hover { text-decoration: none; color: #000 }
            .mainNavigation ul li a.selected { color: #000 }

/* make a link look like a button */
.linkButton { background-color: slategray; color: white; border-radius: 2.5px; white-space: nowrap; }
a:link.linkButton, a:visited.linkButton, a:active.linkButton, a:hover.linkButton { color: white; padding: 5px 16px; line-height: 3em; text-decoration: none; }

/* F.A.Q. Page */
.faqQuestion { color: slategray; font-size: 24px; margin: 15px 0 5px 0; }
.faqAnswer { }

/* Paragraphs TRY TO PHASE THESE OUT */
.p1 { padding: 0px 10px 0px 10px; text-align: left; font-variant: small-caps; font-size: 16pt; }
.p2 { padding: 0px 10px; font-size: 12pt; }

/* mvc errors */
input[type="checkbox"].input-validation-error { border: solid 1px slategray; color: red; }
.validation-summary-errors { color: #e80c4d; font-weight: normal; font-size: 1.1em; border-radius: 4px; border: solid 1px red; padding: 10px; margin: 10px 0px; background-color: #ffff99; }
    .validation-summary-errors span { line-height: 2em; font-size: 1.4em; }
.field-validation-error { color: #e80c4d; font-weight: bold; }
.field-validation-valid { display: none; }
.validation-summary-valid { display: none; }


/* Class for divs that display information at the top of the screen */
.information { background-color: #ffff99; padding: 10px; border: solid 1px slategray; margin: 5px 0px; font-size: 18px; }

/* inputs */
input, textarea { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; }
    input:focus, textarea:focus { border: 1px solid #7ac0da; }
    input[type="checkbox"] { background: transparent; border: inherit; width: auto; }
    input[type='button'] { padding: 6px 15px; background-color: slategray; color: #fff; font-weight: bold; font-size: 16px; border: solid 1px #000; width: auto; cursor: pointer; }
    input[type='submit'] { padding: 6px 15px; background-color: slategray; color: #fff; font-weight: bold; font-size: 16px; border: solid 1px #000; width: auto; }
select { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; }
.form-control { font-size: 18px; height: 42px; }
/* Reverse button */
input[type='button'].reverseButton { background-color: #fff; color: slategray; border-color: slategray; }


/* A generic section with a border */
.sectionBorder { border: solid 1px slategray; padding: 10px; background-color: #fff; }
.box1 { background-color: #fff; border: solid 1px slategray; padding: 10px; margin-bottom: 10px; }
/* try to replace the use of this with main-inner */
.twp-box1 { background-color: #fff; border: solid 1px slategray; padding: 15px; margin-bottom: 15px; }

/* used only on the main page as a heading */
.twp-account-heading { font-size: 21px; margin-top: 0px; }

/* make some text bold and a color */
.highlight { color: slategray; font-weight: bold; }


/* Account specific info - transactions grid */
.transactionsGrid { padding: 5px; border-collapse: collapse; border: solid 1px slategray; width: 100%; }
    .transactionsGrid td { padding: 5px; border-collapse: collapse; border: solid 1px slategray; }
    .transactionsGrid th { padding: 5px; border-collapse: collapse; background-color: slategray; color: white; }

/* default border for images */
.imageBorder { border: solid 1px slategray; }

.portalTitle { color: #c8c8c8; font-family: Rockwell, Consolas, "Courier New", Courier, monospace; font-size: 2.3em; margin: 0; }

/* Disclosure Page */
.disclosure-title { border-top: solid 1px #cdcdcd; font-size: 16px; padding: 10px 0 0 0; margin: 10px 0px 10px 0px; color: #000; font-variant: normal; font-weight: bold; }
.disclosure-content { }

/* Page: /Consumer */
#consumerTabs li.active a { background-color: #EEE; color: #9E2C4B; }
#consumerTabs li a:hover { background-color: #9E2C4B; color: white; }

@media only screen and (max-width: 750px) {
    #consumerTabs li a { padding-left: 5px; padding-right: 5px; }
}

/* Job Application */
.jobSignature { }
    .jobSignature h2 { text-align: center; }
    .jobSignature p { padding: 10px; }
.jobSignature-divider { height: 10px; border-bottom: solid 1px black; }
.jobSignature input { border: solid 1px black; background-color: #FFFFCC; }

/*
    Make it look better on mobile. The mobileOverride class is used so that you can hijack other settings even in the custom css. This will take precedence 
*/
@media only screen and (max-width: 875px) {
    body.mobileOverride .mainNavigation { width: auto; }
        body.mobileOverride .mainNavigation ul li a { padding: 13px 15px 14px 15px; }
}

/* 
    Shrink the font of the main menu as the window gets smaller
*/
@media only screen and (max-width: 700px) {
    body.mobileOverride .mainNavigation ul li a { padding: 13px 10px 14px 10px; }
}

@media only screen and (max-width: 600px) {
    body.mobileOverride .mainNavigation ul li a { padding: 13px 8px 14px 8px; }
}


body { color: #333; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; }

a { color: #333; outline: none; padding-left: 3px; padding-right: 3px; text-decoration: underline; }
    a:link, a:visited,
    a:active, a:hover { color: #333; }
/*a:hover { background-color: #c7d1d6; }*/

hgroup,
nav, section { display: block; }

mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px; }

.float-left { float: left; }
.float-right { float: right; }
.clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }


/* site title
----------------------------------------------------------*/
.site-title { color: #c8c8c8; font-family: Rockwell, Consolas, "Courier New", Courier, monospace; font-size: 2.3em; margin: 0; }
    .site-title a, .site-title a:hover, .site-title a:active { background: none; color: #c8c8c8; outline: none; text-decoration: none; }


/* login
----------------------------------------------------------*/
#login { display: block; font-size: .85em; margin: 0 0 10px; text-align: right; }
    #login a { background-color: #d3dce0; margin-left: 10px; margin-right: 3px; padding: 2px 3px; text-decoration: none; }
        #login a.username { background: none; margin: 0; padding: 0; text-decoration: underline; }
    #login ul { margin: 0; }
    #login li { display: inline; list-style: none; }


/* menu
----------------------------------------------------------*/
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: right; }
    ul#menu li { display: inline; list-style: none; padding-left: 15px; }
        ul#menu li a { background: none; color: #999; text-decoration: none; }
            ul#menu li a:hover { color: #333; text-decoration: none; }


/* page titles */
hgroup.title { margin-bottom: 10px; }
    hgroup.title h1, hgroup.title h2 { display: inline; }
    hgroup.title h2 { font-weight: normal; margin-left: 3px; }

/* features */
section.feature { width: 300px; float: left; padding: 10px; }

/* content */
article { float: left; width: 70%; }
aside { float: right; width: 25%; }
    aside ul { list-style: none; padding: 0; }
        aside ul li { background: url("../Images/bullet.png") no-repeat 0 50%; padding: 2px 0 2px 20px; }
.label { font-weight: 700; }
#logoutForm { display: inline; }

/* contact */
.contact h3 { font-size: 1.2em; }
.contact p { margin: 5px 0 0 10px; }
.contact iframe { border: 1px solid #333; margin: 5px 0 0 10px; }

/* forms */
fieldset { border: none; margin: 0; padding: 0; }
    fieldset legend { display: none; }
    fieldset ol { padding: 0; list-style: none; }
        fieldset ol li { padding-bottom: 5px; }
label.checkbox { display: inline; }


/* info and errors */
.message-info { border: 1px solid; clear: both; padding: 10px 20px; }
.message-error { clear: both; color: #e80c4d; font-size: 1.1em; font-weight: bold; margin: 20px 0 10px 0; }
.message-success { color: #7ac0da; font-size: 1.3em; font-weight: bold; margin: 20px 0 10px 0; }

.error { color: #e80c4d; }

/* tables
----------------------------------------------------------*/
table { padding: 5px; border-collapse: collapse; font-size: 12px; border-collapse: collapse; border-spacing: 0; margin-top: 0.75em; border: 0 none; }
th { font-size: 18px; text-align: left; border: none 0px; padding-left: 0; font-weight: normal; }
    th a { display: block; position: relative; }
        th a:link, th a:visited, th a:active, th a:hover { color: #333; font-weight: 600; text-decoration: none; padding: 0; }
        th a:hover { color: #000; }
    th.asc a, th.desc a { margin-right: .75em; }
        th.asc a:after, th.desc a:after { display: block; position: absolute; right: 0em; top: 0; font-size: 0.75em; }
        th.asc a:after { content: '▲'; }
        th.desc a:after { content: '▼'; }
tr.pager td { padding: 0 0.25em 0 0; }

/* Careers page */
.careerItemHeader { border: solid 1px #cdcdcd; font-size: 1.3em; padding: 5px; width: 100%; background-color: #E6E6E6; }
.careerItemHeader { border: solid 1px #cdcdcd; font-size: 1.3em; padding: 5px; width: 100%; background-color: #E6E6E6; }
.careerItemHeaderTitle { font-weight: bold; }
.careerItemHeader a { text-decoration: none; }
.buttonLink { border: solid 1px black; background-color: white; padding: 10px; line-height: 5em; text-decoration: none; font-size: 1.25em; font-weight: bold; }

/* holder for general messages */
.generalMessage { padding: 15px; background-color: white; color: black; border: solid 1px #cdcdcd; }
.generalMessageGreen { padding: 15px; background-color: white; color: green; border: solid 1px #cdcdcd; }


/* Jobs */
.applyTable input, .applyTable select, .applyTable textarea { border-color: #0099FF; }
.fieldIsRequired { background-image: url(images/red.jpg); background-position: top right; background-repeat: no-repeat; }
.fieldIsMissing { background-color: #FFFFCC; }
.fieldIsError { background-color: #FFFFCC; background-image: url(images/red.jpg); background-position: top right; background-repeat: no-repeat; }
.applyTable td.headerCol { background-color: #E6E6E6; color: #E6E6E6; }
.applyErrors .validation-summary-errors { background-color: #FFFFCC; }
div.bannerDivJobs { background-image: url('images/iStock_000009640488XSmall.jpg'); background-size: cover; }




/* Global layouts

    #D5E8EF The light blue color   FFFFFF: backgrounds, 
    #C7DADE light footer color.    black: html background top and bottom
    #42566F The dark blue color    #42566f: header text,  
                                   #42566f: highlight class, bolded text
                                   #9E2C4B: button, grid headers
                                   #9E2C4B: borders
    */

html { background-color: black; }
input[type='button'] { background-color: #9E2C4B; }
input[type='submit'] { background-color: #9E2C4B; }

a:link.buttonLink, a:visited.buttonLink, a:active.buttonLink, a:hover.buttonLink { background-color: #9E2C4B; color: white; }

.mainNavigation ul li a { padding: 13px 25px 14px 25px; }

.main-inner-10 { border: solid 1px slategray; margin: 5px; padding: 10px; background-color: #fff; }
/* same as main-inner but with less padding*/
.main-inner-5 { border: solid 1px slategray; margin: 5px; padding: 5px; background-color: #fff; }
/* same as main-inner but with less padding*/
.main-inner, .main-inner-5, .main-inner-10 { border: solid 1px #9E2C4B; background-color: #fff; }
.main-inner-color { border: solid 1px #9E2C4B; background-color: FFFFFF; }
/* optionally add color to some main inners */
.mainNavigation { border: solid 5px #9E2C4B; border-bottom: 0; }
.linkButton { background-color: #42566f; }
.faqQuestion { color: #42566f; }
.information { border: solid 1px #42566f; }
.highlight { color: #42566f; }
a.highlight { color: #42566f; }
.transactionsGrid { border: solid 1px #9E2C4B; }
    .transactionsGrid td, .transCell { border: solid 1px #9E2C4B; }
    .transactionsGrid th, .transHeader { background-color: #9E2C4B; }
.imageBorder { border: solid 1px #42566f; }

/* Experimenting with making the girl on the right smaller */
header #portalLogo { height: 150px; }
body { background-position-y: -93px; }

/* Jobs */
.applyTable td.headerCol { background-color: FFFFFF; color: #42566f; }


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right { float: none; }

    /* logo */
    header .site-title { margin: 10px; text-align: center; }

    /* login */
    #login { font-size: .85em; margin: 0 0 12px; text-align: center; }

        #login ul { margin: 5px 0; padding: 0; }

        #login li { display: inline; list-style: none; margin: 0; padding: 0; }

        #login a { background: none; color: #999; font-weight: 600; margin: 2px; padding: 0; }

            #login a:hover { color: #333; }

    /* menu */
    nav { margin-bottom: 5px; }

    ul#menu { margin: 0; padding: 0; text-align: center; }

        ul#menu li { margin: 0; padding: 0; }


    /* main layout
    ----------------------------------------------------------*/
    .main-content { background-position: 10px 0; }

    /* page content */
    article, aside { float: none; width: 100%; }

    /* features */
    section.feature { float: none; padding: 10px; width: auto; }

        section.feature img { color: #999; content: attr(alt); font-size: 1.5em; font-weight: 600; }

    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right { float: none; }

    footer { text-align: center; height: auto; padding: 10px 0; }

        footer p { margin: 0; }
}


/* Going Green */
.goGreenBorder { border: solid 1px #81b813; }
.goGreenButton[type='button'] { background-color: #81b813; border: solid 1px white; }
.goGreenLink { background-color: #81b813; border: solid 1px white; padding: 10px; }

/* drop down with account numbers in int */
.accountDropDown { min-width: 250px; margin: 0; font-size: 24px; }

.generalInfo { margin: 10px 0px 20px 0px; padding: 12px; font-size: 18px; color: #000; background-color: #FFFFFF; border: solid 1px #cdcdcd; }
.generalInfoGreen { margin: 10px 0px 20px 0px; padding: 12px; font-size: 18px; color: green; background-color: #FFFFFF; border: solid 1px #cdcdcd; }

.highlight-settlement { background-color: #FFFFCC; }
.bg-highlight { background-color: #FFFFCC; }

.otherpaymentoptions { background-color: #FFFFCC; }