/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* Zurücksetzen aller Werte
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;
}
*/

/* Navigationsleisten */
nav{
	/* background-image:url(../images/kachel.png); */
	background-color: lightyellow;	/* auch zur Sicherheit, falls das Bild nicht geladen wird */
	/* background-repeat:repeat;  wierderholte Darstellung bis der Bildschirm voll ist */
	/* background-color:transparent;		für fixed Menue */
	/* margin: 1% 1%; 							 Abstand Hauptmenue vertikal, seitlich */
	padding: 0.5% 0 ;								/* Balkenbreitefläche unter Hauptmenue */
	font-size: 100%;							/* vergrößert die Abstände der Buttons */
	/* float:left;  */
	width:100%;									/* Bruttofläche wird beeinflusst */ 
}
nav header{
	width:20vw;
	}
	
aside nav{
	background-color: lightgrey;
	width: 100%;  /* Link aus JS index-Seite */
	
	margin: 0 0 5%  0;
}	
/* Navi 1. Ebene */
nav ul{
	list-style-type:none;
	margin: 0 1% ;					/* Abstand außen Hauptmenü, 0, da sonst Spalt und schlechtes Ansprechen der Pulldown-Leisten*/
	/* padding:1%; */
	
}
nav li{
	background-image:url(../images/kachel.png);
	background-color:yellow;	/* auch zur Sicherheit, falls das Bild nicht geladen wird */
	background-repeat:repeat;  	/* wierderholte Darstellung bis der Bildschirm voll ist */
	/* background-color:transparent;   #036; */
	width:20%; 						/* Verändert Buttonlänge Hauptmenue */
	float:left;
	position:relative; /*sonst enstehen lange Balken */
}
nav a{
	color:#fff;
	text-decoration:none;
	border-bottom:1px solid #fff;
	display:block;
	/* padding:3px 10px; */    /* stört das Pull_Down_Menue */
}
.asideMenue{
	width:80%;  /* damit Untermeü rechtsbündig abschließt */
	margin: 5%;  
}
nav a:hover{
	background-color:#69c;
}
/* Navi 2. Ebene*/
nav ul li ul{
	display:none;
	position:absolute;
	/*visibility:hidden; geht nicht gut */
}
nav ul li:hover ul{
	display:block;
}
nav li li {
	/*padding-left:50%;*/
	width:100%;
}
nav:after{
	content:"";
	display:block;
	clear:both;
}
/* */
figure a:link {
	border-style:none;
	}								/* figure a:visited, figure a:hover, figure a:active bringt nichts */
figure a:hover{
	background-color:transparent;
	border-style:none;	
	background-image:none;			/* 	url(../images/burst.jpg; )  */
}
a:link {
	background-color:transparent;		/* 0 ist ungültig #BDB76B; */
	border-color:#F0E68C olive olive #F0E68C;
	color:#000000;
	width:100%;
}
a:visited {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#8B008B;
}
a:hover {
	border-style:solid;
	border-width:medium;
	background-color:#F0E68C;
	background-image:url(../images/kachel.jpg);
	border-color:olive #F0E68C #F0E68C olive;
	color:#0000FF									/* blau ;weiß #FFFFFF; */
}
a:active {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#F0E68C;
}

/* Klickboxen */
a:link, a:visited, a:hover, a:active {
	border-style:solid;
	border-width:medium;						/* auch thick; thin; medium */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:medium;								/* small; large */
	/* padding: 0.2% 1%;							padding:4px 8px; */
	text-align:center;
	text-decoration:none;						/* text-transform:uppercase;  */
}
/*Seiteneinstellung */
body
	{
	color:black;			/* Textfarbe */
	/* background-image:url(../images/kachel.jpg); */
	/* background-repeat:repeat;  	 wierderholte Darstellung bis der Bildschirm voll ist */
	background-color:lightyellow;	/* auch zur Sicherheit, falls das Bild nicht geladen wird */
	/* opacity:1;				Transparenz 10% */
	/* background-image:url(../images/kachel.png); */
	font-family: Helvetica, Arial, sans-serif;
    font-size: 93%;
	}

/* Seiteneinstellungen */
#page{
	width:100%;							/* 950px; */
}
/* Layout dreispaltig */

/* Header */
header{
	background-color:transparent; 	/*darkgreen; #fae58f; */
}


