@charset "utf-8";
/* CSS Document */
#cardHolder{
                position:relative;
                top:0;
                left:0;
                bottom:0;
                right:0;
                width:1005px;
                margin:auto;
}

.yesnobutton {
	background:#2C8B9B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #edf7f7;
	padding: 1px 6px;
	background: -moz-linear-gradient(
		top,
		#00a6ff 0%,
		#00aeff);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#00a6ff),
		to(#00aeff));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #fcffff;
	-moz-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 1px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 1px rgba(255,255,255,0);
	box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 1px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}



.carddiv {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}


.flip3D{ width:235px; height:120px; margin:5px; float:left; }
.correct{
	border-style:solid;
border-width:1px;
	text-align: center;
	line-height:120px;
font-weight:bold;
font-size:18px;
	pointer-events: none;
	position:absolute;
	-o-transform: perspective( 600px ) rotateY( 0deg );
	-ms-transform: perspective( 600px ) rotateY( 0deg );
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#d2ff52; width:235px; height:120px; border-radius: 7px;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -ms-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;

	
}


.front{
		border-style:solid;
border-width:1px;
	position:absolute;
	-o-transform: perspective( 600px ) rotateY( 0deg );
	-ms-transform: perspective( 600px ) rotateY( 0deg );
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#93cede; width:235px; height:120px; border-radius: 7px;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -ms-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
	 
}
.back{
		border-style:solid;
border-width:1px;
	text-align: center;
	line-height:120px;
	position:absolute;
	-ms-transform: perspective( 600px ) rotateY( 180deg );
	-o-transform: perspective( 600px ) rotateY( 180deg );
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	background: #93cede; width:235px; height:120px; border-radius: 7px;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -ms-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
	transition: -ms-transform .5s linear 0s;
	transition: transform .5s linear 0s;
	
}
.front2{
	position:absolute;
	-o-transform: perspective( 600px ) rotateY( -180deg );
	-ms-transform: perspective( 600px ) rotateY( -180deg );
	-webkit-transform: perspective( 600px ) rotateY( -180deg );
	transform: perspective( 600px ) rotateY( -180deg );
	border-style:solid;
border-width:1px;
	background:#FC0; width:235px; height:120px; border-radius: 7px;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -o-transform .5s linear 0s;
	transition: -ms-transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
	
}
.back2{
	border-style:solid;
border-width:1px;
text-align: center;
line-height:120px;
	text-align: center;
	line-height:120px;
font-weight:bold;
font-size:18px;	
	position:absolute;
	-ms-transform: perspective( 600px ) rotateY( 0deg );
	-o-transform: perspective( 600px ) rotateY( 0deg );
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#ffffff; width:235px; height:120px; border-radius: 7px;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -ms-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
	
}


.unclickable { pointer-events: none; }
.clickable { pointer-events: auto; }