/* top level
--------------------------------------------*/

.megamenucontainer
{
	clear: both; 
	display: block;
}

.megamenu
{
    /* You will get totally different menu alignment and layout by setting following margin, width, and float with different values. */
    margin: 5px 0 10px auto; 
    float:left;
    position:relative;
    z-index:4;
    height: 36px;
    background: #004165;
    border: none;
    xfont-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
	width:100%;
}
.megamenu li
{
    padding: 0;
    float: left;
    min-height: 36px;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    color: #FFFFFF;
    z-index:5;
}

.megamenu a
{
    padding: 0 30px;
    line-height: 36px; /*Note: keep this value the same as the height of .megamenu li */
    font-weight: bold;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: #FFFFFF;
    position: relative;
}
.megamenu li:hover a, .megamenu li.onhover a
{
    background-color:#007DBA;
	color: #ffffff;
    z-index: 9;
}
.megamenu a.arrow
{
    background: no-repeat right center;
}
 
        
/*Used to align a top-level item to the right*/        
.megamenu li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
/*for the top-level separators*/
.megamenu li.separator
{
    font-size:0;
    overflow:hidden;
    border-left:1px solid #007DBA;
    z-index:4;
}
               
.megamenu li.menuToRight
{
	float:right;
}			   

.megamenu li a.home {
	background-image: url('Images/home_icon.png') !important;
	background-position:50% 50%;
	background-repeat:no-repeat;
	height:36px;
}

.megamenu li a.arrow span {
	position: absolute;
    left: -9999px;
	overflow:hidden;
}
			
        
/* sub level
--------------------------------------------*/
        
.megamenu .submenu
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:3px solid #0F4F89;
    background-color: #007DBA;            
    text-align: left;
    padding: 10px 0 10px 0;  
    color:#FFFFFF;
    top:36px;   
	overflow:hidden;
	width:650px;
}

.megamenu .submenu ul{
	list-style: none;
	padding:0;
	margin:0;
}

.megamenu .submenu li {
	list-style: none;
	padding:0;
	margin:0;
	min-height:30px;
}


.megamenu .submenu .last-submenu ul {
	list-style: none;
	padding:0;
	margin:0;
}

.megamenu .submenu .last-submenu {
	margin-left:1px;
}

.megamenu .submenu li {
	float:none;
}

.megamenu .submenu a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 23px;
    font-weight: normal;
    text-align: left;
    position: static;
    z-index: 0;
    background-image:none;
}

.megamenu li:hover .submenu, .megamenu li.onhover .submenu
{
    left: -1px;/*Use this property to change offset of the dropdown*/
    background:#007DBA repeat-y 50% 50% url('Images/menu_line.png');
	color: #004165;
}
.megamenu li:hover .submenuToLeft, .megamenu li.onhover .submenuToLeft
{
    left: auto;
    right: -1px;
}

.megamenu li:hover .submenuToLeft2, .megamenu li.onhover .submenuToLeft2
{
    left: auto;
    right: -60px;
}



/* Elements within the drop down sub-menu
--------------------------------------------*/

.megamenu li .submenu a, .megamenu li.onhover .submenu a
{
    background: none;
    background-image:none;
    padding:5px 20px;
}

.megamenu li .submenu ul.section-links li a {
	padding-left:35px;
	padding-right:0;
	font-size:0.9em;
	color:#FFFFFF;
}

.megamenu li .submenu ul.section-links li {
	background:url('Images/link_bullet.png') no-repeat 22px 50%;
}

.megamenu li .submenu ul.section-links li a span {
	position: absolute;
    left: -9999px;
	visibility:hidden;
	overflow:hidden;
}

.megamenu div.left {
	float:left;
	width:49.9%;
}

.megamenu li.submenu ul li, .megamenu li.submenu ul li a {
	height:auto !important;
	overflow:auto;
	zoom:1;
	display:block;
}

.megamenu li .submenu ul.section-links li.top-link {
	background:none;
	margin:0;
}

.megamenu li .submenu ul.section-links li.top-link a{
	font-size:1.0em;
	font-weight:bold;
	padding-left:20px;
	color:#FFFFFF;
}

.megamenu div.submenu div a
{
    background:none;
	width:auto;
	display:block;
}
.megamenu div.submenu div a:hover, .megamenu div.submenu div a:focus, .megamenu li .submenu ul li.sublight a, .megamenu li .submenu p.sublight a, .megamenu li .submenu p.sublight a
{
    text-decoration:underline;
    cursor:pointer;
}

.megamenu li:hover .submenu ul li:hover, .megamenu li:hover .submenu .section-head:hover,  .megamenu li .submenu ul li.sublight, .megamenu li .submenu p.sublight  {
	background-color: #D8D8D8;
}

.megamenu li .submenu ul.section-links li a:hover, .megamenu li .submenu ul.section-links li.top-link a:hover {
	color: #007DBA;
}

/* CSS3 effects
--------------------------------------------*/

/*for top-level*/     
.skin1_1 
{
    -moz-box-shadow: 0px 1px 4px #ccc;
    -webkit-box-shadow: 0px 1px 4px #ccc;
    box-shadow: 0px 1px 4px #ccc;
            
}

/*for submenu.*/    
.skin1_2 
{
    -moz-box-shadow: 0px 12px 20px #CCCCCC;
    -webkit-box-shadow: 0px 12px 20px #CCCCCC;
    box-shadow: 0px 12px 20px #CCCCCC;  
}

/* re-align menus for lower resolutions*/
@media all and (max-width: 1001px){
	body {
		xbackground-color: red;
	}
	  
	.megamenu li:hover .widthAdjust, .megamenu li.onhover .widthAdjust
	{
		left: auto;
		right: -275px;
	}  

}

/* custom overrides for menu widths */

.megamenu .menu-1 .submenu {width:550px;}
.megamenu .menu-2 .submenu {width:550px;}
.megamenu .menu-3 .submenu {}
.megamenu .menu-4 .submenu {width:570px;}
.megamenu .menu-5 .submenu {}