html,body {
	margin:0.5em;
	padding:0;
	height:97%; /* needed for container min-height */
	background:#663333;  /* background behind container (ie: margins if container not 100% */
	color:#FF9966; /* default text color in absense of any other overrides */	
	font-family:'trebuchet ms',helvetica,sans-serif;
	font-size:12pt;
	text-align:left;}

h1 { 
	font-size: 14pt;
	margin:1em 1em;}

h2 {
	font-size: 13pt;
	margin:1em 1em;}

h1, h2, a {
	color:#FF9966;} 

p { 
	line-height:1.2; 
	margin:1em 1em;}

div#content {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:950px;
	background:#663333;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */}

div#header {
	padding:1em;
	background:#663333;} 
	
div#header p {
	font-style:italic;
	font-size:1.1em;
	margin:0;}

div#content {
	padding:1em 1em 5em; /* bottom padding for footer */}

div#content p {
	text-align:justify;
	padding:0 1em;}

div#footer {
	position:absolute;
	width:97%;
	bottom:5px; 	/* stick footer to bottom of screen */
	right:20px;
	background:transparent;
	font-size:10pt;
	float:right;
	text-align:right;} 

/* hidden picture class for preloading pictures */
.hiddenPic {display:none;}

.menu {
      width: 100%;
      margin: 0.1em 0;
      padding: 0;}
	  
.menu ul {
      margin: 0;
      padding: 0;      
	  list-style-type: none;}
	  
.menu li {
      margin: 0;
      padding: 0;
      float: right;
      width: 4em;
      margin-right: 0.75em;
	  background:transparent;
      text-align: right;
	  text-color: #FF9966}
	  
.menu a {
      display: block;
      width: 100%;
      text-decoration: none;}
	  
.menu a:hover {
	  color: #FFFF00; }
	  
/* Removing the list bullets and indentation - add size - and position. Bacground color changes behind button*/
div#content ul {
	width:80px; /* defines width of column buttons can appear in. make approx = Button size * No. Colmns + 10 */
	height:386px; 
	padding:0;  
	margin:0px; 
	list-style-type:none; 
	float:left;} /* float left/right determines where gallery navigation buttons go on page */

div#content li 
	{float:left;}

/* Remove the images and text from sight by giving them 1x1 pixel size and match color to background*/
div#content a.gallery span {
	position:absolute; 
	width:1px; 
	height:1px; 
	top:5px; 
	left:1px; 
	color: #663333;  /* set this color = background color to have dot disappear */
	overflow:hidden;}
	
div#content a.gallery img {
	vertical-align:top;
	horizontal-align:left;
	margin: -2px 0px 0px -2px;}

/* Adding the thumbnail gallery nagivation images */
div#content a.gallery, div#content a.gallery:visited {
	display:block;
	text-decoration:none; 
	border:2px solid #FF9966; 
	margin:6px 2px 1px 1px; 
	padding:0;
	float:left;
	text-align:left; 
	cursor:default;
	color:#663333; 	
	background-color:#663333;   
	height:80px; 
	width:80px; 
	overflow:hidden;
	outline:none;} 

/* hovers: change the thumbnail/gallery navigation color as we hover over it */
div#content a.gallery:hover {
	display:block; 
	text-decoration:none; 
	border:2px solid #FFFF00; 
	margin:6px 2px 1px 1px; 
	padding:0;
	text-align:left; 
	cursor:default; 
	color:#663333; 
	background-color:#663333;  
	height:80px; /* defines heigh/width of thumbnails */
	width:80px;}
	
/* change "onclick" (focus) behaviour. Change images/text displayed. both focus/active needed for firefox/ie.*/
/* currently does not work in opera! */
div#content a.gallery:focus, div#content a.gallery:active{
	display:block; 
	text-decoration:none; 
	border:2px solid #FFFFFF; 
	margin:6px 2px 1px 1px; 
	padding:0;
	text-align:left; 
	cursor:default; 
	color:#663333; 
	background-color:#663333;
	height:80px; 
	width:80px;}
	
/* background color here defines space painting/text appear in, relative to "content" box */
div#content a.gallery:focus span, div#content a.gallery:active span {
	position:absolute; 
	width:700px; 
	height:100%; 
	top:6px; /* how far down from top of "content" box */
	left:150px; /* how far left of side of "content" box */
    color:#FF9966; 
	/* background-color:#808066; this is background behind text */
	outline:none; 
	overflow:visible;}
	
/* change to border thickness here may affect default background positioning */
/* note: applies to image inside span tag only! Does not apply to thumbnail image */
div#content a.gallery:focus span img, div#content a.gallery:active span img {
	visibility:visible; 
	border:0px solid transparent;
	float:left; 
	margin-right:5px; 
	vertical-align:top;}