/*------------------------------------------------------------*/
/* Perfect Layout                                             */
/*   Version 1.0 Beta                                         */
/*                                                            */
/*   Created by Dwight House                                  */
/*   http://perfect.dwightdesign.com/                         */
/*------------------------------------------------------------*/

/*------------------------------------------------------------*/
/* layout.css                                                 */
/* Handles the structual layout of major sections of the page */
/*    for the computer screen.                                */
/*------------------------------------------------------------*/

/*------------------------------------------------------------*/
/* Structural layout code.                                    */
/*------------------------------------------------------------*/

/* Every kind of content will be inside the #page. */
#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 (consistant across all browsers, as opposed to margin). */
	width:800px;
}

/* Stabilizes placement of #navigation when it comes after #content in code. */
#wrapper
{
	float:left;
	width:100%;
}

#midpage
{
	padding:28px 0;
}

#content
{
	float:right;
	width:580px;
}

#navigation
{
	margin-left:-100%; /* Allows the placement of #navigation after #content in the code. Technique inspired by Position is Everything's article "One True Layout: Appendix D" (http://www.positioniseverything.net/articles/onetruelayout/appendix/holygrail). */
	float:left;        /* So that #content will flow around #navigation, rather than appearing below it. */
	width:210px;       /* Width of navigation menu, must be equal to or less than the left margin of #content. */
}

/*------------------------------------------------------------*/
/* Padding for each major section inside #page.               */
/*------------------------------------------------------------*/

.headerPadding
{
	padding:18px;
}

.contentPadding
{
	padding:1em 18px 1em 1em;
	min-height:450px; /* This is where min-height should be declared for #content content. It's different for IE 6, see ie6Hacks.css. */
}

.navigationPadding
{
	padding:1em 12px 1em 12px;
}

.footerPadding
{
	padding:8px 0 0 0;
}