/**
 * public.css
 *
 * Frontend stylesheet
 *
 * @import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono);
 * Using JS Google Font Loader instead, minimizes flash of unstyled text.
 * See https://developers.google.com/fonts/

 **** http://fontpair.co/ ****

 * Front end: Use Source Sans Pro 16px for body text and Oxygen bold for headlines
 * Backend end: Droid Sans at 15px for body text and Oswald normal for headlines
 */

/* Structure */
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17px;
    color: #333;
    background-color: #E6E1DB;
    /*background: #ACA8A9 url("../images/bg-grey.jpg");*/
}
body.layout-twocol, body.layout-plainlite { background-color: #fff; }
.layout-twocol #titlebar, .layout-plainlite #titlebar { background-color: #E6E1DB; }
.container {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

header {
    background-color: #fff; /* 11314A */
    box-shadow: 0 0 5px #C1B9B5;
    margin-bottom: 10px;
}
header .container { display: table; }
footer {
    text-align: center;
    padding: 15px 0 20px 0;
    border-top: 1px dashed #A99F99 /* match h1*/;
    margin: 40px auto 0 auto;
    max-width: 750px;
}
footer.sticky {
    position: fixed;
    width: 100%;
    bottom: 0px;
    /* These next two center align it but keep it responsive */
    left: 50%;
    transform: translate(-50%, 0);
}
#logo {
    display: table-cell;
}

#content {
    display: table;
    width: 100%;
}
#side {
    display: none;
    padding: 10px;
    box-sizing: border-box;
}
.layout-twocol #side { display: block; /* Show always for content pages */ }
#sidebar {
    background-color: #F1EEEB; /* inner wrap for two col pages A99F99 */
    padding: 10px;
    margin-top: 20px;
}
#main {
    padding: 10px;
    box-sizing: border-box;
}



/* Typography */
p {
    margin: 10px 0;
    line-height: 135%;
}
p.leader {
    border-top: 1px dashed #A99F99;
    border-bottom: 1px dashed #A99F99;
    padding: 18px 0;
    text-align: center;
    font-style: italic;
}
footer p {
    color: #666;
    font-size: 13px;
}

h1, h2, h3 {
    font-family: 'Oswald', sans-serif ;
    color: #1C4865;
    margin: 25px 0 18px 0;
    /*text-shadow: 1px 1px #bbb;*/
    line-height: 135%;
}
h1.logo { font-size: 62px; } /* Home page */
h1 { font-size: 36px; }
h2 { font-size: 30px }
h3 { font-size: 24px; }

.layout-twocol h1, .layout-plainlite h1 { margin-top: 5px; padding: 0 0 15px 10px; }
#sidebar h3 { margin: 0;
    background-color: #1C4864;
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    padding: 2px 8px;
}

small { font-size: 14px; }


/* Links */
a { color: #E35D74; } /* C74F6E E35D74 */
a:hover { text-decoration: underline; color: #C74F6E; }
#content a { text-decoration: underline; }
#content a:hover { text-decoration: none; }
#logo a { display: inline-block; padding: 0 12px; height: 36px; line-height: 36px; font-size: 95%; }
#logo a:hover { color: #fff; background-color: #FF7980; text-decoration: none; }
footer a { color: #A99F99; display: inline-block; margin: 0 4px; }
footer a:hover { text-decoration: underline; }

/* Pretend Links */
.dark i.clickable { color: #A99F99; }
i.clickable:hover { color: #C74F6E; cursor: pointer; }


/* Lists */
#view ul {
    padding-left: 50px;
    list-style-type: square;
}
#view li, #sidebar li {
    padding-left: 10px;
    line-height: 130%;
}
/* Fields List
#sidebar ul#content-links-term-43 li::before { content: '-  '; } */





/* Navigation */

#main-menu { /* Navigation Bar */
    text-align: right;
    horiz-align: right;
    display: table-cell;
}

/* All Links */
#main-menu ul {
    position: relative;
    font-size:0; /* Shrink white space gap between Li elements */
    padding: 0;
    margin: 0;
}
#main-menu ul:after { /* Clearfix to nested floats */
    content: "";
    clear: both;
    display: block;
}
#main-menu ul li {
    font-size: 16px; /* Return the font size inside Li elements */
    list-style-type: none;
}

#main-menu a {
    height: 36px;
    line-height: 36px;
    font-size: 95%;
}
#main-menu a {
    height: 36px;
    line-height: 36px;
    font-size: 95%;
}
#main-menu a, #logo a {
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}


/* Top Level Parent Links */
#main-menu > ul {}

#main-menu > ul > li {
    display: inline-block;
}
#main-menu > ul > li > a {
    display: block;
    padding: 0 12px;
}

#main-menu > ul > li > a:hover {
    background-color: #FF7980;
    color: #fff;
    text-decoration: none;
}

