* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, div, ul, li, a {
	padding: 0;
	border: 0;
	margin: 0;
	font-size: 100%
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 200;
	list-style: none;
	text-decoration: none;
}
/**/
@font-face {

}

body {
		background-color: #000;
	_background: rgb(0, 0, 0);
	_background: transparent;
}

/* Responsive */
@media screen and (min-width:600px)  {

}

.wrapper {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
  _height: 100vh; /* Example: Ensures parent takes full viewport height */
}

.wrapper {
	_width: 100vw;
	_height: 100vh;
 	_min-width: width: 800px;
/*
	background: url(http://ancientbeta.dev/tarot/images/bg/starrynightsky.jpeg), black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: fixed;
*/
}

.layout { width: 660px; height: 300px; margin: 20px; padding: 20px; _overflow: hidden; background: transparent; border: 0px solid #222; 	border-radius: 10px; margin: 20px auto 0 auto; position: relative; z-index: 1;
	_background: url(/apps/tarot/images/layout.png), black;
	background: url(images/layout_transparent.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	_transform: scale(2); /* Scales the element to 300% (3 times its original size) */
	_transform-origin: top left; /* Sets the origin point for the transformation */
}
.controls { width: 140px; margin: 0; position: absolute; right: 32px; bottom: 46px; background: transparent; z-index: 11; }

h1, h2 {
	text-align: center;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 100;
	color: #999;
	margin-right: 25%;
	margin-left: 25%;
	padding-top: 10px;
}
#deal:hover {
	cursor: url(), auto;
}
.buttons {
	height: 210px;
	border: 0px solid indigo;
}

.buttons img, .buttons input {
	display: block;
	z-index: 11;
}
.buttons img {
	height: 175px;
	margin: 0 9px 9px 17px;
	_margin-right: auto;
	padding-top: 7px;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	_cursor: pointer !important;
}
.buttons img:hover { 
	_opacity: 0.75; 
	cursor: pointer !important;
}

.buttons img:active { 
	_height: 156px;
	height: 175px;
	margin: 0 9px 13px 17px;
	-webkit-transform:scale(.95);
	transform:scale(.95);
}

.buttons input {
	margin-bottom: 0px;
	background-color: transparent;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 100;
	font-size: 13px;
	color: #999;
	padding-left: 13px;
	padding-right: 13px;
	border: 2px solid #999;
}

/***** Fancy buttons ****/

a.fancy_button, button.fancy_button { 
  background: #555; 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));  
  background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4)); 
  float: left; 
  margin: -4px 0 0 9px !important;
  padding: 4px; 
  width: 100%; 
  text-decoration: none; 
  outline: 0; 
  border-width: 1px; 
  border-style: solid;
  width: auto;
  overflow: visible;
  border-color: transparent transparent #666 transparent; 
  border-color: transparent transparent rgba(202,202,202,0.27) transparent;
  _-webkit-border-radius: 12px; _-moz-border-radius: 12px; _border-radius: 12px;
  -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
  -webkit-background-clip: padding-box;
}

a.fancy_button span, button.fancy_button span { 
  display: block; 
  float: left;
  letter-spacing: 1px; 
  border-width: 1px; 
  border-style: solid; 
  border-color: #ccc #444 #111 #444; 
  border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7) rgba(0,0,0,0.5); 
  font: bold 21px/1em Arial;
  color: #FFF; 
  _padding: 0.48em 2em; 
  _padding: 10px 28px; 
  padding: 5px 19px; 
  cursor: pointer; 
  text-shadow: rgba(0,0,0,0.45) 0 -1px 0; 
  -webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
  -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 5px;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.5, rgba(255,255,255,0.01)), to(transparent)); 
  background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr='#80FFFFFF', EndColorstr='#00FFFFFF'); 
  -webkit-background-clip: padding-box;
}

a.fancy_button:hover span, button.fancy_button:hover span {  
  border-top-color: rgba(255,255,255,0.65); 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20))); 
  background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#99dcdcdc', EndColorStr='#33000000'); 
  -webkit-background-clip: padding-box;
  _color: #AEB2B2 !important;
}

a.fancy_button:active span, button.fancy_button:active span {  
  border-top-color: rgba(255,255,255,0.2); 
  border-left-color: rgba(0,0,0,0.4); 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5))); 
  background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#80969696', EndColorStr='#59000000'); 
  -webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; 
  -webkit-background-clip: padding-box;
  color: #999;
}

a.fancy_button span:active, button.fancy_button span:active { 
  border-top-color: rgba(255,255,255,0.2); 
  border-left-color: rgba(0,0,0,0.4); 
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#80969696', EndColorStr='#59000000'); 
  -webkit-background-clip: padding-box;
  color: #999;
}

a#shuffle {
	margin: -7px 0px 0px 18px; 
	text-transform: Uppercase;
}

a#shuffle span {
	font-size: 16px; 
	background-color: #111; 
	color: #CCC;
}

#hand img {
	_margin: 2px 3px 11px 11px;
	margin: 17px 8px 11px 18px;
	_width: 120px;
	_height: auto;
	height: 220px;
	border: 10px solid rgb(255,255,255);
	border-radius: 10px;
	border: 1px solid #222;
}

#labels span { 
	z-index: -1; 
	position: absolute;
	color: #444;
	font-family: verdana;
	font-size: 13pt;
	font-weight: bold;
	text-shadow: 0 1px 0 #AAA; 
	letter-spacing: 1.0px; 
	text-transform: uppercase;
}

#labels span#one { 
	left: 60px;
	top: 120px;
}

#labels span#two { 
	left: 200px;
	top: 120px;
}

#labels span#three { 
	left: 353px;
	top: 120px;
}

.orientationDown {
	transform: rotate(180deg);
}