html, body {
	height:100%;
	margin:0;
}
body {
	background:url(img/table2hl.png), url(img/table2.jpg) #4b2613;
	background-size:100% 130%, auto;
	color:#aaa;
	text-shadow:1px 1px 1px Black;
}
#page {
}

/* Board */
#board {
	border:solid 4px #222;
	width:722px;
	box-shadow:0 0 10px rgba(0,0,0,1);
	border-radius:1px;
	float:left;
	margin:20px;
	margin-top:80px;
}
#board td {
	width:47px;
	height:47px;
	border:solid 2px #222;
	background:no-repeat;
	background-size:100% 100%;
	text-align: center;
	vertical-align: top;
}

/* Areas */
#board .purple { background-image:url(img/area/purple.jpg); }
#board .orange { background-image:url(img/area/orange.jpg); }
#board .yellow { background-image:url(img/area/yellow.jpg); }
#board .middle { background-image:url(img/area/middle.jpg); }
#board .green { background-image:url(img/area/green.jpg); }
#board .purple,
#board .green {
	vertical-align: middle;
	text-align: left;
	padding-left:5px;
}
#board .purple .card,
#board .green .card {
	margin-left:5px;
	float:none;
	display:inline-block;
}
#board .yellow,
#board .orange {
	text-align: center;
	padding-top:5px;
	vertical-align: top;
}
#board .yellow .card,
#board .orange .card {
	margin-top:5px;
	float:none;
	display:inline-block;
	height:80px;
	width:125px;
	background-image:url(img/cards_r.jpg);
}
#board .punk_orange { background-position:0 0; }
#board .punk_yellow { background-position:0 -80px; }
#board .krang_orange { background-position:-125px 0; }
#board .krang_yellow { background-position:-125px -80px; }
#board .shredder_orange { background-position:-250px 0; }
#board .shredder_yellow { background-position:-250px -80px; }

/* Spaces */
#board .bad { background-image:url(img/space/bad.jpg); }
#board .fight { background-image:url(img/space/fight.jpg); }
#board .good { background-image:url(img/space/good.jpg); }
#board .hole { background-image:url(img/space/hole.jpg); }
#board .lid { background-image:url(img/space/lid.jpg); }
#board .move { background-image:url(img/space/move.jpg); }
#board .pizza { background-image:url(img/space/pizza.jpg); }
#board .star { background-image:url(img/space/star.jpg); }
#board .lid {
	background-image:url(img/space/lid.jpg);
	background-size:100% 100%;
	width:47px;
	height:47px;
	cursor:pointer;
	border-radius:23px;
	position: absolute;
}

/* Spinner */
#spinner {
	background:url(img/spinner.jpg);
	width:188px;
	height:188px;
	display:inline-block;
	cursor:pointer;
	border-radius:15px;
	box-shadow:0 0 15px #333
}
#spinner #arrow {
	background:url(img/arrow.png) no-repeat center center;
	width:100%;
	height:100%;
	transform:rotate(1800deg);
	transition: 2s;
}

/* Players */
#board .player {
	width:34px;
	height:86px;
	position:absolute;
	margin-top:-60px;
	margin-left:6px;
	cursor:pointer;
	box-shadow:0 0 4px Black;
	z-index: 2;
}
#board .leo { background-image:url(img/players/leo.jpg); }
#board .donnie { background-image:url(img/players/donnie.jpg); }
#board .raph { background-image:url(img/players/raph.jpg); }
#board .mikey { background-image:url(img/players/mikey.jpg); }

/* Pieces */
#pieces {
	float:left;
	margin:20px;
}
@media (max-width: 1460px) { #pieces { width:722px; } }

/* Deck */
#pieces .deck {
	width:84px;
	height:125px;
	float:left;
	margin-right:20px;
}
#pieces .deck .card { position:absolute; margin-left:4px; }
#pieces .deck .card:first-child { margin-left:0; }
#pieces .deck .card:nth-child(2) { margin-left:2px; }

/* Cards */
.card {
	width:80px;
	height:125px;
	box-shadow:0 0 6px Black;
	float:left;
	text-align: center;
	line-height:125px;
	cursor:pointer;
	background:url(img/cards.jpg);
}
.discard { background:none; cursor:default; }
.card_bad { background-position:0 0; }
.good     { background-position:-80px 0; }
.april    { background-position:-240px 0; }
.splinter { background-position:-160px 0; }
.card_leo      { background-position:0 -125px; }
.card_raph     { background-position:-80px -125px; }
.card_donnie   { background-position:-160px -125px; }
.card_mikey    { background-position:-240px -125px; }
.punk_green  { background-position:0 -250px; }
.punk_orange { background-position:-80px -250px; }
.punk_purple { background-position:-160px -250px; }
.punk_yellow { background-position:-240px -250px; }
.krang_green  { background-position:0 -375px; }
.krang_orange { background-position:-80px -375px; }
.krang_purple { background-position:-160px -375px; }
.krang_yellow { background-position:-240px -375px; }
.shredder_green  { background-position:0 -500px; }
.shredder_orange { background-position:-80px -500px; }
.shredder_purple { background-position:-160px -500px; }
.shredder_yellow { background-position:-240px -500px; }

