/* ================================================================ 
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:580px; height:650px; position:relative; margin:0px 10px 0px 0px;  border:0px solid #aaa;}

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

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

/* Set up the thumbnail images as the background images */
#gallery ul li.tb1dss {background:url(../images/dss/male/1.jpg) ;}
#gallery ul li.tb2dss {background:url(../images/dss/male/2.jpg) ;}
#gallery ul li.tb3dss {background:url(../images/dss/male/3.jpg) ;}
#gallery ul li.tb4dss {background:url(../images/dss/male/4.jpg) ;}
#gallery ul li.tb5dss {background:url(../images/dss/male/5.jpg) ;}
#gallery ul li.tb6dss {background:url(../images/dss/male/6.jpg) ;}
#gallery ul li.tb7dss {background:url(../images/dss/male/7.jpg) ;}
#gallery ul li.tb8dss {background:url(../images/dss/male/8.jpg) ;}
#gallery ul li.tb9dss {background:url(../images/dss/male/9.jpg) ;}
#gallery ul li.tb10dss {background:url(../images/dss/male/10.jpg) ;}
#gallery ul li.tb11dss {background:url(../images/dss/male/11.jpg) ;}
#gallery ul li.tb12dss {background:url(../images/dss/male/12.jpg) ;}
#gallery ul li.tb13dss {background:url(../images/dss/male/13.jpg) ;}
#gallery ul li.tb14dss {background:url(../images/dss/male/14.jpg) ;}
#gallery ul li.tb15dss {background:url(../images/dss/male/15.jpg) ;}
#gallery ul li.tb16dss {background:url(../images/dss/male/16.jpg) ;}
#gallery ul li.tb17dss {background:url(../images/dss/male/17.jpg) ;}
#gallery ul li.tb18dss {background:url(../images/dss/male/18.jpg) ;}

 
/* 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 {cursor:default;}

/* Position the span using an absolute position and specify the width and height */
#gallery ul li.click span {position:absolute; left: 46px; top: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 {width:530px; height:386px; 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:0px 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:530px; height:386px; border:0px solid #fff; margin:0 auto;}
#gallery ul li.off {display:none;}