/* ================================================================ 
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:600px; height:575px; position:relative; background:#eee; border:1px solid #aaa; background-color: #000000}

/* 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:210px; float:right;}

/* Place the list items inline using display:inline for IE and float:left */
#gallery ul li {display:inline; width:60px; height:60px; 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/AndrewB&W.jpg) -80px -120px;;}
#gallery ul li.tb2 {background:url(../images/Brandon.jpg) -100px -50px;}
#gallery ul li.tb3 {background:url(../images/cory2.jpg) -90px -50px;}
#gallery ul li.tb4 {background:url(../images/Diesel.jpg) -120px -100px;}
#gallery ul li.tb5 {background:url(../images/Joey.jpg) -60px -20px;}
#gallery ul li.tb6 {background:url(../images/johnny.jpg) -80px -40px;}
#gallery ul li.tb7 {background:url(../images/kent1.jpg) -280px -40px;}
#gallery ul li.tb8 {background:url(../images/kevin1.jpg) -70px -20px;}
#gallery ul li.tb9 {background:url(../images/marco2.jpg) -40px -20px;}
#gallery ul li.tb10 {background:url(../images/michael2.jpg) -80px -30px;}
#gallery ul li.tb11 {background:url(../images/Miguel.jpg) -40px -30px;}
#gallery ul li.tb12 {background:url(../images/nick1.jpg) -60px -30px;}
#gallery ul li.tb13 {background:url(../images/nico.jpg) -290px -20px;}
#gallery ul li.tb14 {background:url(../images/Rod.jpg) -120px -50px;}
#gallery ul li.tb15 {background:url(../images/ron.jpg) -120px -40px;}
#gallery ul li.tb16 {background:url(../images/scott1.jpg) -50px -70px;}
#gallery ul li.tb17 {background:url(../images/Steel1.jpg) -110px -30px;}
#gallery ul li.tb18 {background:url(../images/steve.jpg) -60px -10px;}
#gallery ul li.tb19 {background:url(../images/trevor1.jpg) -70px -40px;}
#gallery ul li.tb20 {background:url(../images/vince10.jpg) -85px -35px;}


#gallery ul li.tb21 {background:url(../images/aimee.jpg) -110px -25px;;}
#gallery ul li.tb22 {background:url(../images/alexussd2.jpg) -80px -30px;}
#gallery ul li.tb23 {background:url(../images/alie.jpg) -70px -55px;}
#gallery ul li.tb24 {background:url(../images/angel.jpg) -130px -50px;}
#gallery ul li.tb25 {background:url(../images/CArly.jpg) -80px -60px;}
#gallery ul li.tb26 {background:url(../images/cj.jpg) -90px -40px;}
#gallery ul li.tb27 {background:url(../images/gem.jpg) -170px -50px;}
#gallery ul li.tb28 {background:url(../images/heather.jpg) -90px -20px;}
#gallery ul li.tb29 {background:url(../images/jasmine.jpg) -110px -80px;}
#gallery ul li.tb30 {background:url(../images/jen.jpg) -80px -30px;}
#gallery ul li.tb31 {background:url(../images/jenna.jpg) -110px -70px;}
#gallery ul li.tb32 {background:url(../images/jenny.jpg) -130px -40px;}
#gallery ul li.tb34 {background:url(../images/jill.jpg) -60px -60px;}
#gallery ul li.tb35 {background:url(../images/kelly.jpg) -100px -60px;}
#gallery ul li.tb36 {background:url(../images/kylie0001.jpg) -130px -40px;}
#gallery ul li.tb37 {background:url(../images/lexi.jpg) -80px -50px;}
#gallery ul li.tb33 {background:url(../images/Malibu.jpg) -110px -30px;}
#gallery ul li.tb38 {background:url(../images/michelle1.jpg) -120px -60px;}
#gallery ul li.tb39 {background:url(../images/nadia1.jpg) -190px -50px;}
#gallery ul li.tb40 {background:url(../images/nina.jpg) -95px -25px;}
#gallery ul li.tb41 {background:url(../images/robyn.jpg) -80px -70px;}
#gallery ul li.tb42 {background:url(../images/shelly.jpg) -120px -70px;}
#gallery ul li.tb43 {background:url(../images/summern.jpg) -80px -60px;}
#gallery ul li.tb44 {background:url(../images/sidney.jpg) -100px -40px;}



/* 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:400px; height:355px;}

/* 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:400px; height:355px; 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:570px; height:355px;}
#gallery ul li.default span i {width:570px; height:355px; 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:320px; height:240px; border:1px solid #fff; margin:0 auto;}
#gallery ul li.off {display:none;}