body {
	text-align: center;
	font-family: arial, helvetica, sans-serif;
	background: #B0BFC2;
	color: #222;
}

#container {
	text-align: left;
	margin: 0 auto;	
	margin-top: 7px;
	margin-bottom: 7px;
	width: 670px;
	background: #fff;
	border: 1px solid #000;
}

h1 {
	font-size: 140%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .5em;
	margin: 0;
	padding: 0;
}

#header {
	height: 199px;  	/* for a 670 x 199 pixel image */
	text-align: center;
	background: #fff;
	color: #000;
}

#nav {
        float: left;
        width: 150px;
        display: inline;
        text-align: center;
	background: #eeeeee;
	border-right: 0px solid #777;
}

#nav h2 {
	color: #000;
	margin: 20px 0 20px;
	font: bold normal 140% times, "times new roman", serif;
}

#nav img.monkey {
	background: #fff; 
	border: 1px solid #777;
	margin: 40px 0px 20px 0px; 
	padding: 5px 0px 5px 5px;
}

#content {
	float: left;
        width: 450px;
        margin: 20px 0 10px 40px;
	background: #fff;
}

#content h2 {
	margin: 0px;
	text-align: center;
	color: #cc0000;
	font-weight: normal;
}

#content h2.pagetitle {
	margin: 0px;
	text-align: center;
	color: #cc0000;
	font-size: 200%;
	font-weight: normal;
}

#content h3 {
	margin: 0px;
	font-weight: bold;
}

#content em {
	margin-left: 9px;
	font: 90% courier, helvetica, sans-serif;
}

/*  Removed ul and li css on 5/5/2011 because I wanted to nest lists and this was causing formatting
problems.  It would centrer the bullet across the indented list.  

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

#content li {
	background: url(../images/grey_bullet.png) no-repeat 0 50%;
        padding: 0 5px 0 25px;
}
*/

#content p.warn {
	text-transform: uppercase;
	text-align: center;
	font-style: normal;
	font-weight: bold;
}	

#content img.flright {
	float: right;
	border: 1px solid #777;
	margin: 0px 10px 10px 10px;
}

#content img.flleft {
	float: left;
	border: 1px solid #777;
	margin: 0px 10px 10px 0px;
}

#content div.imgcenter {
	text-align: center;
	margin: 30px 0 30px 0;
}

#content div.imgcenter img {
	border: 1px solid #777;
}

#content div.vitals {
	background: #ddd;
	padding: 10px 0px 15px 10px;
	margin: 0px 15px 20px 0px;
	border: 1px solid #000;
	font-size: 90%;
}

#content blockquote {
	width: 400px;
	margin: 1em 0;
	background: url(../images/quote.gif) 5px 5px no-repeat;
	padding-top: 30px;
}
	
#content blockquote p { 
	padding: 0 70px; 
}
	
#content blockquote p.source {
	background: url(../images/closequote.gif) no-repeat 100% 100%;
	padding-bottom: 30px;
	margin: 0 5px 5px 0;
	text-align: right;
	font-style: italic;
}

#content .floathack {
	clear: both;
}

#content .floathack p {
	color: #fff;
	font: 1% arial, helvetica, sans-serif;
}

/* Added by Cody for the photo gal */

div.thumbnail {
        text-align: center;
        width: 200px;
        float: left;
        margin: 0 10px 10px 0;
}

div.thumbnail img {
        border: 1px solid #777;
        margin: 10px 0 0 10px;
}

div.thumbnail p {
                margin: 0;
                padding: 0 20px 30px 10px;
}

.clear { clear: left; }


/* Start Mac IE5 filter \*/
#nav, #content {
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
}
/* End Mac IE5 filter */

#wrapper {
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
}

/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */

#wrapper {
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
}

/* easy clearing */
#wrapper:after {
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#wrapper {
	display: inline-block;
}
/*\*/
#wrapper {
	display: block;
}
/* end easy clearing */

/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output {
	position: relative;
	z-index: 1000;
}

#footer {
	clear: both;
	background: #fff;
/*	color: #000; */
	padding: 5px 10px;
	text-align: center;
	font-size: 80%;
	border-top: 1px solid #000;
}