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:absolute;
    margin:0;
    padding:0;
/* sorgt dafür, dass, wenn nötig, Scrollleisten erscheinen (Scroll-Leisten entstehen wenn die Auflösung des Browserfensters zu klein wird) */
    width:100%;                                        /* ganauso breit, wie der Anzeigebereich */
    height:100%;                                       /* ganauso hoch, wie der Anzeigebereich */
/* Definition notwendiger bzw. gewünschter Mindestmaße */
    min-width:900px;                                   /* Breite von #inhalt (Hintergrundbild 900px * 725px) */ 
    min-height:760px;                                  /* Mindesthöhe von #inhalt (Hintergrundbild 900px * 725px + 35px vom footer) */
}

#littlewrapper {                                       /* div für inhalt + footer, vererbt Position an inhalt und footer */
	position:absolute;
	width:900px;                                       /* Breite insgesamt (Hintergrundbild 900px * 725px) */
	min-height:760px;                                  /* Mindesthöhe (Hintergrundbild 900px * 725px + 35px vom footer) --> keine Überlappung von inhalt + footer  */
	top:50%; 	                                       /* die linke obere Ecke wird vertikal zentriert */
	left:50%; 	                                       /* die linke obere Ecke wird horizontal zentriert */
	margin-top:-365px;                                 /* die Hälfte der Gesamthöhe des Inhaltsbereichs */
	margin-left:-450px;                                /* die Hälfte der Gesamtbreite (Hintergrundbild 900px * 725px) */
	bottom: 0px;                                       /* Ausrichtung unten */
	}


#inhalt {                                              /* hier soll der eigentliche Inhalt drin erscheinen */
    position:static;                                   /* braucht keine spezielle Positionierung, da #littlewrapper die Grenzen definiert */
	background-image: url(../pix/com_startbild1.gif); /*Hintergrundbild*/
    height:725px;                                      /* Höhe insgesamt (Hintergrundbild 900px * 725px) */
}

#footer {
    text-align:center;
	position:absolute;                                 /* #footer muss aus dem Fluss genommen werden, damit "bottom: 0px;" funktioniert */
	bottom:0px;                                        /* Ausrichtung unten */
	height:35px;                                       /* Höhe des footer-divs */
	width:100%;                                        /* Breite footer-divs */
}

* html #inhalt {                                       /* height speziell für den IE */ 
    height:725px;                         
}

#image1{                                               /* enterbutton (Stern) */
    position: absolute;
    top:283px;
    left:330px;
}

#image2{                                               /* enterbutton (enter) */
    position: absolute;
    top:545px;
    left:330px;
}

#zaehler{                                              /* Zähler (wie der Name schon sagt) */
    position:absolute;
    top:680px;
    left:400px;
}