body{margin: 0px}

#BigMenu {width:100%;height:60px;background-color:#0E3E6E;color:#ffffff;}

.MenuMPL
{
    /* You will get totally diffrent menu alignment and layout by setting following margin, width, and float with different values.  */
    margin: 0px; width: 100%;float:left;
    /*following "behavior" works for IE6, IE7, and IE8. Other browsers will ignore it.*/
    /*Note: htc file path(if using relative path) inside the CSS file should be relative to the page, not to the CSS file (this is unlike image path inside the CSS that is relative to the CSS file location only). 
    So we recommend using the absolute path for the behavior file.
    behavior: url("css/HTC-cssmenu.htc");*/
    position:relative;
    z-index:4;
    height: 37px;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}

.MenuMPL div {
    box-sizing:content-box;
}  
   
	  
.MenuMPL li
{
    padding: 0px 0px;
    float: left;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    height: 60px;
		color: white;
    z-index:5;

}

.MenuMPL a
{
    padding: 0px 17px 0px 17px;
    line-height:60px; /*Note: keep this value the same as the height of .MenuMPL li */
    font-size: 15px;
		font-weight:400;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: white;
    position: relative;
}

.MenuMPL li:hover a, .MenuMPL li.onhover a
{
		background: #123148;
    z-index: 9;
}

        
/*Used to align a top-level item to the right*/        
.MenuMPL li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
/* sub level
 --------------------------------------------*/
.MenuMPL .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
		border-top:solid 1px #ffffff;
		background-color: #333333;            
    text-align: left;
    padding: 0px;
    color:#0F4F89;
    top:59px;              
}	
.MenuMPL .drop a
{
    width:100%;
		height:40px;
		padding: 0px;
    font-size: 14px;
		font-weight:400;
    display: block;
		border-bottom:solid 1px #ffffff;
    text-align: left;
    z-index: 0;
}
.MenuMPL li:hover .drop, .MenuMPL li.onhover .drop
{
    left: -1px;/*Use this property to change offset of the dropdown*/
    background-color:#333333;
}

/* Sub-menu drop down
--------------------------------------------*/

.MenuMPL .drop 
{
    width:200px;
}
.MenuMPL li .drop a
{
    background: none;
    display: block;
    line-height:40px;
    background-color:#333333;
    padding:0 10px;
		font-weight:400;
}

.MenuMPL li .drop a:hover
{
    text-decoration:none;  
    background-color: #222222;
}














/* SMALL Menu from http://kmturley.blogspot.com/2014/06/responsive-mobile-dropdown-navigation.html --*/

/* header */
#SmallMenu {height:46px;overflow:hidden;}

.SMheader {

  background-color:transparent;
  background-color:#0E3E6E;
  position: absolute;
  width: 100%;
  z-index:10;
	padding-left:10px;
  
}

/*Used to add background arrow for dropdown if desired*/        
.SMheader .arrow
{
    padding:0px;float:right;padding-top:8px;
}

.SMheader ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #FFFFFF;
}

.SMheader li a {
  display: block;
  text-align:left;
	padding: 8px 20px;
  border-top: 1px dotted #f3f3f3;
  border-bottom: 1px dotted #000000;
  font-weight:300;
  text-decoration: none;
	color:#FFFFFF;
	background-color:#123148;
}

.SMheader li a:hover,
.SMheader .menu-btn:hover {
 background-color:#0E3E6E;
 color:#ffffff;

}



/* menu */

.SMheader .menu {
  clear: both;
  max-height: 0;
	width:100%;
  transition: width .5s ease-out;
  transition: max-height .2s ease-out;

}
/* submenu controls */
#ConsumerResources{display:none;}
#Members{display:none;}
#Training{display:none;}
#HomeSearch{display:none;}

#submenu {
background-color:#333333;
-moz-box-shadow: 0 0 3px #333; 
-webkit-box-shadow: 0 0 3px #333; 
box-shadow: 0 0 3px #333;
margin:0px 0px 0px 10px;
}

#submenu:hover {
background-color:#222222;
}





/* The rest controls the menu icon */
.SMheader .menu-icon {
  cursor: pointer; 
  display: inline-block;
  float: left;
  padding: 20px 10px 21px 5px;
  position: relative;
  user-select: none;
}

.SMheader .menu-icon .navicon {
  background: #ffffff;
  display: block;
  height: 3px;
  position: relative;
  transition: background .5s ease-out;
  width: 20px;
}

.SMheader .menu-icon .navicon:before,
.SMheader .menu-icon .navicon:after {
  background: #ffffff;
  content: '';
	display: block;
  position: absolute;
  height: 100%;
  transition: all .2s ease-out;
  width: 100%;
}

.SMheader .menu-icon .navicon:before {top: 7px;}
.SMheader .menu-icon .navicon:after {top: -7px;}

/* menu btn */
.SMheader .menu-btn {display: none;}
.SMheader .menu-btn:checked ~ .menu {max-height: 2000px;}
.SMheader .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.SMheader .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.SMheader .menu-btn:checked ~ .menu-icon .navicon:after  {transform: rotate(45deg);}
.SMheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.SMheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}