#liHome a, #liDevelopment a, #liCSS a, #liCalendar a, #liNews a, #liLiving a, #liContact a {
		display: block;
		position: relative;
		height: 40px;
		background: url('navmap.gif') no-repeat; /*contains all hover states*/
	}

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

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

#liDevelopment a {
	background-position: -110px 0;
}

#liCSS a {
	background-position: -220px 0;
}

#liCalendar a {
	background-position: -330px 0;
}

#liNews a {
	background-position: -440px 0;
}

#liLiving a {
	background-position: -550px 0;
}

#liContact a {
	background-position: -660px 0;
}

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

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

/*hover states*/

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

#liDevelopment a:hover, #liDevelopment:hover a, #liDevelopment.over a {
	background-position: -110px -50px;
}

#liCSS a:hover, #liCSS:hover a, #liCSS.over a {
	background-position: -220px -50px;
}

#liCalendar a:hover, #liCalendar:hover a, #liCalendar.over a {
	background-position: -330px -50px;
}

#liNews a:hover, #liNews:hover a, #liNews.over a {
	background-position: -440px -50px;
}

#liLiving a:hover, #liLiving:hover a, #liLiving.over a {
	background-position: -550px -50px;
}

#liContact a:hover, #liContact:hover a, #liContact.over a {
background-position: -660px -50px;
}