/* The outer container with a relative position */
#gallery {
	width:750px;
	height:355px;
	position:relative;
	background:#fff;
}

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

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

/* Set up the thumbnail images as the background images 50x50px*/
#gallery ul li.tb1 {background:url(../images/gallery/current/thumbs/cruise_games.jpg) 0 0;}
#gallery ul li.tb2 {background:url(../images/gallery/current/thumbs/cruise_girlsfromthebridge.jpg) 0 0;}
#gallery ul li.tb3 {background:url(../images/gallery/current/thumbs/cruise_chris&karen.jpg) 0 0;}
#gallery ul li.tb4 {background:url(../images/gallery/current/thumbs/cruise_jo&tina.jpg) 0 0;}
#gallery ul li.tb5 {background:url(../images/gallery/current/thumbs/cruise_table.jpg) 0 0;}
#gallery ul li.tb6 {background:url(../images/gallery/current/thumbs/Weir_sarah.jpg) 0 0;}
#gallery ul li.tb7 {background:url(../images/gallery/current/thumbs/Weir_tina.jpg) 0 0;}
#gallery ul li.tb8 {background:url(../images/gallery/current/thumbs/Wier_girls.jpg) 0 0;}
#gallery ul li.tb9 {background:url(../images/gallery/current/thumbs/Wier_alison.jpg) 0 0;}
#gallery ul li.tb10 {background:url(../images/gallery/current/thumbs/Weir_moria.jpg) 0 0;}
#gallery ul li.tb11 {background:url(../images/gallery/current/thumbs/Findhornthesecondphase.jpg) 0 0;}
#gallery ul li.tb12 {background:url(../images/gallery/current/thumbs/Findhornsketching.jpg) 0 0;}
#gallery ul li.tb13 {background:url(../images/gallery/current/thumbs/Findhornthethirdphase.jpg) 0 0;}
#gallery ul li.tb14 {background:url(../images/gallery/current/thumbs/Findhornbringingouttheartist.jpg) 0 0;}
#gallery ul li.tb15 {background:url(../images/gallery/current/thumbs/FindhornandfinallyThumb.jpg) 0 0;}
#gallery ul li.tb16 {background:url(../images/gallery/current/thumbs/News_Winners2010.jpg) 0 0;}
#gallery ul li.tb17 {background:url(../images/gallery/current/thumbs/chequepres09th.jpg) 0 0;}
/* do not display default thumb border*/
#gallery ul li.tb19 {border:none;}
/*background:url(../i/gallery/gallery19t.jpg) 0 0;}
#gallery ul li.tb20 {background:url(../i/gallery/gallery20t.jpg) 0 0;}
#gallery ul li.tb21 {background:url(../i/gallery/gallery21t.jpg) 0 0;}*/

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

/* Set up the i so that it is the same size as the span 
- this has a static position 
- image is 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 #555; 
	margin:0 auto;
}

/* set up the default image */
x#gallery ul li.default {
	width:0; 
	height:0; 
	border:0;
}
#gallery ul li.default span {
	position:absolute; 
	right: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 default image width and height as per image size */
#gallery ul li.default span i img {
	display:block; 
	width:294px;
	height:410px;
	border:1px solid #555; 
	margin:0 auto;
}
#gallery ul li.off {
	display:none;
}