/* Child Menu Links */
#main-menu ul ul {
    display: none; /* Hide all submenus by default */
    position: absolute;
    z-index: 9999;
    top: 28px;
}
#main-menu ul li:hover > ul {
    display: block;
    background-color: #494949;
    min-width: 150px;
    box-shadow: 2px 2px 4px #666;
}
#main-menu ul ul li {
    position: relative;
    z-index: 9999;
}
#main-menu ul ul li a {
    display: block;
    height: 25px;
    line-height: 25px;
    color: #ccc;
    padding: 0 10px;
}
#main-menu ul ul li a:hover {
    background-color: #a8cece;
    color: #000; /*#navy*/
}

/* Grandchild Menu Links */
#main-menu ul ul ul {
    position: absolute;
    left: 100%; /* 100% lines up exact */
    top: 0px;
}

/* Link to show/hide mobile menu  */
a#menu-toggle {
    text-align: center;
    background-color: #11314A; /* matches top nav bg */
    background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
    background-repeat: no-repeat;
    background-position: 10px center;
    display: block;
    font-weight: bold;
    color: #efefef;
    height: 36px;
    line-height: 36px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120;
}
a#menu-toggle:hover { text-decoration: none; }

/* Menu Media Queries */
/* Mobile only styles */
@media (max-width: 767px) {

    /* Menu is cloned in mobile.js. Hide the desktop version when mobile */
    #main-menu, .desktop {
        display: none !important;
    }

    #main-menu:not(.mm-menu) {
        /* Removes flash of unstyled content in mobile menu */
        display: none;
    }
}
/* Commence styles for desktop and wider devices */
/* Switch to desktop menu at 768px width */
@media (min-width: 768px) {

    /* Menu is cloned in mobile.js. Hide the mobile version when desktop */
    #mm-main-menu, a#menu-toggle, .mobile {
        display: none !important;
    }

    #side {
        display: table-cell;
        vertical-align: top;
        min-width: 200px;
    }
    #main {
        display: table-cell;
        vertical-align: top;
        width: 750px;
    }

}


/* Miscellaneous */
.table { display: table; width: 100%;  }
.row { display: table-row; width: 100%; }
.cell { display: table-cell; }
.left { text-align: left; }
.center { text-align: center; }
.right{ text-align: right; }
.hidden { display: none !important; }

/* Maintenance mode message on home page & login */
#mm-login-notice {
    background-color: #EAE5E0;
    border: 1px solid #E15C75;
    border-radius: 3px;
    margin: 15px 0;
    padding: 0 15px;
}

.ajax-error { color: red; font-weight: bold; }
.ajax-success { color: green; font-weight: bold; }


