/* 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: 20px 40px;
}

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

/* 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;
}
#center{
	padding: 20px;
}

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

/* FIX: in the header + footer, we may use h1...h6 for text. By default, these have large vertical margins that will 
* cause bad alignment. To make the alignment precise + identical across all browsers, we override these margins */
#banner h1,h2,h3,h4,h5,h6{
	margin: 0;
	padding: 0;
}
#footer h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
}

/* 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;
}