/*
 *    game.css
 *    news.de 2013
 *
 *    @tableofcontent
 *      1. message layer
 *      2. game loading
 *      3. game article
 *
 */


/**
 *    @section 1. message layer
 */

.gameMsg { position: absolute; top: 150px; left: 40px; right: 40px; bottom: 150px; z-index: 10; padding: 10px; color: #666; text-align: center; background-color: #fff; background-image: -moz-linear-gradient(top, #fff, #f1f1f1); background-image: -webkit-linear-gradient(top, #fff, #f1f1f1); background-image: linear-gradient(top, #fff, #f1f1f1); border: 3px solid #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.4) }
.gameMsgClose { position: absolute; right: -15px; top: -15px; padding: 10px; color: #fff; font-size: 20px; text-shadow: 0 1px 0 rgba(0,0,0,.5); background-color: red; background-image: -moz-linear-gradient(top, #f50000, #b00000); background-image: -webkit-linear-gradient(top, #f50000, #b00000); background-image: linear-gradient(top, #f50000, #b00000); border: 1px solid #9d0000; border-radius: 50px; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); cursor: pointer }
.gameMsgContentAd { min-height: 300px; background: url(../../img/ajax-loader16x16.gif) center center no-repeat }
.gameMsgContentText { position: relative; margin: 0 -20px; padding: 8px 30px; font-size: 16px; line-height: 22px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); background-color: darkred; background-image: -moz-linear-gradient(top, #fc0000, #b80000); background-image: -webkit-linear-gradient(top, #fc0000, #b80000); background-image: linear-gradient(top, #fc0000, #b80000); border: 1px solid #a10000; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -9px 0 -7px #ccc, 0 9px 0 -7px #ccc; cursor: default }
.gameMsgContentText:before,
.gameMsgContentText:after { content: ''; position: absolute; top: -7px; border-style: solid }
.gameMsgContentText:before { left: -1px; border-width: 0 0 7px 7px; border-color: transparent transparent darkred }
.gameMsgContentText:after { right: -1px; border-width: 7px 0 0 7px; border-color: transparent darkred transparent }
.green .gameMsgContentText { position: relative; margin: 0 -20px; padding: 8px 30px; font-size: 16px; line-height: 22px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); background-color: darkgreen; background-image: -moz-linear-gradient(top, #79ce0b, #4e8407); background-image: -webkit-linear-gradient(top, #79ce0b, #4e8407); background-image: linear-gradient(top, #79ce0b, #4e8407); border: 1px solid #4e8407; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -9px 0 -7px #ccc, 0 9px 0 -7px #ccc; cursor: default }
.green .gameMsgContentText:before,
.green .gameMsgContentText:after { content: ''; position: absolute; top: -7px; border-style: solid }
.green .gameMsgContentText:before { left: -1px; border-width: 0 0 7px 7px; border-color: transparent transparent darkgreen }
.green .gameMsgContentText:after { right: -1px; border-width: 7px 0 0 7px; border-color: transparent darkgreen transparent }


/**
 *    @section 2. game loading
 */

.gameLoad { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 150; background: rgba(0,0,0,.2); box-shadow: inset 0 0 150px #000; cursor: default }
.gameLoadInner { width: 200px; margin: 50% auto; text-align: center }
.gameLoadTxt { white-space: nowrap; padding: 10px; font-size: 18px; color: #666; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.3) }

/* animation */
.gameLoadTxt { animation: gameLoadTxt 1s linear infinite; -webkit-animation: gameLoadTxt 1s infinite linear }
@keyframes gameLoadTxt {
    0% { font-size: 18px }
   50% { font-size: 20px }
  100% { font-size: 18px }
}

@-webkit-keyframes gameLoadTxt {
    0% { font-size: 18px }
   50% { font-size: 20px }
  100% { font-size: 18px }
}

/**
 *    @section 3. game article
 */
.lotteryGame { position: relative }
.lotteryGame .btn.gameBegin,
.lotteryGame .btn.gameBegin:active { position: absolute; top: 50%; left: 23%; margin-top: -15px; padding: .5em; font-size: 1.5em }
.lotteryGameOverlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 1000; border-radius: 5px; -webkit-border-radius: 5px }

.lotteryGame .hangmanGame { width: 100% }

.messageBox { padding: 10px; line-height: 1.2em; border: 1px solid }
.success { background: #e2f6c5; color: #350; border-color: #090 }
.error { background: #F3D9D9; color: #700; border-color :#a00 }
.warning { background: #f5f3ba; color: #886622; border-color: #cc9900 }
.information { background: #b5e5ef; color: #222; border-color: #4ac }

/* ie fixes */
.ie7 .gameLoad,
.ie8 .gameLoad { background: url(../../img/games/ieLoadingBg.png) }
.ie7 .gameLoadTxt { display: inline; zoom: 1 }

.ie7 .gameMsgContentText { border: none }

/* end of style sheet */