@charset "UTF-8";
/* CSS Document */

	body, div, img, h3 { border:0; padding: 0; margin: 0; clear: both; display: block; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
		
		body {background:url(../img/bg_holz2.png) repeat;}
		a, #newsletterLink, .newsletterLink { text-decoration: none; cursor: pointer; color: #125A06; font-weight: bold; font-style: italic; }
		#wrapper { height: 90%; width: 100%; margin: 0 auto; z-index: 1; }

			
			#header { width: 100%; height: 80px; margin: 0; position: fixed; background: url(../img/deckel_farbe_10x10.png) repeat; top:0;z-index: 98;}
				#h_icon { width: 90px; position: fixed; top: 0; left: 0; }
				#title{ height: 80px; position: absolute;}
				#blase { width: 250px; position: absolute; top: 85px; left: 25px; display: none; opacity: 0;}
				#header.toplayer{z-index: 150;}
		#header h1 { color: #144F05; text-align: center; padding: 0; margin: 0;}
		#content { width: 100%; height: 400px; margin: 0px 0px; z-index: 2;}
			#spacer{ display: block; width: 100%; height: 110px; }
			#highlight {
				width: 95%;
				max-width: 800px;
				/*border: 4px solid #125A06; */
				border-radius: 10px; 
				margin: 20px auto; 
				background:url(../img/deckel_farbe_10x10.png) repeat;
				padding: 1% 0;
			}
			#highlight_e {
				width: 96%;
				max-width: 800px;
				border: 4px solid #125A06; 
				border-radius: 10px; 
				margin:auto; 
				cursor: pointer;
				
			}

			.item { 
					width: 200px; 
					box-shadow: 0px 0px 15px #000;
					border-radius: 10px; 
					background: url(../img/deckel_farbe_10x10.png) repeat; 
					float: left; 
					margin: 20px 10px 0 10px; 
					display: block;
					clear: none;
			}

			.item.rotate1{
				transform: rotate(5deg);
			}
			.item.rotate2{
				transform: rotate(-5deg);
			}
			.item.rotate3{
				transform: rotate(-10deg);
			}
			.item.rotate4{
				transform: rotate(7deg);
			}


				.itemE { 
					width: 92%; 
					border-radius: 10px; 
					border: 4px solid #125A06; 
					background: #fff; 
					margin: 2%; 
					clear: none;
				}
		
			.item.rec {  width: 400px;}
			.item.deco { background: none; }
			.item.clear { display:none; }
			#loadMoreTiles.clear { display: block; }
			.item.expandable { cursor:pointer;}


		/*@media (min-width: 30em) and (max-width: 60em) { }*/
		
		@media (min-width: 320px) and (max-width: 439px) {
			#wrapper{ width: 320px;}	
			.item.rec {  width: 300px; }
			.item { width: 142px; margin:20px 5px 0 5px; }
		}

		@media (min-width: 440px) and (max-width: 659px) {
			#wrapper{ width: 440px;}	
			.item.rec {  width: 420px; }
			.item { width: 192px; margin:20px 5px 0 5px; }
			#h_icon { width: 140px;}
			#blase { width: 250px; position: absolute; top: 130px; left: 50px;}		
		}

		@media (min-width: 660px) and (max-width: 859px) {
			#wrapper { width: 660px;}	
			.item.rec {  width: 400px; }
			.item { width: 192px; margin:20px 5px 0 5px; }
			#h_icon { width: 140px;}
			#blase { width: 250px; position: absolute; top: 130px; left: 50px;}
		}

		@media (min-width: 860px) and (max-width: 1059px) {
			#wrapper { width: 860px;}	
			.item.rec {  width: 400px; }
			.item { width: 192px; margin:20px 5px 0 5px; }
			#h_icon { width: 140px;}
			#blase { width: 250px; position: absolute; top: 130px; left: 50px;}
		}

		@media (min-width: 1060px) and (max-width: 1459px) {
			#wrapper { width: 1060px;}	
			.item.rec {  width: 400px; }
			.item { width: 192px; margin:20px 5px 0 5px; }
			#h_icon { width: 140px;}
			#blase { width: 250px; position: absolute; top: 130px; left: 50px;}
		}

		@media (min-width: 1460px) {
			#wrapper { width: 1460px;}	
			.item.rec {  width: 400px; }
			.item { width: 192px; margin:20px 5px 0 5px; }
			#h_icon { width: 140px;}
			#blase { width: 250px; position: absolute; top: 130px; left: 50px;}
		}



		#footer{ 
			width: 100%; 
			height:50px; 
			position: fixed; background: url(../img/deckel_farbe_10x10.png) repeat; 
			bottom: 0; z-index: 100;
		}
		
		#footer .navI { 
			display: block; 
			margin: 0 0 0 10px; 
			cursor: pointer; 
			color: white; 
			width: 100px; 
			float: left; 
			clear: none;
		}
			#closeMenu{
				display: block;
				margin: 9px auto;
				cursor: pointer;
				height: 35px;
				font-size: 20px;
				font-weight: bolder;
				text-align: center;
				display: block;
			}
			
			#openMenu{
				display: block;
				margin: 9px auto;
				cursor: pointer;
				
				height: 35px;
				font-size: 20px;
				font-weight: bolder;
				text-align: center;
				display: block;

			}

			#playVideo, #muteVideo, #closeMenuVideo{
				display: none;
				cursor: pointer;
				width: 35px;
				height: 35px;
				font-size: 20px;
				font-weight: bolder;
				text-align: center;
				bottom: 6px;
				
				position: fixed;
				z-index: 101;
				background: #fff;

			}
			#playVideo {left: 6px;}
			#muteVideo{ left:53px; }
			#closeMenuVideo{right: 6px; }
		#overlay{
			display: none;
			opacity: 0;
			background: rgba(255,255,255,0.9);
			width: 100%;
			height: 100%;
			position:fixed;
			top: 0;
			z-index: 99;
		}
			
		#menuList li img {
				margin:0; 
				padding: 0;
				width:100%;
		}

		@media (min-height: 100px) and (max-height: 600px) {
			#menuList{
				width: 340px;
				display: block;
				list-style: none;
				color: #0c2d07;
				text-align: center;;
				font-size: 14px;
				font-weight: bold;
				position: absolute;
				padding: 0;
				margin:0;
				bottom: 50px;
			}
			#menuList li {
				margin: 0 10px 10px 10px; 
				float: left;
				width: 150px;
				padding: 0;
				

			}
			#menuList li #zusagen{
				width:190px;
				display: block;
				float: none;
			}

		}

		@media (min-height: 601px) {
			#menuList{
				width: 190px;
				display: block;
				list-style: none;
				color: #0c2d07;
				text-align: center;
				font-size: 24px;
				font-weight: bold;
				position: absolute;
				padding: 0;
				margin:0;
				bottom: 50px;
			}

			#menuList li {
				
				cursor: pointer;
				padding: 0;
				margin:0;
				margin-bottom: 18px;
				width: 190px;
			}
		}

		#impressum{
			position: absolute;
			bottom: 4px;
			right: 4px;
			font-size: 10px;
			cursor: pointer;
			color: #0c2d07;
		}
		#impCopy {
			width: 250px;
			height: 500px;
			position: absolute;;
			text-align: left;
		}

		#notify_holder{
			width: 250px;
			height: 500px;
			position: absolute;;
			text-align: left;
			overflow: scroll;
		}
			#notify_holder ul{
				list-style: none;
				margin: 10px 0;
				padding: 0;
			}
				#notify_holder ul li{
					margin: 4px 0;
					height: 30px; 
				}

		@media (min-width: 400px) {
			#notify_holder{
				width: 350px;
			}
		}
		
		#notify_holder img{
			width: 25px;
			float: left;
			margin: 0 10px 0px 0;
		}

		#videoHolder {
			width: 100%;
			display: none;
			margin:0;
			position: absolute;
		}

		
		#story_holder{
				width: 800px;
				height: 80%;
				overflow: scroll;
				position: absolute;;
				text-align: left;
		}
		#story_copy{
			width: 60%;
			left: 40%;
			position: absolute;
		}
		 #story_img{
			width: 35%;
			left: 0;
			position: absolute;
		}
		#gal_holder{
			width: 600px;
			position: absolute;
		}
		#gal_img{
			width: 100%;
		}
		@media (max-width: 400px) and (min-height: 480px) {
			#gal_holder{
				width: 100%;
			}
		}

		@media (max-height: 399px) {
			#gal_holder{
				width: 210px;
			}
		}

		@media (max-width: 500px) {
			#story_holder{
				width: 280px;
			}

			#story_copy, #story_img{
				width: 100%;
				left: 0;
				position: relative;
				margin-bottom: 40px;
			}

			
		}

		@media (min-width: 501px) and (max-width: 800px) {
			#story_holder{
				width: 500px;
			}
			#story_copy{
				width: 60%;
				left: 40%;
			}
			#story_img{
				width: 35%;
				left: 0;
			}
		}