/* 
    Document   : xmasCal
    Created on : 19.10.2012, 16:26:36
    Author     : r.opitz
    Description:
        Purpose of the stylesheet follows.
*/


/**
 *    @section 1: defaults
 */

/* container */
#wrapper { width: 906px }
.bgArticle { overflow: hidden; position: relative; width: 874px; margin: 0 0 15px 4px; padding: 12px; background-color: #fff;  border-radius: 5px }


/**
 *    @section 2: christmas calendar
 */

/* sprite */
.doorSprite { background-image: url(../img/xmasCal/xmasDoorSprite.png); background-repeat: no-repeat }

/* xmas calendar */
.xmasCal { position: relative; overflow: hidden; width: 874px; height: 1320px !important; /* <- !important is for ie7 */ margin: 40px auto; background: url(../img/xmasCal/xmasCalBg.jpg) no-repeat }
.xmasCalDoorBox { margin: 231px 0 0 98px }
.xmasRow { width: 170px }
.ie7 .xmasRow { margin-bottom: 18px }

/* doors */
.xmasDoor { position: relative }
.xmasDoor.small { width: 90px; height: 95px; margin: 0 50px 18px 0; padding: 15px }
.xmasDoor.small:hover { width: 115px; margin: 0 25px 18px 0 }
.xmasDoor.big { width: 178px; height: 182px; margin: 0 51px 24px 0; padding: 40px 55px; background-position: 0 -1687px }
.xmasDoor.big:hover { width: 204px; margin: 0 25px 24px 0 }

/* cap */
.cap { position: absolute; width: 100%; /*cursor: pointer*/ }
.small .cap { height: 122px; top: 0; left: 0 }
.big .cap { height: /*349px*/ 263px; top: 0; left: 0 }

/* day: over */
.small.jsOver, .small.jsOver:hover { width: 115px; margin: 0 25px 18px 0 }
.small.jsOver .cap { top: -30px; left: -15px; width: 16px; height: 159px; background-position: -484px 1px }

.big.jsOver, .big.jsOver:hover { width: 204px; margin: 0 25px 24px 0 }
.big.jsOver .cap { top: -63px; left: -30px; width: 31px; height: 327px; background-position: -470px -179px }

/* day: today */
.small.todayOpened, .small.open { width: 115px; margin: 0 25px 18px 0 }
.big.todayOpened, .big.open { width: 204px; margin: 0 25px 24px 0 }

/* door background */
.door1 .cap { background-position: 1px -298px }
.door2 .cap { background-position: -161px -128px }
.door3 .cap { background-position: -324px -984px }
.door4 .cap { background-position: 1px -128px }
.door5 .cap { background-position: 1px -809px }
.door6 .cap { background-position: -325px -466px }
.door7 .cap { background-position: 1px -1329px }
.door8 .cap { background-position: 1px -466px }
.door9 .cap { background-position: -161px -1158px }
.door10 .cap { background-position: -161px -635px }
.door11 .cap { background-position: -324px -1158px }
.door12 .cap { background-position: -323px -298px }
.door13 .cap { background-position: 1px -635px }
.door14 .cap { background-position: -323px -635px }
.door15 .cap { background-position: -161px -809px }
.door16 .cap { background-position: -323px -128px }
.door17 .cap { background-position: -161px -298px }
.door18 .cap { background-position: 1px -984px }
.door19 .cap { background-position: 1px -1500px }
.door20 .cap { background-position: -161px -984px }
.door21 .cap { background-position: -161px -466px }
.door22 .cap { background-position: -324px -810px }
.door23 .cap { background-position: 1px -1158px }
.door24 .cap { background-position: -158px -1335px }

/* "alert" - message */
.xmasMsg { opacity: 0; position: absolute; z-index: 10; left: -25px; bottom: -200px; width: 120px; padding: 10px 10px 10px 40px; font-size: 11px; text-align: center; background-color: #fff; background-position: -445px -1857px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.5) }
.xmasMsg:after { content: " "; position: absolute; left: 50%; top: -12px; width: 0; height: 0; margin-left: -5px; border-width: 6px; border-color: transparent transparent #fff ; border-style: solid }
.big .xmasMsg { width: 290px; height: 45px; line-height: 50px }

/* socials buttons */
.xmasSocialBtns { position: absolute; bottom: 34px; left: 196px; height: 50px !important /* <- !important is for ie7 */ }
.xmasSocialBtns a { display: block; width: 60px; height: 50px; text-indent: -999em }
.xmasSocialBtns .fbBtnXmas { position: relative; top: 6px; background-position: -434px -1690px }
.xmasSocialBtns .twitterBtnXmas { background-position: -436px -1800px }
.xmasSocialBtns .gPlusBtnXmas { background-position: -438px -1748px }
.xmasSocialBtns .fbBtnXmas:hover { background-position: -361px -1690px }
.xmasSocialBtns .twitterBtnXmas:hover { background-position: -365px -1799px }
.xmasSocialBtns .gPlusBtnXmas:hover { background-position: -363px -1748px }


/**
 *    @section 3: Subpages - caugt/erwsicht
 */

/* sprite */
.xmasCalCaughtSprite { background-image: url(../img/xmasCal/xmasCalCaughtSprite.jpg); background-repeat: no-repeat }

/* container */
.xmasCalCaught { position: relative; width: 100%; height: 420px }
.ctaBox { position: absolute; top: 170px; left: 450px; width: 270px; height: 100px; color: #255e9a; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.8) }
.ctaBox span { font-size: 14px }

/* button */
.xmasCalBackBtn { display: block; width: 265px; height: 66px; margin: 10px auto 0; background-position: 0 -439px; text-indent: -999em; -moz-transition: all .2s; -webkit-transition: all .2s; transition: all .2s }
.xmasCalBackBtn:hover,
.xmasCalBackBtn:focus,
.xmasCalBackBtn:active { background-position: 0 -436px }


/**
 *    @section 4: advertisment
 */

#FlexSky { left: 1120px }

/* end of xmasCal style sheet */