* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#game_start {
    position: absolute;
    /*left: 50%;
    top: 50%;*/
    z-index: 99;
/*    transform: translate(-50%, -50%);*/
    width: 320px;
    height: 240px;
    cursor: pointer;
    background: url('images/start.jpg');
    background-size: cover;
}

body          { font-family: Arial, Helvetica, sans-serif; }
#stats        { display: none; }
#controls     { display: none; }
#controls th  { text-align: right; vertical-align: middle; }
#instructions { display: none; }

/*#racer        { position: relative; z-index: 0; width: 640px; height: 480px; border: 2px solid black; }*/
/*#canvas       { position: absolute; z-index: 0; width: 640px; height: 480px; z-index: 0; background-image: url('images/preview.jpg'); background-size: 680px auto; background-position: center bottom;}*/


#racer        { position: relative; z-index: 0; width: 320px; height: 300px;}
#canvas       { position: absolute; z-index: 0; width: 320px; height: 240px; z-index: 0; 
	background-image: url('images/preview.jpg'); 
/*	background-color: #73BFE6;*/
	background-size: 680px auto; 
	background-size: cover;
	border-radius: 8px;}

/*
#racer        { position: relative; z-index: 0; width: 320px; height: 400px; border: 2px solid black; }
#canvas       { position: absolute; z-index: 0; width: 320px; height: auto; z-index: 0; background-image: url('images/preview.jpg'); background-size: 680px auto; background-position: center bottom;}
*/


#mute         { display: none; }
#mute.on      { background-position: -32px 0px; }
#hud                   { 
	position: absolute; z-index: 1; 
/*	width: 640px; */
	width: 100%;
	padding: 5px 0; 
	font-family: Verdana, Geneva, sans-serif; 
	font-size: 0.8em; 
	background-color: rgba(255,255,255,0.4); color: black; 
/*	border-bottom: 2px solid black; */
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

#hud .hud              { 
/*	background-color: rgba(255,255,255,0.6); */
	padding: 5px; 
/*	border: 1px solid black; */
	margin: 0 5px; 
	transition-property: background-color; 
	transition-duration: 2s; 
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 2s; 
}
#hud #speed            { float: right; }
#hud #current_lap_time { float: left;  }
#hud #last_lap_time    { float: left; display: none;  }
#hud #fast_lap_time    { display: none; width: 12em;  margin: 0 auto; text-align: center; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; }
#hud .value            { color: black; font-weight: bold; }
#hud .fastest          { background-color: rgba(255,215,0,0.5); }

/*EVA mobile buttons*/

#mobilenavigation{ display: flex; justify-content: center;}
#TURNLEFT { width: 160px; height: 100px; background-size: cover; background-image: url('images/left_button.png');}
#TURNRIGHT { width: 160px; height: 100px; background-size: cover; background-image: url('images/right_button.png');}
#STOP { width: 320px; height: 80px; background-size: cover; background-image: url('images/brakes.png'); margin-top: 10px;}