/* Start 12 Image Gallery Style */

/* CSS Script for photo gallery.
Adapted from How to Create a Photographic Gallery Using CSS by Stu Nicholls. 
http://www.webreference.com/programming/css_gallery/ */

/* Images are either 375px high by 250px wide (portrait format) or 250px high by 375px wide (landscape format). */

/* choose a suitable font and center the #container div in Internet Explorer */
/* body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}*/

/* The containing box for the gallery. */
#container {position:relative; width:620px; height:396px; margin:10px auto 0 auto; border:1px solid #aaa; background:#FFF url(images/museum/vt-back-375x375.jpg) 20px 10px no-repeat;}

/* Removing the list bullets and indentation - add size - and position */
#container ul {width:198px; height:386px; padding:0;  margin:5px; list-style-type:none; float:right;}

#container li {float:left;}

/* Remove the images and text from sight */
#container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}

/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}

#container a.slide-01 {background:url(images/museum/Nicola_Valley_Museum_14567T.jpg); height:62px; width:93px;}
#container a.slide-02 {background:url(images/museum/IMG_3369T.JPG); height:62px; width:93px;}
#container a.slide-03 {background:url(images/museum/uc-v.jpg); height:90px; width:60px;}
#container a.slide-04 {background:url(images/museum/IMG_4153T.JPG); height:90px; width:60px;}
#container a.slide-05 {background:url(images/museum/Basket_Case_14224T.JPG); height:90px; width:60px;}
#container a.slide-06 {background:url(images/museum/IMG_4127T.JPG); height:62px; width:93px;}
#container a.slide-07 {background:url(images/museum/IMG_4131T.jpg); height:62px; width:93px;}
#container a.slide-08 {background:url(images/museum/IMG_4137T.jpg); height:90px; width:60px;}
#container a.slide-09 {background:url(images/museum/IMG_4140T.jpg); height:90px; width:60px;}
#container a.slide-10 {background:url(images/museum/IMG_4144T.JPG); height:90px; width:60px;}
#container a.slide-11 {background:url(images/museum/IMG_3426T.jpg); height:62px; width:93px;}
#container a.slide-12 {background:url(images/museum/Teit_Diorama_14187T.jpg); height:62px; width:93px;}

/* styling the hovers */
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover span {position:absolute; width:375px; height:375px; top:10px; left:20px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}

/* End 12 Image Gallery Style */