/*** ESSENTIAL STYLES ***/

.sf-menu,
.sf-menu * { margin:0; padding:		0; list-style:		none; z-index: 99999; }
.sf-menu { }
.sf-menu ul { position:		absolute; top:			-999em; width:			10em; /* left offset of submenus need to match (see below) */ }
.sf-menu ul li { width:			100%; }
.sf-menu li:hover { visibility:		inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li { float:			left; position:		relative; }
.sf-menu a { display:		block; position:		relative; }
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0;
	
	/* match top ul list item height */
	top:25px; /* Note: too much of a gap between the menu, and the the popup hover menu will cause the flickering / lose focus problems. */
	
	z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top:			-999em; }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul { left:			10em; /* match ul width */ top:			0; }
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul { top:			-999em; }
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul { left:			10em; /* match ul width */ top:			0; }
/* NAVIGATION ------------------------------------------------------------*/

nav {width:780px; margin:10px auto; height:50px; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: none;}

#nav li { display: inline;  float: left; }
#nav>li>a { display: block; overflow: hidden; padding: 10px 20px 0 20px; font-family: "Times New Roman", Times, serif; font-size:12px; font-weight:bold; color:#808080; text-shadow: #fff 0 2px 0;background: rgba(0, 0, 0, .0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}

#nav>li>a:hover,
#nav>li.active>a { background:bottom; border:none; }

#nav>li.active>a {color: #393939;padding: 10px 20px 0 20px;}
#nav a:hover { color: #393939;padding: 11px 20px 0 20px; }

#nav>li>a>.subheader { color: #717171; display: block; font-size: 11px; margin-top: -8px; font-weight: lighter; }
#nav .sf-sub-indicator { float: right; }
#nav>li>a>.sf-sub-indicator { display: none; }

/* sub navigation -----------------------------------------------------*/
#nav>li ul { border-top:6px solid #5f6364; display: block; margin-top: 4px; background: #f8f8f8; }
#nav>li ul li { border-bottom:1px solid #c9c9c9;}
#nav>li ul li a { display: block; padding: 10px 10px; font-size: 12px; color: #4f4f4f; text-decoration: none;text-align:center; }
#nav>li ul li a span { display: block; }
#nav>li ul li a:hover { background: #f8f8f8; color: #121212; padding: 10px 10px;}
