/* stylize the "nav bar" that contains all main nav and menu items*/
.navbar {
	height: auto;
	padding-top: inherit;
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
    z-index: 99999;
    position: relative;
}


/* stylize and control the width of the main nav items on the navbar. They all have to be the same width unless inline styles are used on the list itself. */
.navbar ul#nav li.main_nav {font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px; font-weight: bold;}
.navbar ul#nav li.main_nav a:link {text-decoration: none; color: #fff;}
.navbar ul#nav li.main_nav  a:visited {text-decoration: none; color: #fff;}
.navbar ul#nav li.main_nav a:hover {text-decoration: underline; color: #ffffff;}
.navbar ul#nav li.main_nav a:active {text-decoration: underline; color: #ffffff;}


/* stylize the font for all the menus. just the font though, let the other styles do the rest...*/
li {}


/*then the menu magic*/
#nav, #nav ul {
	padding: 12px 0px 0px 0px;
	margin: 0;
	list-style: none;
	height: 35px;
	font-family: Verdana, arial, helvetica; 
	font-size: 10px; 
	font-weight: normal;
}

#nav a {
	display: block;
/*	width: 150px; */
}

#nav li {
	float: left;
	width: inherit;
	padding : 0px 10px 0px 17px;
	text-align:left;
}
#nav li ul {
	position: absolute;
	width: 75px;
	/*push this guy WAY off the screen so it seems hidden */
	left: -999em;
	/*put a border around all menus that pull out, but not on top because the list items within this UL do that in the next style*/
	border: none;
	background : repeat;
}

/* move the link in from the left of the dropdown box a bit */
#nav li ul a {margin-left: 0px;
				/*not sure if this is doing anything...*/margin-right: 22px;
				
			color: #003399;
			}

/*stylize the menus that pull out, and add that border to the top*/
#nav li ul li {
	border-top: none;
	background-color: #215680;
	padding-top:7px;
	padding-bottom: 7px;
	margin:0px;
	width:150px;
	font-weight: bold;
	filter:alpha(opacity=95); opacity:.95;}

#nav li:hover ul {
	left: auto;
}


#nav li ul ul {
	margin: -31px -40px 0px 160px;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
	
}

/*change the background color on any menu item that is hovered (and is within a dropdown menu)*/
#nav ul li:hover, #nav ul li.sfhover {background-color:#003D6E;filter:alpha(opacity=100); opacity:1; }
#nav ul li:hover a, #nav ul li.sfhover a {color: #FFFFFF;}


/* for the third level */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}


/*if for some bad reason four levels are needed */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
	left: auto;
}


/* end the menu CSS */