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

#game
{
    width: 502px;
    height: 462px;
    margin: 0 auto;
    border: 1px solid #666;
    border-radius: 10px;
    background-image: url("../images/table.jpg");
    position: relative;
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}
#cards
{
    width: 380px;
    height: 400px;
    position: relative;
	margin:30px auto;
}
.card
{
    width: 80px;
    height: 120px;
    position: absolute;
}
.face
{
    width: 100%;
    height: 100%;
    border-radius:10px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -webkit-transition:all .3s;
}
.front
{
    background: #999 url("../images/deck.png")0 -480px;
    z-index: 10;
}
.back
{
    background: #efefef url("../images/deck.png");
    -webkit-transform-rotateY(-180deg);
    z-index: 8;
}
.face:hover
{
    -webkit-box-shadow: 0 0 40px #aaa;

}
/*牌面定位样式*/
.cardAJ{background-position: -800px 0;}
.cardAQ{background-position: -880px 0;}
.cardAK{background-position: -960px 0;}
.cardBJ{background-position: -800px -120px;}
.cardBQ{background-position: -880px -120px;}
.cardBK{background-position: -960px -120px;}

.card-flipped .front
{
    /*保证牌底在牌面下面，z-index值切换为小值*/
    z-index: 8;
    -webkit-transform: rotateY(180deg);
}
.card-flipped .back
{
    /*保证牌底在牌面上面，z-index值切换为大值*/
    z-index: 10;
    /*前面牌面已经翻过去，现在返回来*/
    -webkit-transform: rotateY(0deg);
}
/*移除牌*/
.card-removed
{
    opacity: 0;
}