body {
	background-color: #00660E;
}

table#cardboard td {
	width: 85px;
	height: 85px;
}

/* TODO: figure out a way we can avoid duplicating keyframes */

@keyframes card_turn {
	0% { transform: rotateY(0deg); }
	50% { transform: rotateY(89deg); }
	50% { transform: rotateY(-89deg); }
	100% { transform: rotateY(0deg); }
}

@keyframes card_turn2 {
	0% { transform: rotateY(0deg); }
	50% { transform: rotateY(89deg); }
	50% { transform: rotateY(-89deg); }
	100% { transform: rotateY(0deg); }
}

@-webkit-keyframes card_turn {
	0% { -webkit-transform: rotateY(0deg); }
	50% { -webkit-transform: rotateY(89deg); }
	50% { -webkit-transform: rotateY(-89deg); }
	100% { -webkit-transform: rotateY(0deg); }
}

@-webkit-keyframes card_turn2 {
	0% { -webkit-transform: rotateY(0deg); }
	50% { -webkit-transform: rotateY(89deg); }
	50% { -webkit-transform: rotateY(-89deg); }
	100% { -webkit-transform: rotateY(0deg); }
}

@keyframes card_match {
	0%   {transform: scale(1); opacity: 1.0; visibility: visible; }
	100% {transform: scale(2); opacity: 0.0; }
}

@-webkit-keyframes card_match {
	0%   {-webkit-transform: scale(1); opacity: 1.0; visibility: visible; }
	100% {-webkit-transform: scale(2); opacity: 0.0; }
}

body.cards_pictures table#cardboard td div {
    background-image: url('cards_pictures.png');
}
body.cards_symbols table#cardboard td div {
    background-image: url('cards_symbols.png');
}
body.cards_template table#cardboard td div {
    background-image: url('cards_template.png');
}

table#cardboard td div {
	background-image: url('cards_symbols.png');
	background-color: white;
	border: 1px solid black;

	width: 75px;
	height: 75px;
	margin: 4px;

	transition: background-position 0s .5s;
	-webkit-transition: background-position 0s .5s;

	animation: card_turn 1s;
	-webkit-animation: card_turn 1s;
}

table#cardboard td div.card_hidden { 
	background-position: 0px 0px; 

	animation: card_turn2 1s;
	-webkit-animation: card_turn2 1s;
}

table#cardboard td div.card_match { 
	animation: card_match 1s;
	-webkit-animation: card_match 1s;

	visibility: hidden;
}

@keyframes win_anim {
	0% { color: #FA5050; transform: scale(0.5); transform: -ms-scale(0.5); }
	20% { color: #FA50CD; }
	40% { color: #5850FA; }
	60% { color: #50F1FA; }
	80% { color: #50FA53; }
	100% { color: #50FA53; transform: scale(1.5); transform: -ms-scale(1.5); }
}

@-webkit-keyframes win_anim {
	0% { color: #FA5050; -webkit-transform: scale(0.5); }
	20% { color: #FA50CD; }
	40% { color: #5850FA; }
	60% { color: #50F1FA; }
	80% { color: #50FA53; }
	100% { color: #50FA53; -webkit-transform: scale(1.5); }
}

div#winsplash {
	font-size: 10em;

	position: fixed;

	margin-left: -2em;
	margin-top: -1em;

	left: 50%;
	top: 50%;

	visibility: hidden;
}

div#winsplash.win {
	animation: win_anim 3s ease infinite alternate;
	-webkit-animation: win_anim 3s ease infinite alternate;

	visibility: visible;
}

div#statusbar {
	background-color: white;
	border-top: 2px solid black;
	font-weight: bold;
	padding: 1px 5px;

	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 5;
}

span#gamestate {
	float: right;
}

a {
	color: black;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

form { /* settings form */
	background-color: white;
	padding: 5px 3px 6px;

	position: fixed;
	bottom: 1.1em;
	z-index: 4;

	transform: translateY(0em);
	transition: transform 1s;

	-webkit-transform: translateY(0em);
	-webkit-transition: -webkit-transform 1s;
}

form.hidden {
	transform: translateY(10em);
	-webkit-transform: translateY(10em);
}

form th {
	text-align: left;
}

form td, form input {
	text-align: right;
}