﻿/* This file was created to handle the css for the Information Archetecture (IA) section.  The IA section
   is the full width bar right above the header image on each page with the high-level interface. */

/*9/17/2019 New color pallete implimented by Rafael Noriega*/
:root {
    /*Pantone 302*/
    --darkBlue: #093547;
    /*Pantone 377*/
    --green: #80A43F;
    /*Pantone 367*/
    --greenLight: #ACC657;
    /*Pantone 584*/
    --greenDark: #375C2D;
    /*Pantone 7624*/
    --mustard: #D4D34B;
    /*Pantone 3248*/
    --burgandy: #87241B;
    /*Pantone 7743*/
    --teal: #6CC6B0;
    /*Pantone 587*/
    --orange: #C04C28;
    /*Pantone 584*/
    --tan: #DBDB8E;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #093547;
}
/* **** Container for entire IA menu **** */
#IAContainer {
    max-width: 856px;
    min-height: 30px;
    /*width: 100%;*/
    /*height: 10px;*/
    position: relative;
    /*left: -2px;*/
    padding: 0px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    /*margin: 0 0 0 0;*/
    z-index: 2147483647; /* border:solid 1px black; */
    background-color: #093547;
    /*top:50%;*/
    /*background: url('img/TOP_navbar-trans.png') no-repeat top left;*/
}

.HeaderWrapper {
    width: 856px;
    height: auto;
    background: #fff;
    margin: auto;
    padding: 10px 0px 0px 0px;
}
.HeaderLeft {
    float: left;
    width: 40%;
    overflow: hidden;
}

