/*** ESSENTIAL STYLES ***/
#mainnav ul, 
	#mainnav ul * {list-style:none;}
#mainnav ul a {	display: inline-block;	position:	relative; font-size:1em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}	
#mainnav ul li {	position: relative;}
#mainnav>ul>li:hover>ul, 
	#mainnav>ul>li.sfHover>ul {top:38px;	z-index: 20000;}
#mainnav ul ul {	position:absolute; padding:0px !important;   width:100%; min-width:260px;}
#mainnav ul ul li {	width:200px; text-align:left;}
#mainnav ul ul li:hover>ul , 
	#mainnav ul ul li.sfHover>ul  {top:0; left:100%;	z-index: 20000; }

/*** DEMO SKIN ***/
#mainnav>ul { display:table; width:100%;}
#mainnav>ul>li {margin:0px; padding:0px; display:table-cell; border-left:1px solid #fff;}
#mainnav ul li a { text-decoration:none; padding:10px 5%;   text-align:left;  color:#000; white-space:nowrap; display:block; text-align:center;}
#mainnav ul a:focus, 
	#mainnav ul a:hover, 
	#mainnav ul a:active, 
	#mainnav ul li.sfHover>a, 
	#mainnav ul li.current>a, 
	#mainnav ul li.currentpath>a{ text-decoration:none;background:#5AA8E7; color:#fff;}

#mainnav ul ul { background-color:#5AA8E7;  /*box-shadow:3px 3px 3px #222;*/ margin:0; display:none;}
#mainnav ul ul li{ margin:0; width:100%;} 
#mainnav ul ul li>a { 	text-decoration:none; padding:7px 5px 7px 30px; color:#fff; text-shadow: none !important; background: #5AA8E7 ; text-align:left; height:auto; border-bottom: 1px solid #61a7ee;}
#mainnav ul ul li:hover>a, 
	#mainnav ul ul li.sfHover>a, 
	#mainnav ul ul li.current>a, 
	#mainnav ul ul li.currentpath>a{background: #286aac;}

/*** arrows **/
#mainnav ul a.sf-with-ul {	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator { color:#5AA8E7; font-size: 1.5em; line-height: 100%; margin-left:2px; height:0; display:inline-block; float:right;}
.sf-sub-indicator { color:#5AA8E7; font-size: 1.5em; line-height: 100%; margin-left:2px; height:0; display:inline-block; float:right;}
a > .sf-sub-indicator {  height:10px;}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {	color:#fff;background-position: -10px -100px; /* arrow hovers for modern browsers*/}

/* point right for anchors in subs */
#mainnav ul ul .sf-sub-indicator { background-position:  -10px 0; }
#mainnav ul ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */
#mainnav ul ul a:focus > .sf-sub-indicator,
#mainnav ul ul a:hover > .sf-sub-indicator,
#mainnav ul ul a:active > .sf-sub-indicator,
#mainnav ul ul li:hover > a > .sf-sub-indicator,
#mainnav ul ul li.sfHover > a > .sf-sub-indicator {	background-position: -10px 0; /* arrow hovers for modern browsers*/}

/*** shadows for all but IE6 ***/
.sf-shadow ul {	padding: 0 8px 9px 0;}
.sf-shadow ul.sf-shadow-off {	background: transparent;}


@media only screen and (max-width: 801px) {
		/** MOB MENU **/
	#mainnav {display:none; clear:both;  max-height: 80vh; max-height:calc(100vh - 60px);overflow:auto !important;}
	#mainnav>ul{   display:block;}
	#mainnav ul li { width:100%; float:none; display:block; border-left-width:0; position:static;}
	#mainnav ul li a { padding:15px 1px !important; display:block; border-radius:0; border-bottom: 1px solid #61a7ee; color:#fff; background-position: 20px 25px; font-weight:bold;  background-color:#444; }
	#mainnav ul li a:hover { background:#5AA8E7; }
	#mainnav ul ul { display:block !important; visibility:visible !important; position:static; box-shadow:0 0 0 transparent;}
	#mainnav ul ul li {width:100%; float:none; margin:0 0 0 0;}
	#mainnav ul ul li a {   font-weight:normal; text-align:center; background-image:none; font-weight:normal; background-color:#666; font-size:1em }
	#mainnav ul ul ul li {width:50%; float:left;}
	#mainnav ul ul ul li a {background-color:#ddd; color:#444;}
}