body {
 text-align: center;
 background: #a46740 url(../images/bg.jpg);
}

#game {
 border-radius: 10px;
 border: 1px solid #666;
 background: #232 url(../images/table.jpg);
 width: 500px;
 height: 460px;
 margin: 0 auto;
 display: box;
 box-pack: center;
 box-align: center;
}
#cards {
 position: relative;
 width: 380px;
 height: 400px;
}
.card {
 -webkit-perspective: 600;
 width: 80px;
 height: 120px;
 position: absolute;
 -moz-transition: all .3s;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.face {
 border-radius: 10px;
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-transition-property: opacity, transform, box-shadow;
 -webkit-transition-duration: .3s;

 -webkit-backface-visibility: hidden;
}
.front { 
 background: #999 url(../images/deck.png) 0 -480px;
 z-index: 10;
}
.back {
 background: #efefef url(../images/deck.png);
 -webkit-transform: rotate3d(0,1,0,-180deg);
 z-index: 8;
}
.card:hover .face, .card-flipped .face {
 -webkit-box-shadow: 0 0 10px #aaa;
}
.card-flipped .front {
 -webkit-transform: rotate3d(0,1,0,180deg);
 z-index: 8;
}
.card-flipped .back {
 -webkit-transform: rotate3d(0,1,0,0deg);
 z-index: 10;
}
.card-removed {
 opacity: 0;
}

.cardAQ {background-position: -880px 0;}
.cardAK {background-position: -960px 0;}
.cardBQ {background-position: -880px -120px;}
.cardBK {background-position: -960px -120px;}
.cardCQ {background-position: -880px -240px;}
.cardCK {background-position: -960px -240px;}
.cardDQ {background-position: -880px -360px;}
.cardDK {background-position: -960px -360px;}