html,body{
	margin:0;
	padding:0;
	background:#343434;
}

#page_wrapper{
	position: relative;
}

#game_wrapper{
	position:relative;
	margin:0 auto;
}

/* ---------------------------------------
INSTRUCTIONS
------------------------------------------ */
#instructions{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:80%;
	font-family: 'Risque', cursive;
	overflow:hidden;
	display:none;
}

#instructions .shadow{
	position:absolute;
	color:#094951;
	top:0.08em;
	left:0.08em;
}

#instructions .fill{
	position:absolute;
	color:#094951;
	top:0;
}

#instructions .title{
	position:relative;
	margin:0 auto;
	width:54%;
	font-family: 'Risque', cursive;
	font-size:1.5em;
	letter-spacing:.05em;
}

#instructions .logo{
	position:relative;
	left:25%;
	top:6%;
	width:50%;
}

#instructions .logo img{
	width:100%;
}

#instructions .description1{
	position:relative;
	margin:8% 25%;
	width:60%;
	font-size:1.5em;
	line-height:1em;
	letter-spacing:.05em;
	text-align:center;
}

#instructions .description2{
	position:relative;
	font-family: 'Risque', cursive;
	margin:12% 23%;
	width:60%;
	font-size:1.5em;
	line-height:1.2em;
	letter-spacing:.05em;
	text-align:center;
}

#instructions .steps_container{
	position:relative;
	margin:34% auto;
	margin-left:11%;
	width:83%;
}

#instructions .step{
	position:relative;
	width:95%;
	margin-top:.5em;
}

#instructions .step_bullet{
	/*
	width:2.5em;
	height:2.5em;
	*/
	position:relative;
	background:url(../images/views/instructions/tj_stepsbtn.png) no-repeat;
	background-size:cover;
}

#instructions .step_num{
	color:#094951;
	position:absolute;
	width:100%;
	text-align:center;
	top:.30em;
	left:.15em;
	font-size:1.4em;
	line-height:.9em;
}

#instructions .step_text{
	position:absolute;
	color:#094951;
	width:87%;
	right:0;
	top:.2em;
	font-size:1.4em;
}

#instructions .indent{
	left:2.2em;
}

#instructions .indent2{
	left:.8em;
}

#instructions .callout{
	position:relative;
	font-family: 'Risque', cursive;
	width:65%;
	font-size:1.15em;
	margin:-6.9em auto;
	margin-left:22%;
	letter-spacing:.05em;
	text-align:center;
}

#instructions .button{
	position:relative;
	margin:12em auto;
	width:33%;
	height:5%;
	cursor:pointer;
}

#instructions .button .label{
	position:relative;
	width:45%;
	font-size:1.25em;
	margin:-1.8em auto;
	margin-left: 2.3em;
}

#instructions .button .fill{
	position:absolute;
	color:#f2e9da;
	top:0;
}

#instructions .button img{
	width:100%;
	height:100%;
}

#instructions .button .light{
	display:none;
}

#instructions .button .displayed{
	display:block;
}

#instructions .button .undisplayed{
	display:none;
}

#instructions .sideTom {
	position:absolute;
	width:50%;
	top:0em;
	left:0px;
}

#instructions .sideTom img{
	width:55%;
}

#instructions .sideJerry {
	position:absolute;
	width:50%;
	top:24em;
	right:0px;
	text-align:right;
	pointer-events:none;
}

#instructions .sideJerry img{
	width:40%;
}



/* ---------------------------------------
RESULTS
------------------------------------------ */
#results{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:50%;
	font-family: 'Risque', cursive;
	display:none;
}


#results .shadow{
	position:absolute;
	color:#094951;
	top:0.1em;
	left:0.1em;
}

#results .title .outline{
	position:absolute;
	color:#094951;
}

#results .fill{
	position:absolute;
	color:#1986ae;
	top:0;
}

#results .title{
	position:relative;
	margin:0 auto;
	font-family: 'Risque', cursive;
	top:-1%;
	left:-9%;
	width:50%;
	font-size:1.8em;
	letter-spacing:.05em;
	transform:rotate(-3deg);
}

#results .description{
	position:relative;
	margin:0 25%;
	top:12%;
	left:-5%;
	width:70%;
	font-size:1.4em;
	letter-spacing:.05em;
	text-align:center;
}

#results .description .fill{
	color:#094951;
}

#results .button{
	position:relative;
	margin:0 auto;
	top:22%;
	width:33%;
	height:5%;
	cursor:pointer;
}

#results .button .label{
	position:relative;
	width:83%;
	font-size:1.15em;
	margin:-2em auto;
	margin-left:1.2em;
	letter-spacing:.07em;
}

#results .button .fill{
	position:absolute;
	color:#f2e9da;
	top:0;
	pointer-events:none;
}

#results .button img{
	width:100%;
	height:100%;
}

#results .button .light{
	display:none;
}

#results .button .displayed{
	display:block;
}

#results .button .undisplayed{
	display:none;
}

#results .zoinks{
	width:90%;
	height:90%;
	position:relative;
	margin:0 auto;
	top:28%;
	background:url(../images/views/results/congrats_zoinks_bg.png) no-repeat;
	background-size:contain;
	color:#094951;
	font-size:1.1em;
	letter-spacing:.05em;
	text-align:center;
	pointer-events:none;
}

#results .zoinks .earned_text, #results .zoinks .earned_text_effect{
	position:absolute;
	top:5.2em;
	width:100%;
	text-align:center;
}

#results .zoinks .earned_text .zoinks_points{
	color:#ff6700;
}

#results .zoinks .earned_text .zoinks_points, #results .zoinks .earned_text_effect .zoinks_points{
	vertical-align:bottom;
	font-size:1.5em;
}

#results .zoinks .earned_text_effect .invisible{
	opacity:0;
}

#results .zoinks .earned_text_effect .zoinks_points{
	color:#094951;
}

#results .zoinks .earned_text_effect{
	left:.08em;
	top:5.4em;
}

#results .zoinks .enter_code{
	position:absolute;
	top:7em;
	width:100%;
	text-align:center;
}

#results .zoinks .zoinks_url{
	position:absolute;
	top:11.2em;
	width:100%;
	text-align:center;
}

#results .zoinks .code_display{
	position:absolute;
	width:32%;
	height:30%;
	top:8.4em;
	left:7em;
	background:url(../images/views/results/congrats_zoinks_code.png) no-repeat;
	background-size:contain;
}