#nav {
    margin:0px;
	padding:0px;
	position:static;
	width:527px;
	height:25px;
	}

	/*subnav formatting*/
	
#nav ul { 
padding: 0;
margin-left:0px;
list-style: none;
width:72px;
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: none;
}
	
#nav li ul li {
font-size:14px;
color:#000000;
background-color:#EEDF9A;
border-left:1px solid #bfbfbf;
border-right:1px solid #bfbfbf;
border-bottom:1px solid #bfbfbf;
width:72px;
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:#000000;
		width: auto;	               
		font-family: Times New Roman, Times, serif;
	}
	
	
	*html #nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
	    color:#000000;
		width: auto;	               
		font-family: Times New Roman, Times, 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: Times New Roman, Times, serif;
	}


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

	#nav li.off a:hover, #nav li.on a:hover { 
	    color:#000000;
		text-decoration:underline;
		
	}

	/*do the image replacement*/


	#nav li span {
		display: none;
	}

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

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

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

#li2 a {
	background-position: -159px 0px;
	width: 94px;
}

#li3 a {
	background-position: -253px 0px;
	width: 54px;
}

#li4 a {
	background-position: -307px 0px;
	width: 68px;
}

#li5 a {
	background-position: -375px 0px;
	width: 109px;
}

#li6 a {
	background-position: -484px 0px;
	width: 80px;	
}



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



/*hover states*/

#li1 a:hover {
	background-position: -65px -25px;
	width: 94px;
}

#li2 a:hover  {
	background-position: -159px -25px;
	width: 94px;
}

#li3 a:hover  {
	background-position: -253px -25px;
	width: 54px;
}

#li4 a:hover  {
	background-position: -307px -25px;
	width: 68px;
}

#li5 a:hover  {
	background-position: -375px -25px;
	width: 109px;
}

#li6 a:hover  {
	background-position: -484px -25px;
	width: 80px;	
}