html, body {

	margin: 0;
	padding: 0;
	height: 100%;

	background-color: #3cbcfc;

	/*overflow-x: hidden;*/

}

body {
	font-size: 128px;
}

* {
	pointer-events: none;

	padding:0;
	border:0;
	-webkit-margin-before: 0;
	margin-before: 0;
	-webkit-margin-after: 0;
	margin-after: 0;

}

table,td {
	border: 0;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	-webkit-border-horizontal-spacing: 0;
	-webkit-border-vertical-spacing: 0;
}

@font-face {
    font-family: PixelFont;
    src: url(../fonts/emulogic.ttf);
}
@font-face {
    font-family: SuperFont;
    src: url("../fonts/Super Plumber Brothers.ttf");
}

/*
@media screen and (max-height: 768px) { 
	body {
		font-size: 128px;
	}
}

@media screen and (max-height: 480px) { 
	body {
		font-size: 64px;
	}
}
*/
h1,h2,h3,p {
	
	/*-webkit-margin-before: 0.1em;
	-webkit-margin-after: 0;*/
}
h1 {
	font-size: 0.4em;
	font-family: 'Timmana', sans-serif;
}
h2 {
	font-size: 0.25em;
	line-height: 1em;
	font-family: 'Timmana' !important;
	font-style: normal;
	font-weight: 400;
	
}
h3 {
	font-size: 0.2em;
	font-family: 'Timmana', sans-serif;
}
p, label {
	font-size: 0.125em;
	font-family: "Arial";
	pointer-events: auto;
}

template {
	display: none !important;
}

input, textarea, a, .platform, a img {
	pointer-events: auto;
}

textarea, input {
	font-size: 0.25em;
	display: block;
	resize: none;
}

#loading {
	position: absolute;
	left: 50%;
	width: 20%;
	margin-left: -10%;
	top: 50%;
	text-align: center;
	z-index: 999;
}

#hud {
	position: fixed;
	z-index: 200;
	width: 100%;
	height: 100%;

}
	#hud p {
		text-shadow: 0.1em 0.1em #000000;
		color: white;
		font-size: 0.25em;
		height: 100%;
	}
	#pause-button {
		background-image: url(../img/pause-button.gif);
		background-size: 0.5em 0.5em;
		background-repeat: no-repeat;
		background-position: center center;
		width: 10%;
		height: 10%;
	}
	#clock {
		position: absolute;
		top: 0em;
		right: 0%;
		width: 20%;
		height: 10%;
		text-align: left;
		/*background:purple;*/
		padding-left: 0.25em;
		padding-right: 0.25em;
		background-image: url(../img/clock.gif);
		background-size: 0.25em;
		background-repeat: no-repeat;
		background-position: 0 0.08em;
	}
	#coins {
		position: absolute;
		top: 0em;
		left: 5%;
		width:20%;
		height:10%;
		text-align: left;
		padding-left: 0.25em;
		background-image: url(../img/coin-icon.gif);
		background-size: 0.25em;
		background-repeat: no-repeat;
		background-position: 0 0.08em;
		/*background:green;*/
	}
	#points {
		position: absolute;
		top:0;
		left:40%;
		width: 30%;
		height: 10%;
		
		text-align: center;
		/*background:yellow;*/
		
	}

#container {
	height: 100%;
}



#scene{

	width: 100%;
	height: 100%;
	position: relative;
	pointer-events:auto;
	overflow:hidden;
	
}

.level {
	position:absolute;
	bottom:0em;
	height: 100%;
}
.level.xsmall {
	width: 20em;
}
.level.small {
	width: 30em;
}
.level.med {
	width: 40em;
}
.level.large {
	width: 50em;
}

.pixel {
	font-family: PixelFont !important;
}

.sky {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 0;
}
#about .sky {

	background-color: #3cbcfc;
}
#experience .sky {
	/*background-color: #cfb84e;*/
	/*background-color: #111;*/
	background-image: url('../img/ground-dirt-dark.gif');
	background-size: 1em;
	z-index: 5;
}

#water .sky {
	background-color: #3cbcfc;
}

#skills .sky {
	background-image: url('../img/wall-brick1.gif');
}

#contact button {
	font-size: 0.2em;
	background: gold;
	pointer-events:auto;
	/*border: solid 0.25em green;*/
	/*border-radius: 1em;*/
	border: none;
}
#contact button:hover {
	font-size: 0.25em;
	background: yellow;

}

