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

Define the width of the nav div

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

#nav
	{ 
	width:25px; 
	height: 287px;
	}

	
#nav ul 
	{
	list-style:none;
	width: 25px;
	height: 287px;
    margin: 0px;
	}

#nav li 
	{
    list-style: none;
	display: inline;
	text-align: center;
	}

#nav li a 
	{
	text-decoration: none;
	display:block;
	float:left;	
	background: url(images/leftnav.contact.png) 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#contact a {
	width:25px;
	height:69px;
	 }
li#maps a {
	width:25px;
	height:57px;
	 }
li#app a {
	width:25px;
	height:161px;
	 }
	
/*-----------------------------------------------------------------------------

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#contact a:link, li#contact a:visited {	
	background-position: -0px -0px;
	}
	
li#contact a:hover, li#contact a:focus {	
	background-position: -25px -0px;
	}
	
li#maps a:link, li#maps a:visited {	
	background-position: -0px -69px;
	}
	
li#maps a:hover, li#maps a:focus {	
	background-position: -75px -53px;
	width: 25px;
    height: 73px;
	margin-top: -16px;
	}	
	
li#app a:link, li#app a:visited {	
	background-position: -0px -126px;
	}
	
li#app a:hover, li#app a:focus {	
	background-position: -125px -110px;
	width: 25px;
    height: 177px;
	margin-top: -16px;
	}	

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

Set the on states using the body id.

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

body#contact-page li#contact a:link, body#contact-page li#contact a:visited {	
	background-position: -25px -0px;
	}

body#contact-page li#maps a:hover, body#contact-page li#maps a:focus {	
	background-position: -50px -53px;
	width: 25px;
	margin-top: -16px;
	}

body#maps-page li#maps a:link, body#maps-page li#maps a:visited {	
	background-position: -75px -53px;
	width: 25px;
    height:73px;
	margin-top: -16px;
	}

body#maps-page li#contact a:hover, body#maps-page li#contact a:focus {	
	background-position: -50px -0px;
	overflow: auto;
	position: relative;
	}

body#maps-page li#app a:hover, body#maps-page li#app a:focus {	
	background-position: -100px -110px;
	width: 25px;
	margin-top: -16px;
	}

body#app-page li#app a:link, body#app-page li#app a:visited {	
	background-position: -125px -110px;
	width: 25px;
    height:177px;
	margin-top: -16px;
	}

body#app-page li#maps a:hover, body#app-page li#maps a:focus {	
	background-position: -100px -53px;
	width: 25px;
	margin-top: -16px;
	overflow: auto;
 	position: relative;
	}