body{
  margin:0;
  padding:20px;
  background: #000 url(images/stripe.png);
	background-repeat: repeat-x;
  font: normal small Lucida Grande, Verdana, Trebuchet MS, sans-serif;
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: white;
	font-family: Lucida Grande, Verdana, Trebuchet MS, sans-serif;
}

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

a {
	color: #fff;
  text-decoration: none;
  font-size: .9em;
}

a:hover {
  color: #CC9933;
}

img {
	border: none;
}


/* Main Container */

#maincontainer{
width: 540px; 
margin: 0 auto;
}


/* Header */

#header{
	background: #FFEE8F url(images/img2.gif) repeat-x;
  border: 5px solid #212020;
	border-bottom: none;
  padding: 35px 0 0 0;
  height: 90px; 
}

#header h1{
	text-align: center;
  font-family: "Times New Roman", Times, serif;
	font-style: normal;
	font-variant: small-caps;
  font-weight: bold;
	font-size: 3.5em;
	line-height: 100%;
	word-spacing: normal;
}

#header h2 {
	text-align: center;
	font-size: 1.4em;
  text-transform: uppercase; 
  color: #CC9933;
}

/* Menu */

#Menu {
  font-family: Lucida Grande, Verdana, Trebuchet MS, sans-serif;
  background: url(images/menu.jpg);
  border-right: 5px solid #212020;
	border-left: 5px solid #212020;
  padding-top: 5px;
  padding-bottom: 5px;
}
#Menu ul {
  text-align: center; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
  margin: 0 0 2px 0; /* Just some margin to align the blue border below the menu */
 }
#Menu li {
  display: inline; /* Menu links are horizontally aligned using display: inline */
}
#Menu li a {
  padding: 5px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  background: url(menu.jpg); /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
 }
 #Menu li a:hover {
  padding: 5px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
  background: url(images/over.jpg);
  color: #CC9933;
 }
 #Menu li a span {
  padding: 5px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
  background: url(images/menu.jpg);/* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
 }
 #Menu li a:hover span {
  padding: 5px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
  background: url(images/over.jpg);
  color: #CC9933;
 }
 
 <!--[if IE]>
<style type="text/css">
/* Unfortunately, for some reason both IE6 and IE7 needs to be hacked. */
.Menu1 li a {
padding: 0 0 0 10px;
}
</style>
<![endif]-->

/* Content Wrapper */

#contentwrapper{
float: left;
width: 100%;
}

/* Splash */

#splash {
  text-align: center;
	margin: 0 auto;
	background: #FFFFFF;
  border-right: 5px solid #212020;
	border-left: 5px solid #212020;
  border-bottom: 5px solid #212020;
}

/* Content */

#content {
	margin: 0 auto;
	background: #ooo;
	border-right: 5px solid #212020;
	border-left: 5px solid #212020;
	font-family: Lucida Grande, Verdana, Trebuchet MS, sans-serif;
	text-align: center;
}

#content .title {
	padding: 10px 20px;
	background: #000 url(images/stripe2.png) repeat-x left bottom;
	font-size: 1.4em;
	color: #fff;
  font-family: "Times New Roman", Times, serif;
	font-variant: small-caps;
}

#content .story {
	padding-bottom: 30px;
  font-size: 1em;
}


/* Footer */

#footer{
  clear: left;
	margin: 0 auto;
	background: #212020;
	border: 5px solid #212020;
	border-top: none;
	padding: 10px;
  text-align: center;
	font-size: x-small;
	color: #999;
	font-family: Lucida Grande, Verdana, Trebuchet MS, sans-serif;
}


}

#footer a {
	color: #999;
  text-decoration: underline;
}

#footer a:hover, #menu .active a {
	color: #ccc;
  text-decoration: underline;
}