body{
color:#666;
font-family:Arial, Helvetica, sans-serif;
background:#000 url(img/memorygame_bg.jpg) no-repeat center top;
margin:0;
padding:0;
}

div.bigwarp{
width:1120px;
height:100%;
margin:auto;
}

div.left{
width:246px;
float:left;
margin:0 0 40px 82px;
padding-top:535px;
}

div.right{
width: 720px;
float: left;
margin-left: 65px;
}

ul.tabs {
width: 246px;
margin: 0;
padding: 0;
float:left
}

ul.tabs span {
display: none;
}

ul.tabs li {
list-style: none;
float: left;
}

li.tab01 a, visited {
width:246px;
height:47px;
background:url(img/normal_btn.jpg);
display: block;
cursor: pointer;
margin-bottom:8px;
}

li.tab02 a, visited {
width:246px;
height:47px;
background:url(img/hard_btn.jpg);
display: block;
cursor: pointer;
}

li.tab03 a, visited {
width:283px;
height:52px;
background: url(img/instruction_btn.jpg);
display: block;
cursor: pointer;
}

li a:hover {
background-position: 0 -47px;
}

#lifebar {
position: relative;
z-index: 10000;
left: 500px;
height: 50px;
margin: 12px 0 5px;
width: 220px;
}

.cardListHolder{
display:none;
}

.card{
	width:114px;
	height:138px;
	float:left;
	margin:2px;
	
	/* Giving the card div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.cardFlip{
	width:100%;
	height:100%;
	/*  The card div will be positioned absolutely with respect
		to its parent .card div and fill it in entirely
	*/
	position:absolute; 
	float: left;
	left:-9px;
	top:0;

}

.cardFlip:hover{
	width:114px;
	height:138px;
	/* CSS3 inset shadow: */
	
}

.cardFlip  img{
	width:114px;
	height:138px;
	/* Centering the image in the middle of the cardFlip div */	
	position:absolute;
	top:50%;
	left:62%;
	margin:-70px 0 0 -70px;
}

.cardFlipCorrect{
	/*  The card div will be positioned absolutely with respect
		to its parent .card div and fill it in entirely */
	position:absolute;
	left:-9px;
	top:0;
	width:114px;
	height:138px;
	
}

.cardFlipCorrect img{
	/* Centering the image in the middle of the cardFlip div */	
	position:absolute;
	top:50%;
	left:62%;
	margin:-70px 0 0 -70px;
}

.cardData{
	/* Hiding the .cardData div */
	display:none;
}

.result{
	display:none;
	position: absolute;
	top:200px;
	left:550px;
	z-index:1000000000;
}

.clear{
	/* This class clears the floats */
	clear:both;
}
