/*------------------------------------------------------------*/
/* layout.css                                                 */
/* Handles the structual layout of major sections of the page */
/*    for the computer screen. Printing, handhelds, and tv    */
/*    use different layouts, so they won't use this.          */
/*------------------------------------------------------------*/

html, body
{
	_min-width:600px; /* Tries to make sure that #content doesn't flash below #navigation in IE, but it still might. If this is a major problem, delete this, and activate the _width css in #page below. */
}

body
{
	padding:3em 0 3em 0; /* Creates space above and below #page. */
}

*
{
	margin:0px;  /* Removes margins from all tags, preventing default values from interfering. */
	padding:0px; /* Removes padding from all tags, preventing default values from interfering. */
}

#page
{
	margin-left:auto;  /* This with a margin-right:auto and a width centers this div. */
	margin-right:auto; /* This with a margin-left:auto and a width centers this div. */
	width:80%;         /* The width of the whole webpage, in this case a percentage of the width of the window. */
	min-width:600px;   /* Minimum width of the whole webpage. There may still be a margin to the left and right, however. */
	max-width:1200px;  /* Maximum width of the whole webpage. There may still be a margin to the left and right, however.  */
	/* _width:800px; */ /* If turned on, it forces IE to have a static page width, which will make things work better, but will remove user size choice. */
}

#header
{
	padding-top:40px;
}

#midpage
{
	
}

#navigation
{
	width:150px; /* Width of navigation menu, must be equal to or less than the left margin of #content. */
	float:left;  /* So that #content will flow around #navigation, rather than appearing below it. */
}

#content
{
	margin-left:150px; /* Provides a margin into which the #navigation menu can flow. Must be equal to or greater than the width of #navigation. */
}

#footer
{
	clear:both; /* So that #footer doesn't try to float around #navigation. */
}

#header .padding
{
	padding:0 0 1em 0; /* Add a space between #header and #midpage. */
}

#navigation .padding
{
	float:left;  /* This will allow css clear to function correctly. */
	padding:1em 0 0 1em; /* No need for padding, covers the inner content covers full width of #navigation. */
}

#content .padding
{
	float:left;        /* This will allow css clear to function correctly. */
	padding:0 0 0 2em; /* Put a small amount of padding on left to provide a buffer away from  */
}

#footer .padding
{
	padding:1em 0 0 0; /* Add a space between #midpage and #footer. */
}