html, body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000;
	height: 100%;
	}

/*container is to get the footer to lie under the maincontent box, no matter what the height*/
#container {
	position: absolute;
	z-index: 8;
	left: 190px;
	top: 120px;
	width: 550px;
	}

/*This is the big blue box in the middle where content will change*/
#maincontent {
	margin: 0;
	padding-top: 10px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 5px;
	border: 3px solid #2A7BBD;
	background-color:  #fff;
	position: relative;
	width: 100%;
}

#footer {
	margin: 0;
	padding-top: 15px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 15px;
	position: relative;
	font-size: 10px;
	font-weight: normal;
	text-align: center;
	width: 100%;
	border-width: 0;
	}

#logo {
	position: absolute;
	top: 40px;
	left: 200px;
	z-index: 20;
	background-color: #fff;
	}
#logo img { 
	border: 0;
}	

#menu {
	margin: 0px;
	padding: 5px;
	border: 2px solid #2A7BBD;
	background-color: #E8EFF5;
	
	position: absolute;
	top: 18px;
	left: 22px;
	width: 130px;
	z-index: 9;
}

#imagebox {
	position: absolute;
	top: 30px;
	left: 775px;
	z-index: 10;
}

/*class="topright" is to be used in image tag for the changeable image in upper right corner.*/
img.topright {
	margin: 0px;
	padding: 0px;
	border-width: 3px;
	border-style: solid;
	border-color: #2A7BBD;
	background-color: #E8EFF5;	
}
	
#about {
	margin: 10px;
	padding: 5px;
	border-width: 3px;
	border-style: solid;
	border-color: #2A7BBD;
	background-color: #E8EFF5;
	position: absolute;
	top: 440px;
	left: 20px;
	width: 165px;
	z-index: 9;
}

#contact {
	margin: 0px;
	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: #2A7BBD;
	background-color: #E8EFF5;

	position: absolute;
	top: 440px;
	left: 795px;
	width: 200px;
	z-index: 9;
}



/*typography*/
a:link {
	text-decoration: none;
	font-weight: bold;
	color: #2A7BBD;
	}
a:visited {
	text-decoration: underline;
	font-weight: bold;
	color: #2A7BBD;
	}
a:active {
	text-decoration: none;
	font-weight: bold;
	color: #2A7BBD;
	}
a:link:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #2A7BBD;
	}

/*h1 is the blue title at the top of the blue box for main content. It should announce the name of the active page.*/	
h1 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: -25px;
	color: #2A7BBD;
	}
/*h2 is for green sub-headings in the main content box.*/	
h2 {	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	margin-top: 0px;
	margin-left: -14px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	color: #709C21;
	text-decoration: underline;
	}

/*h3 is the header for the side boxes. It is large, black.*/
h3 {	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	margin-top: 12px;
	margin-left: -2px;
	margin-bottom: -3px;
	padding-bottom: 0px;
	}

/*lists*/
ol, ul, li {
	font-size: 11px;
	line-height: 18px;
	/* font-weight: bold; */
	margin: 12px 0px 12px 8px;
	padding: 0px;
	}

li ul li {
	list-style-type: square;
	}

ul li {
	list-style-type: disc;
	}

/*The main content text will be bold with a large line-height.*/
p {
	font-size: 11px;
	line-height: 16px;
	margin: 12px 0px 12px 0px;
	/* font-weight: bold; */
	}
	
td {
	font-size: 11px;
	line-height: 16px;
	margin: 12px 0px 12px 0px;
	/* font-weight: bold; */
	}

/*references are for the bibliography. Line height is high or the superscript numbers crash lines together.*/
.references {
	font-size: 10px;
	line-height: 19px;
	margin: 5px 0px 10px 0px;
	font-weight: normal;
	}
	
/*The partners class will shorten the line height and indent the second line.*/
/* .partners {
	font-size: 11px;
	text-indent: -20px;
	line-height: 12px;
	margin: 9px 0px 9px 20px;
	} */
.indent {
	font-size: 11px;
	text-indent: -20px;
	line-height: 14px;
	margin: 10px 0px 10px 20px;
	}
