/*
Theme Name:     Armeleuteberg
Theme URI:      http://www.armeleuteberg.de
Description:    Template, basierend auf Roots
Author:         wagnergraphics - Torsten Wagner
Author URI:     http://www.wagnergraphics.de
License:        wagnergraphics
License URI:    http://www.wagnergraphics.de
Template:       roots
Version:        1.0
*/


/*

Grün: #127259;

*/



/* brawler-regular - latin */
@font-face {
  font-family: 'Brawler';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/brawler-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/brawler-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/brawler-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/brawler-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/brawler-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/brawler-v19-latin-regular.svg#Brawler') format('svg'); /* Legacy iOS */
}


@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/droidsans_regular_macroman/DroidSans-webfont.woff') format('woff'), /* Modern Browsers */
}

@font-face {
  font-family: 'Droid Sans';
  font-style: bold;
  font-weight: 700;
  src: local(''),
       url('fonts/droidsans_bold_macroman/DroidSans-Bold-webfont.woff') format('woff'), /* Modern Browsers */
}

/* =============================================================================
   Body und allgemeine Auszeichnungen 
   ========================================================================== */

body { 
	padding-top: 0px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-size: 15px;
	line-height: 22px;
	font-family: 'Droid Sans', sans-serif;
	font-weight: 300;
	color: #333; 	
}
body.top-navbar { padding-top: 0px; }

p {
	font-size: 1em;
	font-family:'Droid Sans', sans-serif;
	font-weight: 300;
	margin: 0 0 0.8em 0;
	text-align: justify;
}

a, a:visited { color: #127259; font-weight: 400;}
a:hover { text-decoration: none; }
#	main a:hover { border-bottom: 1px dotted #127259; }

strong { 
	font-weight: 700; 
}

h1, h2, h3 {
	font-family: 'Brawler', serif;
	font-weight: 400;
	line-height: 1.4em;
}

h1 { font-size: 1.6em; margin-bottom: 30px; }
h2 { font-size: 1.3em; margin-top: 40px; margin-bottom: 15px; }
h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; }

.page-header h1 { line-height: normal !important; }
.infobox h2 { margin-top: 5px !important; }

hr {	
	height: 1px;
	margin: 3em 0;
	border-color: rgba(0, 0, 0, 0.1);
	border-style: 1px solid;
    border-left: 0 none;
    border-right: 0 none; 
	border-top: 0 none ;
	background-color: #ccc\9;  /* nur für den IE7 und IE8 */		
}


::selection { background: #b7dace !important; color: #000; text-shadow: none; }
::-moz-selection  { background: #b7dace !important; color: #000; text-shadow: none; }
mark { background: #b7dace; padding: 0 2px; margin: 0 -2px;  }





/* =============================================================================
   Bilder, etc.
   ========================================================================== */
   
img { 
}
#main img {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
    height: auto;
}
	#main #mapp0-layout img {
		border: none; 
		margin: 0;
	}

#main img.ohne_schatten,
.ohne_schatten figure img {
	box-shadow: none !important;
}

.gallery-item dt {
    float: left;
    margin: 0 5px;
	}

.bild_links, .alignleft { float: left; max-width: 40% !important; margin: 0 20px 5px 0 !important; }
.bild_rechts, .alignright { float: right; max-width: 40%  !important; margin: 0 0 5px 20px !important; }
.aligncenter { }


a.zoomLink:hover { border-bottom: none !important; }



.logo_maerchenweg {
	margin-top:-40px !important;
}
.maerchenweg_baeume {
	position: relative;
	bottom: 0; 
	margin-top: -20% !important;
	z-index: -1;
	float: left;
}



.wochentag,
.zeit { 
	display: inline-block;
    padding: 0.5em 0.25em;
    border-bottom: 1px solid #ffffff40;
}

.wochentag { 
    width: 90px;
}
.zeit { 
	width: 80px; 
	text-align: right;
}




/* =============================================================================
   Header
   ========================================================================== */

#wrap {
	/* nicht loeschen, Bootstrap */
    padding: 0px 0 0px  !important;
	margin: 0 auto;
	background: url(images/header.jpg) no-repeat top center;
		
}

#banner { 
	position: relative;
	margin: 0;
	padding: 0;
	height: 500px;
}

#infoicons {
	position: absolute;
	width: 200px;
	height: 40px;
	top: -1px;
	right: 2%;
	z-index: 999;
}

#suchfeld { 
	width: 200px;
	height: 50px;
	background-color: rgba(0,0,0,1);	
	opacity: 0;
 	visibility: hidden; 
	transition: visibility 0.2s linear, opacity 0.2s linear; 
}
.infoicons:hover #suchfeld { 
	visibility: visible;
	opacity: 1; 
}

