@charset "utf-8";
html, body, h1, h2, h3, h4, a, p {
	padding:0;
	margin:0;
}
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	color: black;
}
img {
	border: none;
}
p {
	padding: 0 8px;
}
h1 {
	font-size:1.6em;
	font-weight:normal;
	padding-bottom: 4px;
	color:black;
}
h2 {
	font-size:1.2em;
	font-style:italic;
	font-weight:normal;
	padding-bottom: 4px;
	color:black;
}
h3 {
	margin-left: 6px;
	font-size:1.1em;
	color:black;
}
#container {  
	background-image:url(bluegradientforsidebar180px.png);
	background-repeat:repeat-y;
	border: blue medium solid;
	min-width:776px;  
	margin: 0 auto;
}
#header {
	position:relative;
	width: 100%;
	border-bottom: thin solid blue;
}
#header h1 {  
	padding-top:5px;
	padding-left:8px;
	/* margins can be negative. padding can not be negative */
	margin-bottom:-10px; 
	font-weight:bold;
	letter-spacing:4px;
}
#header .slightlyoffset {
	position:absolute;
	top:-1px;
	left:-1px;
	color:white;
}
#header h2 {
	display:inline; 
	position:relative;
	background-color:white;
	border: thin solid gray;
	top:10px;
	padding:2px 5px;
	font-size: 1.2em;
	left: 18%; 
}

#container2 {
/*
	container2 exists only to show the blue gradient along the top. (Each CSS element can have only one background image.
	The blue gradient along the left will be defined under 'container'.) 
	*/
	background-image:url(bluegradientforheader180px.png);
	background-repeat:repeat-x;
}
#sidebar {
	float: left;
	width:17%;
	min-width:130px;
	padding: 0;
}
#sidebar ul {
	margin: 0;
	padding: 0;
	padding-top: 1em;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
}
#sidebar ul a {
	display: block;
	padding: 5px 0 5px 6px;
}
#sidebar ul a:link, #navlist a:visited {
	color: black;
	text-decoration: none;
}
#sidebar ul a:hover {
	background-color: blue;
	color: white;
}
#navlist li {
	float: left;
	width: 100%;
}
#navlist li.currentpage {
	text-align: right;
	padding:5px 0 5px 0; /* match padding of 'a' element to keep spacing consistent */
}
#navlist li.currentpage:after { /* put a > after the menu item for the current page using the :after pseudo-element */
content:" >";
}
#maincontent {
	width:82.8%; /* percentage widths do not add to 100 because of border width */
	min-width:450px;
	min-height:400px;
	background-color:transparent;
	border-left:thin solid blue;
	float:right;
	padding-top: 30px; /* allow room for h2 in header (that is shifted down about 10px) */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
}
#maincontent p {
}
#footer {
	clear:both;
	min-height:1.2em;
	border-top: thin solid blue;
	background-color:blue;
	color:white;
	padding:8px;
}
#footer p {
	font-size:.8em;
}
#footer p#copyright {
float:left;
}
#footer p#footerdate {
display:inline; /* needed so that p element does not take up a whole line */
float:right;
}
/* Miscellaneous classes for reuse anywhere */
.smallertext {
	font-size:80%;
	font-weight:normal;
}
.indentalittle {
	padding-left: 30px;
}
.floatright {
	float: right;
	margin-left: 8px;
}
.floatleft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
}
.hidden {
	display:none;
}