@charset "utf-8";
	#divNav {
	position:relative;
	margin: 0px;
	padding: 0px;
	width: 588px;
	float: right;
	}

	#nav {
	position: relative;
	top: 0px;
	width: 588px;
	}

	#nav li ul, #nav li ul {
		margin: 0px;
		padding: 0px;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0px;
		float: left;
		display: block;
		padding-right: 3px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	position: absolute;
	top: 37px;
	left: 0px;
	background: #FFFFFF;
	height: 32px;
	width: 588px;
	background-color: #FFFFFF;
	}

	#nav li.on ul {
		background: #FFFFFF;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #FFFFFF;
	}

	#nav li a {
		color: #224d6f;
		font-weight: bold;
		display: block;
		width: 95px;
		padding: 0px;
	}

	#nav li.on a {
		color: #f90;
	}

	#nav li.on ul a, #nav li.off ul a {
	border: 0px;
	float: left; /*ie doesn't inherit the float*/
	color: #f90;
	width: 95px;
	margin-right: 0px;
	text-align:center;
	line-height: 32px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #FFFFFF;
		background-image:url(../images/subNav.gif);
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #333333;
	}

	/*do the image replacement*/

	#nav li span {
		position: absolute;
		left: -9384px;
	}

	#liHome a, #liAbout a, #liServices a, #liWork a, #liAboutMhp a, #liTouch a {
		display: block;
		position: relative;
		height: 32px;
		background: url(../images/menu_items.gif) no-repeat; /*contains all hover states*/
	}

/*first, put the initial states in place*/

#liHome a {
	background-position: 0px 0px;
}

#liAbout a {
	background-position: -98px 0px;
}

#liServices a {
	background-position: -196px 0px;
}

#liWork a {
	background-position: -294px 0px;
}

#liAboutMhp a {
	background-position: -392px 0px;
}

#liTouch a {
	background-position: -490px 0px;
}

/*active area*/

 #liHome.on a {
 	background-position: 0px -40px;
 } 
  #liAbout.on a {
 	background-position: -98px -40px;
 } 
  #liServices.on a {
 	background-position: -196px -40px;
 } 
  #liWork.on a {
 	background-position: -294px -40px;
 } 
 #liAboutMhp.on a {
 	background-position: -392px -40px;
 } 
 #liTouch.on a {
 	background-position: -490px -40px;
 }

/*hover states*/
/* -80px will give you the true rollover image*/

#liHome a:hover, #liHome:hover a, #liHome.over a {
	background-position: 0 -40px;
}

#liAbout a:hover, #liAbout:hover a, #liAbout.over a {
	background-position: -98px -40px;
}

#liServices a:hover, #liServices:hover a, #liServices.over a {
	background-position: -196px -40px;
}

#liWork a:hover, #liWork:hover a, #liWork.over a {
	background-position: -294px -40px;
}

#liAboutMhp a:hover, #liAboutMhp:hover a, #liAboutMhp.over a {
	background-position: -392px -40px;
}

#liTouch a:hover, #liTouch:hover a, #liTouch.over a {
	background-position: -490px -40px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #FFFFFF;
	color: #696969;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-image:url(../images/subNav.gif);
	left: 2px;	
}		

#nav li.on ul a {
	background: #FFFFFF;
	background-image:url(../images/subNav.gif);
	left: 2px;
}

