body 
{
	text-align: center;
	background: #663300;
}

#game 
{
	border-radius: 10px;
	border: 1px solid #666;
	background: #3399CC;
	width: 800px;
	height: 900px;
	margin: 0 auto;

	display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
	display: -moz-box;
		-moz-box-pack: center;
		-moz-box-align: center;
	display: -ms-box;
		-ms-box-pack: center;
		-ms-box-align: center;
	display: box;
		box-pack: center;
		box-alaign: center;
}

#cards
{
	position: relative;
	width: 700px;
	height: 800px;
}

#header
{
	font: 16px Calibri, Arial, sans-seif;
	color: #3399CC;
}

.card-flipped .front 
{
		-moz-transform: rotate3d(0,1,0,180deg);
		-webkit-transform: rotate3d(0,1,0,180deg);
		transform: rotate3d(0,1,0,180deg);
		-ms-transform: rotate3d(0,1,0,180deg);
		z-index: 8;
}
	
.card-flipped .back 
{
		-moz-transform: rotate3d(0,1,0,0deg);
		-webkit-transform: rotate3d(0,1,0,0deg);
		-ms-transform: rotate3d(0,1,0,0deg);
		transform: rotate3d(0,1,0,0deg);	
		z-index: 10;
}

.face 
{
	border-radius: 10px;
	width: 100%;
	height: 100%;
	position: absolute;
		-moz-transition-property: opacity, -moz-transform, -moz-box-shadow;
		-moz-transition-duration: .3s;
		-webkit-transition-property: opacity, -webkit-transform, -webkit-box-shadow;
		-webkit-transition-duration: .3s;
		-ms-transition-property: opacity, -webkit-transform, -webkit-box-shadow;
		-ms-transition-duration: .3s;
		transition-property: opacity, transform, box-shadow;
		transition-duration: .3s;
		
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
}


.card 
{
	-moz-perspective: 600;
	width: 120px;
	height: 180px;
	position: absolute;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}


.front 
{
	background: #999 url(../images/sprite.png) -120px -360px;
	z-index: 10;
}

.back 
{
	background: #efefef url(../images/sprite.png);
		-moz-transform: rotate3d(0,1,0,-180deg);
		-webkit-transform: rotate3d(0,1,0,-180deg);
		transform: rotate3d(0,1,0,-180deg);
		-mstransform: rotate3d(0,1,0,-180deg);
		z-index: 8;
}

.card:hover .face
{
	-webkit-box-shadow: 0 0 20px #aaa;
	-moz-box-shadow: 0 0 20px #aaa;
	-ms-box-shadow: 0 0 20px #aaa;
	box-shadow: 0 0 10px #aaa;
}

.card-flipped .front 
{
	-moz-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	z-index: 8;
}

.card-flipped .face
{
	-webkit-box-shadow: 0 0 20px #aaa;
	-moz-box-shadow: 0 0 20px #aaa;
	-ms-box-shadow: 0 0 20px #aaa;
	box-shadow: 0 0 10px #aaa;		
}


.card-removed 
{
	opacity: 0;
}

.card01 {background-position: 0 0;}
.card02 {background-position: -120px 0;}
.card03 {background-position: -240px 0;}
.card04 {background-position: -360px 0;}
.card05 {background-position: -480px 0;}
.card06 {background-position: -600px 0;}
.card07 {background-position: -720px 0;}
.card08 {background-position: -840px 0;}
.card09 {background-position: -960px 0;}
.card10 {background-position: -1080px 0;}
.card11 {background-position: 0 -180px;}
.card12 {background-position: -120px -180px;}
.card13 {background-position: -240px -180px;}
.card14 {background-position: -360px -180px;}
.card15 {background-position: -480px -180px;}
.card16 {background-position: -600px -180px;}
.card17 {background-position: -720px -180px;}
.card18 {background-position: -840px -180px;}
.card19 {background-position: -960px -180px;}
.card20 {background-position: -1080px -180px;}