.stil1 {color:#000000; font-family:Monotype Corsiva; font-size:22px; 
}
.stil2 {color:#009900; font-family:Monotype Corsiva; font-size:22px; 
}
.stil3 {color:#009900; font-family:Monotype Corsiva; font-size:30px; font-weight:bold;
}
}
.stil4 {color:#000000; font-family:arial,tahoma,verdana,helvetica; font-size:12px; font-weight:bold;
}
}
.stil5 {color:#990000; font-family:arial,tahoma,verdana,helvetica; font-size:12px; font-weight:bold;
}
}
.stil6 {color:#000000; font-family:arial,tahoma,verdana,helvetica; font-size:12px; font-weight:bold;
}
}
.stil7 {color:#990000; font-family:arial,tahoma,verdana,helvetica; font-size:42px; font-weight:bold;
}
}
.stil8 {color:#000000; font-family:arial,tahoma,verdana,helvetica; font-size:30px; 
}
}
.stil9 {color:#000000; font-family:arial,tahoma,verdana,helvetica; font-size:22px; 
}
/* Hintergrundfarbe */
.hg {background-color:#ffffcc;
}

 a:link{color:white; background-color:green;}
 a:visited{color:white;}
 a:hover{color:#gold;}
 a:active{color:#ff0000;}
 .menu {text-decoration:none; font-family:arial,tahoma,verdana,helvetica; font-size:16px; text-decoration:none; color:#817f84; font-weight:bold;}
 .vorschau-button {width:230px; height: 40px; background-color:#00ff00;color:black; border:solid 1px #ffaa22;cursor:hand; font-family:Monotype Corsiva; font-size:22px; }
 .hover{width:230px; height: 40px; background-color:#009900;color:black; border:solid 1px #ffaa22;cursor:hand; font-family:Monotype Corsiva; font-size:22px;}

/*eingeschränkte Öffnungszeite, zum Beispiel im Winter 
 span {	font-size:13px; font-family:arial,tahoma,verdana,helvetica; font-weight:bold;}
		#oeffnungszeiten:before {
		content:"Öffnungszeiten: \A \A Mo-Fr: 11 - 18 Uhr \A Küchenschluss: 17:30 Uhr \A \A Sa/So: 11 - 20 Uhr \A Küchenschluss: 19 Uhr \A \A Ruhetage: Mo + Di " ;
		white-space: pre;
		}
*/
/* Öffnungszeiten */
 span {	font-size:13px; font-family:arial,tahoma,verdana,helvetica; font-weight:bold; color:green}
		#oeffnungszeiten:before {
		content:"Öffnungszeiten: \A \A November-März \A Mi - Fr: 11 - 18 Uhr \A Küchenschluss: 17:30 Uhr \A Sa/So: 11 - 19 Uhr \A Küchenschluss: 18 Uhr	 \A \A April - Oktober \A Mi - So : 11 - 19:30 Uhr \A Küchenschluss: 18:30 Uhr \A \A längere Öffnung \A nach Vereinbarung" ;
		white-space: pre;
		}
/* Reservierungen */
 span {	font-size:13px; font-family:arial,tahoma,verdana,helvetica; font-weight:bold;}
		#reservierung:before {
		content:"Achtung: \A Reservierungen sind \A nur telefonisch möglich: \A \A 036459/62260" ;
		white-space: pre;
		}

/*	Schließzeiten und Sondermeldungen*/	
/*
span {	font-size:13px; font-family:arial,tahoma,verdana,helvetica; font-weight:bold;}
		#geschlossen:before {
		content:"Betriebsferien: \A 05.10. - 22.10. 2019 " ;
		white-space: pre;
		}
*/		
/* Hundeverbot mit Verbotsschild */	
 span { }
 		#hund:before { content:url("Fotos/Hundeverbot-110px.gif");}
		
		
.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .right {
    min-width:200px;
	top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#d7f7d7;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .right {
    display:block;
}

.tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.tooltip .right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#d7f7d7;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

/* inhalt des Tooltipps AKTUELL */
 span {	font-size:13px; font-family:arial,tahoma,verdana,helvetica; font-weight:bold;}
		#aktuelles:before {
		content:"Liebe Gäste, \A \A hier informieren wir über aktuelle Ereignisse \A \A und besondere Vorkommnisse in unserer Waldgaststätte: \A \A zur Zeit haben wir keine Sonderinformation für Sie" ;
		white-space: pre;
		}
		
		
		
/*Gestaltung des Buttons AKTUELL für aktuelle Informationen*/
.myButton {
	box-shadow:inset 0px 1px 0px 0px #caefab;
/*	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);*/
	background-color:green;
	border-radius:10px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	box-shadow: 0px 5px 10px white inset;
/*	color:#306108; */
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
}
.myButton:hover {
/*	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	background-color:#5cb811; */
	background-color:gold;
	color:green;
}
.myButton:active {
	position:relative;
	top:1px;
	background-color:gold;
	color:green;
}

/*nachfolgend kommt die auf Klick hereinfahrende Navigation*/
body {
	font: normal 1em Helvetica, Arial, sans-serif; color:#000000;
}
/* nachfolgend wird mit width und height die Größe der Hintergrundbox des Menüs festgelegt, mit padding der Abstand der Menübuttons zu den Rändern der Hintergrundbox, ebenso die Farbe und die Randfarbe der Hintergrundbox */
nav {
	width: 10em;
	height: 2,5em;
	padding: 0.5em;
	border: 1px solid #ffffcc;
	background-color: #ffffcc;
}

nav ul {
	margin: 0;
	padding: 0;
	text-align: center;
	
}

nav li {
	list-style: none;
	position: relative;
	margin: 0 0 .2em 0;
	padding: 0;
}
/* nachfolgend wird der Abstand des Untermenüs nach rechts und unten(positive Werte für left und top) festgelegt */ 
nav ul ul {
	position: absolute;
	top: -14em;
	left: 0,5em;
	font: 0/0 serif;
	/* Unternavigation ausblenden */
	
	
	transition: font 4.5s;
}

nav ul li:hover ul {
	font: inherit;
	z-index: auto;
	/*  Unternavigation einblenden */
}
/* nachfolgend wird die Breite der in den li enthaltenen Menübuttons festgelegt */
nav a,
nav span {
	display: block;
	width: 9em;
/* nachfolgend wird mit margin der Abstannd der in den li enthaltenen Menübuttons zueinander festgelegt */
/* mit padding wird der Abstand des Textes in den Buttons zum Buttonrand festgelegt und damit folglich die Größe der Buttons */
/* mit color wird die Textfarbe und mit background-color die Buttonfarbe festgelegt */	
	margin: 0.1em 0 0 0;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid blue;
	border-radius: 10px;
	box-shadow: 0px 5px 10px white inset;
	color: gold;
	background-color: green;
}

nav ul ul a,
nav span {
	border-radius: 10px;
}

nav a:focus,
nav a:hover,
nav span {
	/* aktuelle Unterseite kennzeichnen */
	
	color: green;
	background-color: gold;
}

li a#aktuell {
	color: gold;
	background-color: green;
}

nav span {
	/* aktuelle Unterseite kennzeichnen */
	
	background-color: green;
	color: gold;
}