body, html {
	background: black;
/* 	color: white; */
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	
/* 	height: 700px; */
	
	/* -webkit-transition: all .3s ease-out; */
	/* overflow-x: hidden; */
}
body.standalone {
/* 	display: none; */
}

.positiontext{
	display: none;
	position: absolute;
	top: -16px;
	left: 0;
	font-size: 14px;
}
.dialog{
	position: fixed;
	top: 20px;
	left: 50%;
	color: red;
	font-size: 32px;
}
#playarea {
	background: #b6cde8 -webkit-linear-gradient(rgba(121,191,255,0.2) 0%, rgba(121,191,255,1) 100%);
/*
	height: 600px;
	width: 900px;
*/
	height: 100%;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}


/*  Animations  */

@-webkit-keyframes moveright{
	0% {-webkit-transform: translate(0px)}
	100% {-webkit-transform: translate(200px)}
}

@-webkit-keyframes bob{
	0% {margin-top: 0px; }
	100% {margin-top: 20px; }
}

@-webkit-keyframes friendmove{
	0% {-webkit-transform: translateX(0px)}
	100% {-webkit-transform: translateX(50000px)}
}

.environment {
	width: 100000px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 2.5s cubic-bezier(0.125, 0.510, 0.000, 0.685);
}

.bg_1 {
	width: 100000px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 2.5s cubic-bezier(0.125, 0.510, 0.000, 0.685);

}

.bg_2 {
	width: 100000px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 2.5s cubic-bezier(0.125, 0.510, 0.000, 0.685);

}

.bg_3 {
	width: 100000px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 2.5s cubic-bezier(0.125, 0.510, 0.000, 0.685);
	background-image: url(../images/octobackground.jpg);

}

.bg_4 {
	width: 100000px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 2.5s cubic-bezier(0.125, 0.510, 0.000, 0.685);
/* 	background-image: url(../images/octobackground.jpg); */
	background-size: contain;
	
	
}

.player {
	width: 175px;
	height: 150px;
	position: relative;
	top: 300px;
	left: 40%;
	-webkit-transition: top 1s cubic-bezier(0.125, 0.510, 0.000, 0.685);
/* 	outline: solid 1px black; */
	background-size: contain;
	background-color: transparent;
	background-image: url(../images/GupSubmarine.png);
	background-repeat: no-repeat;
}
/* .player {position:fixed} */

.friend{
	-webkit-animation: friendmove 200s linear, bob .6s infinite alternate;
	background-image: url(../images/reg_fish.png);
	background-size: contain;
	background-color: transparent;
	
	height: 75px;
	width: 175px;
	display: none;
	position: absolute;
	box-shadow: 0px 0px 0px yellow;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.friend.contact{
	box-shadow: 0px 0px 120px yellow;
}

.friend.special {
	background-image: none;
}

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

.friend.paused {
	outline: solid 2px red;
}
/*
.moving {
	-webkit-animation: friendmove 800s linear;

}
*/
.speedmeter{
	position:fixed; top: 0px; right:0; z-index:999; height:10px; width:10px; background-color:red;
	-webkit-transition: width .3s linear;
	-moz-transition: width .3s linear;
	transition: width .3s linear;	
}


@-webkit-keyframes bubble {
	0%{top: 50px}
	100% {top: -700px}
}

.bubble {
	width: 10px;
	height: 10px;
	border-radius: 10px 10px;
	border: solid 1px gray;
	position: absolute;
	-webkit-animation: bubble 2s linear;
}
.bubble:first-child {
	-webkit-animation: bubble 1s .2s infinite linear;
}
.bubble.fast {
	-webkit-animation: bubble .3s infinite linear;
}
.bubble.fast:first-child {
	-webkit-animation: bubble .3s .1s infinite linear;
}