/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/* ----------------------------------------- CSS-Reset Ende ----------------------------------------- */
/* ----------------------------------------- CSS-Reset Ende ----------------------------------------- */

/* Hintergund Orangerie	#B79B5E nach weiß
Schriftfarbe Wappen #4B4B4B */
body { 
	background: linear-gradient(to bottom right, #B79B5E, white); 
	color: #4B4B4B;
	padding: 2%;
	}

/* --- über dem body obere Ecke rund --- */
.page-wrapper { 
	margin: 1%;
	background: transparent url('../bild/Gera_Rathaus_klein.JPG') no-repeat top left;
	border-radius: 1em 0em 0em 0em;
	}

/* --- oberer Bereich --- */	
.intro {
	background: transparent url('../bild/Wappen_Gera_klein.gif') no-repeat top right;
}

section header { 
	position: absolute;
	width: 20%;
	float: left;
	}
	
section article {
	box-shadow: 1em 1em 1em gray;
	}
	
/* ---- Überschrift Blütenhintergrund --- */
h1	{
	position: relative;
	width: 100%;
	background:linear-gradient(to bottom right, #C5B4C7, white);
	border-radius: 0.2em;
	margin: 8% 3% 0% 8%  ; 
	padding: 2%;
	text-align: center;
	font-family: 'Indie Flower', cursive;
	font-weight: 800;
	font-size: 300%;
	color: #B79B5E;
	box-shadow: 1em 1.5em 1.5em lightgray;
	text-shadow: 0.1em 0.1em 0 #bcbcbc, 0.1em 0.1em 0 #9c9c9c;
	}	

h2	{
	position: absolute;
	width: 100%;
	margin: 3% 0% 0% 0%  ; 
	padding: 2% 20%;
	text-align: center;
	font-family: 'Indie Flower', cursive;
	font-weight: 700;
	font-size: 180%;
	background: transparent;
	color: gray;
	}		


article h3 	{
	font-family: 'Shadows Into Light', cursive;
	font-weight: 400;
	font-size: 150%;	
	margin: 2%  1% ; 
	padding: 1%;
	border: 0.01em solid lightgray;
	background: linear-gradient(to bottom right, lightgray, white);
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.1em 0.1em 0.1em gray;
	}
	
/* --- Schrifteinstellungen Basisgröße Text = 16px =  1em = 1rem = 100% wird vererbt --- */
	
p {
	font-family: 'Open Sans', Raleway, sans-serif;
	font-weight:400;
	font-size: 120% ;
	font-style: italic;
	letter-spacing: 0.1em;
	padding: 1%;
	margin: 2%  0%; 
	font-variant: small-caps;	/* Kapitälchen, erster Buchstabe der Zeile größer, aber Schrift  wird auch zarter */
	text-indent: -4em;		/* negativer Einzug, erster Buchstabe nach außen  */
	text-align: justify;		/* Blocksatz */
	}

/* --- ersten Buchstaben je Absatz hervorheben --- */	
p::first-letter { 
	font-family: 'Shadows Into Light', cursive;
	font-size: 150%;
	letter-spacing: 0.3em;
	margin: 2%;
	text-shadow: 0.1em 0.1em 0.1em gray;
	border: 0.01em solid lightgray;
	background:linear-gradient(to bottom right, lightgray, white);
	box-shadow: 0.1em 0.1em 0.1em gray;
	color: darkred;
	}

section a[href] {
	font-weight: bold; 
	}
	
/* --- Pfeil (⇒) + Leerzeichen vor Links + Abstand links --- */	
section a[href]:before { 
	content: ' \0021D2 \a0 '; 
	padding-left: 10%;
	}

/* --- Abstand rechts --- */	
section a[href]:after { 
	content: ' \a0 '; 
	padding-right: 10%;
	}
	
/*--- Begriffserklärungen --- */	
abbr {
	color: darkblue;
	text-decoration: none;
	}
	 
/* --- Linkgestaltung --- */
a:link {
		color: darkgreen;
		text-decoration: none; 
	}

/* --- Links --- */	
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: darkblue;
	}
a:hover, a:focus, a:active { 
	text-decoration: underline; 
	color: darkred;
	}
/* --- gedrückter Link allgemein --- */
a:active {
	background: lightyellow;
	border-color: olive white white olive;
	border-style: solid;
	border-width: medium;						/* auch thick; thin; medium */
	text-decoration: none;	
	}

/* --- Gestaltung der Textboxen --- */

.summary {
	width: 45%;
	background: linear-gradient(to bottom right, lemonchiffon, white);
	padding: 3% ;
	float: right;
	margin: 1% 19% 2% 0% ;
	border-radius: 1em;
	}	

/* --- Anpassung an andere Boxbreite --- */	
.summary p {
	margin: 1%  4%  4%  17% ;
	text-indent: -8em;		/* negativer Einzug, erster Buchstabe nach außen  */
	}		
	
.summary p:first-child::before {
    content: "Read this - ";
}

.summary  p:last-child {
	color: darkred;
	}
	
.preamble {
	position: relative;
	clear: both;
	background: linear-gradient(to bottom right, lemonchiffon, white);
	width: 59%;
	margin: 1% 0% 2% 30% ; 
	padding: 2% 5%;
	border-radius: 1em;
	}

/* --- Anpassung an andere Boxbreite --- */
.preamble p {
	text-indent: -3.5em;		/* negativer Einzug, erster Buchstabe nach außen  */
}

.preamble p:last-child {
	color: darkblue;
	}	
	
.main {
	text-decoration: none;
	background:linear-gradient(to bottom right, lemonchiffon, white);
	margin: 0%  1% 1% 30% ; 
	padding: 2%;
	float: right; 
	box-shadow: 1em 1em 1em gray;
	border-radius: 1em;
	}
	
/* --- Doppelpfeil (⇒) + Abstand nach links für alle Links --- */	
.main a[href]:before { 
	content: '\0000BB \a0';  
	padding-left: 1em;
	}

/* --- Artikel Abschnitte --- */	
.explanation {
	margin: 2% 1% 0% 2%; 
	padding: 2%;	
	}
 	
.participation {
	margin: 0% 2% 0% 2%; 
	padding: 2%;
	}
	
.benefits {
	margin: 0% 2% 0% 2%;
	padding: 2% ;
	}
	
/* --- 2-Spalten-Layout --- */
.requirements {
	margin: 0% 2% 0% 0% ; 
	padding: 4%;
	width: 92%;
	column-count: 2; 
	column-gap: 2em; 
	text-align: justify; 
	hyphens: auto;
	orphans: 3; 
	widows: 3;
	}
	
.requirements p {
	font-family: 'Open Sans', Raleway, sans-serif;
	font-weight: 400;
	font-size: 120% ;
	font-style: italic;
	letter-spacing: 0.1em;
	padding: 2%;
	margin: 2%  1% 2% 1%; 
	font-variant: small-caps;	/* Kapitälchen, erster Buchstabe der Zeile größer, aber Schrift  wird auch zarter */
	text-align: justify;		/* Blocksatz */
	text-indent: -0.5em;		/* Einzug */
	}
	
/* --- zurücksetzen ersten Buchstaben je Absatz hervorheben --- */	
.requirements p::first-letter { 
	
	font-family: 'Open Sans', Raleway, sans-serif;
	font-size: 120%;
	letter-spacing: 0.1em;
	margin: 2%  0%; 
	text-shadow: none;
	border: none;
	background: none;
	box-shadow: none;
	color: #4B4B4B;
	}

.requirements p:first-child {
	margin: 4% 1% 2% 0%;
	}
	
.requirements p:last-child {
	margin: 2% 1% 22% 0%;
	font-weight: bold; 
	}

/* --- zusätzliches passendes Bild einfügen, kann nicht formatiert werden --- */	
.requirements::after {
	content: url('../bild/Salvatorkirche_klein.JPG');
	padding: 10%;
	}
	
/*---------- Navigaton im aside-Bereich -------------------------------------*/
aside 
	{
	position: absolute;
	width: 26%;
	color: black;
	font-family: 'Dancing Script', cursive;
	font-weight: 400;
	font-size: 130%;
	font-weight: bold; 
	letter-spacing: 0.1em;
	text-decoration: none;
	text-shadow: 0.1em 0.1em 0.1em gray;
	}

aside .wrapper { 	
	background: linear-gradient(to bottom right, #B79B5E, white);
	border: 0.01em solid gray;
	box-shadow: 0.3em 0.3em 0.3em gray;
	border-radius: 1em;
	}
	
.sidebar h3 {
	margin: 4% 1% 4% 1%; 
	padding: 2%;
	background: linear-gradient(to bottom right, gray, white);
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.2em 0.2em 0.2em gray;
	}

.sidebar h3.select::after {
	content: "vom original Zen-Garden"; 
	color: darkred;
	padding: 1em;
	}
	
.sidebar li {
	margin: 3% ; 
	padding: 1% 1% 1% 3%;
	box-shadow: 0.1em 0.1em 0.1em gray;
	color: gray;
	}

/* --- Zurücksetzen der allg. Linkangaben --- */	
aside a:active {
	background: none;
	border-color: transparent;
	border-style: none;
	text-decoration: none;	
	}	

aside li:active {
	color: darkred;
	background: wheat;
	border-color: olive white white olive;
	padding: 1% 2%;
	border-style: solid;
	border-width: medium;						/* auch thick; thin; medium */
	text-decoration: none;	
	}

aside li a:visited {
	color:gray;
	}
	
aside a:hover {
	color: darkred;
	}	
	
.design-selection li a {
	color: darkgreen;
	}
	
.design-selection li a:first-child {
	padding: 0 1em 0 0;
	}
	
.design-selection li a:last-child {
	color: darkblue;
	}
	
.design-selection:before {
	content: url('../bild/Theater_innen.jpg' ); 
	padding: 2%;
	}
	
.design-selection:after {
	content: url('../bild/Theater_aussen.jpg'); 
	padding: 2%;
	}

.design-archives li a {
	color: darkblue;
	}

.design-archives::after {
	content: url('../bild/Schloss Osterstein_heute.jpg'); 
	padding: 2%;
	}
	
.zen-resources li a {
	color: darkred;
	}
	
.zen-resources::after {
	content: url('../bild/Schloss Osterstein_historisch.jpg'); 
	padding: 3%;
	}	

/* --- Linkbereich Seitenfuß--- */	
footer {
	position: relative;
	width: 92%;
	margin: 2%; 
	padding: 2% 2% 2% 2%;
	word-spacing: 3em;
	background: #FFF url('../bild/Orangerie_Tulpenbaum_klein.JPG') no-repeat bottom right; 
	font-size:120%;
	font-weight: bold;
	border: 0.01em solid lightgray;
	box-shadow: 1em 1em 1em gray;
	font-family: Raleway, 'Open Sans', sans-serif;
	font-weight:400;
	text-decoration: none;
	text-shadow: 0.1em 0.1em 0.1em gray;
	clear: both;
	}
/* --- Anordnung der Fußzeilenelemente untereinander, da ggf. vom Bild verdeckt --- */	
footer a {
	display: block;
	width: 15%;
	font-size: 100%;
	padding: 1% 0%;
	text-align: left;
	}

footer a:active {
	background: beige;
	border-color: olive white white olive;
	width: 10%;
	padding: 1% 5% 1% 0%;
	border-style: solid;
	border-width: medium;
	text-decoration: none;
	text-shadow: none;
	}

	
/* --- zusätzlicher Eckenfüller für diese Auflösung --- */
.extra1 {
	position: absolute; 
	
	background: blue url('../bild/Gera_Untermhaus_Marienkirche_klein.JPG') no-repeat bottom left; 
	top: 310%;
	left: 2%; 
	width: 28%;
	height: 35%; 			/* 375px; */
	}	
	
	
	
	
	
	
	
/* --- min-device-width: 640px ----------------------------------*/
/* --- min-device-width: 640px ----------------------------------*/

@media only screen and (max-device-width: 640px) {
	
/* --- alle floats löschen --- */	
boddy {	
	clear:both;
	}

/* --- über dem body --- */
.page-wrapper { 
	background: url('../bild/Gera_Rathaus_640.JPG') no-repeat top left;
	border-radius: 0em 0em 0em 0em;
	}

/* --- oberer Bereich --- */	
.intro {
	background: url('../bild/Wappen_Gera_640.gif') no-repeat top right;
}

section article {
	width: 50%;
	margin: 2% ;
	box-shadow: 0.5em 0.5em 0.5em gray;
	
	}

/* --- über dem body --- */
.page-wrapper { 
	margin: 1%;
	background: transparent url('../bild/Gera_Rathaus_640.JPG') no-repeat top left;
	}
/* --- oberer Bereich --- */	
.intro {
	background: url('../bild/Wappen_Gera_640.gif') no-repeat top right;
	}

section header { 
	position: absolute;
	width: 20%;
	}
	
section article {
	width: 80%;
	margin: 2% ;
	box-shadow: 0.5em 0.5em 0.5em gray;
	}
	
/* ---- Überschrift Blütenhintergrund --- */
h1	{
	width: 200%;
	position: static;
	font-size: 170%;
	box-shadow: 1em 1.5em 1.5em lightgray;
	text-shadow: 0.1em 0.1em 0 #bcbcbc, 0.1em 0.1em 0 #9c9c9c;
	}	

h2	{
	width: 180%;
	margin: 7% 0% 0% 13%; 	
	font-size: 120%;
	}		

article h3 	{
	font-size: 100%;	
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.1em 0.1em 0.1em gray;
	}
	
/* --- Schrifteinstellungen Basisgröße Text = 16px =  1em = 1rem = 100% wird vererbt --- */
	
p {
	font-size: 80% ;
	font-style: italic;
	letter-spacing: 0.1em;
	text-indent: -3em;
	}

/* --- ersten Buchstaben je Absatz hervorheben --- */	
p::first-letter { 
	font-size: 100%;
	margin: 2% 2% 2% 4%;
	}

/* --- Absatzgestaltung --- */

.summary {
	width: 20%;
	margin: 0%  20% 2% 1%;
	padding: 2% 4%;
	}	
	
.summary p {
	text-indent: -1.5em;
	padding: 2% 0%;
	}		
	
.preamble {
	position: relative;
	width: 36%;
	margin: 14%  5% 2%  52%;
	padding: 2% 5%;
	}

.preamble p {
	text-indent: -2em;
	}
	
.main {
	margin: 1%  1% 1% 1% ; 
	float: none; 
	box-shadow: 0.5em 0.5em 0.5em gray;
	
	}
	
/* --- Artikel Abschnitte --- */	
	
/* --- 2-Spalten-Layout --- */
	
.requirements p {
	font-size: 80% ;
	}
	
/* --- zurücksetzen ersten Buchstaben je Absatz hervorheben --- */	
.requirements p::first-letter { 
	font-size: 80%;
	}

	/* --- zusätzliches passendes Bild einfügen, kann nicht formatiert werden --- */	
.requirements::after {
	content: url('../bild/Salvatorkirche_640.JPG'); padding-left: 25%;
	}
/*---------- Navigaton im aside-Bereich -------------------------------------*/
aside 
	{
	margin-left: 11%;
	position: static;
	width: 78%;
	font-size: 120%;
	}

/* --- Einfügen von Hinweistext mit Abstand linker Rand --- */
/* --- Zurücksetzen des Eintrages unter select-Leiste --- */
.design-selection nav::before {
	content: "";
	}
	
.sidebar h3.select::after {
	content: "vom orgiginal Zen-Garden"; 
	padding: 2em;
	}
	

/* --- Zurücksetzen der Linkangaben --- */	
aside a:active {
	background: none;
	border-color: transparent;
	border-style: none;
	text-decoration: none;	
	}	

aside li:active {
	background: wheat;
	}
	
.design-selection:before {
	content: url('../bild/Theater_innen.jpg' );  padding-right: 1em;
	}
	
.design-selection:after {
	content: url('../bild/Theater_aussen.jpg'); padding-right: 1em;
	}

.design-archives::after {
	content: url('../bild/Schloss Osterstein_heute.jpg');
	}

.zen-resources::after {
	content: url('../bild/Schloss Osterstein_historisch.jpg');
	}	
	
/* --- Linkbereich Seitenfuß mit Hintergrundbild--- */	
footer {
	position: static;
	word-spacing: 1em;
	background: #FFF url('../bild/Orangerie_Tulpenbaum_640.JPG') no-repeat bottom right; 
	font-size:60%;
	}

/* --- abschalten Eckenfüller für diese Auflösung --- */
.extra1 {
	background: transparent ; 
	}	
.extra4 {
	background: transparent ; 
	}	
} /* --- Ende min-device-width: 640px --- */




/* --- min-device-width: 320px ----------------------------------*/
/* --- min-device-width: 320px ----------------------------------*/

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

/* --- alle floats löschen --- */	
boddy {	
	clear:both;
	}
	

/* --- über dem body --- */
.page-wrapper { 
	background: url('../bild/Gera_Rathaus_320.JPG') no-repeat top left;
	border-radius: 0em 0em 0em 0em;
	}

/* --- oberer Bereich --- */	
.intro {
	background: url('../bild/Wappen_Gera_320.gif') no-repeat top right;
}

section article {
	width: 50%;
	margin: 2% ;
	box-shadow: 0.5em 0.5em 0.5em gray;
	
	}
	
/* ---- Überschrift Blütenhintergrund --- */
h1	{
	position: absolute;
	margin: 15% 1% 0% 15%  ;
	width: 200%;
	font-size: 100%;
	box-shadow: 1em 1.5em 1em lightgray;
	text-shadow: 0.1em 0.1em 0 #bcbcbc, 0.1em 0.1em 0 #9c9c9c;
	}	

h2	{
	width: 250%;
	margin: 55% 0% 0% 0%; 
	font-size: 65%;
	}		


article h3 	{
	font-size: 80%;	
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.1em 0.1em 0.1em gray;
	}
	
/* --- Schrifteinstellungen Basisgröße Text = 16px =  1em = 1rem = 100% wird vererbt --- */
	
p {
	font-size: 80% ;
	font-style: italic;
	letter-spacing: 0.1em;
	text-indent: -0.5em;		/* Einzug */
	}

/* --- ersten Buchstaben je Absatz hervorheben --- */	
p::first-letter { 
	font-family: 'Open Sans', Raleway, sans-serif;
	font-size: 80%;
	letter-spacing: 0.1em;
	margin: 2%  0%; 
	text-shadow: none;
	border: none;
	background: none;
	box-shadow: none;
	color: #4B4B4B;
	}
	
a:active {
	background: none;
	border-color: transparent;
	}
	
/* --- Absatzgestaltung --- */

.summary {
	width: 35%;
	margin: 25% 1% 5% 1% ;
	}	
	
.summary p {
	margin: 1%  5%;
	text-indent: -0.5em;		/* Einzug */
	}		
	
.preamble {
	position: static;
	width: 94%;
	margin: 1% 1% 1% 1% ; 
	padding: 2% 2%;
	}
	
.preamble p {
	margin: 1%  5%;
	text-indent: -0.5em;		/* Einzug */
	}		

.main {
	margin: 1%  1% 1% 1% ; 
	float: none; 
	box-shadow: 0.5em 0.5em 0.5em gray;
	
	}
	
/* --- Artikel Abschnitte --- */	
	
/* --- 1-Spalten-Layout --- */

.requirements {
	column-count: 1; 
}
.requirements p {
	font-size: 80% ;
	}
	
/* --- zurücksetzen ersten Buchstaben je Absatz hervorheben --- */	
.requirements p::first-letter { 
	font-size: 100%;
	}

	/* --- zusätzliches passendes Bild einfügen, kann nicht formatiert werden --- */	
.requirements::after {
	content: url('../bild/Salvatorkirche_640.JPG');
	}
/*---------- Navigaton im aside-Bereich -------------------------------------*/
aside 
	{
	margin: 1%;
	padding: 0;
	position: static;
	height: 75%;
	width: 96%;
	font-size: 80%;
	}
aside .wrapper { 	
	margin: 0%; 
	padding: 0%;
	}
	
/* --- Zurücksetzen des Eintrages unter select-Leiste --- */
.design-selection nav::before {
	content: "";
	}
	
.sidebar h3.select::after {
	content: "vom original Zen-Garden"; 
	color: darkred;
	padding: 0.5em;
	}
	
/* --- Zurücksetzen der Linkangaben --- */	
aside a:active {
	background: none;
	border-color: transparent;
	border-style: none;
	text-decoration: none;	
	}	

aside li:active {
	background: wheat;
	text-decoration: none;	
	}
	
.design-selection:before {
	content: url('../bild/Theater_innen_320.jpg' ); 
	}
	
.design-selection:after {
	content: url('../bild/Theater_aussen_320.jpg');
	}

.design-archives::after {
	content: url('../bild/Schloss Osterstein_heute_320.jpg');
	}

.zen-resources::after {
	content: url('../bild/Schloss Osterstein_historisch_320.jpg');
	}	
	
/* --- Linkbereich Seitenfuß--- */	
footer {
	position: static;
	word-spacing: 1em;
	background: #FFF url('../bild/Orangerie_Tulpenbaum_320.JPG') no-repeat bottom right; 
	font-size:50%;
	}

footer a:active {
	background: none;
	border-color: transparent;
	}
	
/* --- abschalten Eckenfüller für diese Auflösung --- */
.extra1 {
	background: transparent ; 
	}	
.extra4 {
	background: transparent ; 
	}	
	
	
} /* --- Ende min-device-width: 320px --- */