@charset "utf-8";
/* CSS Document */

/* Image for the ul and some height and width properties */
ul#nav_bottles {
	width: 397px;
	height: 162px;
	padding:0;
	background: url('../images/voodoo_bottles.jpg');
	position:relative;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
} 

/* We want li as block and to be as tall as image */
ul#nav_bottles li {
display:block;
height:162px;
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
top: 0;
border-bottom-style: none;
} 

/* a should also be block and 96px tall */
ul#nav_bottles li a {
display:block;
height:162px;
outline: 0;
}



/* This is the boring part, every link has to be positioned according to the image */

ul#nav_bottles li#i1 {
left: 0px; 
width: 50px;
}

ul#nav_bottles li#i2 {
left: 50px; 
width: 65px;
} 

ul#nav_bottles li#i3 {
left: 115px; 
width: 46px;
} 

ul#nav_bottles li#i4 {
left: 161px; 
width: 65px;
} 

ul#nav_bottles li#i5 {
left: 226px; 
width: 43px;
} 

ul#nav_bottles li#i6 {
left: 269px; 
width: 27px;
} 

ul#nav_bottles li#i7 {
left: 296px; 
width: 82px;
} 


ul#nav_bottles #i1 a:hover, ul#nav_bottles #i1 a:active, ul#nav_bottles #i1.act {
background: transparent url('../images/voodoo_bottles.jpg') 0 -162px no-repeat;
}
ul#nav_bottles #i2 a:hover, ul#nav_bottles #i2 a:active, ul#nav_bottles #i2.act {
background: transparent url('../images/voodoo_bottles.jpg') -50px -162px no-repeat;
}
ul#nav_bottles #i3 a:hover, ul#nav_bottles #i3 a:active, ul#nav_bottles #i3.act {
background: transparent url('../images/voodoo_bottles.jpg') -115px -162px no-repeat;
}
ul#nav_bottles #i4 a:hover, ul#nav_bottles #i4 a:active, ul#nav_bottles #i4.act {
background: transparent url('../images/voodoo_bottles.jpg') -161px -162px no-repeat;
}
ul#nav_bottles #i5 a:hover, ul#nav_bottles #i5 a:active, ul#nav_bottles #i5.act {
background: transparent url('../images/voodoo_bottles.jpg') -226px -162px no-repeat;
}
ul#nav_bottles #i6 a:hover, ul#nav_bottles #i6 a:active, ul#nav_bottles #i6.act {
background: transparent url('../images/voodoo_bottles.jpg') -269px -162px no-repeat;
}
ul#nav_bottles #i7 a:hover, ul#nav_bottles #i7 a:active, ul#nav_bottles #i7.act {
background: transparent url('../images/voodoo_bottles.jpg') -296px -162px no-repeat;
}

/* and for hiding the text */

ul#nav_bottles li a {
text-indent:-9000px; background-color:transparent; }