/*CSS Reset*/body, div, dl, dt, dd, li, pre,form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }ol, ul { list-style: none; margin: 0; padding: 0; }table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; font-weight: normal; font-style: normal; }acronym, abbr, fieldset, img { border: 0;}:focus { outline: 0; }

body {
	background: #fee084 url(../img/bg-repeat-lg.jpg) center top;
	min-width:1024px;
	color:#402F01;
	font-family: OFLSortsMillGoudyRegular, Georgia, "Times New Roman", serif!important;
}

h1,h2,h3 {
	font-weight: bold;
}

h1 { font-size: 30px; text-align: center;}
h3 { margin-bottom: 20px;}
p { margin-bottom: 20px; }


#board {
	width:1024px;
	background: url(../img/goonies_gameboard.jpg) no-repeat center top;
	height:748px;
	position: relative;
	top:0px;
	margin:0px auto;
}

#pieces { width:241px; position:absolute; padding:25px 342px 0px;  }

.piece { 
background: url(../img/pieces.png) no-repeat 0 0;
display:block; 
float:left; 
margin-right: 15px; 
height: 45px; 
width: 45px; 
z-index:500;
}

#p2 { background-position: -60px 0px; }
#p3 { background-position: -120px 0px; }
#p4 { background-position: -180px 0px; }

.piece span { display: none; }

#die {
	background: #f8f8f8 url(../img/die.png) no-repeat 0 0;
	height:54px;
	width:54px;
	display:block;
	position:absolute;
	top:20px;
	right:20px;
	font-weight:bold;
	font-size:60px;
	line-height:56px;
	text-align: center;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	-o-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.6s;
	-webkit-transition-timing-function: ease-in;
	cursor:pointer;
	z-index:600;
	text-indent:-9996px;
}

#die.die1 { background-position: 0 0; }
#die.die2 { background-position: 0 -64px; }
#die.die3 { background-position: 0 -128px; }
#die.die4 { background-position: 0 -192px; }
#die.die5 { background-position: 0 -256px; }
#die.die6 { background-position: 0 -320px; }

#deck {
	background: transparent;
	height:140px;
	width:100px;
	position:absolute;
	right:45px;
	bottom:92px;
	text-indent:-9996px;
	z-index:1;
	cursor:pointer;
}

#cards {	
	z-index: 1500!important;
	left:357px;
	top:70px;	
	position: absolute;
	-webkit-perspective: 2000;
}

.card { 
	display: block;
	position: absolute;
	background: white;
	color: #f0f0f0;
	height: 480px;
	padding:30px;
	width:310px;
	margin-bottom: 10px;
	-webkit-box-shadow: 0px 0px 10px #111;
	-moz-box-shadow: 0px 0px 10px #111;
	-o-box-shadow: 0px 0px 10px #111;
	box-shadow: 0px 0px 10px #111;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-webkit-transform-style: preserve-3d;
  -webkit-animation: flip 0.2s 1 ease-in;
}

@-webkit-keyframes flip {
  from { -webkit-transform: rotateY(-270deg); }
  to   { -webkit-transform: rotateY(-360deg); }
}

.card.positive { background:url(../img/cards.jpg) no-repeat 0px 0px; }
.card.negative { background:url(../img/cards.jpg) no-repeat 0px -540px;}
.card.challenge { background:url(../img/cards.jpg) no-repeat 0px -1080px; }


.titleblock {
	display: table-row;
}

.cardtitle {
	height: 200px;
	width:310px;
	display: table-cell;
	vertical-align: middle;
	font-size:20px;
	font-weight: bold;
	text-align: center;
	padding:10px 10px;
}

.cardtext, .carddirs {
	font-size: 14px;
	margin: 20px 0px;
	line-height: 1.5em;
}

.carddirs {
	font-style:italic;
}

.close {
	position: absolute;
	bottom:10px;
	right:25px;
	display: block;
	clear:both;
	padding:10px 0px;
	font-size: 20px;
	text-transform: uppercase;
	cursor:pointer;
	font-weight: bold;
	letter-spacing: -1px;
}

#instructions { 
	background: url(../img/instructions.jpg) no-repeat 0 0; 
	display: none; 
	position: absolute; 
	z-index:2000;
	top:40px;
	bottom:40px;
	left:40px;
	right:40px;
	padding:20px 40px;
	-webkit-box-shadow: 0px 0px 20px #111;
	-moz-box-shadow: 0px 0px 20px #111;
	-o-box-shadow: 0px 0px 20px #111;
	box-shadow: 0px 0px 20px #111;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-webkit-transition: opacity 4s ease-in;
	-webkit-transform-style: preserve-3d;
  -webkit-animation: flip 0.2s 1 ease-in;
}

#instructions #introp { margin-top:110px;}

#instructions ol {
	list-style: decimal;
	margin:0 0 1.5em 1.5em;
}

#instructions li { margin-bottom: 10px; }
#instructions .column { float:left; }
#instructions #maincol { width:475px; margin-right: 40px;}
#instructions #ipadcol { width: 330px;}

#openinfo {
	position: absolute;
	top:27px;
	left:250px;
	display: block;
	height: 42px;
	width:40px;
	overflow:hidden;
	z-index:501;
	background:url(../img/info2.png) no-repeat;
	-webkit-transition:opacity 0.1s ease-in;
	cursor: pointer;
}

#openinfo:hover {
	opacity:0.5;
}

.hide { display: none; }

.show { display: block!important; }