/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/****************************************/
/* common styles used for v1 through v4 */
/****************************************/

@import url("http://fonts.googleapis.com/css?family=Homenaje");

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

body          { 
font-family: 'Homenaje', sans-serif;
}
#stats        { border: 2px solid black; }
#controls     { width: 28em; float: left; padding: 1em; font-size: 0.7em; display:none;}
#controls th  { text-align: right; vertical-align: middle; }
#instructions { position:absolute; 
				bottom:4em; left:50%;
				margin-left:-8.5em; width: 17em; padding: 1em; border: 1px solid black; box-shadow: 0 0 5px black; z-index:4; background:rgba(255,255,255,0.8); 
				display: none; }
#racer        { position: relative; z-index: 0; width: 100%; height: 100%;  }
#canvas       { position: absolute; z-index: 0; width: 100%; height: 100%; z-index: 0; background-color: black; }
#mute         {
 background-position:   0px 0px; width: 32px; height: 32px; background: url(images/mute.png); display: inline-block; cursor: pointer; position: absolute; bottom:1em; left:1em; 
}
#mute.on      { background-position: -32px 0px; }

#fullscreen{
	position:absolute;
	width:32px;
	height:32px;
	background:red;
	bottom:1em;
	right:1em;
	display: none;
	
}

div.text_screen {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
	z-index: 20;
	opacity: 0.9;
	background-color: black;
	position: fixed;
	top: 0px;
	display: none;
	color: white;
	font-size: 40px;
}
/*div.text_screen p {
	color: white;
	font-size: 50px;
	text-align: center;
	height: 50px;
	top: 50%;
	position: relative;
	margin-top: -25px;
}*/
div.text_screen button {
	font-size: 50px;
	background-color: white;
	color: black;
	border-radius: 10px;
}

/**************************************************/
/* rudimentary heads up display (only used in v4) */
/**************************************************/

#hud                   {
 position: absolute; 
 z-index: 1; 
 width: 100%; 
 padding: 5px 0; 
 font-size: 2em; 
 color: black; 
 display: none;
}

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
}
#hud .hud              { 
	color:#fff;
	padding: 5px; 
	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    { display: block; 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: #000;
  font-weight: bold; 
}
#hud .fastest          { background-color: rgba(255,215,0,0.5); }