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

body {
	background-image: url("../img/backgr.jpg");
	background-repeat: repeat;
}

main {
	height: 100%;
	width: 100%;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: minmax(250px, 1fr) 683px minmax(250px, 1fr);
	grid-template-rows: 1fr 239px;
	grid-template-areas:
	"map map map"
	"info tacho buttons";
}

@media only screen and (orientation: portrait) {
	main{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 250px 239px;
		grid-template-areas:
		"map map"
		"info buttons"
		"tacho tacho";
	}
}

#map-panel {
	grid-area: map;
	/*position: absolute;*/
	/*bottom: 245px;*/
	left: 0px;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.info_panel {
	grid-area: info;
	margin-top: 5px;
	margin-left: 15px;
}

.info_table {
	color: blue;
	font-size: 105%;
	font-weight: bold;
}

#tacho {
	grid-area: tacho;
	justify-self: center;
	height: 239px;
	width: 683px;
	position:relative;
	top: 0px;
	left: 0px;
	background-image: url("../img/tacho/tacho.png");
	background-repeat: no-repeat
}

.bottons {
	grid-area: buttons;
	margin-top: 2px;
	margin-right: 15px;
}

.button {
	cursor: pointer;
}

.needle {
	position: relative;
}

#rpm_needle {
	top: 126px;
	left: 113px;
}

#rpm_line_needle {
	position: relative;
	top: 91px;
	left: 113px;
}

#kmh_needle {
	top: 121px;
	left: 141px;
}

#kmh_line_needle {
	position: relative;
	top: 86px;
	left: 141px;
}

.clock {
	position: relative;
	top: 181px;
}

#clock_digit_1 {
	left: -289px;
}

#clock_digit_2 {
	left: -293px;
}

#clock_colon {
	left: -297px;
}

#clock_digit_3 {
	left: -301px;
}

#clock_digit_4 {
	left: -305px;
}