/* Start of CMSMS style sheet 'utility' */
#nav2 {
margin:0px;
padding:0px;
position:static;
width:729px;
height:30px;
	}

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


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

#li61 a, #li62 a, #li63 a, #li64 a {
         float:left;
         position:relative;
	 display: block;
         height: 30px;
         left:514px;
         background: url(/uploads/images/utility.jpg) no-repeat; /*contains all hover states*/
	}

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

#li61 a {
	background-position: -514px 0px;
	width: 49px;
}

#li62 a {
	background-position: -563px 0px;
	width: 61px;
}

#li63 a {
	background-position: -624px 0px;
	width: 62px;
}

#li64 a {
	background-position: -686px 0px;
	width: 47px;
}






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



/*hover states*/

#li61 a:hover {
	background-position: -514px -28px;
	width: 49px;
}

#li62 a:hover {
	background-position: -563px -28px;
	width: 61px;
}

#li63 a:hover {
	background-position: -624px -28px;
	width: 62px;
}

#li64 a:hover {
	background-position: -686px -28px;
	width: 47px;
}

/* End of 'utility' */