body 
{
	margin: 0px;
	-webkit-user-select: none;
}


/* Styles the "Card Flip" page and creates a placeholder for the card */

#flipcontent
{
	position: relative;

-webkit-transition-property: -webkit-transform;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 600;
z-index: 0;

}

.card 
{
	position: relative;
	left: 0px;
	top: 0px;
    
	/* Ensure that the card lives correctly in 3D space */
	-webkit-transform-style: preserve-3d;
	
	/* We apply this property to the card so it can smoothly flip between its sides */
	-webkit-transition-property: -webkit-transform;
	/* Make the animation occur over a period of 1.5 seconds */
	-webkit-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. */
	-webkit-transform: rotateY(180deg);
}


/* Styles the card and hides its "back side" when the card is flipped */
.face 
{
	position: absolute;
	z-index:1;
	
	height: auto;
	width:320px; 
		
	/* Give a round layout to the card */
	/*-webkit-border-radius: 10px;*/
	/* Drop shadow around the card */
   /* -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);*/
	/* Make sure that users will not be able to select anything on the card */
	
	/* We create the card by stacking two div elements at the exact same location. The back of the card 
	   is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden
	   ensures that the "back side" is hidden when the card is flipped
	*/
	/*background:url("../thumbs/me.png") repeat;*/

	
	-webkit-backface-visibility: hidden;
	
}

/* Styles the front of the card */
.front 
{
    
}


/* Styles the back of the card */
.back 
{
    height: 30px;
	/* Ensure the "back side" is flipped already */
	-webkit-transform: rotateY(180deg);
}
.flippedgraytitle{
position: absolute;
font-weight: bold;
font-size: 17px;
left: 9px;
color: #4C4C4C;
text-shadow: #FFF 0 1px 0;
}