body {
	background-color: #261809;
	font-family: Helvetica, Arial, sans-serif;
	background-image: url(../images/wood-texture.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center top;
}
a:link {
	color: #000000;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #725029;
}
a:hover {
	text-decoration: underline;
	color: #725029;
}
a:active {
	color: #000000;
}

#wrapper {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	color: #FFFFFF;
	background-color: #000000;
	clear: both;
	float: none;
	width: 800px;
	overflow: auto;
	left: auto;
	top: 0px;
	right: auto;
	bottom: 0px;
	clip: rect(0px,auto,0px,auto);
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: center;
	margin-top: 50px;
}
#wrapper #content {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	padding: 15px;
	line-height: 20px;
	font-style: normal;
	font-variant: normal;
}

#header {
	background-color: #F3E2AC;
	left: auto;
	top: 0px;
	right: auto;
	bottom: 0px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	height: 80px;
	background-attachment: fixed;
	background-image: url(file:///C|/Documents%20and%20Settings/Crystal%20Kay/My%20Documents/My%20Webs/(URL) );
	background-repeat: no-repeat;
	background-position: center center;
}

#nav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #000000;
	background-color: #ffffff;
	font-weight: bold;
	font-variant: normal;
	bottom: 0px;
	height: 60px;
	left: auto;
	top: 0px;
	right: auto;
	text-align: center;
	
}
#content {
	font-family: Helvetica, Arial, sans-serif;
	color: #000000;
	background-color: #FFFFFF;
	border: thin none #000000;
	height: 415px;
	background-attachment: fixed;
	background-image: url(file:///C|/Documents%20and%20Settings/Crystal%20Kay/My%20Documents/My%20Webs/(URL) );
	background-repeat: no-repeat;
	background-position: center bottom;
}
#wrapper #content div {
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	font-variant: normal;
	color: #000000;
	height: 400px;
	width: 750px;
	text-align: left;
}


#footer {
	font-family: Helvetica, Arial, sans-serif;
	font-size: x-small;
	color: #000000;
	background-color: #F3E2AC;
	text-align: center;
	font-weight: normal;
	height: 50px;
	line-height: 16px;
	font-variant: normal;
}
#wrapper #content #text {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	color: #000000;
	font-style: normal;
	font-weight: normal;
	width: 750px;
	padding-left: 30px;
}
#wrapper #content #text h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bolder;
}
/* ================================================================ 
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/gallery/left_right_click.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.
=================================================================== */

#gallery {width:534px; position:relative; height:60px; padding-top:356px; margin:0 113px 90px 113px;}

#gallery img.left {width:55px; height:62px; background:#444; float:left;cursor:pointer;}
#gallery img.right {width:55px; height:62px; background:#444; float:left;cursor:pointer;}

#gallery ul {list-style:none; padding:0; margin:0; float:left; background:#444; border:2px solid #444; border-width:5px 2px;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px; border:1px solid #000; cursor:pointer;}

#gallery ul li.hide {display:none;}

/* using background images */
#gallery ul li.th1 {background:url(../thumbs/th1.jpg);}
#gallery ul li.th2 {background:url(../thumbs/th2.jpg);}
#gallery ul li.th3 {background:url(../thumbs/th3.jpg);}
#gallery ul li.th4 {background:url(../thumbs/th4.jpg);}
#gallery ul li.th5 {background:url(../thumbs/th5.jpg);}
#gallery ul li.th6 {background:url(../thumbs/th6.jpg);}
#gallery ul li.th7 {background:url(../thumbs/th7.jpg);}
#gallery ul li.th8 {background:url(../thumbs/th8.jpg);}
#gallery ul li.th9 {background:url(../thumbs/th9.jpg);}
#gallery ul li.th10 {background:url(../thumbs/th10.jpg);}
#gallery ul li.th11 {background:url(../thumbs/th11.jpg);}
#gallery ul li.th12 {background:url(../thumbs/th12.jpg);}
#gallery ul li.th13 {background:url(../thumbs/th13.jpg);}
#gallery ul li.th14 {background:url(../thumbs/th14.jpg);}
#gallery ul li.th15 {background:url(../thumbs/th15.jpg);}
#gallery ul li.th16 {background:url(../thumbs/th16.jpg);}
#gallery ul li.th17 {background:url(../thumbs/th17.jpg);}
#gallery ul li.th18 {background:url(../thumbs/th18.jpg);}
#gallery ul li.th19 {background:url(../thumbs/th19.jpg);}

/* remove visibility:hidden; if you want to use the original images as thumbnails */
#gallery ul li img {visibility:hidden; display:block; width:50px; height:50px;}

#gallery ul li span {display:none; position:absolute; left:61px; top:430px; width:411px;font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li b {color:#444;}

#gallery ul li.chosen {border-color:#fff; cursor:default;}
#gallery ul li.chosen div {position:absolute; left:0; top:0; width:532px; height:355px; background:#444; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery ul li.chosen div i {width:530px; height:355px; display:table-cell; vertical-align:middle; text-align:center;} 
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;}
#gallery ul li.chosen span {display:block;}

/* ================================================================ 
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/gallery/left_right_click.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.
=================================================================== */

/* vertical align for IE */
#gallery ul li.chosen i {display:block;}
#gallery ul li.chosen i em {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#gallery ul li.chosen i img {display:inline-block; vertical-align:middle;}
/* for IE6 initial photo size */
#gallery ul li.chosen i img.start {width:390px; height:259px;}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this script and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


clickMenu = function(gallery) 
	{
	var getImg = document.getElementById(gallery).getElementsByTagName("IMG");
	var getLi = document.getElementById(gallery).getElementsByTagName("LI");

	for (var i=0; i<getImg.length; i++) {
			getImg[i].onclick=function() {
			if ((this.className.indexOf('left'))!=-1) {
				for (var x=getLi.length-1; x>0; x--) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
						x--;
						if (x>-1) {
							getLi[x].className+=" chosen";
								if (x>-1 && x<getLi.length-7){
								getLi[x].className=getLi[x].className.replace("hide", "");
									if ((getLi[x+7].className.indexOf('hide'))==-1)
									{
										getLi[x+7].className+=" hide";
									}
								}
							}
						}
					}
				}

			if ((this.className.indexOf('right'))!=-1) {
				for (var x=0; x<getLi.length-1; x++) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
						x++;
						if (x<getLi.length) {
							getLi[x].className+=" chosen";
								if (x>6 && x<getLi.length) {
								getLi[x].className=getLi[x].className.replace("hide", "");
									if ((getLi[x-7].className.indexOf('hide'))==-1)
									{
										getLi[x-7].className+=" hide";
									}
								}
							}
						}
					}
				}
			}
		}


		for (var i=0; i<getLi.length; i++) {
			getLi[i].onclick=function() {
				for (var x=0; x<getLi.length; x++) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
					}
				}
			this.className+=" chosen";		
			}
		}
	} 
	
	#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
