html, body {
  background-color : #000;
  color: white;
  margin: 0;
  padding: 0;
}


/* Der linke Bereich (Enthaelt das Logo und das Menue */
#left {
  background-image : url(../bilder/Logo_senkrecht.png);
  background-repeat : no-repeat;
  background-position : 20px 20px;
  width : 240px;
  height : 600px; /* min-height >= wie Hintergrundgrafik (das Logo) */
  left : 0;
  top : 0;
 	/* Mit Position fixed bliebe das Men auch beim Scrollen stehen
      Leider zerlegt der IE dann aber das Layout komplett 
  position : fixed;  */
  position: absolute;
}

/* Die Box mit dem Kopfbereich (Bild und Unterschrift) */
#head {
float: right;
	top: 0;
/*	margin-right: 0;*/
	width: auto;
	height: auto; 
	position: relative;
/*	position: absolute;*/
	z-index: 10;
}

/* IE macht eine Luecke zwischen die beiden Bilder im Kopf
   dies ist der Workaround dafuer 
*/
*html #head img {
	ma\rgin-bottom:-4px;
}

#inhalt {
  margin-top : 0;
  position : absolute; 
  margin-left : 240px;
  width : 700px;
  min-height: 700px;
  background-color: white;
  background-image : url(../bilder/Bogen_2.png);
  background-position:-308px 40px;
  background-repeat: no-repeat;
}

/* Die Box, die das Menue enthaelt 
   Die muss ca 50 px groesser sein, als die Navi-Grafiken. (Warum???) */
#nav {
  right : 0px;
  margin-top : 310px;
  width: 195px;
  position : absolute;
  overflow: visible;
}

#nav ul {
  list-style: none;
  list-style-position: outside;
}

#nav a {
  margin: 0px;
  font-size : 14px;
  display : block;      /* Jedes Element (Menuepunkt) in eine eigene Zeile */
  min-height : 30px;    /* Min. so hoch wie die Background-Images */
  background : no-repeat top right; /* Attribute koennen auch kombiniert werden */
  text-indent: -300px;   /* Menuetext ausser Sicht schieben (nur Textbrowser sehen den) */
  /* text-indent: +300px; waere huebscher. Der IE kann's aber nicht */
  white-space: nowrap;  /* Textlink nicht umbrechen (das vergroessert die Box in y-Richtung) */
}

#start a { background-image : url(../bilder/left_nav_start.gif); }
#start a:hover { background-image : url(../bilder/left_nav_start_on.gif); }

#messe a { background-image : url(../bilder/left_nav_messe.gif); }
#messe a:hover { background-image : url(../bilder/left_nav_messe_on.gif); }

#konzert a { background-image : url(../bilder/left_nav_konzert.gif); }
#konzert a:hover { background-image : url(../bilder/left_nav_konzert_on.gif); }

#firmen a { background-image : url(../bilder/left_nav_firmen.gif); }
#firmen a:hover { background-image : url(../bilder/left_nav_firmen_on.gif); }

#architektur a { background-image : url(../bilder/left_nav_archit.gif); }
#architektur a:hover { background-image : url(../bilder/left_nav_archit_on.gif); }

#konzept a { background-image : url(../bilder/left_nav_planung.gif); }
#konzept a:hover { background-image : url(../bilder/left_nav_planung_on.gif); }

#kontakt a { background-image : url(../bilder/left_nav_kontakt.gif); }
#kontakt a:hover { background-image : url(../bilder/left_nav_kontakt_on.gif); }

/* Die Box, die das Menue enthaelt 
   Die muss ca 50 px groesser sein, als die Navi-Grafiken. (Warum???) */
#nav_btm {
  margin-left : 330px;
  margin-top : 10px;
  margin-bottom : 50px;
  width:  	190px;	
}

#nav_btm ul {
  list-style: none;
  list-style-position: outside;
}

#nav_btm a {
  margin-right: 0px;
  font-size : 14px;
  display : block;      /* Jedes Element (Menuepunkt) in eine eigene Zeile */
  min-height : 30px;    /* Min. so hoch wie die Background-Images */
  min-width : 120px;    /* Min. so hoch wie die Background-Images */
  background : no-repeat top left;
}

#nav_referenz a { background-image : url(../bilder/cont_button_referenz.png); }
#nav_referenz a:hover { background-image : url(../bilder/cont_button_referenz_on.png); }

#nav_bilder a { background-image : url(../bilder/cont_button_bilder.png); }
#nav_bilder a:hover { background-image : url(../bilder/cont_button_bilder_on.png); }

#nav_zurueck a { background-image : url(../bilder/cont_button_zurueck.png); }
#nav_zurueck a:hover { background-image : url(../bilder/cont_button_zurueck_on.png); }

h1 {
  color : #1f1f1f;
  font-size : 1em;
  font-family : verdana;
  margin-top : 250px;
  margin-left : 140px;
}

p {
  color : #505050;
  font-size : 1em;
  font-family : verdana;
  margin-right : 120px;
  margin-left : 170px;
}

.fuss {
  font-size : 0.6em;
  font-family : verdana;
  text-align : center;
  margin-top : 150px;
}

/* klasse fer die beiden Top-Images (Bild und Text) */
.topImg {
  float: right;
  margin-top:0px;
  margin-right: 0px; 
}

/* klasse fer das Image mit dem Text der Seite */
.contentImg {
  margin-top:65px;
  margin-left: 170px; 
  margin-bottom: 0px;
}

/* klasse zum Vorladen der Men-Mouse-Over Images */
.hiddenPic {
  display:none;
}