style.css

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

body {
   padding-left: 20px;
   font-size: 11px;
   font-family: Ubuntu, Arial, sans-serif;
   background: #f7f7f7;
   color: #555;
}

h3 {
   font-size: 1.8em;
}

#board {
   margin-top : 30px;
   position : relative;
}

.card {
   position : absolute;
   z-index: 11;
}

.back {
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   z-index: 10;
}

.back:hover {
	cursor : pointer;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.button {
	text-align: center;
	font-weight: bold;
	padding: .8em;
	margin-right: 4px;
	background: #2e2e2e;	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	color: #FFF;
}

.button:hover {
	background: #3c3c3c;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#2e2e2e');
	text-decoration: none;
	cursor : pointer;
	-moz-box-shadow:    1px 1px 3px 2px #ccc;
	-webkit-box-shadow: 1px 1px 3px 2px #ccc;
	box-shadow:         1px 1px 3px 2px #ccc;
}

#timer {
	margin-left : 10px;
}

#toolbar {
   margin-bottom: 30px;
   margin-top: 30px;
}

#twitterMsg {
   z-index : 100;
   display : none;
   font-size : 120%;
   font-weight : bold;
   position: fixed;
   left: 20px;
   bottom: 120px;
   padding: 1em;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 2px 3px 0 #dddddd;
   -moz-box-shadow: 0 2px 3px 0 #dddddd;
   box-shadow: 0 2px 3px 0 #dddddd;
   border: 1px solid #BBB;
   background-color: #FFF;
   color: black;
   text-decoration : none;
}

#twitterMsg:hover {
   color : blue;
   text-decoration: underline;
   cursor : pointer;
}


/** anima��o de flipping - sufixo X **/
.boardX {
  perspective: 1000px;
}
.flippedX {
  -webkit-transform : rotatey(-180deg);
   -moz-transform: rotatey(-180deg);
  -o-transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg);
  transform:rotatey(-180deg);
}
.cardX {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.faceX {
  -webkit-backface-visibility: hidden ;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
}
.frontX {
  position: absolute;
  z-index: 1;
}

.backX {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
  -ms-transform: rotatey(-180deg);
}