/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/gallery/simple.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* The outer container with a relative position */
#gallery {
	width:685px;
	height:465px;
	position:relative;
	background:#eee;
	border:1px solid #aaa;
	margin: 0 auto;
	z-index: 1;
}

/* Float the ul to the right with a width to give 3 thumbnail images per row */
#gallery ul {list-style:none; padding:0; margin:8px 0 0 0; width:180px; float:right;}

/* Place the list items inline using display:inline for IE and float:left */
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 0 5px 5px; border:1px solid #fff; cursor:pointer;}

/* Set up the thumbnail images as the background images */
#gallery ul li.tb1 {background:url(../images/gallery/01_gallery_bigBone.jpg) -60px -260px;}
#gallery ul li.tb2 {background:url(../images/gallery/02_gallery_nadineBone.jpg) -185px -108px;}
#gallery ul li.tb3 {background:url(../images/gallery/03_gallery_billBlainBonefish.jpg) -130px -220px;}
#gallery ul li.tb4 {background:url(../images/gallery/17_gallery_ericLCflyFishing.jpg) -130px -40px;}
#gallery ul li.tb5 {background:url(../images/gallery/04_gallery_bobsBonefish.jpg) -270px -180px;}
#gallery ul li.tb6 {background:url(../images/gallery/06_gallery_charlieCaymanBonefish.jpg) -270px -260px;}
#gallery ul li.tb7 {background:url(../images/gallery/07_gallery_caymanBonefishing.jpg) -100px -300px;}
#gallery ul li.tb8 {background:url(../images/gallery/08_gallery_mrJacksonBonefish.jpg) -230px -340px;}
#gallery ul li.tb9 {background:url(../images/gallery/09_gallery_caymanFlyfishing.jpg) -150px -200px;}
#gallery ul li.tb10 {background:url(../images/gallery/10_gallery_jeddFlyfishing.jpg) -200px -40px;}
#gallery ul li.tb11 {background:url(../images/gallery/11_gallery_bonefishWrangler.jpg) -210px -210px;}
#gallery ul li.tb12 {background:url(../images/gallery/12_gallery_jeddsFirst.jpg) -330px -550px;}
#gallery ul li.tb13 {background:url(../images/gallery/13_gallery_firstBonefish.jpg) -180px -190px;}
#gallery ul li.tb14 {background:url(../images/gallery/14_gallery_clearWaterFishing.jpg) -350px -40px;}
#gallery ul li.tb15 {background:url(../images/gallery/15_gallery_landingBonefish.jpg) -40px -210px;}
#gallery ul li.tb16 {background:url(../images/gallery/16_gallery_fightingBonefish.jpg) -400px -90px;}
#gallery ul li.tb17 {background:url(../images/gallery/05_gallery_dennisKomlosBonefish.jpg) -240px -315px;}
#gallery ul li.tb18 {background:url(../images/gallery/19_gallery_barkersCast.jpg) -320px -170px;}
#gallery ul li.tb20 {background:url(../images/gallery/20_gallery_dadEEbone.jpg) -120px -230px;}
#gallery ul li.tb21 {background:url(../images/gallery/22_gallery_andrejFiver.jpg) -500px -290px;}
#gallery ul li.tb22 {background:url(../images/gallery/21_gallery_dadPermit.jpg) -500px -264px;}
#gallery ul li.tb23 {background:url(../images/gallery/18_gallery_rainbowCast.jpg) -80px -64px;}
#gallery ul li.tb24 {background:url(../images/gallery/23_gallery_mikeFirstBonefish.jpg) -180px -310px;}
#gallery ul li.tb25 {background:url(../images/gallery/24_gallery_dadBigBone.jpg) -230px -340px;}

/* Hide the full size images */
#gallery ul li span i img {display:none;}

/* set up the .click style which will be added using javascript */

/* Change the li border to white */
#gallery ul li.click {border-color:#000; cursor:default;}

/* Position the span using an absolute position and specify the width and height */
#gallery ul li.click span {position:absolute; left:0; top:0; width:505px; height:465px;}

/* Set up the i so that it is the same size as the span BUT this has a static position so that the image can be both vertically and horizontally centered in all browsers except IE using display:table-cell */
#gallery ul li.click span i {width:505px; height:465px; display:table-cell; vertical-align:middle; text-align:center;} 

/* Make the image actual size using auto width and height */
#gallery ul li.click span i img {display:block; width:auto; height:auto; border:1px solid #fff; margin:0 auto;}

/* set up the default image */
#gallery ul li.default {width:0; height:0; border:0;}
#gallery ul li.default span {position:absolute; left:0; top:0; width:505px; height:465px;}
#gallery ul li.default span i {width:505px; height:465px; display:table-cell; vertical-align:middle; text-align:center;} 
/* specify the image width and height for IE6 */
#gallery ul li.default span i img {display:block; width:450px; height:338px; border:1px solid #fff; margin:0 auto;}
#gallery ul li.off {display:none;}