/* Date 2014-07-05 */

* { padding: 0; margin: 0; } /* für Alle ->Abstände außerhalb-> oben - rechts - unten - links */

h2, h3, p, ul, ol { margin-bottom: 1em; } /*  Abstände außerhalb-> unten */

ol ul { margin-bottom: 0; } /*  Abstände außerhalb-> unten */

li { margin-left: 2em; } /*  Abstände außerhalb-> links */

* html div.picture { height: 1%; } /* IE6: Verschiebungen beim Foating*/

html { height: 101%; } /* Firefox: Scrollbar immer */

a {
   text-decoration: none;
   outline: none;
  }
  
  a:link {
   color: #0000FF;
  }
  
  a:visited {
   color: #000000;
  }
  
  a:hover,
  a:focus {
   border-bottom: 1px solid #0000FF; /* unten */
  }
  
  a:active {
   background-color: #0000FF;
   color: #000000;
  }

body {
 background-color: #FFFFFF;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: small; 
}

h1 { font-size: 150%; }

h2 { font-size: 130%; }

h3 { font-size: 110%; }

address {
 text-align: center;
 font-size: 80%;
 font-style: normal;
 letter-spacing: 2px;
 line-height: 1.5; 
}

.skip {
 position: absolute;
 top: -5000px; /* nicht sichtbar: verschiebung extrem oben */
 left: -5000px; /* nicht sichtbar: verschiebung extrem links */
 width: 0; /* nicht sichtbar */
 height: 0; /* nicht sichtbar */
 overflow: hidden; /* nicht sichtbar */
 display: inline; /* nicht sichtbar */
}

#top {
 position: fixed;
 background-image: url("../../bilder/topflow_V.jpg");
 background-repeat: repeat-x; /* nur Horizontal wiederholen sonst Kachelung*/
 color: #000000;
 padding: 10px 20px; /* oben/unten - rechts/links */
 border-bottom: 2px solid #088A08; /* unten */
}

#logo {
 color: #000000;
 padding: 5px; /* oben - rechts - unten - links */
}

#menue {
   position: fixed;
   margin-top: 130px; /* oben */
   width: 130px;
   padding: 20px; /* oben - rechts - unten - links */
  }

/*  #menue:hover { */
/*   margin: 192px 20px; /* oben - links  */ */
/*   transform: scale(1.5); */
/*   width: 100px; */
/*   transition-delay: 1s; */
/*  } */
  
  #menue ul {
   width: 10em;
   border-top: 1px solid #088A08; /* oben */
  }
  
  #menue li {
   /* display: inline -> in Reihe */
   list-style-type: none; /* keine Aufzählungszeichen */
   border-top: 1px solid #088A08; /* oben */
   border-left: 1px solid #088A08; /* links */
   border-bottom: 1px solid #088A08; /* unten */
   margin: 0; /* oben - rechts - unten - links */
  }
  
  #menue a {
   display: block; /* ganzer Block wird genutzt */
   /* cursor: pointer -> Handzeichen */
   text-decoration: none;
   background-color: #FFFFFF;
   color: #000000;
   padding: 4px; /* oben - rechts - unten - links */
   border-left: 3px solid #FFFFFF; /* links */
  }
  
  #menue span {
   display: block; /* Umbruch / eigene  Zeile */
   text-decoration: none; /* kein Link-Rahmen */
   background-color: #FFFFFF;
   color: #67C953;
   padding: 4px; /* oben - rechts - unten - links */
   border-right: 3px solid #67C953; /* rechts */
  }
  
  #menue a:hover,
  #menue a:focus {
   background-color: #F2F5A9;
   color: #000000;
   border-left-color: #088A08; /* links */
   border-bottom: none; /* unten */
  }
  
  #GSF_Index #navi01 span,
  #GSF_Oeffnungszeiten #navi02 span,
  #GSF_Aktuelles #navi03 span,
  #GSF_Team #navi04 span,
  #GSF_Produkte #navi05 span,
  #GSF_Friseur #navi06 span,
  #GSF_Dauerwelle #navi07 span,
  #GSF_Haarprobleme #navi08 span,
  #GSF_Haarausfall #navi09 span,
  #GSF_Kosmetik #navi10 span,
  #GSF_Fusspflege #navi11 span,
  #GSF_Preisliste #navi12 span,
  #GSF_Kontakt #navi14 span,
  #GSF_Impressum #navi15 span,
  #GSF_DSGVO #navi16 span,
 {
   background-color: #FFFFFF;
   color: #000000;
   border-left-color: #088A08; /* links */
   border-bottom: none; /* unten */
  }

#main {
 padding: 140px 0 0 150px; /* oben - rechts - unten - links */
 background-color: #FFFFFF;
 color: #000000;
 width: 850px; 
}

#GSF_Aktuelles #spec {
background-image: url("../../bilder/Aktuelles.jpg");
/* background-image: url("../../bilder/Bambusgarten.jpg"); */
 background-repeat: no-repeat;
 margin-left: 30px;
 height: 1200px;
 padding: 20px 20px 10px 20px; /* oben - rechts - unten - links */
}

#text {
 padding: 20px 20px 10px 20px; /* oben - rechts - unten - links */
  }
  
  #text a {
   border-bottom: 1px dotted #0000FF; /* unten */
  }
  
  #text a:hover,
  #text a:focus {
   border-bottom: 1px solid #0000FF; /* unten */
  }

#GSF_Aktuelles #text {
 color: #000000;
}

.center {
  margin-left: 200px;
}

div.picture {
 padding: 10px 20px 10px 20px; /* oben - rechts - unten - links */
}

div.picture img {
 padding: 4px; /* oben - rechts - unten - links */
 border: 1px solid #000000; /* oben - rechts - unten - links */
 border-left-color: #AAAAAA; /* links */
 border-top-color: #AAAAAA; /* oben */
 margin-bottom: 10px; /* unten */
}

div.gallery {
 padding: 10px 20px 10px 20px; /* oben - rechts - unten - links */
	height: 600px;
}

div.gallery img {
 position: fixed;
 padding: 4px; /* oben - rechts - unten - links */
 border: 1px solid #000000; /* oben - rechts - unten - links */
 border-left-color: #AAAAAA; /* links */
 border-top-color: #AAAAAA; /* oben */
 margin-bottom: 10px; /* unten */
}


.gallery figure {

	position: absolute;

	left: 180px;
	animation: wechseln 16s infinite;
}



@keyframes wechseln {

	0% {
opacity: 0;}

	10% {
opacity: 1;
}

	20% {opacity: 1;}

	30% {opacity: 0;}

	100% {
opacity: 0;
}

}


.gallery figure:nth-of-type(2) {

	animation-delay: 2s;

	opacity: 0;

}



.gallery figure:nth-of-type(3) {

	animation-delay: 4s;

	opacity: 0;

}



.gallery figure:nth-of-type(4) {

	animation-delay: 6s;

	opacity: 0;

}



.gallery figure:nth-of-type(5) {

	animation-delay: 8s;

	opacity: 0;

}



.gallery figure:nth-of-type(6) {

	animation-delay: 10s;

	opacity: 0;

}



.gallery figure:nth-of-type(7) {

	animation-delay: 12s;

	opacity: 0;

}

.gallery figure:nth-of-type(8) {

	animation-delay: 14s;

	opacity: 0;

}



#bottom {
 width: 800px;
 margin: 20px 160px auto; /* oben - rechts - unten/links */
 background-color: #FFFFFF;
 padding: 10px 20px 20px 20px; /* oben - rechts - unten - links */
 border-top: 1px solid #088A08; /* oben */
}