@charset "utf-8";

html, body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

html {
	display: table;
}

body {
	display: table-cell;
	vertical-align: middle;
}

#gameDiv {
	position: relative;
	width: 1000px;
	height: 600px;
	background-color: #006600;
	margin: auto;
}

#mravCounter {
	padding: 20px;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}

#mravLvl {
	padding: 20px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}

#toNextLvl, #toNextMrav {
	color: #F30;
	font-size: 12px;
}

.mravec {
	width: 50px;
	height: 50px;
	background-image:url(images/mravec.png);
	position: absolute;
	z-index: 20000;
	cursor: pointer;
}

.rip {
	width: 50px;
	height: 50px;
	background-image:url(images/rip.png);
	position: absolute;
	z-index: 9;
}

.bloodshot {
	width: 50px;
	height: 50px;
	background-image:url(images/bloodshot.png);
	position: absolute;
	z-index: 9;
}

.item {
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 18000;
}

.food {
	background-image:url(images/food.png);
}

.stick {
	background-image:url(images/stick.png);
}

.mravenisko {
	text-align: right;
	font-size: 20px;
	color: #FFFFFF;
	width: 100px;
	height: 10px;
	background-size: cover; 
    background-size: 100% 100%;
	background-image:url(images/mravenisko.png);
	position: absolute;
	z-index: 16000;
}