/* CSS styling for the header which includes the GDS logo and header menus.
This needs to be able to respond to different
screen widths by making the menus collapsible on narrow devices. */


#header { 
/*a div element, only one on each page, occupies the full width of the top of page.
Logo and menu contained within this. A tagline sits below the logo */

    display:block;
    position:relative;
    overflow:hidden; /*needed to make the container div expand to height of contents */
    margin-bottom:40px;
    font-family:'Barlow Medium',Barlow,Helvetica;
vertical-align:top;
background-color:black;
margin-left:-40px;
margin-right:-40px; /*compensate for the body margin*/
padding-left:40px;
padding-top:10px;
padding-bottom:10px;

border-color: rgba(0, 255, 136, 0.15);
border-width: 1px 0 1px 0;
border-style:solid;
}

#header #logo {
    display:inline-block; 
    font-family:Barlow; 
    color:white;
    padding-bottom:0.2em;
    margin-right:2em;

    line-height:36px; 
font-size:28px;;
line-height:33px;
    font-weight:normal;

    overflow:hidden;
    user-select:none;
vertical-align:top;
}


#header #menu1 {
    
    display:inline-block; 
    color:white;
    font-size:18px;
    padding-left:2em;
    padding-right:2em;
    text-transform:uppercase; 
    vertical-align:top;


}


#header #menu1 span {
    display:block;
}

#header #menu1 span a {
    color: white;
    text-decoration:none;
}


#header #menu1 span a:hover {
    color: dodgerblue;
}

#header #menu1 .menuactiveitem:after {
    content:' \25B8';
}


#header #menu2 {
    display:inline-block; 
    color:grey; 
    padding-left:3em;
    font-weight:normal;
}

#menu3 {
    color:#60573e;
}

#header #menu2 .menuitem, #menu3 .menuitem {
    padding-right:2em;
}

#header #menu2 a, #menu3 a {
    color:inherit;
    text-decoration:none;
}

#header #menu2 .menuactiveitem, #menu3 .menuactiveitem {
    font-weight: bold;
}


#header #tagline {
    clear:left;
    margin-left:12px;
    color:#00cf6f;

}

#header #menuwrap {
/*This menu wrapper will contain the top and second-level menus.*/
    float:right;
    height: 150px;

    text-align:right;

}

#header #menuwrap #mainmenu {
    margin:0;
}

#header #menuwrap #mainmenu .menuitem {
    margin:0;
    padding:0;
}

#header #menuwrap #mainmenu .menuitem a {
    position:relative;
    margin:0;
    padding:35px 40px 10px 40px;
    display:inline-block;
    border-width:0px 0px 2px 0px;
    border-style:solid;
    border-color: #00e472;
    color: black;
    text-transform:uppercase;
    text-decoration:none;
}

#header #menuwrap #mainmenu .menuactiveitem a {
    border-width:2px 2px 0px 2px;
    top:1.5px;
}




#header #menuwrap #submenu {
    margin:0;
    border-right: 2px solid #00e472;
}

#header #menuwrap #submenu .menuitem a {
    color: black;
    display:inline-block;
    padding:10px 20px 10px 20px;
    text-decoration:none;
}

#header #menuwrap #submenu .menuitem a:hover {
    border-bottom: 2px solid #00e472;
}

#header #menuwrap #submenu .menuactiveitem a {
    border-bottom: 2px solid #00e472;
}

#header #menuwrap .menuitem:not(.menuactiveitem) a:hover {
    background-image: linear-gradient(#ffffff, #f0f0ff);
}

#header #menuwrap .menuactiveitem a:hover {
    background-image: linear-gradient(#eeeeff, #ffffff);
}