/* 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 ----------------------------------------- */

* {box-sizing: border-box;} 	/* bewirkt hier nichts Sonst entsteht ein ungewollter schmaler rechten Rand */

/* Hintergund Orangerie	#B79B5E nach weiß
Schriftfarbe Wappen #4B4B4B */
body { 
	background: linear-gradient(to bottom right, darkgreen, yellow); /* #B79B5E, white*/
	color: black ;/* Textfarbe überall, alt #4B4B4B; = Chronikgrau*/
	padding: 0.5%;		/* leiner rand um main */
	font-family: Verdana, sans-serif;
	/*display: block;*/
	line-height: 1;		/* Zeilenabstand */
	}


p 
	{
	
	/*font-variant: small-caps;	 Kapitälchen, Großbuchstaben, 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 */
	text-justify:auto;
	hyphens: auto;
	}

/* --- 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: 5%;
	}

/* --- Abstand rechts --- */	
section a[href]:after { 
	content: ' \a0 '; 
	padding-right: 1%;
	}
	
/*--- Begriffserklärungen NLP--- */	
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;	
	}

 /* unvisited link */
a:link {
  color: darkblue;
}

/* visited link */
a:visited {
  color: darkgreen;
}

/* mouse over link */
a:hover {
  color: darkred;
}

/* selected link */
a:active {
  color: hotpink; 
}


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

/*.history {
	
	float: right;
	width: auto;			 45% rutscht unter die Navigation
	background: linear-gradient(to bottom right, lemonchiffon, white);
	padding: 2% ;
	margin: 1% 19% 2% 33% ;		 33% Abstand von links, 19% von rechts 
	border-radius: 1em;
	
	}

.history::before {
	content: transparent url('../bild/Wappen_Gera_klein.gif') no-repeat top left; 
	content: url('../bild/Wappen_Gera_klein.gif');
	padding: 2%;	
	}
*/
/* --- Anpassung an andere Boxbreite --- */	
/*.history p {
	margin: 1%  4%  4%  7% ;
	 text-indent: -8em;		 negativer Einzug, erster Buchstabe nach außen  
	}		
*/	
.history p:first-child::before 
	{
    content: " Informationen zur Geschichte: ";
	/*white-space: pre-wrap;		 pre-wrap; Zeileumbruch; pre-line; Leerzeile davor,  pre;  setzt ein Leerzeichen davor */
	color: darkred;
	
	}

.history  p:last-child 
	{
	color: darkblue;
	}

.main 
{
	/* position: absolute;			rutscht rechts hoch, positioned relative to the nearest positioned ancestor */
	 /*float: rigth; none nichts passiert*/
	text-decoration: none;
	background:linear-gradient(to bottom right, lemonchiffon, white);
	margin: 1%; 	/* ...55% Abstand Haupttext zur Seitennavigation */
	padding: 2% 0%;		/*	sonst rutsch die erste Überschrift über die Stationsliste */
	 
	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;
	}


/*---------- Navigaton im aside-Bereich -------------------------------------*/
aside 
	{
	float: left;
	position: relative;
	
	/* width: 100%;				 Archives 26% */
	color: black;
	margin: 4%;				/* Mainteil hinter der navigation */
	/* font-family: 'Dancing Script', cursive; 
	font-weight: 100;
	font-size: 100%;		
	font-weight: bold; 
	letter-spacing: 0.1em; */
	text-decoration: none; /* Unterstreichung aus */
	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;
	}
	
article
	{
	/* float: right;    Hintergrund des Textes ist weg, Text unterhalb der Navigation */	
	}


article h3 /* Zierleiste um die Artikelüberschriften */
	{
	/* font-family: 'Shadows Into Light', cursive; 
	font-weight: 100;		
	font-size: 100%;	*/
	/*float: none; right;     alle Überschriften landen unter dem Text */
	/*position:  absolute; Überschrift liegt auf dem Text, relative; Überschrift über ganzen Text */
	margin: 3% 3%;   /* ? 3% lässt den grauen Balkenhintergrund wenigstens unter der Navigation verschwinden */
	
	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;
	color: darkgreen;
	}
	
.sidebar h3 /* Platzierung der Überschrift Stationsliste */
	{
	margin: 4%; 
	padding: 3%;
	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 /* ausgewählter Text wird auf der Seite ergänzt */
	{
	content: "Naturlehrpfad Süd"; 
	color: darkred;
	/*margin: 1% 0%; tut nichts */
	padding: 1em;  /* rückt ein, 1%; tut nichts*/
	
	}
	
.sidebar li {
	margin: 3% 3% 3% 0%; 			/* Abstand zwischen den Navigationszeilen /rechter Abschluß !!!*/
	padding: 1%;					/* erhöht in Abstand zwischen den Stationsnamen */
	box-shadow: 0.1em 0.1em 0.1em gray;
	color: darkgreen;
	list-style: none;						/* Aufzählungspunkte verschwinden */
	}

/* --- 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% 0%;
	border-style: solid;
	border-width: medium;						/* auch thick; thin; medium */
	text-decoration: none;	
	}

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

.design-seitennavigation li a 
	{
	color: darkred; /* darkblue;*/
	}

.design-seitennavigation::after 
	{
	/* content: url('../bild/Schloss Osterstein_heute.jpg'); */
	padding: 2%;
	}
/*.navigation 
	{
	color: darkblue;
	padding: 1%;
	}

.navigation li a 
	{
	color: darkred;
	}
	
.navigation::after 
	{
	content: url('../bild/Schloss Osterstein_historisch.jpg'); 
	padding: 3%; 
	}	
*/

/* --- ü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;   obere Bildecke rund 
	}
 */
/* --- 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: darkblue;			 Stadt Gera #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: green;
	}	*/
/*
h3 	{
	position: absolute; 
	width: 100%;
	margin: 3% 0% 0% 0%  ; 
	padding: 2% 20%;
	text-align: center;
	// font-family: 'Indie Flower', cursive; //
	font-weight: 100;
	font-size: 100%;
	background: transparent;
	color: green;
	}			
*/


/* --- Schrifteinstellungen Basisgröße Text = 16px =  1em = 1rem = 100% wird vererbt --- */
	
/* --- 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: transparent url('../bild/Gera_Untermhaus_Marienkirche_klein.JPG') no-repeat bottom left; 
	top: 350%;
	left: 2%; 
	width: 28%;
	height: 40%; 			375px; 
	}	
	
	*/
/* --- 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% ;
	}
*/ 	
/*	
.preamble 
	{
	position: relative;
	clear: both;
	background: linear-gradient(to bottom right, lemonchiffon, white);
	width: 29%;			
	margin: 1% 0% 2% 35% ; 
	padding: 5% 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;
	}	
 */	

/* --- 2-Spalten-Layout ---  ist weg
.requirements {
	margin: 0% 2% 0% 0% ; 
	padding: 2%;
	width: 92%;			
	column-count: 2; 
	column-gap: 2em; 
	text-align: justify; 
	hyphens: auto;
	orphans: 3; 
	widows: 3;
	}
 alles weitere nicht mehr genutzt */	
.requirements p {
	/* font-family: 'Open Sans', Raleway, sans-serif;	*/
	font-weight: 100;			/* 400 */
	font-size: 100% ;			/* 120% */
	font-style: normal; 		/* 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: normal; 
	}

/* --- zusätzliches passendes Bild einfügen, kann nicht formatiert werden --- */	
.requirements::after {
	/*content: url('../bild/Salvatorkirche_klein.JPG'); 
	padding: 10%; */
	}