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

Define the width of the nav div

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

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

	
#nav ul 
	{
	list-style:none;
	width: 25px;
	height: 282px;
    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.gallery.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#gallery a {
	width:25px;
	height:75px;
	 }
li#test a {
	width:25px;
	height:103px;
	 }
li#forum a {
	width:25px;
	height:104px;
	 }
	
/*-----------------------------------------------------------------------------

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#gallery a:link, li#gallery a:visited {	
	background-position: -0px -0px;
	}
	
li#gallery a:hover, li#gallery a:focus {	
	background-position: -25px -0px;
	}
	
li#test a:link, li#test a:visited {	
	background-position: -0px -75px;
	}
	
li#test a:hover, li#test a:focus {	
	background-position: -75px -59px;
	width: 25px;
    height: 119px;
	margin-top: -16px;
	}	
	
li#forum a:link, li#forum a:visited {	
	background-position: -0px -178px;
	}
	
li#forum a:hover, li#forum a:focus {	
	background-position: -125px -162px;
	width: 25px;
    height: 120px;
	margin-top: -16px;
	}

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

Set the on states using the body id.

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

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

body#gallery-page li#test a:hover, body#gallery-page li#test a:focus {	
	background-position: -50px -59px;
	width: 25px;
	margin-top: -16px;
	}

body#test-page li#test a:link, body#test-page li#test a:visited {	
	background-position: -75px -59px;
	width: 25px;
    height:119px;
	margin-top: -16px;
	}

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

body#test-page li#forum a:hover, body#test-page li#forum a:focus {	
	background-position: -100px -162px;
	width: 25px;
	margin-top: -16px;
	}

body#forum-page li#forum a:link, body#forum-page li#forum a:visited {	
	background-position: -125px -162px;
	width: 25px;
    height:120px;
	margin-top: -16px;
	}

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