/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

body { 
	font-family:'Open Sans', Arial, sans-serif;
	font-size: 14px;
	line-height:130%;
	color:#000;
}


/* colors */ 
h1, h2, a { color: #194381;  text-shadow: 0px 1px 8px #aaa;}
a.menu-current { color: #305d9e ! important;  text-shadow: 0px 1px 8px #aaa;}
h3, h4, h5, h6 { color: #305d9e;  text-shadow: 0px 1px 5px #aaa;}
a:hover {color: #0055d3; text-shadow: 0px 1px 3px #000;	transition:0.5s all;} 

/* basics */ 
area, usemap, a img  {border:0;}
a { text-decoration: none; 	transition:0.5s all;}
p img {max-width:100% ! important; height:auto;}

/*sizes and margins */
h1, h2, h3, h4 { margin: 15px 0 2px 0; }
h5, h6 { margin: 0 0 0 0; }

p {line-height:150%; margin: 5px 0 2px 0;}


h3, h4{ }
h1 { font-size: 36px; line-height:90%; font-weight:300; } 
h2 { font-size: 24px;  font-weight:400;} 
h3 { font-size: 16px; } 
h4 { } 
h5 { font-size: 12px; }
h6 { font-size: 11px; }




hr{
	border: none; border-top:dotted #999 1px;
	clear:both;
}


li {	
	padding-bottom: 4px;		
} 

ul {	
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.7em;
	padding-left: 0.7em;
	XXlist-style-image: url(img/li.gif);
	list-style-type: square	
}



ol {	
	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 #327893;
	font-style: normal;
	font-weight: bold;
	}


blockquote {	
	padding: 10px;
	margin: 0 0 20px 0;
}

pre, code {
	padding: 5px 0 10px 6px;
	margin: 3px 0 20px 0;	
	font-size:1em;	
	overflow:auto; 
	line-height:1.5em;
	color:#fff;		
}

table {	
	border-collapse:collapse;	
	border-top: 1px solid #777;
	margin-top: 3px;
	margin-bottom:5px;
	width:100%;
	font: 0.9em;	
}
table caption {font-size:1.1em; text-align:left; }
table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;  border-bottom: 1px solid #666;}
table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  border-bottom: 1px solid #666;}
table tbody tr:hover td {background-color:#fff;}
tbody td p, tbody td h1, tbody td h2, tbody td h3, tbody td h4 {margin: 0; line-height:110%;}

input , textarea, pre, code, blockquote {
	border: 1px solid #194381; background: #eee; color: #194381;
}


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

/* Specials */
p img[align="right"], h3 img[align="right"] { float:right; margin: 4px 0 5px 2%; max-width:49%;}
p img[align="left"], h3 img[align="left"] { float:left; margin: 4px 2% 5px 0; max-width:49%;}


html, body {height:100%; }
body {
	margin:0;
	padding:0;	
	color:#777;	
	background:  url(pics/dorn.png) fixed right top;	
        background-repeat: no-repeat;
}



/*----- boxes -------------------------*/

#picturebox {width:100%; max-width:1600px; height:100%;  position:fixed; }
#picturebox .inner {margin: 0 0 0 55%; width:45%; height:100%; box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.3);}
#picturebox .inner img {width:100%; }

.wrapper  { min-height:100%; width:100%; max-width:1600px; position:relative; top:0; left:0; z-index:500;}
#menubox, .contentbox, #rightbox, .rightborderbox  {min-height:100%; position:absolute; top:0;}

#menubox {left:0; width:15%; position:absolute;}

.contentbox {left:10%; width:80%;  background: #eee url(pics/mainbg-repeat.jpg) ; border-right:2px solid #fff; border-left:1px solid #fff; box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.1);}
.topspacer {width:100%; padding-top: 15%;}
.contentbox .inner {padding: 0 3% 50px 3%; background: transparent	 url(pics/glitzi.png) no-repeat right top; min-height:500px;}

#rightbox {display:none; left:54.8%; top:120px; width:15%; min-width:260px; background: transparent url(pics/bg75.png) ; min-height:200px;  box-shadow: 5px 10px 10px 0px rgba(0, 0, 0, 0.4);}
#rightbox .inner {padding: 5px 3% 5px 6%; }
#rightboxopener {display:block; position:absolute; left:54%; top:120px; width:18px; height:100px; }
#rightboxopener img {width:100%;}


#footer {height:0px; width:100%; max-width:1600px; position: fixed; left:0; bottom:0; }
#footer .inner {height:50px; float:right; width:45%; margin-top:-50px;  background: #eee url(pics/mainbg-repeat.jpg) ; }
#footer .innerinner {padding: 5px 0 0 10px; }
#footermobile {display:none; border-top: 10px dotted #999; padding-top:20px;} 

.clearer {clear:both;width:100%; }


#header   { width: 90%; min-height: 160px; padding:10px 5% 40px 5%; text-align:right; }
#header a.logopic img  {max-width:100%;}
#header .infobox {}
#header .infobox h1, .header .infobox h1 a {font-size:1.2em; line-height:120%; font-weight:normal; margin:0; color:#777 ! important;}
#header .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; color:#777;}
#header .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; color:#777;}

#headermobile {display:none;}


#menu {	
	margin: 0 0px 0 0px;
	text-align:right;
	z-index: 1000;
}


#menu ul, #menu li {
	list-style-image: none;
	list-style-type: none;
	margin:0;
	padding:0;
}

#menu ul {padding-bottom:20px;}


#menu li a {
	display:block;	
	color: #444;
	text-decoration: none;
	margin: 0 0 0 0;
	padding:10px 5% 6px 5%;	
	text-shadow: 0px 4px 4px #aaa;
	font-size:16px; 
	line-height:110%;	
	border-top: 1px solid transparent; border-bottom: 1px solid #transparent;
}

#menu li li a  {font-size:14px;  padding:6px 10% 6px 5%;}
#menu li li li a  {font-size:12px;  padding:5px 15% 5px 5%;}
#menu li li li li a  {font-size:12px;  padding:5px 20% 5px 5%;}


#menu ul li a:hover, #menu ul li a.menu-parent, #menu a.menu-current {color: #fff ! important; text-shadow: 0px 2px 4px #000; background-color: #333; }
#menu a.menu-current {border-top: 1px solid #666; border-bottom: 1px solid #666;}
#menu ul li a.menu-parent { border-bottom: none ! important;}


#menu a.menu-current, #menu a.menu-parent, #menu ul li a.menu-expand {font-weight: bold; }

#menu ul li a.menu-expand { background-image: url(pics/down.png)  no-repeat 10px center;}

#menu ul li.menu-expand ul {display:none;}
#menu ul li.menu-current ul, #menu ul li.menu-parent ul {display:block; height:auto}
#menu ul ul li.menu-expand ul {display:none;}
#menu ul ul li.menu-current ul, #menu ul ul li.menu-parent ul {display:block;}

.closeswitch {display:block; float:right; padding:0px; text-align:right;}
#menubox .closeswitch {float:none; padding:4px; text-align:right;}
#menuswitch, #menuswitchsmall, #menubox .closeswitch {display:none;}
#menuswitch img, #menuswitchsmall img , #menubox .closeswitch img {max-width:100%;}

a.editlink{width:16px; height:16px; float:right; background: transparent url(img/edit.gif) no-repeat; text-decoration:none;}


/* Prevent from hiding meneu */
@media screen and (min-width: 1300px) {
	#menubox {display:block ! important; }
}

/* Smaller Screens */
@media screen and (max-width: 1300px) {
	#picturebox .inner {padding-top: 80px; }
}


/* Smaller Screens */
@media screen and (max-width: 1100px) {
	body { background-image: url(pics/bglightmini.png)  no-repeat;}

	#menubox {display:none; background: #ccc;  width:200px; top:50px; z-index:5500;  box-shadow: 0px -2px 30px 13px rgba(0, 0, 0, 0.2);}
	
	.contentbox {left:3%; width:52%; }
	.topspacer {padding-top: 15%; height:40px;}
	
	#menu ul li.menu-expand ul, #menu ul ul li.menu-expand ul {display:block;}
	#menu ul li ul {height:auto;}
	
	#menu a { overflow:hidden; padding-right:5px;}
	#menu li a {font-size:14px; padding:10px 10px 10px 0;}
	#menu li li a {font-size:13px; padding:9px 15px 9px 0;}
	#menu li li li a {font-size:12px; padding:8px 20px 8px 0;}
	
	
	.showonmobiles {display:block ! important;}
	#menuswitch {display:block; position:absolute; left:-5px; top:120px; width:32px;}
	#menuswitch img {width:100%;}
	#menubox .closeswitch {display:block; }
	
	#header {display:none;}
	
	#headermobile {display:block;  position:absolute; left:3%; top:0; width:52%; padding:8px 3px 8px 0; background:transparent url(pics/header.jpg) no-repeat center right; }
	#headermobile a.logopic img  {max-width:20%; float:left; margin: 0 5% 6px 2%;}
	#headermobile .infobox {width:60%;  float:left; }
	#headermobile .infobox h1, .header .infobox h1 a {font-size:1.2em; line-height:120%; font-weight:normal; margin:0; color:#222 ! important;}
	#headermobile .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; }
	#headermobile .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; }

}

@media screen and (max-width: 768px) {

	#picturebox { position:fixed; left:0; top:0;  }
	#picturebox .inner {margin: 0 0 0 0; width:100%; height:100%; padding-top: 0;}
	
	.contentbox {left:0; top:600px; width:100%; min-height:400px; font-size:14px; border-right:none; border-left:none;}	
	.topspacer {padding-top: 10px; height:auto;}
	
	
	#headermobile {left:0; top:0; width:100%; padding-right:0;}
	#headermobile .infobox h3  {display:none;} 
	
	#rightboxopener {display:block; position:absolute; left: auto; right:0; top:620px;  height:100px;}
	#rightbox {width:40%; min-width:auto; left: auto; right:0; top:570px; z-index:5000;}
	#rightbox .inner {padding: 5px 10px 5px 5px; }
	
	
	
	#menuswitchsmall {display:block; position:absolute; left:0; top:100px; width:30px; opacity:0.6}
	#menuswitch {display:none;} 
	
	
	#footer {display:none;} 
	#footermobile {display:block;} 
	
	
}

@media screen and (max-width: 620px) {
	.contentbox {top:420px;}
	.contentbox .inner {padding: 0 3% 50px 3%;}
	#rightboxopener, #rightbox {top:440px;}	
}

@media screen and (max-width: 420px) {
	.contentbox {top:320px;}
	#rightboxopener, #rightbox {top:340px;}	
}
/* zeugs für login */
.containerLogin {
  width: 20em;
  margin-right: auto;
  margin-left: auto;
  border: 4px solid #fff;
  text-align: center;
}

.form-control {
  width:20em;
  margin-left:0px;
  margin-right:0px;
}

/* Impressum */
.impressumContainer {
  padding: 20px 20px 30px 30px;
}

.redText {
  color: #FC1921;
}
.bold {
  font-weight: 700;
}
.row {
 margin-left: 2em;
}
.impressumContainer .impresum-data-section {
  margin-top: 15px;
  margin-left: 3em;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.zurueck {
  text-align: right;
  margin-top: -2em;
  margin-right: 2em;
}
.iconM{ /* only for Lock/Unlock Contingent will be changed on click */
height: 1em;
vertical-align: text-top;
margin-right: 1em;
margin-left: 1em;
}

.footer-logo {
  height: 1.2em;
  margin-top: 0.4em;
}