/* CSS Document */

body { behavior:url("css/hover.htc"); }

ul#navmenu {
	padding:0;
	margin:0;
}

ul#navmenu li {
	list-style:none;
	position:relative;
   	display: block;
  	height: 24px;
	padding: 5px 0px 0px 0px;  
  	width:112px;
	float:left;
	background-image: url("../images/design/green-button.gif");
	background-position: left top;
	text-decoration: none;
	text-align: center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF; 
}

ul#navmenu a {
/* We need to add display: block and the width and heigt so the hover
will be captured over the full graphic and not just the text. */
	margin: 0;
   	display: block;
  	height: 24px;
  	width:112px;
	text-decoration: none;
	text-align: center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF; 
}

ul#navmenu a:hover {
/* because we have deleared the display:block above we don't need to specify 
the size again in the hover..  Weird I know but we do need to to define the 
properties of the a tag */
	margin: 0;
	text-decoration: none;
	text-align: center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #666666;
}

ul#navmenu li:hover, ul#navmenu li.sfhover {
 	margin: 0;
   	display: block;
  	height: 24px;
  	width:112px;
	float:left;
	background-image: url("../images/design/grey-button.gif");
	background-position: left top;
}