/*
Theme Name: Graphy Child
Template: graphy
Author: abrightclearweb
Author URI: http://www.abrightclearweb.com
Description: A child theme for Twenty Sixteen
Version: 1.0.1458777509
Updated: 2016-03-24 00:58:29
*/

@charset "UTF-8";


/* ================ Anpassungen fuer die Kontakformulare ==============  */

/* Listet die Auswahlboxen untereinander, sie wuerden sonst alle nebeneinandner angezeigt werden */
.wpcf7-list-item {
    display: block;
}

/* Umrahmt die ganze Box und unterlegt sie mit einem Schatten */
div.wpcf7 {
	background-color: #FFFFFF;
	color: #444444;
	border: 1px solid #DDD;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background: -moz-linear-gradient(top, #F9F9F9, #FFF);    
	background: -webkit-linear-gradient(top, #F9F9F9, #fff);
	background: -ms-linear-gradient(top, #F9F9F9, #fff);
	background: -o-linear-gradient(top, #F9F9F9, #fff);
	box-shadow: 1px 2px 4px rgba(0,0,0, .2);    
	float: left;
	padding: 15px;
	margin-right: 4px;
	overflow: hidden;
	width: auto;
}

/* Formatiert den Text im Formular */
.wpcf7 p {
	font-size: 90%;
	clear: both;
	line-height: 23px;
	margin: 0 0 1.625em;
    overflow: hidden;
    position: relative;
}

/* ============= Eigene Klassen (sollten auch in die editor-style.css kopiert werdem) =============== */

/* Diese Klassen koennen dann z.B. mit dem TinyMCE Advanced (Plugin) unter Format zugwiesen werden */


/* ======= Aufzaehlungszeichen formatieren ======= */
/* ul fuer Bullets und ol fuer Nummerierungen, li dann fuer die einzelnen Elemente einer Liste.
Wenn das Bullett, bzw. die Zahl eine andere Farbe haben soll als der dann folgende Text, muss
zunaechst die gewuenschte Farbe dem ul, bzw. ol zugwiesen werden. Z.B. #content markiert davor auf welchen
Bereich es sich bezieht, damit nicht ueberall dann die Farben geaendert werden.
Damit die Liste dann wieder in normaler (oder anderer gewuenschter Farbe) erscheint, muss sie dann im 
laufenden Text wieder rueckformatiert werden. Dazu habe ich die Klasse ".a-liste-schwarz" mit der gewuenschten Farbe
hier definiert. Sie muss dann noch im Text jedem Listenelement zugewiesen werden. Hier koenten auch noch
weitere Formatierungsklassen angelegt werden. Gut passendesn Rot wäre: #c91a1a
*/

#content ul {
	list-style-type: square;	
	color: #22C23A;
}

#content ol {
		
	color: #22C23A;
}

.a-liste-schwarz {
	color: #333;
}

/* weiss-gruen fuer Worte oder Absaetze
"o" = Abstand oben,
"u" = Abstand unten,
"m" = Abstand Mitte und Kombinationen
"h" = Ohne Abstand oben
"display=block;" muss gesetzt werden, damit in diesem Theme nicht nur die erste Zeile,
ondern alle Zeilen des Absatzes wie gewuenscht verschoben werden.
Reine Farbe im Hintergrund waere: background-color: #22C23A;
Gruener Farbverlauf: background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
 */

.b-weiss-gruen-wort {       /* fuer Markierungen einzelner Worte */
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
padding-left: 10px;
padding-right: 10px;
}

.b-weiss-gruen-o {
display: block; 
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
margin-top: 20px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.b-weiss-gruen-u {
display: block;
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
margin-bottom: 20px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

.b-weiss-gruen-ou {
display: block;
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
margin-top: 35px;
margin-bottom: 24px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

.b-weiss-gruen-ouh {
display: block;
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
margin-bottom: 24px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

.b-weiss-gruen-oum {
display: block;
color: #ffffff;
background-color: #22C23A;
background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
margin-top: 22px;
margin-bottom: 22px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

/* Rand-Abstaende in Listen - funktioniert so nicht */

.c-bullets-left-bottom {
margin-left: -15px;
padding-bottom: 10px;
}

.c-bullets-left {
margin-left: -15px;
}

/* Negative Margins z.B. fuer Listen, Achtung ist nicht mehr 22px */

.f-minus-top-22 {
	display: block;	
	margin-top: -23px;
}
.f-minus-bottom-22 {
	display: block;	
	margin-bottom: -23px;
}

@media screen and (min-width: 780px) {
.f-minus-top-22 {
	display: block;	
	margin-top: -25px;
}
.f-minus-bottom-22 {
	display: block;	
	margin-bottom: -25px;
}
}

/* Extra Paddings z.B. fuer Listen */

.d-extra-bottom-5 {
display: block;
padding-bottom: 5px;
}

.d-extra-bottom-10 {
display: block;
padding-bottom: 10px;
}

.d-extra-bottom-15 {
display: block;
padding-bottom: 15px;
}

.d-extra-bottom-20 {
display: block;
padding-bottom: 20px;
}

.d-extra-top-5 {
display: block;
padding-top: 5px;
}

.d-extra-top-10 {
display: block;
padding-top: 10px;
}

.d-extra-top-15 {
display: block;
padding-top: 15px;
}

.d-extra-top-20 {
display: block;
padding-top: 20px;
}

/* Hyperlinks z.B. fuer Listen */

.e-font-link {
font-weight: bold;
color: #8DB45C !important;
}

.e-font-link:focus, .e-font-link:active, .e-font-link:hover {
color: #CC0000 !important;
text-decoration: underline !important;
}

/* ===== Button zum Senden vom Kontaktformular */

button, input[type="button"], input[type="reset"], input[type="submit"] {
background-color: #29C43F;
}


/* ================ Schriften =============== */

/* Hauptschrift */
body,
button,
input,
select,
textarea {
	color: #333;
	font-family: 'Noto Serif', Lora, serif;
	font-size: 16px;
	line-height: 24px;
} 

/* Schrift Menue-Leiste */
.main-navigation {
	font-family: 'Noto Serif', Lora, cursive;
	letter-spacing: -0.01em;
	position: relative;
}

/* Seiten-Titel-Schrift mit Schatten */
.site-title {
	font-family: 'Cherry Swash', Bitter, serif;
	text-shadow: 4px 4px 4px #aaa;
	letter-spacing: -0.01em;
}

/* Seiten-Unter-Titel-Schrift */

.site-description {
    font-size: 16px;
}

@media screen and (min-width: 780px) {
.site-description {
    font-size: 20px;
	letter-spacing: 0.01em;
	}
}

/* Haupueberschrift jeder Seite */
.entry-title {
	font-size: 26px;
	/* letter-spacing: 0.01em; */
	line-height: 34px;
	margin-bottom: 8px;
	text-align: center;
	display: block;
	color: #FFFFFF;
	background-color: #22C23A;
	background: linear-gradient(to top right, rgb(0,178,27), rgb(0,242,36));
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 780px) {
	.entry-title {
		font-size: 34px;
		line-height: 42px;
		margin-bottom: 12px;
	}
}

/* Ueberschriften */
.entry-content h3, .comment-content h3 {
	font-size: 18px;
	letter-spacing: 0.01em;
	line-height: 24px;
	margin-bottom: 24px;
	margin-top: 0px;
}

@media screen and (min-width: 780px) {
	.entry-content h3 {
	font-size: 19px;
	letter-spacing: 0.02em;
	line-height: 28px;
	margin-bottom: 28px;
	margin-top: 0px;
	}
}
/* Das grosse Anfuehrungszeichen bei den Zitaten */
.entry-content blockquote::before, .comment-content blockquote::before {
    color: #A7E2AF;
    content: "“";
    font-family: Georgia,serif;
    font-size: 60px;
    left: -5px;
    line-height: 1;
    position: absolute;
    top: 0;
}
@media screen and (min-width: 780px) {
	.entry-content blockquote:before {
	font-size: 90px;
	}
}

/* Widget - Ueberschriften */

.widget h2 {
	font-size: 16px;
	text-align: left;
	letter-spacing: 0.01em;
	margin-bottom: 12px;
}
@media screen and (min-width: 780px) {
	.widget h2 {
	font-size: 18px;
	text-align: left;
	}
}

.widget h3 {
	font-size: 15px;
	text-align: left;
	letter-spacing: 0.01em;
	margin-bottom: 12px;
}
@media screen and (min-width: 780px) {
	.widget h3 {
	font-size: 16px;
	text-align: left;
	}
}

/* Weite der Untermenues variieren, Standard war 200px */
.main-navigation ul ul {
	width: 200px;
}


/*Weitere Google-Schriften einbinden: Den in Google erzeugten Code mit den ausgwaehlten Schriften
oben in den Head-Bereich der header.php des Childs eintragen. Ggf. mehrere Schriften zusammen fassen
in einem Link. Dann hier in der CSS-Datei des Childs die Schriften entsprechend zuweisen.
Beispiel fuer Google-Code mit zwei Schriften:
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic|Cherry+Swash' rel='stylesheet' type='text/css'>
 */


/* ============== Silbentrennung */
body {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}


/* ===== Blocksatz: ab Weite 480px im normalen Test und im Widgeet-Bereich, z.B. rechte Seitenleiste */
@media screen and (min-width: 480px) {
.entry-content {
   text-align: justify;
	}
.widget{
   text-align: justify;
	}
}

/* Widget - Textausrichtung links im Widget-Bereich ab Weite 960px */
@media screen and (min-width: 960px) {
	.widget {
	text-align: left;
	}
}


/* ===== Header-Fotos:
Das Folgende ueberschreibt die Einstellungen fuer Header-Fotos fuer Breiten unter 780px und setzt sie genauso
wie bie Weite ab 780px. Im Original CSS wurden die Fots links und rechts abgeschnitten bei kleineren Aufloesungen.
Mit dieser Einstellung werden die Header Fotos immer komplett angezeigt, lediglich skalliert.
Blocksatz */

.header-image img {
    margin-left: 0px;
	margin-right: 0px;
    max-width: 100%;
    width: 100%;
}


/* ===== Bilder im Widget-Bereich: Bei Bedarf aktivieren (sieht aber nicht so gut aus, wie urspruenglich gedacht).
Bilder ab Weite 960px im Widget-Bereich werden groesser angezeigt.
Wenn dies fuer einzelne Bilder nicht geschehen soll, im Wordpress-Frontend
im Bilder-Dialog einzeln im Feld linker Rand "0" eintragen.
Dazu muss das Plugin "Advanced Image Styles" installiert sein.
Einstellunge "margin-right" bewirken nichts. Der rechte Rand wird ueber "max-width" gesteuert

@media screen and (min-width: 960px) {
.widget img {
    margin-left: -10%;
	max-width: 120%;
	}
}
*/

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

/* Maximale Weite fuer den Text setzen und Silbentrennung ausschalten */
.site-info {
	max-width:900px;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-o-hyphens: none;
	hyphens: none;
}

/* Letzte Zeile im Footer formatieren */

.site-copyright {
	font-size: 13px;
	margin-top: 10px;
	margin-bottom: 15px;
	}
	
@media screen and (min-width: 780px) {
.site-copyright {
	font-size: 13px;
	margin-top: 2px;
	margin-bottom: 30px;
	}
}

/* ===== Grosse Bildschirme:
- Rand oben by Wide-Layout ueber 1330px und Wiederholungs-Bitmap fuer Struktur als Rahmen um die eigentliche Seite.
- Wide Layout - Begrenzungsschatten nur sichtbar bei grossen Bildschirmen und Hintergrund-Farbe (weiss)
innerhalb der maximalen Weite.
- Und Schriftgrösse und Abstaende fuer letzte Zeile im Footer bei Wide-Layout */

@media only screen and (min-width:1330px) {
html {
	padding-top: 20px;
	}
body {
	background: url("/wp-content/uploads/2016/03/body-bg.png") repeat;
	}
.site {
    max-width: 1260px;
	background-color: #fff;
	width: 100%;
	-webkit-box-shadow: 0px 0px 15px #888;
	-moz-box-shadow: 0px 0px 15px #888;
	box-shadow: 0px 0px 15px #888;
}
.site-copyright {
	font-size: 13px;
	margin-top: 2px;
	padding-bottom: 28px;
}
}