#contact button:active {
	font-size: 0.15em;
	background: white;
}
/*
#scene.notouch {
	transition: transform 1.0s ease-out 0s;
}

#scene.notouch div[data-z] {
	transition: margin-left 1.0s ease-out 0s;
}
*/
.instructions {
	width: 100%;
	height: 0.75em;
	bottom: 0em;
	text-align: center;
	position:absolute;
	z-index: 100;

}

.instructions h2 {

	display: none;
}
.notouch .instructions .desktop {
	
	display: block !important;
}

.touch .instructions .mobile {
	display: block !important;
}

#input-controls {
	position: fixed;
}

.background-hills {
	position: absolute;
	background: url('../img/background-hills.gif');
	background-size: 2em 1em;
	height: 1em;
	bottom: 1em;
	z-index: 1;

}

#player {
	/*position: absolute;*/
	position: fixed;
	left:50%;
	background: url('../img/player-spritesheet.gif');
	background-size: 8em 8em;
	background-position: 0em 0em;
	width: 1em;
	height: 1em;
	bottom: 5em;
	/*top: 0em;*/
	z-index: 20;

	/*transition: left 0.3s ease-out 0s;*/

	margin-left: -0.5em;
}

	#player .chat {
		position: absolute;
		width: 3em;
		text-align: center;

		height: auto;

		/*height:1.5em;*/
		display: none;
	
		left: -1.25em;
		bottom: 0.5em;

		border-spacing: 0;
		border-bottom: 0.5em solid transparent;
		border-top: 0.25em solid transparent;
		border-left: 0.2em solid transparent;
		border-right: 0.2em solid transparent;
		-webkit-border-image: url(../img/chat-bubble.gif) 85 26  stretch;
		border-image: url(../img/chat-bubble.gif)  85 26 stretch;


		-webkit-transition: width 1s, height 1s;
		transition: width 1s, height 1s;

	}
	#player .chat.visible {
		display: block;
	}

	#player .chat p {
		font-size: 0.2em;
		line-height: 1em;
		padding: 0;
		background: white;
		overflow: hidden;
	}

	#player .chat .line-overlay {
		height: 0.2em;
		background: white;
		position: absolute;
		width: 100%;
		left:0%;

	}

	#player .chat .line-overlay.reveal {
		width: 0%;
		left: 100%;
		-webkit-transition: width 2s, left 2s;
		transition: width 2s, left 2s;
		border-left: 1px solid gray;
	}

	#player .bounds {
		position: absolute;
		left: 0.25em;
		bottom: 0em;
		width: 0.5em;
		height: 0.8em;
		background: blue;
		opacity: 0;
		z-index: 21;
		pointer-events: auto;
	}

	#player.idle {
		background-position: 0em 0em;
	}

	#player.idleswim {
		background-position: -4em 0em;
	}
	#player.swim {
		background-position: -1em 0em;
		animation: player_swim 0.5s steps(2) infinite;
		-webkit-animation: player_swim 0.5s steps(2) infinite;
	}
	@keyframes player_swim {
		0% {background-position: -2em 0em;}
		100% {background-position: -4em 0em;}
	}
	@-webkit-keyframes player_swim {
		0% {background-position: -2em 0em;}
		100% {background-position: -4em 0em;}
	}
	#player.jump {
		background-position: 0em -1em;
	}
	#player.fall {
		background-position: -1em -1em;
	}
	#player.run {
		animation: player_run 0.5s steps(2) infinite;
		-webkit-animation: player_run 0.5s steps(2) infinite;
	}
	@keyframes player_run {
		0% {background-position: -2em -1em;}
		100% {background-position: -4em -1em;}
	}
	@-webkit-keyframes player_run {
		0% {background-position: -2em -1em;}
		100% {background-position: -4em -1em;}
	}


