/* Start of CMSMS style sheet 'menunav' */
	#nav {
    margin:0px;
	padding:0px;
	position:static;
	width:729px;
	height:38px;
	}

	#nav ul { 
padding:0px;
float:left;
margin-left:0px;
list-style: none;
width:100px;
position:relative;
overflow:visible; 
z-index:999;
}


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

#nav li ul{
padding-bottom:15px;
width:166px;
}

#nav li ul a{
background: #01708B;
}
	
#nav li ul li {
float:left;
display:block;
position:static;
font-size:13px;
color:#FFFFFF;
background: #01708B;
width:150px;
padding:5px;
border-collapse:collapse;
z-index:999;
}

#nav li ul li a {
text-decoration:none;
text-align:left;
display:block;
height: auto;
color:#FFFFFF;
width:150px;
z-index:999;
}	

	#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: #01708B;
	        color:#FFFFFF;
	}

	#nav li.on ul {
		background: #01708B;
	}

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

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

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

	#nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
	        color:#FFFFFF;
		width: auto;
		font-family: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:Arial, Helvetica, sans-serif;
	}

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


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

	#nav li.off a:link, #nav li.on a:link { 
	    color:#FFFFFF;
		
	}

	#nav li.off a:visited, #nav li.on a:visited { 
	    color:#FFFFFF;
		
	}

	#nav li.off a:active, #nav li.on a:active { 
	    color:#FFFFFF;
		
	}

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

	/*do the image replacement*/

	#nav li span {
		display: none;
	}

	#nav li ul li span {
		display: block;
                padding-left:20px;
	}
	#li1 a, #li2 a, #li3 a, #li4 a, #li5 a {
		display: block;
		height: 38px;
		background: url(/uploads/images/menu.jpg) no-repeat; /*contains all hover states*/
	}

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

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

#li2 a {
	background-position: -132px 0px;
	width: 111px;
}

#li3 a {
	background-position: -243px 0px;
	width: 212px;
}

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

#li5 a {
	background-position: -557px 0px;
	width: 172px;
}




/*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: 0px -38px;
	width: 132px;
}

#li2 a:hover {
	background-position: -132px -38px;
	width: 111px;
}

#li3 a:hover {
	background-position: -243px -38px;
	width: 212px;
}

#li4 a:hover {
	background-position: -455px -38px;
	width: 102px;
}

#li5 a:hover {
	background-position: -557px -38px;
	width: 172px;
}
/* End of 'menunav' */