/*	Beirut stylesheet -- a CSS layout demo
 *	original at http://stijlstek.nl/demo/beirut/
 *	copyleft 2004 Ben de Groot -- http://stijlstek.nl/contact
 *	licensed under the GNU Free Documentation License
 *	which in layman's terms means you are free to use and modify this stylesheet
 *	as long as you keep the license notice and credit to the original author intact
 */


/*	Let's start with zeroing out any browser default margins and paddings
 */

* {
	margin: 0;
	padding: 0;
	}

/*	Next we set the page height, to position the footer at the bottom of the window 
 *	when page is short, and at the bottom of the page when page is longer
 */

html, body {
	height: 100%;
	background: #ccc;
	color: #000;
	} 
body {
	font: 100%/150% serif; /* just some defaults - should be customized */
	} 
html>body { font-size: 12px; } /* for modern browsers that can resize px */

#wrap {
	position: relative;
	height: 100%;
	width: 100%;
	}

#middle {
	position: relative;
	height: auto;
	min-height: 100%; /* for modern browsers, to push the footer down */
	margin-right: 200px; /* right column width */
	margin-left: 200px; /* left column width */
	margin-bottom: -3em; /* footer height */
	width: auto;
	}

#middle:after { /* this will keep the floats contained, for modern browsers */
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    clear: both; 
    visibility: hidden; 
    } 

* html #middle {
	height: 100%; /* for IE because it doesn't do min-height */
	}

/*	Now we set the header, footer and columns...
 */

#header {
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 100%;
	overflow: hidden;
	z-index: 3; /* to show it on top */
	}

#footer {
	clear: both; /* just to make sure it comes below the columns */ 
	position: relative;
	width: 100%;
	height: 3em;
	}

#main, #xtra { /* so that the content will not overlap with the header or footer */
	padding-top: 80px;
	padding-bottom: 3em;
	}

#main {
	position: relative; /* IE float bug workaround */
	float: left;
	width: 100%; 
	margin-right: -1px;
	}

#content {
	position: relative;
	float: right;
	width: 100%;
	margin: 0 -1px;
	}

#nav {
	position: relative;
	float: left;
	width: 200px;
	margin-left: -199px; /* width -1 */
	}

#xtra {
	position: relative;
	float: right;
	width: 200px;
	margin-right: -199px; /* width -1 */
	}
* html #xtra { /* addressing some IE bugs */
	width: 199px; 
	margin-top: 1.7em;
	}
* html #xtra, * html #nav, * html #content {
	overflow:hidden;
	}

/*	Some block elements that influence div sizes and positioning
 */



#footer p {
	text-align: center;
	line-height: 1em;
	padding-top: 1em;
	margin-top: 0; /* otherwise it pushes footer down */
	}

/*	And finally giving block elements inside the columns a default margin.
 *	This prevents the need for a box model hack on all the columns.
 *	If it wasn't for IE, we could do #nav>*,#content>*,#xtra>* { rules }
 */

h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, address { 
	margin: 0px; 
	}