/* ================================================================ 
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:732px; height:445px; position:relative; background:url(../img/background.gif);}

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

/* Place the list items inline using display:inline for IE and float:left */
#gallery ul li {display:inline; width:38px; height:38px; float:left; margin:0 0 4px 4px; cursor:pointer;}

/* Set up the thumbnail images as the background images */
#gallery ul li.drink_01_001 {background:url(../photos/drink_01/small/001.jpg);}
#gallery ul li.drink_01_002 {background:url(../photos/drink_01/small/002.jpg);}
#gallery ul li.drink_01_003 {background:url(../photos/drink_01/small/003.jpg);}
#gallery ul li.drink_01_004 {background:url(../photos/drink_01/small/004.jpg);}
#gallery ul li.drink_01_005 {background:url(../photos/drink_01/small/005.jpg);}
#gallery ul li.drink_01_006 {background:url(../photos/drink_01/small/006.jpg);}
#gallery ul li.drink_01_007 {background:url(../photos/drink_01/small/007.jpg);}
#gallery ul li.drink_01_008 {background:url(../photos/drink_01/small/008.jpg);}
#gallery ul li.drink_01_009 {background:url(../photos/drink_01/small/009.jpg);}
#gallery ul li.drink_01_010 {background:url(../photos/drink_01/small/010.jpg);}
#gallery ul li.drink_01_011 {background:url(../photos/drink_01/small/011.jpg);}
#gallery ul li.drink_01_012 {background:url(../photos/drink_01/small/012.jpg);}
#gallery ul li.drink_01_013 {background:url(../photos/drink_01/small/013.jpg);}
#gallery ul li.drink_01_014 {background:url(../photos/drink_01/small/014.jpg);}
#gallery ul li.drink_01_015 {background:url(../photos/drink_01/small/015.jpg);}
#gallery ul li.drink_01_016 {background:url(../photos/drink_01/small/016.jpg);}
#gallery ul li.drink_01_017 {background:url(../photos/drink_01/small/017.jpg);}
#gallery ul li.drink_01_018 {background:url(../photos/drink_01/small/018.jpg);}
#gallery ul li.drink_01_019 {background:url(../photos/drink_01/small/019.jpg);}
#gallery ul li.drink_01_020 {background:url(../photos/drink_01/small/020.jpg);}
#gallery ul li.drink_01_021 {background:url(../photos/drink_01/small/021.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:0; top:0; width:603px; height:445px;}

/* 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:603px; height:445px; 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; 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:603px; height:445px;}
#gallery ul li.default span i {width:603px; height:445px; 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:571px; height:428px; margin:0 auto;}
#gallery ul li.off {display:none;}