/*
 *    hangman game css
 *    news.de 2013
 *
 *    @tableofcontent
 *      1. basic styles
 *     98. animations
 *     99. ie fixes
 */


/**
 *    @section 1. basic styles
 */

/* sprite */
.hangmanSprite { background: url(../../img/games/hangman/hangmanSprite.png) }

/* game container */
.hangmanGame { overflow: hidden; position: relative; width: 550px; background: #f1f1f1; border-radius: 5px }

/* logo */
.hangmanLogo { position: absolute; left: 50%; width: 300px; height: 165px; margin-left: -150px; background-position: 0 0 }

/* game board */
.hangmanBg { overflow: hidden; position: relative; height: 480px; background: url(../../img/games/hangman/hangmanBg.jpg) }
.hangmanSolution { position: absolute; bottom: 20px; left: 130px; right: 130px }
.hangmanSolution ul { text-align: center; cursor: default }
.hangmanSolution li { display: inline-block; width: 18px; padding-bottom: 3px; font-size: 20px; font-family: /*impact,*/ georgia, times new roman, serif; text-shadow: 0 1px 0 rgba(255,255,255,.2); border-bottom: 1px solid #333; box-shadow: 0 1px 0 rgba(255,255,255,.2) }

/* objects */
.hangmanShield { position: absolute; bottom: 0; left: -500px; width: 191px; height: 262px; background-position: 0 -331px }
.hangmanShield span { position: absolute; top: 65px; right: 30px; left: 10px; color: #333; font-size: 14px; font-family: georgia, times new roman, serif; text-align: center; cursor: help }
.hangmanCactus { position: absolute; bottom: 0; left: -500px; width: 134px; height: 154px }
.hangmanCactusInner { width: 100%; height: 100%; background-position: 0 -167px }
.hangmanRock { position: absolute; bottom: 0; right: -500px; width: 115px; height: 134px; background-position: right -188px }
.hangmanBird { position: absolute; top: 233px; right: 46px; z-index: 1; width: 68px; height: 59px; background-position: -148px -686px }

.hangmanCactusSmall { position: absolute; top: 283px; right: 42px; width: 75px; height: 128px }
.hangmanCactusSmall .tribe { position: absolute; top: 0; left: 20px; width: 35px; height: 121px; background-position: -264px -635px }
.hangmanCactusSmall .limbRight { position: absolute; top: 19px; left: 41px; width: 28px; height: 39px; background-position: -229px -697px }
.hangmanCactusSmall .limbLeft { position: absolute; top: 5px; left: 8px; width: 32px; height: 41px; background-position: -229px -647px }

.ready .hangmanCactus.used { bottom: -69px; transform: rotateX(90deg); transition: .2s all; -webkit-transform: rotateX(90deg); -webkit-transition: .2s all }
.ready .hangmanShield.used { left: -25px; transform: rotateY(40deg); transition: .2s all; -webkit-transform: rotateY(40deg); -webkit-transition: .2s all }
.ready .hangmanBird.used { top: 355px; transform: rotate(130deg); transition: .2s all; -webkit-transform: rotate(130deg); -webkit-transition: .2s all }
.ready .tribe.used { top: 43px; transform: rotate(85deg); transition: .2s all; -webkit-transform: rotate(85deg); -webkit-transition: .2s all }
.ready .limbLeft.used { top: 70px; transform: rotate(-90deg); transition: .2s all; -webkit-transform: rotate(-90deg); -webkit-transition: .2s all }
.ready .limbRight.used { top: 70px; transform: rotate(50deg); transition: .2s all; -webkit-transform: rotate(50deg); -webkit-transition: .2s all }

.ready .hangmanShield { left: -5px }
.ready .hangmanCactus { left: -5px }
.ready .hangmanRock { right: -5px }

/* clouds */
.hangmanCloud { position: absolute; left: -50%; width: 140px; height: 40px; background-position: 0 -669px }
.hangmanCloud1 { top: 30% }
.hangmanCloud2 { top: 10% }
.hangmanCloud3 { top: 20% }

/* keyboard */
.hangmanKeyboard { padding: 5px; border-bottom: 1px solid #e0e0e0; cursor: default }
.hangmanKeyboard ul { margin: 5px 0; text-align: center }
.hangmanKeyboard li { display: inline-block }
.hangmanBtn { display: inline-block; margin: 2px; padding: 10px 15px 10px; font: 700 9pt arial; text-align: center; color: #aaa; text-shadow: 0 1px 0 #f5f5f5; background: #f1f1f1; border-top: 1px solid #f5f5f5; border-radius: 4px; box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #666; cursor: pointer }
.hangmanBtn.greenBtn { color: green; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); background: #7FD50A; border-top: 1px solid rgba(255,255,255,.6); box-shadow: 0 0 25px rgba(255,255,255,.1) inset, 0 2px 0 #70C60A, 0 2px 3px #666 }
.hangmanBtn:hover { background: #fff; text-decoration: none }
.hangmanBtn.used,
.hangmanBtn:active { color: #888; background: #ebeced; border-top: 1px solid #eee; box-shadow: 0 1px 0 rgba(0,0,0,.1) inset, 0 1px 2px rgba(255,255,255,1) }
.hangmanBtn.greenBtn:hover { background: #8fef0b }
.hangmanBtn.greenBtn:active { color: green; background: #8fef0b; border-top: 1px solid rgba(255,255,255,.2) }
.hangmanBtn.used { color: #ccc; cursor: default }

/* action buttons */
.hangmanBtns { padding: 10px; text-align: center; border-top: 1px solid #fafafa }
.hangmanMsgNew { margin: 10px 0 }
.hangmanMsgNew:hover { text-decoration: none }

/* gallows */
.hangmanGallows { position: absolute; left: 50%; bottom: 60px; width: 300px; height: 200px; margin-left: -150px }
.hangmanGallows div { position: absolute }
.hangmanGallows .bottom { bottom: 0; left: 50px; width: 205px; height: 70px; background-position: 0 -594px }
.hangmanGallows .bar1 { bottom: 50px; left: 105px; width: 29px; height: 122px; background-position: right -339px }
.hangmanGallows .bar2 { bottom: 137px; left: 116px; width: 86px; height: 39px; background-position: right -477px }
.hangmanGallows .rope { top: -21px; left: 18px; width: 18px; height: 54px; background-position: -145px -271px }
.hangmanGallows .hangmanGuy { bottom: 56px; left: 157px; width: 40px; height: 100px }
.hangmanGallows .head { bottom: 0; left: 0; z-index: 3; width: 45px; height: 91px; background-position: right -534px }
.hangmanGallows .body { bottom: 27px; left: 8px; width: 29px; height: 49px; background-position: -208px -529px }
.hangmanGallows .limb { bottom: 0; left: 8px; width: 24px; height: 62px; background-position: -208px -593px }

/* message layer */
.gameMsg { top: 40px; bottom: 255px }
.gameMsgClose { display: none }

/* error color */
.redSign { color: red }

/* stop watch */
.stopwatchBox { position: absolute; right: 10px; bottom: 223px; padding: 10px; color: #666; background-color: #fff; background-image: -moz-linear-gradient(top, #fff, #f1f1f1); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.3); opacity: .8; cursor: default }
.stopwatchHead { display: block; font-weight: 700; font-size: 12px;  text-align: center; text-transform: uppercase }

/* ani text */
.hangmanYeah { opacity: 0; position: absolute; left: 0; right: 0; top: 180px; text-align: center; font: 700 16px arial, verdana, helvetica, sans-serif; color: green; text-shadow: 0 0 5px #fff; cursor: default }
.hangmanOhOh { opacity: 0; position: absolute; left: 0; right: 0; top: 200px; text-align: center; font: 700 16px arial, verdana, helvetica, sans-serif; color: red; text-shadow: 0 0 5px #fff; cursor: default }

/* shootDown */
.shootDown { cursor: crosshair }
.shootDown.used { cursor: default }

/**
 *    @section 98. animations
 */

.ready .hangmanLogo { animation-duration: 1s; animation-name: topSlide; -webkit-animation-duration: 1s; -webkit-animation-name: topSlide }
@keyframes topSlide {
    0% { top: -200px }
   20% { top: -200px }
   80% { top: 5px }
   90% { top: -5px }
  100% { top: 0 }
}

@-webkit-keyframes topSlide {
    0% { top: -200px }
   20% { top: -200px }
   80% { top: 5px }
   90% { top: -5px }
  100% { top: 0 }
}

.ready .hangmanShield { animation-duration: 1s; animation-name: leftSlide; -webkit-animation-duration: 1s; -webkit-animation-name: leftSlide }
.ready .hangmanCactus { animation-duration: .8s; animation-name: leftSlide; -webkit-animation-duration: .8s; -webkit-animation-name: leftSlide }
@keyframes leftSlide {
    0% { left: -200px }
  100% { left: -5px }
}

@-webkit-keyframes leftSlide {
    0% { left: -200px }
  100% { left: -5px }
}

.ready .hangmanCactusInner { animation: cactusLoop 4s infinite; animation-timing-function: linear; -webkit-animation: cactusLoop 4s infinite; -webkit-animation-timing-function: linear }
@keyframes cactusLoop {
   0% { transform: rotate(0deg) }
  25% { transform: rotate(1deg) }
  50% { transform: rotate(0deg) }
  75% { transform: rotate(-1deg) }
 100% { transform: rotate(0deg) }
}

@-webkit-keyframes cactusLoop {
   0% { -webkit-transform: rotate(0deg) }
  25% { -webkit-transform: rotate(1deg) }
  50% { -webkit-transform: rotate(0deg) }
  75% { -webkit-transform: rotate(-1deg) }
 100% { -webkit-transform: rotate(0deg) }
}

.ready .hangmanRock { animation-duration: 1s; animation-name: rightSlide; -webkit-animation-duration: 1s; -webkit-animation-name: rightSlide }
@keyframes rightSlide {
    0% { right: -200px }
  100% { right: -5px }
}

@-webkit-keyframes rightSlide {
    0% { right: -200px }
  100% { right: -5px }
}

.ready .hangmanSolution { animation-duration: 1s; animation-name: bottomSlide; -webkit-animation-duration: 1s; -webkit-animation-name: bottomSlide }
@keyframes bottomSlide {
    0% { bottom: -50px }
  100% { bottom: 20px }
}

@-webkit-keyframes bottomSlide {
    0% { bottom: -50px }
  100% { bottom: 20px }
}

.ready .hangmanCloud1 { animation: cloudAni 20s infinite; animation-timing-function: linear; -webkit-animation: cloudAni 20s infinite; -webkit-animation-timing-function: linear }
.ready .hangmanCloud2 { animation: cloudAni 30s infinite; animation-timing-function: linear; animation-delay: 6s; -webkit-animation: cloudAni 30s infinite; -webkit-animation-timing-function: linear; -webkit-animation-delay: 6s }
.ready .hangmanCloud3 { animation: cloudAni 40s infinite; animation-timing-function: linear; animation-delay: 10s; -webkit-animation: cloudAni 40s infinite; -webkit-animation-timing-function: linear; -webkit-animation-delay: 10s }
@keyframes cloudAni {
    0% { left: -50% }
  100% { left: 100% }
}

@-webkit-keyframes cloudAni {
    0% { left: -50% }
  100% { left: 100% }
}

.ready .hangmanGuy { transform-origin: center 0; -webkit-transform-origin: center 0; animation: hangmanGuy 4s linear infinite; -webkit-animation: hangmanGuy 4s infinite linear }
@keyframes hangmanGuy {
   0% { transform: rotate(0deg) }
  25% { transform: rotate(5deg) }
  50% { transform: rotate(0deg) }
  75% { transform: rotate(-5deg) }
 100% { transform: rotate(0deg) }
}

@-webkit-keyframes hangmanGuy {
   0% { -webkit-transform: rotate(0deg) }
  25% { -webkit-transform: rotate(5deg) }
  50% { -webkit-transform: rotate(0deg) }
  75% { -webkit-transform: rotate(-5deg) }
 100% { -webkit-transform: rotate(0deg) }
}

.ready .hangmanYeah.active,
.ready .hangmanOhOh.active { animation-duration: 1s; animation-name: hangmanOhYeah; -webkit-animation-duration: 1s; -webkit-animation-name: hangmanOhYeah }
@keyframes hangmanOhYeah {
    0% { top: 150px; opacity: 0 }
   50% { opacity: 1 }
  100% { top: 200px; opacity: 0 }
}

@-webkit-keyframes hangmanOhYeah {
    0% { top: 150px; opacity: 0 }
   50% { opacity: 1 }
  100% { top: 200px; opacity: 0 }
}


/**
 *    @section 99. ie fixes
 */

.ie7 .hangmanSolution li,
.ie7 .hangmanKeyboard li { display: inline; zoom: 1; margin: 0 2px }
.ie7 .hangmanKeyboard .hangmanBtn,
.ie8 .hangmanKeyboard .hangmanBtn { border: 1px solid #ccc; border-width: 1px 1px 2px }
.ie7 .hangmanKeyboard .hangmanBtn.used,
.ie8 .hangmanKeyboard .hangmanBtn.used { background: #f1f1f1; border-color: #f1f1f1 }
.ie .hangmanGoText,
.ie .hangmanYeah,
.ie .hangmanOhOh,
.ie .hangmanGoText { display: none }
.ie .hangmanShield { left: -5px }
.ie .hangmanCactus { left: -5px }
.ie .hangmanRock { right: -5px }
.ie .hangmanBird.used { display: none }
.ie .hangmanCactus.used,
.ie .hangmanShield.used { bottom: -30px }
.ie .tribe.used { top: 2px }
.ie .limbLeft.used { top: 21px }
.ie .limbRight.used { top: 7px }

/* end of style sheet */