/**************************************************************************************************
This CSS controls the following web page components:

   Class          Contents
   ----------     --------
   ContentWrapper Sets the basic page width. Use this as the outer wrapper for all components.
   Logo           The company logo. It contains LogoImage.jpg.
   Menu           The navigation menu. This uses MenuImage.gif.
   Content        The unique content for each page.
   Footer         The footer.

Images are assumed to be in ~/images.
**************************************************************************************************/

/**************************************************************************************************
Properties inherited by all body sections
**************************************************************************************************/
body {
	margin: 0px;
	padding: 0;
	background: #FFFFFF;
	font: normal .7em Tahoma, Arial, Helvetica, sans-serif;
	color: #336600;
}

/**************************************************************************************************
Properties inherited by all form sections
**************************************************************************************************/
form {
	margin: 0;
	padding: 0;
}

/**************************************************************************************************
Font and paragraph sytles
**************************************************************************************************/
h1, h2, h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #336600;
}

p, blockquote, ol, ul {
	line-height: 200%;
}

a {
	color: #336600;
}

a:hover {
	text-decoration: none;
}

ul {
   line-height:normal;
}

/**************************************************************************************************
Boxed content
**************************************************************************************************/
.Boxed {
	width: 590px;
	padding: 0;
	background: #dce8cd;
}

.Boxed .heading {
	margin-top: 0;
	margin-bottom: 0;
	padding: 8px 15px;
	background: url(images/BoxedImage.jpg) no-repeat center bottom;
	text-transform: uppercase;
	letter-spacing: 2px;
	font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
	color: #ffffff;
}

/**************************************************************************************************
The wrapper for all page content. The width is the Logo.
**************************************************************************************************/
#ContentWrapper {
	width: 800px;
	margin: 0 auto;
}

/**************************************************************************************************
The Logo is at the top. The ul/li styles are used to overlay menu items on the lower right of
the image. The h1/h2 styles are used to overlay text on the left end of the image.
**************************************************************************************************/
#Logo {
	float: left;
	width: 800px;
	height: 148px;
	background: url(images/LogoImage.jpg);
}

#Logo span {
	float: left;
	width: 200px;
	height: 148px;
  	display: block;
}

#Logo a {
	text-decoration: none;
}

#Logo a:hover {
	text-decoration: underline;
}

#Logo ul {
	float: right;
	margin: 130px 0 0 0;
	list-style: none;
	line-height: normal;
	font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
}

#Logo li {
   	margin-right: 10px;
	display: inline;
}

#Logo h1 {
	margin: 0 610px 0 10px;				/* top right bottom left */
	padding: 40px 0 0 0;
	text-align: center;
	letter-spacing: -1px;
	font-size: 2.5em;
	color: #cde8cd;
}

#Logo h2 {
	margin: 0 610px 0 10px;				/* top right bottom left */
	text-align: center;
	font-size: 1.2em;
	font-style: italic;
	color: #cde8cd;
}

/**************************************************************************************************
The Menu is placed on the left.
**************************************************************************************************/
.Menu {
	float: left;
	clear: left;
	width: 200px;
	margin: 10px 0 0 0;
	background: #dce8cd;
}

.Menu .heading {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	background: #dce8cd url(images/MenuImage.jpg) no-repeat center bottom;
	text-transform: uppercase;
	letter-spacing: 2px;
	font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: bold;
}

.Menu ul {
	margin: 0 10px 0 10px;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.Menu li {
	padding: 3px 0;
	border-top: 1px dotted #1F1F21;
}

.Menu li.first {
	padding: 3px 0;
	border-top: none;
}

/**************************************************************************************************
The unique content for each page.
**************************************************************************************************/
#Content {
	float: right;
	margin: 10px 0 0 0;
	width: 590px;
}

/**************************************************************************************************
The Footer
**************************************************************************************************/
#Footer {
	clear: both;
	border-top: 1px dotted #000000;
	font: normal .8em Tahoma, Arial, Helvetica, sans-serif;
	color: #999999;
}

#Footer a {
	color: #999999;
}