/*
	Theme Name: Mänziger Zytig
	Theme URI: http://www.maenziger-zytig.ch
	Description: HTML5 Theme für Mänziger Zytig Online
	Version: 0.5
	Author: Dave Spengeler
	Author URI: http://www.davespengeler.ch

*/

/*
===========================
INHALT:

01 Standards
02 Typographie
03 Layout
04 Spezifisches Layout 
05 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Standards ------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{position:relative;}
body 				{background:#fff;}
* 					{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
::selection 		{background: rgba(136,186,34,0.25); /* Safari */ }
::-moz-selection 	{background: rgba(136,186,34,0.25); /* Firefox */ }
a, a:hover 			{-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
html, body 			{ height: 100%;}

 
/* ---------------------------------------------------------------------------------------------------------- 
02 Typographie ----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*
14 / 16	= 0.875em 	(14px)
16 / 16	= 1em 		(16px)
18 / 16 = 1.125em 	(18px)
21 / 16 = 1.3125em	(21px)
24 / 16 = 1.5em 	(24px)
30 / 16 = 1.875em 	(30px)
*/

body { 
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #777;
	font-size: 1em;
}

p, ul, ol {
	line-height: 180%;
}

p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 25px; }
p + ul { margin-top: 0px; }
ul + p { margin-top: 25px; }

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 { 
	font-weight:700;
	color: #777;
}


/* ------------ Sidebar ------------ */
.sidebar h2 {
	color: #8dc73f;
	display: block;
	border-bottom: 2px solid #8dc73f;
}

.sidebar ul li a {
	color: #777;
	text-decoration: none;
	line-height: 200%;
}


/* ------------ Inhalt ------------ */
.maincontent ul li {
	list-style-type: square;
	list-style-position: outside;
	margin-left: 2.25em;
	margin-bottom: 0.35em; 
}

.maincontent h2 {
	color: #8dc73f;
	font-size: 2.5em;
	margin-bottom: 15px;
}

.maincontent h3 {
	margin-top:25px;
}

.maincontent a {
	color: #8dc73f;
	text-decoration: none;
}
.maincontent a:hover {
	border-bottom: 1px solid #8dc73f;
}



/* ---------------------------------------------------------------------------------------------------------- 
03 Layout  --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	max-width: 960px;
	padding-bottom: -100px;
	margin: 0 auto;
	overflow: auto;
}

.topborder {height: 10px; background-color:#8dc73f; margin-bottom: -10px;}

/* ------------ E-Paper Button ------------ */
a.epaper {
	color: #FFF;
	text-decoration: none;
}

.epaper-button {
	position: absolute;
	text-align: center;
	top:10px;
	right: 0;
	width: 60px;
	height: 60px;
	background-color: #8dc73f;
}
.epaper-button:after {
		font-size: 0.85em;
		content: "Aktuelle Ausgabe lesen ➔";
		color: #8dc73f;
		position: absolute;
		top:20px;
		left:-185px;
}

.epaper-button svg {
	height: 45px;
	margin-top: 5px;
}


/* ------------ Header / Navigation ------------ */
header {overflow: auto; margin: 70px 0 45px;}

header h1.logo {
	float: left;
	background-image: url(/wp-content/uploads/logo.png);
	width: 415px;
	height: 63px;
	text-indent: -9999999px;	
}

