/*
 *    memory game css
 *    news.de 2013
 *
 *    @tableofcontent
 *      1. basics
 *     99. ie fixes
 *
 */


/**
 *    @section 1. basics
 */

/* container and logo */
.memoryGame { position: relative; padding-bottom: 5px; color: #fff; background-color: #145066; background-image: url(../../img/games/memory/memoryBg.png); border-radius: 5px }
.memoryLogo { width: 214px; height: 86px; margin: 0 auto; padding: 20px 0; background: url(../../img/games/memory/memoryLogo.png) center center no-repeat }

/* cards */

.memoryCards { margin: 0 20px }
.cardImg { display: none; position: absolute; top: 5%; left: 5%; width: 90%; height: 90% }
.flipCard { position: relative; z-index: 1; height: 122px; margin: 4px; -moz-perspective: 1000px; -webkit-perspective: 1000; perspective: 1000 }
.flipCard.solved { opacity: .1; cursor: default }
.flipCardInner { width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: all .3s linear; -webkit-transition: all .3s linear }
.face { position: absolute; width: 100%; height: 100%; margin: 0; box-shadow: 0 6px 0 -3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3); backface-visibility: hidden; -webkit-backface-visibility: hidden }
.face.front { position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent; background: #4bb8e3 url(../../img/games/memory/memoryCardBg.jpg) 50% 50%; cursor: pointer }
.face.back { background: #fff url(../../img/ajax-loader16x16.gif) center center no-repeat; transform: rotateX(180deg); -webkit-transform: rotateX(180deg) }
.flipCard.active .flipCardInner { transform: rotateX(180deg); -webkit-transform: rotateX(180deg) }
.flipCard.active .face.back { backface-visibility: visible } /* << fucking ie10 bugfix */

/* buttons */
.btnRow { margin: 10px 0; text-align: center }
.btnRow a { display: inline-block; padding: 10px; color: #666; text-decoration: none; background-color: #f1f1f1; background-image: -moz-linear-gradient(top, #fff, #f1f1f1); /*border: 1px solid #fff;*/ border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.3) }
.btnRow a:hover { background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.5) }
.btnRow a:active { background: #f1f1f1; box-shadow: inset 0 1px 2px rgba(0,0,0,.5) }

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


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

.ie .face.back { display: none }
.ie .flipCard.active .face.back { display: block }

/* end of style sheet */