/* Demo: Tutorial für einen digitalen Adventskalender | webkrauts.de http://webkrauts.de/artikel/2012/tutorial-digitaler-adventskalender */ /* ----- Basis-Layout / kleiner Bildschirm ----- */ /* body { color: #000; background: #CCC; font: 18px/25px PTSansRegular, sans-serif; margin: 0; padding: 0; } #wrapper { width: 90%; padding: 5%; background: #FFF; } p { margin: 0 0 5px 0; color: #000; } h1, h2 { font-family: PTSansBold, sans-serif; font-weight: normal; } h1 { font-size: 26px; } h2 { font-size: 22px; } li { padding: 0 0 20px 0; border-bottom: 1px dashed #ccc; margin-bottom: 30px; } a { color: #CD0000; text-decoration: none; } */ /* 241 0 241 482 723 964 246 0 246 492 738 984 251 0 251 502 753 1004 */ #ak2019 a { padding: 10px; display: block; text-decoration: none;} #ak2019 a:hover, #ak2019 a:focus { background-color: #FAE8E8; } #ak2019 h2 { text-decoration: none; } #ak2019 a:hover h2, #ak2019 a:focus h2 { text-decoration: none; } /* .left, .right, .small-hide { display: none; } */ .small-hide { display: none; } @font-face { font-family: 'PTSansBold'; src: url('../fonts/PTS75F-webfont.eot'); src: url('../fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS75F-webfont.woff') format('woff'), url('../fonts/PTS75F-webfont.ttf') format('truetype'), url('../fonts/PTS75F-webfont.svg#PTSansBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansRegular'; src: url('../fonts/PTS55F-webfont.eot'); src: url('../fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS55F-webfont.woff') format('woff'), url('../fonts/PTS55F-webfont.ttf') format('truetype'), url('../fonts/PTS55F-webfont.svg#PTSansRegular') format('svg'); font-weight: normal; font-style: normal; } /* ----- Layout, sobald das 3x8-Bild passt | Breite: 3x 250px + 4x 1px border + 2x 20px padding ----- */ @media only screen and (min-width : 1px) { /* #wrapper { width: 754px; padding: 20px; margin: 0 auto; background: #FFF; } */ #wrapper { width: 754px; margin: 0 auto; background: #FFF; } p.small-hide { display: block; } span.small-hide { display: inline; } .teaser { text-indent: -9999px; } #ak2019 { position: relative; padding: 0; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin: 0 auto 24px auto; width: 753px; height: 1208px; box-shadow: 4px 4px 4px #CCC; } #ak2019 li { position: absolute; padding: 0; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; margin: 0; list-style: none; width: 160px; height: 150px; overflow: hidden; } #ak2019 li a { position: absolute; padding: 10px; width: 140px; height: 130px; } #ak2019 p, #ak2019 h2 { font-size: 20px; line-height: 24px; margin: 0 0 8px 0; color: #FFF; text-align: center; } #ak2019 p { font-size: 14px; line-height: 18px; } #ak2019 a:hover, #ak2019 a:focus { background-color: #CD0000; } #ak2019 span { position: absolute; top: 10px; left: 10px; font-size: 12px; width: 24px; height: 24px; text-align: center; color: #FFF; background: #CD0000; display: inline-block; } #ak2019 .left, #ak2019 .right { position: absolute; top: 0; width: 80px; height: 150px; background: #FFF url(../img/adventskalender-2012-3x8.jpg) 0 0 no-repeat; display: block; } #ak2019 .left { left: 0; } #ak2019 .right { left: 80px; } #ak2019 a:hover .left, #ak2019 a:focus .left { left: -80px; } #ak2019 a:hover .right, #ak2019 a:focus .right { left: 160px; } #ak2019 a .left, #ak2019 a .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; } #ak2019 a:hover .left, #ak2019 a:hover .right { -ms-transition: left 1s; -o-transition: left 1s; -webkit-transition: left 1s; -moz-transition: left 1s; transition: left 1s; } #ak23 { top: 0px; left: 0px; } #ak16 { top: 0px; left: 251px; } #ak10 { top: 0px; left: 502px; } #ak13 { top: 151px; left: 0px; } #ak3 { top: 151px; left: 251px; } #ak8 { top: 151px; left: 502px; } #ak20 { top: 302px; left: 0px; } #ak6 { top: 302px; left: 251px; } #ak12 { top: 302px; left: 502px; } #ak17 { top: 453px; left: 0px; } #ak24 { top: 453px; left: 251px; } #ak9 { top: 453px; left: 502px; } #ak21 { top: 604px; left: 0px; } #ak1 { top: 604px; left: 251px; } #ak5 { top: 604px; left: 502px; } #ak14 { top: 755px; left: 0px; } #ak7 { top: 755px; left: 251px; } #ak19 { top: 755px; left: 502px; } #ak22 { top: 906px; left: 0px; } #ak2 { top: 906px; left: 251px; } #ak15 { top: 906px; left: 502px; } #ak11 { top: 1057px; left: 0px; } #ak4 { top: 1057px; left: 251px; } #ak18 { top: 1057px; left: 502px; } #ak23 .left { background-position: 0px 0px; } #ak23 .right { background-position: -125px 0px; } #ak16 .left { background-position: -250px 0px; } #ak16 .right { background-position: -375px 0px; } #ak10 .left { background-position: -500px 0px; } #ak10 .right { background-position: -625px 0px; } #ak13 .left { background-position: 0px -150px; } #ak13 .right { background-position: -125px -150px; } #ak3 .left { background-position: -250px -150px; } #ak3 .right { background-position: -375px -150px; } #ak8 .left { background-position: -500px -150px; } #ak8 .right { background-position: -625px -150px; } #ak20 .left { background-position: 0px -300px; } #ak20 .right { background-position: -125px -300px; } #ak6 .left { background-position: -250px -300px; } #ak6 .right { background-position: -375px -300px; } #ak12 .left { background-position: -500px -300px; } #ak12 .right { background-position: -625px -300px; } #ak17 .left { background-position: 0px -450px; } #ak17 .right { background-position: -125px -450px; } #ak24 .left { background-position: -250px -450px; } #ak24 .right { background-position: -375px -450px; } #ak9 .left { background-position: -500px -450px; } #ak9 .right { background-position: -625px -450px; } #ak21 .left { background-position: 0px -600px; } #ak21 .right { background-position: -125px -600px; } #ak1 .left { background-position: -250px -600px; } #ak1 .right { background-position: -375px -600px; } #ak5 .left { background-position: -500px -600px; } #ak5 .right { background-position: -625px -600px; } #ak14 .left { background-position: 0px -750px; } #ak14 .right { background-position: -125px -750px; } #ak7 .left { background-position: -250px -750px; } #ak7 .right { background-position: -375px -750px; } #ak19 .left { background-position: -500px -750px; } #ak19 .right { background-position: -625px -750px; } #ak22 .left { background-position: 0px -900px; } #ak22 .right { background-position: -125px -900px; } #ak2 .left { background-position: -250px -900px; } #ak2 .right { background-position: -375px -900px; } #ak15 .left { background-position: -500px -900px; } #ak15 .right { background-position: -625px -900px; } #ak11 .left { background-position: 0px -1050px; } #ak11 .right { background-position: -125px -1050px; } #ak4 .left { background-position: -250px -1050px; } #ak4 .right { background-position: -375px -1050px; } #ak18 .left { background-position: -500px -1050px; } #ak18 .right { background-position: -625px -1050px; } } /* ----- Layout, sobald das 6x4-Bild passt | Breite: 6x 160px + 7x 1px border + 2x 20px padding ----- */ /*@media only screen and (min-width : 1007px) { nur diese Breite */ @media only screen and (min-width : 2px) { #wrapper { width: 967px; } #ak2019 { width: 966px; height: 604px; } #ak2019 .left, #ak2019 .right { background: #FFF url(../img/adventskalender_2019-6x4.jpg) 0 0 no-repeat; } #ak23 { top: 0px; left: 0px; } #ak16 { top: 0px; left: 161px; } #ak10 { top: 0px; left: 322px; } #ak13 { top: 0px; left: 483px; } #ak3 { top: 0px; left: 644px; } #ak8 { top: 0px; left: 805px; } #ak20 { top: 151px; left: 0px; } #ak6 { top: 151px; left: 161px; } #ak12 { top: 151px; left: 322px; } #ak17 { top: 151px; left: 483px; } #ak24 { top: 151px; left: 644px; } #ak9 { top: 151px; left: 805px; } #ak21 { top: 302px; left: 0px; } #ak1 { top: 302px; left: 161px; } #ak5 { top: 302px; left: 322px; } #ak14 { top: 302px; left: 483px; } #ak7 { top: 302px; left: 644px; } #ak19 { top: 302px; left: 805px; } #ak22 { top: 453px; left: 0px; } #ak2 { top: 453px; left: 161px; } #ak15 { top: 453px; left: 322px; } #ak11 { top: 453px; left: 483px; } #ak4 { top: 453px; left: 644px; } #ak18 { top: 453px; left: 805px; } #ak23 .left { background-position: 0px 0px; } #ak23 .right { background-position: -80px 0px; } #ak16 .left { background-position: -160px 0px; } #ak16 .right { background-position: -240px 0px; } #ak10 .left { background-position: -320px 0px; } #ak10 .right { background-position: -400px 0px; } #ak13 .left { background-position: -480px 0px; } #ak13 .right { background-position: -560px 0px; } #ak3 .left { background-position: -640px -0px; } #ak3 .right { background-position: -720px -0px; } #ak8 .left { background-position: -800px -0px; } #ak8 .right { background-position: -880px -0px; } #ak20 .left { background-position: 0px -150px; } #ak20 .right { background-position: -80px -150px; } #ak6 .left { background-position: -160px -150px; } #ak6 .right { background-position: -240px -150px; } #ak12 .left { background-position: -320px -150px; } #ak12 .right { background-position: -400px -150px; } #ak17 .left { background-position: -480px -150px; } #ak17 .right { background-position: -560px -150px; } #ak24 .left { background-position: -640px -150px; } #ak24 .right { background-position: -720px -150px; } #ak9 .left { background-position: -800px -150px; } #ak9 .right { background-position: -880px -150px; } #ak21 .left { background-position: 0px -300px; } #ak21 .right { background-position: -80px -300px; } #ak1 .left { background-position: -160px -300px; } #ak1 .right { background-position: -240px -300px; } #ak5 .left { background-position: -320px -300px; } #ak5 .right { background-position: -400px -300px; } #ak14 .left { background-position: -480px -300px; } #ak14 .right { background-position: -560px -300px; } #ak7 .left { background-position: -640px -300px; } #ak7 .right { background-position: -720px -300px; } #ak19 .left { background-position: -800px -300px; } #ak19 .right { background-position: -880px -300px; } #ak22 .left { background-position: 0px -450px; } #ak22 .right { background-position: -80px -450px; } #ak2 .left { background-position: -160px -450px; } #ak2 .right { background-position: -240px -450px; } #ak15 .left { background-position: -320px -450px; } #ak15 .right { background-position: -400px -450px; } #ak11 .left { background-position: -480px -450px; } #ak11 .right { background-position: -560px -450px; } #ak4 .left { background-position: -640px -450px; } #ak4 .right { background-position: -720px -450px; } #ak18 .left { background-position: -800px -450px; } #ak18 .right { background-position: -880px -450px; } }