/* From w3.org order of link pseudo classes as follows:
A:link    { color: red }     unvisited links 
A:visited { color: blue }    visited links   
A:hover   { color: yellow }  user hovers     
A:active  { color: lime }    active links    */

#navigation {
	float: left;
	height: 480px;
}

#navigation ul {
	background: url(navigation/navbar.gif) 0 0 no-repeat;
	width: 105px;
	height: 426px;
	margin: 0;
	padding: 0;
}

#navigation li span {
	display: none;
}

#navigation li {
    float: left;
	list-style: none;
    position: relative;
}

#navigation li, #navigation a {
	height: 24px;
	display: block;
	margin: 0;
	padding: 0;
	}

li#nav_home {
	margin-top:18px;
}

li#nav_home, li#nav_pupae, li#nav_catalogue, li#nav_tax, li#nav_payments, li#nav_caring, li#nav_quality, li#nav_images, li#nav_books, li#nav_nam, li#nav_about, li#nav_faq, li#nav_hob, li#nav_green {
	margin-bottom:4px;
	width:105px;
}  

/* diffence in height between each button is margin + height = 4 + 24 = 28 */
#nav_home a:hover {
	background:url(navigation/navbar.gif) -104px -18px no-repeat; 
}
#nav_pupae a:hover {
	background:url(navigation/navbar.gif) -104px -46px no-repeat; 
	}
#nav_catalogue a:hover {
	background:url(navigation/navbar.gif) -104px -74px no-repeat; 
	}
#nav_payments a:hover {
	background:url(navigation/navbar.gif) -104px -102px no-repeat; 
	}
#nav_nam a:hover {
	background:url(navigation/navbar.gif) -104px -130px no-repeat; 
	}
#nav_tax a:hover {
	background:url(navigation/navbar.gif) -104px -158px no-repeat; 
	}
#nav_quality a:hover {
	background:url(navigation/navbar.gif) -104px -186px no-repeat; 
	}
#nav_images a:hover {
	background:url(navigation/navbar.gif) -104px -214px no-repeat; 
	}
#nav_books a:hover {
	background:url(navigation/navbar.gif) -104px -242px no-repeat; 
	}
#nav_caring a:hover {
	background:url(navigation/navbar.gif) -104px -270px no-repeat; 
	}
#nav_faq a:hover {
	background:url(navigation/navbar.gif) -104px -298px no-repeat; 
	}
#nav_hob a:hover {
	background:url(navigation/navbar.gif) -104px -326px no-repeat; 
	}
#nav_about a:hover {
	background:url(navigation/navbar.gif) -104px -354px no-repeat; 
	}
#nav_green a:hover {
	background:url(navigation/navbar.gif) -104px -382px no-repeat; 
	}
	
/* now add the active states which are the same but with left image moved further left */
#nav_home a:active {
	background:url(navigation/navbar.gif) -208px -18px no-repeat; 
}
#nav_pupae a:active {
	background:url(navigation/navbar.gif) -208px -46px no-repeat; 
	}
#nav_catalogue a:active {
	background:url(navigation/navbar.gif) -208px -74px no-repeat; 
	}
#nav_payments a:active {
	background:url(navigation/navbar.gif) -208px -102px no-repeat; 
	}
#nav_nam a:active {
	background:url(navigation/navbar.gif) -208px -130px no-repeat; 
	}
#nav_tax a:active {
	background:url(navigation/navbar.gif) -208px -158px no-repeat; 
	}
#nav_quality a:active {
	background:url(navigation/navbar.gif) -208px -186px no-repeat; 
	}
#nav_images a:active {
	background:url(navigation/navbar.gif) -208px -214px no-repeat; 
	}
#nav_books a:active {
	background:url(navigation/navbar.gif) -208px -242px no-repeat; 
	}
#nav_caring a:active {
	background:url(navigation/navbar.gif) -208px -270px no-repeat; 
	}
#nav_faq a:active {
	background:url(navigation/navbar.gif) -208px -298px no-repeat; 
	}
#nav_hob a:active {
	background:url(navigation/navbar.gif) -208px -326px no-repeat; 
	}
#nav_about a:active {
	background:url(navigation/navbar.gif) -208px -354px no-repeat; 
	}
#nav_green a:active {
	background:url(navigation/navbar.gif) -208px -382px no-repeat; 
	}