@charset "UTF-8";

#nav {
	/* This is used for styling/positioning only */
	position:absolute;
	top:140px;
}
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
		/* This section is for styling only */
		/*background-color:#53668f;  This lighter blue background gets applied to the dropdown LI */
		text-align:center;
}

#nav a {
	display: block;
	width: 10em; 
	
		/* This section is for styling only */
		color:white;
		w\idth: 8em;
		text-decoration: none;
		padding: 0.25em 1em;
}

#nav li {
	float: left;
	width: 10em;  needed for Opera 
	
		/* This section is for styling only */
		/*background-color:#2c3e67;  This dark blue is applied to the horizontal LI items and the dropdown LI */
		color: white;
}

/* Submenus (dropdowns) */
#nav li ul {
	position: absolute;
	width: 18em; /* This needs to be the sum of the Anchor width plus its padding. */
	left: -999em; /* Instead of hiding, it's better to move it off the screen and then set left to 'auto' when you want to see it */
		
		/* This section is for styling only. Applies to the downdown UL */
		text-align:left;
		background-color:#2c3e67; /* dark blue */

		filter:alpha(opacity=90);
		-moz-opacity:0.9;
		-khtml-opacity: 0.9;
		opacity: 0.9;
}

#nav li:hover ul {
	left: auto; /* Slide the ul back onto the screen */
}

/* This is used by IE (in conjunction with the Javascript function sfHoover)
   Basically, it mimics the previous selector where the downdown list is slide back into position. */
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav ul ul a { /* Used for styling only.  The dropdown anchors */
	width: 16em;
	w/idth: 14em;
	padding:0.25em 1em;
}