/*** CSS Layout ***/

/*
	Start out by centering the content of the page
	and creating the "wrapper" that holds everything
*/

body {
	text-align: center; 
	min-width: 933px;
}

div#wrapper {
	width: 933px; 
	padding: 0; 
	margin: 0 auto; 
	text-align: left; 
	position: relative; /* This lets us position the buttons on the header using absolute if we need to */
}

/*
	Define our header size and position and the buttons that will float over it
*/

div#header {
	width: 933px;
	height: 183px;
}

div#headerbutton1 {
	position: absolute;
	top: 90px;
	left: 30px;
}

div#headerbutton2 {
	position: absolute;
	top: 137px;
	left: 30px;
}

/*
	Define the size and position of the navigation bar
	We will shorten it and offset it by 20px to prevent
	having to add padding and margins in the box itself
*/

div#navigation {
	width: 913px;
	position: relative;
	left: 30px;
}

/*
	Create a content container - this will hold the main content and right-hand bar
*/

div#content { 
	width: 933px;
	float: left;  /* We float this left too, so that certain browsers will correctly float the content blocks */
}

/*
	Define the size and location of the main content and right-hand bar, including any margins and padding
	To apply further margins and padding within, we will style the paragraphs and other elements
*/

div#maincontent { 
	width: 873px; 
	padding-bottom: 30px; /* Leave room for a footer if we have one */
	position: relative; /* Bring the content in from the left by a little */
	left: 30px;
}

div#rightcol { 
	display: none;
} 

/*
	Define the footer
*/

#footer { 
	width: 933px;
	clear: both; /* This clears all our floats from above */
	text-align: center;
}