body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center; /* for the benefit of IE 5.x, 6 */
	/*background-color: #697987;*/
	margin: 0px;
	padding: 0px;
	min-width: 1020px;
	background-color: #dcdcdc;
	background-image: url(../images/bg3.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
#maincontainer, #maincontainersub {
	margin: 0 auto;
	background-color: white;
	color: black;
	padding: 0px;
	width: 1020px;
	background-image: url(../images/contentcontainer_home.jpg);
	background-repeat: repeat-y;
	text-align: left; /* counteracts the affect of body text-align for ie 5.x, 6 */
	/*position: relative;*/
	/*border: solid .1em orange;*/
}
#maincontainersub {
	background-image: url(../images/contentcontainer_sub.jpg);
}
#maincontent {
	position: relative;
	width: 100%;
	min-height: 525px;	 
	/*text-align: center;*/
}
#masthead {
	width: 1020px;
	height: 195px;
	padding: 0;
	margin: 0;
	color: #697987;
	background-image: url(../images/masthead.jpg);
	background-repeat: no-repeat;
	position: relative;
	/*border: 1px solid #8191A6;*/
}
/* These commented styles are for image mapping the logo.
   However, they conflict with the menu items. */
/*
#masthead ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#masthead a {
	position: absolute;
	width: 220px;
	height: 120px;
	text-indent: -1000em;
}
#masthead .home a {
	top: 55px;
	left: 15px;
}
*/
/* All the menu styles are here */
#menuContainer {
	position: absolute;
	bottom: 2px;
	right: 1px;
	color: black;
	width: 744px;
	/*border: solid .1em red;*/
}
/* defines a div inside menu container for getting spacing correct. */
.menuList {
	float: right;
	padding-right: 3.3em;
} 
.menuListItems {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.firstMenuItem, .menuItem {
	float: left;
	padding-left: 1.2em;
	padding-right: 1.2em;
}
.firstMenuItem a:link, .firstMenuItem a:visited, .menuItem a:link, .menuItem a:visited {
	text-decoration: none;
	color: black;
}
.firstMenuItem a:hover, .firstMenuItem a:active, .menuItem a:hover, .menuItem a:active {
	color: #f5f5f5;
}
/* for the multimedia menu item on the multimedia page. Set this
 	 style to be whichever page is being represented.  Take off the link. */
#selectedItem {
	color: #f5f5f5;
}
/* end menu styles */
/* for the home page navigation via images */
.navImageContainer {
	width: 675px;
	/*border: 1px solid lightblue;*/
	margin: 0 auto;
	padding-top: 3em;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
}
.navImageItem {
	float: left;
	width: 166px;
	margin: 0 auto;
	padding: 1em 0 2em 0;
/*border: solid .1em #CC3300;*/
}
.navImage {	
	width: 145px;
	/*border: solid .1em #ababab;*/
	padding-top: .7em;
	margin: 0 auto;
	height: 181px;
}
/* home page bio/welcome */
#welcome, #contact {
	width: 600px;
	margin: 0 auto;
	/*border: solid .1em #999999; */
}
#welcomeRightBrace {
	background-image: url(../images/r_bracket.jpg);
	background-repeat: no-repeat;
	float: right;
}
#welcomeLeftBrace {
	background-image: url(../images/l_bracket.jpg);
	background-repeat: no-repeat;
	float: left;
}
#welcomeLeftBrace, #welcomeRightBrace {
	width: 42px;
	height: 174px;
}
#welcome p {
	line-height: 2em;
	font-size: 12px;
	color: #666666;
	padding: 1.5em;
	padding-top: 2em;
	
}
/* secondary portfolio pages */
#contact {
	padding-top: 7em;
}

#contact a:link, #contact a:visited {
	text-decoration: none;
	color: #5f8ea8;
}
#contact a:hover, #contact a:active {
	text-decoration: none;
	color: #a3c6d9;
}

#thumbnailContainer {
	width: 235px;
	padding-left: 20px;
	float: left;
}
/* this defines the 2 column thumbnails in thumbnailContainer */
#thumbnailContainer p {
	color: #5f5f5f;
	font-size: 16px;
	padding-left: 28px;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 10px;
}
.imageRow {
	width: 100%;
	height: 70px;
}
.leftImage, .rightImage {
	width: 90px;
	height: 70px;
}
.leftImage {
	float: left;
	padding-left: 28px; 
}
.rightImage {
	float: left;
	padding-left: 10px;
}
#largeImageContainer {
	width: 760px;
	float: right;
}
#imageDescriptionsContainer {
	width: 100%;
	margin: 0 auto;
	padding-left: 1.4em;
}
#leftImageDescription {
	width: 47%;
	float: left;
	font-size: 15px;
	color: #5f5f5f
}			
#rightImageDescription {
	width: 45%;
	float: right;
	font-size: 11px;
	color: #8c8c8c;
	text-align: right;
	padding-right: 3.4em;
	padding-top: .5em;
}			
/* this defines the 3 columns in largeImageContainer */
#navPrev {
	width: 75px;
	height: 60px;
	float: left;
	padding-top: 180px;
	padding-left: 35px;
}
#fullImageContainer {
	width: 535px;
	height: 405px;
	float: left;
	padding-top: 20px;
}
#navNext {
	width: 75px;
	height: 60px;
	padding-top: 180px;
	padding-left: 10px;
	float: left;
}
/* end portfolio pages */
/* duh, the footer */
#footer {
	/*border: 1px solid #8191A6;*/
	background-color: #ededed;
	width: 980px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	bottom: 0;
	left: 20px; 
}
#footer p {
	padding: .4em;
	margin: 0;
	text-align: center;
	color: #999999;
	font-size: 11px;
}
/*
#footer a:link, #footer a:visited {
	margin: 14px 0 0 0;
	text-decoration: none;
	color: #3366CC;
}
#footer a:hover, #footer a:active {
	margin: 14px 0 0 0;
	text-decoration: underline;
	color: #6699FF;
}
*/
/* clears the floats for the footer. */
.clear {
	clear: both;
}

/* This is a hack for IE to see the height and hide it from Firefox.
   IE treats the height attribute as a min0height. Firefox sees min-height,
   but treats the height attribute as a fixed size. */
* html #maincontent {
	height: 525px;
}