@charset "utf-8";
/* Global game Formatting and styles */
#player p {
    width: 94%;
    margin: auto;
    padding-top: 8px;
    text-align: justify;
}

#memory_board{
	background: none;
	width: 94%;
	margin:0px auto 10px auto;
	padding: 0px;
}

#memory_board:after {
  content: "";
  display: table;
  clear: both;
}

/* entire container, keeps perspective */
.flip-container {
	margin:1%;
	border-radius: 4px;
	cursor:pointer;
	text-align:center;
    -webkit-perspective: 1000px;
            perspective: 1000px;
	width:23%;
	height:110px;
	float:left;
	position: relative;
}
/*In IE this doesn't work, we need to flip both the front and back - see below*/
/*.flip-container.flip .flipper {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}*/


.front, .back {
	width:100%;
	height:100%;
}

.flipper {
	margin: 1.5% auto;
	width:98%;
	height:94%;
    position: relative;
}

.flip-container .flipper {
	-webkit-transform-origin: 100% 55px; /* half of height */ /* half of height */ /* half of height */ /* half of height */
	transform-origin: 100% 55px /* half of height */

}


.front, .back {
 box-shadow: 0 10px 6px -6px #777;

	border:#000 1px solid;
	border-radius: 4px;
	
	-webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
	backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform: perspective(1000px);
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
	-ms-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
	-webkit-transform: perspective(1000px);
	        transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;

}

.front {
	
	background: url(../images/qMark.png) center center;
	background-color: #f2f8fc;
	overflow: hidden;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	z-index: 2;
}

.back {
	background-color: #f2f8fc;
	font-size: 1.2em;
	position: relative;
	font: Verdana;
	overflow: hidden;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
	word-wrap: break-word;

	
}
.back p {
	position: absolute;
    top: 50%;
	left: 50%;
    margin-right: -50%;
    -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
	text-align:center;

}

.back img {
	position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}


/*The following two entries are to make this work in internet explorer*/
.flip-container.flip .back {
    -webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);

}

.flip-container.flip .front {
    -webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);

}

/*Prevent the tile from being flipped once it is in a matched pair*/	
.disable-click {
  	pointer-events: none;
}

.hilite0 {
	background-color: #f1c40f;
}
.hilite1 {
	background-color: #2ecc71;
}
.hilite2 {
	background-color: #3498db;
}
.hilite3 {
	background-color: #9b59b6;
}
.hilite4 {
	background-color: #f39c12;
}
.hilite5 {
	background-color: #e74c3c;
}

@media only screen and (max-width : 480px) {
#memory_board{
	
}

.flip-container{
	width:32.533%;
	margin:0.4%;
}
.flipper {
	width:96%;
}
.back {
	font-size: 0.9em;	
}
}