/* index2 - erste Inhaltsseite (stylesheet wird auch für die Galerieseiten verwendet) */

html, body{                                           /* html und body werden auf 100% Höhe gesetzt, eventuell vorhandene störende Abstände werden unterbunden */
  height:100%;
  margin:0;
  padding:0;
}

body
{
background-image: url(../pix/com_hgkachel1.jpg);  /* Hintergrundkacheln */
}

#wrapper{
  position:relative;
  margin:0;
  padding:0;
  /* sorgt dafür, dass Scrolleisten erscheinen (wenn nötig) */
  width:100%;                                        /* ganauso breit, wie der Anzeigebereich */
  height:100%;                                       /* ganauso hoch, wie der Anzeigebereich */
  /* Definition notwendiger bzw. gewünschter Mindestmaße */
  min-width:1100px;                                  /* Breite von #inhalt */ 
  min-height:750px;                                  /* Höhe von #inhalt */
}

#inhalt {                                            /* ist das Element, welches zentriert werden soll, hier soll der eigentliche Inhalt drin erscheinen */
  position:absolute;
  
  /* Breite und Höhe (hier durch die Größe HG-Bildes in Pixeln festgelegt */
  width:1100px;                                      /* Breite insgesamt */
  min-height:750px;                                  /* Mindesthöhe insgesamt, bei genau dieser Höhe funktioniert die vertikale Zentrierung */
  /* die linke obere Ecke wird vertikal und horizontal zentriert */
  top:50%;                  
  left:50%;
  /* durch negative margins wird der "inhalt"-Container um die Hälfte von Höhe und Breite nach oben und links verschoben */
  margin:-375px 0 0 -550px;                          /* jeweils die Hälfte der Gesamthöhe und -breite */
  background-image: url(../pix/com_hintergrund2.gif);            /*Hintergrundbild*/
  background-repeat: no-repeat;                      /*keine Kachelung von hg-bild-1.jpg*/
}

* html #inhalt {                                        /* height speziell für den IE */ 
  height:750px;                                       /* das selbe Maß wie oben bei min-height */
}

/* ab hier Gestaltung der Links (die Reihenfolge der Pseudoklassen muss beim Definieren beachtet werden) */

a{
   text-decoration: none; outline: none;          /* decoration-Unterstreichung der Links entfernen; outline-Umrisslinien entfernen */
}

a:link{
   color: #e7ebd9;                                /* Farbe der Links */
}

a:visited{
   color: #f7fedf;                                /* Farbe von bereits besuchten Links */
}

a:hover, a:focus{                                 /* Farbe während man darüber fährt (mit Maus und/oder Tatstatur), bei diesen beiden ist die Reihenfolge egal */
   color: #ffffff;
}

a:active{
   color: #a3a797                                 /* Farbe des aktivierten Links */
}

/* ab hier Gestaltung von Bildern (allgemein) */

img
{
   border: 0;                                     /* kein Rand um eingefügte Bilder */
}

/* ab hier Positionierung der Galeriebuttons und anderer Links */

#gal1{
   position: absolute;
   margin-top:288px;
   margin-left:197px;
}

#gal2{
   position: absolute;
   margin-top:321px;
   margin-left:197px;
}

#gal3{
   position: absolute;
   margin-top:354px;
   margin-left:197px;
}

#guestbook{
   position: absolute;
   margin-top:420px;
   margin-left:197px;
}

#gal4{
   position: absolute;
   margin-top:387px;
   margin-left:197px;
}

#main{
   position: absolute;
   margin-top:519px;
   margin-left:197px;
}

#contact{
   position: absolute;
   margin-top:486px;
   margin-left:197px;
}

#links{
   position: absolute;
   margin-top:453px;
   margin-left:197px;
}

#sign_impressum{
    position:absolute;
	margin-top:245px;
	margin-left:199px;
}

/* ab hier Positionierung des Bildes auf der index2-Seite */

#grafik1{
margin-top:73px;
margin-left:121px;
}

/* ab hier Positionierung der Tabelle */

#tabelle{
   position: absolute;
   margin-top:180px;
   margin-left:160px;
}

/* ab hier Gestaltung des Impressums */

#headline{
   position:absolute;     /* Überschrift dieser Seite (Impressum) */
   margin-top:140px;
   margin-left:526px;
   color: #c3a576;
   font-size: 18pt;
}

#impressumtext{           /* div der die Adressen (Tabelle #impressumtabelle) und den Impressumstext enthält */
	width:560px;
	height:390px;
	margin-left:400px;
	margin-top:190px;
	overflow:auto;
	scrollbar-base-color:#c3a576;
	scrollbar-track-color:none;
}

#impressumtabelle                  /* div der die Tabelle mit den beiden Adressen enthält */
{
   margin-left:85px;
   font-size: 14px;       /*Schriftgröße*/
   font-style: normal;    /*nicht kursiv, fett oder sonst was*/
   color: #c3a576;        /*Schriftfarbe*/
}

p
{
   width:540px;
   color: #c3a576;
   font-size: 11px;
}

h4
{
   color: #c3a576;
   font-size: 14pt;
   text-align:center;
}

.ueberschrift
{
   text-align: center;
   font-size: 12pt;
}

/* ab hier Gestaltung des Gästebuchs */

#guest{
   margin-top:185px;
   margin-left:220px;
}

/*ab hier Gestaltung der Linkseite */

#linkcontainer{
   margin:auto;
   text-align: center;
   width:800px;
   height:450px;
   margin-top:140px;
   overflow: auto;
   scrollbar-base-color:#c3a576;
   scrollbar-track-color:none;
}

.linkpix{
   margin:auto;
   text-align:center;
   color:#c3a576;
   font-size: 16px;
   width:468px;
   padding-top: 20px;
}

pre.linktabelle{
   margin:auto;
   padding:20px;
   color:#c3a576;
   font-size: 10px;
   width:468px;
/* Der Quelltext ab hier dient nur dazu, für automatische Zeilenumbrüche im pre-tag zu sorgen. Der pre-tag ist nötig, um den Link als Text darstellen zu lassen. */
     white-space: pre;             /* CSS2 */
     white-space: -moz-pre-wrap;   /* Mozilla */
     white-space: -hp-pre-wrap;    /* HP printers */
     white-space: -o-pre-wrap;     /* Opera 7 */
     white-space: -pre-wrap;       /* Opera 4-6 */
     white-space: pre-wrap;        /* CSS 2.1 */
     white-space: pre-line;        /* CSS 3 (and 2.1 as well, actually) */
     word-wrap: break-word;        /* IE */
     style=”table-layout: fixed;”
}