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

Define the width of the nav div

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

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

	
#nav ul 
	{
	list-style:none;
	width: 25px;
	height: 523px;
    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.services.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#services a {
	width:25px;
	height:70px;
	 }
li#general a {
	width:25px;
	height:65px;
	 }
li#perio a {
	width:25px;
	height:89px;
	 }
li#cosmetic a {
	width:25px;
	height:76px;
	 }
li#implant a {
	width:25px;
	height:69px;
	 }
li#invis a {
	width:25px;
	height:81px;
	 }
li#full a {
	width:25px;
	height:73px;
	 }
	
/*-----------------------------------------------------------------------------

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#services a:link, li#services a:visited {	
	background-position: -0px -0px;
	}
	
li#services a:hover, li#services a:focus {	
	background-position: -25px -0px;
	}
	
li#general a:link, li#general a:visited {	
	background-position: -0px -70px;
	}
	
li#general a:hover, li#general a:focus {	
	background-position: -75px -54px;
	width: 25px;
    height: 81px;
	margin-top: -16px;
	}	
	
li#perio a:link, li#perio a:visited {	
	background-position: -0px -135px;
	}
	
li#perio a:hover, li#perio a:focus {	
	background-position: -125px -119px;
	width: 25px;
    height: 105px;
	margin-top: -16px;
	}	
	
li#cosmetic a:link, li#cosmetic a:visited {	
	background-position: -0px -224px;
	}
	
li#cosmetic a:hover, li#cosmetic a:focus {	
	background-position: -175px -208px;
	width: 25px;
    height: 92px;
	margin-top: -16px;
	}

li#implant a:link, li#implant a:visited {	
	background-position: -0px -300px;
	}
	
li#implant a:hover, li#implant a:focus {	
	background-position: -225px -284px;
	width: 25px;
    height: 85px;
	margin-top: -16px;
	}	
	
li#invis a:link, li#invis a:visited {	
	background-position: -0px -369px;
	}
	
li#invis a:hover, li#invis a:focus {	
	background-position: -275px -353px;
	width: 25px;
    height: 97px;
	margin-top: -16px;
	}	
	
li#full a:link, li#full a:visited {	
	background-position: -0px -450px;
	}
	
li#full a:hover, li#full a:focus {	
	background-position: -325px -434px;
	width: 25px;
    height: 89px;
	margin-top: -16px;
	}

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

Set the on states using the body id.

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

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

body#services-page li#general a:hover, body#services-page li#general a:focus {	
	background-position: -50px -54px;
	width: 25px;
	margin-top: -16px;
	}

body#general-page li#general a:link, body#general-page li#general a:visited {	
	background-position: -75px -54px;
	width: 25px;
    height:81px;
	margin-top: -16px;
	}

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

body#general-page li#perio a:hover, body#general-page li#perio a:focus {	
	background-position: -100px -119px;
	width: 25px;
	margin-top: -16px;
	}
	
body#perio-page li#perio a:link, body#perio-page li#perio a:visited {	
	background-position: -125px -119px;
	width: 25px;
    height:105px;
	margin-top: -16px;
	}

body#perio-page li#general a:hover, body#perio-page li#general a:focus {	
	background-position: -100px -54px;
	overflow: auto;
	position: relative;
	margin-top: -16px;
	}
	
body#perio-page li#cosmetic a:hover, body#perio-page li#cosmetic a:focus {	
	background-position: -150px -208px;
	width: 25px;
	margin-top: -16px;
	position: relative;
	}
	
body#cosmetic-page li#cosmetic a:link, body#cosmetic-page li#cosmetic a:visited {	
	background-position: -175px -208px;
	width: 25px;
    height:92px;
	margin-top: -16px;
	}

body#cosmetic-page li#perio a:hover, body#cosmetic-page li#perio a:focus {	
	background-position: -150px -119px;
	width: 25px;
	margin-top: -16px;
	overflow: auto;
	position: relative;
	}
	
body#cosmetic-page li#implant a:hover, body#cosmetic-page li#implant a:focus {	
	background-position: -200px -284px;
	width: 25px;
	margin-top: -16px;
	position: relative;
	}


body#implant-page li#implant a:link, body#implant-page li#implant a:visited {	
	background-position: -225px -284px;
	width: 25px;
    height:85px;
	margin-top: -16px;
	}

body#implant-page li#cosmetic a:hover, body#implant-page li#cosmetic a:focus {	
	background-position: -200px -208px;
	overflow: auto;
	position: relative;
	}

body#implant-page li#invis a:hover, body#implant-page li#invis a:focus {	
	background-position: -250px -353px;
	width: 25px;
	margin-top: -16px;
	}


body#invis-page li#invis a:link, body#invis-page li#invis a:visited {	
	background-position: -275px -353px;
	width: 25px;
    height:97px;
	margin-top: -16px;
	}

body#invis-page li#implant a:hover, body#invis-page li#implant a:focus {	
	background-position: -250px -284px;
	overflow: auto;
	position: relative;
	}

body#invis-page li#full a:hover, body#invis-page li#full a:focus {	
	background-position: -300px -434px;
	width: 25px;
	margin-top: -16px;
	}

body#full-page li#full a:link, body#full-page li#full a:visited {	
	background-position: -325px -434px;
	width: 25px;
    height:89px;
	margin-top: -16px;
	}

body#full-page li#invis a:hover, body#full-page li#invis a:focus {	
	background-position: -300px -353px;
	width: 25px;
	margin-top: -16px;
	overflow: auto;
 	position: relative;
	}