@CHARSET "ISO-8859-1";

.alert {
	z-index: 2000;	
}

.confirm {
	z-index: 2000;	
}

body {
	padding:0;
	background-color: black;
	/*background-image: url(https://gatorswamp.s3.amazonaws.com/images/bg.jpg);*/
	background-size: 100%;
	opacity: 0.86;
	margin: 0 auto;
	overflow: scroll;
}

.inGameAd {
	display: none;
	padding-top: 5px;
	margin-top: 40px;
	transform: scaleY(2.0);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-style: ridge;
	border-width: 4px;
	background-color: black;
}

#status {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 5px;
	font-family: "Comic Sans", serif;
	font-weight: bold;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
	font-size: 35px;
	height: 35px;
}

.welcome {
	font-family: Verdana, serif;
	font-weight: 400;
	font-size: 20px;
	font-style: italic;
	color: #CCDCDC;
}

.marquee {
	-webkit-marquee-direction: backwards;
}

#title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: AmericanTypewriter-Bold, serif;
	font-weight: 800;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
	font-size: 45px;
	color: #CCDCDC;
}

#banner {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: AmericanTypewriter-Bold, serif;
	font-weight: 800;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
	font-size: 45px;
	color: #CCDCDC;
}

.splashContents {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#menuLink {
	width: 200px;
	height: 50px;
	background: url(https://gatorswamp.s3.amazonaws.com/images/menu.png) top no-repeat;
	font-family: AmericanTypewriter-Bold, serif;
	font-weight: 400;
	text-shadow: rgba(10, 10, 10, 0.5) 6px 2px 3px;
	font-size: 20px;
	color: #fbfce2;
}

.advertisement {
	position: absolute;
	top: 290px;
	left: 45px;
}

.marble {
	transform: scale(1.25);
	padding: 13px;
}

.color0 {
	color: #CED3D7;
}

.color1 {
	color: #2B9933;
}

.color2 {
	color: #BFC950;
}

.color3 {
	color: #DD3018;
}

.color4 {
	color: #3B3BD3;
}

.waitingBoxOffCustom {
	visibility: hidden;
}

.waitingBoxOnCustom {
	visibility: visible;
	position: absolute;
	left: 275px;
	top: 300px;
	transform: scale(2);
	z-index: 600;
}

.confirmBoxOn {
	visibility: visible;
	position: absolute;
	background-color: #CED3D7;
	border: 1px solid #000;
	padding: 0;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 6px 6px 5px #333333;
	left: 150px;
	top: 615px;
	width: 325px;
	height: 136px;
}

.confirmBoxOff {
	visibility: hidden;
}

.button {
	padding: 40px 30px 30px 30px;
	transform: scale(1.5);
}

.go {
	transform: scale(2);
	position: absolute;
	top: 615px;
	left: 530px;
}

.menu {
	transform: scale(2);
	position: absolute;
	top: 730px;
	left: 530px;
}

#board {
	position: absolute;
	background: #fbfce2 url(https://gatorswamp.s3.amazonaws.com/images/tockBoard.jpg) no-repeat top;
	border: 0;
	padding: 0;
	left: 0;
	top: 60px;
	width: 640px;
	height: 480px;
}

#topPanel {
	position: absolute;
	background-color: black;
	border: 0;
	padding: 0;
	left: 0;
	top: 0;
	width: 640px;
	height: 45px;
}

#bottomPanel {
	position: absolute;
	background-color: #CED3D7;
	border: 0;
	padding: 0;
	left: 0;
	top: 550px;
	width: 640px;
	height: 290px;
}

#toolbox {
	position: relative;
	background-color: white;
	background-image: url(https://gatorswamp.s3.amazonaws.com/images/porcelain.jpg);
	background-repeat: repeat;
	border: 1px solid #000;
	padding: 15px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 6px 6px 5px #333333;
	top: 15px;
	left: 20px;
	width: 570px;
	height: 230px;
}

.fullDeck {
	position: absolute;
	left: 260px;
	top: 250px;
	width: 96px; 
	height: 71px;
	z-index: 500;
}

.cardImg {
	width: 140px;
	height: 192px;
}

.card {
	position: relative;
	float: left;
	width: 65px;
	height: 140px;
}

.cardIcon {
	position: relative;
	float: left;
	transform: scale(1.2);
	width: 24px;
}

.cardIcon {
	position: relative;
	float: left;
	transform: scale(1.2);
	width: 26px;
}

.outIcon {
	position: relative;
	float: left;
	width: 24px;
	margin-top: 8px;
	margin-left: 67px;
	transform: scale(2.85);
}

