#advent2016 { position: relative; padding: 0; border-left: 0px solid #FFF; border-top: 0px solid #FFF; margin: 0 auto 24px auto; width: 1000px; height: 667px; box-shadow: 0px 0px 0px #CCC; }
#advent2016 li { position: absolute; padding: 0px; border-right: 0px solid #FFF; border-bottom: 0px solid #FFF; margin: 0; list-style: none; width: 250px; height: 111.2px; overflow: hidden;}
#advent2016 .left, #advent2016 .right { position: absolute; top: 0; left: 0; background: url(https://dragem.de/img/advent/Orgel.jpg) 0 0 no-repeat; width: 125px; height: 111.2px; }
#advent2016 .right { left: 125px; }
#advent2016 span { position: absolute; top: 10px; left: 10px; font-size: 12px; width: 24px; height: 24px; text-align: center; color: #FFF; background: #CD0000; display: inline-block; }
#advent2016 .area { position: absolute; top: 0; left: 0; width: 250px; height: 111.2px; display: block; }
#advent2016 .active:hover .left, #advent2016 a:focus .left { left: -125px; }
#advent2016 .active:hover .right, #advent2016 a:focus .right { left: 250px; }
#advent2016 .active:hover { color: #FFF; background-color: #CD0000; }
#advent2016 .left, #advent2016 .right {    
    -ms-transition: left 0.5s;
    -o-transition: left 0.5s;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    transition: left 0.5s; 
}
#advent2016 .active:hover .left, #advent2016 .active:hover .right  { 
    -ms-transition: left 1s;
    -o-transition: left 1s;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    transition: left 1s;   
}
h1 {text-align: center;}
h2 {text-align: center;}
h3 {text-align: center;}
h4 {text-align: center;}
#tuer19 { top: 0px; left: 0px; }
#tuer19 .left  { background-position: -0px -0px; }
#tuer19 .right  { background-position: -125px -0px; }
#tuer21 { top: 0px; left: 250px; }
#tuer21 .left  { background-position: -250px -0px; }
#tuer21 .right  { background-position: -375px -0px; }
#tuer4 { top: 0px; left: 500px; }
#tuer4 .left  { background-position: -500px -0px; }
#tuer4 .right  { background-position: -625px -0px; }
#tuer12 { top: 0px; left: 750px; }
#tuer12 .left  { background-position: -750px -0px; }
#tuer12 .right  { background-position: -875px -0px; }
#tuer3 { top: 111.2px; left: 0px; }
#tuer3 .left  { background-position: -0px -111.2px; }
#tuer3 .right  { background-position: -125px -111.2px; }
#tuer8 { top: 111.2px; left: 250px; }
#tuer8 .left  { background-position: -250px -111.2px; }
#tuer8 .right  { background-position: -375px -111.2px; }
#tuer20 { top: 111.2px; left: 500px; }
#tuer20 .left  { background-position: -500px -111.2px; }
#tuer20 .right  { background-position: -625px -111.2px; }
#tuer18 { top: 111.2px; left: 750px; }
#tuer18 .left  { background-position: -750px -111.2px; }
#tuer18 .right  { background-position: -875px -111.2px; }
#tuer15 { top: 222.4px; left: 0px; }
#tuer15 .left  { background-position: -0px -222.4px; }
#tuer15 .right  { background-position: -125px -222.4px; }
#tuer17 { top: 222.4px; left: 250px; }
#tuer17 .left  { background-position: -250px -222.4px; }
#tuer17 .right  { background-position: -375px -222.4px; }
#tuer10 { top: 222.4px; left: 500px; }
#tuer10 .left  { background-position: -500px -222.4px; }
#tuer10 .right  { background-position: -625px -222.4px; }
#tuer2 { top: 222.4px; left: 750px; }
#tuer2 .left  { background-position: -750px -222.4px; }
#tuer2 .right  { background-position: -875px -222.4px; }
#tuer16 { top: 333.6px; left: 0px; }
#tuer16 .left  { background-position: -0px -333.6px; }
#tuer16 .right  { background-position: -125px -333.6px; }
#tuer1 { top: 333.6px; left: 250px; }
#tuer1 .left  { background-position: -250px -333.6px; }
#tuer1 .right  { background-position: -375px -333.6px; }
#tuer5 { top: 333.6px; left: 500px; }
#tuer5 .left  { background-position: -500px -333.6px; }
#tuer5 .right  { background-position: -625px -333.6px; }
#tuer13 { top: 333.6px; left: 750px; }
#tuer13 .left  { background-position: -750px -333.6px; }
#tuer13 .right  { background-position: -875px -333.6px; }
#tuer7 { top: 444.8px; left: 0px; }
#tuer7 .left  { background-position: -0px -444.8px; }
#tuer7 .right  { background-position: -125px -444.8px; }
#tuer23 { top: 444.8px; left: 250px; }
#tuer23 .left  { background-position: -250px -444.8px; }
#tuer23 .right  { background-position: -375px -444.8px; }
#tuer22 { top: 444.8px; left: 500px; }
#tuer22 .left  { background-position: -500px -444.8px; }
#tuer22 .right  { background-position: -625px -444.8px; }
#tuer6 { top: 444.8px; left: 750px; }
#tuer6 .left  { background-position: -750px -444.8px; }
#tuer6 .right  { background-position: -875px -444.8px; }
#tuer14 { top: 556px; left: 0px; }
#tuer14 .left  { background-position: -0px -556px; }
#tuer14 .right  { background-position: -125px -556px; }
#tuer11 { top: 556px; left: 250px; }
#tuer11 .left  { background-position: -250px -556px; }
#tuer11 .right  { background-position: -375px -556px; }
#tuer24 { top: 556px; left: 500px; }
#tuer24 .left  { background-position: -500px -556px; }
#tuer24 .right  { background-position: -625px -556px; }
#tuer9 { top: 556px; left: 750px; }
#tuer9 .left  { background-position: -750px -556px; }
#tuer9 .right  { background-position: -875px -556px; }
/* #tuer23 { top: 0px; left: 0px; } 
#tuer16 { top: 0px; left: 326px; }
#tuer10 { top: 0px; left: 652px; }
#tuer13 { top: 0px; left: 978px; }
#tuer3 { top: 163px; left: 0px; }
#tuer8 { top: 163px; left: 326px; }
#tuer20 { top: 163px; left: 652px; }
#tuer6 { top: 163px; left: 978px; }
#tuer12 { top: 326px; left: 0px; }
#tuer17 { top: 326px; left: 326px; }
#tuer24 { top: 326px; left: 652px; }
#tuer9 { top: 326px; left: 978px; }
#tuer21 { top: 489px; left: 0px; }
#tuer1 { top: 489px; left: 326px; }
#tuer5 { top: 489px; left: 652px; }
#tuer14 { top: 489px; left: 978px; }
#tuer7 { top: 652px; left: 0px; }
#tuer19 { top: 652px; left: 326px; }
#tuer22 { top: 652px; left: 652px; }
#tuer2 { top: 652px; left: 978px; }
#tuer15 { top: 815px; left: 0px; }
#tuer11 { top: 815px; left: 326px; }
#tuer4 { top: 815px; left: 652px; }
#tuer18 { top: 815px; left: 978px; }

#tuer23 .left  { background-position: 0px 0px; }
#tuer23 .right  { background-position: -163px 0px; }   
#tuer16 .left  { background-position: -326px 0px; }
#tuer16 .right  { background-position: -489px 0px; }
#tuer10 .left  { background-position: -652px 0px; }
#tuer10 .right  { background-position: -815px 0px; }
#tuer13 .left  { background-position: -978px 0px; }
#tuer13 .right  { background-position: -1141px 0px; }
#tuer3 .left  { background-position: 0px -163px; }
#tuer3 .right  { background-position: -163px -163px; }   
#tuer8 .left  { background-position: -326px -163px; }
#tuer8 .right  { background-position: -489px -163px; }
#tuer20 .left  { background-position: -652px -163px; }
#tuer20 .right  { background-position: -815px -163px; }
#tuer6 .left  { background-position: -978px -163px; }
#tuer6 .right  { background-position: -1141px -163px; }
#tuer12 .left  { background-position: 0px -326px; }
#tuer12 .right  { background-position: -163px -326px; }   
#tuer17 .left  { background-position: -326px -326px; }
#tuer17 .right  { background-position: -489px -326px; }
#tuer24 .left  { background-position: -652px -326px; }
#tuer24 .right  { background-position: -815px -326px; }
#tuer9 .left  { background-position: -978px -326px; }
#tuer9 .right  { background-position: -1141px -326px; }
#tuer21 .left  { background-position: 0px -489px; }
#tuer21 .right  { background-position: -163px -489px; }   
#tuer1 .left  { background-position: -326px -489px; }
#tuer1 .right  { background-position: -489px -489px; }
#tuer5 .left  { background-position: -652px -489px; }
#tuer5 .right  { background-position: -815px -489px; }
#tuer14 .left  { background-position: -978px -489px; }
#tuer14 .right  { background-position: -1141px -489px; }
#tuer7 .left  { background-position: 0px -652px; }
#tuer7 .right  { background-position: -163px -652px; }   
#tuer19 .left  { background-position: -326px -652px; }
#tuer19 .right  { background-position: -489px -652px; }
#tuer22 .left  { background-position: -652px -652px; }
#tuer22 .right  { background-position: -815px -652px; }
#tuer2 .left  { background-position: -978px -652px; }
#tuer2 .right  { background-position: -1141px -652px; }
#tuer15 .left  { background-position: 0px -815px; }
#tuer15 .right  { background-position: -163px -815px; }   
#tuer11 .left  { background-position: -326px -815px; }
#tuer11 .right  { background-position: -489px -815px; }
#tuer4 .left  { background-position: -652px -815px; }
#tuer4 .right  { background-position: -815px -815px; }
#tuer18 .left  { background-position: -978px -815px; }
#tuer18 .right  { background-position: -1141px -815px; }
*/