* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background-color: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center; /* horizontal centering for IE Win quirks */
}

#abstand {
    width: 1px;
    height: 50%;
    background-color: #fff;
    margin-bottom: -270px; /* half of container's height */
    float: left;
}

#wrapper {
    margin: 0 auto;
    position: relative; /* puts container in front of distance */
    height: 410px;
    width: 612px;
    border: 1px solid #aaa;
    padding: 2px;
    clear: left;
    background-color: #fff;
	text-align: left; /* im body für quirks zentriert, hier zurückgesetzt*/
}

.index, .index1, .index2, .index3, .index4, .index5, .index6 {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
}
  
.index1  {
    background: url(../grafik/draisine.jpg) no-repeat;
}    
    
.index2  {
    background: url(../grafik/strecke.jpg) no-repeat;
}    
    
.index3  {
    background: url(../grafik/veranstaltungen.jpg) no-repeat;
}    
    
.index4  {
    background: url(../grafik/kontakt.jpg) no-repeat;
}    
    
.index5  {
    background: url(../grafik/fahrradhostel.jpg) no-repeat;
}    
    
.index6  {
    background: url(../grafik/verein.jpg) no-repeat;
}    
    
.indextext {
    margin-left: 200px;
    color: #000;
    margin-top: 15px;
    font-weight: bold;
    font-size: 110%;
}

a:link, a:visited {
    color: #000;
    font-size: 80%;
}

a:hover, a:active {
    color: #aaa;
}

li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
    position: relative; 
}

li ul { display: none; }

li:hover ul {
    display: block;
    position: absolute;
    left: -2px;
    top: -2px;
}