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


/* declaring navigation list background white color*/
ul#menu{
	width:450px;
/*	width:525px;*/
	height:80px;
	background:#FFFFFF repeat-x;
	list-style:none;
	margin:0; 	padding:0;

}

/* to make the navigation into a horizontal list*/
ul#menu li{
	float:left;
}


/* positioning the upper part of sprite.jpeg image for the navigation button (initial state) */
ul#menu a{
	background:url(../images/sprite.jpg) no-repeat scroll top left;
	display:block;
	height:80px;
	position:relative;
}


/* masking the sprite.jpeg so that only "home" will be displayed */
ul#menu li.home a{
	width:105px;
}

ul#menu li.about a{
	width:105px;
	background-position:-105px 0px;
}

ul#menu li.services a{
	width:105px;
	background-position:-210px 0px;
}

ul#menu li.positions a{
	width:105px;
	background-position:-315px 0px;
}

ul#menu li.contact a{
	width:105px;
	background-position:-420px 0px;
}


/* position the bottom part of the sprite.jpeg for the hover state */
ul#menu li a:hover{
	background:url(../images/sprite.jpg) no-repeat scroll bottom left;
	display:block;
	height: -80px;
}

ul#menu li.home a:hover, #home ul li.home a{
	background-position:0px -80px;
}

ul#menu li.about a:hover, #about ul li.about a{
	background-position:-105px -80px;
}

ul#menu li.services a:hover, #services ul li.services a{
	background-position:-210px -80px;
}

ul#menu li.positions a:hover, #positions ul li.positions a{
	background-position:-315px -80px;
}

ul#menu li.contact a:hover, #positions ul li.contact a{
	background-position:-420px -80px;
}