.HeaderRight {
    overflow: hidden;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

/*.headerImgWide {
    padding-top: 10px;
    padding-bottom: 15px;
    width:100%;
    max-width:856px;
    height:auto;
}*/
.headerImgStacked{
    margin: auto;
    width:auto;
    height: 85px;
}
.IATopMenu {
    /*font-weight: bold;*/
    color: white;
    display: block;
    border: none;
    text-decoration: none;
    /*width:215px;*/
    width: 100%;
    /*height:30px;
    padding-top:10px;*/
    text-align: center;
    min-height: 30px;
    font-size: 13pt;
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: default;
    background-color: #093547;
}
    .IATopMenu:hover {
        text-decoration: none;
        color: white;
        background-color: #375C2D;
    }
    .IATopMenu:visited {
        text-decoration: none;
        color: #80A43F;
    }
.IAfirst_list li ul li a:hover, .IAfirst_list li ul li a:focus, .IAfirst_list li ul li a:active {
    text-decoration: underline;
    background-color: #EEEEEE;
}

/* **** Container for each section of the IA menu **** */
.IAmainmenu {
    float: left;
    background-color: #093547;
}

/* **** Div that contains the data in the dropdown portion (under the header) **** */
.IAdropdown_menu {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    /*max-width: 844px;*/
    min-width:100%;
    min-height: 200px;
    position: absolute;
    top: 60px;
    left: 0px;
    /*background-color: #e0f0ff;*/
    background-color: #f6fafe;
    z-index: 20;
    border: solid #3c6288 1px;
    overflow: hidden;
    padding-top:14px;
    padding-bottom:8px;
    /*padding-left:10px;*/
}


.IAdropdown_menu a {
    /* **** IA link text under images **** */
font-size:.9em;
}

    /* **** IA link text under images: HOVER **** */
    .IAddimglnktext:hover {
        text-decoration: underline;
        background-color: #FFF;
    }

/* **** UL that contains the data in the full-width dropdown **** */
.IAfirst_list {
    display: inline;
    width: 975px;
    height: 250px;
    padding: 0 0 0 0;
}

    /* **** 1st level of li in the UL that contains the data in the **** 
   **** dropdown (this contains each column)                    **** */
    .IAfirst_list li {
        display: inline;
        float: left;
        text-align: left;
        width: 208px;
        font-weight: bolder;
        padding: 0 0 0 4px;
        margin: 0 0 0 0;
        text-align: left;
    }

.IAfirst .dropdown_list .IANestedIndent li {
    padding: 0 30px;
}
/* **** HOVER on A tag inside the 2nd level li in the Nested UL inside the 1st level  ****
/* **** li in the UL that contains the data in the dropdown (this contains the links) **** */
.IAfirst_list li ul li a:hover, .IAfirst_list li ul li a:focus, .IAfirst_list li ul li a:active {
    text-decoration: underline;
    background-color: #fbffB7;
}
/* **** Nested UL inside the 1st level li in the UL that contains ****
/* **** the data in the dropdown (this contains the links)        **** */
.IAfirst_list li ul {
    width: 200px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    z-index: inherit;
    background: none;
}

    /* **** 2nd level li in the Nested UL inside the 1st level li in the UL  ****
/* **** that contains the data in the dropdown (this contains the links) **** */
    .IAfirst_list li ul li {
        margin: 0 0 0 0;
        padding: 1px 1PX 1px 1px;
        z-index: inherit;
        width: 206px;
        list-style: none;
        text-align: left;
        font-weight:normal;
    }

        /* **** A tag inside the 2nd level li in the Nested UL inside the 1st level li in ****
/* **** the UL that contains the data in the dropdown (this contains the links)   **** */
        .IAfirst_list li ul li a {
            display: block;
            text-decoration: none;
            color: #24496b;
            /*background: url('img/IADottedLineDevider.gif') left bottom repeat-x;*/
            padding: 5px 2px 4px 6px;
            margin: 0;
        }



/* **** Div that contains an image **** */
.IAimage {
    padding: 7px 0 0 9px;
}

    /* **** A tag in a div that contains an image **** */
    .IAimage a, .IAimage a:visited {
        text-decoration: none;
        /*color: #24496b;*/
        display: block;
        width: 230px;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        text-align: left;
        border: none;
        line-height: 1.5;
    }

        /* **** A tag in a div that contains an image: HOVER **** */
        .IAimage a:hover, .IAimage a:focus, .IAimage a:active, .IAimage a:visited:hover {
            text-decoration: underline;
            background-color: #3A78AF;
            color: #FFF;
        }

    /* **** Class specific to the image in a div that contains an image **** */
    .IAimage img {
        border: none;
    }

/* ***********************************************************************
   ****                         SUB-HEADER NOTES                      ****
   **** Any sub-header at the top of the page can use the             ****
   **** IAflydown_subheader_top class.  If there is a sub-header      ****
   **** below that it must use a spacer class and a class with the    ****
   **** position of the sub-header.  This is because the positioning  ****
   **** of the div starts directly below the top sub-header div.      ****
   **** It helps to visualize this by adding a border around the      ****
   **** top sub-headers and the lower ones you are working with (see  ****
   **** the remmed out code in the IAflydown_sub_header_top class).   ****
   *********************************************************************** */

/* **** Top sub-header **** */
.IAflydown_sub_header_top {
    font-weight: bold;
    color: #000000;
    padding: 0px 5px;
    position: relative;
    left: -10px;
    /* border: solid 1px black; */
}

/* **** Second subheader **** */
.IAflydown_sub_header_second {
    font-weight: bold;
    font-size:medium;
    color: #000000;
    padding: 0px 0px 0px 0px;
    float: left;
    position: relative;
}

/* **** Job General subheader **** */
.IAflydown_sub_header_jobgeneral {
    font-weight: bold;
    color: #000000;
    padding: 20px 5px 0px 5px;
    float: left;
    position: relative;
    left: -10px;
}

/* **** IA headers **** */
#IAresidents, #IAvisitors, #IAbusiness, #IAservices, #IAjobs, #IAdepartments, #IAemergency {
    font-weight: bold;
    color:white;
    display: block;
    border: none;
    text-decoration: none;
    line-height: 29px;
    padding: 0 66.5px 0 66.5px;
    margin: 3px 0 0 0;
    /*background: url('img/IAHeaderDevider.gif') no-repeat right center;*/
}

.IAArrowimageHowDoI {
    position: absolute;
    left: 147px;
    top: 9px;
}

.IAArrowimageServices {
    position: absolute;
    left: 330px;
    top: 9px;
}

.IAArrowimageCommunity {
    position: absolute;
    left: 535px;
    top: 9px;
}

.IAArrowimageCareers {
    position: absolute;
    left: 715px;
    top: 9px;
}

.IAArrowimageGovernment {
    position: absolute;
    left: 925px;
    top: 9px;
}

/* **** IA headers (all) HOVER **** */
#IAresidents:hover, #IAvisitors:hover, #IAbusiness:hover, #IAservices:hover, #IAjobs:hover, #IAdepartments:hover, #IAemergency:hover, #IAresidents:focus, #IAvisitors:focus, #IAbusiness:focus, #IAservices:focus, #IAjobs:focus, #IAdepartments:focus, #IAemergency:focus, #IAresidents:active, #IAvisitors:active, #IAbusiness:active, #IAservices:active, #IAjobs:active, #IAdepartments:active, #IAemergency:active {
    background: url('img/IAHeaderRolloverBG.gif') repeat-X top left;
    text-decoration: underline;
    color: #fff;
}

/* **** A nested indented div **** */
.IANestedIndent {
    padding: 0 0 0 5px;
}