.infobox {
	position: absolute;
	max-width: 70%;
	border-radius: 4px;
	color: #fff;
	background-color: #000;
	background-color: rgba(0,0,0,0.85);
	top: 38px;
	right: 2.5%;
	padding: 5px 20px;
	display: none;
	z-index: 990;
}
.infobox a:visited,
.infobox a 
{ 
	color: #fff; 
}







#logo-wrap { 
	margin-top: 220px;
}

.logo { 
	box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 1);
	max-width: 100%;
}




/* =============================================================================
   Hauptnavigation
   ========================================================================== */

#nav-main ul {
	list-style: none;
	margin: 2.5em 0 0 0;
	padding: 0;
	overflow: visible; 
}

#nav-main a { 
	display: block;
	padding: 0.5em 0 0.5em 20px; 
	margin: 0; 
	color: #000;
	font-family: 'Brawler', serif;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.5em;
	overflow: visible;
}
#nav-main a:hover { color: #127259; border-bottom: none; }
#nav-main li > a {}  

#nav-main .active > a, 
#nav-main .active > a:hover {
    color: #127259;
	background: url('images/menue.png') no-repeat;
	background-position: 0 10px;
	background-size: auto;
}

#nav-main .menu-restaurant-speisekarte[class~="active"] > a,
#nav-main .menu-restaurant-speisekarte[class~="active"] > a:hover,
#nav-main .menu-kontakt-anfahrt[class~="active"] > a,
#nav-main .menu-kontakt-anfahrt[class~="active"] > a:hover,
#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a,
#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a:hover {
	background: url('images/menue_06.png') no-repeat;
	background-position: 5px 2px;
}
#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a,
#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a:hover,
#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a,
#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a:hover {
	background: url('images/menue_07.png') no-repeat;
	background-position: -8px 10px;
}






/* =============================================================================
   Inhalte
   ========================================================================== */
#main { margin-top: 3em; position: relative; }

.page-header {   
	border-bottom: none;
    margin: 0 0;
    padding-bottom: 0;
}



/* =============================================================================
   Listen
   ========================================================================== */
   
#main ul {
	max-width: 450px;
	margin: 20px 0 20px 2em;
	padding: 0;	
	list-style: outside;
}
#main li {
	padding-left: 0px;
	margin-bottom: 0.8em;
	
}




/* Zitate */
blockquote {}





/* =============================================================================
   Artikel
   ========================================================================== */
#main article { margin-bottom: 60px; }

article footer { 
	margin-top: 20px;
	text-align: right;
} 

.multicolumn {	   
	column-count: 2;
	column-gap: 120px;
    column-rule: solid 1px #777;
}

.gericht {
	color: #127259;
	font-family: 'Brawler', serif;
	font-size: 1.1em;
	font-weight: 400;
}
.getraenk {	
	color: #127259;
	font-size: 1.0em;
	font-weight: 400;	
	line-height: 1.8em;
}
.preis {
	font-size: 0.8em;
	text-align: right;
	font-weight: 400;
}
.preis:before { content: " … "; }


/* =============================================================================
   Galerie
   ========================================================================== */

ul.thumbnails {
	max-width: 100% !important;
	margin: 20px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.thumbnails > li {
	width: 30%;
	margin: 0 3% 10px 0 !important;
}

.thumbnail {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0px !important;
}

.thumbnail > img {
	border: 6px solid #FFFFFF;
    margin: 0 0 !important;
	width: 98%;
}

.thumbnails a:hover { border-bottom: none !important; }




/* =============================================================================
   Footer
   ========================================================================== */

#footer { 
	margin-top: 80px;
	padding-top: 190px;
	color: #fff;
	font-size: 0.9em;
    background: url(images/footer_oben.png) no-repeat top center;
	background-color: #323232;
}

#footer article { width: 95%; margin-bottom: 20px; }




#footer h3 { font-size: 1.25em; }
#footer p { text-align: left !important; }
#footer a { color: #FFF; font-weight: normal; }
#footer a:hover { color: #ccc; border-bottom: none; }
small { font-size: 0.8em; font-weight: normal; line-height: 1em; }


#menu-footer-navigation {}
#footer ul.menu, #footer ul { 
	padding: 0 0 0 0px; 
	list-style-type: none; 
	list-style-position: inside;
}
#footer ul.menu li, #footer ul li { margin: 0 0 5px 0;}
#footer ul.menu li a, #footer ul li a  { text-decoration:none; }
#footer ul.menu li a:hover, #footer ul li a:hover  { background-color: transparent; }

.widget_nav_menu {	
	padding-bottom: 0em;
	margin-bottom: 0em;	
	border-bottom: none;
}

