html, body
{
	width: 100%;
	height: 100%;
	background: #000;
	font-family: 'Press Start 2P', cursive;
	line-height: 1.4em;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
}

a { text-decoration: none; color: #ff0000; }
a:hover { color: #fff; }
h1 { font-size: 1.0em; margin: 0; padding: 0;  font-weight: normal; }
.jp { display: none; }

@-webkit-keyframes bat
{
	0% { margin-top: -24px; }
	50% { margin-top: 12px; }
	100% { margin-top: -24px; }
}

@keyframes bat
{
	0% { margin-top: -24px; }
	50% { margin-top: 12px; }
	100% { margin-top: -24px; }
}

@-webkit-keyframes bounce
{
	0% { margin-top: 0px; }
	100% { margin-top: -64px; }
}

@keyframes bounce
{
	0% { margin-top: 0px; }
	100% { margin-top: -64px; }
}

@-webkit-keyframes miniBounce
{
	0% { margin-top: 0px; }
	100% { margin-top: -32px; }
}

@keyframes miniBounce
{
	0% { margin-top: 0px; }
	100% { margin-top: -32px; }
}

#site
{
	float: left;
	width: 100%;
}

.wrapper
{
	width: 624px;
	margin: 0px auto;
}

.page
{
	float: left;
	width: 100%;
}

.logo
{
	position: absolute;
	top: 200px;
}

.content
{
	position: relative;
	float: left;
}

.ground
{
	position: absolute;
	width: calc(50% - 312px);
	height: 48px;
	background: url("../images/surface.png") repeat-x;
	display: none;
}

.left
{
	left: 0px;
}

.right
{
	right: 0px;
}

.gradient
{
	position: absolute;
	width: 624px;
	height: 624px;
	background: url("../images/gradient.png") no-repeat;
	bottom: 0px;
}

.language
{
	position: absolute;
	right: 24px;
	top: 12px;
}

.stores
{
	position: absolute;
	left: 24px;
	top: 12px;
}

.language a, .stores a { color: #fff; }
.language a:hover, .stores a:hover { color: #ff0000; }


.falling-player
{
	position: absolute;
	left: 288px;
	display: none;
}

/* ==================
	TILES
===================== */

.tiles
{
	float: left;
	display: none;
}

.tile
{
	position: relative;
	width: 48px;
	height: 48px;
	float: left;
	display: inline;
	background: url("../images/tileset.png") no-repeat;
}

.tile-topleft { background-position: 0px 0px; }
.tile-top { background-position: -48px 0px; }
.tile-topright { background-position: -96px 0px; }
.tile-left { background-position: 0px -48px; }
.tile-right { background-position: -96px -48px; }
.tile-bottomleft { background-position: 0px -96px; }
.tile-bottom { background-position: -48px -96px; }
.tile-bottomright { background-position: -96px -96px; }
.tile-horileft { background-position: -192px 0px; }
.tile-horimiddle { background-position: -240px 0px; }
.tile-horiright { background-position: -288px 0px; }
.tile-verttop { background-position: -144px 0px; }
.tile-vertmiddle { background-position: -144px -48px; }
.tile-vertbottom { background-position: -144px -96px; }
.tile-single { background-position: -288px -48px; }
.tile-empty, .tile-middle { background: none; }

.tile-corner-topleft, .tile-corner-topright, .tile-corner-bottomleft, .tile-corner-bottomright
{
	background: url("../images/tileset.png") no-repeat;
	width: 48px;
	height: 48px;
	position: absolute;
}
.tile-corner-topleft { background-position: -240px -96px; }
.tile-corner-topright { background-position: -192px -96px; }
.tile-corner-bottomleft { background-position: -240px -48px; }
.tile-corner-bottomright { background-position: -192px -48px; }

.object
{
	position: relative;
	width: 48px;
	height: 48px;
	float: left;
	display: inline;
	overflow: visible;
}

.object img
{
	position: absolute;
}

.snail img
{
	width: 64px;
	height: 96px;
	margin-top: -24px;
}

.snail img.right
{
	margin-left: -16px;
}

.bat img, .bat2 img
{
	width: 72px;
	height: 72px;
	margin-top: -12px;
	margin-left: -12px;
	-webkit-animation: bat 2.5s infinite;
	animation: bat 2.5s infinite;
}

.bat2 img
{
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.bullet div
{
	position: absolute;
	left: -12px;
	width: 72px;
	height: 72px;
	float: left;
	background: url("../images/bullet.png") no-repeat;
}

.bullet-0 div { background-position: 0px 0px }
.bullet-1 div { background-position: -72px 0px }
.bullet-2 div { background-position: -144px 0px }

.shopkeeper img
{
	margin-left: -24px;
	margin-top: -48px;
}

.shop img
{
	margin-left: -24px;
	margin-top: -18px;
}

.chest img
{
	margin-left: -12px;
	margin-top: 12px;
}

.gem0 img, .gem1 img, .gem2 img, .gem3 img
{
	margin-left: -12px;
	margin-top: -12px;
	-webkit-animation: miniBounce 0.5s infinite alternate ease-out;
	animation: miniBounce 0.5s infinite alternate ease-out;
}

.gem1 img
{
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2;
}

.gem2 img
{
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4;
}

.gem3 img
{
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5;
}

.smallGem0 img, .smallGem1 img, .smallGem2 img
{
	-webkit-animation: bounce 0.6s infinite alternate ease-out;
	animation: bounce 0.6s infinite alternate ease-out;
}

.smallGem1 img
{
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2;
}

.smallGem2 img
{
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5;
}

.spikes { background: url("../images/spikes.png") no-repeat; }

.destructable
{
	position: absolute;
	width: 72px;
	height: 72px;
	left: -12px;
	top: -12px;
	background: url("../images/destructable.png") no-repeat;
}

.destructable-1 { background-position: -72px 0px; }
.destructable-2 { background-position: -144px 0px; }
.destructable-3 { background-position: -216px 0px; }
.destructable-4 { background-position: -288px 0px; }

.water
{
	width: 48px;
	height: 48px;
	float: left;
	display: inline;
	background: url("../images/water.png") no-repeat;
}

.water-top-0 { background-position: 0px 0px; }
.water-top-1 { background-position: -48px 0px; }
.water-top-2 { background-position: -96px 0px; }
.water-top-3 { background-position: -144px 0px; }
.water-0 { background-position: 0px -48px; }
.water-1 { background-position: -48px -48px; }
.water-2 { background-position: -96px -48px; }
.water-3 { background-position: -144px -48px; }


/* ==================
	DESCRIPTIONS
===================== */



.description,
.buttons
{
	position: absolute;
	text-align: center;
	width: 60%;
	margin-left: 20%;
}

.game-text { top: 96px; }
.about-text { top: 928px; }
.falling-text { top: 1388px; text-align: left; }
.well-text { top: 1688px; text-align: right; }
.fights-text { top: 2280px; }
.boots-text { top: 2740px; }
.treasure-text { top: 3400px; }
.shop-text { top: 3900px; }
.author-text { bottom: 440px; }
.stores-top-text { top: -180px; }
.stores-bottom-text { bottom: 150px; }
.easteregg-text
{
	position: absolute;
	top: -64px;
	left: 0px;
	width: 100%;
	text-align: center;
}

/* ==================
	SCREENSHOTS
===================== */

.screenshots
{
	padding: 0px 40px 0px 40px;
	float: left;
	box-sizing: border-box;
	width: 100%;
}

.screenshots img
{
	border: 3px solid #000;
	box-shadow: 0px 0px 0px 3px #fff;
	opacity: 0.5;
	transition: opacity 0.25s;
	margin-bottom: 9px;
}

.screenshots img:hover
{
	opacity: 1;
	box-shadow: 0px 0px 0px 3px #ff0000;
}

.video
{
	width: 100%;
	margin-bottom: 10px;
	float: left;
}

/* ==================
	STORE BUTTONS
===================== */
.icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 126px;
  height: 66px;
  font-size: 0;
  text-indent: -9999px;
}
.icon-sprite {
  background: url("../images/icons.png");
}

.icon-sprite.steam {
  background-position: 0 0;
}

.icon-sprite.steam:hover {
  background-position: 0 -70px;
}

.icon-sprite.ios {
  background-position: 126px 0;
}

.icon-sprite.ios:hover {
  background-position: 126px -70px;
}

.icon-sprite.ost {
  background-position: 252px 0;
}

.icon-sprite.ost:hover {
  background-position: 252px -70px;
}