/* BASIC WEB SITE LAYOUT featuring:
*
*	header + footer
*	multi-column main area
*	liquid design with adjustable min/max width
*	Center alignment for whole site
*	Support for Firefox, Opera, IE
*	Reusable for any web site
*
*	Drawbacks:
*		* Not compatible with Internet Explorer browsers older than version 7, as we use advanced CSS features that IE does not support
*			But, this drawback can be patched up, for example by using IE7 by Dean Edwards
*/


body{
	margin: 0;
	padding: 50px 100px;
}

#outline{
	margin: 0 auto;
	min-width: 550px;
	max-width: 1000px;
}

/* make site stretch out to maximum width allowed by screen.
CAUTION: if we use width: 100% on areas that have different margins, padding, or borders, the areas will not align properly, 
since width does not include margin, padding, or borders.
Therefore we create wrappers that do not have any margin, padding, or borders */
#bannerwrapper,
#maintable,
#footerwrapper
{
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
}

/* default style: outline areas with medium width borders + slightly gray backgrounds
* this is a bare-bones default look so that you can clearly distinguish the site's segments 
* you may make more fancy and colorful looks by including your own stylesheet that overrides this one */
#banner,
#footer,
#left,
#center,
#right
{
	border: 5px outset #666;
	padding: 10px;
	margin: 0;
}
#left{
	padding: 30px 10px;
	width: 150px;
}
#center{
	padding: 20px;
}

/* footer navbar should be centered with respect to main area */
#footer .navbar{
	margin: 0 auto;
	text-align: center;
}

/* layout tables:
* tables used only for aligning elements should not have any decorations like borders or margins */
table.layout{
	border: none;
	padding: 0;
	border-spacing: 0;
}
table.layout td{
	vertical-align: top;
	margin: 0;
}

/**********************
*	PRINTING OPTIONS
**********************/

/* inserting page breaks to manually control when to change pages */
.pagebreak{
	page-break-before: always;
}

/* specify elements only for printing */
@media screen{
	.printonly{
		display:none;
	}
}

/* specify element that should not print */
@media print{
	.noprint{
		display:none;
	}
}