main{
	margin: 2%;
	/* position:absolute;				relative, alles rutscht nach ganz rechts /*
	background-color:lightyellow;		/* #e1f4a7; */
	float:left;							/*  sonst rutscht das Formular an den rechten rand */
	width:90%;							/* width:550px; */
	/* text-align:left; */
	padding: 1% 1%;
	}

.wichtig{
	font-size: 110%;
	font-weight: bold;
	 
}	

/* aside */
aside{
	/*position:fixed; */
	/* margin-top:1%;	*/
	float:left;			/* bewirkt nichts */
	background-color:lightgrey;			
	/* margin: 1% 1% 1% 1%;	*/			/* Rand, gibt nur mehr zu rechnen */
	padding: 1% 1%;						/* sonst passt Menü nicht hinein */
	width:20%;							/* width:200px; */ 
}
aside p{
	font-size: 110%;
	font-weight: bold;
	margin: 10%;				 
}	

/* Fußbereich */
footer{
	background-color:lightyellow;			
	/*clear:both;*/
}

/* Formularbereiche */
form{
	background-color:lightyellow;
	position: relative;		/*abolute erzeugt Fehler */
	margin: -2% 35%; 			/* damit Formular in die Mitte gelangt */
	/* padding: 10% 10%;	verschiebt das Formular nach rechts unten */	
	text-align:left;
	width:72%;
	}

label{
	width:100%;
	display:inline-block;
	text-align:left;                  /* right ist Unsinn, rechtsbündig */
}

input, select, textarea{
	border:none;
	border-bottom:1px solid silver;
	box-shadow:2px 2px 2px rgba(0,0,0,0.1);	/* Box-Schatten */
	border-radius:1%;	/* runde Eccken */
	position:relative;
	/* padding: 0.5% 10%; andert nur die Eingabefnstergröße*/ 
	margin: 0.1%;				/*Abstand zum nächsten Fenster */
	width: 50%;
	/* right:1%; 		macht keienen Sinn auch kein left */
}	
/* Massentexteingabe */
textarea{
	position:relative;
	/* padding: 0.5%;	*/
	margin:0.1%;				/*Abstand zum nächsten Fenster */
	width: 50%;
	height: 0.5%;
}
label textarea{
	vertical-align:top;      /* Bezeichnung soll nach oben */
	/* position:absolute; */
	}
/* Auswahlfenster */
select{
	/* position:relative;		hat im Endformular keine Bedeutung 	*/
	/* padding: 0.5%; */
	margin: 0.1%;
	width: 50%;					/* sonst zu klein im Verhältnis zu anderen Input-Elementen */
}
.radioAuswahl{
	position:relative;
	/* padding: 1% 1% 1% 1%;			bewirkt im Endformular nichts
	 margin: 1% 10%;			 5% damit radio-Button unter der Menüleiste hervorkommt */
	width: 1%;							/* verändert die Größe der Knöpfe */
}
input[type="submit"], input[type="reset"]{
	margin:10px;
	background-image:linear-gradient(rgb(250,250,250),rgb(204,204,204));	/* Farbverlauf */
}
button{
	margin: 1% 1%;
}
/* Umfluss beenden */
hr{
clear:both;
	}
/* Listen. Tabellen */
table{
		
		font-size: 120%;
        font-weight: bold;
        margin: 1% 1%;			/* zur Präsentation schmaler dargestellt */
		padding: 10% 1% 1% 1%; /* damit die Tabellenwerte neben den Diagrammbalken stehen */
        text-align: right; 
		float:left;
		 }
thead, tfoot {
	 background-color:silver;
	 }

/* Listen */	
ol
	{
		list-style-type:decimal-leading-zero /* upper-roman; decimal; decimal-leading-zero (dezimal mit führender Null, für <ol>), lower-latin (Kleinbuchstaben, für <ol>) */
	}
li
	{
		color: darkblue ;	
	}
/* Hervorhebung der Begriffe */	
dt span{
	font-size: 120%;
	font-weight: bold;
}
	
/* Überschriften */
h1{
		font-size: 200%;
		font-weight: bold;
		margin:2%  3% ;	
		color: darkblue;
	}
