/* ================================================================ 
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/multi-page2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* common styling */
body {
	
	background-color:#9ab597; 
	margin:0px
	}
	
p 		{
        margin:.4em 0 .8em 0;
        padding:2px 5px;
		font-family:Georgia, 'Lucida Bright', serif;
		font-size:13px;
		text-align:left;
		}
		
p.note	{
		font-family:Georgia, 'Lucida Bright', serif;
		font-size:10px;
		font-style:italic;
		text-align:right;
		}
		
h2		{
		margin:.8em 0 .2em 0;
   	 	padding:0;
		text-align:center;
		font-family:Georgia, 'Lucida Bright', serif;
		font-size:18px;
		font-weight: bold;
		margin-top: 0px;
		padding: 0px;
		}
		
#content 	{
			padding: 5px 15px 5px 15px;
		 	position:relative;		/* This fixes the IE7 overflow hidden bug */
	 		overflow:hidden;	/* This chops off any overhanging divs */
			width:90%;/*max-width: 850px; */
			margin: 0px auto;
			text-align:center;
			/*border:1px ridge black;*/
			}
			
#main-content 	{
				width:100%;/*min-width:835px;
				min-height:200px;*/
				float:left;
				text-align:left;
				padding:0 10px 0 10px;
				background:#9ab597;
				position:relative;
				}
				
#footer {
		text-align: right;
		clear: both;
		}

/* set up the overall width of the menu div and the margins */
#gallery, #gallery ul {padding:0; margin:0; list-style:none;}

#gallery {width:664px; height:725px; background:#9ab597; position:relative; } /*background is the top row where the tab is -the full length of the bar*/
#gallery li {max-width:150px; /* width:expression(document.body.clientWidth > 152? "150px": "auto" ); */ background:#B8CBB6; margin-right:1px; float:left;} /*background is the inactive tabs*/
#gallery li p {font: 12px Georgia, 'Lucida Bright', serif; color:black; height:25px; line-height:25px; padding:0 9px 0 10px; margin:0; cursor:pointer;}
#gallery li.galleryon p {background:#6C9368; color:black;} /*background is the active tab*/
#gallery ul {display:none;}

#gallery li.galleryon ul {display:block; width:502px; height:500px; border:1px solid #6C9368; border-width:20px 1px; background:#9ab597; padding:80px; position:absolute; left:0; top:25px;} /*border is the top header and footer and sides of box, background-background of thumbs*/
#gallery li.galleryon ul li em {display:none;}
#gallery li.galleryon ul li b {display:none;}
#gallery li.galleryon ul li {width:118px; height:109px; border:1px solid #000; border-color:#eee #444 #000 #ccc; float:left; margin:0; text-align:center; padding-top:9px; cursor:pointer; background:#6C9368;} /* border-?, border-color-colors on all sides of the thumbnails, background-color of thumbnails*/
#gallery li.galleryon ul li:hover {background:#B8CBB6;} /* background for selected thumbs for all browsers except IE6 and lower */

#gallery li.galleryon ul li span img {border:1px solid #fff; border-color:#000 #ccc #eee #444;}/*border-? ,border-color-borders directly around thumbnails*/
#gallery li.galleryon ul li.hz {padding-top:21px; height:97px;}

#gallery li.galleryon ul li.page em {display:block; position:absolute; left:80px; top:10px; border:1px solid #664;} /*border around full size image*/
#gallery li.galleryon ul li.hz em {left:10px; top:80px;}
#gallery li.galleryon ul li.page em img {display:block;}
#gallery li.galleryon ul li.page b {display:block; position:absolute; left:0; top:660px; width:662px; text-align:center; background:#6C9368; color:black; font-family:Georgia, 'Lucida Bright', serif; font-weight:normal; font-size:11px; line-height:15px;}/*background around text of caption bar, color-font color*/
#gallery li.galleryon ul li.page b a, #gallery li.galleryon ul li.page b a:visited {color:#fff;}
#gallery li.galleryon ul li.page b a:hover {text-decoration:none;}

/* Use this tag line to enter comments below the pictures and allows user to click on image and view larger version of picture. Place between li tags<b>Three penguins &copy; Photographer : <a href='http://www.dreamstime.com/Onefivenine_info'>David Campbell</a> | Agency : <a href='http://www.dreamstime.com/'>Dreamstime.com</a> <a href="slide/penguins_large.jpg" class="expand">Large image</a></b> */