body, html {
	background: #989898;
	height:100%;
	min-height:101%;
	margin:0;
}




/*----- boxes -------------------------*/
.wrapper {width:100%; max-width:1200px; min-height:100%; background: #989898 url(img/body-bg.gif) repeat-y; background-size:100% auto;}
.clearer {clear:both; height:1px; width:100%; }

.mainbox {
	padding-top: 50px;
	margin-left:26%;		
}


#leftbox {
	position: fixed;
	width: 250px;
	left: 0px;
	top: 0px;	
	background-color: #bbbbbb;
}




.content1 {
	width:56%;	
	float:left;	
}

.content2 {
	width:43.5%;		
	float:right;	
	color:#ffffff; 
}
.content2 blockquote, .content2 input {	color:#333; }

.innerc1, .innerc2 {padding:10px 4%; }

.content2 img {margin-left:0px; border: 5px solid #ffffff;}


.footerbox {
	width:56%; 
	padding: 10px 0;
	min-height:40px;
	clear:both;
	text-align:center;

}



.logobox {
	max-width:100%;
}

.websitetitle {text-align:right; margin:15px; color:#e9e9e9;}




/*-- Menue Left  -----------*/

.menu {	
	line-height: 120%;
	width: 100%;
}	

.menu ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
	list-style-image: none;	
}


.menu li {	
	padding-bottom: 0;
	list-style-type: none;
	list-style-image: none;
	margin:10px 0 1px 0;		
} 
.menu li.mlev1  { 	margin: 0px 0 2px 0;} 
.menu li.mlev2  { 	margin: 0px 0 1px 0;} 
.menu li.mlev3  { 	margin: 0px 0 1px 0;} 

.menu li a {
	display: block;
	padding: 5px 15px 5px 15px;
	font-size:18px;
	color:#ffffff;	
	text-decoration: none;
	text-align:right;
}


/*-- Weitere Ebenen lev1.. --*/
.menu li.mlev1 a  {font-size:16px; padding: 2px 15px 2px 15px;}
.menu li.mlev2 a {font-size:14px; padding: 1px 15px 1px 15px;}
.menu li.mlev3 a {font-size:12px; padding: 1px 15px 1px 15px;}


.menu li a:hover, .menu li a.menu-current {
	background-color: #a5a5a5;
	background-image: none;	
}

.mobileheader {display:none;}
.mobileheader a.mobilelogo img {float:left; max-width:30%; cursor:pointer;}
.mobileheader .websitetitle {float:left; max-width:60%; margin:5px 2%;}


/* ======================================================================
Smaller Screens */
@media screen and (max-width: 980px) {
	body, html, .wrapper, .mobileheader {background: #c5c5c5;}
	.wrapper {background-image: none; }
	.mainbox { margin-left:0; padding-top:50px;}
	.content1 {background: #e4e4e4; padding-top:20px; overflow: hidden;}
	.content2 {padding-top:20px; overflow: hidden;}
	
	#leftbox {left: -300px; z-index: 5000; top: 80px; width:180px; transition: left 0.5s ease-out; height:80%; overflow:auto;}
	#leftbox.visible  {left: 0; }
	
	#leftbox .websitetitle, #leftbox .logobox {display:none;}
	
	.mobileheader {display:block; position: fixed; width:100%; }
	.XXmobileheader .mobilelogo {float: left;}
	.mobileheader .mobilemenu img {float: right; margin-top:10px; margin-right:10px; cursor: pointer;}
}

/* ======================================================================
Reset */
@media screen and (max-width: 540px) {
	.wrapper {background-image: none; }
	.content1, .content2, .footerbox {float:none; width:100%;  }
	
}