/**************************************************** 
*	Poker Hand Rankings
*
*	Author: Thorsten Beeck
*	Website: http://thorstenbeeck.com/
*	Date: 26th February 2011
*	Email: thorsten@thorstenbeeck.com
*	Update: 18th December 2018
****************************************************/

/* @font-face
-------------------------------------------------- */

@font-face {
    font-family: 'ForteRegular';
    src: url('forte-webfont.eot');
    src: url('forte-webfont.eot?iefix') format('eot'),
         url('forte-webfont.woff') format('woff'),
         url('forte-webfont.ttf') format('truetype'),
         url('forte-webfont.svg#webfontvEPvyge2') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Body and Page
-------------------------------------------------- */

body {
	background-color: #3bae3e;
	background: -moz-linear-gradient(100% 100% 90deg, #242e24, #3bae3e);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3bae3e), to(#242e24));
	background-attachment: fixed;
	color: #555;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	text-align: center;
}

body:before {
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	content: "";
	height: 10px;
	left: 0;
	position: fixed;
	top: -10px;
	width: 100%;
	z-index: 100;
}

/* General Styling
-------------------------------------------------- */

h1 {
	color: #fff;
	font-family: Courier, Arial;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 0 0 5px 3px;
	text-align: left;
	text-shadow: 1px 1px 1px #444;
}

img {
	border: none;
}

.black {
	color: #000;
}

.red {
	color: #ff0000;
}

.white {
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}

header span:nth-child(2),
header span:nth-child(3),
header span:nth-child(6),
header span:nth-child(7) {
	display: none;
}

/* Links
-------------------------------------------------- */

a {
	color: #3bae3e;
	outline: none;
	text-decoration: none;
}
	
a:hover {
	background: #3bae3e;
	color: #fff;
	text-decoration: none;
}

/* Layout
-------------------------------------------------- */

#wrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 270px;
}

header {
	font-family: ForteRegular, Helvetica, Arial, Verdana, sans-serif;
	font-size: 20px;
	margin: 0 auto;
	padding: 16px 0 8px 0;
	max-width: 540px;
}

section {
	color: #555;
	float: left;
	font-size: 14px;
	margin: 0 auto;
	padding: 8px 0;
	text-align: justify;
	width: 100%;
}

.card {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #444;
	-webkit-box-shadow: 1px 1px 1px #444;
	box-shadow: 1px 1px 1px #444;
	background-color: #fff;
	float: left;
	height: 70px;
	margin: 0 2px;
	width: 50px;
}

footer {
	color: #fff;
	float: left;
	font-family: Courier, Helvetica, Arial, Verdana, sans-serif;
	font-size: 10px;
	line-height: 15px;
	max-width: 540px;
	padding: 8px 0 16px 0;
	text-align: center;
	text-shadow: 1px 1px 1px #444;
	width: 100%;
}

.number {
	font-size: 10px;
	padding: 3px 0 0 3px;
	position: relative;
}

.number-rotate {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom: 54px;
	font-size: 10px;
	padding: 3px 0 0 3px;
	position: relative;
}

.bigsymbol {
	font-size: 45px;
	position: relative;
	text-align: center;
	top: -28px;
}

.smallsymbol {
	font-size: 16px;
	padding: 3px 0 0 3px;
	position: relative;
	top: -6px;
}

.smallsymbol-rotate {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom: 48px;
	font-size: 16px;
	padding: 3px 0 0 3px;
	position: relative;
}

.transparent {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

@media screen and (min-width: 700px) {

	h1 {
		font-size: 16px;
		padding: 0 0 10px 3px;
	}

	header span:nth-child(2),
	header span:nth-child(3),
	header span:nth-child(6),
	header span:nth-child(7) {
		display: inline-block;
	}

	#wrapper {
		max-width: 540px;
	}

	header {
		font-size: 32px;
		padding: 32px 0 16px 0;
	}


	section {
		padding: 16px 0;
	}

	.card {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-khtml-border-radius: 10px;
		height: 140px;
		margin: 0 4px;
		width: 100px;
	}

	.number {
		font-size: 20px;
		padding: 3px 0 0 3px;
		position: relative;
	}

	.number-rotate {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		bottom: 96px;
		font-size: 20px;
		padding: 3px 0 0 3px;
		position: relative;
	}

	.bigsymbol {
		font-size: 90px;
		position: relative;
		text-align: center;
		top: -51px;
	}

	.smallsymbol {
		font-size: 32px;
		padding: 3px 0 0 3px;
		position: relative;
		top: -12px;
	}

	.smallsymbol-rotate {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		bottom: 84px;
		font-size: 32px;
		padding: 3px 0 0 3px;
		position: relative;
	}

	.transparent {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}

	footer {
		font-size: 12px;
		line-height: 18px;
		padding: 16px 0 32px 0;
	}

}