@charset "utf-8";
/* CSS Document */

body {
	background-color: #000000;
	margin: 0; 
	padding: 0;
	text-align: center; 
}


#container      
	{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
	}

#content    
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #000000;
	margin-left: -440px;
	position: absolute;
	top: -240px; /* 40% of height  */
	left: 50%;
	width: 880px;
	height: 600px;
	visibility: visible;
	}
	
	
	
p{
	font: 100% Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
line-height: 18px;
	
	}

a {
text-decoration: none;
color:#000000;

}

a:hover {
text-decoration: underline;

}



	
#sidenav  
	{
position:absolute;
	top:120px; 
	left:0px;
	width: 130px;
	height: auto;
	text-align:center;
	}
	
	
/* description divs  */
#description{
position:absolute; 
top:440px; 
margin-left:20px;
background-image:url(../images/black.jpg);
width: 130px; 
height: auto; 
visibility:visible;
}
	
#description1{position:absolute; 
top:455px; 
margin-left:10px;
width: 135px; 
height: auto;
background-image:url(../images/black.jpg); 
z-index:3;
visibility:visible;}

#description2, #description3, #description4, #description5, #description6, #description7, #description8, #description9, #description10, #description11, #description12 {
position:absolute; 
top:455px; 
margin-left:10px;
width: 135px; 
height: auto;
background-image:url(../images/black.jpg);
z-index:3;  
visibility:hidden;
}



#description1 p, #description2 p, #description3 p, #description4 p, #description5 p, #description6 p, #description7 p, #description8 p, #description9 p, #description10 p, #description11 p, #description12 p{
font-family:Arial, Verdana, Helvetica, sans-serif; font-size:11px; letter-spacing: .15em; color:#63625f;}
	
	
	

	

#header   
	{
	position: absolute;
	text-align:center;
	top: 15px; 
	left: 130px;
	width: 750px;
	height: auto;
	}
	
		

#nav   
	{
	position: absolute;
	text-align:center;
	top: 95px; 
	left: 130px;
	width: 750px;
	height: auto;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #63625f;
	}
	
#nav a 
	{
	text-decoration: none;
	color: #63625f;
	}
	
#nav a:hover 
	{
	text-decoration:none;
	color: #7b7a76;
	}
	
	
#nav.highlight {
color:#7b7a76;	
	}
	

#pic  
	{
	position: absolute;
	text-align:center;
	top: 115px; 
	left: 130px;
	width: 750px;
	height: 455px;
	visibility:visible;
	}
	
	
#illusnav   
	{
	position: absolute;
	text-align:center;
	font-family: Verdana, Geneva, Arial, sans-serif;
	position:relative;
	left:130px;
	top:575px;
	width: 750px;
	height: auto;
	letter-spacing: .10em;
	color:#63625f;
	font-size: 11px;
	}
	
#illusnav a 
	{
	text-decoration:none;
	color:#63625f;
	}
	
#illusnav a:hover 
	{
	text-decoration:none;
	color: #7b7a76;
	}





/* large images  */

#pic1{
position: absolute;	top: 0px;	left: 0px; width: 750px; height: 455px;
visibility:visible;
}

#pic2, #pic3, #pic4, #pic5, #pic6, #pic7, #pic8, #pic9, #pic10, #pic11, #pic12 {
position: absolute;	top: 0px;	left: 0px; width: 750px; height: 455px;
visibility:hidden;
}



#mammals    
	{ position: absolute;
	top:0px;
	left: 95px;
	z-index: 1; }
	
#other    
	{ position: absolute;
	top:225px;
	left: 95px;
	z-index: 2;}
	
#reptiles    
	{ position: absolute;
	top:60px;
	left: 285px;
	z-index: 3; }
	
#dinosaurs    
	{ position: absolute;
	top:5px;
	left: 420px;
	z-index: 4;}
	
#birds    
	{ position: absolute;
	top:210px;
	left: 450px;
	z-index: 5; }













/*  rollovers  */

/* Dinosaurs  */

#dinobutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/dinosaurs/button.jpg") no-repeat 0 0;}


#dinobutton:hover
{   background-position: 0 -40px;}

#dinobutton span
{  display: none; }




#reptilebutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/reptiles/button.jpg") no-repeat 0 0;}


#reptilebutton:hover
{   background-position: 0 -40px;}

#reptilebutton span
{  display: none; }


#birdbutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/birds/button.jpg") no-repeat 0 0;}


#birdbutton:hover
{   background-position: 0 -40px;}

#birdbutton span
{  display: none; }



#birdbutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/birds/button.jpg") no-repeat 0 0;}


#birdbutton:hover
{   background-position: 0 -40px;}

#birdbutton span
{  display: none; }



#mammalsbutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/mammals/button.jpg") no-repeat 0 0;}


#mammalsbutton:hover
{   background-position: 0 -40px;}

#mammalsbutton span
{  display: none; }




#otherbutton 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/other/button.jpg") no-repeat 0 0;}


#otherbutton:hover
{   background-position: 0 -40px;}

#otherbutton span
{  display: none; }

#design1button 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/design1/button.jpg") no-repeat 0 0;}


#design1button:hover
{   background-position: 0 -40px;}

#design1button span
{  display: none; }




#design2button 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/design2/button.jpg") no-repeat 0 0;}


#design2button:hover
{   background-position: 0 -40px;}

#design2button span
{  display: none; }



#design3button 
{float:left;  display: block;  width: 42px;  height: 42px;  background: url("../images/design3/button.jpg") no-repeat 0 0;}


#design3button:hover
{   background-position: 0 -40px;}

#design3button span
{  display: none; }



#numberbutton1
{float:left;  display: block;  width: 28px;  height: 16px;  background: url("../images/number1.gif") no-repeat 0 0;}

#numberbutton2
{float:left;  display: block;  width: 30px;  height: 16px;  background: url("../images/number2.gif") no-repeat 0 0;}

#numberbutton3
{float:left;  display: block;  width: 30px;  height: 16px;  background: url("../images/number3.gif") no-repeat 0 0;}

#numberbutton1:hover, #numberbutton2:hover, #numberbutton3:hover
{   background-position: 0 -16px;}

#numberbutton1 span, #numberbutton2 span, #numberbutton3 span,
{  display: none; }

#numberbutton1H
{float:left;  display: block;  width: 28px;  height: 16px;  background: url("../images/number1H.gif") no-repeat 0 0;}

#numberbutton2H
{float:left;  display: block;  width: 30px;  height: 16px;  background: url("../images/number2H.gif") no-repeat 0 0;}

#numberbutton3H
{float:left;  display: block;  width: 30px;  height: 16px;  background: url("../images/number3H.gif") no-repeat 0 0;}