* { margin: 0; padding: 0;}

body {
	width: 1020px;
	height: 700px;
	margin: 0 auto;
	padding-top: 75px;
	font-family: calibri;
	background: #DDD;
	
}

.col-viewport{
	overflow: hidden;
	position: relative;
	height: 500px;
}

.col-bg.main{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0; 
	right: 0;
	background-image: url(img/bg.png);
	background-repeat: repeat-x;
	height: 100%;
}
.col-bg.grass {
	position: absolute;
	bottom: 0;
	left: 0;
	right: -500px;
	height: 8px;
	background: url(img/grass.png);
	background-repeat: repeat-x;
	opacity: 0.4;
}

.col-game {
	position: relative;
	border: 0;
	left:0;
	display:block;
	width: 2000px;
	height: 100%;
}

.col-game:active, .col-game:focus{
	outline: 0;
}

.col-player{
	position: absolute;
	width: 15px;
	height: 25px;
	bottom: 0;
	left: 40px;
	background-image: url(img/player.png);
	background-size: cover;
}

.col-platform{
	height: 1px;
	border-bottom: 1px solid gray;
}


.box{
	position: absolute;
	display:block;
	bottom: 0;
	left: 500px;
	height: 20px;
	width:20px;
	background: white;
}


.debug{
	margin-top: 20px;
	background: black;
	padding: 10px;
	font-size: 12px;
	color: white;
}