body {
		margin: 0;
		padding: 0;
		/*The dark grayish color on the sides of the page*/
		background-color: #4b5767;
		color: #333333;
		min-width: 808px;
}

/*This controls how header 1 looks on the site*/
h1 {
		font-family: "verdana";
		font-size: 110%;
		color: #666633;
}

/*This controls how header 2 looks on the site*/
h2 {
		font-family: "verdana";
		font-size: 100%;
		color: #666633;
}

/*These control the way links appear on the entire site*/
a:link {
		text-decoration: none;
		font-weight: bold;
		color: #2a4a7b;
}
a:visited {
		text-decoration: none;
		font-weight: bold;
		color: #2a4a7b;
}
a:focus {
		color: #4279ca;
}
a:hover {
		color: #4279ca;
}
a:active {
		color: #2a4a7b;
}
	
/*To prevent borders from appearing around images that are links (banner, directions)*/
img {
		border: none;
}

/*The intro selectors are used on the Who We Are page. 
This one describes how the staff headings should look*/
.intro {
		font-family: "verdana";
		font-size: 110%;
		color: #333333;
		font-style: italic;
		padding-top: 1.5em;
}
/* This one adds some space between the descriptions and the photo*/
img.intro {
		float: right;
		padding-left: 10px;
		padding-top: 0;
}

/*This class is used for figures/pictures in newsletters or articles. 
The picture is centered and any text will be smaller*/
.illustrations {
	font-size: 83%;
	text-align: justify;
	width: 420px;
	margin: 20px auto;
}

/*This class is used for the site map. It aligns the text with the graphical bullets*/
.sitemap {
		vertical-align: middle;
}

/*This class is used for lists of links, to add spacing between the list items*/
.links li {
		padding-bottom: .8em; 
}	

/*Basically the page itself. Child of body, this is the tall rectangle that everything lives in*/	
#main {
		width: 808px;
		/*Light gray color used on all but the main index page*/
		background-color: #b3b3b3;
		/*Margin has 2 values for top/bottom and left/right*/
		margin: 0 auto;
		padding: 0;
		border-right: solid gray 1px;
		font-family: "verdana";
		font-size: 83%;
		line-height: 1.16;
}
	/*parent is main. This is the big black thing on top of the page*/
	#topnavbar {
		/*Without this the links will fall out of the black bar to the left of the page*/
		position: relative;
		height: 75px;
		background-color: #000000;
		margin: 0;
		border-bottom: solid #ffffff 1px;
	}
	
		/*parent is topnavbar. This is an invisible box for containing and positioning the links. The box hugs the bottom of topnavbar*/
		#topnavlinks {
			/*Without this the box cannot be positioned and the text appears at the top left of the black bar*/
			position: absolute;
			left: 45px;
			top: 59px;
			color: #dce2c6;
			font-family: "arial";
			font-weight: bold;
			font-size: 12px;
		}
			/*The following few are for controlling how the nav links look*/
			div#topnavlinks a:link {
				text-decoration: none;
				color: #dce2c6;
			}
			div#topnavlinks a:visited{
				text-decoration: none;
				color: #dce2c6;
			}
			div#topnavlinks a:focus {
				color: #dce2c6;
			}
			/*These make the link text white when mousing on them*/
			div#topnavlinks a:hover {
				color: #ffffff;
			}
			div#topnavlinks a:active{
				color: #ffffff;
			}
			
			/*formats the list of links in the topnavbar*/
			#topnavlinks ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#topnavlinks li{
				display: inline;
				margin: 0;
				padding-right: .7em;
			}
			#topnavlinks li.clientlogin {
				padding-left: 8em;
			}
	/**************************end topnavbar section*/
	
	/*parent is main, this is the bar with the logo, banner, and random panaramic picture*/
	#bannerbar {
		height: 89px;
		background-color: #4b5767;
		margin: 0;
		border-bottom: solid #ffffff 1px;
		/*This is to fix the extra color band in IE6*/
		overflow: hidden;
	}
		/*For the white border on the right of the panaramic picture*/
		.bannerimgs {
			border-right: solid #ffffff 1px;
		}
	/*for the beige separator bar*/
	#separatorbar {
		height: 26px;
		background-color: #dce2c6;
		margin: 0;
		border-bottom: solid #ffffff 1px;
		/*For future use, in case text needs to be in the bar*/
		color: #444444;
		font-family: "arial";
		font-size: 11px;	
	}
	/*************************end banner/separator bar section*/

	/*This div stores the title gif*/
	#title {
		/*The 15px at the bottom of this is to maintain a good distance between the gif and the content*/
		margin: 0 0 15px 0;
		padding: 0;
		width: 808px;
		font-family: "verdana";
		font-size: 15px;
		color: #ffffff;
	}
	
	#title img {
		vertical-align: middle;
	}
	/***********************end title gif section*/
	
	/*parent is main*/
	#leftcolumn {
			float: left;
			/*The entire left column, including padding, is 429px. 1px is used for the white border in the banner for 430px total*/
			width: 349px;
			padding-left: 40px;
			padding-right: 40px;
			padding-bottom: 40px;
	}
	/**********************end leftcolumn section*/
	
	/*parent is #main*/
	#rightcolumn {
			/*to float against the left column, otherwise it will be beneath*/
			float: left;
			/*The right column with padding is 379px, added to 429px equals 808px, the width of #main*/
			width: 339px;
			/*padding for top, right, bottom, left, effectively the right and bottom have a 40px cushion*/			
			padding: 0px 40px 40px 0px;
	}
	/**********************end rightcolumn section*/
	
	/*parent is #main, for pages with 1 column*/
	#singlecolumn {
		/*The single column is essentially the same width as #main*/
		width: 728px;
		margin: 0;
		/*40px all around except the top*/
		padding: 0px 40px 40px 40px;
	}
	/*********************end singlecolumn div*/

	/*parent is #main*/
	#footer {
			/*similar color to the baby field*/
			background-color: #ebd274;
			border-bottom: solid #ffffff 1px;
			border-top: solid #ffffff 1px;
			height: 98px;
			/*this is supposed to make the footer stay on the bottom, i.e. keeping its sides "clear". Without it
			in IE6, it causes the footer to be shorter. Without it in IE7 and FF, the footer gets overlapped by the columns*/
			clear: both;
			/*This is for fixing a problem in IE6. Without it, there is a very small band of color beneath the baby
			picture. I imagine this is the overflow. Using this property causes that band to disappear.*/
			overflow: hidden;
	}
	/**********************end footer section*/

/*parent is body, goes after main for putting fine print*/
#spare{
		width: 808px;
		/*Light gray color used on all but the main index page*/
		/*background-color: #b3b3b3;*/
		background-color: #4b5767;
		/*Margin has 2 values for top/bottom and left/right*/
		margin: 0 auto;
		padding: 3px;
		font-family: "verdana";
		font-size: 60%;
		line-height: 1.13;
		text-align: center;
		color: #e5e5e6;
}

/*These control the way links appear in the spare section*/
#spare a:link {
		text-decoration: none;
		font-weight: bold;
		color: #ffffff;
}
#spare a:visited {
		text-decoration: none;
		font-weight: bold;
		color: #ffffff;
}
#spare a:focus {
		color: #000080;
}
#spare a:hover {
		color: #000080;
}
#spare a:active {
		color: #000080;
}