.playerOutIcon {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	text-align: center;
	transform: scale(4);
}

.cardSelect {
	position: relative;
	float: left;
	width: 50px;
	height: 140px;
	top: 35px;
}

.message {
	text-align: center;
	font-family: Georgia, serif;
	font-weight: bold;
	font-size: 45px;
}

#playerHand {
	position: relative;
	top: 5px;
	margin: 0 auto;
}

.pile1 {
	position: absolute;
	left: 254px;
	top: 245px;
	z-index: 500;
	transform: rotate(3deg);
}

.pile2 {
	position: absolute;
	left: 266px;
	top: 223px;
	z-index: 501;
	transform: rotate(2deg);
}

.pile3 {
	position: absolute;
	left: 269px;
	top: 242px;
	z-index: 502;
	transform: rotate(10deg);
}

.pile4 {
	position: absolute;
	left: 285px;
	top: 220px;
	z-index: 503;
	transform: rotate(5deg);
}

.pile5 {
	position: absolute;
	left: 279px;
	top: 257px;
	z-index: 504;
	transform: rotate(15deg);
}

.pile6 {
	position: absolute;
	left: 279px;
	top: 209px;
	z-index: 505;
	transform: rotate(15deg);
}

.pile7 {
	position: absolute;
	left: 282px;
	top: 242px;
	z-index: 506;
	transform: rotate(5deg);
}

.pile8 {
	position: absolute;
	left: 273px;
	top: 241px;
	z-index: 507;
	transform: rotate(3deg);
}

.pile9 {
	position: absolute;
	left: 285px;
	top: 229px;
	z-index: 508;
	transform: rotate(10deg);
}

.pile10 {
	position: absolute;
	left: 300px;
	top: 208px;
	z-index: 509;
	transform: rotate(15deg);
}

.pile11 {
	position: absolute;
	left: 281px;
	top: 217px;
	z-index: 510;
	transform: rotate(17deg);
}

.pile12 {
	position: absolute;
	left: 294px;
	top: 252px;
	z-index: 511;
	transform: rotate(17deg);
}

.pile13 {
	position: absolute;
	left: 275px;
	top: 246px;
	z-index: 512;
	transform: rotate(12deg);
}

.pile14 {
	position: absolute;
	left: 269px;
	top: 209px;
	z-index: 513;
	transform: rotate(3deg);
}

.pile15 {
	position: absolute;
	left: 292px;
	top: 261px;
	z-index: 514;
	transform: rotate(11deg);
}

.pile16 {
	position: absolute;
	left: 301px;
	top: 262px;
	z-index: 515;
	transform: rotate(14deg);
}

.pile17 {
	position: absolute;
	left: 254px;
	top: 236px;
	z-index: 516;
	transform: rotate(3deg);
}

.pile18 {
	position: absolute;
	left: 297px;
	top: 245px;
	z-index: 517;
	transform: rotate(14deg);
}

.pile19 {
	position: absolute;
	left: 263px;
	top: 220px;
	z-index: 518;
	transform: rotate(9deg);
}

.pile20 {
	position: absolute;
	left: 293px;
	top: 243px;
	z-index: 519;
	transform: rotate(3deg);
}

.pile21 {
	position: absolute;
	left: 307px;
	top: 203px;
	z-index: 520;
	transform: rotate(2deg);
}

.pile22 {
	position: absolute;
	left: 299px;
	top: 255px;
	z-index: 521;
	transform: rotate(8deg);
}

.playCard4 {
	position: absolute;
	top: 140px;
	left: 470px;
	z-index: 522;
}

.playCard3 {
	position: absolute;
	top: 140px;
	left: 5px;
	z-index: 522;
}

.playCard2 {
	position: absolute;
	top: 420px;
	left: 5px;
	z-index: 522;
}

.playCard1 {
	position: absolute;
	top: 420px;
	left: 470px;
	z-index: 522;
}

.moveCard4 {
	position: absolute;
	z-index: 522;
	transform: translate(250px,250px) rotate(-6deg) scale(1.8);
	transition: all 3s ease-in;
}

.moveCard3 {
	position: absolute;
	z-index: 522;
	transform: translate(250px,250px) rotate(13deg) scale(1.8);
	transition: all 3s ease-in;
}

.moveCard2 {
	position: absolute;
	z-index: 522;
	transform: translate(250px,250px) rotate(146deg) scale(1.8);
	transition: all 3s ease-in;
}

.moveCard1 {
	position: absolute;
	z-index: 522;
	transform: translate(250px,250px) rotate(5deg) scale(1.8);
	transition: all 3s ease-in;
}