/* CSS - WEBSITE TOP MENU CSS */


.menu_item {
						background-color: #f3f3f3;
						color: #27397a;
				/* display: block; /* make the whole area clickable */
						padding-left:8px;
						padding-right:8px;
						font-family:Verdanna;
						font-weight:normal;
						font-size:12px;
						text-decoration:none;
	         }


.menu_item1 {
						background-color: #f3f3f3;
						color: #27397a;
				/* display: block; /* make the whole area clickable */
						padding-left:12px;
						padding-right:12px;
						font-family:helvetica;
						font-weight:bold;
						font-size:14px;
						text-decoration:none;
	         }




.nav_us {
	
	position:relative;
	top: 5px;/*10px;*/
	width:inherit;  
	margin-left:0px;/*-17px;*/ 
	margin-right:0px;/*-17px;*/  
	line-height:3px;/*5px;*/
	height: 3px;/*5px;*/
	background-color:#777777; /*#c9c9c9; */ 
		
}

.nav_us:hover {
	
	background-color:#fd5001;/*#cd1463; /*maroon; */
		
}






.navClass > ul > li {
    /* Remove bullet style */ 
	list-style-type: none;    
    /* Put items in a row */
	display: inline-block; 
	
	
	color: #fd5001;/*#27397a;*/  
    font-family:helvetica;
	font-weight:bold;
	font-size:16px;/*16px;*/
	
    padding-top:17px; 
    padding-bottom:5px;/*10px;*/ 
    margin-left:0px;
    margin-right:-5px;
    margin-top:0px;
    
	
	padding-left:0px;/*4px; /*14px - if bold font; */
	padding-right:0px;/*4px; /*14px- if bold font; */
    position:relative;
    background-color:#000000;

}


.anchor {

	color: #777777;
	padding-left:0px;
	margin-left:0px;
	text-align:center;
	
}



/*
.anchor:hover {

	color: #ffffff;
	
}
*/


.li_item {
	
	
}

.li_spacer {
	
	
}





.navClass > ul > li:hover {
    background-color:#333333; 
    /*color:#fd5001;*/ 
}




.navClass > ul > li:hover .nav_us{
    background-color:#ff5001;/*#cd1463; /*maroon;*/
    
    
}




/*
.navClass > ul > li > a {
	
	color: #777777;  
    font-family:helvetica;
	font-weight:normal;
	font-size:16px;
	text-decoration:none;
	
	padding-top:0px;
    padding-bottom:10px;
    	
} 
*/




.navClass > ul > li:hover .anchor {
	
	/*background-color:#777777;*/
	color: #ffffff;  
    
}




/* Animation code for sub-menu fade in */
@keyframes fade-in {
    from {opacity:0;}
    to {opacity: 0.8;}
}



/* Firefox < 16 */
@-moz-keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Internet Explorer */
@-ms-keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Opera < 12.1 */
@-o-keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}




ul.sub-menu {
	/* Detach this sub menu from parent menu (otherwise it will build into main menu and extend the height) */
	/* NB: requires that parent menu has position:relative */
	position:absolute;
	width:200px;
	

	font-family:helvetica;
	font-weight:bold;
	font-size:16px;
	
	margin-left:-18px;
	margin-top:15px;
	
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	background-color:#585858;
	
	color:#ffffff;
	list-style-type: none;
	display:none; 
	
	/* NB: Remove the following, if they they cause problems on dlder browsers
	 It is expected that if the browser does not support animation, it will ignore keyframes code
	 and do the job without animation  */
	-webkit-animation: fade-in 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-in 2s; /* Firefox < 16 */
    -ms-animation: fade-in 2s; /* Internet Explorer */
    -o-animation: fade-in 2s; /* Opera < 12.1 */
    animation: fade-in 2s;
	
	
	opacity: 0.8; /*final value */
	
	
}
	





ul.sub-menu li {
	padding-left:0px;
	padding-top:5px; 
	padding-bottom:-5px; 
	
	height: 25px;
	text-decoration:none;
	
	
}


ul.sub-menu li a {
	
	text-decoration:none;
	color:#ffffff;
	margin-left:0;
	padding-left:15px;
	
	display:inline-block; /*use to allow definiton of width - then we can keep hyperlink after the text */
	width:160px; /* keep width same as submenu class */
	height: 25px; /* keep width same as submenu list item element */

	
}

ul.sub-menu li:hover {
	
	background-color:#bbbbbb; 

	
	
}


ul.sub-menu li a:hover {
	
	color:#27397a;
}	


ul.sub-menu li:hover{
    color:  #27397a;
    background-color: #f3f3f3;
    
	
}

	
.navClass li:hover .sub-menu {
	
	display:block; 
	z-index:10; /* to allow menu to go on top of other stacks/elements */
	

}	

.sub-menu li:hover a {
	color: #27397a;

	
}



/* Start second level menu classes here */ 
ul.sub-menu1 {
	/* Detach this sub menu from parent menu (otherwise it will build into main menu and extend the height) */
	/* NB: requires that parent menu has position:relative */
	position:absolute;
	width: 235px; /*190px; */
	

	font-family:helvetica;
	font-weight:bold;
	font-size:16px;
	
	margin-left:192px;
	margin-top:-20px; /* -30px */
	
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	background-color:#cccccc;
	
	color:#ffffff;
	list-style-type: none;
	opacity:0; 
	
	
	
}

ul.sub-menu1 li a {
	
	text-decoration:none;
	color:#ffffff;
	margin-left:0;
	padding-left:15px;
	
	display:inline-block; /*use to allow definiton of width - then we can keep hyperlink after the text */
	width:235px; /* keep width same as submenu class */
	height: 25px; /* keep width same as submenu list item element */

}



ul.sub-menu1 li {
	padding-left:0px;
	padding-top:5px; 
	padding-bottom:-5px; 
	
	height: 25px;
	width:235px; /* keep width same as submenu class */
	text-decoration:none;
	
	
}


.sub-menu li:hover .sub-menu1 {
	
	opacity:1; 
	z-index:11; /* to allow menu to go on top of other stacks/elements */
	

}


.menu-hr-elem{
	color: #999999;
	background-color:#dddddd; /* #999999;*/
	margin-top:0px;
	margin-left:37px;
	margin-right:48px; /*41px; - if menu items in bbold */
	/*line-height: 2px; */
	height: 3px; 
				
	 }


.menu-hr-elem1{
	color: #999999;
	background-color:#aeaeae; /* #999999;*/
	margin-top:0px;
	margin-left:100px;/*30px;*/ 
	margin-right:110px; /*30px;*/
	/*line-height: 2px; */
	height: 3px; 
				
	 }