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

/* Image for the ul and some height and width properties */
ul#nav_voodoo {
	width: 467px;
	height: 45px;
	padding:0;
	background: url('../images/0912/voodoo_menu.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_voodoo li {
display:block;
height:45px;
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
top: 0px;
border-bottom-style: none;
} 

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



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

ul#nav_voodoo li#i1 {
left: 12px; 
width: 50px;
}

ul#nav_voodoo li#i2 {
left: 76px; 
width: 55px;
} 

ul#nav_voodoo li#i3 {
left: 146px; 
width: 82px;
} 

ul#nav_voodoo li#i4 {
left: 244px; 
width: 116px;
} 

ul#nav_voodoo li#i5 {
left: 375px; 
width: 76px;
} 


ul#nav_voodoo #i1 a:hover, ul#nav_voodoo #i1 a:active, ul#nav_voodoo #i1.act {
background: transparent url('../images/0912/voodoo_menu.jpg') -12px -45px no-repeat;
}
ul#nav_voodoo #i2 a:hover, ul#nav_voodoo #i2 a:active, ul#nav_voodoo #i2.act {
background: transparent url('../images/0912/voodoo_menu.jpg') -76px -45px no-repeat;
}
ul#nav_voodoo #i3 a:hover, ul#nav_voodoo #i3 a:active, ul#nav_voodoo #i3.act {
background: transparent url('../images/0912/voodoo_menu.jpg') -146px -45px no-repeat;
}
ul#nav_voodoo #i4 a:hover, ul#nav_voodoo #i4 a:active, ul#nav_voodoo #i4.act {
background: transparent url('../images/0912/voodoo_menu.jpg') -244px -45px no-repeat;
}
ul#nav_voodoo #i5 a:hover, ul#nav_voodoo #i5 a:active, ul#nav_voodoo #i5.act {
background: transparent url('../images/0912/voodoo_menu.jpg') -375px -45px no-repeat;
}


/* and for hiding the text */

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