body {
	text-align: center;
	background: #f5f5f5 url(backdrop.png);
}
button{
	border: 3px solid white;
	border-radius: 5px;
	width: 210px;
	height: 80px;
	margin: 25px;
	font-size: 32px;
	color: #800080;
	background-color: #FFF0F5;
	font-family: Verdana; 
	} 
img{
	margin-left: auto;
	margin-right: auto; 
	border: 3px solid white;
	border-radius: 5px; 
}
#game {
	width: 740px;
	height: 960px;
	margin: 0 auto;
	margin-left: auto;
	margin-right: auto;
}
#cards {
	position: relative;
	height: 820px;
	width: 660px;
	margin-left: auto;
	margin-right: auto;
	top: 20px;
	left: -583px;
}
#menu {
	margin-top:20px; 
	width: 350px;
	height: 250px;
	background-color: #F0F0F0;
	border: 5px solid white;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#helpButton{
	top: 760px; 
	position: relative;
	border: 3px solid white;
	border-radius: 5px;
	width: 210px;
	height: 75px;
	margin: 50;
	font-size: 32px;
	color: #800080;
	background-color: #FFF0F5;
	font-family: Verdana; 
}
#finishGame {
	width: 220px;
	margin: 0 auto;
	position: inline; 
	padding: 10px;
	left: 820px; 
	}
.popupBox {
	display: none;
	position: fixed;
	background: #fff;
	width: 100%;
	z-index: 2000;
	width: 40%;
	left: 30%;
	top:15%;
	margin: 0px auto;
	padding: 10px;
	border: 5px solid white;
	border-radius: 5px; 
}
.popupBox > .boxHead { 
	background:#F0F0F0; 
	font-size: 30px; 
	padding:10px; 
	color: #800080; 
	font-weight: bold; 
	border: 3px solid white;
	font-weight: bold;
	font-family: Verdana; 
	}
.popupBox > .boxBody {
	background: #FFF0F5; 
	padding: 6px; 
	color: #800080; 
	font-size: 20px; 
	border: 3px solid white;
	font-family: Verdana; 
	}
.popupBox > .boxFoot { 
	background: #F0F0F0; 
	padding: 6px; 
	text-align: center; 
	border: 3px solid white;
}
.card {
	border-radius: 5px; 
	-webkit-perspective: 600;
	width: 80px;
	height: 120px;
	position: absolute;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-webkit-transition: all .3s;
}
.face {
	border-radius: 5px; 
	border: 2px solid White;
	width: 100%;
	height: 100%;
	position: absolute;

}
.front {
	background: #999 url(cardSprite.png) -0 -0px;
	z-index: 10;
	}
.back {
	background: #efefef url(cardSprite.png);
	z-index: 8;
 }	
  .cardFlipped .front{
	opacity: 0;
	z-index: 8;
 }
 .cardFlipped .back{
	z-index: 10;
 }
 .cardRemoved {
	opacity: 0;
 }

.AB {
	width:80px; 
	height:120px; 
	background-position: -960px -0px;
}
.AC {
	width:80px; 
	height:120px; 
	background-position: -1040px -0px;
}
.AD {
	width:80px; 
	height:120px; 
	background-position: -880px -0px;
}
.AE {
	width:80px; 
	height:120px; 
	background-position: -1120px -0px;
}
.BA {
	width:80px;
	height:120px; 
	background-position: -1200px -0px;
}
.BC {
	width:80px; 
	height:120px; 
	background-position: -1360px -0px;
}
.BD {
	width:80px; 
	height:120px;
	background-position: -1440px -0px;
}
.BE {
	width:80px; 
	height:120px; 
	background-position: -1280px -0px;
}
.CA {
	width:80px; 
	height:120px; 
	background-position: -800px -0px;
}
.CB {
	width:80px; 
	height:120px; 
	background-position: -720px -0px;
}
.CD {
	width:80px; 
	height:120px; 
	background-position: -160px -0px;
}
.CE {
	width:80px; 
	height:120px; 
	background-position: -240px -0px;
}
.DA {
	width:80px; 
	height:120px; 
	background-position: -80px -0px;
}
.DB {
	width:80px; 
	height:120px; 
	background-position: -320px -0px;
}
.DC {
	width:80px; 
	height:120px; 
	background-position: -400px -0px;
}
.EA {
	width:80px; 
	height:120px; 
	background-position: -560px -0px;
}
.EB {
	width:80px; 
	height:120px; 
	background-position: -640px -0px;
}
.EC {
	width:80px; 
	height:120px; 
	background-position: -480px -0px;
}
.ZZ {
	width:80px; 
	height:120px; 
	background-position: -0px -0px;
}