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

/* Image for the ul and some height and width properties */
ul#nav_products {
	width: 990px;
	height: 334px;
	padding:0;
	background: url('../images/products_big.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_products li {
display:block;
height:334px;
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_products li a {
display:block;
height:334px;
outline: 0;
}



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

ul#nav_products li#i1 {
left: 90px; 
width: 105px;
}

ul#nav_products li#i2 {
left: 195px; 
width: 133px;
} 

ul#nav_products li#i3 {
left: 328px; 
width: 98px;
} 

ul#nav_products li#i4 {
left: 426px; 
width: 131px;
} 

ul#nav_products li#i5 {
left: 557px; 
width: 96px;
} 

ul#nav_products li#i6 {
left: 653px; 
width: 63px;
} 

ul#nav_products li#i7 {
left: 716px; 
width: 165px;
} 


ul#nav_products #i1 a:hover, ul#nav_products #i1 a:active, ul#nav_products #i1.act {
background: transparent url('../images/products_big.jpg') -90px -334px no-repeat;
}
ul#nav_products #i2 a:hover, ul#nav_products #i2 a:active, ul#nav_products #i2.act {
background: transparent url('../images/products_big.jpg') -195px -334px no-repeat;
}
ul#nav_products #i3 a:hover, ul#nav_products #i3 a:active, ul#nav_products #i3.act {
background: transparent url('../images/products_big.jpg') -328px -334px no-repeat;
}
ul#nav_products #i4 a:hover, ul#nav_products #i4 a:active, ul#nav_products #i4.act {
background: transparent url('../images/products_big.jpg') -426px -334px no-repeat;
}
ul#nav_products #i5 a:hover, ul#nav_products #i5 a:active, ul#nav_products #i5.act {
background: transparent url('../images/products_big.jpg') -557px -334px no-repeat;
}
ul#nav_products #i6 a:hover, ul#nav_products #i6 a:active, ul#nav_products #i6.act {
background: transparent url('../images/products_big.jpg') -653px -334px no-repeat;
}
ul#nav_products #i7 a:hover, ul#nav_products #i7 a:active, ul#nav_products #i7.act {
background: transparent url('../images/products_big.jpg') -716px -334px no-repeat;
}

/* and for hiding the text */

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