/* ==========================================================================
   Styling Fun - Games
   ========================================================================== */

.slots {
	border: 1px solid #dedede;
	background-color: #fff;
	padding: 3px;
	margin: 6px 3px;
}
#refresh { margin-bottom: 15px; }

#lucky-match { width: 80%; margin: 0.5em auto; border-spacing: 0.5em; }
#lucky-match th, #lucky-match td { text-align: center; }
#lucky-match th { padding: 3px; border-radius: 5px; background-color: rgba(222,222,222,.25);  }
#lucky-match td { padding: 8px; border-radius: 5px; background-color: rgba(222,222,222,.12); }

#card-claim { width: 80%; margin: 0.5em auto; border-spacing: 0.5em; text-align: center; }
#card-claim .cardname { padding: 8px; border-radius: 5px 5px 0 0; background-color: rgba(222,222,222,.25); }
#card-claim .card { padding: 10px; background-color: rgba(222,222,222,.12); }

#cardswap { width: 100%; }
#cardswap td:first-child { 
	background-color: rgba(222,222,222,.25); 
	border: 2px solid #fff; 
	border-radius: 5px; 
}
#cardswap tr:last-child td { background: none; }
#cardswap option:disabled { background: rgba(222,222,222,.25); color: #999; }

#wheel { text-align: center; }
#wheel .submit { margin-top: 1em; }
.spin { padding: 5px 80px; font-size: 0.85em; text-align: center; }
.spin1 { background-color: #79c753; color: #34800f!important; }
.spin2 { background-color: #fae03c; color: #a76f0d; }
.spin3 { background-color: #f7786b; color: #832e26; }
.spin4 { background-color: #91a8d0; color: #4c5d7a; }

#puzzle-wrap { text-align: center; margin-top: 1em; }

.hint { color: #888; }
.deck-piece {
	margin: auto;
	width: calc(196px + 16px);
	height: calc(194px + 16px);
	background: rgba(222,222,222,.2);
	padding: 7px;
	border: 1px solid rgba(222,222,222,.75);
	border-radius: 5px;
}


/* ==============
   Clicked Card 
   ============== */

.lucky-match, .card-claim { opacity:1; }
.lucky-match-dimmed, .card-dimmed { opacity:0.2; filter:alpha(opacity=20); }

#cardlist b { cursor: pointer; }
#cardlist .clickText { color: rgba(136,136,136,1); }
#cardlist .clickText:hover, #cardlist .unclickText { color: rgba(136,136,136,.35); }

#claimlog {
	width: 80%;
	margin: 0 auto;
	background-color: rgba(222,222,222,.2);
	border: 0.5em solid #fff;
	padding: 5px 10px;
	overflow-y: auto;
	height: 120px;
	font-size: 0.8em;
}


/* ==========================================================================
   Blackjack, Lottery, Pick a Card
   ========================================================================== */

#blackjack, #pick-card, #lottery {width: 80%; border-spacing: 0.7em; margin: 0.7em auto 1em; }

#blackjack td, #pick-card td, #lottery td { border-radius: 10px; text-align: center; background-color: rgba(222,222,222,.5); }
#blackjack td { padding: 10px; } 
.blackjack { margin-top: 0.3em; margin-bottom: 0.5em; }

#pick-card td { padding: 5px; }
#pick-card img { border: 3px solid #fff; }

#lottery td { padding: 5px; }
#lottery label { font-weight: normal; }


/* ==========================================================================
   Tic Tac Toe
   ========================================================================== */

#tictactoe {
	border-spacing: 1em;
	border-radius: 15px;
	background-color: #dedede;
	margin: 1.3em auto 1.1em;
	text-align: center;
}

	#tictactoe td {
		width: 65px;
		height: 65px;
		border-radius: 10px;
		background-color: #fff;
	}


/* ==========================================================================
   Roll Dice, War
   ========================================================================== */

#roll, #war {
	width: 65%;
	border-spacing: 1em;
	border-radius: 25px 0;
	background-color: #fff;
	margin: 0em auto 1em;
}

	#roll td, #war td {
		border-radius: 10px;
		text-align: center;
		padding: 10px;
		background-color: rgba(222,222,222,.5);
	}

		#roll-tcg, #roll-player {
			background-color: #fff;
			color: #777;
			font-size: 7em;
			margin-top: 3px; padding-bottom: 6px;
		}

		.war-card { background: #fff; margin-top: 5px; padding: 5px; }

		.roll-vs, .war-vs {
			font-family: "Trebuchet MS", sans-serif;
			font-size: 0.85em;
			color: #676767;
			text-transform: uppercase;
		}

		#roll-tcg-num, #roll-player-num, .war-cardtext {
			color: #bb5266;
			font-size: 0.85em;
			font-style: italic;
		}


/* ==========================================================================
   Hangman
   ========================================================================== */

#hangman-wrap { text-align: center; }

#stickman {
	border: #dedede solid 1px;
	background-color: #fff;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 1.5em;
}

#categoryName { margin-top: 0; margin-bottom: 1em; }

#alphabet {
	margin: 15px auto;
	padding: 0;
	width: 85%;
}

	#alphabet:after { content: ""; display: table; clear: both; }

	#alphabet li {
		list-style: none;
		display: inline-block;
		margin: 5px;
		padding: 5px 15px;
		background: #a099a3;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		font-size: 1.3em;
	}

	#alphabet li:hover { background-color: #ef414d; color: #fff; }

#word { margin: 0; padding: 0; display: block; }

	#word li {
		position: relative;
		list-style: none;
		margin: 0;
		display: inline-block;
		padding: 0 10px;
		font-size: 1.3em;
	}

.clicked {
	opacity: 0.4;
	filter: alpha(opacity=40);
	-moz-transition: all 1s ease-in;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	cursor: default;
}

	.clicked:hover {
		-moz-transition: all 1s ease-in;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		opacity: 0.4;
		filter: alpha(opacity=40);
		-moz-transition: all 1s ease-in;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
	}

.visible { visibility: visible; }
#lives { margin-top: 2em; }


/* ==========================================================================
   Ongoing
   ========================================================================== */

#inventory, #exchange, #suggest { width: 80%; margin: 2em auto 0; }
#exchange { border-spacing: 0.5em; }

	#inventory td, #exchange td, #suggest td { text-align: center; padding: 2px; }
	#inventory td, #suggest td { font-size: 0.8em; }
	#exchange td { font-size: 0.9em; }

	#inventory .stock, #exchange .rate, #card-claim .price { font-size: 0.75em; }
	#exchange .info { font-size: 0.75em; }

	#inventory h3, #suggest h3 { font-size: 1.2em; }
	#suggest h3 { margin-bottom: 0.3em; }

	.form-control { border-left: 2px solid #dbe1e4; }
	#inventory .submit, #suggest .submit { font-size: 1.3em; }
	.choice-exchange { border-spacing: 0.3em; width: 60%!important; }

	.suggestion { margin-top: 4em!important; }
	.suggestion td { padding: 8px!important; }


#donate { width: 50%; margin: auto; }
#donate td { text-align: center; padding: 0 2px; }
.alert + h2, form + h2 { margin-top: 1.5em; }


/* ==============
   Image Preview 
   ============== */

.loading {
	background: #fff url('../js/imgpreview/icon_loading.gif') no-repeat center center;
	width: 74px;
	height: 74px;
}

#img-preview {
	padding: 0;
	border:solid 5px #666;
	border-radius: 5px;
}

#img-preview:after {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#img-preview:after {
	right: 100%;
	top: 50%;
	border-right-color: #666;
	border-width: 15px;
	margin-top: -20px;
}