﻿/* choose a suitable font and align the #gallery div in Internet Explorer */
body {
   text-align:left; 
   font-family: arial; arial, sans-serif; 
   font-size:.07em; 
   
   }
   /* The containing box for the gallery. */
#gallery {
	position: relative;
	width: 600px;
	height: 500px;
	margin: 5px auto 0 auto;
	border: 0px #FFFFFF solid;
	clear:both
} 
    /* Removing the list bullets and indentation */
#gallery ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }
    /* Remove the images and text from view */
#gallery a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }
    /* Adding the thumbnail images */
#gallery a.gallery, #gallery a.gallery:visited {
    display:block;
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:pointer;
        }
#gallery a.slidea {
    background:url('../gallery/SMALL/bella2.jpg');
    height:60px; 
    width:90px;
    }
#gallery a.slideb {
    background:url('../gallery/SMALL/roojoey.jpg');
    height:60px; 
    width:90px;
    }
#gallery a.slidec {
    background:url('../gallery/SMALL/redrumped.jpg');
    height:60px; 
    width:90px;
    }
#gallery a.slided {
    background:url('../gallery/SMALL/kestrelchick.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidee {
    background:url('../gallery/SMALL/jaeger.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidef {
    background:url('../gallery/SMALL/echidna.jpg'); 
    height:60px; 
    width:90px;
    }
 #gallery a.slideg {
    background:url('../gallery/SMALL/grey_flyingfox.jpg'); 
    height:60px; 
    width:90px;
      }
#gallery a.slideh{
    background:url('../gallery/SMALL/goshawk.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidei {
    background:url('../gallery/SMALL/fur_seal2.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidej {
    background:url('../gallery/SMALL/fur_seal.jpg');
    height:60px; 
    width:90px;
    }
#gallery a.slidek {
    background:url('../gallery/SMALL/bella4.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidel {
    background:url('../gallery/SMALL/bella1.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidem {
    background:url('../gallery/SMALL/wombat.jpg'); 
    height:60px; 
    width:90px;
    }
 #gallery a.sliden {
    background:url('../gallery/SMALL/pelican_capture2.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slideo {
    background:url('../gallery/SMALL/pewee_plover.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slidep {
    background:url('../gallery/SMALL/storm_petrel.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slideq {
    background:url('../gallery/SMALL/ruby_wallaby.jpg'); 
    height:60px; 
    width:90px;
    }
#gallery a.slider {
    background:url('../gallery/SMALL/penguin1.jpg'); 
    height:60px; 
    width:90px;
    }
   
    
    /* set the size of the unordered list to neatly house the thumbnails */
#gallery ul {
    width:600px; 
    height:400px;
    }
#gallery li {
    float:right
    }
    
    /* move the thumbnails into the correct position */
#gallery ul {
    margin:5px; 
    float:right;
   
    }
    
    /* change the thumbnail border color */
#gallery a.gallery:hover {
	border: 1px #FFFFFF solid;
}
    
    /* styling the :hover span */
#gallery a.gallery:hover span {
	position: absolute;
	width: 372px;
	height: 330px;
	top: 160px;
	left: 125px;
	color: #000;
	background: #fff;
	 clear:both
}
    
#gallery a.gallery:hover img {
	border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }
    
#gallery a.slideb:hover img, #gallery a.slidei:hover img {
    float:right;
    clear:both
    }
#gallery {
    background:#fff url(../images/back.jpg) 75px 10px no-repeat;
    }