/********** FUNCTIONAL CLASSES **********/
.clear {
	clear: both;
}
/********** END FUNCTIONAL CLASSES **********/


/********** CENTERED PAGE CONTAINER **********/
/* 
The left and right margins are set to auto to center the page.
The width of 980px is close to the maximum width allowable at 1024x768 when a horizontal scrollbar is 
on the screen. The padding-bottom is to create some spacing above the footer.
*/ 
#centeredpagecontainer {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}
/********** END CENTERED PAGE CONTAINER **********/


/*
Within #centeredpagecontainer, the 970px width is filled by #leftsidebarcontainer (210px floated left)
and #rightheaderandcontentwrapper(mcs/wbc) (760px floated right). After those two elements, we use
a div.clear to clear the floats.
*/


/********** LEFT SIDEBAR **********/
/*
#leftsidebarcontainer is a fixed width sidebar that extends from the top of the page all the way down
to the footer.
*/
#leftsidebarcontainer {
	width: 190px;
	float: left;
}
/********** END LEFT SIDEBAR **********/



/********** HEADER AND CONTENT WRAPPERS **********/
/*
#rightheaderandcontentwrapper(mcs/wbc) is a container used so we can get the #contentandrightsidebarwrapper
div placed at the top of the HTML. We use padding-top and position:relative to leave space so that 
the #header, which will appear later in the HTML source code, can go at the top.
*/
#rightheaderandcontentwrappermcs {
	float: right;
	width: 788px;
	position: relative;
	padding-top: 155px;
}
#rightheaderandcontentwrapperwbc {
	float: right;
	width: 788px;
	position: relative;
	padding-top: 125px;
}

#rightcontentwrappernoheader {
	float: right;
	width: 788px;
	padding-top: 10px;
}

/*
#contentandrightsidebarwrapper is needed only so that the content area and the optional right
sidebar within the content area can be treated as a single block rendering below the #header.
*/
#contentandrightsidebarwrapper {
	width: 788px;
}
/********** END HEADER AND CONTENT WRAPPERS **********/



/********** HEADER **********/
/*
Since the containing element #rightheaderandcontentwrapper(mcs/wbc) uses position:relative, for the header
we use position:absolute to place the header at the top left corner of #rightheaderandcontentwrapper(mcs/wbc).
The height given to #header should match the padding-top value used for #rightheaderandcontentwrapper(mcs/wbc).
*/
#headercontainermcs {
	width: 788px;
	position: absolute;
	top: 0;
	left: 0;
	height: 155px;
}
#headercontainerwbc {
	width: 788px;
	position: absolute;
	top: 0;
	left: 0;
	height: 115px;
}
/********** END HEADER **********/



/********** CONTENT CONTAINER WITH SIDEBAR OPTIONS **********/
/*
There are three options for the high-level structure of the content area:
Option 1: Content area all by itself.
Option 2: Content area with fixed width sidebar on the right.
*/
/*
Nothing special needed for Option 1.
*/
#content {
	padding: 0 20px 10px 10px;
}

/*
For option 2, we want to reduce the width of #content and float it left
to accommodate a fixed width sidebar on the right of the content area, 
running from the bottom of the header to the top of the footer.
*/
#content.withsidebar {
	width: 588px;
	float: left;
}
/*
For option 2, the sidebar uses this ID. It's fixed width and floated to
the right.
*/
#rightsidebar {
	width: 190px;
	float: right;
	min-height: 150px;
	background-color: green;
}
/********** END CONTENT CONTAINER WITH SIDEBAR OPTIONS **********/





/********** FOOTER **********/
/*
The footer floats at the bottom and is centered.
*/
#footercontainer {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

#footernav {
	text-align: center;
	background: #f77900 url(/res/images_scratch/footernavbg.jpg) repeat-x top;
	line-height: 2em;
}

#footersectionwrapper {
	background: #00217f url(/res/images_scratch/footerbg.jpg) repeat-x top;
	padding: 0.5em 1em 1em 1em;
}

#footerleftsection {
	width: 250px;
	float: left;
}
#footerleftsection img {
	margin-top: -0.5em;
	margin-bottom: 10px;
}
#footermiddlesection {
	width: 300px;
	float: left;
}
#footerrightsection {
	width: 330px;
	float: right;
}
/********** END FOOTER **********/