@charset "utf-8";

#navigation ul {
	width: 920px; 
	height: 164px; 
	position: absolute; /** Places image at the top of the page **/
	background: url(i/nav.jpg) no-repeat 0 0;
	list-style: none;
	margin: 0; 
	padding: 0;
}
#navigation li {
	display: inline;
}
#navigation li a:link, #navigation li a:visited {
	border: none;
	display: block; 
	position: absolute; 
	top: 0; 
	outline: none;
}
#navigation li.a a:link, #navigation li.a a:visited { 
	width: 142px; /** width of the button in active state **/
	height: 164px; /** height of the button in active state **/
	left: 0;
}
#navigation li.b a:link, #navigation li.b a:visited { 
	width: 78px; /** width of the button in active state **/
	height: 164px; /** height of the button in active state **/
	left: 142px ; /** how many px left of the first button i.e blue **/
}
#navigation li.c a:link, #navigation li.c a:visited { 
	width: 103px; /** width of the button in active state **/
	height: 164px; /** height of the button in active state **/
	left: 220px ; /** how many px left of the first button i.e blue **/
}
#navigation li.d a:link, #navigation li.d a:visited { 
	width: 123px; /** active state **/
	height: 164px; /** active state **/
	left: 323px ;
}
#navigation li.e a:link, #navigation li.e a:visited { 
	width: 71px; /** active state **/
	height: 164px; /** active state **/
	left: 446px ;
}
#navigation li.f a:link, #navigation li.f a:visited { 
	width: 102px; /** active state **/
	height: 164px; /** active state **/
	left: 517px ;
}
#navigation li.g a:link, #navigation li.g a:visited { 
	width: 83px; /** active state **/
	height: 164px; /** active state **/
	left: 619px ;
}
#navigation li.h a:link, #navigation li.h a:visited { 
	width: 109px; /** active state **/
	height: 164px; /** active state **/
	left: 702px ;
}
#navigation li.i a:link, #navigation li.i a:visited { 
	width: 93px; /** active state **/
	height: 164px; /** active state **/
	left: 811px ;
}
#navigation li.a a:hover {
	background: url(i/nav.jpg) no-repeat 0 -164px; 
}
#navigation li.b a:hover {
	background: url(i/nav.jpg) no-repeat -142px -164px; 
}
#navigation li.c a:hover {
	background: url(i/nav.jpg) no-repeat -220px -164px;
}
#navigation li.d a:hover {
	background: url(i/nav.jpg) no-repeat -323px -164px;
}
#navigation li.e a:hover {
	background: url(i/nav.jpg) no-repeat -446px -164px;
}
#navigation li.f a:hover {
	background: url(i/nav.jpg) no-repeat -517px -164px;
}
#navigation li.g a:hover {
	background: url(i/nav.jpg) no-repeat -619px -164px;
}
#navigation li.h a:hover {
	background: url(i/nav.jpg) no-repeat -702px -164px;
}
#navigation li.i a:hover {
	background: url(i/nav.jpg) no-repeat -811px -164px;
}