.toptrumps_board{
	
	width: 695px;
	height: 756px;
}
.toptrumps_board .card_front{
	background-image: url("../content/activities/trumpcard.png");
	height: 447px;
	width: 317px;
	position: absolute;
}
.toptrumps_board .card_back{
	background-image: url("../content/activities/trumpcard_back.png");
	height: 447px;
	width: 317px;
	position: absolute;
}
.toptrumps_board .card_front div{
	position: absolute;
	font-weight: bold;
}
.toptrumps_board .card_front .var{
	width: 200px;
}
.toptrumps_board .card_front .clicker{
	width: 250px;
	height: 20px;
	left: 35px;
	cursor: pointer;
}
.toptrumps_board .card_front .thumb{
	position: absolute;
	top: 15px;
	left: 16px;
	margin: 0px !important;
}
.toptrumps_board .card_front .name{
	top: 20px;
	left: 120px;
}
.toptrumps_board .card_front .spelling{
	top: 47px;
	left: 125px;
}

.toptrumps_board .card_front .type{
	top: 70px;
	left: 125px;
}
.toptrumps_board .card_front .stat_lable{
	left: 0px;
	width: 190px;
	height: 30px;
}
.toptrumps_board .card_front .variable{
	left: 140px;
	text-align: right;
	width: 100px;
}
.auto .variable{
	display: none;
}
.toptrumps_board .card_front .size{
	top: 125px;
}
.toptrumps_board .card_front .number{
	top: 148px;
}
.toptrumps_board .card_front .danger{
	top: 169px;
}
.toptrumps_board .card_front .usefulness{
	top: 191px;
}
.toptrumps_board .card_front .resistance{
	top: 213px;
}

.toptrumps_board .card_front .descrip{
	top: 260px;
	left: 35px;
	width: 240px;
	height: 140px;
	font-size: 11pt;
	font-weight: normal;
	overflow-y: scroll;
}
.toptrumps_board .card_front .descrip .var{
	width: 100%;
	line-height: 120%;;
}
.score{
	position: absolute;
	font-family: "Roboto",Roboto-Bold,Helvetica,Arial,sans-serif;
	font-weight: bold;
	font-size: 30pt;
	color: black;
	top: 570px;
}
.score.user{
	left: 200px;
}
.score.robot{
	left: 900px;
}

/*flip stuff*/

.card_container {
	position: absolute;
	-webkit-perspective: 1000;
}
	/* flip the pane when hovered */
	.card_container.flipped .card {
		transform: rotateY(180deg);
	}

.card_container, .card_front, .card_back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.card {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.card_front, .card_back {
	backface-visibility: hidden;

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

/* front pane, placed above back */
.card_front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.card_back {
	transform: rotateY(180deg);
}