body {
	margin: 20px;
	padding: 0;
	background: #111111;
	font: normal small Arial, Helvetica, sans-serif;
	color: #6F4503;
}


h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, blockquote {
	margin-top: 0;
}

a {
	color: #6F4503;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}

/* Header */

#logo {
	width: 780px;
	height: 129px;
	margin: 0 auto;
	padding: 0px 0 0 0;
	background: #FFEE8F url(images/bigbg.gif) repeat-x;
	border: 5px solid #FFFFFF;
	border-bottom: none;
}

#logo h1 {
	text-align: center;
	font-size: 3em;
}

#logo h2 {
	text-align: center;
	font-size: 1.4em;
}

#logo a {
	text-decoration: none;
	color: #9E6813;
}

/* Menu */

#menu {
	width: 780px;
	height: 36px;
	margin: 0 auto;
	padding: 0;
	background: #4E4E4E;
	border: 5px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;;
}

#menu h2 {
	display: none;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 26px;
	padding:10px 28px 0;
	margin-right:1px;
	text-align: center;
	text-decoration: none;
	color: #CCCCCC;
}

#menu a:hover {
	background-color: #D88C20;
	color: #FFFFFF;
}

#menu .active a {
	cursor:default;
	background-color: #000000;
	color: #FFFFFF;
}

/* Splash */

#image {
	width: 780px;
	margin: 0 auto;
	background: #FFFFFF;
	border-left: 5px solid #FFFFFF;
	border-right: 5px solid #FFFFFF;
}

/* Content */

#body {
	width: 780px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 5px solid #FFFFFF;
}

#body .heading {
	padding: 10px 20px;
	background: #D88C20 url(images/smallbg.gif) repeat-x left bottom;
	font-size: 1em;
}

#body .story {
	padding: 20px;
	border: 2px solid #D88C20;
}

/* bot*/

#bot {
	width: 760px;
	margin: 0 auto;
	padding: 10px 10px;
	background: #4E4E4E;
	border: 5px solid #FFFFFF;
	border-top: none;
}

#bot p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: x-small;
	color: #CCCCCC;
}

#bot a {
	color: #CCCCCC;
}
/*lists*/
/* separate the list from surrounding elements */
ol
{
  margin: 0 0 1em 2em;
  padding: 0;
  list-style: none;
}

ol li
{
  /* Stipulate the height of each item so that 
  vertical return = items * height */

  line-height: 1.2em;

  /* Clear the default margins & padding 
  so we can style the list from scratch */

  margin: 0;
  padding: 0;
}

/* If li position is left static, Internet 
Explorer disables hyperlinks in the list 
in all but the final column.

This rule will be processed only by 
Internet Explorer because only IE believes 
that there’s a level above HTML: */

* html ol li
{
	position: relative;
}
/* horizontal position of each column */

ol li.column1 { margin-left: 5em; }
ol li.column2 { margin-left: 20em; }
ol li.column3 { margin-left: 35em; }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 1.2em line-height = 6em */

li.reset
{
  margin-top: -405px;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width: 300px;
height: 300px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}