body {
	background-color: khaki; /*This will be shown while the background image is loading*/
	background-image: url('images/maps/IL01_2_mustard_darker.jpg');

	padding: 0 40px 0 40px;
	font-family: verdana;
	font-size: 0.8em;
	line-height: 120%;
}
div.container {
	background-color: white; /*mygray*/

	min-width: 700px; /* Doesn't work in IE 7 */
	border: 1px solid #555;
}
div.header, div.footer {
	padding: 1px; /* for some reason it does not work without this! */
	background-color: cornflowerblue;

	clear: left;
	color: white;

	border-bottom: 6px solid darkslateblue;	
}
div.content {
	background-color: white;

	min-height: 400px; /* Doesn't work in IE 7 */
	padding: 10px 30px 10px 30px;
	margin-left: 11em;
	
	border-left: 1px solid cornflowerblue;	
}
a { /* Normal links; menu links get their own styles farther below */
	color: #3050e0; /* Blue, but a bit warmer */
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
div.menu {
	width: 11em;
	float: left;
}
div.menu ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}
div.menu ul li {
	border-bottom: 1px solid #e6e6e6; /*myblue:#aac0ed;*/ /*mygray-darker*/
}
div.menu ul li a {
	padding: 5px;
	margin: 0px;
	color: red;
	background-color: white; /*mygray*/
	display: block;
	vertical-align: top;
	text-decoration: none;
}
div.menu ul li a:hover {
	color: orangered;
	background-color: #e6e6e6; /*mygray-lighter*/
	font-weight: normal;
	text-decoration: none;
}
div.menu ul li a.selected {
	font-weight: bold;
	color: black;
	background-color: white;
	width: 11.1em;
	border-left: 4px solid red;
}
div.menu ul li a.selected:hover {
	color: #777;
	background-color: white;
	font-weight: bold;
}
div.menu ul li a.selected img {
	border: none;
	vertical-align: middle;
	margin: 0px;
	padding: 0px; 	
}
a.image img {
	border: 1px solid white;
}
a.image:hover img {
	border: 1px dotted silver;
}

/*********** ADDED STUFF; put it into the main styles.css ***************/
div.backtotop {
	text-align: right;
	/* clear: right; ....Removed this because IE6 would screw up if the preceding paragraph(s) were shorter, vertically, than their adjacent image. */
	font-size: smaller;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "times new roman",georgia;
	color: rgb(230,40,40);/*firebrick;*/
}
h3, h4 {
	font-style: italic;
}
img.right {
	float:right; 
	margin-left:20px; 
	margin-bottom:10px; 
	padding: 5px; 
}
img.left {
	float:left; 
	margin-right:20px; 
	margin-bottom:10px; 
	padding: 5px; 
}
img.face {
	border: 1px solid #ccc;
}
img.logo {
	border: none;
}
td { /* This is so that text in tables doesn't end up large (it was doint that for some reason) */
	font-family: verdana;
	font-size: 0.8em;
	line-height: 120%;
}