.menus {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	background-image: url(../images/menus/no_flicker.jpg);
	/*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
}

.menus li {
	display: block;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	float: left;
	width: 190px;
	height: 40px;
	margin-right: 0px;
	background-image: url(../images/menus/menus_sprite.jpg);
	background-repeat: no-repeat;
}

.menus a {
	display: block;
	height: 40px;
	text-indent: -9999px;
	outline: none;
}

#menu1 {
	background-position: 0px 0px;
}

#menu2 {
	background-position: -250px 0px;
}

#menu3 {
	background-position: -500px 0px;
}

#menu4 {
	background-position: -750px 0px;
}

#menu5 {
	background-position: -1000px 0px;
}

#menu6 {
	background-position: -1250px 0px;
}

#menu1.active,#menu1 :hover {
	background-position: 0px bottom;
}

#menu2.active,#menu2 :hover {
	background-position: -250px bottom;
}

#menu3.active,#menu3 :hover {
	background-position: -500px bottom;
}

#menu4.active,#menu4 :hover {
	background-position: -750px bottom;
}

#menu5.active,#menu5 :hover {
	background-position: -1000px bottom;
}

#menu6.active,#menu6 :hover {
	background-position: -1250px bottom;
}

#menu1 a {
	background-image: url(../images/menus/end.jpg);
	background-repeat: no-repeat;
	background-position: left 0px;
}

#menu1 a:hover {
	background-position: left -80px;
}

#menu6 a {
	background-image: url(../images/menus/end.jpg);
	background-repeat: no-repeat;
	background-position: right -40px;
}

#menu6 a:hover {
	background-position: right -120px;
}