/* ================================================================ 
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 */
#gallery1 {width:773px; height:450px;  position:relative; background:#fff; border:0px solid #aaa; }

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

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

/* Set up the thumbnail images as the background images */
#gallery1 ul li.tb1 {}



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

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

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

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

/* 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 */
#gallery1 ul li.click span i {width:550px; height:450px; display:table-cell; vertical-align:middle; text-align:center;} 

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

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