html {
	height:100%;
}

body {
	margin: 0;
	padding: 0; 
	height:100%;
	color:#333;	
	background: #fff XXurl(img/p3.jpg) repeat fixed;
}

.wrapper {
	max-width: 1200px;
    width: 100%;
    margin: 0 auto;
	background: #fff; 
	position:relative;
	box-shadow:  0px 5px 10px 0px rgba(50, 50, 50, 0.2);
	border-radius: 20px 0 20px 0; 
}

#topmenubar2container { width: 100%; position: fixed; top: -60px; left: 0; }
#topmenubar2 { max-width: 100%; width: 90%; margin: 0 auto; }
#topmenubar2container.isvisible { top: 0; transition: 0.5s top; }

.header, .footer { width: 100%; position: relative; border-radius: 0 20px 20px 0; }
.header { position: relative; float: left; width: 100%; margin: 0 0 0 0; }
.footer { height: 120px; border-radius: 0 0 20px 20px; clear:both; }

.logopic {
  /* max-width: 60%; */
  width: 345px;
  height: 389px;
  position: absolute;
  top: 40px;
  right: 0px;
}

@media only screen and (max-width: 768px) {
	.logopic {
		/* max-width: 60%; */
		max-width: 35%;
		height: auto;
		position: absolute;
		top: 45px;
		right: -20px;
	}
}

/*
##################################################
Beginn Hintergrund-Header für die Unterseiten
##################################################
*/
.innerheader {
	height: 250px;
	width: 100%;
	background: #fff url(header/header-seiten--1200x250.jpg) no-repeat center center;
}
/*
##################################################
ENDE Hintergrund-Header für die Unterseiten
##################################################
*/

.topmenubar { clear: both; margin-bottom: 3px; border-radius: 0 20px 20px 0; }

.contentbox { width: 100%; float:left; }
.contentbox .inner { min-height: 330px; margin: 15px 1% 20px 4%; }
.contentbox .inner p img { max-width: 100%; height: auto ! important; }

.contentboxwide { width: 100% ! important; }
.contentboxwide .inner { margin: 15px 2% 20px 2%; }

.rightbox { width: 48%; float: right; }
.rightbox .inner { margin: 15px 4% 20px 1%; }
.rightbox .inner p img { max-width: 100%; height: auto ! important; }

.footer .inner { position: absolute; top: 10px; width: 100%; font-size: 0.8em; padding: 10px 0; text-align: center; line-height: 110%; color: #fff ! important; border-radius: 0 20px 20px 0; background-color: #663300; }
.footer .inner span { font-size: 0.7em; }
.footer .inner a { color: #fff ! important; }

.flex-direction-nav { display: none; }
.flexslider { margin: 0 0 0 0 ! important; }

/***********************************
	menu
************************************/
div#mobilemenu {
    display: none;   
}
div#mobilemenu span {
	display: block;
	padding: 10px 15px;
	font-weight: bold;
}

