@import url(webfonts/bitter.css);

html, body  {
	height:100%;
	margin:0;
	padding:0;
	color: #333;			
}

body { 
	font-family: 'Bitter', serif;
	font-size: 16px; 
	line-height: 140%;
	
}





.trenner {width:100%; clear:both; height:5px; margin: 10px 0 20px 0; background-color:#eee;}

 
area, usemap {border:0;}
a img {border:0;}


h1, h2, h3, a:link, a:visited {color: #006699;}
/*main color hi */
a:hover, a:active { color: #004e7c;} 


/* basics */
img {max-width:100%; }
a img  { border: 0px;}

p {	margin: 2px 0 5px 0;  }

h1, h2, h3, h4 {
	padding: 0;
	margin: 5px 0 5px 0;
	
	line-height: 120%;
	font-weight: normal;
}


h1 {
	font-size: 2.0em;
	line-height: 100%;	
}

h2 {	
	font-size: 1.4em;		
}


h3 { font-size: 1.2em; margin: 5px 0 0 0; font-weight:bold;}

h4  {
	font-size: 1em;
	margin: 10px 0 5px 0;
}




h5 { font-size: 0.8em;}
h6 { font-size: 0.7em;}



hr{
	border:dotted #666 1px; height:1px;
	clear:both;
}


li {	
	padding-bottom: 4px;		
} 

ul {	
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.6em;
	padding-left: 0.6em;
	list-style-type: square	
}

ol {
	
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;		
}


address {
	line-height:120%;
	margin: 10px 0 20px 0;
	padding-left: 10px;
	border-left: 6px solid #666;
	font-style: normal;
	font-weight: bold;
	}


blockquote  { line-height:140%; font-size:0.90em; background-color: #eee; border: 1px solid #666; margin: 10px 0 20px 0; padding:10px;}
blockquote img { margin: 0 0 0 0;}


pre, code {
	padding: 0 0 20px 6px;
	margin: 3px 0 20px 0;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;	
	border-left: 6px solid #666;
	background: #eee;	

	font-size:1.2em;	
	overflow:auto; 
	line-height:2.2em;	
		
}

input[type="text"], input[type="submit"], textarea, option, select {color: #333; background-color: transparent; border: 1px solid #666;}

/*-----------------------------------------------------------------*/	

/* Standards */

a[href$=".pdf"] {
    background: url(img/pdficon12.png) no-repeat;
    padding-left: 20px;
}

.highlight {background-color:#ffcc00;}

.teaserbutton {
    display: block; clear:both; padding: 5px 10px 5px 10px;  margin: 10px 10px 10px 10px;  text-align: center;  border: 2px solid #ccc;  border-radius: 1.2em; transition: 0.8s all;
	background: rgba(200, 200, 200, 0.5);
}

.teaserbutton:hover {
	background: rgba(50, 50, 50, 0.5); color: #fff;  border-radius: 0.5em;  text-shadow:none;
}

.responsiveVideo, .flex-video {
   position: relative; padding-bottom: 56.25%; padding-top: 30px;  height: 0; overflow: hidden;
}

.responsiveVideo iframe, .flex-video iframe, .responsiveVideo object, .flex-video object, .responsiveVideo embed, .flex-video embed  {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}


editlink {}


table {
	border-collapse:collapse;
	border: none;
}

table.table {
	clear:both;	
	border-collapse:collapse;
	border: none;	
	border-top: 1px solid #666;
	margin: 20px 0 5px 0;
	width:100%;
	font: 0.85em;	
}

table.table caption {font-size:1.1em; text-align:left; }
table.table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;   border: none; border-bottom: 1px solid #999;}
table.table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  border: none; border-bottom: 1px solid #999;}
table.table tbody tr:hover td {background-color:#eee;}
table.table tbody td p, table.table tbody td h1, table.table tbody td h2, table.table tbody td h3, table.table tbody td h4 {margin: 0; line-height:110%;}

.picfull {max-width:100%; height:auto;}
.pic2left {float:left; max-width:48%; margin: 3px 3% 2px 0; height:auto;}
.pic2right {float:right; max-width:48%; margin: 3px 0 2px 0.9%; height:auto;}

.pic3left {float:left; max-width:32%; margin: 3px 1.5% 2px 0; height:auto;}
.pic3right {float:right; max-width:32%; margin: 3px 0 2px 0.3%; height:auto;}

.pic4left {float:left; max-width:24%; margin: 3px 1% 2px 0; height:auto;}
.pic4right {float:right; max-width:24%; margin: 3px 0 2px 0.5%; height:auto;}



/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}	

	



/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	body .hideOnTablets {display: none;}
	.hideOnDesktops {display: block;}
	
	
	

}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	.hideOnMobiles {display: none;}
	body .hideOnTablets {display: block;}
	body .hideOnDesktops {display: block;}
		
	

}


body {background: #cccccc url(img/mainbg.jpg) repeat-x; min-width:100%; }

.innerbox {width:90%; max-width:1300px; 	margin: 0 auto;	}


/* ========================= Header ========================= */
.header{ width:100%; float:left; position:relative; height:180px; overflow:hidden; background: #bbb url(img/headlight.png) no-repeat ; background-size: 60% auto;}
.isstartpage .header {height:280px;}
.header .infobox {position:absolute; top:0px; left: 0; width:100%; overflow:hidden; color:#b6dcf1; }
.header .infobox .inner {	width:96%; margin: 20px auto 0 auto;}
.header .infobox .inner .wstitle a { font-size: 3.1em; line-height: 100%; color:#fff ! important; text-decoration: none; padding:5px 5px 0 0;  text-shadow: 2px 4px 10px #000;}
.header .infobox .inner .pagetitle {font-size: 1.2em; font-weight: bold; line-height: 120%;  padding:5px 5px 10px 0; margin:0;  max-width:50%;  text-shadow: 1px 2px 10px #000;}
.header .infobox .inner .pagedesc {font-size: 0.9em; font-weight: bold; line-height: 120%;  padding:5px 0 10px 0;  max-width:40% ; opacity: 0.7; text-shadow: 0 1px 10px #000;}

.boxes {
	position:absolute; 
	top: 80px; 
	left: 10px; 	
	width:30px;
	height:30px;
	border: 2px solid #ddd;
	opacity: 0.3; 	
	border-radius: 6px;
}

	

#menuswitch {display:none;}

.header, .topmenu a:hover, .topmenu a:focus, .topmenu a:active, .topmenu a.menu-current, .topmenu a.menu-parent { background-color: #006699 ; color:#fff; }


/* ========================= TOP Menu ========================= */

.topmenubox {
	width:100%;
	height:35px;
	background: #004e7c;
	float:left;
}
.topmenuinner {
	width:96%;
	margin: 0 auto;
	background: url(img/navbgl1.gif) no-repeat left 0px; 
}

ul.topmenu, li.topmenu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.topmenu {
	float:left;	
	height: 35px;	
	border: 0;	
	padding:0;
}
.topmenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	list-style-image: none;
}

/* Root Level Link Formatting */
.topmenu ul li {float: left; color: #b6dcf1; text-align: center; font-weight: normal; list-style-type: none; list-style-image: none;}
.topmenu ul li a {display: block; color: #b6dcf1;  background: url(img/navbgl1.gif) no-repeat right 0px; padding: 5px 7px 6px 8px; text-decoration: none; font-weight: bold; }




/* 2nd Child menu */
.topmenu ul li ul {position: absolute; width: 200px; margin: -1px 0 0 0px; padding-top:8px; display: none; display:none; box-shadow: 0 4px 8px #000; background: #004e7c;}
.topmenu li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;  }
.topmenu li ul li a {width: 200px;  height:auto; margin:0; padding: 0; border-top: 1px solid #ccc; font-weight: normal; background: none;}
.topmenu li ul li a span {display:block; padding:4px 0 4px 10px; }

/* 2nd Child link hover */
.topmenu li ul a:hover,  .topmenu li ul a.menu-current, .topmenu li ul a.menu-parent {font-weight: bold;}


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



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

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


.topmenu 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 */
}

/* ========================= Main Content ========================= */



.wrapper {	
	
	background: transparent url(img/contentbg.png) repeat-y;
	background-size: 100% auto;		
}



.innerwrap {	
	width:100%;
	margin: 0 auto;
	overflow:hidden;

}


.breadcrumbsbox {height:40px; clear:both; background: transparent url(img/border.png) repeat-x ;}
.breadcrumbs {margin-left: 24%; padding:10px 5px 4px 0px; clear:both;}







.search_box {float:right;  width:140px; text-align:right; margin-top:0px; }
.search_box .searchstring {	
	width:80px;
	font-size:12px;
	padding:2px;
}
.search_box .submitbutton {
	vertical-align: top; margin:2px 0 0 0; 
}

#showlogin {display:block; float:right; position:relative; text-align:right; margin-top:0px; }
#login-box {
	position:absolute;
	width:200px;
	left:-200px;
	top:25px;
	padding:10px;
	font-size:11px;
	background:transparent url(img/bg75.png);
	z-index: 5000;
}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}
.printbutton  {display:block; float:right; margin: -2px 0 0 8px;; }





/* ========================= Left menu========================= */


#leftbox {
	clear:left;
	float:left;

	margin: 0 0 0 0;	
	width:21.9%;
	min-height:120px;
	
}


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

#leftmenu {
	line-height: 120%;
	min-height: 1px;
}	



#leftmenu a:link, #leftmenu  a:visited
{
text-decoration: none;
}

#leftmenu a {
	display: block;
	padding: 8px 0px 8px 30px;	
	text-decoration: none;
	font-weight:bold;
	font-size:12px;
	line-height:100%;
	color: #006699;
	border-bottom:1px solid #bbb;		
}




#leftmenu a:hover, #leftmenu a.menu-current, #leftmenu li a.menu-parent {
	background: transparent url(img/glitzer.png) no-repeat right bottom;
}
#leftmenu  a.menu-current {text-shadow: 2px 2px  6px #999; }

#leftmenu  a.lev0 {font-size:16px; padding: 12px 0px 10px 10px; display:none;}
#leftmenu a.lev1 {font-size:14px; padding: 10px 0px 9px 20px;}


/* ========================= Content ========================= */


.contentwrapper {	float:right; width:78.1%;	min-height:220px; }

.contentbox, .contentboxwide {
	float:left;	
		
	min-height:220px;
	padding:0;
	margin-left:2%;
	margin-top:10px;
}

.contentbox { 	width:70%; }
.contentboxwide {width:96%; }
.contentbox3, .contentbox4 {clear:both;}

.sidebarbox {
	float:right;
	margin: 15px 0 0 0;	
	width:25%;
	border-left: 1px solid #ccc;
	font-size:0.9em;
	line-height:130%;
}

.sidebarbox .inner{	
	margin: 0 5% 0 2%;
}

.block_5, .zitate {padding: 0 5%;}

.zitate {
	text-align:center;
	font-size: 11px;
	font-style: italic;
	color: #006699;
}
.zitate #zufallstext {font-size: 14px;}


/*-- footer  -----------*/

.clearfooter {width: 100%; height:50px; clear:both;}

.footer {	
	width:100%;
	height:200px;
	margin:0 auto 0 auto;
	color: #006699;
	text-align:center;
	font-size:12px;
	padding-top:6px;
	position:relative;
	overflow:hidden;
	background: #999999 url(img/border.png) repeat-x ;

}
.footer a {color: #000 ! important; text-decoration:none;}
.footer #footerboxes {width:80%; height:60px; position:relative;  opacity: 0.4; }
.footer .innerbox {position:relative; }



#editthis {padding: 2px 15px; width: 170px; margin-left: 3px; font-size:10px;}	
#editthis a { text-decoration: none; color: #006699}




.search_box {margin:5px 0 0 0; width:130px;}
.search_box .searchstring {
	margin:0 0 0 0;
	width:100px;
	border: 1px solid #ccc;
	color: #f1f1f1;
	background-color: transparent;
	font-size:12px;
	padding:2px 0 0 2px;
}
.search_box .submitbutton { vertical-align: top; margin:0 0 0 0; }

.printbutton { margin:2px 0 0 5px; }


/* Login Box */
#showlogin {display: block; margin: 2px 0 0 1px;}
#login-box { margin-top:3px; padding:10px; border-top: 2px #fff solid; font-size: 10px; color: #fff ! important;}
#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #ccc;
	background-color: transparent;
	width:100%;
	color: #f1f1f1;	
}
#login-box .loginsubmit { float:right;}
#login-box a {color: #fff ! important;}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	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 */



/* ================================================================================================= */
/* Bigger Screens */
@media screen and (min-width: 1600px) {
	.header{ height:280px; }
}


/* Smaller Screens */
@media screen and (max-width: 1200px) {
	.innerbox {width:100%; }
		
}

@media screen and (max-width: 1100px) {
	.innerbox {width:100%; }
	.header .infobox .inner .pagetitle, .header .infobox .inner .pagedesc  {padding:2px; max-width: 70%;}	
}

/* Smaller Screens */
@media screen and (max-width: 720px) {
	body {
		background: #fff url(img/mainbgmobile.jpg) repeat-x;	
		font-size:0.95em;
		min-width:300px;
	}
	.wrapper, .innerwrap { background-color: transparent; background-image: none; width:100%; margin: 0 0 0 0;}
	.innerwrap {overflow:hidden;}
	.contentwrapper {float:none; width:100%;}
	
	#showlogin, .printbutton, .topmenubox, .block_5, .zitate  {display:none;}
	.showonmobiles {display:block ! important;}
	
	.sidebarbox, .contentbox, .contentboxwide {width:92%; margin: 0 0 0 4%; float:left; background-image: none;}
	.sidebarbox { border-left: none; }
	.sidebarbox .inner{ margin: 0 0 0 0; }
	
	.footer { width:100%; margin: 0 0 0 0;}
	

	.header .infobox {left:2%; width: 80%;}
	.header .infobox .inner .wstitle a {font-size:24px; line-height:100%; margin:0; padding:2px;}
	.header .infobox .inner .pagetitle {font-size:12px; line-height:100%; padding:2px;}
	.header .infobox .inner .pagedesc {display:none;}
	
	.breadcrumbs {margin-left: 2%; }
	.breadcrumbs a {color: #fff ! important; }
	
	
	
	#menuswitch {display:block; position:absolute; top:20px; right: 3%; width:60px; height:60px; }
	
	#leftbox {
		position:absolute; 
		top: 80px; 
		left: 10px; 
		z-index: 2000;
		display:none;
		background-color: #ccc;
		background-image: none;		
		width:280px;
		box-shadow: 2px 4px 5px #000;
		border-radius: 20px;
	}
	
	#leftmenu  a.lev0 {display:block;}
	#leftmenu ul {margin-bottom:15px; }
	
	
	
	
	#suggestbox ul {width: 300px; margin: -1px 0 0 -160px;}
	#suggestbox ul li a {
		font-size:1.0em;
		padding: 10px 3px 10px 5px; 
	}
	
	#menu {min-height:200px; }
	#menu li a {
		font-size:1.4em;
		display: block;
		padding: 15px 0px 12px 30px;
	}
	#menu li li a {
		font-size:1.1em;
		padding: 12px 0px 10px 40px;	
	}
	#menu li li li a {
		font-size:1.0em;
		padding: 12px 0px 10px 50px;	
	}
	
	/*Main MEnu for Mobiles only */
	.startmenu {display:block; float:left; max-width:720px; min-width:300px; text-align:left; margin-top:20px; margin-left: 0;}
	.startmenu a {
		font-size:22px; 
		line-height:22px;
		/*word-break: break-all; */
		margin: 0 0 20px 4%;	
		font-family: 'Yanone Kaffeesatz', sans-serif;
		
		display:block; 
		position: relative; 
		float: left; 
		width: 20%; 
		max-width:96px; 
		height:auto; 
		overflow:hidden; 
		text-decoration:none; 
		color:#fff; 
		background-color: #3366cc;		
		border-radius: 10px;		
		box-shadow: 0 4px 5px #000;
		opacity: 0.8;		
	}
	
	.startmenu a img {margin:0; float:left; opacity: 0.5; }
	
	.startmenu a:hover img, .startmenu a.menu-current img { opacity: 1; }
	
	.startmenu a:hover, .startmenu a.menu-current {	
		text-decoration:none; 		
		box-shadow: 0 1px 8px #000;	
		opacity: 1; 
	}
	.startmenu a span.mtitle {
		display:block; 	
		position: absolute;
		top:20%; left: 0px; 
		margin-left:2px; 
		cursor:pointer;
		text-shadow: 2px 2px  5px #000;
	}
	
	.footer #footerboxes {
    	width: 100%;
    	height: 60px;
	}
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 400px) {
	.startmenu a {
		font-size:18px; 
		line-height:16px;	
	}
	
	.startmenu a span.mtitle {
		top:10px; left: 0px; 
		margin-left:1px; 
	}
	
	
	h1 {font-size: 1.6em; }
	h2 {	font-size: 1.4em; }
	h3 {	font-size: 1.2em; }
	.header{height:120px;}
	.isstartpage .header {height:180px;}


}