/*I kept the below notes so I could always come back and study the code and know what is going on, I went through each line and added both lines of code in order to get it to work in Firefox*/
/*
File: CardFlip.css
Abstract: Defines CSS properties for the CardFlip sample.
		  Defines and styles the playing card on the "Card Flip"
		  page. Applies 3D transform and transition effects to
		  the card. Hides its "back-side" when it is flipped.
*/

h1 { font-family: 'Raleway', sans-serif;
	 text-align: center;
	 font-size: 50px;
	 padding:5px;
	 position: relative;
	 color: gray;
	 font-style: oblique; 
	 
}

h2 { font-family: 'Raleway', sans-serif;
	 text-align: center;
	 font-size: 40px;
	 padding:5px;
	 position: relative;
	 color: gray; 
}

h3 { font-family: 'Raleway', sans-serif;
	text-align: left;
	font-size: 25px;
	padding: 15px;
	color: black;
	position: relative;
}


body {
	margin: 0px;
	user-select: none; /*Default*/
	-webkit-user-select: none;
	-moz-user-select: none; /*Mozilla Firefox*/
}

#footer {
            font-family: 'Raleway', sans-serif;
			clear:both;
            text-align:center;
			padding-top: 350px;	
			position: relative;
			font-size: 20px;
			color: gray; 
        }

/* Styles the "Card Flip" page and creates a placeholder for the card */
#container
{
	/* Set these dimensions so the card can be properly displayed in Safari on iPhone*/ /* I kept this, when I tried to take it out, the phones starting skewing*/
	height: 356px;
	width: 320px;

	
	/* Disable tap highlighting */
	tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-moz-tap-highlight-color: rgba(0,0,0,0);
	
	/* Give some depth to the card */
	perspective:600;
	-webkit-perspective: 600;
	-moz-perspective:600;
}


/* Applies 3D transform and transition effects to the card. The card has two states: regular and flipped.
   A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped
   state, where there is a rotational transformation applied. This class is used when the card is in the regular state.
   The "card flipped" class is used when the card is in the flipped state. 
*/
.left {
	margin-left: auto;
    margin-right: auto;
    width: 35%;
	float: left;
}
	
.center {
	position: relative;/*Added this to position it correctly in Firefox*/
	width: 35%;
	float: left;
	margin-right: auto;
	margin-left: auto;

}
.right {
    position: relative;
    right: 0px;
    width: 30%;
	float: right;
	margin-right: auto;
	margin-left: auto;
}

.card 
{
	position: relative;
	height: 500px;
	width: 333px;
	left: 60px;
	top: 28px;
	
	/* Ensure that the card lives correctly in 3D space */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	
	/* We apply this property to the card so it can smoothly flip between its sides */
	transition-property: transform;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;

	/* Make the animation occur over a period of 1.5 seconds */
	transition-duration: 1.5s;
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
}


/* Applies the flip animation to the card */
.card.flipped
{

	/* Rotate the card 180 degrees along the y-axis. This animation allows the card to
	  toggle between its regular and flipped states. */
	 transform: rotateY(900deg);
	-webkit-transform: rotateY(900deg);
	-moz-transform: rotateY(900deg); /* Standard syntax (Firefox) */
	  
}


/* Styles the card and hides its "back side" when the card is flipped */
.face 
{
	position: absolute;
	height: 500px;
	width: 333px;
	
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);/*Changed all values to zero*/
   -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
	-moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
	/* Make sure that users will not be able to select anything on the card */
	
	
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}


.face > p /* Not sure what this is, but I took this out and the phone "cards" looked funny so I kept it*/
{
	margin-top: 36px;
	margin-bottom: 0;
	text-align: center;
	font-size: 92px;
} 


/* Styles the front of the card */
.front 
{
	/* Set the color of the suit characters on the card */
	color: rgb(255,255,255);
	
}


/* Styles the back of the card */
.back 
{
	color: rgb(255,255,255);
	/*background-color: rgba(255,255,255,0);
	
	/* Ensure the "back side" is flipped already */
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}