/*-----------------------SCREEN STYLES-------------------------*/
body{
	
	background-color:#fff;
	
	
	}
	
#ie_message{display:none;}
#game,#game2,#game3,#loader,#start,#win,#game_win{
		position:absolute;
	
}


#wrapper{
	position:relative;
	margin: auto;
	height: 400px;
	width: 600px;
	
}

#lower_section{
	
	margin:10px auto;
	height: 400px;
	width: 600px;
	
	
	
	}

#game,#game2,#game3{
	margin: auto;
	height: 400px;
	width: 600px;
	background-image: url(../images/bg_01_blurred.jpg);
	background-repeat: no-repeat;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	
	
}




#loader{
	
	margin: auto;
	height: 400px;
	width: 600px;
	
	background-color:#fff;
	
	background-image:url(../images/loader.gif);
	background-repeat:no-repeat;
	background-position:center center;
	
	
	z-index:100;
	
	}
/*---------------------------AUDIO CONTROLS----------------------*/

#audio_controls{
	display:block;
	position:absolute;
	width:51px;
	height:51px;
	top:340px;
	left:10px;
	
	background-image:url(../images/sound_button.png);
	
	text-indent:-10000px;
	outline:none;
	
	background-position:left top;
	
	
	}


/*---------------------------START SCREEN-----------------------*/	
	
#start{
	
	margin: auto;
	height: 400px;
	width: 600px;
	background-image:url(../images/title_screen.jpg);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	
	z-index:90;	
	
	
}






#game_start{
	
	display:block;
	position:absolute;
	width:105px;
	height:110px;
	left:400px;
	top:220px;
	
	background-image:url(../images/play_button.png);
	
	
	text-indent:-10000px;
	outline:none;
}


#game_start:hover{
	background-position:left bottom;	
}



h1 {
	text-align: center;
}




/*------------WIN SCREEN-----------*/
#win{
	
	margin: auto;
	height: 400px;
	width: 600px;
	background-image:url(../images/bg_01_blurred.jpg);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	
	
	overflow:hidden;
	
}



.confetti{
	
	background-image:url(../images/animated_blue_confetti.gif);
	background-repeat:no-repeat;
	
	height: 400px;
	width: 600px;
	
	
	position:absolute;
	top:0px;
	left:0px;
	
	
	}

#ella{
	
	position:absolute;
	width:142px;
	height:196px;
	left:28px;
	/*top:106px;*/
	top:400px;
	
	background-image:url(../images/chars/ella.png);
	background-repeat:no-repeat;
	
	}
	
	
#frankie{
	
	position:absolute;
	width:142px;
	height:205px;
	left:170px;
	/*top:57px;*/
	top:400px;
	
	background-image:url(../images/chars/frankie.png);
	background-repeat:no-repeat;
	
	
	}
	
	
#ida{
	
	position:absolute;
	width:142px;
	height:208px;
	left:331px;
	/*top:69px;*/
	top:400px;
	
	background-image:url(../images/chars/ida.png);
	background-repeat:no-repeat;
	
	
	}


#tiki{
	
	position:absolute;
	width:142px;
	height:222px;
	left:458px;
	/*top:149px;*/
	top:400px;
	
	background-image:url(../images/chars/tiki.png);
	background-repeat:no-repeat;
	
	
	}







#next{
	position:absolute;
	left:225px;
	top:158px;	
	display:none;
	
}


#next a img{
	border:0px;	
	
}


/*-----------------------GAME WIN SCREEN-------------------------*/
#game_win{
	
	margin: auto;
	height: 400px;
	width: 600px;
	background-image:url(../images/game_win_screen.png);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	
	

	
	
	}


#replay_button{
	
	position:absolute;
	left:430px;
	top:300px;	
	
	
	
	
	}


#replay_button img{
	
	border:0px;	
}
/*-----------------------CARD STYLES-------------------------*/

#cards,#cards2,#cards3{
	position: relative;

margin:auto;

perspective: 1000px;
	


}



#game .card_wrapper{
	
	width:325px;
	height:200px;
	margin:auto;
	padding-top:115px;
	
	
	
	
	
	}
	
	
#game2 .card_wrapper{
	
	width:440px;
	height:275px;
	margin:auto;
	padding-top:115px;
	
	
	
}



#game3 .card_wrapper{
	
	width:545px;
	height:100%;
	margin:auto;
	padding-top:115px;
	
	
	
	
	
}

.card,.card2,.card3 {

width: 102px;
height: 83px;
position: absolute;




  
  


}


.face {

width: 100%;
height: 100%;
position: absolute;


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;



-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;


-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility:  hidden;
backface-visibility: hidden;


}


.front {
background:url(../images/cards.png) -230px -10px;
z-index: 10;

-webkit-box-shadow: 0 0px 10px #000;
-moz-box-shadow: 0 0px 10px #000;
box-shadow:0 0px 10px #000;


}
.back {
background:url(../images/cards.png);
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform:  rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
-o-transform:  rotate3d(0,1,0,-180deg);
transform:  rotate3d(0,1,0,-180deg);
z-index: 8;
z-index: 8;



}
.card:hover .face, .card-flipped .face,   .card2:hover .face, .card-flipped .face ,.card3:hover .face, .card-flipped .face{
-webkit-box-shadow: 0 0px 10px #fff;
-moz-box-shadow: 0 0px 10px #fff;
box-shadow:0 0px 10px #fff;



}
.card-flipped .front {

z-index: 8;
/*transform: rotateY( 180deg );*/


-webkit-transform:  rotate3d(0,1,0,179deg);
-moz-transform: rotate3d(0,1,0,179deg);
-ms-transform:  rotate3d(0,1,0,179deg);
-o-transform:  rotate3d(0,1,0,179deg);
transform:  rotate3d(0,1,0,179deg);

}
.card-flipped .back {

z-index: 10;

/*transform: rotateY( 180deg );*/



-webkit-transform: rotate3d(0,1,0,1deg);
-moz-transform:  rotate3d(0,1,0,1deg);
-ms-transform:  rotate3d(0,1,0,1deg);
-o-transform:  rotate3d(0,1,0,1deg);
transform: rotate3d(0,1,0,1deg);



}




.card-removed .front{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
/*	background-position:0px 0px;
	background-image:url(../images/check.png);*/
	
	background-position:-119px -10px;
	}


/*-----------------------INDIVIDUAL CARD IMAGES-------------------------*/

.cardc1{background-position: -10px -100px ;}
.cardc2 {background-position: -120px -100px ;}
.cardc3 {background-position: -230px -100px;}
.cardc4 {background-position: -340px -100px ;}
.cardc5 {background-position: -450px -100px ;}
.cardc6 {background-position: -10px -190px ;}
.cardc7 {background-position: -120px -190px ;}
.cardc8 {background-position: -230px -190px ;}
.cardc9 {background-position: -340px -190px ;}
.cardc10 {background-position: -450px -190px ;}