/* =======================================
--
-- Copyright: innovetia GmbH
--
-- Name     : styles.css
-- 
-- Hisotry  : Version Date 
--            ------- -----------
--              01    20-mar-2010  
--
-- =======================================*/


/* ========== Navigation Bar ========== */

#nav {
	top: 0;
	left: 0;
	margin: 0px 0px 0px 0px;
	padding: 0;
	position: relative;
	background: #ffffff url('../images/menu01.jpg');
	width: 960px; 
	height: 50px;
}

ul#nav {
	list-style-type: none; /* add to remove the default round bullet */
	margin: 0;
	padding: 0;
}

/* ---------- horizontal display of LI items ---------- */
ul#nav li {
	float: left;
}

ul#nav li a {
	position: absolute; /* important */
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 50px;
	background: #ffffff url('../images/menu01.jpg');
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}


/* ---------- Navigation Bar -> select first row - UNSELECTED ---------- */

ul#nav li a.nav-home {
	left: 0px;
	width:190px;
	background-position: 0px 0px;
}

ul#nav li a.nav-services {
	left: 190px;
	width:190px;
	background-position: -190px 0px;
}

ul#nav li a.nav-sale {
	left: 380px;
	width: 190px;
	background-position: -380px 0px;
}

ul#nav li a.nav-rent {
	left: 570px;
	width: 190px;
	background-position: -570px 0px;
}

ul#nav li a.nav-contact {
	left: 760px;
	width: 190px;
	background-position: -760px 0px;
}

/* ---------- Navigation Bar -> select lower row, emulate hover effect using span tag ---------- */

ul#nav li a span {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 50px;
	width: 190px;
	background: #ffffff url('../images/menu01.jpg');
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	z-index: 100; /* use a high value to ensure that the spanÕs background is displayed above the linkÕs background */
}

/* ---------- Navigation Bar -> select second row - HOVER ---------- */


/* ensure that the mouse cursor is display as  a pointer when hovering over the <span> tag  */
ul#nav li a span:hover { 
	cursor:pointer;
}

ul#nav li a.nav-home span {
	background-position: 0px -50px;
}

ul#nav li a.nav-services span {
	background-position: -190px -50px;
}

ul#nav li a.nav-sale span {
	background-position: -380px -50px;
}

ul#nav li a.nav-rent span {
	background-position: -570px -50px;
}

ul#nav li a.nav-contact span {
	background-position: -760px -50px;
}



/* ---------- Navigation Bar -> select second row - SELECTED ---------- */

#page-home ul#nav li a.nav-home {
	background-position: 0px -100px;
}

#page-services ul#nav li a.nav-services {
	background-position: -190px -100px;
}

#page-sale ul#nav li a.nav-sale {
	background-position: -380px -100px;
}

#page-rent ul#nav li a.nav-rent  {
	background-position: -570px -100px;
}

#page-contact ul#nav li a.nav-contact {
	background-position: -760px -100px;
}