html, body { 	
	margin: 0; padding: 0;
	height:101%;
	color: #eee;
}

body {
	/*background: #1f1f1f url(img/bodybg.jpg) no-repeat fixed;*/
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}


.clearer {clear:both; width:100%; height:10px;}

.boxshadow { box-shadow: 5px 5px 2px -1px #000, 10px 10px 5px -2px #222, 15px 15px 8px -3px #444;}
.boxshadow-dark {box-shadow: 5px 5px 2px -1px #000, 10px 10px 5px -2px #111, 15px 15px 8px -3px #222;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.wrapper { /* Holds the page items in place */
	min-height:100%;
	padding: 0;
	max-width:1400px;
	margin:0 auto;
	background: rgba(0,0,0,0.2);
}


.menuewrapper {width: 100%; min-width:980px; top:0; left:0; background: rgba(250,250,250,0.5); }
.menuewrapper a.logobox {display: block; width: 300px; margin: 20px 0 0 16px; height:120px; float:left; color:#fff ! important; text-decoration:none; line-height:100%;}
.menuewrapper a.logobox img {}

.footerbox {width: 100%;  clear:both; height:100px; background-color: rgba(255, 255, 255, 0.5);   }
.innerfooter {margin-left:300px; padding: 10px;  color: #fff ! important;}


.contentwrapper { margin-top: 20px; }



.leftbox {	
	width: 300px;
	min-height:100px;
	position:absolute;
	line-height:120%;
	background: #444;	
}

.leftbox .inner { margin: 10px 10px 0 10px;}


.contentbox { /* main content */
	margin: 0 5% 0 320px;	
	min-height:560px;
	background-color: rgba(255, 255, 255, 0.125);
}

.contentboxwide { margin: 0 5% 0 5%;}
.contentbox .inner {margin:0 10px 0 10px;}
.clearcontent {height:80px; clear:both; }




/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
ul.menu, li.menu, #leftmenue ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}


/* #nav*/
.menu {
	float:left;	
	border: 0;	
	padding:0;
	position: relative;
	
}
.menu ul, .menu ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	width: auto;
}
/* Root Level Link Formatting */
.menu ul li {float: left; text-align: center;  }
.menu ul li a {display: block; padding:  20px 0 0 0; height:130px; width: 130px; text-align:center; color: #999; text-decoration: none; line-height:100%;  }
.menu ul li a span.mpiclev0 {display: block; width:100px; height:100px; margin:0 auto 5px auto;  transition: all 0.5s;}

/* Root Level link hover */
.menu ul li a:hover span.mpiclev0 {margin:-10px auto 15px auto;  transition: all 0.5s;}
.menu ul li a:hover, .menu li a:focus, .menu li a:active, .menu ul li a.active, .menu a.menu-current, .menu a.menu-parent {color: #fff;}


/*Current page Customisations*/

.menu .home a {display: block; width:2px; height:30px; background: #7290a7 url(img/home.gif); margin:0; padding:0;}




/* 2nd Child menu */
.menu li ul {position: absolute; width: 300px; left:0; margin: -800px  0 0 16px; opacity:0.01; transition: all 0.5s; text-transform: none;  background: #444; box-shadow: 0px 10px 50px 0 rgba(0,0,0,1);
}
.menu li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em; width: 100%; height: 70px; float:left; border-bottom: 1px solid #333; display:table;}
.menu li ul li a {width: 100%;  height: 70px; margin:0; padding: 0; color: #999;  text-align:left;  font-weight: normal; background: #444 url(img/mpic-muster.jpg) no-repeat;}

.menu li ul li  a span {display:block; padding: 0px 2px 0 110px; font-size:11px; line-height: 110%; font-style:normal; height: 70px; display:table-cell; vertical-align:middle;}
.menu li ul li  a b {display:block; padding:5px 0 2px 0; font-size:14px; }


/* 2nd Child link hover */
.menu li ul a:hover,  .menu li ul a.menu-current, .menu li ul a.menu-parent { background-color: #999;  color:#fff; }


/* Show and hide */
.menu li:hover ul, .menu li a:focus ul, .menu li.subMenu ul {margin: -30px 0 0 16px; opacity:1; transition: all 0.5s;}
.menu li ul ul { display: none; margin: 4px 0 0 -120px; padding-top:0;}
.menu li:hover ul ul, .menu li.subMenu ul ul {display: none;}
.menu li:hover>ul, .menu li li:hover>ul, .menu li.subMenu>ul, .menu li li.subMenu>ul {display: block; opacity:1; z-index: 1000;}


.menu li ul li ul {display: none ! important;}


/* Positioning the Pop-out Drops */
.menu li {position: relative;}

.menu ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}




/* end menu */
#leftmenue {display:none;}
#leftmenue a {display:block; padding:15px 0 10px 10px; border-bottom: 1px solid #666; font-size:16px;}



/* Login Box */

#showlogin {display: block; margin: 20px 0 0 10px;}
#login-box { margin-top:30px; padding:10px; border-top: 2px #505567 solid; font-size: 10px;}
#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #505567;
	background-color: #f2f3f8;
	width:100%;	
}
#login-box .loginsubmit { float:right;}


/*Seminare und Zeugs*/
a.iframeedit, a.sidebaredit { padding: 3px 6px 4px 10px; background: #fff url(img/edit.gif) no-repeat 5px 5px; left: 3px;}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
	height: 1%;
}
#menucheck {display:block;}


/*Responsive*/
@media(max-width:1024px){

	.menuewrapper, .contentwrapper {position:static; min-width:100%; height:auto; clear:left;}	
	.contentbox { margin: 0 5% 0 210px;}
	.contentboxwide { margin: 0 5% 0 5%;}
	.leftbox {width: 200px; font-size:0.8em;}
	.innerfooter {margin-left:0;}
	#leftmenue {display:block;}
	#menucheck {display:none;}
	
	.menu li {position: static;}
	.menu li ul {position:absolute; left:0; top:0; display:none; opacity:1; transition: all 0.5s;}
	/* Show and hide */
	.menu li:hover ul, .menu li a:focus ul, .menu li.subMenu ul {margin: 0px 0 0 16px; display:none; transition: all 0.5s;}
	.menu li ul ul { display: none; margin: 4px 0 0 0; padding-top:0;}
	.menu li:hover ul ul, .menu li.subMenu ul ul {display: none;}
	.menu li:hover>ul, .menu li li:hover>ul, .menu li.subMenu>ul, .menu li li.subMenu>ul {display: none; opacity:1; z-index: 1000;}
	
	.menu li.isopened ul {display: block;}

}

@media(max-width:540px){	
	.leftbox, .contentbox { margin: 0 3% 40px 3%; width: 94%; position:static; }
	.leftbox {font-size:1em;}
	.menu ul li a {width: 100px; }
	
}