/*------------------------------------------------------------*/
/* 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.          */
/*------------------------------------------------------------*/

body
{
	
}

*
{
	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:0 auto;    /* No top and bottom margin, auto margin on the left and right, which combined with the width, creates a centered layout. */
	padding:3em 0;    /* Creates space above and below #page. */
	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.  */
}

#midpage
{
	padding:15px 0;
	background:#000;
}

/* Stabilizes placement of #navigation when it comes after #content in code. Not required by Safari, required by IE, and required for glitchless operation in Opera and Firefox. */
#contentContainer
{
	width:100%;
	float:left;
}

#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. Easily exchanged with other forms of measurement. */
}

#content .padding
{
	min-height:500px;
}

#navigation
{
	float:left;        /* So that #content will flow around #navigation, rather than appearing below it. */
	width:150px;       /* Width of navigation menu, must be equal to or less than the left margin of #content. Easily exchanged with other forms of measurement. */
	margin-left:-100%; /* Allows the placement of #navigation after #content in the code. */
}

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

/* The following padding classes are added so that padding inside major site sections won't effect the overall layout and will come in handy if you decide to use borders. */
#header .padding
{
	padding:1em 1em;
}

#navigation .padding
{
	padding:18px 0;
}

#content .padding
{
	padding:18px 1em 1em 1em;
	overflow:hidden;
}

#footer .padding
{
	padding:1em;
}

#header .corners
{
	min-height:30px;
}

#footer .corners
{
	min-height:30px;
}