/* 

Theme Name: Beateater Berlin theme by breakeven, Version 0.1


Theme URL: 
http://www.beateater.de

Description:  Theme für Dicki

Version: 0.1

Author: breakeven, Bernd Press

Author URL: http://www.breakeven-berlin.de

*/

	@import url(css/normalize.css);	
	/* mobile stylesheet at the end */
	
		
	@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900';
	
	/* Default link styling */
	a { outline: 0; }
	a:link { color: #838383; }
	a:visited { color: #838383; }
	a:hover, a:focus { color:#c0c0c0; cursor:pointer;}
	a:active { color: #838383; }
	/* Sprungmarken */
	.landingpoint {
		
	}
	
	
	body, html { height: 100% !important; padding: 0; margin: 0;}
		
	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
	  cursor: pointer;
	}
	
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  border: 0px none;
	  padding: 0px;
	}

	body, html { height: 100% !important; padding: 0;}
 
	body {
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 18px;font-size: 1.05rem;
		line-height: 22px;line-height: 1.4rem;
		font-weight: 400;
		color:#838383;
		overflow-y: scroll;
		background-color: #252525;
		text-align:left;
	}

	h1	{font-size: 19px; font-size: 1.2rem;font-weight:600;padding:0;margin: 60px 0 20px 0;color: #ffffff;}
	h2	{font-size: 15px; font-size: 1.1rem;font-weight:600;padding:0;margin: 20px auto 6px auto;color: #ffffff;	}
	h3	{font-size: 18px; font-size: 1.1rem;font-weight:bold;padding:0;margin: 20px auto 0 auto;color: #787878;	}
	h4	{font-size: 15px; font-size: 1.1rem;font-weight:600;padding:0;margin: 20px auto 6px auto;color: #000;	}	
	h1:first-child {margin-top: 20px;}


	ul {padding: 0px; margin: 10px 0 40px 0; list-style-type:none;}
	ul li {
		padding: 2px 0 2px 25px; 
		margin: 0px;
		background: url("images/bullet.png") 0px 4px no-repeat;
	}
	
	p {	
		text-align:left;margin: 1% 40px 30px 0;
	}
	
	hr {
		border: 0px;
		border-top: #cccccc 1px solid;
		margin: 60px auto 26px auto;
		width: 100%;
		clear:both;
	}
	


	/* Struktur  mit feststehendem Footer unten (negative margin solution) */
	.page_margins {
	  	position:relative !important;
	  	min-height:100%; /* real browsers */
  		height: auto !important;
	  	padding: 0;	/*space for the footer */;
	  	max-width: 100%; margin: 0px auto; overflow: hidden; width: 100%;
	  }
	  * html .page_margins { height:100% !important; }

	.page { 
		box-sizing: border-box;
		position:relative;
		margin: auto;
		width:100%;
		height: auto !important;
		/*	 	max-width:1500px; */
	 	padding-top: 100px;
	 	padding-bottom: 0px;
	 	padding-left: 0px;
	 }
	 
	footer {
		display:none;
		position: relative !important;
		box-sizing: border-box;
		clear:both;
		padding: 0px 10px 60px 10px;
		margin: -200px auto 0px auto;
		color: #9ebddc;
		background-color: #f2f2f2;
		width: 100%;
		height: 200px;
		text-align:center;
	}


	footer a:link	{text-decoration: none; color: #838383;}
	footer a:visited{text-decoration: none; color: #838383;}
	footer a:hover, footer a:focus	{text-decoration: none; color: #c0c0c0;}
	footer a:active	{text-decoration: none; color: #838383;}	
  		
	header[role="banner"] {
		position:fixed;
		display:block;
		top: 0px;
		left: 0px;
		width: 100%;height:100px;
		margin: 0 auto 0px auto;
		background-color: #fff;
		clear:both;
		z-index: 10;
	}

	#headercontent {
		position:relative;
		display:block;
		margin:auto;
		width:100%;
		/* max-width: 1500px; */
		height: auto;
		max-width:1500px;
	}
	#logo {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 99;
		border: 0px;
		width: 210px;
		height: 204px;
	}
	#logomobile {
		display:none;
		position: absolute;
		top: 24px;
		left: 30px;
		z-index: 99;
		border: 0px;
		width: 50%;
		max-width: 131px;
	}


	main {
		box-sizing: border-box;
		clear:both;
		padding: 0px 0 0 0;
		margin: 0px auto 0 auto;
		min-height: 300px;
		}



	#aniwrapper {
		position:relative;
		top: 0px;
		left:0px; right: 0px;
		display:block; 
		width:100%;
		/* max-width:1500px; */
		height:100%;
		overflow:hidden;
		vertical-align:middle;
	}
	#aniwrapper p {
		position: absolute;
		display:block;
		width: 100%;
		left: 50%;
		margin-left: -50%;
		margin-top: 19%;
		z-index: 2;
		text-align:center;
		font-weight:bold;
		font-size: 320%;
		line-height: 70%;
		color:#fff;
	}
	#aniwrapper p .subline {
		font-size: 43%;
		font-weight: 600;
	}
	#anichild {
		position:fixed;
		/* transform: translate(0, 0); */
		bottom: 0;
		left: 0;
		z-index:1;
		width: 31.5%;
		height: auto;
		border: 0px;
	}
	#ecke {
		width: 100%; height: auto; display:block;margin-top: -1%; /* wie die Stadt! */
	}
	#stadt { position:relative; display:block; width: 104%; height: 100%;margin-left:-2%;margin-right:-2%;margin-top:-1%;margin-bottom:-1%;}
	
	
	
/* ---------------------------------------------------------
   Page content styles
   ---------------------------------------------------------*/
   	.clearer {
		clear:both;
		height:0px;
		font-size:0;
		border:none;
		margin:0; padding:0;
		background:transparent;
	    	content:".";
	    	display:block;
	    	visibility:hidden;
	}
	
	.picturebar, .content {
		position:relative;
		box-sizing:border-box;
		display:block;
		height: 100%;
		float:left;
	}
	.picturebar {width: 31.5%;background:#00ff00;}
	.content {width: 68.5%; padding: 20px 25% 20px 3%; }
	
	.picturebar img {display:block; width: 100%; height: auto; }
	
	.googlemap {
		width:100%; height:300px;border: #ff0000 0px solid; margin: 50px 0 80px 0;clear:both;
	}

/* --- navi und Suche fuer Bildschirme über 767px ---*/
		
	.nav-button { display: none; }
	
	nav {
		position: absolute;
		top: 30px;
		left: 0px;
		margin: auto;
		z-index: 99; 
		display:block;
		width: 100%;
		max-width: 100%;
		height: 70px;
		padding: 0;
		text-align:center;
		vertical-align:middle;
		background-color: #fff;
		box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.4);
	}
	nav .menu { max-width: 1200px; height: auto; background-color: transparent; margin: auto;text-align:right; }
	
	
	nav .menu > ul {
		display:block;
		height: 50px;
		padding: 0 0px 0px 0px;
		text-align:right;
		margin-left: 0px;
		margin-right: 10%;
		list-style-type:none;
		overflow: hidden;
		}
	nav .menu > ul > li {
		display:inline-block;
		
		margin: 0px 0 0 0;
		width: auto;
		padding: 0;
		height: 50px;
		text-align:center;
		vertical-align:top;
		background-image: none;
	}
	nav .menu > ul > li:last-child {}
	
	nav .menu ul li a { display: block; padding: 14px 13px 15px 13px; text-decoration: none; color: #bfbfbf; white-space: nowrap; text-transform:uppercase;font-weight: 700;}
	nav .menu ul li a:link  {text-decoration: none; color: #bfbfbf;}
	nav .menu ul li a:visited{text-decoration: none; color: #bfbfbf;}
	nav .menu ul li a:hover, a:focus  {text-decoration: none; color: #0e805e;}
	nav .menu ul li a:active  {text-decoration: none; color: #bfbfbf;}
	nav .menu ul li.current_page_item > a { color: #0e805e; }
	
	/* Untermenüs optisch anzeigen als Option: 
	nav li > a:after {	  content: "";	}
	Anschließend entfernen wir das Plus-Zeichen per Pseudoklasse „:only-child“ von solchen „<a>“-Elementen wieder, welche das einzige Kindelement sind, also kein „<ul>“-Element als Kind besitzen. 
	nav li > a:only-child:after {  content: "";} */
	
	/*sub level menus dropdown global formatings */
	nav .menu ul li ul li { background-image: none; padding: 0px;}
	nav .menu ul li ul li a {padding: 8px 12px 8px 12px; }
	nav .menu ul li ul li a:link  {}
	nav .menu ul li ul li a:visited{}
	nav .menu ul li ul li a:hover, nav .menu ul li ul li a:focus  {}
	nav .menu ul li ul li a:active  {}
	
	/*2nd level menus */
	nav .menu > ul > li > ul {  display: none; position: absolute; top:45px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); background-color: #dedede;}
	nav .menu > ul > li:hover > ul {	  display: block;	  }
	nav .menu > ul > li > ul > li {	  position: relative; text-align:left; border-top: 1px solid #fff; }
	nav .menu > ul > li > ul > li:first-child {border-top: 0px; }
	nav .menu > ul > li > ul > li:hover {background-color: #dfdfdf; }
	
	/*3rd level menus !!!not used!!! */
	nav .menu > ul > li > ul > li > ul {  display: none;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); background-color: #253f59;	}
	nav .menu > ul > li > ul > li:hover > ul 	{	  display: block; position: absolute; left: 100%;top: 0;}
	nav .menu > ul > li > ul > li > ul > li 	{	  position: relative; text-align:left;border-bottom: 0px solid #3E3E3E; border-top: 1px solid #456687; }
	nav .menu > ul > li > ul > li > ul > li:hover {background-color: #324e6b; }
	
	.sound {
		box-sizing:border-box;
		display:block; width: 180px; height: 50px;
		margin-left: 20px;margin-right: 2%;
		background: url(images/sound_on.gif) center center no-repeat;
		border: #0e805e 1px solid;
	}
	.soundoff {
		background: url(images/sound_off.gif) center center no-repeat;
	}
	
	
/* ---------------------------------------------------------
   Formulare
   ---------------------------------------------------------*/
	
	/* removing all standard-styles ------------------ */
	select, button {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  border:none;
	  border-radius: 0;
	  font-size: 1em;
	  width: 100%
	} 



/* ---------------------------------------------------------
   mobile styles
   ---------------------------------------------------------*/

	

	/* Navigation Bar
	-------------------------------------------------------- */
@media only screen and (min-width: 0px) and (max-width: 1100px) { 
		#logo { padding-left: 30px;}
		#zitat { display:none; }
		nav .menu > ul { margin: 10px auto 40px auto;text-align:center; }
		.content { padding-right: 7% }		
} 



 @media only screen and (min-width: 0px) and (max-width: 800px) { 
				/* Allgemeine Modifikationen */
				
				header[role="banner"], #headercontent {  }
				#aniwrapper p { font-size: 250%; }
				#logo { display: none; }
				#logomobile { display: block; }
				
				

	/* Navigation Area
	-------------------------------------------------------- */	
				nav {
					position: absolute;
					width: 100%;
					top: 0px;
					right: 0px;
					z-index: 2;
					padding: 15px 0px 15px 0; border: none; 
					}

	/* Navigation Button
	-------------------------------------------------------- */
			
				.nav-button {
					display: block;
					position: absolute;
					top: 24px;
					right: 30px;
					width: 55px;
					height: 50px;
					background: url('images/mobile-menu-icon-large.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 36px, 100%;
					cursor: pointer;
					border: 0 none;
					z-index: 999;
					text-indent: -9999px;
				}
				.nav-button:hover { 
					background-image: url('images/mobile-menu-icon-largex.png');color: #fff;
				}
				.nav-button.open {
					background: url('images/mobile-close-icon-large.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 36px, 100%;
				}
				.nav-button.open:hover { 
					background-image: url('images/mobile-close-icon-largex.png');
				}


	
	/* Navigation Menu
	-------------------------------------------------------- */
				nav .menu {display: block; position: absolute; top: 0px; right: 0px;z-index:99;height: auto; }
				nav .menu ul { padding: 0;text-align: left; font-weight: normal; }
				
				/* Toggle the navigation bar open  */
				nav .menu ul, nav .menu ul li { display: none; }
				nav .menu ul.open { display: block; height: auto; margin-top: 100px; }
				nav .menu ul.open li { display: block; }
				  
				/* sound button ausblenden */
			  	nav .menu > ul > li:last-child { display: none; }
				  
				/*1st level menus */
				nav .menu > ul {background-color: #dedede;}
				nav .menu > ul > li { position: relative; display:block; width: 200px; padding: 0px; margin: 0;border-top: 1px solid #fff;}
				nav .menu ul li a { text-align:left; color: #000; padding: 12px;  }
				nav .menu ul li a:link, nav .menu ul li a:visited, nav .menu ul li a:active { color: #666; }
				nav .menu ul li a:hover { color: #000000; }
				  				  	
				/*2nd level menus */
				nav .menu > ul > li > ul { width: 240px;left: -240px; top: 0; margin: 0px; background-color: #d0d0d0;}
				nav .menu > ul > li:hover > ul { display: block;}
				nav .menu > ul > li > ul > li { position:relative; margin: 0 0 0 0px; width: auto;}
				nav .menu > ul > li > ul > li a { }
				  	
				  	
				/*3rd level menus !!!!!not used!!!! */
				nav .menu > ul > li > ul > li > ul {  display: none; background-color: transparent; }
				nav .menu > ul > li > ul > li:hover > ul 	{	  display: block; position: absolute; left: 0;top: 0;}
				nav .menu > ul > li > ul > li > ul > li 	{	  position: relative;  border: 0; margin: 0 0 0 20px;}
				nav .menu > ul > li > ul > li > ul > li a	{	}
					
} 

@media only screen and (min-width: 0px) and (max-width: 787px) { 
				#ecke, .picturebar {	display:none; }
				#aniwrapper p { font-size: 200%; }
				.content {
						display:block;
							float:none;
							box-sizing: border-box;
							width: 100%;
							padding: 20px 20px 30px 20px;
				}
				
				/* für mobile Clients: Navi über gesamte Breite */
				nav, nav .menu, nav .menu ul { width: 100%;max-width: 100%; }
				nav .menu ul li { width: 100%; position: static; margin: 0; }
				/* oberste Navi-Box bekommt einen Schatten, damit sie sich besser vom Content abhebt. Und mehr Padding, damit es nicht mit dem Logo kollidiert */
				nav .menu > ul { box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.55); }

				/*2nd level menus */
				nav .menu > ul > li > ul { position: static; width: 100%; margin: 0px; display: block; box-shadow: none;}
				nav .menu > ul > li > ul > li {	position: relative; box-sizing: border-box; width: 100%; margin: 0px; padding-left: 20px;}

		
 }
 
@media only screen and (min-width: 0px) and (max-width: 480px) { 
	

	
}

/* End Mobile Styles */

	
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
	background:transparent !important;
    }
	html { background-color:#fff; }

	header[role="banner"] { background-color: #282828 !important; border: 0px;}

	/* Hide navigation */
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
		font-weight:bold;
		text-decoration:underline;
		color:#06c;
		border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */ 
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	
	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure { 
		margin-bottom:1em; 
		overflow:hidden;
	}

	figure img { border:1px solid #000; }
}