h3 {
	font-weight: bold;
	font-size: 1.1em;
}
h4 {
	font-variant: normal;
	font-size: 1.1em;
	font-weight: bold;
}
h5 {
	font-weight: normal;
}
h6 {
	text-decoration: underline;
	font-size: .8em;
	font-weight: normal;
}
img {
	margin: 8px;
}
a {
	color: #0033ff;
}
a:visited {
	color: #0033ff;
}
body {
	background-image: url(../images/background/gradient01.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	font-family: Garamond, "Californian FB", "Times New Roman";
	background-color: #d7d0b6;
}
/*
I chose not to break up the background image into divs and left it as a full page.
Consequently, the rest of the content must be positioned absolutely to avoid the graphics
contained in the background image.  The gradient in the background image goes from upper left
to lower right.  This would look dumb in the middle of the page.  Thus the web site starts in 
the upper left.  We assumed people with wide screens still waste space with AOL- or MSN-like browsers
so we keep the total width under 756 so there is no horizontal scrolling.  Consequently folks with
wide screens see a lot of nothing on the right.  An alternative might be to look at all the pages
and consider letting the text flow to the right in an unconstrained div.
*/
#wrapper #MainContent {
	font-weight: bold;
	position: absolute;
	width: 650px;
	left: 106px;
	top: 139px;
	z-index: 7;
	visibility: visible;
}
/*
It would be cleaner to place the Navigation inside the main content div.  But I started
out with absolute positioning, so I left the code alone.  Although the Flash looks nice,
text size is not scalable, so it is not accessible.
*/
#FlashNav {
	height: 350px;
	width: 240px;
	position: absolute;
	z-index: 8;
	left: 111px;
	top: 150px;
	visibility: visible;
}
/*
Having placed the Navigation absolutely, we need a div of the same size inside the main content
so that the rest of the content will flow around the nav.  I made it a little bigger than the actual 
Nav so I don't have to deal with the box model to place margins at the right and bottom.
*/
#wrapper #MainContent #NavPlaceholder {
	height: 350px;
	width: 240px;
	float: left;
}
/*
The following items associated with the Resource Center create a pretty navigation subsystem for the 
Buyers and Sellers Resource center, each of which have 10 points of text detail.  The ideas come from
http://www.alistapart.com/articles/taminglists/
*/
#ResourceCenter {
	float: left;
	width: 350px;
}
#ResourceCenter ul {
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	list-style-type: none;
}
#ResourceCenter li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #90bade;
	margin: 0px;
}
#ResourceCenter #ListLeft {
	width: 50%;
	float: left;
	margin-top: 15px;
}
#ResourceCenter #ListRight {
	width: 49%;
	float: right;
	margin-top: 15px;
}
.listDiv {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	font-style: normal;
	color: #333333;
	background-color: #90bade;
	margin-bottom: 1em;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 1em;
	padding-left: 0px;
}
#wrapper #ResourceCenter a {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	font-style: normal;
	text-decoration: none;
	display: block;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #1958b7;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #508fc4;
	background-color: #2175bc;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
}
#wrapper #ResourceCenter a:hover {
	background-color: #2586d7;
	border-right-width: 10px;
	border-left-width: 10px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #5ba3e0;
	border-left-color: #1c64d1;

}
#wrapper #resourceDetails {
	width: 600px;
	padding-left: 5px;
	text-align: justify;
	clear: left;
}
/*
The following sections are intended to format the calculators in the Mortgage Center.
The calculators were copied as tables.  In deference to the trend to move to CSS,
I reformatted them all without tables
*/
#wrapper #MainContent #mortgageCalculator {
	background-image: url(../images/metal029.jpg);
	border: medium outset #999999;
	padding: 5px;
	font-weight: bold;
	width: 625px;
	clear: left;
	margin-top: 25px;
	margin-bottom: 10px;
	float: left;
}
#wrapper #MainContent #interest {
	background-image: url(../images/metal029.jpg);
	border: medium outset #999999;
	font-weight: bold;
	padding: 5px;
	position: relative;
	width: 345px;
	float: right;
	margin-bottom: 10px;
}
#wrapper #MainContent #annualIncome {
	width: 640px;
	background-image: url(../images/metal029.jpg);
	border: medium outset #999999;
	padding: 5px;
	font-weight: bold;
	clear: left;
	float: left;
}
legend {
	background-color: #D7D0B6;
	color: #006600;
	border: 1px solid #006600;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 6px;
	padding-left: 6px;
}
fieldset {
	border: 1px solid #006600;
	padding-right: 10px;
	padding-left: 10px;
}
.left {
	float: left;
	clear: left;
}
.right {
	float: right;
	margin-right: 15px;
	padding-left: 8px;
}
#wrapper #MainContent #annualIncome  label {
	width: 11em;
}
.rightColumnMortgageCalculator {
	float: right;
}
/*
The following sections are to improve the look of forms.  As of this writing (9-26-06)
they are also used for the forms in the calculators.  The ideas came from
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml.
*/
input {
	background-color: #A9E2A9;
}
.submit {
	background-color: #C9BE81;
	border: medium outset #666666;
	margin-left: 5em;
	font-weight: bold;
}
label {
	width: 6em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block;
	font-weight: normal;
}
.rightNarrow {
	float: right;
	width: 20em;
}
.leftNarrow {
	float: left;
}
.rightReallyNarrow {
	float: right;
}
.submitLeft {
	background-color: #C9BE81;
	border: medium outset #666666;
	font-weight: bold;
}
.leftNarrowWider {
	float: left;
	width: 12em;
	font-size: .8em;
}
#wrapper #MainContent #mortgageCalculator label {
	width: 9em;
	font-weight: normal;
}
/*
Despite the trend to cast aside tables in favor of CSS, its probably OK for Pete's listings
to be in a table
*/
table {
	background-color: #C0C0C0;
	padding: 2px;
	background-image: url(../images/metal029.jpg);
	border: 5px outset #999999;
	font-size: 0.9em;
	clear: left;
}
.vertLine {
	border-right-width: thin;
	border-right-style: groove;
	border-right-color: #000000;
}
td {
	padding-bottom: 4px;
}
.centered {
	margin-right: auto;
	margin-left: auto;
}
/*
Pete does not like his phone number to be broken up and appear on two lines.  Browsers appear
to treat hyphens as spaces and thus break lines on them if necessary.  There is an old tag 
called NOBR which prevents this, but it is deprecated.  The following CSS is intended to replace
the NOBR tag.
*/
.nobr {
	white-space: nowrap;
}
/*
Pete's advertising and flyers have his tag line in gold.  The following is intended to 
replicate that effect.  Because of the background gradient, the gold is not so legible,
so I placed it on a gray background.
*/
.gold {
	color: #FFCC33;
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	background-color: #666666;
	clear: left;
}
/*This formatting helped convert the table Pete got from his friend Chasen Chess*/
#wrapper #MainContent #marketText {
	float: left;
}
#MainContent #marketForm {
	clear: left;
	width: 650px;
}
#wrapper #MainContent #marketSummary {
	float: left;
	width: 370px;
}
#wrapper #MainContent #marketForm label {
	width: 9em;
	font-size: .9em;
}
#wrapper #MainContent #marketForm input {
	font-size: .9em;
}
.marketFormBottom {
	clear: left;
}
.marketFormBottomRight {
	float: right;
}
#wrapper #MainContent #marketForm .marketFormBottom label {
	width: 12em;
}
.clearRight {
	clear: right;
}
.clearLeft {
	clear: left;
	margin-right: 8px;
	margin-top: 8px;
	float: left;
}
#wrapper #MainContent #PetePhoto img {
	float: left;
}
#wrapper #Title {
	position: absolute;
	width: 300px;
	left: 350px;
	top: 140px;
/*The following help format a form requesting MLS access*/
}
#wrapper #MainContent #MLS #left {
	float: left;
}
#wrapper #MainContent #MLS #right {
	float: right;
}
#wrapper #MainContent #MLS label {
	width: 7em;
}
#wrapper #MainContent #MLS {
	clear: left;
}#wrapper #MainContent #MLS #right label {
	width: 9em;
}
#wrapper #MainContent #MLS input {
	width: 8em;
}
#wrapper #MainContent #VillageLifeStory {
	width: 600px;
}
#wrapper #MainContent #mc img {
	width: 200px;
	float: left;
}
#wrapper #MainContent #book {
	float: right;
}
#wrapper #MainContent #bookSection {
	clear: left;
}
#wrapper #MainContent #VillageLifeStory #clear {
	clear: both;
	margin-top: 15px;
	padding-top: 15px;
}