/* Colors:
	Purple: #6c1d6f (links)
	Yellow: #fdfdee (content background)
	Light Gray: #d0d0d0 (horizontal rules and lighter borders)
	Dark Gray: #b0b0b0 (borders -- with 2px white padding!)
*/

body {
	margin: 0;
	padding: 0;
	border: 0;

	font-size: 10pt;
	font-family: sans-serif;
	
	background-image: url(images/bkg_purple.jpg);
	background-position: top center;
}

p {
	margin: 0;
	padding: 0px 0 .5em 0px;
}

h1 { /* For Page Titles */
	font-size: 18pt;
	font-weight: bold;
	text-align: left;
	
	padding: .2em 0 .5em 0;
	margin: 0;
	
}

.title { /* For titles with H2 subtitles under them */
	text-align: center;
	padding-bottom: 0;
}

h2 { /* For Page Subtitles */
	font-size: 14pt;
	font-weight: normal;
	text-align: center;
	margin: 3px 0 18px 0;
	padding-top: 3px;
	border-top: 1px solid #b0b0b0;
}

h2 a {
	font-weight: normal;
}

h3 { /* For section headings */
	font-size: 14pt;
	font-weight: normal;
	margin: 3px 0 6px 0;
	padding-top: 3px;
	border-top: 1px solid #d0d0d0;
}

h4{ /* For list headings */
	font-size: 11pt;
	font-weight: bold;
	margin: 3px 0 3px 0;
}

h4 ~ p {
	padding-left: 15px;
}

a {
	font-weight: bold;
	text-decoration: none;
	color: #6c1d6f;
	outline: none;
	border: 0;
}

a:hover {
	text-decoration: underline;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

hr {
	width: 100%;
	height: 1px;
	border: none;
	background-color: #d0d0d0;
	padding: 0;
	margin: 3px 0 0 0 ;
}

ul {
	list-style-type: disc;
	padding-left: 15px;
	margin: 0 0 1.5em 0;
}

li {
	margin-bottom: 0;
}


/* DIVS */

/* Content is 800px wide with a 150px left column for the menu.
   The Header overhangs each edge by 50px, so the outer divs are 900px wide.
   
   In standards mode, the width property is the content area, and does not include padding.
   
   IE6 absolutely hates the box model, so for the content div, the job of padding is handled
   instead by a margin, and the column is floated right.
*/

#header {
	width: 900px;
	height: 204px;
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}

#page {
	background-image: url(images/page-bkg-narrow.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	
	width: 800px;
	margin: 0 auto;
	padding: 0px 50px 10px 50px;
	
	overflow: hidden;
}

#menu {	
	width: 130px;
	float: left;
	padding: 20px 10px 0px 10px;
	margin: 0;
	
	font-size: 9pt;
	display: inline; 
}

#content {
	background-image: url(images/content-bkg.jpg);
	background-position: 30px 0px;
	background-repeat: no-repeat;
	
	width: 610px;
	margin: 0 20px 0px 10px;
	padding: 0px 0px 0px 0px;
	
	float: right;
	display: inline;

}

#content p {
	margin: 0;
	padding: 0px 0 1.5em 0em;
}

#footer {	
	clear: both;
	margin: 3px auto 0 auto;
	padding: 0px;
	width: 900px;
	
	color: white;
	text-align: center;
	font-size: 8pt;
	font-weight: bold;	
}

#footer p {
	margin: 0;
	padding: 0px 0 .5em 0;
}

.right_callout {
	width:180px;
	float:right;
	border: 2px solid #b0b0b0;
	background-color: white;
	padding: 8px;
	margin-left: 10px;
}

.right_callout p,a {
	margin: 0;
	padding: 0;
}

/* NAVIGATION */

.left_nav { 
	/* this is a UL element */
	list-style-type: none;
	list-style-position: outside;

	padding: 0;
	margin: 8px 0 8px 0;
}

.left_nav li {
	padding: 0;
	margin: 0 0 4px 0;
}

.left_nav a {

}

.left_nav ul {
	/* This is for second-level menus */
	margin: 4px 0 0 0;
	padding: 0 0 0 15px;
	
	list-style-type: none;
	list-style-position: outside;
}

.left_nav ul li {
}

#menu hr {
	width: 150px;
	margin: 0px 0 0px -10px;	

	height: 1px;
	border: none;
	background: #d0d0d0;
}


/* Tables */


table.normal {
	border: 2px solid #b0b0b0;
	margin: 0 auto 10px auto;
	padding: 0px;
	empty-cells: show;
	
	width: 100%;

	font-size: 10pt;
	text-align: center;

	border-spacing: 2px;

	background: white;
	table-layout: auto;
}

.normal td {
	border: 1px solid #d0d0d0;
	margin: 0px;
	padding: 2px;
	background: #fdfdee;
	
	vertical-align: top;
}

.normal th {
	border: 1px solid #d0d0d0;
	margin: 0px;
	padding: 2px;
	background: #fdfdee;
	
	font-weight: bold;
	vertical-align: center;
}


table.noborder {
	width: 100%;
	margin: 0 auto 10px auto;
	padding: 0px;
	empty-cells: show;
	border-spacing: 2px;
	font-size: 10pt;
	table-layout: auto;
}

.noborder td, .noborder th {
	margin: 0px;
	padding: 2px;
	vertical-align: top;

}

.noborder th {
	font-weight: bold;
	padding-right: 20px;
	text-align: left;
}


/* hborder table has only row borders */
table.hborder {
	width: 100%;
	margin: 0 auto 10px auto;
	padding: 0px;
	empty-cells: show;
	border-spacing: 2px;
	border-collapse: collapse;
	font-size: 10pt;
	table-layout: auto;
}

.hborder td, .hborder th {
	margin: 0px;
	padding: 2px;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid #d0d0d0;
}

.hborder th {
	font-weight: bold;
	padding-right: 20px;
	text-align: left;
}

.hborder tr {
	border-bottom: 1px solid #d0d0d0;
}

caption {
	font-size: 16pt;
	font-weight: normal;
	text-align: center;
	margin: 0;
	padding-bottom: 5px;
}


/* MISC */

#map {
	float: right;
	margin: 10px 0 10px 10px;
	border: 2px solid #b0b0b0;
	padding: 2px;
	background: white;
}

.callout { /* callout box */
	width: 300px;
	background: white;
	padding: 2px;
	border: 2px solid #b0b0b0;
	margin: 0 auto;
	text-align: center;
}

img.left {
	float: left;
	margin: 10px 10px 10px 0px;
	border: 2px solid #b0b0b0;
	padding: 2px;
	background: white;
}

img.right {
	float: right;
	margin: 10px 0px 10px 10px;
	border: 2px solid #b0b0b0;
	padding: 2px;
	background: white;
}

.clear {
	clear: both;
}