/*----------------------------------------------------------------------------------------------------*\
	L A Y O U T

		clearfix
		background
		wrapper
		columns
		gaps
\*----------------------------------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------------------------------*\
	claerfix
\*----------------------------------------------------------------------------------------------------*/


header,
#navlist,
#middle,
#content,
article,
.sidebar,
footer {
	overflow: auto;
	}

#navbar:after { /* navbar needs this trick for hovering submenus */
	content:"";
	display:table;
	clear:both;
	}





/*----------------------------------------------------------------------------------------------------*\
	background
\*----------------------------------------------------------------------------------------------------*/


/*
#bg {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
*/





/*----------------------------------------------------------------------------------------------------*\
	wrapper
\*----------------------------------------------------------------------------------------------------*/


body { padding: 0 6em; } /* margins for wrapper */


#wrapper { 
	margin: 0 auto; /* position of wrapper */
	max-width: 80em; /* width of wrapper */
	min-height: 100%;
	}





/*----------------------------------------------------------------------------------------------------*\
	columns
\*----------------------------------------------------------------------------------------------------*/


header, 
#middle, 
footer { 
	clear: both; 
	width: 100%; 
	}


/* width of main column and sidebar - total = 100% */
#content { width: 100%; }

/* old browser */
.multicolumn #content { width: 66.66%; }
.sidebar { width: 33.33%; }

/* modern */
.multicolumn #content { 	width: calc(100% - 	20em); }
.sidebar { 					width: calc(0% + 	20em); }


/* floating of main column and sidebar */
#content { 
	float: left;
	clear: left;
	}
.sidebar {
	clear: right;
	float: right;
	}





/*----------------------------------------------------------------------------------------------------*\
	gaps
\*----------------------------------------------------------------------------------------------------*/
/* line-height: 1.5em */


/* main areas */
/* header { padding: 3em; } */


#middle {
	padding-top: 3em;
	}


footer {
	padding-top: 3em;
	padding-left: 3em;
	}


/* floating modules */
#content > * { 
	margin-bottom: 3em; 
	margin-right: 3em;
	}


/* full widgets */
.sidebar { padding: 0 !important; }
.widget { 
	padding: 1.5em 3em !important;
	margin: 0 !important;
	}



/* padding for floating modules */
#content > *,
.sidebar > *,
footer > * { 
	padding: 1.5em;
	}
/* existing bottom-margin of content elements inside article (p, h1 ...)*/
#content > *{
	margin-left: 3em;
	padding-bottom: 0em;
	}