@charset "utf-8";
/* styleshteet for drop down menus V2.0 */

/* Note about small screens. Adding the following code to your html can help small screens if you're dropdowns are very tall:
<script type="text/javascript">
	if(document.documentElement.clientHeight <= 800) {
		document.write('<style>#nav_bar ul ul ul { 	margin-top:-6em; }</style>');
	}
</script>
*/


/*==================================================== lists ========================================================*/

/*---------- all lists ----------*/
#nav_bar ul {
	z-index:101;											/* necessary for IE6 if you want dropdowns  */
	display:relative;
	list-style:none;
	margin:0;
	padding:0;
	font-size:13px;
	line-height:1.4em;
	font-weight:normal;
}

/*---------- lists, levels 2+ ----------*/
#nav_bar ul ul {
	position:absolute;
	border:solid 1px #999999;
}

/*---------- third level lists ----------*/
#nav_bar ul ul ul {
	margin:-2.25em 0 0 18.25em;
	_margin:-2em 0 0 19.25em;								/* hack for IE6 */
	/* Note about IE6. The code "li:hover > a" and "li li:hover > a" causes problems for IE6 when you hover over 3rd level links.
	/* (These selectors make it so parent links stay highlighted when you are hovering over their submenus.)
	/* The solution is to apply a hack for IE6 so that submenus don't overlap each other. */
}


/*==================================================== list items ========================================================*/

/*---------- all list items ----------*/
#nav_bar li {
	float:left;
}


/*---------- list items, levels 2+ ----------*/
#nav_bar li li {	
	clear:both;
	border:none;
}

/*==================================================== links ========================================================*/

/*---------- all links ----------*/
#nav_bar a {
	display:block;
	text-decoration:none;
	
	padding:8px 22px;	
		
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
	/*background:;*/
}

/*---------- all links, hover ----------*/
#nav_bar a:hover, 											/* hover state for all links */
#nav_bar li:hover > a {										/* make links still appear selected even when you're mousing over their submenu */
	color:#fff;
	background:#3e3e3e;
}

/*---------- links, level 2+ ----------*/
#nav_bar li li a {
	font-weight:bold;
	border-bottom:solid 1px #999999;
	/*opacity:0.98;*/

	width:18.25em;
	padding:0.35em 0.75em;
	
	color:#fff;
	background:#3e3e3e;
	text-transform:none;
	font-weight:normal;
}

/*---------- links, level 2+, hover ----------*/
#nav_bar li li a:hover,										/* hover state for links, levels 2+ */
#nav_bar li li:hover > a {									/* make links still appear selected even when you're mousing over their submenu */
	color:#fff;
	background:#333333;
}


/*==================================================== the magic that shows and hides lists ========================================================*/
/* The sfhover class is applied and used by IE6 to help it with dropdowns */

/* hide hidden drop downs */
#nav_bar li ul,																		/* hide all the drop downs */
#nav_bar li:active > ul																/* hides dropdowns in Dreamweaver */
{
	left:-999em;																	/* we use this instead of display:none, so that screen readers can read the menus */
}

/* show hovered dropdowns */
#nav_bar li:hover > ul																/* when hovering on a link, show it's dropdown */
{	
	left:auto; 
}





/*==================================================== additional styling ========================================================*/

/*---------- show an arrow for those with submenus ----------*/
#nav_bar li li a.submenu:link, #nav_bar li li a.submenu:visited, #nav_bar li li a.submenu:hover {
	background-image:url(/common_files/images/submenu-arrow.gif);
	background-position:right;
	background-repeat:no-repeat;
	/* make sure not to specify background: or background-color: or it will over-write above code */
}

#nav_bar li .nav_item_highlighted {
	font-variant:small-caps; 
	background-color:#3e3e3e; 
	border-top:solid 1px #999999;
}


/* Note about IE: IE needs some code to help it to behave like a standards compliant browser and to show and hide menu items properly:
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
*/