#footer .nav { margin-bottom: 0px; }

.link-facebook:before {
    content:  url(images/icon_facebook.png);
	margin-right: 5px;
	padding-top: 1px;
}














/* =============================================================================
   Formulare
   ========================================================================== */
.wpcf7 { max-width: 500px; }

input, 
textarea {
	box-sizing: border-box;	
	width: 100%;
	min-height: 2em;
	border: 1px solid #ccc;
	border-radius: 0px;
	margin-bottom: 4px;
	font-size: 1em !important;
	font-family: 'Brawler', serif;
	font-weight: 400;
	color: #777 !important;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0) inset;
}
input:focus, 
textarea:focus {
	color: #000; 
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0px 0px 2px rgba(0, 107, 81, 0.8) !important;;
	border: 1px solid #006b51 !important;
	min-height: 2em;
}

.wpcf7-validates-as-required, .your-message > textarea { color: #000 !important; }

form label {}

textarea { overflow: auto; vertical-align: top; resize: vertical; margin-bottom: 20px; }
.plz input {width: 15%;}
.wohnort input { width: 83%; margin-right: 0; float: right;}
.captcha-263 input {width: 80px; padding:2px; text-align: center;}
.wpcf7-captcha-captcha-263 { margin-top: -4px; padding:4px; background-color: #FFF;}


.button, 
#post-nav a, 
#comments-nav a, 
.wpcf7-submit,
.comment-reply-link {
	background-color: #127259 !important;
	width: 100% !important;
	font-size: 1.4em !important;
	color: #fff !important;
	border-radius: 1px !important;
	border: none !important;
	padding: 3px 12px !important;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.2) inset;
}
.button:hover, 
#post-nav a:hover,
#comments-nav a:hover, 
.wpcf7-submit:hover,
.comment-reply-link:hover { 
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 12px rgba(0, 0, 0, 0.5) inset;
}

/* Fehlermeldungen */
input:valid, textarea:valid {}
input:invalid, textarea:invalid, .wpcf7-not-valid { 
	background-color: #eee;
	color: #000 !important;
	border: 1px solid #c03 ;
}

.wpcf7-not-valid-tip-no-ajax,
.wpcf7-not-valid-tip-no-ajax,
.wpcf7-response-output,
.wpcf7-mail-sent-ok
{
	margin: 5px 0 20px 0 !important;
	background-color: #900;
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
	text-align: center;
	color: #FFF !important;
	padding: 6px;
	font-size: 1em !important;
	border-radius: 2px;
	text-shadow: none;
}
.wpcf7-response-output {
	background-color: #FC0;
	color: #000 !important;
}
.wpcf7-mail-sent-ok {
	background-color: #398F14;
	color: #000 !important;
}







/* Suchfeld */
#searchform { text-align: left; float: none; }
#searchform:after { content:attr(<br>); }
#searchform #placeholder { text-indent: 60px; color: #000;}
#searchform #searchform div { margin: 0; }
#searchform #s {
	height: auto;
	min-width: 150px;
	width: 100%;
	transition-duration: 400ms;
	transition-property: width, background;
	transition-timing-function: ease;
	padding: 4px 10px 4px 28px;
	background: #eee;
	background: url(images/search.png) no-repeat 5px 6px rgba(255, 255, 255, 0.85);
	color: #000;
	border-radius: 0px;
}
#searchform #s:focus { 
	width: 100%; 
	background: #fff;
	background: url(images/search.png) no-repeat 5px 6px rgba(255, 255, 255, 1);
	color: #000;
	box-shadow: 0px 0px 2px rgba(0, 107, 81, 0.8);
	border: 1px solid #006b51;
}
#searchform #searchsubmit { display: none; }
#searchform .only-search #searchform { top: 5px; z-index: 1; }
#searchform .only-search #s {}

#searchform .only-search #s,
#searchform .only-search #s:focus { width: 100%; }
#searchform .only-search #s:focus { background-color: #000; }
#searchform .with-image #searchform { top: auto; bottom: -27px; max-width: 100%; }
#searchform .only-search + #access div { padding-right: 205px; }

input#searchsubmit, label.visuallyhidden { display: none; }






/* =============================================================================
   Plugins und Erweiterungen
   ========================================================================== */




/* Maps */
.mapp-container {
	background: #fff;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9); 
	border: none;	
}
.mapp-container img { box-shadow: none !important; }

