/*

	This is the div container holding all the content under the header

*/
#main {

	/* center this div in ff, chrome, safari, and every browser except IE */
	margin:auto;

	/* The header graphic spills over into main content so we have to back up under it */
	margin-top:-12px;

	width:604px;
	height:100%;
	
	text-align:left;
	
	/* Make the background green, the right-side content will overwrite this will white, but the nav bar is colored here */
	background-color:#339966;
	
	/* add the thin blue line on the left of the nav bar */
	border-collapse: collapse;
	border-left:1px #033996 solid;
	
	/* Add some space of pinstripes at the bottom */
	margin-bottom:20px;
	
}

/*

	This is the div container that holds all the main content except the left nav bar

*/
#rightContent {
	
	/* Compensate for the left nav bar */
	margin-left:138px;
	
	/* The thin tan border on the right */
	background: #fff url('/segregation/img/pageLayout/bodyEdge.png') right top repeat-y;
	
}

/*

	Headers within the fancy Excersices and Demonstrations graphic

*/
#rightContent h1.pageHeaders {
	
	/* Headers are by default inline, we want to set a static height/width to make it visable so we need to make is block */
	display:block;
	height:24px;

	/* This will align the text perfectly inside the grey bar */
	padding:24px 14px 0 34px;
	margin:0px;
	
	background: transparent url('/segregation/img/pageLayout/header.png') no-repeat 0 0;
	color:#003366;
	
	/* We need to make sure the line height matches the font-size to prevent text from getting cut off in IE */
	line-height:19px;
	font-size:19px;
	
	font-family:'Times New Roman';
	font-weight:bold;
	text-align:left;
}

/* Since some of the text is a link we have to format the link style too */
.pageHeaders a {
	color:#003366;
	text-decoration:none;
	line-height:19px;
	
	font-family:'Times New Roman';
	font-size:19px;
	font-weight:bold;
}

/* This is the page X or 10 text to the right */
#rightContent h1 span {

	/* Its going to float right of the main header text */
	float:right;
	font-size:13px;	
	
}

/* This is where the primary content is. We want to give some padding so text is not directly againest the borders */
#pageContent { padding:10px 16px 0px 15px; }


/* This is the div container that will show up within the board if there is an error. We want to add soem padding so the text fits nicely */
#errorMessage { padding:10px; }

/* This is the next Section button wrapper on the bottom usually at the bottom of the pageContent div */
#nextSection {
	margin:0;
	padding-bottom:20px;
	padding-top:5px;
}

/* This is the actual next Section button */
#nextSection a {
	/* By default next section buttons show up on the right */
	float:right;
	
	background:transparent url('/segregation/img/pageLayout/nextpage.gif') no-repeat right top;

	/* we want to speficy a static height/width so lets make it a block */
	display:block;
	height:13px;
	width:115px;
}

/* This is the style for next Section buttons that are centered */
#nextSection.center a {
	float:none;
	margin:0 auto;
	width:115px;
}

/* Some nextSection buttons are a continue graphic */
#nextSection.continue a { background-image: url('/segregation/img/pageLayout/continue.gif');}

/* SMall Next Section image for board1 and board2 pages */
#buttons a.nextSmall { 

	display:block;

	margin-top: 10px;

	height:13px;
	width:103px;
	background:transparent url('/segregation/img/pageLayout/nextpage-sm.gif') no-repeat right top;
	
}

/***********************
	
	Far bottom footer
	
	This is the one bottom border to the main content div
	
***********************/

#footerBar {
	width:604px;
	height:5px;
}

#footerBar #left {
	float:left;
	width:138px;
	height:5px;
	background-color:#003399;
}

#footerBar #right {
	float:right;
	width:465px;
	height:4px;
	background-color:#CCCC99;
	border-right:1px solid #996666;
	border-bottom:1px solid #996666;
}


/***********************
	
	PageContent div
	
	This is the footer containing the SPN graphic horizontal rule and copyright
	
***********************/

/* This is the div wrapper. Lets get under any elements floating right and give it a little margin too */
#footer {clear:right; margin-top:20px;}

/* This is the SPN graphic */
#footer #footerSpn {
	background:transparent url('/images/spn.gif') no-repeat scroll right top;
	float:right;
	
	margin-right:20px;
	padding:4px;
	
	display:block;
	width:74px;
	height:30px;
}

/* This is the blue horizontal rule */
#footer hr {
	border-style:solid;
	border-width:1px 0 0;
	border-color:#04369b;
	margin: 5px 20px 2px;
	clear:right;
}

/* This is the copyright span */
#footer span {
	display:block;
	
	font-family: verdana,helvetica,arial,geneva;
	font-size:10px;
	line-height:17px;
	
	margin-right:23px;
	padding-bottom:30px;
	text-align:right;

}