#liHome a, #liAbout a, #liStaff a, #liServices a, #liFAQ a, #liClients a, #liTestimonials a, #liResources a {
		display: block;
		position: relative;
		height: 56px;
		background: url('navmap.gif') no-repeat; /*contains all hover states*/
	}

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

#liHome a {
	background-position: 0px 0;
}

#liAbout a {
	background-position: -85px 0;
}

#liStaff a {
	background-position: -170px 0;
}

#liServices a {
	background-position: -255px 0;
}

#liFAQ a {
	background-position: -340px 0;
}

#liClients a {
	background-position: -425px 0;
}

#liTestimonials a {
	background-position: -510px 0;
}

#liResources a {
	background-position: -595px 0;
}

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

 #liResources.on a {
 	background-position: -595px -114px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liHome a:hover, #liHome:hover a, #liHome.over a {
	background-position: 0 -56px;
}

#liAbout a:hover, #liAbout:hover a, #liAbout.over a {
	background-position: -85px -56px;
}

#liStaff a:hover, #liStaff:hover a, #liStaff.over a {
	background-position: -170px -56px;
}

#liServices a:hover, #liServices:hover a, #liServices.over a {
	background-position: -255px -56px;
}

#liFAQ a:hover, #liFAQ:hover a, #liFAQ.over a {
	background-position: -340px -56px;
}

#liClients a:hover, #liClients:hover a, #liClients.over a {
	background-position: -425px -56px;
}

#liTestimonials a:hover, #liTestimonials:hover a, #liTestimonials.over a {
	background-position: -510px -56px;
}

#liResources a:hover, #liResources:hover a, #liResources.over a {
	background-position: -595px -114px;
}