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

Define the width of the nav div

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

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

	
#nav ul 
	{
	list-style:none;
	width: 25px;
	height: 354px;
    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.about.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#about a {
	width:25px;
	height:85px;
	 }
li#doc a {
	width:25px;
	height:106px;
	 }
li#team a {
	width:25px;
	height:79px;
	 }
li#office a {
	width:25px;
	height:84px;
	 }
	
/*-----------------------------------------------------------------------------

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#about a:link, li#about a:visited {	
	background-position: -0px -0px;
	}
	
li#about a:hover, li#about a:focus {	
	background-position: -100px -0px;
	}
	
li#doc a:link, li#doc a:visited {	
	background-position: -0px -85px;
	}
	
li#doc a:hover, li#doc a:focus {	
	background-position: -75px -69px;
	width: 25px;
    height: 122px;
	margin-top: -16px;
	}	
	
li#team a:link, li#team a:visited {	
	background-position: -0px -191px;
	}
	
li#team a:hover, li#team a:focus {	
	background-position: -50px -175px;
	width: 25px;
    height: 95px;
	margin-top: -16px;
	}	
	
li#office a:link, li#office a:visited {	
	background-position: -0px -270px;
	}
	
li#office a:hover, li#office a:focus {	
	background-position: -25px -254px;
	width: 25px;
    height: 100px;
	margin-top: -16px;
	}

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

Set the on states using the body id.

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

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

body#about-page li#doc a:hover, body#about-page li#doc a:focus {	
	background-position: -250px -69px;
	width: 25px;
	margin-top: -16px;
	}

body#doc-page li#doc a:link, body#doc-page li#doc a:visited {	
	background-position: -75px -69px;
	width: 25px;
    height:122px;
	margin-top: -16px;
	}

body#doc-page li#about a:hover, body#doc-page li#about a:focus {	
	background-position: -250px -0px;
	overflow: auto;
	position: relative;

	}

body#doc-page li#team a:hover, body#doc-page li#team a:focus {	
	background-position: -200px -175px;
	width: 25px;
	margin-top: -16px;

	}
	
body#team-page li#team a:link, body#team-page li#team a:visited {	
	background-position: -50px -175px;
	width: 25px;
    height:95px;
	margin-top: -16px;
	}


body#team-page li#doc a:hover, body#team-page li#doc a:focus {	
	background-position: -200px -69px;
	width: 25px;
	margin-top: -16px;
	overflow: auto;
	position: relative;
	}
	
body#team-page li#office a:hover, body#team-page li#office a:focus {	
	background-position: -125px -254px;
	width: 25px;
	margin-top: -16px;
	position: relative;
	}
	
body#office-page li#office a:link, body#office-page li#office a:visited {	
	background-position: -25px -254px;
	width: 25px;
    height:100px;
	margin-top: -16px;
	}

body#office-page li#team a:hover, body#office-page li#team a:focus {	
	background-position: -125px -175px;
	width: 25px;
	margin-top: -16px;
	overflow: auto;
 	position: relative;
	}