/* layout.css deals with the placement of page elements
   and definitions that are specific to those page areas.
   
   Change this freely, though realize that this will likely
   effect all of your files.
 */
 
/* page defaults */
body {
	color: black;
	background-color: #88a575;
}

#pageContainer { 
	width: 780px; /* 1024x768 resolution means 1004x598 in browser*/
	margin: 0 auto;
	text-align: left;
}

/* Header */
#pageHeader {
	height: 130px;
	color: white;	
	margin: 0;
	padding: 0.5em;
	width: auto;
	z-index: 5;
	position: relative;
	background-color: brown;
}

#masthead-logo {
	float: left;
	margin: 0 1em 1em 0em;
}

#masthead-title {
	font-size: 3em;
	padding-top: 0.5em;
	margin-top: 0;
}

#masthead-byline {
	font-style: italic;
	text-align: center;
}

/* Content Body */
#pageBody {
	position: relative;
	color: black;
	background-color: lightyellow;
	z-index: 1;
	padding: 1em 2em;
}

#pageFooter {
	color: white;	
	margin: 0;
	padding: 0.5em 1em;
	width: auto;
	z-index: 5;
	position: relative;
	background-color: brown;
}

h2#firstTitle {
	margin-top: 0.5em;
}

h2#firstTitle, p#firstParagraph {
	margin-left: 200px;
}

div.leftHalf {
	float: left;
	width: 33%;
}

div.rightHalf {
	float: right;
	width: 37%;
}

img.leftImage { 
	float: left;
	margin: 0 1em 0.5em 0;
}

img.rightImage { 
	float: right;
	margin: 0.5em 0 0.5em 1em;
} 

#bottomImage {
	padding-top: 3em;
}

#middleText {
	float: left; 
	margin-left: 10px; 
	width: 505px;
}

#middleText h2 {
	margin-top: 2em;
}