/* Card Flipping */
#pieces .deck { perspective:1000px; }
#pieces .deck .card { backface-visibility: hidden; }
#pieces .deck .down { transform:rotateY(-180deg); }
#pieces .deck .up { transition: 0.6s; transform:rotateY(0deg); }

/* Die */
#pieces .dice {
	cursor:pointer;
	float:left;
	margin: 30px;
}
#pieces #die {
	border-top: 1px solid #f1f1f1;
	width: 50px; height: 50px;
	border-radius: 10px;
	position: relative;
	font-size: 6px;
	display: inline-block;
	box-shadow: 0px 5px 0 #CCC, 0 6px 3px #444, 0 10px 5px #999;
	background-image: linear-gradient(top, #fefefe, #f1f1f1 80%);
	box-shadow: -5px 5px 0 #999, -6px 6px 3px #444, -10px 10px 5px rgba(0,0,0,0.5);
	background:#CCC;
}
#pieces #die:after {
	content: "";
	width: 20%;
	height: 20%;
	left: 50%;
	top: 50%;
	margin: -10%;
	background: #345;
	border-radius: 50%;
	display: block;
	position: absolute;
}
#pieces #die.one:after {
	box-shadow: 0 .2em 0 #FFF
}
#pieces #die.two:after {
	background: transparent;
	box-shadow: -2.3em -2.3em 0 #345,
	2.3em  2.3em 0 #345,
	-2.3em -2.3em 0 #FFF,
	2.3em  2.4em 0 #FFF
}
#pieces #die.three:after {
	box-shadow: -2.3em -2.3em 0 #345,
	2.3em  2.3em 0 #345,
	-2.3em -2.3em 0 #FFF,
	2.3em  2.4em 0 #FFF,
	0   .2em 0 #FFF
}
#pieces #die.four:after {
	background: transparent;
	box-shadow: -2.3em -2.3em 0 #345,
	2.3em  2.3em 0 #345,
	-2.3em  2.3em 0 #345,
	2.3em -2.3em 0 #345,
	-2.3em -2.3em 0 #FFF,
	2.3em  2.4em 0 #FFF,
	-2.3em  2.4em 0 #FFF,
	2.3em -2.3em 0 #FFF
}
#pieces #die.five:after {
	box-shadow: -2.3em -2.3em 0 #345,
	2.3em  2.3em 0 #345,
	-2.3em  2.3em 0 #345,
	2.3em -2.3em 0 #345,
	-2.3em -2.2em 0 #FFF,
	2.3em -2.2em 0 #FFF,
	2.3em  2.4em 0 #FFF,
	-2.3em  2.4em 0 #FFF,
	0   .2em 0 #FFF
}
#pieces #die.six:after {
	background: transparent;
	box-shadow: -2.3em -2.3em 0 #345,
	-2.3em      0 0 #345,
	-2.3em  2.3em 0 #345,
	2.3em -2.3em 0 #345,
	2.3em      0 0 #345,
	2.3em  2.3em 0 #345,
	-2.3em -2.1em 0 #FFF,
	-2.3em   .2em 0 #FFF,
	-2.3em  2.4em 0 #FFF,
	2.3em  2.4em 0 #FFF,
	2.3em   .2em 0 #FFF,
	2.3em -2.1em 0 #FFF
}

/* Flipper */
#flipper {
	float:left;
	width:260px;
	height:107px;
	background:url(img/flipper.png) repeat center top;
	cursor:pointer;
	margin-top:25px;
}
#flipper.flipped {
	background-position:center bottom;
}
#flipped {
	text-align: right;
	font-size: 2em;
}

/* Players */
#pieces .player {
	height:125px;
	box-shadow:0 0 6px Black;
	margin-top:20px;
	padding:4px;
}
#pieces .player span {
	position:absolute;
	z-index: 10;
}
#pieces .player .card {
	margin-right:5px;
}

/* Pulse effect */
.selected {
	animation: pulse 1s ease infinite;
	/* transition: transform 0.2s; */
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}