*, html, body, div, p, ul, li {margin:0;padding:0}
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }

body {
	color: black; font-size: 14px;
	background-color: #f5f5f5; background-image: url(bg-pattern.jpg);
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
}

a { color: black; text-decoration: none; }
a:hover { color: #1962B1; }

.help {
	position: absolute; right: 20px; top: 0; padding: 8px;
	background: #2B802B; color: white; font-weight: bold;
	border-radius: 0 0 6px 6px; border: 1px solid white; border-top: none;
}
.help:hover { color: white; background: #46A246; padding-top: 10px; }

.header, .content, .footer, .board, .info, table, hr, .card a , .card p:first-child  {
	margin: 0 auto; position: relative; text-align: center;
}

.header { width: 840px; height: 175px; background-image: url(header.png); }
.content { width: 740px; background-color: #F8F8F3; border: 1px solid #B9CA7B; }
.footer { width: 742px; height: 50px; background-color: #B9CA7B; font-size: 14px; color: white; }
.footer p { color: #0e3c28; font-weight: bold; line-height: 50px; }
.footer a { color: #0e3c28; text-decoration: none; }
.footer a:hover { color: #1962B1; }

.info { margin-top: 14px; text-align: justify; width: 700px; }
.info a { font-weight: bold; }
.p-end { text-align: center; }

hr { width: 400px; margin-top: 14px; }

table { font-size: 14px; margin-top: 14px; margin-bottom: 14px; cursor: default; }
table th { padding: 4px 6px; background: #B9CA7B; }
table td { padding: 4px 6px; text-align: left;  }
table td:last-child { text-align: center; }
table td:nth-child(2) { width: 400px; max-width: 400px; overflow-x: hidden; }
table tr:not(:first-child):hover { background: #E9EFD3; }

.board { width: 700px; margin-top: 14px; margin-bottom: 14px; }

.card {
	float: left; position: relative; width: 140px; height: 140px; font-size: 12px; cursor: default; text-align: center;
	-webkit-perspective: 600px; perspective: 600px;
}
.card img  { width: inherit; height: inherit; }

.card a {
	margin-top: 2px; display: block; width: 20px; height: 20px;
	background-image: url(link-sprite.png); background-position: 0 -80px;
}
.card a:hover { background-position: 0 -100px; }

.card p:first-child { overflow-x: hidden; display: block; width: 120px; margin-top: 45px; margin-bottom: 2px; }
.card p:nth-child(2) { color: #A7946A; }

.win { width: 233px; height: 233px; font-size: 16px; }
.win p:first-child { width: 200px; margin-top: 70px; margin-bottom: 5px; }
.win a { margin-top: 5px; width: 40px; height: 40px; background-position: 0 0; }
.win a:hover { background-position: 0 -40px; }

.front, .back {
	position: absolute; top: 0; left: 0;
	width: inherit; height: inherit;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all .4s ease-in-out;
}
.front {
	z-index: 900;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.back {
	z-index: 800; background: #F3EED9;
	box-shadow: inset 0 0 0 2px #B9CA7B;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-179deg);
}

.card:hover .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.card:hover .back {
	z-index: 1000;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}