/* Form Error Messages - Classes written to form via JS in includes/post-validate.php */
/* span.form-error-message { color: #990000; padding: 10px; }  for light backgrounds */
span.form-error-message { color: #faaeae; padding: 10px; font-size: 15px; } /* for dark backgrounds */
span.form-error-message b { color: deeppink; /* emphasize parts of a message */ }

/* Usually on a form field but can be div, p tag also */
.form-error { background-color:#FFDDDD !important; }

p.form-error,
div.form-error, /* checkbox/radio group */
span.form-error, /* individual checkboxes */
select.form-error,
textarea.form-error,
input[type='text'].form-error,
input[type='password'].form-error
{
    /* border: 1px solid #DB9999 !important; */
    box-shadow: inset 3px 3px 3px #faaeae !important;
    color: #600 !important; /* for dark themes */
}

/* Error messages can be individually styled, eg: #form-error-field_name */
#form-error-name { display:block; margin-top: -5px; }

/* Base styles (mobile)*/
form dl { padding: 10px; }
form dt { margin: 3px 0; padding-top: 5px; }
form dd { margin: 3px 0; }

/* Forms Layout */
@media (min-width: 400px) {
    /* Switch to 2 column layout */
    form dl * { box-sizing: border-box; }
    form dt, dd {  margin: 3px 0; /*border: 1px solid yellow;*/ }
    form dt { padding: 5px 10px; clear: left; float: left; text-align: right; }
    form dd { padding: 5px 10px; }

    form .size-4 dd { margin-left: 4em; }
    form .size-5 dd { margin-left: 5em; }
    form .size-6 dd { margin-left: 6em; }
    form .size-7 dd { margin-left: 7em; }
    form .size-8 dd { margin-left: 8em; }
    form .size-9 dd { margin-left: 9em; }
    form .size-10 dd { margin-left: 10em; }
    form .size-11 dd { margin-left: 11em; }
    form .size-12 dd { margin-left: 12em; }
    form .size-13 dd { margin-left: 13em; }
    form .size-14 dd { margin-left: 14em; }
    form .size-15 dd { margin-left: 15em; }
    form .size-16 dd { margin-left: 16em; }
    form .size-17 dd { margin-left: 17em; }
    form .size-18 dd { margin-left: 18em; }
    form .size-19 dd { margin-left: 19em; }
    form .size-20 dd { margin-left: 20em; }

    /* Labels widths - placed in dl tag or use for field sizes in dd tag */
    .size-4 dt, dd .size-4 { width: 4em; }
    .size-5 dt, dd .size-5 { width: 5em; }
    .size-6 dt, dd .size-6 { width: 6em; }
    .size-7 dt, dd .size-7 { width: 7em; }
    .size-8 dt, dd .size-8 { width: 8em; }
    .size-9 dt, dd .size-9 { width: 9em; }
    .size-10 dt, dd .size-10 { width: 10em; }
    .size-11 dt, dd .size-11 { width: 11em; }
    .size-12 dt, dd .size-12 { width: 12em; }
    .size-13 dt, dd .size-13 { width: 13em; }
    .size-14 dt, dd .size-14 { width: 14em; }
    .size-15 dt, dd .size-15 { width: 15em; }
    .size-16 dt, dd .size-16 { width: 16em; }
    .size-17 dt, dd .size-17 { width: 17em; }
    .size-18 dt, dd .size-18 { width: 18em; }
    .size-19 dt, dd .size-19 { width: 19em; }
    .size-20 dt, dd .size-20 { width: 20em; }
}

section.small-form {
    max-width: 450px;
    margin: auto;
}
.view-contact section.small-form { max-width: 500px; /* Conatct Us form*/ }
.small-form fieldset {
    /* background-color: #0C697F; 1F4565 */
    background-color: #1F4565; /*  1F4565 */
    padding: 30px 20px;
    box-shadow: 3px 3px 3px #C6BAAC;
}

.dark label { color: #fff; font-size: 16px; }

.dark textarea,
.dark input[type=text],
.dark input[type=password] {
    width: 100%;
    max-width: 240px;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: inset 3px 3px 3px #DDD6CD;
    background-color: #F1EEEB;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
}
.dark textarea { font-family: inherit; font-size: inherit; max-width: 400px; }
.dark input[type=submit] {
    padding: 5px 12px;
    /*box-shadow: 3px 3px 3px #62687E;*/
    background-color: #ddd;
    border: 1px solid #fff;
    border-right-color: #666;
    border-bottom-color: #666;
    color: #112E4B;
    font-weight: bold;
    letter-spacing: 1px;
    font-variant: small-caps;
}
.dark input[type=submit]:hover {
    background-color: #D4D6DE;
    color: #1C4865;
}
.dark input[type=submit]:active {
    position:relative;
    top:1px;
    box-shadow: none;
    background-color: #dfe1e9;
}

/* Legal Documentation - Terms of Service, Privacy Policy */
/* TOS incorporated into multiple pages. Descendant
   selectors will stop css leakage to other pages */
.legal-doc #view ol { margin-left: 40px; }
.legal-doc #view ol.lower-roman { list-style-type: lower-roman; }
.legal-doc #view ol li { margin: .6em 0; }
.legal-doc #view ul li { margin: .3em 0; }
.legal-doc #view dt { font-weight: bold; }
.legal-doc #view dd { margin: 0 0 10px 20px; line-height: 130%; }
.legal-doc #view p.tab1 { padding-left: 24px; }


/* Signup page contains Terms-Of_service box */
#tos-box {
    background-color: white;
    padding: 10px;
}
#tos-head { font-weight: bold ; font-size: 18px; padding-bottom: 6px; color: #1F4565; }
#tos-foot { font-size: 14px; padding-top: 6px; }
#tos-foot label { color: #333; }
#tos-terms {
    height: 80px;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 13px;
    overflow-y: scroll;
    box-shadow: inset 2px 2px 3px #f2f2f2;
    background-color: #fdfaf7;
    color: #888;
}
#tos-terms:hover { color: #333; background-color: #fffcf9; }
#tos-terms h2, #tos-terms h3 {
    font-weight: bold; font-variant: small-caps;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    color: inherit;
}
#tos-terms h2 { font-size: 15px; margin: 10px 0 7px 0; }
#tos-terms h3 { font-size: 14px; margin: 7px 0 5px 0; }
#tos-terms h2:first-child { margin-top: 0; }
#tos-terms p { margin: 5px 0; line-height: 1em; }
#tos-terms ol { margin-left: 20px; }
#tos-terms ul { margin-left: 30px; list-style-type: disc; }
#tos-terms ol.lower-roman { list-style-type: lower-roman; }
#tos-terms ol li { margin: .4em 0; }
#tos-terms ul li { margin: .2em 0; }
#tos-terms dl { margin: .2em 0; padding: 0; }
#tos-terms dt { float: none; padding: 0; margin: 5px 0 0; text-align: left; font-weight: bold; }
#tos-terms dd { float: none; padding: 0; margin: 0 0 5px 7px; line-height: normal; }
#tos-terms p.tab1 { padding-left: 15px; }