.search_box { float: right; width: auto; text-align: right; margin-top: 9px; margin-right: 20px; color: #fff; }
.search_box .searchstring {
	width: 90px;	
	font-size: 14px;
	padding: 5px 2px 3px 2px;
	border:  #fff 2px solid; 
	background: rgba(255, 255, 255, 0.7);
}

.search_box .submitbutton {
	vertical-align: top; margin: 0 9px 0 2px; background: none; border: none;
}

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

/* Link Formatting */
ul.nav, ul.extramenu { 
	list-style-type: none;
	/* *zoom: 1; */
	margin: 0;
	padding: 0;
	position: relative;
}

ul.nav li {
	float: left; 
	list-style-type: none;
	list-style-image: none;
	position: relative;  	
	margin: 0;
	padding: 0;
	border-right: 3px solid #fff;
}

.nav li a {
	display: block; 	
	text-decoration: none;
	line-height:120%;
	/*text-shadow: 1px 1px 1px #000;*/
	padding: 10px 10px;
    color:#fff;
}

/* Hover Formatting */
.nav li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {
	 XXbackground-color: #9e8d7b;
	 color: #fff;
}

/* 2 level */
.nav li ul {
    display: none;
    width: 15em; 
    margin: 0;
	padding:0;
    position: absolute;
	box-shadow: 0 10px 40px #666;
}

.nav li ul li {
	width: 15em; 
	text-align: left; 
	margin: 0; 
	padding: 0;
	/* border-top: 1px solid #cdc2b6; */
	border-right: none;
	/* background-color:#9e8d7b; */
}
.nav li ul li a {	
    color: #fff;
	padding: 6px 10px;
}

/* 2 level hover 
.nav li ul a:hover,  .nav li ul a.menu-current { background-color: #cdc2b6;  color: #000;}
*/

/* Show and hide */
.nav li:hover ul, .nav li a:focus ul { display: block; }
.nav li ul ul { display: none; }
.nav li:hover ul ul { display: none; }
.nav li:hover>ul, .nav  li li:hover>ul { display: block; z-index: 1000; }

/* 3 Ebene  */
.nav li ul li ul { 
	margin: -20px 0 0 70%; 
	padding: 0;
	z-index: 9999;  
	display: none;
	width: 11em; 
}
.nav li ul li ul li	{ width: 11em; }

/* Positioning hover */
.nav li { position: relative; }
.nav li:hover {
	z-index: 10000;	
	white-space: normal;					
}

/*Flexslider */
div.flex-viewport ol.flex-control-nav {
	bottom: 10px ! important; 
}

/*==================================================================================================*/

/*Topic Sidebar:*/
.mod_topic_prevnext div { clear: left; font-size: 11px; margin-top: 20px; }

.mod_topic_prevnext a.videoblock {
	display: block;
	float: left;
	width: 100px;
	max-width: 50%;
	height: 60px;
	overflow: hidden;
	margin: 0 5px 0 0;
	background: #000;
}

.mod_topic_prevnext a.videoblock img {
	width: 100%;
	height: auto;
	opacity: 0.8;
}

.mod_topic_prevnext a:hover.videoblock img {
	width: 130% ! important;
	height: auto;
	margin-left: -15% ! important;
	margin-top: -5px ! important;
	opacity: 1;
}

.flexslider {}
.flexslider li { XXmargin: 0 ! important; padding: 0; }

.mobiles_only { display: none; }
.desktops_only {}

.mod_topic_commentbox {
	background: transparent;
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 1024px) {
	.wrapper { 
		width: 100%;
		margin: 0 auto;
		box-shadow: none;
		border-radius: 0 0 0 0;
	}
	#topmenubar2 {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.mobiles_only { display: block; }
	.desktops_only { display: none; }
	.search_box { margin-top: -30px; }
	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.container { width: 100%; border-left: none; border-right: none; }
	.mainbox { margin: 20px 0 20px 0; }
	.contentbox { width: 100%; margin: 20px 0 20px 0; }
	.rightbox { width: 100%; margin: 20px 0 20px 0; }	
	.footer { width: 100%; }
	.contentbox .inner { margin: 10px; }
	.rightbox .inner { margin: 10px; }
	/* .header {height:160px; background: #fff url(/assets/img/slide1.jpg) no-repeat center center; overflow: hidden; } */	 
	.header {
		height: 100%;
		/*
		background: #fff url(/assets/img/slide1.jpg) no-repeat center center;
		overflow: hidden;
		*/
	}	 
	/* .flexslider { display: none; } */
	
	#topmenubar1 { height: 30px; display: none; }
	#topmenubar2container { display: none; }
	div#mobilemenu {
		display: block;
		color: #fff;
		width: 100%;
		clear: both;
		font-size: 16px;
		border-radius: 0 20px 0 0;
	}
	
	ul.nav { max-width: 260px; position: absolute; left: 0; z-index: 2000; }
	ul.nav ul, u.nav ul ul { width: 100% ! important; position: static; margin: 0 0 0 0 ! important; }
	ul.nav ul {}
	ul.nav li ul { display: block ! important; }
	ul.nav li, ul.nav li li, ul.nav li li li {
		width: 100% ! important;
		float: left;
		border-right: none; 	
		display: block;
		border-bottom: 1px solid #fff;
		background-color: #663300;	
	}
	ul.nav li.menu-parent > ul, ul.nav li.menu-current > ul { display: block }
	ul.nav a { padding: 10px 5px; color: #fff; }
	/*ul.nav a.menu-current { background-color: #cc9933; }*/
	
	.tp_picture { max-width: 40%; }
	.tp_picture .tp_pic { max-width: 100%; }
	
	.frontteaserblock div a { width: 49%; }
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 440px) {
	.wrapper { width: 100%; }
	.frontteaserblock div { width:100%; }
	.frontteaserblock div a { float: none; width: 100%; clear: left; height: auto ! important; clear: both; border: none; }
	.frontteaserblock div .row1 {}
	.frontteaserblock div a .mt_title { height: auto; margin-bottom: 20px; }
}