@font-face { font-family: '8bit'; src: url('../fonts/8bitwonder-webfont.eot'); src: url('../fonts/8bitwonder-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/8bitwonder-webfont.woff2') format('woff2'), url('../fonts/8bitwonder-webfont.woff') format('woff'), url('../fonts/8bitwonder-webfont.ttf') format('truetype'), url('../fonts/8bitwonder-webfont.svg#8bit_wondernominal') format('svg'); font-weight: normal; font-style: normal; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #ffffff; }
html, body { padding: 0; margin: 0; overflow: scroll; width: 100%; height: 100%; }
body { font-family: '8bit', "Helvetica", "Arial", sans-serif; background: #ffffff url('../images/page-bg.jpg') center center no-repeat; }
#spacer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#spacer.ios { height: 200%; }
#spacer.active { z-index: 1000; }
#game { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; }

#wrapper { width: 1136px; height: 640px; position: absolute; left: 50%; top: 50%; margin: -320px 0 0 -568px; overflow: hidden; }
#status { width: 100%; height: 55px; position: absolute; top: 0; z-index: 10; display: table; opacity: 0; -webkit-transition: 600ms all ease; -moz-transition: 600ms all ease; -ms-transition: 600ms all ease; transition: 600ms all ease; pointers-event: none; }
#status.visible { opacity: 1; }
#status > span { font-size: 35px; display: table-cell; width: 50%; color: #ffffff; height: 55px; text-align: center; vertical-align: bottom; text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7); }

#background { width: 100%; height: 100%; position: absolute; top: 0; cursor: crosshair; z-index: 4; display: none; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, rgb(131, 169, 163)), color-stop(1.0, rgb(220, 220, 199))); background-image: -webkit-linear-gradient(top, rgb(131, 169, 163), rgb(220, 220, 199)); background-image: -moz-linear-gradient(top, rgb(131, 169, 163), rgb(220, 220, 199)); background-image: -ms-linear-gradient(top, rgb(131, 169, 163), rgb(220, 220, 199)); background-image: -o-linear-gradient(top, rgb(131, 169, 163), rgb(220, 220, 199)); background-image: linear-gradient(top, rgb(131, 169, 163), rgb(220, 220, 199)); }
#canvas { width: 100%; height: 100%; position: absolute; top: 0; cursor: crosshair; z-index: 5; background: transparent; }

#message { opacity: 0; display: table; position: absolute; width: 100%; height: 100%; top: 0; font-size: 35px; color: #ffffff; line-height: 35px; text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7); z-index: 10; pointer-events: none; -webkit-transform: translateY(-320px); -moz-transform: translateY(-320px); -ms-transform: translateY(-320px); transform: translateY(-320px); -webkit-transition: 1000ms all cubic-bezier(.94, .17, .94, .03); -moz-transition: 1000ms all cubic-bezier(.94, .17, .94, .03); -ms-transition: 1000ms all cubic-bezier(.94, .17, .94, .03); transition: 1000ms all cubic-bezier(.94, .17, .94, .03); }
#message .wrapper { width: 100%; height: 100%; display: table-cell; text-align: center; vertical-align: middle; }
#message small { display: block; width: 600px; margin: 0 auto; font-size: 22px; line-height: 1.2; }
#message.visible { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }

#rotate, #slide { display: none; background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100; }
#rotate p, #slide p { display: table; border-radius: 600px; width: 500px; height: 500px; background: #d8596b; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -250px; text-align: center; }
#rotate p span, #slide p span { display: table-cell; width: 500px; padding: 0 40px; height: 500px; color: #ffffff; font-size: 42px; line-height: 1.4; text-align: center; vertical-align: middle; }

#submit { display: none; width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; -webkit-transform: translateY(640px); -moz-transform: translateY(640px); -ms-transform: translateY(640px); transform: translateY(640px); -webkit-transition: 500ms all cubic-bezier(.94, .17, .94, .03); -moz-transition: 500ms all cubic-bezier(.94, .17, .94, .03); -ms-transition: 500ms all cubic-bezier(.94, .17, .94, .03); transition: 500ms all cubic-bezier(.94, .17, .94, .03); }
#submit.visible { display: block; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
#submit .score .heading { display: block; text-align: center; margin-top: 40px; font-size: 50px; line-height: 120px; height: 110px; color: #3c394c; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }
#submit .score .value { display: block; text-align: center; font-size: 110px; height: 120px; color: #ffffff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); }
#submit .form input { display: block; margin: 30px auto; width: 420px; height: auto; padding: 15px 0; font-size: 38px; font-family: '8bit', "Helvetica", "Arial", sans-serif; line-height: 1; text-align: center; color: #ffffff; background: #93a9a9; border: 3px solid #3c394c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#submit .form input::-webkit-input-placeholder { color: #d0d0d0; }
#submit .form input:-moz-placeholder { color: #d0d0d0; /* Firefox 18- */}
#submit .form input::-moz-placeholder { color: #d0d0d0; /* Firefox 19+ */ }
#submit .form input:-ms-input-placeholder { color: #d0d0d0; }
#submit .form input.error { border: 3px solid #dd3030; }
#submit .form input:focus { outline: none; background: #798c8c; }
#submit .form button.submit { display: block; margin: 30px auto 40px auto; width: 230px; height: auto; padding: 10px 0; font-size: 28px; font-family: '8bit', "Helvetica", "Arial", sans-serif; line-height: 1; text-align: center; color: #ffffff; background: #3d3c4b; border: 3px solid #3c394c; border-radius: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#submit .form button.submit:focus, #submit .form button.submit:hover { background: #25252E; outline: none; }

button:focus, button:hover { outline: none; }
button.again { display: block; margin: 40px auto 0 auto; width: 280px; height: 61px; padding: 0; color: #ffffff; background: url("../images/btn-play_again.png"); border: none; border-radius: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
button.again span { display: none; }

#sharePane { position: absolute; width: 100%; bottom: -100px; height: 200px; -webkit-transition: 300ms all cubic-bezier(.94, .17, .94, .03); -moz-transition: 300ms all cubic-bezier(.94, .17, .94, .03); -ms-transition: 300ms all cubic-bezier(.94, .17, .94, .03); transition: 300ms all cubic-bezier(.94, .17, .94, .03); }
#sharePane button.share { display: block; position: absolute; top: 0; right: 144px; width: 120px; height: 100px; padding: 0; background: rgba(0, 0, 0, 0.6) url("../images/share-btn.png") 45% center no-repeat; border: none; border-radius: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#sharePane button.share span { display: none; }
#sharePane .buttons { margin-top: 100px; width: 100%; height: 100px; background: rgba(0, 0, 0, 0.6); text-align: center; }
#sharePane a { width: 80px; height: 100px; display: inline-block; }
#sharePane a.facebookShare { background: url('../images/share-fb-btn.png') center center no-repeat; }
#sharePane a.twitterShare { background: url('../images/share-tw-btn.png') center center no-repeat; }
#sharePane a span { display: none }
#sharePane.visible { bottom: 0; }

#leaderboard { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; -webkit-transform: translateY(-640px); -moz-transform: translateY(-640px); -ms-transform: translateY(-640px); transform: translateY(-640px); -webkit-transition: 500ms all cubic-bezier(.94, .17, .94, .03); -moz-transition: 500ms all cubic-bezier(.94, .17, .94, .03); -ms-transition: 500ms all cubic-bezier(.94, .17, .94, .03); transition: 500ms all cubic-bezier(.94, .17, .94, .03); background: url('../images/leaderboard.png') center center no-repeat; background-size: contain; }
#leaderboard.visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
#leaderboard .scores { width: 820px; height: 270px; margin: 170px auto 30px auto; overflow: auto; }
#leaderboard .scores table { width: 100%; border-collapse: collapse; }
#leaderboard .scores table th, #leaderboard .scores table td { padding: 6px 5px; font-size: 21px; text-align: left; font-weight: normal; color: #ffffff; }
#leaderboard .scores table th { color: #3c394c }
#leaderboard .scores table td:first-child { color: #3c394c !important; font-size: 26px; text-align: right; }
#leaderboard .scores table tr:nth-child(2n+1) td { color: #d7566a; }
#leaderboard .scores table tr.my td { background: rgba(229, 200, 37, 0.33); }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

#loading { width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background: url('../images/wreath.png') center center no-repeat; display: none; opacity: 0; pointer-events: none; -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; -webkit-transition: 300ms all ease; -moz-transition: 300ms all ease; -ms-transition: 300ms all ease; transition: 300ms all ease; }
#loading.visible { opacity: 1; }

#landing { width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background: url('../images/landing.png') center center no-repeat; background-size: auto 70%; opacity: 0; pointer-events: none; -webkit-transition: 800ms all ease; -moz-transition: 800ms all ease; -ms-transition: 800ms all ease; transition: 800ms all ease; }
#landing.visible { cursor: pointer; opacity: 1; pointer-events: auto; }

@media only screen and (max-width: 767px) {
	#wrapper { width: 100%; height: 100%; position: static; margin: 0; }
	#status { width: 100%; height: 28px; }
	#status > span { font-size: 17px; height: 28px; }
	#message { font-size: 17px; line-height: 17px; }
	#message small { dwidth: 300px; font-size: 12px; }

	#rotate p, #slide p { border-radius: 300px; width: 250px; height: 250px; margin: -125px 0 0 -125px; }
	#rotate p span, #slide p span { width: 250px; padding: 0 20px; height: 250px; font-size: 21px; }

	#submit .score .heading { margin-top: 60px; font-size: 30px; line-height: 80px; height: 70px; }
	#submit .score .value { font-size: 60px; height: 60px; }

	#leaderboard .scores { width: 410px; height: 135px; margin: 85px auto 15px auto; }
	#leaderboard .scores table th, #leaderboard .scores table td { padding: 3px 2px; font-size: 11px; }
	#leaderboard .scores table td:first-child { font-size: 13px; }

	#sharePane { bottom: -70px; height: 140px; }
	#sharePane button.share { right: 10px; width: 80px; height: 70px; background-size: 30px 30px; }
	#sharePane .buttons { margin-top: 70px; height: 70px; }
	#sharePane a { width: 60px; height: 70px; }
	#sharePane a.facebookShare { background-size: 45px 45px; }
	#sharePane a.twitterShare { background-size: 45px 45px; }

}


.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 8px; height: 100%; }
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: rgb(220, 220, 199); position: relative; border-radius: 4px; }
.jspDrag { background: rgb(131, 169, 163); position: relative; top: 0; left: 0; cursor: pointer; border-radius: 4px; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }
* html .jspCorner { margin: 0 -3px 0 0; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */
*