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

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





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


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

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





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


#bg1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 10em;
	}
#bg2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 10.5em;
	}
.startseite #bg1 { height: 20em; }
.startseite #bg2 { height: 20.5em; }


#bg1 { z-index: -1; }
#bg2 { z-index: -2; }





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


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


header,
#wrapper { 
	margin: 0 auto; /* position of wrapper */
	max-width: 80em; /* width of wrapper */
	}





/*----------------------------------------------------------------------------------------------------*\
	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 */
#middle {
	padding-top: 3em;
	padding-left: 3em;
	}


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


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


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

#sidebarbottom { margin-bottom: 3em; }


#content { margin-bottom: 3em; }
#navbar { padding-bottom: 3em; }