body {
	background-color: #333333;
	color: #d2e4f7;
	background-image: url(black_gray_top_gradient.jpg);
	background-repeat: repeat-x;
	font-family: sans-serif;
}
body a {
	color: #b4d3f1;
	text-decoration: none;
}


#page {
	width: 50em;
	margin: auto;
}

h1,h2 {
	font-family: serif;
	font-variant: small-caps;
	/* text should be a slightly darker blue? */
	color: #96c1eb;
}


/************************ Header ***************************************/
#header {
	position: relative;
	/*height: 418px;*/
	/* the height appears to be needed in order to "give layout" to this element
	in IE.  fucking crappy browser. the overflow appears to take care of this.*/
	overflow: hidden; /* causes floated picture to extend containing box */
}

#header h1 {
	font-size: 3.0em;
	margin-bottom: 0.25em;
	margin-top: 0;
}

#header img {
	float: right;
	padding: 0px;
	margin-left: 6px;
}


/********************* Highlight section ********************************/
#highlight {
	background: url(highlight2_tl.gif) top left no-repeat;
	color: #ffffff;
	text-align: right;
	margin-right: 306px;
	margin-top: 1em;
	margin-bottom: 0;
	position: absolute;
	bottom: 0px;
}
/* this is a hack targeting IE, giving a width to #highlight */
*:first-child+html #highlight {
	width: 30em;
}

#highlight h2 {
	color: #ffffff;
}
#highlight a {
	color: #ffffff;
	text-decoration: underline;
}
#highlight_top {
	background: url(highlight2_tr.gif) top right no-repeat;
}
#highlight_header { 
	background: url(highlight2_tc.gif) top left repeat-x;
	margin: 0 7px;
	padding-top: 10px;
	padding-bottom: 0.5em;
	/* I think this wants something to draw the eye from left to right --
	 * some kind of graphic or gradient or something. Maybe something that
	 * matches in the headers in the main section below? */
}
#highlight_mainwrapl {
	background: url(highlight2_ml.gif) top left repeat-y;
}
#highlight_mainwrapr {
	background: url(highlight2_mr.gif) top right repeat-y;
}
#highlight_mainwrapr p {
	background: url(highlight2_mc.gif) top left repeat;
	padding: 0px;
	margin: 0 7px;
}
#highlight_bottom {
	background: url(highlight2_bl.gif) bottom left no-repeat;
}
#highlight_bwrapr {
	background: url(highlight2_br.gif) bottom right no-repeat;
}
#highlight_bwrapc {
	background: url(highlight2_bc.gif) bottom left repeat-x;
	height: 15px;
	margin: 0 7px;
}

/*
#highlight {
	background: red;
	margin-right: 300px;
	position: absolute;
	bottom: 0px;
}
*/
#clearing {
	clear: both;
	height: 0px;
	background: blue;
}

/**************************** Navigation ***********************************/
#navigation {
	clear: both;
	font-size: 1.3em;
	/*background: #000000;*/
	background: url(shiny_black_button2.gif);
}

#navigation #nav_list {
	text-align: center;
	/* temporary */
	height: 34px;
	padding: 0;
}

#navigation #nav_list li{
	display: inline;
	
}



/************************** Main Content ************************************/
#main_content {
	clear: both;
	width: 35em;
	margin: 0 auto;
	padding: 6px;
	/* background: #000000; */
	border-left: solid 2px #666666;
	border-right: solid 2px #666666;
}