/* Schriftgröße */
html { font-size: 2.5em;}

@media only screen and (min-device-width: 481px) {
  /* For general iPad layouts */
/*	html { font-size: 18px;}*/
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}
body { width: 1160px; 
	background-image:none;
	background-color: white;
	padding: 0px;
}
main { 
	width: 1160px;
	margin: 0px;
	padding: 0px;
	box-shadow: none;
	z-index: 15;
	top: 4em;
}

header { 
	margin: 0px;
	width: 1160px;
	padding-top: 1.1em;
	height: 2.6em;
	z-index: 10;
	background-color: #73a3ca;
}

header a, header p { font-size: .9em; }

.pagehead { 
	margin: 0.3em 0em 0em 0em;
	padding: .2em;
}

.imageBanner {
	width: 1160px;
	position: absolute;
}
.mainImage {
	position: absolute; top:0px; left:0px;
}

.leftColumn, .middleColumn, .sidebar, .content {
	float: none;
	display: block;
	margin: 30px 20px 0px 20px;
	width: auto;
	padding: 0px;
}
.content {	box-shadow: none; }

.middleColumn, .content {
	border-right: none;
}
.sidebar {
	height: auto;
	min-height: auto;
}
.sideColumn, .extrastuff {
	float: none;
	display: block;
	margin: 0px 0px 30px 30px;
	width: 100%;
	padding: 0px;
}
.extrastuff { text-align: center; }
h1 { font-size: 0.9em; margin-right: .5em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
.sideColumn h3 { font-size: 1.5em; }

p, ol, ul, td, th, blockquote, li, .content p, .content li, .content td, .content th, .leftColumn p, .middleColumn p { font-size: 1em; }

.leftColumn p, .sideColumn p, .middleColumn p, .content p, .content h3 { margin-left: .3em; margin-right: .4em;}

.leftColumn h2, .sideColumn h2, .middleColumn h2, .sidebar h2, .content h2 {
	font-size: 1.5em; margin-top: .5em; background-color: rgba(255,255,255,0.2); padding-top: .2em; padding-bottom: .2em;
}

.path { display: none; }

.languageMenu ul, .languageMenu p, .languageMenu li, .path {	font-size: .9em; }
.footer p, .footer a { font-size: .7rem;}

a.external, .footer a.external, a.external:hover, .footer a.external:hover {
	padding-right: 0px;
	background-image: none;
}

/* ------- Menus --------- */
/*
	<nav>
		<h2><a href="#">&#9776;</a></h2>
		<div id="menuWrapper">
			<div class="menu"><h3 id="homeMenu"><a href="/" title="Zur Startseite">&#8962;</a></h3></div>
			<div class="menu">
				<h3><a onclick="">Mitmachen<span class="hasSubMenu"> ...</span></a></h3>
				<ul id="menu1">
					<li><a href="/Mitmachen/">Lust auf Grün?</a></li>
					<li><a href="/Mitmachen/Termine.shtml">Terminübersicht</a></li>
*/
nav {
	float: none;
	width: auto;
	height: auto;
	background-color: #e1721b;
}

nav h2 {
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	font-size: 2em;
	z-index: 20;
	padding: .2em .4em .2em .4em;
	background-color: #e1721b;
	margin-bottom: 0px; margin-top: 0px;
	border-radius: 0px 0px 15px 0px;
}

nav h3#homeMenu { display: none; }

nav h2 a { color: white; background-color: #e1721b; }
nav h2 a:hover { color: #e1721b; background-color: #eee; }

nav h3 { display: block; margin: 1em; font-size: 1.2em; padding: 0.3em 0px 0.3em 0px; }
nav h3:hover, nav .menu a:hover, nav h2:hover {
	color: #e1721b;
	background-color: #eee;
}

nav h3.open, nav h3.open a, nav a.selected {
	background-color: #eee;
	color: #e1721b;
}

/*.menu a:visited { color: white; }*/
nav a, nav a:visited {
	padding: .3em .4em .3em .4em;
}
nav a, nav a:visited {
	font-family: PT Sans, Helvetica; Arial, Sans-Serif;
	color: #e1721b;
	text-decoration: none;
	border-width: 0px;
}

#menuWrapper {
	display: block;
	position: absolute;
	top: 0em;
	left: -18em;
	background-color: white;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.40);
	transition: left .5s;
}
nav:hover #menuWrapper { left: 0em;}

nav h3 { margin: 0px; }

nav h3 a {
	float: none;
	display: block;
	padding: 0px;
	background-color: white;
	width: auto; height: auto;
	text-align: left;
	color: #e1721b;
	font-weight: normal;
	cursor: pointer;
	margin: 0px .2em 0px .2em;
	font-size: 1.4em;
}

nav .menu ul {
	display: none;
	position: static;
	background-color: white;
	padding: 0px;
	margin: 0px 0px 0px 20px; 
	width: auto;
	box-shadow: none;
    z-index: 1;
    border: 1px solid #e1721b;
    border-width: 0px 0px .1em .1em;
    transition: height 1s;
}

nav:hover .menu, nav:active .menu, nav:focus .menu { display: block;}

nav ul { margin: 0px 0px 0px 1em;  }

nav li, .menu p {
	text-align: left;
	list-style: none;
}
nav ul a, nav ul p {
	display: block;
	width: auto;
	font-size: 1.4em;
	text-decoration: none;
	padding: 0.3em;
	transition: none;
}
nav ul a:hover {
	background-color: #eee;
}
nav .hasSubMenu { display: inline; }


/* ------ Ende Menus --------- */

input, textarea { font-size: .8em; }
input[type=radio] {
    width: 1em;
    height: 1em;
}
input[type=checkbox] {
    width: 1em;
    height: 1em;
    transform: scale(2);
}
.userform .longInputLine { width: 400px; }
.userform textarea { width: 435px; height: 200px; }

table.layout { margin-left: 0.3em; margin-right: 0.3em;}
ul { margin-left: 0.5em;}

.optional { display: none; }
.optionalSwitch { display: block; }

.freebigbutton { display: block; }

/* Teaser */

hr { margin-top: 60px; margin-bottom: 60px; }

.teaser, .topLeft, .topRight {
	display: block;
	width: auto;
/*	margin: 25px 30px 30px 30px;*/
	margin: 25px 0px 25px 0px;
}

.teaser {
	float: none;
	height: auto;
}

.topLeft {
	padding-right: 0px;
	border-right: none;
	border-bottom: 1px solid #999;
}

.topRight { 
}

.teaser h3 { font-size: 1.4em; margin-left: 0px;}
.teaser p {	font-size: .9em; margin-left: 0px;}
.teaser .datum {	font-size: 1em; }
.leftColumn .teaser p, .middleColumn .teaser p { margin-left: 0em; margin-right: 0em;}

/* .teaser .moreLink { display: none; }*/

.teaserImgTable h4 { margin-left: 0.3em; font-weight: bold; }
.teaserImgTable img { display: block; margin-left: auto; margin-right: auto;}

footer {
	padding-top: 0px;
}
footer p, footer a { font-size: 1em;}
.mobileOnly { display: block; }

.olControlAttribution {
    font-size: .5em !important;
    right: .5em !important;
    bottom: .1em !important;
}