body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #444;
	font-size: 100.1%;
	padding: 0;
	margin: 0;
}
h1, h2, h3, p  {
	margin: 1.0em 0 0em;/*zeros default browser margins vertically*/
	padding: 0px;
}
h1 {
	font-size: 0.9em;
	font-weight: bold;
	margin-top: 1%;
	color: #333;
}
h2 {
	font-size: .8em;
	font-weight: bold;

}
h3 {
	font-size: .6em;
	font-weight: bold;
}
p {
	font-size: 0.75em;
	color: #333;
	line-height: 200%;
}
.firstparagraph {
	margin-top: 0.3em;
	margin-bottom: 0em;
	margin-left: 0em;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
}
#pagecontainer {
	background-image: url(images/ss_draftpage_950.jpg);
	background-repeat: no-repeat;
	height: 755px;
	position: relative;
	margin-top: 30px;
}
/*centering via containercenter as per CSS Mastery (Budd) p136*/
#containercenter {
	width: 970px;
	left: 50%;
	top: 10%;
	position: relative;
	margin-left: -485px;
}
#header {
	width: 700px;
	height: 36px;
	position: absolute;
	margin-left: 221px;
	margin-top: 126px;
}

/*main navigation menu styling*/

/*Hor menu structure ala lynda/J Williamson/dwCS3 with CSS essential training. Strip margins (used by IE and Opera to indent lists) and padding (used by Safari and Firefox to indent lists); float left (ul and li) creates horizontal structure; inline can be used as alt for float structure*/

#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
	right: 0px;
	bottom: 0px;
	width: 730px;
	} 

#header li {
	float: left;
	}

#header li a:link,#header li a:visited {
	display: block;
	padding: .2em .2em;
	font-weight: bold;
	font-size: .9em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #656565;
	margin-right: 0.4em;
	line-height: 1.2;
	font-size: 1.05em;
	background-image: url(images/tab_bg.png);
}

#header li a:hover,#header li a:active {
	color:#666666;
	background: #bbb;
	}

/*This selector is used to identify the current page;
>>>>it must be applied to the corresponding link on the current page.
Another possibility is to apply a class attritbute to the body tag and rename the body tag on each page. As used here, it is applied to the link tag.* The selecter is applied also to the hover and active link selectors, since they are also controlling the attributes of the link.*/
#header li a.current,#header li a.current:hover,#header li a.current:active {
	cursor: default;
	color: #333;
	background-image: url(images/tab_on.png);
	border-top: solid #999 1px;
	border-left: solid #999 1px;
	border-right: solid #999 1px;
	}  

/*Curser property is changed for the hover state so the menu link on the current page has a normal curser in hover state imdivating that it is not a link (although it is).*/
/*The menu tabs are positioned inside the header div using relative positioning, relative to the header div. NOTE: #header set to relative to accomplish this...items within the header are then positioned relative to the top left corner of the header. Tabs are then positioned using the header ul selector (absolute position, 0 px right and bottom).*/

#content {
	width: 695px;
	height: 570px;
	margin-left: 200px;
	padding-top: 10px;
	padding-left: 25px;
	overflow: auto;
	margin-top: 150px;
	padding-right: 10px;
	position: absolute;
	}
/*Change link formatting*/
a:link {
	color: #B23F4C;
}a:visited {
	color: #862F39;
}a:hover {
	color: #0033FF;
}a:active {
	color: #B23F4C;
}
#sidebarleft {
	position: absolute;
	left: 0px;
	top: 350px;
	display: block;
	float: none;
	width: 185px;
	height: 300px;
	padding-left: 5px;
	padding-right: 5px;
	color: #FFF;
}
#content ul {
	line-height: 1.5em;
}
.imgright {
	float: right;
	padding-right: 10px;
	padding-left: 10px;
}