.menu-hauptmenue-container {float:right; margin-top: 28px; overflow: auto;}
.menu-hauptmenue-container ul    {list-style-type: none;}
.menu-hauptmenue-container ul li {float: left; margin-left: 35px;}
.menu-hauptmenue-container ul li:first-child {margin-left: 0px;}
.menu-hauptmenue-container ul li a {color: #777; text-decoration: none; font-weight: 700;}
.menu-hauptmenue-container ul li a:hover {color: #444;}
.menu-hauptmenue-container ul li.current-menu-item a, .menu-hauptmenue-container ul li.current-page-ancestor a {color: #8dc73f;}


/* ------------ Landschaftsbilder ------------ */
.eyecatcher {
	width: 100%;
	height: 275px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 50px;
}

.zytig 		.eyecatcher {background-image: url(../../uploads/eyecatcher_1.jpg);}
.start 		.eyecatcher {background-image: url(../../uploads/eyecatcher_2.jpg);}
.redaktion 	.eyecatcher {background-image: url(../../uploads/eyecatcher_3.jpg);}
.verein 	.eyecatcher {background-image: url(../../uploads/eyecatcher_4.jpg);}
.kontakt	.eyecatcher {background-image: url(../../uploads/eyecatcher_5.jpg);}


/* ------------ Sidebar ------------ */
.sidebar {
    float: left;
    width: 200px;
    margin-right: 70px;
    height: 100%;
    overflow: hidden;
}

.sidebar .current_page_item {
	font-weight: 700;
}

/* ------------ Inhalt ------------ */
.maincontent {
    overflow: auto; 
    height: 100%;  
}

.content {
	    padding-bottom: 100px;
	    margin-bottom: 50px;
	    overflow: auto;
}


/* ------------ Footer ------------ */
footer {
	clear: both;
 	z-index: 10;
 	height: 100px;
 	margin-top: -100px;
 	background-color: #e5f0d4;
 	color: #8dc73f;
}

footer div.footerwrapper {
	padding-top: 25px;
	max-width: 960px;
	margin: 0 auto;
	overflow: auto;
}

footer div div.copyright {
	float: left;
}
footer div div.landschaftsbilder {
	float: right;
}

footer p {
	max-width: 960px;
	margin: 0 auto;
	font-size: 0.9em;
}

footer a {
    color: #777;
    text-decoration: none;
}


/* ---------------------------------------------------------------------------------------------------------- 
02 Spezifisches Layout --------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* ------------ Kontaktformulare (Mitglied werden & Kontakt) ------------ */

p + div.wpcf7 {
	margin-top: 25px;
}

div.wpcf7 {
	background-color: #f3f9eb;
	overflow: auto;
}

.wpcf7-form {
	width:100%;
	padding: 35px;
	margin: 0 auto;
}

input.wpcf7-text, input.wpcf7-number, textarea {
	background-color: rgba(255,255,255,0.65);
	width: 100%;
	border:0; 
	border-bottom: 1px solid #8dc73f;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #8dc73f;
	font-size: 1.25em;
}

input.wpcf7-submit {
	background-color: #8dc73f;
	color: #FFF;
	border: 0;
	padding: 15px 25px;
}
input.wpcf7-submit:hover {
	background-color: #FFF;
	color: #8dc73f;
}

input:focus, 
textarea:focus {
	outline: none;
	background-color: #FFF;
}

/* ------------ Kontaktadressen und Inseratepreise ------------ */
.content-wrap {
	overflow: auto;
	margin-bottom: 40px;
}
p + .content-wrap {
	margin-top:25px;
}

.drittel {
	width: 33.3%;
	min-width: 225px;
	margin-bottom:20px;
	float: left;
}
.halb {
	min-width: 215px;
	width: 50%;
	margin-bottom:20px;
	float: left;
}


/* ------------ Tabelle (Termine) ------------ */
/* !!! BUG – Da ".content" unter 568px "display:table" hat wird bei der Termin-Tabelle das horizontale Scollen aktiviert! Unschön...
Lösung 1: Positionierung der ".sidebar" ohne Tabellendarstellung lösen. (-> jQuery,flex-box oder eine Kopie des divs zeigen/verstecken.
Lösung 2: Tablle responsive so anpassen, dass Sie nicht so breit wird. */

.responsive-table				{overflow-y: auto; width: 100%;}
table							{width: 100%; min-width: 525px;}
table thead tr					{background: #8dc73f; color: #FFF; font-weight: 700;}	
table tbody tr:nth-child(odd)	{background: #f2f2f2;}
table tbody tr:nth-child(even)	{background: #dcdcdc;}
table tr td						{vertical-align:middle; padding: 5px;}


/* ------------ Portraits (Redaktion & Vorstand) ------------ */

div.portrait-wrapper {
	margin-top: 50px;
	overflow: hidden;
}
div.portrait-section-title {
	margin-bottom: 5px;
}
div.portrait-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
div.portrait {
    width: calc(100% * (1/6) - 30px);
	font-size:0.85em;
	margin: 25px 15px;
}
@media screen and (max-width:700px) {
	div.portrait {
    	width: calc(100% * (1/4) - 30px);
	}
}
@media screen and (max-width:568px) {
	div.portrait {
    	width: calc(100% * (1/2) - 30px);
	}
}

div.portrait img {
	max-width: 100%;
	height: auto;
	margin-bottom: 5px;
}



/* ---------------------------------------------------------------------------------------------------------- 
05 Media queries  -------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

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

	.content, .logo-wrapper, footer p {
		max-width: 100%;
		margin-left: 20px;
		margin-right: 20px;
	}
		
	.epaper-button {
		right:20px;
	}
	
	header h1.logo {
		float:none;
		max-width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.menu-hauptmenue-container {
		float: none;
		margin-left:20px;
	}

	.eyecatcher {
		 width: 100%;
		 height: 250px;
	}
	
	.wrapper {
		max-width: 100%;
	}
	
	header {
		margin-bottom: 25px;
	}
	
	.menu-hauptmenue-container {
		margin-top: 15px;
	}	
	
	footer div div.copyright,
	footer div div.landschaftsbilder {
	float:none;
	}	

}


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

	.sidebar {
		float: none; 
		width: 100%; 
		margin-bottom: 25px;
	} 
	.eyecatcher {
		 height: 200px;
	}


}


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

	.wpcf7 form {
		padding:25px 25px 15px 25px;
	}

	.content {
		display: table;
		table-layout: fixed;
	}
	
	.sidebar {
		display: table-footer-group;
	}
	
	.maincontent {
		max-width: 100%;
		margin-bottom: 25px;
	}
	.maincontent h2 {
		font-size: 2em;
	}
	
	body,input,textarea { 
		font-size: 0.9em;
	}
	
	.menu-hauptmenue-container {
		margin-top: 0;
		margin-bottom: 20px;
		margin-left: 0;
		text-align: center;
	}
	
	.menu-hauptmenue-container ul li {
		float:none;
		margin-left:0;
		border-bottom: 1px solid #777;
		line-height: 275%;
	}
	
	.menu-hauptmenue-container ul li:first-child {
		border-top: 1px solid #777;
	}
	
	h1.logo {
		background-position: center top;
		width: auto !important;
	}
		
	.eyecatcher {
		display: none;
	}
	
	.topborder {
		display: none;
	}

	.epaper-button svg {
		height: 25px;
		margin-top: 7px;
	}

	.epaper-button {
		position: relative;
		text-align: center;
		width: 100%;
		top:0;
		right:0;
	}
	
	.epaper-button:after {
		display: block; 
		content: "Aktuelle Ausgabe lesen";
		color: #FFF;
		position: inherit;
		top:inherit;
		left: inherit;
	}
		
	header {
		margin-top: 10px; 
		margin-bottom: 10px
	}
	
	footer p {
		font-size: 0.75em;
	}
footer div div.landschaftsbilder {
	display: none;
}

}