@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #443942;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
#container {
	font-family:Tahoma, Geneva, sans-serif;
	width: 810px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #F2F5F6;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	background: #DDDDDD; 
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#header h1 {
	color:#FFF;
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	padding:40px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	color:#306;
}
#mainContent h1 {
	color:#306;
}
#footer {
	color:#CCC;
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}#container #mainContent p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}


#nav {
   float:left;
   width:100%;
   background:#A8C6B1;
   /*border-bottom:4px solid #000;*/
   overflow:hidden;
   position:relative;
   height:30px;
}
#nav ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#nav ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#nav ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 20px;
   background:#A8C6B1;
   color:#F2F5F6;
   text-decoration:none;
   line-height:1.3em;
   height: 30px;
   font-weight:bold;
}
#nav ul li a:hover {
   background:#443942;
   color:#fff;
}
#nav ul li a.active,
#nav ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

/*-----------------GALLERY---------------*/
/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
width:704px; 
height:780px; /*780 This also includes the buttons (88px per row)*/
background:#F2F5F6;
border:1px solid #FFF;
margin:0 auto 20px auto;
}
/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0; 
margin:0 0 604px 0; /*604 First one is basically the main image height*/
list-style-type:none; 
position:relative; 
width:704px;
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
/*font-size:11px;*/
float:left;
/*text-decoration:none; */
/*color:#000; */
background:#A8C6B1;
text-align:center;
width:88px; 
height:88px; 
/*line-height:24px; */
/*border:1px solid #444;*/
/*margin:2px;*/
}
.gallery li a img.thumb {
	margin:2px;
	border:1px solid #443942;
}

/* position the images using an absolute position and hide them from view */
/*.gallery li a img.landscape, .gallery li a img.portrait,*/
.gallery li a table.imgtable  {
	border:none;
	position:absolute; 
	color#000;
	top:-320px;
	left:0; 
	visibility:hidden; 
}
.gallery li a table.imgtable tr td  {
	border:none;
	vertical-align:top;
}
/* fix the top position for the landscape images */
/*.gallery li a img.landscape {*/
.gallery li a table.imgtable {
/*top:-584px;*/
top: 280px; /*189px*/
left:10px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:0;
border-left:40px solid #eee;
border-right:40px solid #eee;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
	background:#443942; 
	color:#443942;
	outline:0;
}
/* make the images visible on active/focus */
.gallery li a:active table.imgtable , .gallery li a:focus table.imgtable {
/*.gallery li a:active img, .gallery li a:focus img {*/
	visibility:visible;
	outline:0;
}
.gallery li a b {
	font-size:13px;
	color:#000;
	padding:0 0 10px 10px;
	position:absolute;
	top:-30px;
	/*left:0;*/
	visibility:hidden;
}
.gallery li a:active b, .gallery li a:focus b, .gallery li a table {
	visibility:visible;
}