body
	{
		margin: 20px;
		padding: 0;
		font: 100% arial, helvetica, sans-serif;
	}
	
	code
	{
		background: #ddd;
		display: block;
		padding: 1em;
		margin: 1em 0;
	}
	
	#nav
	{
		position: relative;
		background: url(images/bg.jpg) no-repeat;
		width: 224px;
		height: 507px;
	}
	
	#nav h2, #nav span
	{
		position: absolute;
		left: -5000px;
	}
	
	#nav ul
	{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	#home a, #sitemap a, #button1 a, #button2 a, #button3 a, #button4 a, #button5 a, #button6 a, #button7 a, #button8 a, #button9 a, #button10 a, #button11 a, #button12 a, #view a, #info a, #help a, #rewind a, #back a, #forward a, #top a, #bottom a, #ok a
	{
		position: absolute;
		display: block;
	}
	
	#nav li#home a
	{
		left: 33px;
		top: 29px;
		width: 37px;
		height: 37px;
		background: url(images/home.jpg) no-repeat;
	}
	
	#nav li#home a:hover
	{
		background-image: url(images/home.jpg);
		background-repeat: no-repeat;
		background-position: 0 -37px;
	}
	
	#nav li#sitemap a
	{
		left: 154px;
		top: 29px;
		width: 37px;
		height: 37px;
		background: url(images/sitemap.jpg) no-repeat;
	}
	
	#nav li#sitemap a:hover
	{
		background-image: url(images/sitemap.jpg);
		background-repeat: no-repeat;
		background-position: 0 -37px;
	}
	
	#nav li#button1 a, #nav li#button2 a, #nav li#button3 a, #nav li#button4 a, #nav li#button5 a, #nav li#button6 a, #nav li#button7 a, #nav li#button8 a, #nav li#button9 a, #nav li#button10 a, #nav li#button11 a, #nav li#button12 a
	{
		width: 41px;
		height: 21px;
		background: url(images/button.jpg) no-repeat;
	}
	
	#nav li#button1 a
	{
		left: 38px;
		top: 114px;
	}
	
	#nav li#button2 a
	{
		left: 91px;
		top: 114px;
	}
	
	#nav li#button3 a
	{
		left: 145px;
		top: 114px;
	}
	
	#nav li#button4 a
	{
		left: 38px;
		top: 155px;
	}
	
	#nav li#button5 a
	{
		left: 91px;
		top: 155px;
	}
	
	#nav li#button6 a
	{
		left: 145px;
		top: 155px;
	}
	
	#nav li#button7 a
	{
		left: 38px;
		top: 196px;
	}
	
	#nav li#button8 a
	{
		left: 91px;
		top: 196px;
	}
	
	#nav li#button9 a
	{
		left: 145px;
		top: 196px;
	}
	
	#nav li#button10 a
	{
		left: 38px;
		top: 237px;
	}
	
	#nav li#button11 a
	{
		left: 91px;
		top: 237px;
	}
	
	#nav li#button12 a
	{
		left: 145px;
		top: 237px;
	}
	
	#nav li#button1 a:hover, #nav li#button2 a:hover, #nav li#button3 a:hover, #nav li#button4 a:hover, #nav li#button5 a:hover, #nav li#button6 a:hover, #nav li#button7 a:hover, #nav li#button8 a:hover, #nav li#button9 a:hover, #nav li#button10 a:hover, #nav li#button11 a:hover, #nav li#button12 a:hover
	{
		background-image: url(images/button.jpg);
		background-repeat: no-repeat;
		background-position: 0 -21px;
	}
	
	#nav li#view a
	{
		width: 29px;
		height: 30px;
		left: 41px;
		top: 331px;
		background: url(images/circle3.jpg) no-repeat 0 -19px;
	}
	
	#nav li#info a
	{
		width: 33px;
		height: 23px;
		left: 74px;
		top: 312px;
		background: url(images/circle3.jpg) no-repeat -33px 0px;
	}
	
	#nav li#help a
	{
		width: 33px;
		height: 23px;
		left: 116px;
		top: 312px;
		background: url(images/circle3.jpg) no-repeat -75px 0;
	}
	
	#nav li#rewind a
	{
		width: 29px;
		height: 30px;
		left: 154px;
		top: 332px;
		background: url(images/circle3.jpg) no-repeat -113px -20px;
	}
	
	#nav li#back a
	{
		width: 25px;
		height: 59px;
		left: 58px;
		top: 365px;
		background: url(images/circle3.jpg) no-repeat -17px -53px;
	}
	
	#nav li#forward a
	{
		width: 23px;
		height: 59px;
		left: 139px;
		top: 365px;
		background: url(images/circle3.jpg) no-repeat -98px -53px;
	}
	
	#nav li#top a
	{
		width: 62px;
		height: 23px;
		left: 80px;
		top: 342px;
		background: url(images/circle3.jpg) no-repeat -39px -30px;
	}
	
	#nav li#bottom a
	{
		width: 61px;
		height: 22px;
		left: 80px;
		top: 424px;
		background: url(images/circle3.jpg) no-repeat -39px -112px;
	}
	
	#nav li#ok a
	{
		width: 44px;
		height: 46px;
		left: 89px;
		top: 371px;
		background: url(images/circle3.jpg) no-repeat -48px -59px;
	}
	
	#nav li#view a:hover { background: url(images/circle3.jpg) no-repeat 0 -157px; }
	#nav li#info a:hover { background: url(images/circle3.jpg) no-repeat -33px -138px; }
	#nav li#help a:hover { background: url(images/circle3.jpg) no-repeat -75px -138px; }
	#nav li#rewind a:hover { background: url(images/circle3.jpg) no-repeat -113px -158px; }
	#nav li#back a:hover { background: url(images/circle3.jpg) no-repeat -17px -191px; }
	#nav li#forward a:hover { background: url(images/circle3.jpg) no-repeat -98px -191px; }
	#nav li#top a:hover { background: url(images/circle3.jpg) no-repeat -39px -168px; }
	#nav li#bottom a:hover { background: url(images/circle3.jpg) no-repeat -39px -250px; }
	#nav li#ok a:hover { background: url(images/circle3.jpg) no-repeat -48px -197px; }