/* Grundeinstellungen reichen, wenn nicht resetet */	
/* h2
	{
		font-size: 150%;
		font-weight: bold;
		margin:4%  0 ;	
		color: black ;
	}	
	
h3
	{
		font-size: 130%;
		font-weight: bold;
		margin:3%  0 ;	
		color: darkgreen;
	}

h4
	{
		font-size: 110%;
		font-weight: bold;
		margin:2%  0 ;	
		color: black;
	}
*/
/* IFrame */	
iframe{
	width:100%;
	height:90vh; 
	border:none;
	margin: 10% 0 ;
	}
	
.obenAbstand{
	padding: 12% 0 ;
}

/* Diagramm mit % */
.chart {
		float:left;	
        border: 1px solid #000000;		/* 2px */
        border-radius: 1%;				/* geht auch einzeln für jede Ecke */
        margin: 0 10% 0 0;  
        max-width: 80%;
        padding: 3% ;     
      }
.chart .title {
        font-size: 200%;
        font-weight: bold;
        padding: 0 0 10% 20%;	
        text-align: center;        
      }
.chart div.bar {
        font-size: 80%;
		background-color: darkblue;
        text-align: right;
        padding: 0.3%;		
        margin: 0 2% 2% 0;		
        color: white;
      }

/* Bilder */	  
/* BText umfließt Bild */
figure{
	float:left;	/*left,right,none*/
	margin:0 1%;				/* Abstand zur Seite entsteht, auto */
	}	
div.normalesBild{
	margin: 1% 1%; 
	width:	100%
}
	
/* keine Bilderrahmen */
img {
	border:none;
	padding: 0 1%;
	/* margin:5%;	 Abstand zur Seite entsteht, auch auto; */
	/* display:block; */
	width:	80%;		/* 285px; */
	}
figcaption{
	font-size: 120%;
	font-weight: bold;
	color: darkred;
	margin: 5% -1%;		
}
.preis{
	font-size: 120%;
	font-weight: bold;
	color: red;
	margin: 1% 0;
}

.naviAbstand{
	margin: 10%;
	padding: 0.2%;
	
	}	

/* Wrapper um aside */
#wrapper{
	/* overflow:auto; */
	background-color:lightyellow;
	background-image:url(../images/kachel.png);
	}
.hintergrund{
	background-color:lightyellow;
	background-image:url(../images/kachel.png);
}
	
#wrapper2{	
	background-color:darkblue;			
	float:left;
}
/* damit keine kollapierenden Container */
.clearfix:after{
	content:"";
	display:block;
	clear:both;
	/*visibility:hidden;
	height:0;*/
}
#asideMenue{
	/* margin-top:16%;			 sonst beginnen die Artikel unter dem Menü */
	position:fixed;
	width:30%;
	display:inline-block;
	z-index:6;
	/* float:left;			macht keinen Sinn bei Positionierung  fixed */
	}
#divKopf{
	position:fixed;
	float:left; 				/* sonst klebt Menü am linken Rand */
	width:100%;
	top:0px;
	left:0px;;
	z-index:5;	
}
#divSeitenbreit{
	width:100%;				/* sonst kleben Listenpunkte an der linken Seite */
	margin-top:20%;			/* sonst beginnen die Artikelunter demMenü */
	/*display:block; */
	z-index:5;	
}
#divFuss{
	position:fixed;
	width:100%;
	bottom:0px;
	z-index:5;	
}
/*Gallerie Show*/
#gallerie img {
		height : 5%; /* sonst zu lang für die Seite */
		width:	5%;
		/* border : 10% solid white; */
	}

#container {
		background-color:#FFFFFF;
		border:3px #FFFFFF;
		height:13vw;
		left:0px;
		position:relative;
		padding:5%;
		top:0px;
		width:90%;
	}
#spalte1 {
		left: 3%;
	}
	
#spalte1 img	{
		background-color: #FFFFFF;
		border: 1px solid #FFFFFF;
		height: 80%;
		position: absolute;
		padding: 2%;
		top: 2%;
		width: 30%;
	}
	
#textspalte2 {
		background-color: #FFFFFF;
		border: 1px solid #FFFFFF;
		height: 80%;
		position: absolute;
		padding: 2%;
		top: 2%;
		width: 55%;
		right: 2%;
	}
#spalte1 {
		left: 3%;
	}
.jsLink{
	width: 70%;  /* Link aus JS index-Seite */
	margin: auto;
}