/* CSS for the list navigation test. Will replace or add this stylesheet and comment out old nav styles once this works well */

/* Header extends 225px from top. Navigation starts after that and extends for 39px excluding margin before textual content.  The following is for navigation background with transparency. The actual navigation div is absolutely positioned on top of this div so that it isn't affected by the transparency.*/ 



/*#nav_background	{
		background-color: rgb(168, 153, 84);
		/* for IE 
		filter:alpha(opacity=40);
		/* CSS3 standard 
		opacity:0.4;
		width: 700px;
		height: 39px;
		margin-left: 314px;
		}*/
		
#nav		{
		/* position: absolute; */
		width: 700px;
		height: 39px;
		margin-top: 2px;
		margin-left:314px;
		z-index: 4;
		background-image: url(images/background/nav_background.png);
		background-repeat: no-repeat;
		}
		
/* The above is for positioning the list. The below is from the suckerfish drop-down menu demo on 'a list apart' to get a properly working drop down menu with just CSS. If this works I will use this stylesheet exclusively for navigation and attach it to all the pages and comment out the navigation parts in the other stylesheet. Or remove them altogether for that matter */

#nav_list	{
		z-index: 4;
}

#nav_list, #nav_list ul	{
		margin: 0px;
		padding: 0px;
		list-style: none;
		}
		
#nav_list a	{
		display: block;
		width: 100px;
		}
		
#nav_list li	{
		float: left;
		position: relative;
		width: 100px;
		height: 39px;
		text-align: center;
		z-index: 4;
		}

#nav_list li ul	{
		/*display: none;*/
		width: 100px;
		position: absolute;
		top: 39px;
		left: -999em;
		/*background-color: rgb(168, 168, 168);*/
		background-image: url(images/background/nav_background2.png);
		background-repeat: repeat;
		z-index: 6;
		/*High z-index to try and fix a bug in IE7 where it doesn't allow users to click because main content covers drop down menu */
		}
		
li > ul	{
		top: auto;
		/*left: auto;*/
		}
		
#nav_list li:hover ul, #nav_list li.sfhover ul	{
		left: auto;
		}
		
/* the following is to beautify the navigation menu */

#nav a	{
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.75em;
	color: #ffffff;
	height: 27px;
	padding-top: 12px;
	}
	
#nav a:hover	{

	background-color: rgb(168, 153, 84);
	}

.active	{
	background-color: rgb(130, 118, 65);
	}