/* Kleine Monitore */
body { margin: 0; padding: 0; color: hsl(0,0%,48%); font-size: 1.2em; font-family: Helvetica, sans-serif;}
img { width: 100%; height: auto; }
.reframe { max-width: 96%; margin: 0 auto; }
#topline { background: black; color: white; }
#topline p { margin: 0; padding:0 0 20px 0; font-size: 1.6em; text-align: center; line-height: 100%; }

ul#mainmenu { 
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack:justify;
	justify-content: space-between;
	margin-left: 0; 
	padding-left: 0; 
	list-style-type: none}

ul#mainmenu li { 
	position: relative;
   width: 48%;
   font-size:0.92em;
   background: green; 
   margin-right: 1px; 
   margin-bottom:1ex }

ul#mainmenu li a { 
   display:block; padding: 10px; text-decoration: none; color: white; }
   
ul#mainmenu ul li { 
   background: none; margin-top: 0; display: block; margin-bottom: 1px; }

ul#mainmenu li:hover ul { 
   display: block; }
   
ul#mainmenu ul { 
   background: rgba(0,0,0,0.8); 
   position: absolute; right:0; padding-left: 0; width: 200%; 
   display: none; 
   z-index:100; }
   
#sidebar ul { list-style-type:none; padding-left: 1ex }
#sidebar ul ul { margin-top: 1em }
#sidebar li { margin-bottom: 1ex; border-bottom: 1px dotted gainsboro}
#sidebar li li { border-bottom:none}

#home { background: lightgreen; color:white; padding: 10px; text-align: center; font-weight: bold; cursor: pointer }
footer { background: green; height: 100px; color: white; padding-top:10px; font-size: 0.7em }

/* Tabletts */
@media only screen and (min-width: 760px) {
	#topline { background: plum; height: 30px; }
	.reframe { max-width: 760px; }
	
	ul#mainmenu { 
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	ul#mainmenu li { 
	width: 24%
	}
   
	#main {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
	}
	
	#content, #sidebar { width: 47% }

	#content article { width: 100%; float:none; }
}

/* Mittlere Größe */
@media only screen and (min-width: 980px)  {
	#topline { background: orangered; }
	.reframe { max-width: 980px; }
	#content{ width: 65% }
	#sidebar { width: 30% }
	
	#content {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	#content article {
		width: 48%;
	}
	
	#content header {
		height:2.8em;
	}
}

/* Große Monitore */
@media only screen and (min-width: 1280px)  {
	#topline { background: gold; }
	.reframe { max-width: 1280px; }
	#content{ width: 68% }
	#sidebar { width: 28% }
	
	#content article {
		width: 48%;
	}
	
	#content header {
		height:2.8em;
	}
}