#nav
	{ 
	width:590px; 
	height:37px;
	
	float:right;
	
	}

	
#nav ul 
	{
	list-style:none;
	width: 588px;
	height: 37px;
	margin:0 0 0 3px;
	}

#nav li 
	{

    list-style: none;
	display: inline;
	text-align: center;
	}

#nav li a 
	{
	text-decoration: none;
	display:block;
	float:left;	
	background: url(../images/nav1.gif) no-repeat;
	text-indent:-9999px;
	}	
	
/*-----------------------------------------------------------------------------

Define the width of each li item. This is used as a letter box to show the 
correct part of the background image

-----------------------------------------------------------------------------*/	
li.home a {
	width:79px;
	height:37px;
	 }	
li.about a {
	width:61px;
	height:37px;
	 }
li.bathroom a {
	width:94px;
	height:37px;
	 }
li.kitchen a {
	width:80px;
	height:37px;
	 }
li.renovation a {
	width:85px;
	height:37px;
	 }
li.outdoor a {
	width:117px;
	height:37px;
	 }
li.contact a {
	width:71px;
	height:37px;
	 }
	
/*-----------------------------------------------------------------------------

Position the background image within the left boxes we have created. Use hover states
to show the correct background position for hover states.

A negative margin is used to show the whole tab. As this doesn't work in IE a 
separate stylesheet is used for IE6 and below.

-----------------------------------------------------------------------------*/	
li.home a{	
	background-position: 0px 0px;
	}
li.home a:hover{	
	background-position: 0px -37px !important;
	}

li.about a{	
	background-position: -79px 0px !important;
	}
li.about a:hover{	
	background-position: -63px -74px !important;
	width: 77px;
	margin-left: -16px;
	}
li.bathroom a{	
	background-position: -140px 0px !important;
	}
	
li.bathroom a:hover{	
	background-position: -124px -111px !important;
	width: 110px;
	margin-left: -16px;
	}
li.kitchen a{	
	background-position: -234px 0px !important;
	}
	
li.kitchen a:hover{	
	background-position: -218px -148px !important;
	width: 96px;
	margin-left: -16px;
	}	
	
li.renovation a{	
	background-position: -313px 0px !important;
	}
	
li.renovation a:hover{	
	background-position: -297px -185px !important;
	width: 101px;
	margin-left: -16px;
	}	

li.outdoor a{	
	background-position: -399px 0px !important;
	}
	
li.outdoor a:hover{	
	background-position: -383px -222px !important;
	width: 133px;
	margin-left: -16px;
	}
	
li.contact a{	
	background-position: -515px 0px !important;
	}
	
li.contact a:hover{	
	background-position: -499px -259px !important;
	width: 87px;
	margin-left: -16px;
	}

/*-----------------------------------------------------------------------------

Set the on states using the body id.

-----------------------------------------------------------------------------*/	
body.home li.home a {	
	background-position: 0px -37px !important;
	}
	
body.home li.about a:hover{	
background-position: -63px -296px !important;
	width: 77px;
	margin-left: -16px;
	}

body.page-about li.about a {	
	background-position: -63px -74px !important;
	width: 77px;
	margin-left: -16px;
	}
	
body.page-about li.home a:hover{	
	background-position: 0px -296px !important;
	overflow: auto;
	position: relative;

	}
body.page-about li.bathroom a:hover{	
	background-position: -124px -333px !important;
	width: 110px;
	margin-left: -16px;
	}

body.page-bathrooms li.bathroom a{	
	background-position: -124px -111px !important;
	width: 110px;
	margin-left: -16px;
	}
body.page-bathrooms li.about a:hover{	
	background-position: -63px -333px !important;
	overflow: auto;
	position: relative;
	}
body.page-bathrooms li.kitchen a:hover{	
	background-position: -218px -370px !important;
	width: 96px;
	margin-left: -16px;
	}
	
body.page-kitchens li.kitchen a{	
	background-position: -218px -148px !important;
	width: 96px;
	margin-left: -16px;
	}
body.page-kitchens li.bathroom a:hover{	
	background-position: -124px -370px !important;
	overflow: auto;
	position: relative;
	}
body.page-kitchens li.renovation a:hover{	
	background-position: -297px -407px !important;
	width: 101px;
	margin-left: -16px;
	}	
	
body.page-new-home li.renovation a{	
	background-position: -297px -185px !important;
	width: 101px;
	margin-left: -16px;
	}
body.page-new-home li.kitchen a:hover{	
	background-position: -218px -407px !important;
	width: 96px;
	overflow: auto;
	position: relative;
	}
	
body.page-new-home li.outdoor a:hover{	
	background-position: -383px -444px !important;
	width: 133px;
	margin-left: -16px;
	position: relative;
	}
	
body.page-outdoor-living li.outdoor a{	
background-position: -383px -222px !important;
	width: 133px;
	margin-left: -16px;
	}

body.page-outdoor-living li.renovation a:hover{	
	background-position: -297px -444px !important;
	width: 101px;
	margin-left: -16px;
	overflow: auto;
 	position: relative;
	}

body.page-outdoor-living li.contact a:hover{	
	background-position: -499px -481px !important;
	width: 87px;
	margin-left: -16px;
	position: relative;
	}

	
body.page-contact li.contact a{	
	background-position: -499px -259px !important;
	width: 87px;
	margin-left: -16px;
	}

body.page-contact li.outdoor a:hover{	
	background-position: -383px -481px !important;
	width: 133px;
	margin-left: -16px;
	overflow: auto;
	position: relative;
	}