.groundCheck {
	position: absolute;
	width: 0.05em;
	height: 0.05em;
	background: red;
	z-index: 99;
	bottom: -0em;
	left: 0.5em;
	opacity: 0;
}
#title {
	position:absolute; 
	background-size: 8em; 
	width: 8em; 
	height: 2.59375em; 
	left: 2em; 
	bottom: 3em; 
	z-index: 100;
	background-image:  url(../img/title.png);
	background-repeat:no-repeat;
	/*display: none;*/
}
#subtitle {
	position:absolute; 
	width: 8em; 
	height: 0.25em; 
	left: 3.5em; 
	bottom: 2.5em; 
	z-index: 100;
	background-image:  url(../img/arrow-red.gif);
	background-size: 0.25em; 
	background-repeat:no-repeat;
	padding-left: 0.25em;

}
#subtitle h3 {
	font-size: 0.15em;
	color: white;
	font-style: normal;
	font-weight: 200;
	text-shadow: 0.15em 0.15em #000000;
}
.dig-hole {
	position: absolute;
	background-image: url('../img/dig-hole.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 11;
	pointer-events: auto;
}
.ground {
	position: absolute;
	background-image: url('../img/ground.gif');
	background-size: 1em;
	height: 1em;
	bottom: 0em;
	left: 0em;
	z-index: 10;
}

	.ground.wood {
		background-image: url('../img/ground-wood.gif');
		border-left: #000  solid 0.05em;
		border-right: #000  solid 0.05em;
	}
	.ground.dirt {
		background-image: url('../img/ground-dirt.gif');
	}

	.ground.rock {
		background-image: url('../img/ground-rock.gif');
		background-size: 0.5em;
	}

	.ground.brick {
		background-image: url('../img/brick1.gif');
		background-size: 1em;

	/*border-top:black solid 0.075em;*/

	}
	.ground.brick.dark {
		background-image: url('../img/wall-brick1.gif');
	}
	.ground.block.dark {
		background-image: url('../img/ground-brick3.gif');
		background-size: 0.5em;
	}

	.ground.gallery-wall-base {
		background-image: url('../img/gallery-wall-base.gif');
		border-left: #000  solid 0.125em;
		border-right: #000  solid 0.125em;
	}

	.ground.gallery-wall {
		background-image:none;
		background-color: #edd6c6;
		border-left: #000  solid 0.125em;
		border-right: #000  solid 0.125em;
	}

	.ground.wood-wall {
		background-image: url('../img/wood-wall.gif');
		border-left: #000  solid 0.125em;
		border-right: #000  solid 0.125em;

	}

	.ground.gallery-ceiling {
		background-image: url('../img/gallery-ceiling.gif');
	}

	.ground.none {
		background: none;
	}

.painting h2 {
	background-color:white; 
	padding: 0.25em;
	pointer-events:auto;
}

.painting p {
	display: none;
}

.painting img {
	pointer-events:auto;
	width:1em; 
	height: 1em; 
	border: .1em solid black;
}


.block.grey {
	position: absolute;
	background-image: url('../img/grey-block.gif');
	background-size: 0.25em;
	width: 0.25em;
	height: 0.25em;
	z-index: 11;
}
.bench {
	position: absolute;
	background-image: url('../img/bench.gif');
	background-size: 1em;
	width: 1em;
	height: 0.4em;
	z-index: 11;
}
.wall-light {
	position: absolute;
	background-size: 2em;
	width:2em;
	height: 2em;
	z-index: 11;
	background-image: url('../img/light-source.png');
}


.bridge {
	position: absolute;
	background-image: url('../img/bridge2.gif');
	background-size: 2em;
	width: 2em;
	height: 0.5em;
	bottom: 0.92em;
	z-index: 11;
}
.bridge.log {
	background-image: url('../img/bridge.gif');
	background-size: 2em;
}

.plant1 {
	position: absolute;
	background: url('../img/plant1.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 21;
	/* cursor: pointer; */
	pointer-events: auto;
}

.plant2 {
	position: absolute;
	background: url('../img/plant2.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 21;
	/* cursor: pointer; */
	pointer-events: auto;
}

.pot {
	position: absolute;
	background: url('../img/pot.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 21;
	/* cursor: pointer; */
	pointer-events: auto;
}


.light-fixture {
	position: absolute;
	background: url('../img/light-fixture.gif');
	background-size: 0.25em;
	width: 0.25em;
	height: 0.25em;
	z-index: 15;
}

.shroom {
	position: absolute;
	background: url('../img/plant2.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 19;
	opacity: 1.0;
}


.coin {
	position: absolute;
	background: url('../img/coin.gif');
	background-size: 0.25em;
	width: 0.25em;
	height: 0.25em;
	z-index: 25;
	opacity: 1.0;
	margin-left: 0.125em;
	margin-bottom: 0.125em;

	transition: margin-bottom 0.5s ease-out 0s, opacity 0.25s linear 0.25s;
	/*transition: opacity 0.25s linear 0.5s;*/
}

.cloud1 {
	position: absolute;
	background: url('../img/cloud1.gif');
	background-size: 2em 1em;
	width: 2em;
	height: 1em;
	z-index: 1;
}

.tree1 {
	position: absolute;
	background: url('../img/tree1-trunk.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 30;
	
}
	.tree1-top {
		position: absolute;
		background: url('../img/tree1-top.gif');
		background-size: 0.5em;
		width: 0.5em;
		height: 0.5em;
		margin-top: -0.5em;
		z-index: 10;
	}

.flag-pole {
	position: absolute;
	background: url('../img/flag-pole.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 30;
	
}
	.flag-top {
		position: absolute;
		background: url('../img/flag-top.gif');
		background-size: 0.5em;
		width: 0.5em;
		height: 0.5em;
		margin-top: -0.5em;
		z-index: 10;
	}

	.flag {
		position: absolute;
		background: url('../img/flag.gif');
		background-size: 1em;
		width: 1em;
		height: 0.5em;
		z-index: 10;
		left:0.25em;
	}

.hill {
	position: absolute;
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 6;

}
	.hill .border {
		position: absolute;
		background-size: 0.5em;
		width: inherit;
		height: inherit;
		z-index: inherit;
	}

	.hill .border.top {
		height: 0.25em;
		top: -0.25em;
	}
	.hill .border.left {
		background-size: 0.25em;
		width: 0.25em;
		left: -0.25em;
	}

	.hill .border.right {
		background-size: 0.25em;
		width:0.25em;
		right: -0.25em;
	}

	.hill .border.right.top !important {
		width:0.25em;
		height:0.25em;
	}

	.hill .border.left.top !important {
		width:0.25em;
		height:0.25em;
	}

/* HILL ONE */
	.hill1 {
		background-image: url('../img/hill1-inner.gif');
		/*border: 0.25em solid transparent;
		border-radius: 0.25em;
		border-image: url('../img/hill1-border.gif') 54 64 round; 
		padding: 0.25em;*/
	}
		.hill1 .top {
			background-image: url('../img/hill1-top.gif');
		}
		.hill1 .left {
			background-image: url('../img/hill1-left-side.gif');
		}
		.hill1 .right {
			background-image: url('../img/hill1-right-side.gif');
		}
		.hill1 .left.top {
			background-image: url('../img/hill1-left-corner.gif');
		}
		.hill1 .right.top {
			background-image: url('../img/hill1-right-corner.gif');
		}

/* HILL TWO */
	.hill2 {
		background-image: url('../img/hill2-inner.gif');
	}
		.hill2 .top {
			background-image: url('../img/hill2-top.gif');
		}
		.hill2 .left {
			background-image: url('../img/hill2-left-side.gif');
		}
		.hill2 .right {
			background-image: url('../img/hill2-right-side.gif');
		}
		.hill2 .left.top {
			background-image: url('../img/hill2-left-corner.gif');
		}
		.hill2 .right.top {
			background-image: url('../img/hill2-right-corner.gif');
		}

@-webkit-keyframes MOVE-BG {
   from {
     background-position: 0% 0%;
   }
   to { 
       background-position: 0% 100%;
   }
}


@-webkit-keyframes MOVE-SLOTS {
   from {
     background-position: 0% 0%;
   }
   to { 
       background-position: 0% -100%;
   }
}

.waterfall {
	position: absolute;
	background-image: url('../img/water1.gif');
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
	z-index: 5;

	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

.slots {
	position: absolute;
	width:5em;
	z-index: 3;
}
.slot {
	pointer-events: auto;
	position: relative;
	background-image: url('../img/slot-options.gif');
	background-size: 1em;

	width: 1em;
	height: 1em;
	border: 0.1em solid #ccc;
	float:left;
	margin: 0.125em;

}
.slot.spinning {

	-webkit-animation-name: MOVE-SLOTS;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	animation-name: MOVE-SLOTS;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.level-header {
	color: #ffffff;
	text-shadow: 0.1em 0.1em #000000;
	/*font-size: 100%;*/
}

.profile img {
	width:0.75em; 
	height: 0.75em; 
	float:left;
	margin-right: 0.125em;
	border: 0.05em solid black;
}

.profile h2 {
	padding-top: 0.125em;
}
.job-title {
	margin-top: -0.125em;
	padding-bottom: 0.25em;
}

.hero-level {
	background-image: url(../img/hero-level-bg.gif);
	background-size: 0.25em;
	background-repeat: no-repeat;
	background-position: center 0;
	width: 0.5em;
	height: 0.5em;
	float: right;
	color: white;
	text-align: center;
	margin-top: 0.11em;
	font-weight: bold;
}

.hero-level-label {
	margin-top: -1em;
	color: black;
	font-size: 0.11em;
}

.stats-container {
	clear:both;
	padding-top: 0.25em;
}

.stat-label {
	
}

.stat {
	background-image: url(../img/stat-icons-sprite.gif);
	background-repeat:  no-repeat;
	background-position:  0em -0.25em;
	background-size: 0.25em 1em;
	width: 0.25em;
	height: 0.25em;
	padding-left: 0.25em;
}

.stat.code {
	background-position:  0em 0em;
}
.stat.art {
	background-position:  0em -0.5em;
}
.stat.ui {
	background-position:  0em -0.25em;
}
.stat.backend {
	background-position:  0em -0.75em;
}

.sign-post {
	position: absolute;
	background-image: url(../img/sign-post.gif);
	background-size: 1em;
	width: 1em;
	height: 1em;
	z-index: 10;
}
	.sign-post h3 {
		/*width: 1em;*/
		color: white;
		line-height: 1em;
		text-align: center;
		text-shadow: 0.1em 0.1em #000000;
	}
	.sign-post.wide {
		background-image: url(../img/sign-post-wide.gif);
		background-size: 2em 1em;
		width: 2em;
		height: 1em;
	}

.sword-holder {
	position: absolute;
	background-image: url(../img/sword-holder.gif);
	background-size: 2em 1em;
	width: 2em;
	height: 1em;
	bottom:0em;
}
.candles {
	position: absolute;
	background-image: url(../img/candles.gif);
	background-size: 0.5em;
	width: 0.5em;
	height: 0.5em;
}
.armory {
	position: absolute;
	background-image: url(../img/armory-spritesheet.gif);
	background-repeat:  no-repeat;
	background-size: 4em 2em;
	width: 0.5em;
	height: 0.5em;
	z-index: 12;

	/*cursor: pointer;
	pointer-events: auto;*/
}
	/*.armory:hover {
		border: 0.05em solid red;
	}
*/
	.armory.item1 {
		background-position:  0em 0em;
		left: 6.2em;
		bottom: -0.04em;
	}

	.armory.item2 {
		background-position:  -0.5em 0em;
		left: 5.05em;
		bottom: 2em;

	}

	.armory.item3 {
		background-position:  -1em 0em;
		left: 5.8em;
		bottom: -0.04em;
		transform: rotate(-30deg);
	}
		.armory.item3 label {
			transform: rotate(30deg); 
			left: 2em;
		}

	.armory.item4 {
		background-position:  -1.5em 0em;
		left: 1.25em;
		bottom: 2em;
	}

	.armory.item5 {
		background-position:  -2em 0em;
		left: 8.3em;
		bottom: 2em;
	}

	.armory.item6 {
		background-position:  -2.5em 0em;
		left: 4.5em;
		bottom: -0.04em;
		transform: rotate(30deg); 
	}
		.armory.item6 label {
			transform: rotate(-30deg); 
			left: -1em;
		}

	.armory.item7 {
		background-position:  -3em 0em;
		left: 5em;
		bottom: 2.5em;
	}

	.armory.item8 {
		background-position:  -3.5em 0em;
		left: 8.2em;
		bottom: 0.5em;
		transform: rotate(25deg);
	}

	.armory.item9 {
		background-position:  0em -0.5em;
		left: 8.4em;
		bottom: 2.5em;

		transform:scaleX(-1);
	}
	.armory.item10 {
		background-position:  -0.5em -0.5em;
		left: 3.6em;
		bottom: -0.04em;
		
	}
	.armory.item11 {
		background-position:  -1em -0.5em;
		left: 1.25em;
		bottom: 2.5em;
	}
	.armory.item12 {
		background-position:  -1.5em -0.5em;
		left: 0.7em;
		bottom: 0.4em;
		transform: rotate(-135deg);
	}
		.armory.item12 label {
			left: -1em;
			transform: rotate(135deg);
		}
	.armory.item13 {
		background-position:  -2em -0.5em;
		left: 1.05em;
		bottom: 0.5em;
		transform: rotate(-135deg);
	}
	.armory.item14 {
		background-position:  -2.5em -0.5em;
		left: 1.25em;
		bottom: 2.5em;
		transform:scaleX(-1);
	}
	.armory.item15 {
		background-position:  -3em -0.5em;
		left: 8.75em;
		bottom: 0.5em;
		transform:rotate(-135deg);
	}
	.armory.item16 {
		background-position:  -3.5em -0.5em;
		left: 8.55em;
		bottom: 0.5em;
		transform:rotate(-135deg);
	}
	.armory.item17 {
		background-position:  0em -1em;
		left: 3.1em;
		bottom: -0.04em;
	}
	.armory.item18 {
		background-position:  -0.5em -1em;
		left: 6.7em;
		bottom: -0.04em;
	}
	.armory.item19 {
		background-position:  -1em -1em;
		left: 6.7em;
		bottom: 0.3em;
	}
	.armory.item20 {
		background-position:  -1.5em -1em;
		left: 4em;
		bottom: 0.4em;
		z-index:13;
	}
	.armory.item21 {
		background-position:  -2em -1em;
		left: 7.7em;
		bottom: 0.4em;
		transform: rotate(-135deg);
	}
	.armory.item22 {
		background-position:  -2.5em -1em;
		left: 2.5em;
		bottom: -0.04em;
	}
	.armory.item23 {
		background-position:  -3em -1em;
		left: 5.1em;
		bottom: 2.5em;
		transform: scaleX(-1); 
	}
		.armory.item23 label {
			transform: scaleX(-1); 
		}
	.armory.item24 {
		background-position:  -3.5em -1em;
		left: 9.25em;
		bottom: 0.05em;
		transform: rotate(30deg);
	}
	.armory.item25 {
		background-position:  -0em -1.5em;
		left: 7.9em;
		bottom: 0.45em;
		transform: rotate(45deg);
	}
	.armory.item26 {
		background-position:  -0.5em -1.5em;
		left: 4.9em;
		bottom: 0.35em;
	}
	.armory.item27 {
		background-position:  -1em -1.5em;
		left: 5.35em;
		bottom: 0.35em;
	}
	.armory.item28 {
		background-position:  -1.5em -1.5em;
		left: 8.2em;
		bottom: 2.5em;
	}
	.armory.item29 {
		background-position:  -2em -1.5em;
		left: 4em;
		bottom: 0em;
	}
	.armory.item30 {
		background-position:  -2.5em -1.5em;
		left: 8em;
		bottom: -0.18em;
		transform:rotate(-35deg);
	}
	.armory.item31 {
		background-position:  -3em -1.5em;
		left: 1.7em;
		bottom: 0.45em;
		transform: rotate(45deg);
	}
	.armory.item32{
		background-position:  -3.5em -1.5em;
		left: 1.35em;
		bottom: 0.45em;
		transform: rotate(45deg);
	}

.armory label {
	background-color: white;
	position: absolute;
	display: block;
	padding: 0.25em;
	top: -2em;
	text-align: center;
	cursor: pointer;
}

.messagebox {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
	width: 1em;
	height: 1em;
	/*background: rgba(1,0,0,0.5);*/
	border: 0.025em solid rgba(0,0,0,0);
	z-index: 100;
}
	.messagebox:hover {
		border: 0.025em solid orange;
	}
	.messagebox.small {
		width:0.5em;
	}

	.messagebox label {
		background-color: #edd6c6;
		pointer-events:none;
		display: block;
		padding: 0.25em;
		text-align: center;
	}



.level-end-edge {
	position: absolute;
	background-image: url('../img/level-end-edge.gif');
	background-size: 0.5em;
	/*background-color: black;*/
	background-repeat: repeat-y;
	height: 100%;
	width: 0.5em;
	z-index: 1;
}
.level-end {
	position: absolute;
	background-color: black;
	width: 12em;
	height: 100%;
	z-index: 1;
}

.tombstone {
	position: absolute;
	background-image: url(../img/tombstone.gif);
	background-size: 1em;
	width:1em;
	height: 1em;
	z-index: 2;
}

.door.outside {
	position: absolute;
	background-color:#000;
	width: 0.5em;
	height: 1em;
	z-index: 10;
}

.door.inside {
	position: absolute;
	background-image: url(../img/door-inside.gif);
	background-size: 2em;
	width: 2em;
	height: 1em;
	z-index: 10;
}

.rock1 {
	position: absolute;
	background-image: url(../img/rock1.gif);
	background-size: 0.5em;
	width:0.5em;
	height: 0.5em;
	z-index: 10;
}

.brick {
	position: absolute;
	background-image: url('../img/brick1.gif');
	background-size: 0.5em;
	border-left: solid black 0.025em;
	border-right: solid black 0.025em;
	z-index: 10;
}

.moving-log {
	-webkit-animation: movelog 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation: movelog 6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-webkit-keyframes movelog {
    from {bottom: -40%;}
    to {bottom: 100%;}
}

@keyframes movelog {
    from {bottom: -40%;}
    to {bottom:  100%;}
}

.teleporter {
	position: absolute;
	width:2em;
	height: 1em;
	/*background: red;
	z-index: 100;
	opacity: 0.5;*/
}

.water {
	position: absolute;
	background: blue;
	opacity: 0.5;
	z-index: 30;
}

.turtle {
	position: absolute;
	width: 1em;
	height: 1em;
	background-image: url(../img/turtle.gif);
	background-size: 1em;
	z-index: 21;
	margin-left: 0em;

	-webkit-animation: moveturtle 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation: moveturtle 30s;
	animation-iteration-count: infinite;
	timing-function: linear;
}
	
.turtle.swim {
}	

@-webkit-keyframes moveturtle {
    0% {margin-left: 0em; margin-bottom:0em; transform: rotate(0deg) scaleX(-1);}
    10% {margin-left: 2.5em; margin-bottom:0.5em; transform: rotate(-20deg) scaleX(-1)}
	20% {margin-left: 3em; margin-bottom:-1em; transform: rotate(0deg) scaleX(-1);}
	22% {margin-left: 3.2em; margin-bottom:-1.5em; transform: rotate(0deg) scaleX(1);}
	30% {margin-left: 2.8em; margin-bottom:-2em; transform: rotate(10deg) scaleX(1);}
	40% {margin-left: 0.5em; margin-bottom:-2em; transform: rotate(0deg) scaleX(1);}
	42% {margin-left: 0em; margin-bottom:-2em; transform: rotate(0deg) scaleX(-1);}
	60% {margin-left: 5em; margin-bottom:-1em; transform: rotate(0deg) scaleX(-1);}
	65% {margin-left: 5.5em; margin-bottom:0em; transform:rotate(0deg) scaleX(1);}
	80% {margin-left: 4em; margin-bottom:0.5em; transform: rotate(20deg) scaleX(1);}
    90% {margin-left: 2em; margin-bottom:-1em; transform: rotate(0deg) scaleX(1);}
	95% {margin-left: -0.5em; margin-bottom:-1em; transform: rotate(0deg) scaleX(1);}
    100% {margin-left: 0em; margin-bottom:0em; transform: rotate(0deg) scaleX(-1);}
}

@keyframes moveturtle {
    0% {margin-left: 0em; margin-bottom:0em; transform: rotate(0deg) scaleX(-1);}
    9% {margin-left: 0em; margin-bottom:0em; transform: rotate(0deg) scaleX(-1);}
    10% {margin-left: 2.5em; margin-bottom:0.5em; transform: rotate(-20deg) scaleX(-1)}
	20% {margin-left: 3em; margin-bottom:-1em; transform: rotate(0deg) scaleX(-1);}
	21% {margin-left: 3.2em; margin-bottom:-1.5em; transform: rotate(0deg) scaleX(1);}
	30% {margin-left: 2.8em; margin-bottom:-2em; transform: rotate(10deg) scaleX(1);}
	40% {margin-left: 0.5em; margin-bottom:-2em; transform: rotate(0deg) scaleX(1);}
	42% {margin-left: 0em; margin-bottom:-2em; transform: rotate(0deg) scaleX(-1);}
	60% {margin-left: 5em; margin-bottom:-1em; transform: rotate(0deg) scaleX(-1);}
	61% {margin-left: 5.5em; margin-bottom:0em; transform:rotate(0deg) scaleX(1);}
	80% {margin-left: 4em; margin-bottom:0.5em; transform: rotate(20deg) scaleX(1);}
    90% {margin-left: 2em; margin-bottom:-1em; transform: rotate(0deg) scaleX(1);}
	95% {margin-left: -0.5em; margin-bottom:-1em; transform: rotate(0deg) scaleX(1);}
    100% {margin-left: 0em; margin-bottom:0em; transform: rotate(0deg) scaleX(-1);}
}

#contactButtonContainer p {
	color: red;
}