body {
    color: white; background-color: black;
    font-size: 100.01%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0;
	 padding: 20px 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }


 table {color:black;}

  div#SeiteHome {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/bass.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }




    div#SeiteBand {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/Band.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }


    div#SeiteTermine {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/logobackground.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }


    div#SeiteKontakt {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/keyboard.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }

 div#SeiteGaestebuch {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/gitarre.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }

   div#SeiteInternerBereich {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 background-image: url(images/snare.png);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 background-position: center 146px ;
  }

  h1 {
	height: 145px;
	margin: 0;
	padding: 0em;
	text-align: center;
	background: black;
	border-bottom: 1px solid #D4D4D4;
/*	background-image: url(images/Header4.jpg);
	background-repeat: no-repeat;
	background-position: top center; */

}


/* Voreinstellungen für den Hauptbereich; dieser unterscheidet sich je nach Seite durch das entsprechende Hintergrundbild. Deshalb gibt's ein Format für "Home", eins für "Band", usw. */
  div#Haupt {
    padding: 0;
	 height: 520px;
	 overflow: auto;
}
/*--------------------------------------------------------------------------------*/




/* Die Formate für das linke Menü

   Achtung: Das hier sind Formate, die werden im body mit <ul id="Navigation" aufgerufen. Die Klassen für die Links der Unterpunkte a.sub müssen mit mit class="sub" aufgerufen werden! */

 ul#Navigation {
    float: left; width: 240px;
    margin: 0 0 1.2em;
	 padding: 0.5em 0em 0em 0.5em;
	  }
  ul#Navigation li {
      font-size: 1.2em;
    list-style: none;
    margin: 0; padding: 0.5em;

 }

  ul#Navigation a {
    display: block;
	 padding: 0.2em 0 0 0 ;

     }

  ul#Navigation a:link {
	color: white;
	text-decoration: none;

}
  ul#Navigation a:visited {
	 color: white;
 	 text-decoration: none;

  }
  ul#Navigation a:hover {
   	 color: grey;
	 	 text-decoration: none;

  }
  ul#Navigation a:active {
	    color: white;
 	 text-decoration: none;
  }


/*--------------------------------------------------------------------------------*/



/* Klasse für die Box mit dem nächsten Konzert */


   div#NextConcert {
	color: Black;
	background-image: url(images/Trans75.png);
	background-repeat: repeat;
	margin: 10px;
	padding: 0.2em;
	width: 180px;
	height: auto;
	border: solid 1px black;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.5;
  }

div#NextConcert h2 {
font-size: 1em;
	margin: 0.2em 0;
    color: black;
  }


div#NextConcert a {
/*	display: marker;*/
	padding: 0.2em 0 0 0;
}

div#NextConcert a:link {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
div#NextConcert a:visited {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }
div#NextConcert a:hover {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }
div#NextConcert a:active {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }

div#NextConcert p {
    margin: 1em 0.2em;
  }

 img {
	border-color: Black;
}
/*--------------------------------------------------------------------------------*/



/* Klassen für die Unterpunkte im linken Menü
   Beachte Hinweis zu den Formaten "Navigation"! */
 ul#Navigation a.sub {
    display: block;
	 color:red
     }

  ul#Navigation a.sub:link {
    color: white;
	 text-decoration: none;
	 	 margin: 0em 0em 0em 1.4em;
  }
  ul#Navigation a.sub:visited {
	 color: white;
 	 text-decoration: none;
	 margin: 0em 0em 0em 1.4em;
  }
  ul#Navigation a.sub:hover {
   	 color: grey;
	 	 text-decoration: none;
 	 	 margin: 0em 0em 0em 1.4em;
  }
  ul#Navigation a.sub:active {
    color: grey;
 	 text-decoration: none;
	  margin: 0em 0em 0em 1.4em;
  }
/*--------------------------------------------------------------------------------*/



/* Format für den Inhaltsbereich: Inhalt bedeutet dabei die rechte Spalte im Hauptfenster. Der Margin muss genau so groß oder größer wie die Breite des Navigationsbereichs sein; ich verwende zunächst einmal 240px. */

  div#Inhalt {
    margin: 0 0 1em 240px;
    padding: 1em;
  }

 * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
  }
/*--------------------------------------------------------------------------------*/




/* Der eigentliche Bereich, in den der Text kommt. Wird mit einem halbtransparenten Gif hinterlegt (da Mozilla keine Filtereffekte unterstützt). Leider geht's mit IE 6 (und wahrscheinlich älter) so auch nicht. Evtl. Browserweiche hier einarbeiten.

Die Textbox hat jeweils eine Überschrift (als h2 definiert) und einen Textkörper. Will man noch zusätzlich Bilder in die Box einfügen, so am besten mit dem Kommando float (z.B. ).
*/
 div#Textbox {
	color: Black;
	background-image: url(images/Trans80.png);
	background-repeat: repeat;
	margin: 10px;
	padding: 0.2em;
	width: 35em;
	height: auto;
	border: solid 1px black;
  }

div#Textbox h2 {
    font-size: 1.1em;
    margin: 0.2em 0;
    color: black;
  }
div#Textbox h3 {
    font-size: 1em;
    margin: 0.2em 0;
    color: black;
  }

 div#Textbox a {
	display: marker;
	padding: 0.2em 0 0 0;
}

div#Textbox a:link {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
div#Textbox a:visited {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }
div#Textbox a:hover {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }
div#Textbox a:active {
	color: black;
	text-decoration: none;
	font-weight: bold;
  }

div#Textbox p {
    font-size: 1em;
    margin: 1em 0.2em;
  }


  /*--------------------------------------------------------------------------------*/



/* Fußzeile für ganz unten. Problem hierbei ist, dass sie sich eigentlich an der "Seite"-Box ausrichten müsste. Aber da diese automatisch zentriert wird, muss man hier tricksen. Well, nobody is perfect...*/

  p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0 0em 0 0; padding: 0em;
    text-align: center;
    background-color: black;
  }

 p#Fusszeile  a {
	font-weight: bold;
     }

p#Fusszeile a:link {
	color: white;
	text-decoration: none;
		font-weight: bold;
}

p#Fusszeile a:visited {
	 color: white;
 	 text-decoration: none;
	 	font-weight: bold;
  }

p#Fusszeile a:hover {
   	 color: grey;
	 	 text-decoration: none;
		 	font-weight: bold;
  }

p#Fusszeile a:active {
	    color: white;
 	 text-decoration: none;
	 	font-weight: bold;
  }

/*--------------------------------------------------------------------------------*/


/* Sonderformat für das Impressum"
/*--------------------------------------------------------------------------------*/
    div#SeiteImpressum {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
	 height: auto;
    background: black;
    border: 1px solid ;
	 border-color: #D4D4D4;
	 padding: 6px;

  }
div#SeiteImpressum h2 {
font-size: 1.2em;
	margin: 0.2em;
  }

div#SeiteImpressum p {
    margin: 1em;
  }



div#SeiteImpressum a {
	font-weight: bold;
     }

div#SeiteImpressum a:link {
	color: white;
	text-decoration: none;
	font-weight: bold;
}
 div#SeiteImpressum a:visited {
	 color: white;
 	 text-decoration: none;
	font-weight: bold;
  }
  div#SeiteImpressum a:hover {
   	 color: grey;
	 	 text-decoration: none;
	font-weight: bold;
  }
  div#SeiteImpressum a:active {
	    color: white;
 	 text-decoration: none;
	 	font-weight: bold;
  }
/*--------------------------------------------------------------------------------*/





/* LightBox 2-Gedöhns*/
/*--------------------------------------------------------------------------------*/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}