#nav {
	margin-left:40px;
    margin-top:0px;
	padding:0px;
	position:static;
	width:790px;
	height:26px;
	}
	
	*html #nav {
	margin-top:0px;
	margin-left:40px;
	position:static;
	width:790px;
	height:26px;
	}

	/*subnav formatting*/
	
#nav ul { 
padding: 0;
margin-left:0px;
list-style: none;
width:160px;
position:absolute;
overflow:visible; 
z-index:999;
}

*html #nav ul { 
padding: 0;
margin-left:0px;
list-style: none;
width:160px;
position:absolute;
overflow:visible; 
z-index:999;
}

#nav li { 
float:left;
list-style: none;
display:block;
height:auto;
z-index:999;
padding:none;

}

#nav li ul a{
background: #000000;
}
	
#nav li ul li {
font-size:10px;
color:#ffffff;
background: #000000;
border:solid 1px #FFCC00;
width:160px;
padding:5px;
border-collapse:collapse;
}

#nav li ul li a {
text-decoration:none;
text-align:left;
display:block;
height: auto;
color:#fff;
width:125px;
}	

	#nav a {
		text-decoration:none;

	}

	#nav li { /*float the main list items*/
		float: left;
		display: block;
		width:none;
	}
	

	#nav li ul {
		display: none;
		
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		background: #000000;
	}

	#nav li.on ul {
		background: #000000;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #000000;
	}

	#nav li a {
		color: #666666;
		font-weight: normal;
		display: block;
	}

	#nav li.on a {
		color: #000000;
	}

	#nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
	    color:#FFFFFF;
		width: auto;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
	
	*html #nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
	    color:#FFFFFF;
		width: auto;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background-color:#000000; 
	    color:#F9CD58;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}


	#nav li.off:hover ul, #nav li.over ul {
		display: block;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
	    color:#FFCC00;
		
	}

	/*do the image replacement*/

	#nav li span {
		display: none;
	}

	#li1 a, #li2 a, #li3 a, #li4 a, #li5 a, #li6 a, #li7 a, #li8 a {
		display: block;
		height: 23px;
		background: url(../GRAPHICS/nav_map.gif) no-repeat; /*contains all hover states*/
	}

/*first, put the initial states in place*/

#li1 a {
	background-position: 0px 0px;
	width: 69px;
}

#li2 a {
	background-position: -69px 0px;
	width: 114px;
}

#li3 a {
	background-position: -183px 0px;
	width: 94px;
}

#li4 a {
	background-position: -277px 0px;
	width: 102px;
}

#li5 a {
	background-position: -379px 0px;
	width: 92px;
}

#li6 a {
	background-position: -471px 0px;
	width: 137px;	
}

#li7 a {
	background-position: -608px 0px;
	width: 93px;	
}

#li8 a {
	background-position: -701px 0px;
	width: 85px;	
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/



/*hover states*/

#li1 a:hover, #li1:hover a, #li1.over a {
	background-position: 0px -27px;
}

#li2 a:hover, #li2:hover a, #li2.over a {
	background-position: -69px -27px;
}

#li3 a:hover, #li3:hover a, #li3.over a {
	background-position: -183px -27px;
}

#li4 a:hover, #li4:hover a, #li4.over a {
	background-position: -277px -27px;
}

#li5 a:hover, #li5:hover a, #li5.over a {
	background-position: -379px -27px;
}

#li6 a:hover, #li6:hover a, #li6.over a {
	background-position: -471px -27px;
}

#li7 a:hover, #li7:hover a, #li7.over a {
	background-position: -608px -27px;
}

#li8 a:hover, #li8:hover a, #li8.over a {
	background-position: -701px -27px;
}