.headline {
	font-size: 12px;
	text-transform: uppercase;
	line-height: 14px;
	}
	
/*Class=narrow is to give shorter line heights for narrow columns. It is to be used in the side boxes. It is not bold.*/	
.narrow{
	line-height: 13px;
	font-weight: normal;
	}
		
.bold {
	font-weight: bold;
	}
.notbold {
	font-weight: normal;
	}
.emph {
	font-weight: bold;
	font-style: italic;
	}

.superscript {
	vertical-align: super;
	font-weight: bold;
	}
.subscript {
	vertical-align: sub;
	font-weight: bold;
	}

/*horizontal rule*/
hr {
	padding-bottom: 0;
	margin-bottom: 0;
	}

/*Mondrian background design. Blackv is vertical lines. Blackh is horizontal lines. */	
#blackv1 {
	position: absolute;
	top: 0px;
	left: 60px;

	margin: 0;
	padding: 0;

	height: 615px;
	width: 40px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackv2 {
	position: absolute;
	top: 185px;
	left: 695px;

	margin: 0;
	padding: 0;

	height: 100px;
	width: 8px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackv3 {
	position: absolute;
	top: 360px;
	left: 715px;

	margin: 0;
	padding: 0;

	height: 100px;
	width: 10px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackv4 {
	position: absolute;
	top: 455px;
	left: 130px;

	margin: 0;
	padding: 0;

	height: 145px;
	width: 6px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}

#blackv5 {
	position: absolute;
	top: 410px;
	left: 745px;

	margin: 0;
	padding: 0;

	height: 35px;
	width: 5px;
	display: block;
	
	
	background-color: #000;
	z-index: 2;
}

#blackh1 {
	position: absolute;
	top: 50px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 10px;
	width: 65px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackh2 {
	position: absolute;
	top: 260px;
	left: 65px;

	margin: 0;
	padding: 0;

	height: 25px;
	width: 635px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackh3 {
	position: absolute;
	top: 350px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 10px;
	width: 725px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}
#blackh4 {
	position: absolute;
	top: 600px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 15px;
	width: 136px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}

#blackh5 {
	position: absolute;
	top: 430px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 5px;
	width: 75px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}

#blackh6 {
	position: absolute;
	top: 475px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 10px;
	width: 75px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}

#blackh7 {
	position: absolute;
	top: 410px;
	left: 640px;

	margin: 0;
	padding: 0;

	height: 10px;
	width: 110px;
	display: block;
	
	background-color: #000;
	z-index: 2;
}

#yellow1 {
	position: absolute;
	top: 0px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 50px;
	width: 65px;
	display: block;
	
	background-color: #E2E2E2;
	z-index: 0;
}

#yellow2 {
	position: absolute;
	top: 415px;
	left: 650px;

	margin: 0;
	padding: 0;

	height: 65px;
	width: 95px;
	display: block;
	
	background-color: #E2E2E2;
	z-index: 0;
}

#yellow3 {
	position: absolute;
	top: 265px;
	left: 95px;

	margin: 0;
	padding: 0;

	height: 95px;
	width: 110px;
	display: block;
	
	background-color: #E2E2E2;
	z-index: 0;
}

#yellow4 {
	position: absolute;
	top: 185px;
	left: 650px;

	margin: 0;
	padding: 0;

	height: 80px;
	width: 50px;
	display: block;
	
	border-top: 5px solid #000;
	
	background-color: #E2E2E2;
	z-index: 0;
}
#yellow5 {
	position: absolute;
	top: 455px;
	left: 100px;

	margin: 0;
	padding: 0;

	height: 145px;
	width: 30px;
	display: block;
	
	background-color: #E2E2E2;
	z-index: 0;
}

#yellow6 {
	position: absolute;
	top: 435px;
	left: 0px;

	margin: 0;
	padding: 0;

	height: 50px;
	width: 65px;
	display: block;
	
	background-color: #E2E2E2;
	z-index: 0;
}

/*end Mondrian background design*/