/* CONTAINER */
body
{
	font-family: verdana, arial, helvetica, sans serif;
	font-size: 8pt;
	line-height: 14pt;
}

a
{
	text-decoration: none;
}

div#container
{
	width: 800px;
	margin: auto;
}

/* HEADER */
div#header
{
	width: 100%;
}

div#title
{
	color: #012c00; /* Dark Green */
	padding: 20px;
	letter-spacing: 0.5em;
	font-family: serif;
	font-weight: bold;
	font-size: 30pt;
	text-decoration: underline overline;
}

div#menu
{
	width: 100%;
	height: 52px;
}

div#menu a.button
{
	float: left;
	width: 165px;
	padding: 15px;
	border-left: 2px #dcdcdc solid; /* Gainsboro */
	border-top: 2px #dcdcdc solid; /* Gainsboro */
	border-right: 2px black solid;
	border-bottom: 2px black solid;
	background-color: #d9e8d7; /* Light Green */
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
	color: #012c00; /* Dark Green */
}

div#menu a.button:hover
{
	color: #ffd700; /* Gold */
	background-color: #012c00; /* Dark Green */
	border-left: 2px black solid;
	border-top: 2px black solid;
	border-right: 2px #dcdcdc solid; /* Gainsboro */
	border-bottom: 2px #dcdcdc solid; /* Gainsboro */
}

/* CONTENT */
div#content
{
	/* Height should be adjusted on a per page basis until I can figure out a workable solution. */
	margin-top: 1px; /* Fix IE Glitch */
}

div#left
{
	width: 170px;
	height: 100%;
	background-color: #d9e8d7; /* Light Green */
	text-align: center;
	font-weight: bold;
	line-height: 8pt;
	float: left;
}

div#left p
{
	margin: 10px;
}

div#left hr
{
	margin-left: 10px;
	margin-right: 10px;
}

div#left a.selection
{
	display: block;
	border: 2px #ffd700 solid; /* Gold */
	color: #ffd700; /* Gold */
	background-color: #012c00; /* Dark Green */
	width: 125px;
	margin-bottom: 5px;
	margin-top: 5px; /* This handles a glitch in IE6 that removes the margin of the higher elements when hovering... */
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	text-align: left;
}

div#left a.selection:hover
{
	border: 2px #012c00 solid; /* Dark Green */
	color: #012c00; /* Dark Green */
	background-color: white;
}

div#right
{
	height: 100%;
	/* border-style: ridge; */
	margin-left: 180px;
	margin-bottom: 10px;
	margin-right: 10px;
}

/* Margins should be set here to keep them uniform. */
/* Need to do it this way to get aroung strange padding inconsistencies between browsers. */
div#right p,
div#right h1,
div#right hr,
div#right form,
div#right img
{
	margin: 15px;
}

div#right li
{
	margin: 10px;
}

div#right p:first-letter
{
	font-size: 12pt;
	font-weight: bold;
	font-style: italic;
}

div#right h1
{
	background-color: #d9e8d7; /* Light Green */
	border: 2px black solid;
	padding: 8px;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
}

div#right span.subheading
{
	margin-left: 15px; /* This should be kept in sync in the div#right margins above */
	font-weight: bold;
}

div#right span.ntc
{
	font-weight: bold;
	font-size: 10pt;
	margin: 0px;
}

div#right span.underlined
{
	text-decoration: underline;
}

div#right span.duration
{
	color: #660000; /* Burgundy */
}

div#right span.red
{
	color: red;
}

div#right a
{
	color: #012c00; /* Dark Green */
	text-decoration: underline;
}

div#right img
{
	border: 0px;
	padding: 5px;
}

div#right img.fl
{
	float: left;
}

div#right img.fr
{
	float: right;
}

/* FOOTER */
div#footer
{
	width: 100%;
	background-color: #012c00; /* Dark Green */
	font-size: 8pt;
}

div#footer span
{
	margin-left: 10px;
}

div#footer a
{
	color: white;
}