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

body {background: #bfbfbf url(img/mainbg-full.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;
}


body.backgroundeffect #supersized li {filter: blur(5px);}


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

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

.toparea {width: 100%; height:210px; background: url(img/bg50.png); position:absolute; }

.wrapper { /* Holds the page items in place */
	width: 800px;
	min-height:100%;
	margin-left: 10%;
	padding: 0;
	background: rgba(30,30,30,0.9);
}

.menuewrapper {width: 100%; min-width:900px; position:fixed; top:0; left:0; height:120px; background: rgba(0,0,0,0.3); }
.menuewrapper a.logobox {display: block; width: 10%; height:120px; float:left;}
.menuewrapper a.logobox img {max-width:100%; float:left;}

.menuebox {width: 800px; height:120px; margin:0 0 0 0; background: #222; float:left; } 
.footerbox {width: 100%;  height:80px; margin-top: -80px; background: rgba(0,0,0,0.3) }
.innerfooter {width: 780px; margin-left:10%; padding: 10px; height:60px;  background: #7fb200; color: #fff ! important;}
.innerfooter a {color: #fff ! important;}
.footerbox .left {width: 3%; float:left;}
.footerbox  .center {width: 95%; float:right; }
#gototopswitch {float:right; margin:0 10px 0 0;}



/*Bereich Suche + Breadcrumbs */
.subheaderbox {height:8px; margin:0 0 0 0;clear:left;}

.breadcrumbsbox {background-color: #555;  height:22px; padding:5px 10px; margin:0 0 0 0; clear:left;}
.topspacer {width:100%; height:160px; } /*Abstand unterhalb des Menüs */

.contentbox { /* main content */	
	float: left;
	display:inline;
	margin-left: 0;		
	min-height:260px;
}

.contentboxcenter {width:65%; }
.contentboxwide {width:100%;}
.contentbox .inner {margin:0 10px 0 10px;}




.rightbox {
	width: 410px;
	min-height:100px;
	margin-right:-450px;	
	float: right;
	display:inline;
	line-height:120%;
	background: rgba(30,30,30,0.8);
	margin-top:160px;
}

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



.clearcontent {height:80px; clear:both; }




	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


.breadcrumbsbox .innerbc {
	font-size:12px;
	margin:2px 0 0 0;
	width: 100%;
	float:left;
}
.breadcrumbsbox .innerbc span {
	background: transparent url(img/bclink.gif) no-repeat; 
	padding: 6px 2px 0px 12px; font-weight: bold; }
	
.breadcrumbsbox .innerbc a {
	padding:1px;
	text-decoration: none;
}
.breadcrumbsbox .innerbc a:hover {border-bottom: 1px dotted #fff;}
	
.breadcrumbsbox .innerbc .menu-current a{
	color: #fff;
}

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

/* Header menu */	 
.topbox {}
.topbox li {text-align: left; font-weight: normal; margin: 0; padding: 5px 0 0 0; line-height: 1.2em; width: 50%; height: 75px; float:left; list-style-type: none; list-style-image: none;}
.topbox li a {display: block; width: 98%;  height: 70px; margin:0; padding: 0; color: #666;  font-weight: normal; background: #eee url(img/mpic-muster.jpg) no-repeat; text-decoration:none;}
.topbox li a:hover { background-color: #999;  color:#fff; }
.topbox li a  span {display:block; margin: 5px 2px 0 75px; font-size:11px; line-height: 110%; font-style:normal;}
.topbox li a b {display:block; padding:5px 0 2px 0; font-size:12px; }
.topboxclear {height:20px; clear:both;}


#nav {
	float:left;	
	height: 120px;	
	border: 0;	
	padding:0;
	position: relative;
	
}
#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: auto;
	
	list-style-image: none;
	
}

/* Root Level Link Formatting */
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal; list-style-type: none; list-style-image: none;}
#nav ul li a {display: block; padding: 88px 20px 14px 8px; color: #fff; text-decoration: none; font-weight: bold; }
/* Root Level link hover 
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current {background: #7fb200 url(img/navbutton-hi.jpg) right top no-repeat; color: #fff;}
#nav a.menu-parent {background: #7fb200 url(img/navbutton-hi.jpg) right top no-repeat; color: #f5ff84;}
*/
#nav .menu li a.lev0 i {display:none;}

#nav ul li ul {display:none;}
/*Current page Customisations*/
#nav a.menu-current		{} 
#nav .menu .home a {display: block; width:2px; height:30px; background: #7290a7 url(img/home.gif); margin:0; padding:0;}




/* "Megamenu" */
#nav .menu li ul {position: absolute; width: 800px; left:0; margin: -20px 0 0 0px; padding-top:10px; display: none; text-transform: none;  }
#nav .menu li ul div, #nav .menu li ul ol.megablock {position: fixed; width: 800px;  left:10%; background: transparent url(img/nav1outbg.png) repeat-x bottom left;  padding-bottom:100px;}

#nav .menu li ul li {text-align: left; font-weight: normal; margin: 0; padding: 5px 0 0 0; line-height: 1.2em; width: 49.9%; height: 75px; float:left; }

/*Links with pictures*/
#nav .menu li ul li a, .topbox ul li a {

background: #333 url(img/mpic-muster.jpg) no-repeat; 
background-size: 70px 70px;

width: 98%;  height: 70px; margin:0; padding: 0; 
color: #fff;  font-weight: normal; }

#nav .menu li ul li  a span {display:block; margin: 5px 2px 0 75px; font-size:11px; line-height: 120%; font-style:normal;}
#nav .menu li ul li  a b {display:block; padding:5px 0 2px 0; font-size:12px; }


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


/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none; margin: 4px 0 0 -120px; padding-top:0;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover>ul, #nav .menu li li:hover>ul, #nav .menu li.subMenu>ul, #nav .menu li li.subMenu>ul {display: block;  z-index: 1000;}


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


/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}



/* Better: */
#nav li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}


/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* neu by JoMai-2023 für Tooltip */

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 360px;
  background-color: white;
  color: #333333;
  text-align: left;
  padding: 5px 7px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 115%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Ende Tooltip */

/* Login Box */

#showlogin {display:block; float:left; position:relative;  width:30px; text-align:left; margin:0 0 0 0; }
#login-box {position:absolute; width:200px; left:30px; top:-40px; padding:5px; font-size:11px; z-index:2000; background: #333; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}

a.template_edit_link {width:16px; height:16px; position:absolute; top:0; left:0; text-decoration:none; background:url(img/edit.gif) no-repeat; z-index:5000}

.footercredits {font-size:12px; padding:3px 0 0 0;}


/*Extra cookie_permission */
#cookie_permission {position:fixed; top:0; right:0; z-index:9950; width: 200px; padding:10px; background: #555; text-align:center; font-size: 0.9em; line-height:120%; border-radius: 0 0 0 25px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2); }
#cookie_permission p , #cookie_permission a {color:#fff;}
#cookie_permission a.cookieaccepted {color:#000; background: #eeb300; display:block; padding:5px; border-radius: 15px; border: 1px solid #fff; font-weight:bold;}





/*Extra Colorpicker */
#colorpickericon {display:block; width:48px; height:48px; background: url(img/colorpicker.png) no-repeat; z-index:5000; position: absolute; top:100px; right:0; cursor:pointer;}
#colorpicker {display:none; width:90px; background: #333; position: absolute; top:100px; right:0; z-index:5000; font-size:12px;line-height:100%; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}
.pickerfield {width:100%; height:40px; float:left;}

.pickerfield input[type="color"] {width:100%; height:20px; padding:0; border:0; cursor:pointer;}
.pickerfield input[type="text"] {width:90%; height:20px; padding:1px 3%; border: 1px solid #999;; cursor:text;}


a.colpick-button {display:block; clear:both; width:80%; margin:10px auto; padding:3px; background: rgba(255,255,255,0.2); text-align:center; border: 1px solid #666; border-radius: 15px;  cursor:pointer;}
#colorpicker-info {display:none; position: absolute; width:160px; padding:10px; top:0; left:-180px; background: #444; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}




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

.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */







@media print {	
	#supersized, .menuebox {display:none;}	
}




@media screen and (max-width: 1100px) {
	body { background-image: none; }
	.showonmobiles {display:block ! important;}
	.nomobiles {display:none ! important;}
	
	.toparea {display:none ! important;}	
	.menuewrapper {width: 100%; min-width:100%; position:absolute; top:0; left:0;}	
	.rightbox {display:none ! important;}
	
	
	.wrapper, .menuebox, .footerbox, #nav .menu li ul, #nav .menu li ul div    {width: 100%; min-width:100%; margin-left: 0;  margin-right: 0;}
	.innerfooter {width: 96%; margin: 0 0 0 0;  padding: 10px 2% 10px 2%;}
	
	
	.menuewrapper a.logobox {width: 100%; height:110px; }
	
	#nav {height: 80px; overflow-y:hidden;}
	#nav ul li a {padding: 48px 5px 14px 2px; }
	#nav .menu li ul div  {position:fixed; top:170px; left:0; }
	#nav .menu li ul li { width: 49%;}
	.topspacer {height:234px;} /*Abstand unterhalb des Menüs */
	
	
	#supersized {display:none;}

}

/* Smaller Screens */
@media screen and (max-width: 540px) {
	
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 400px) {

	#nav .menu li ul li, .topbox ul li, .topbox ul li a  { width: 100%;}
	#nav .menu li a.lev0 span {font-size:10px;}
	
	
	.contentbox, .contentboxcenter { width:100%;}
	.contentbox .inner {margin:0 10px 0 10px;}
	
	.rightbox  {width: 100%; margin-bottom: 20px; border-bottom:5px dotted #aaa; }
	.rightbox .inner {margin:0 0px 20px 10px;}
	
	



}