img.cboxPhoto  { border: 1px solid #000;  }


img.wpcf7-captchac  {
    border: none !important;
    box-shadow: none !important;
    margin: -5px 0 0 0 !important;
}





/* Betriebsruhe   --  auf CSS-Änderungen bei den Mediaqueries achten */
#betriebsruhe {
	position: absolute;
	width: auto;
	top: -211px;
	left: 25%;
	
	margin-top: 0px;
	box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 1), inset 0 0 5px 5px rgba(0, 0, 0, 0.2);
	max-width: 100%;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align: center;
	padding: 30px 20px 20px 20px;
}
#betriebsruhe h3 {
	margin-top: 0px;
	color: #127259;
}



/* Opening Hours  */

p.opening-hours span {
	line-height: 3em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid rgba(255,255,255,0.25);
}
p.opening-hours span:last-child,
p.opening-hours span:nth-last-child(2){
	border-bottom: none;
}





/* =============================================================================
   Animationen und optische Ergaenzungen
   ========================================================================== */

#logo, 
#nav-main a, 
a, 
input, 
textareas,
p {
	transition-duration: 300ms;
	transition-property: All;
	transition-timing-function: ease;
}

.alert p { color: #000; }




.panel {
	width: 100%;
	display: block;
	padding: 20px;
	background-color:#127259;
	margin-bottom: 40px;
	color: #ffffff;
	box-shadow: 0 0 8px rgba(0,0,0,0.12);
}
.panel h2 {
	font-size: 25px;
	font-weight: bold;
}








/* =============================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 1140px) {
	#wrap { background-size: 140%; }
}
		 
@media only screen and (max-width: 960px) {
	#wrap { background-size: 140%; }
	#banner { height: 400px; }
	
	
	#nav-main .active > a, 
	#nav-main .active > a:hover {
		background-size: auto;
	}

	#nav-main .menu-restaurant-speisekarte[class~="active"] > a,
	#nav-main .menu-restaurant-speisekarte[class~="active"] > a:hover,
	#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a,
	#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a:hover {
		background: url('images/menue_03.png') no-repeat;
		background-position: 12px 6px;
	}
	#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a,
	#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a:hover {
		background: url('images/menue_04.png') no-repeat;
		background-position: -14px -4px;
	}
	#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a,
	#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a:hover {
		background: url('images/menue_05.png') no-repeat;
		background-position: -5px 0px;
	}
	#nav-main .menu-kontakt-anfahrt[class~="active"] > a,
	#nav-main .menu-kontakt-anfahrt[class~="active"] > a:hover {
		background: url('images/menue_06.png') no-repeat;
		background-position: 0px 0;
		background-size: 100%;
	}
	

}


@media only screen and (max-width: 767px){
 
	body {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#wrap { background-size: 150%; background-position: center top; }
	
	#banner { height: auto; }
	
	
	#betriebsruhe {
		padding-top: 60px;
	}
	#logo-wrap { 
		margin: 80px 20% 0 30%;  /*Normal*/
		/* margin: 200px 20% 0 30%; */ /*Bei Betriebsruhe*/
		min-width: 60%;
		max-width: 60%;
	 }
	 
	
	#nav-main ul { margin: 40px 40px; text-align: center; }	
	#nav-main ul li { padding: 0 30px; }
	
	#nav-main .active > a, 
	#nav-main .active > a:hover { background-position: center 10px;	}
	
	#nav-main .menu-restaurant-speisekarte[class~="active"] > a,
	#nav-main .menu-restaurant-speisekarte[class~="active"] > a:hover,
	#nav-main .menu-kontakt-anfahrt[class~="active"] > a,
	#nav-main .menu-kontakt-anfahrt[class~="active"] > a:hover,
	#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a,
	#nav-main .menu-wernigeroeder-maerchenweg[class~="active"] > a:hover {
		background: url('images/menue_06.png') no-repeat;
		background-position: center 2px;
	}
	#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a,
	#nav-main .menu-sehenswertes-tipps-fuer-wanderer[class~="active"] > a:hover,
	#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a,
	#nav-main .menu-hochzeiten-andere-feierlichkeiten[class~="active"] > a:hover {
		background: url('images/menue_07.png') no-repeat;
		background-position: center 10px;
	}	
	
	#main {	padding: 12px 12px;  clear: both; }	
	h2, h2:first-child { margin-top: 40px; }	
	.multicolumn { column-count: 1; }
	
	#footer { 
		padding: 80px 12px 60px 12px;
		font-size: 0.9em; 
		background-size: contain;
	}
 	
	#footer1, #footer2 { margin-bottom: 40px; overflow: hidden; }	

}




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

	#logo-wrap { 
		margin: 50px 5% 0 15%;  /*Normal*/
		/* margin: 200px 20% 0 30%;*/   /*Bei Betriebsruhe*/
		min-width: 80%;
		max-width: 80%;
	 }	
	
 
}