$sfmenubgcolor: #31429B;
$sfmenutopstripfadethru: #00a6dd;
$sfmenutopstriphover: #00a6dd;




nav , #sfdiv {
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 101;
}
 

.sf-menu {margin:0; list-style:none;}
.sf-menu ul {position:absolute; display:none; list-style:none;}
.sf-menu li {position:relative; float:left; list-style:none;}
.sf-menu a {   text-decoration:none}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {z-index:105}


ul.sf-menu>li>a {
	color: $bodytextcolor;
	display: inline-block;
	font-size: 14px;
	padding: 10px 10px 11px;
	position: relative;
	text-align: center;
	margin: 0 15px 0 0;
	text-transform: uppercase;
	font-weight: 400;
}

ul.sf-menu li:last-child a {
	margin: 0;
}

ul.sf-menu li a:hover, ul.sf-menu li.current-menu-item a {
	color: $linkhover;
}



ul.sf-menu>li>a {position:relative; font-weight: bold;}
ul.sf-menu>li>a em {display:block; height:3px; bottom:0; width:0px; position:absolute; left:50%; background:$sfmenutopstripfadethru;/* top strip fades through this color when mouseing out*/
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		transition:all 0.5s ease;}
ul.sf-menu>li.current>a em, ul.sf-menu>li:hover>a em, ul.sf-menu>li.sfHover>a em, ul.sf-menu li.current-menu-item a em {display:block; height:3px; 
			bottom:0; width:100% !important;  position:absolute; left:0 !important; background:$sfmenutopstriphover;}/* top strip for hovering or active*/
 

ul.sf-menu>li.current>a, 
ul.sf-menu>li.sfHover>a, 
ul.sf-menu>li>a:hover {}




.sf-menu>li>ul ul, 
.sf-menu>li>ul { 
		width:157px;  	
		top:45px; 
		left:-65px;
		background:#fff;/*drop down main color*/ 
		//display:block;
		display:none;
		/*padding-right: 25px;*/
	@include  shadowone(2px 2px 4px rgba(0, 0, 0, .2));

		}
.sf-menu>li>ul>li a {
	color:#00a6dd;
	display:block; 
	font-size:15px; 
	line-height:16px;
	text-align:center;
	padding:10px;
	border-top:1px solid #444;
	border-right:1px solid #444;
	border-left:1px solid #444;
	border-bottom:none;
 }
.sf-menu>li>ul>li:last-child a {
	border-bottom:1px solid #444;
}
//.sf-menu>li>ul li.last a {border-bottom:0 !important}
.sf-menu>li>ul>li {display:block; float:none; text-align:left}
#sfdiv ul ul li a:hover {background-color:#00a6dd; color:#fff} /*hovering over 2 and 3 level items*/
.sf-menu>li>ul ul {left:132px !important;}



ul.sf-menu>li.current li li, ul.sf-menu>li li.sfHover li { float:none; display:block; float:none;text-align:left}
ul.sf-menu>li.current li li a, ul.sf-menu>li li.sfHover li a{color:#FFF;display:block;padding:10px 5px 10px 22px;background:none}
ul.sf-menu>li li.sfHover a, .sf-menu>li>ul>li a:hover, ul.sf-menu>li>ul>li.sfHover a:hover,ul.sf-menu>li li.sfHover li a:hover { background:#c8cff4} /*this is when youre in the third level*/
ul.sf-menu>li li.sfHover li a {text-decoration:none}

.sf-shadow{
}