/* ================================================================ 
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   { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 50%; position: relative; width: 700px; height: 250px }

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

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

/* Set up the thumbnail images as the background images */
/* 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; top: 0; left: 0; width: 350px; height: 250px }

/* 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   { text-align: center; display: table-cell; width: 350px; height: 250px; vertical-align: middle } 

/* 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; top: 0; left: 0; width: 350px; height: 250px }
#gallery ul li.default span i   { text-align: center; display: table-cell; width: 350px; height: 250px; vertical-align: top } 
/* specify the image width and height for IE6 */
#gallery ul li.default span i img  { display: block; margin: 0 auto; width: 350px; height: 250px; border: solid 1px #fff }
#gallery ul li.off {display:none;}