/* choose a suitable font and center the #container div in Internet Explorer*/
body {
	background: #FF6600 60px;
	font: bold 85%/1.2 Verdana, Arial, Helvetica, sans-serif;
	color: #FCCD03;
}   
#nav {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 400px;
	padding-bottom: 8px;
}   
/* The containing box for the gallery. */ 
#container {
	position: relative;
	width: 800px;
	height: 550px;
	margin: 10px auto 0;	  
    }
/* Removing the list bullets and indentation */	
#container ul {
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    }
a:link {
	color: #FFCCFF;
	text-decoration: none;
}
a:visited {
	color: #FFCCFF;
	text-decoration: none;
	font-weight: normal;
}
a:hover {
	color: #990099;
}
h4 {
	font-size: 105%;
	color: #FF99CC;
	letter-spacing: .03em;
}
h5 {
	font-size: 80%;
	color: #FCCD03;
	font-weight: normal;
	text-align: left;
	line-height: 1.66;
}
h6 {
	padding-left: 20px;
	font-size: 100%;
	color: #F994A5;
	margin-top: 5px;
}
td#main {
	border: medium double #FFCCFF;
	margin-top: -20px;
}	
/* Remove the images and text from sight */
#container a.gallery span {
	position: absolute;
	width: 1px;
	height: 1px;
	top: 5px;
	left: 5px;
	overflow: hidden;
	background: #FF6600;
	visibility: visible;
    }
/* Adding the thumbnail images */	
#container a.gallery, #container a.gallery:visited {
	display: block;
	color: #FF00FF;
	text-decoration: none;
	border: 1px solid #FF00FF;
	margin: 1px 2px 1px 2px;
	text-align: right;
	cursor: default;
	font-size: 110%;
	font-weight: bold;
    }
#container a.slidea {
    background:  url(thumbnails/rhino6.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
#container a.slideb {
    background:  url(thumbnails/roscoe.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
#container a.slidec {
    background:  url(thumbnails/timsfo.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
#container a.slided {
    background:  url(thumbnails/Untitled4.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
* html #container a.slided {
    width: 75px; 
    width: 75px;
    }
#container a.slidee {
    background:  url(thumbnails/venus-of-fullerton.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
#container a.slidef {
    background:  url(thumbnails/venus-of-orange.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
* html #container a.slidef {
    width: 75px; 
    width: 75px;
    }
#container a.slideg {
    background:  url(thumbnails/wallflower.jpg) no-repeat; 
    height: 75px; 
    width: 75px;
    }
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width: 250px; 
    height: 505px;
    }
#container li {
    float: left;
    }
/* move the thumbnails into the correct position */
#container ul {
    margin: 20px; 
    float: left;
    }
/* change the thumbnail border color */
#container a.gallery:hover {
    border: 1px solid #FF99FF; 
    }		
/* styling the :hover span */
#container a.gallery:hover span {
    position: absolute; 
    width: 505px; 
    height: 530px; 
    top: 10px; 
    left: 270px; 
    color: #FFCCFF; 
    background: #FF6600;
    }
#container a.gallery:hover img {
    border: 2px solid #FF99FF;
    float: right; 
    margin-left: 10px;
    }
#container {
    background: #FF6600 url(../../graphics/danyol_350.gif) no-repeat 350px 100px;
    }