﻿
/* ================================================ */
/* Top navigation and Fact Sheet Reading Level tabs */
/* ================================================ */
#topnav {
	padding:0px;
	position:absolute;
	bottom:0px;
}


#topnav li li {
    position: relative;
    top: auto;
}


/* ---------------------------------------------------- */
/* GLOBAL NAV
/* ---------------------------------------------------- */

#gnav {
    padding:0px;
	margin:0px;
    height: 44px;
    width:672px;
	z-index: 10;
    -webkit-border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
    background-image: -ms-linear-gradient(top, #2C72B7 0%, #104273 100%);
    background-image: -moz-linear-gradient(top, #2C72B7 0%, #104273 100%);
    background-image: -o-linear-gradient(top, #2C72B7 0%, #104273 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2C72B7), color-stop(100, #104273));
    background-image: -webkit-linear-gradient(top, #2C72B7 0%, #104273 100%);
    background-image: linear-gradient(to bottom, #2C72B7 0%, #104273 100%);
}

#gnav {
	position: relative;
	list-style-image: none;
	list-style-type: none;
}
#gnav a {
    color:rgb(32, 85, 138);
}
#gnav ul {
    list-style-image: none;
    list-style-type: none;
    padding:0;
}
#gnav.sticky li {
    position: relative;
    float:left;
    display: inline-block;
    left: 0px !important;
}
#gnav li {
	position: absolute;
	top: 0;
	height: 44px;
	padding: 0;
	margin: 0;
	background: none;
    border-right:1px solid #fff;    
    z-index: 100;
}
#gnav li:last-of-type {
    border-right:none;
}
#gnav li a:hover {
    text-decoration: none;
}
#gnav li li {
    border-right:none;
    position:relative;
    height:auto;
    padding-bottom:10px;
    float:left;
    clear:both;
}
    #gnav li li a {
        float:left;
    }
    #gnav li li a:hover {
        color:red;
    }
    #gnav li li span {
        float:left;
        clear:both;
        padding-left:20px;
    }

#gnav li .atab {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	z-index: 30;
    width: 100%;
}

    #gnav li .atab a.lnk {
        display: none;
        color:#a00000 !important;
        padding-top:11px;
        float:left;
    }
    #gnav li .atab a.lnk:hover {
        text-decoration:underline;
    }
#gnav a:visited {
    color: rgb(32, 85, 138);
}
#gnav a:hover {
	color: red;
}
#gnav div.atab a {
	display: block;
	height: 45px;
    padding:11px 0 0 20px;
    font-size:14px;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
}
#gnav div.atab a span:hover, #gnav div.atab a:hover span {
	color:#002e5a !important;
    text-decoration:none;
}

#gnav #tab-first {
	width: 168px;
	left: 0;
}
#gnav #tab-first.hover-on {
    -webkit-border-radius: 8px 0px 0px 0px;
    -moz-border-radius: 8px 0px 0px 0px;
    border-radius: 8px 0px 0px 0px;
}

#gnav #tab-second {
	width: 168px;
	left: 168px;
}
#gnav #tab-second.show .atab {
}

#gnav #tab-third {
	width: 178px;
	left: 336px;
}
#gnav #tab-third.show .atab {
}

    #gnav #tab-fourth {
        width: 152px;
        left: 513px;
        border-right: none;
    }
#gnav #tab-fourth.hover-on {
    -webkit-border-radius: 0px 8px 0px 0px;
    -moz-border-radius: 0px 8px 0px 0px;
    border-radius: 0px 8px 0px 0px;
}
    #gnav li.pad {
        padding:0 20px;
    }
    #gnav li.logo {
        padding:0 20px;
        border-right: none !important;
    }
        .onscroll {
            display: none;
        }
/* The sticky class is added to the header with JS when it reaches its scroll position */

#gnav.sticky {
    position: fixed;
    top: 0;
    width: 101%;
    background-color: #1f5489;
    margin-left: calc(-100vw / 2 + 960px / 2);
    margin-right: calc(-100vw / 2 + 960px / 2);
    border-radius: 0 !important;
    border-bottom: 1px solid #1f5489;
}
/* We need to offset anchors a bit so when the browser scrolls to them, they aren't hidden under #gnav 
    edit -- this is now handled with jQuery in site.master
*/
/*.anchor {
    margin-top: -70px;
    padding-top: 70px;
}
a[name] {
    top: -75px;
    display: block;
    position: relative;
    visibility: hidden;
}*/

@media (max-width: 1286px) {
    #gnav.sticky #nav-search .txt_search {
        width: 50%;
    }
    #gnav li.whitebg {
        padding: 0 10px;
    }
    #gnav li.pad {
        padding: 0;
    }
}
@media (max-width: 1160px) {
    #nav-search {
        display: none;
    }
}
    /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + #container {
        padding-top: 102px;
    }

    /* ---------------------------------------------------- */
    /* GLOBAL NAV > MEGA MENUS
/* ---------------------------------------------------- */

    .hidden {
        position: absolute;
        left: -10000px !important;
        top: auto !important;
        width: 1px;
        overflow: hidden;
    }

    #gnav .megamenu {
        position: absolute;
        top: 39px;
        left: -5px;
        padding: 18px 18px 7px 20px;
        background: #fff;
        border: 5px solid rgb(32, 85, 138);
        border-top: none;
        -moz-border-radius-bottomleft: 7px;
        border-bottom-left-radius: 7px;
        -moz-border-radius-bottomright: 7px;
        border-bottom-right-radius: 7px;
        z-index: 5;
        -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
        box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
    }

        #gnav .megamenu::after {
            border-top: 5px solid rgb(32, 85, 138);
            content: '';
            display: block;
            position: absolute;
            right: 0;
            width: 781px;
            top: 0px;
        }

    #gnav div.atab a {
        height: auto;
    }

    #gnav .hover-on {
        text-decoration: none;
        background: #fff !important;
        border: 5px solid rgb(32, 85, 138) !important;
        border-bottom: none !important;
    }

        #gnav .hover-on div.atab a {
            color: #002e5a;
        }


    #gnav .megamenu .leftcol {
        float: left;
        padding-right: 20px;
        width: 175px;
        border-right: 1px solid #d7d7d7;
        display: table-cell;
        min-height: inherit;
    }

    #gnav .megamenu .rightcol {
        float: left;
        padding-left: 20px;
        width: 175px;
        display: table-cell;
    }

    .leftcol.wide {
        width: 100%;
        border-right: none;
    }

    #gnav #tab-first .megamenu {
        min-width: 400px;
    }

        #gnav #tab-first .megamenu::after {
            width: 270px;
        }

    #gnav #tab-second .megamenu {
        min-width: 400px;
    }

        #gnav #tab-second .megamenu::after {
            width: 270px;
        }

    #gnav #tab-third .megamenu {
        width: 400px;
    }

        #gnav #tab-third .megamenu::after {
            width: 260px;
        }

    #gnav #tab-fourth .megamenu {
        min-width: 400px;
    }

        #gnav #tab-fourth .megamenu::after {
            width: 286px;
        }

    #gnav #tab-fourth .megamenu {
        clear: both;
        padding-bottom: 10px;
    }

    .clearfix {
        overflow: auto;
    }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }