/* ================================================================ 
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:750px;
	height:478px;
	position:relative;
	border:0px solid #aaa;
	background-color: #fff;
}

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

/* Place the list items inline using display:inline for IE and float:left */
#gallery ul li {
	display:inline;
	width:60px;
	height:60px;
	float:left;
	cursor:pointer;
	border-top-width: 1px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 8px;
}

/* Set up the thumbnail images as the background images 
#gallery ul li.tb1 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_01.jpg);
	background-position: -120px -90px;
}
#gallery ul li.tb2 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_02.jpg);
	background-position: -110px -110px;
}
#gallery ul li.tb3 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_03.jpg);
	background-position: -250px -100px;
}
#gallery ul li.tb4 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_04.jpg);
	background-position: -170px -180px;
}
#gallery ul li.tb5 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_05.jpg);
	background-position: -120px -40px;
}
#gallery ul li.tb6 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_06.jpg);
	background-position: -20px -120px;
}
#gallery ul li.tb7 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_07.jpg);
	background-position: -320px -190px;
}
#gallery ul li.tb8 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_08.jpg);
	background-position: -70px -70px;
}
#gallery ul li.tb9 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_09.jpg);
	background-position: -120px -210px;
}
#gallery ul li.tb10 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_10.jpg);
	background-position: -190px -180px;
}
#gallery ul li.tb11 {
	background-image: url(../images/commercial_gallery/Hip_Shing_Hong_60th_Anniversary/hip_shing_hong_11.jpg);
	background-position: -20px -240px;
}
#gallery ul li.tb12 {background:url(../../images/trees/t12.jpg) -90px -100px;}
#gallery ul li.tb13 {background:url(../../images/trees/t13.jpg) -220px -160px;}
#gallery ul li.tb14 {background:url(../../images/trees/t14.jpg) -120px -160px;}
#gallery ul li.tb15 {background:url(../../images/trees/t15.jpg) -120px -80px;}
#gallery ul li.tb16 {background:url(../../images/trees/t16.jpg) -130px -80px;}
#gallery ul li.tb17 {background:url(../../images/trees/t17.jpg) 0 0;}
#gallery ul li.tb18 {background:url(../../images/trees/t18.jpg) -130px -30px;}*/

/* 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:0px;
	width:570px;
	height:355px;
}

/* 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:570px; height:355px; 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: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;
	margin:0 auto;
}
#gallery ul li.off {display:none;}