/* Images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
/* basic elements */
body
{
	background: url(page_bg.jpg) no-repeat top left;
	background-color: #000000;
	font: 8pt/16pt Arial,Verdana,sans-serif;
	color: #fff;
	margin: 0px;
}

p
{
	font: 8pt/16pt Arial,Verdana,sans-serif;
	margin-top: 0px;
	text-align: justify;
}

h3
{
	font: italic normal 12pt Arial,Verdana,sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0px;
	color: #ffffff;
}

a:link
{
	font-weight: bold;
	text-decoration: underline;
	color: #ffffff;
}

a:visited
{
	font-weight: bold;
	text-decoration: underline;
	color: #ffffff;
}

a:hover, a:active
{
	text-decoration: underline;
	color: #cf0f33;
	background-color: #000000;
}

/* specific divs */
#container
{
	position: absolute;
	top: 0px;
	left: 97px;
	width: 702px;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	border-right: 5px solid #7b7b7b;
	border-left: 5px solid #7b7b7b;
}

#intro
{
	width: 500px;
	min-width: 470px;
	margin-top: 200px;
}

#pageHeader
{
	margin-bottom: 0px;
	display: none;
}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1
{
	margin-top: 0px;
	width: 300px;
}

/*
#pageHeader h1 span {
	display:none
	}
	*/

#pageHeader h2
{
	margin-top: 0px;
	margin-bottom: 0px;
	width: 200px;
	
}

/*
#pageHeader h2 span {
	display:none;
	}
	*/

#quickSummary
{
	color: #cf0f33;
	margin-left: 125px;
	margin-top: 0px;
	width: 351px;
	padding: 0px 0px 0px 0px;
}


#preamble
{
	margin-left: 100px;
	width: 351px;
	padding: 0px 0px 0px 0px;
}

#supportingText
{
	width: 500px;
	margin-left: 100px;
	padding-left: 0px;
	margin-bottom: 0px;
}

#explanation
{
	width: 351px;
	padding-left: 0px;
	margin-left: 100px;
	margin-bottom: 0px;
}

#participation
{
	width: 351px;
	padding-left: 0px;
	margin-left: 100px;
	margin-bottom: 0px;
}

#benefits
{
	width: 351px;
	padding-left: 0px;
	margin-left: 100px;
	margin-bottom: 0px;
}

#requirements
{
	width: 351px;
	padding-left: 0px;
	margin-left: 100px;
	margin-bottom: 0px;
}

#footer { text-align: center; }
#footer a:link, #footer a:visited { 
	margin-right: 20px; }

#navigation
{
	margin: 0px;
	position: absolute;
	top: 135px;
	height: 800px;
	left: 125px;
}

#linkList
{
	margin: 0px;
	position: absolute;
	top: 135px;
	height: 800px;
	left: 125px;
}

#linkList2
{
	font: 12px Arial,Verdana,sans-serif;
	font-weight: bold;
	padding: 0px;
	margin-top: 0px;
	width: 150px;
}

#linkList h3.select
{
	margin: 0px 0px 5px 0px;
	font-weight: bold;
	height: 18px;
}

#linkList h3.select span { }

#linkList h3.favorites
{
	margin: 0px 0px 0px 0px;
	width: 60px;
	font-weight: bold;
	height: 18px;
}

#linkList h3.archives
{
	margin: 10px 0px 0px 0px;
	width: 57px;
	font-weight: bold;
	height: 18px;
}

#linkList h3.resources
{
	margin: 0px 0px 5px 0px;
	width: 63px;
	font-weight: bold;
	height: 18px;
}

#linkList ul
{
	margin: 0px;
	padding: 0px;
}

#linkList li
{
	line-height: 2.0ex;
	list-style-type: none;
	display: block;
	padding-top: 5px;
	margin-bottom: 5px;
}

#linkList li a:link
{
	color: #cf0f33;
	text-decoration: none;
}

#linkList li a:visited
{
	color: #cf0f33;
	text-decoration: none;
}

#navigation a:link
{
	font: 12px Arial,Verdana,sans-serif;
	font-weight: bold;
	color: #7b7b7b;
	text-decoration: none;
	margin-right: 20px; 
}	

#navigation a:visited
{
	font: 12px Arial,Verdana,sans-serif;
	font-weight: bold;
	color: #7b7b7b;
	text-decoration: none;
	margin-right: 20px; 
}	

#navigation a:hover, a:active
{
	color: #ffffff;
}

#extraDiv1
{
color: #000000;
	background-color: #999999;
	position: absolute;
	top: 0px;
	left: 600px;
	width: 0px;
	height: 0px;
	display: none;
}

#wrapper {
  margin-left: 100px;
  margin-right: auto;
  margin-top: 50px;
  border-collapse: collapse;
}

#title {
  padding-top: 10px;
  padding-bottom: 20px;
  font-family: verdana, arial;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
}

#topleft {
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

#top {
  height: 20px;
  background-repeat: repeat-x;
  background-position: bottom;
}

#topright {
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: bottom left;
}

#left {
  width: 20px;
  background-repeat: repeat-y;
  background-position: right;
}