/* ================================================================ 
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:825px; position:relative; background:#eee; 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:4px 0 0 0; width:420px; float:right;}

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

/* Set up the thumbnail images as the background images */ 

/* Offshore Cabins GALLERY */ 
#gallery ul li.oc1 {background:url(../im/oc_small1.jpg);} 
#gallery ul li.oc2 {background:url(../im/oc_small2.jpg);}
#gallery ul li.oc3 {background:url(../im/oc_small3.jpg);}
#gallery ul li.oc4 {background:url(../im/oc_small4.jpg);}
#gallery ul li.oc5 {background:url(../im/oc_small5.jpg);}
#gallery ul li.oc6 {background:url(../im/oc_small6.jpg);}

/* Offshore Storage Transportation GALLERY */ 
#gallery ul li.ost1 {background:url(../im/ost_small1.jpg);} 
#gallery ul li.ost2 {background:url(../im/ost_small2.jpg);}
#gallery ul li.ost3 {background:url(../im/ost_small3.jpg);}
#gallery ul li.ost4 {background:url(../im/ost_small4.jpg);}
#gallery ul li.ost5 {background:url(../im/ost_small5.jpg);}
#gallery ul li.ost6 {background:url(../im/ost_small6.jpg);}

/* Control Rooms GALLERY */ 
#gallery ul li.cr1 {background:url(../im/cr_small1.jpg);} 
#gallery ul li.cr2 {background:url(../im/cr_small2.jpg);}
#gallery ul li.cr3 {background:url(../im/cr_small3.jpg);}
#gallery ul li.cr4 {background:url(../im/cr_small4.jpg);}
#gallery ul li.cr5 {background:url(../im/cr_small5.jpg);}
#gallery ul li.cr6 {background:url(../im/cr_small6.jpg);}

/* Accomodations GALLERY */ 
#gallery ul li.ac1 {background:url(../im/ac_small1.jpg);} 
#gallery ul li.ac2 {background:url(../im/ac_small2.jpg);}
#gallery ul li.ac3 {background:url(../im/ac_small3.jpg);}
#gallery ul li.ac4 {background:url(../im/ac_small4.jpg);}
#gallery ul li.ac5 {background:url(../im/ac_small5.jpg);}
#gallery ul li.ac6 {background:url(../im/ac_small6.jpg);}


/* Blast Resistant Modules GALLERY */ 
#gallery ul li.brm1 {background:url(../im/brm_small1.jpg);} 
#gallery ul li.brm2 {background:url(../im/brm_small2.jpg);}
#gallery ul li.brm3 {background:url(../im/brm_small3.jpg);}
#gallery ul li.brm4 {background:url(../im/brm_small4.jpg);}
#gallery ul li.brm5 {background:url(../im/brm_small5.jpg);}
#gallery ul li.brm6 {background:url(../im/brm_small6.jpg);}

/* Offshore Rentals GALLERY */ 
#gallery ul li.or1 {background:url(../im/or_small1.jpg);} 
#gallery ul li.or2 {background:url(../im/or_small2.jpg);}
#gallery ul li.or3 {background:url(../im/or_small3.jpg);}
#gallery ul li.or4 {background:url(../im/or_small4.jpg);}
#gallery ul li.or5 {background:url(../im/or_small5.jpg);}
#gallery ul li.or6 {background:url(../im/or_small6.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 {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:270px;padding-left:5px;}

/* 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:270px; 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:400px; height:270px;padding-left:5px;}
#gallery ul li.default span i {width:400px; height:270px; 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:397px; height:262px; border:1px solid #fff; margin:0 auto;}
#gallery ul li.off {display:none;}