/* Open Sans Light */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/OpenSans-Light.ttf') format('truetype')
}
/* Open Sans Extra Bold */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype')
}
body{
  background-color: #000;
  font-family: 'Open Sans';
  font-weight:800;
}
#speedoOuter{
	position: relative;
	display: block;
	width:100%;
	height:750px;
	margin-top: 50px;
}
#site-title h1 {
	
	padding-top: 27px !important;
}
.speedoContainer{
  position: relative;
  left:50%;
  top:0px;
  width:600px;
  height:600px;
  margin-left:-300px;
  display: block;
	clear: both;

}
#svgContainer{
  position: absolute;
  left:50%;
  top:50%;
  width:750px;
  height:750px;
  margin-left:-375px;
  margin-top:-375px;
}
.speedoContainer{
	background-image: url(images/Speedo-Earth2000.png);
}
.pivot{
  position: absolute;
  width:128px;
  height:128px;
  top:50%;
  left:50%;
  margin-top:-64px;
  margin-left:-64px;
}
#needle{
  position: absolute;
  width:80px;
  height:200px;
  left:23px;
  bottom:58px;
  background-image: url(images/needleEarth.png);
  transform-origin: 40px 193px;
  transform: rotate(-90deg);
}
.pivotCover{
  position: absolute;
  width:138px;
  height:138px;
  top:50%;
  left:50%;
  margin-top:-69px;
  margin-left:-69px;
  background-image: url(images/pivotCoverEarth.png);
}
.milometerContainer{
  color:#ccc;
  text-align: center;
  font-size: 15px;
  position: absolute;
  width:270px;
  height:100px;
  border:0px dotted grey;
  left: 165px;
  bottom:100px;
}
.milometerBox{
  position: relative;
  width:41px;
  height:41px;
  display: inline-block;
  background-color: #000;
  margin: 3px;
  margin-top: 15px;
  border:1px solid #0a5508;
}
h1{
	padding: 0px !important;
}
.milometerBox h1{
  	opacity:1;
	font-family: 'Open Sans Light';
    color:#45f274;
	font-size: 35px;
	padding: 0px;
	padding-top: 2px !important;
	margin: 0px;
	display:block;
	font-family: "Open Sans", sans-serif;
	font-weight:300;
	line-height:35px;
}

.speedoIncrement{
  position: absolute;
  width:8px;
  height:174px;
  border:0px dotted grey;
  background-image: url(images/speedo-increment-grey.png);
  background-repeat: no-repeat;
  background-position: top middle;
  bottom:300px;
  left:296px;
  transform-origin: 4px 174px;
  z-index: 50;
  opacity: 0.2;
}
.speedoIncrementOn{
  position: absolute;
  width:8px;
  height:174px;
  border:0px dotted grey;
  background-image: url(images/speedo-increment-green.png);
  background-repeat: no-repeat;
  background-position: top middle;
  bottom:300px;
  left:296px;
  transform-origin: 4px 174px;
  z-index: 100;
  opacity: 0;
}
#increment1{
	display: none;
}

.speedoIncrementContainer{
  position: absolute;
  left:0px;
  top:0px;
  width:600px;
  height:600px;
  transform: rotate(-90deg);
  border:0px dotted grey;
}
.startReset{
  font-family: 'Open Sans';
  font-weight:800;
  position: relative;
  padding:15px;
  text-align:center;
  font-size: 30px;
  background-color: red;
  color:black;
  margin: 10px;
  margin-right: 0px;
  cursor:pointer;
  display: inline-block;
}
.buttonsPanel{
	position: absolute;
	width:210px;
	height:246px;
	bottom:-25px;
}
#buttonsLeft{
	left: -60px;
	background-image: url(images/buttonsLeft.png);
}
#buttonsRight{
	right: -60px;
	background-image: url(images/buttonsRight.png);
}
#btnPlay, #btnEarth, #btnAir, #btnFire, #btnWater, #btnReset{
	position: absolute;
	opacity: 0.2;
	cursor: pointer;
	margin: 0px;
	padding: 0px;
	background: ;
}
#buttonsLeft img, #buttonsRight img{
	position: absolute;
}
.button1{left: 8px;top:9px;}
.button2{left: 46px;top:82px;}
.button3{left: 105px;top:145px;}

.button4{left: 8px;top:146px;}
.button5{left: 67px;top:83px;}
.button6{left: 117px;top:10px;}

#playUp, #airUp, #waterUp, #fireUp, #resetUp{
	opacity: 0;
}
#earthUp{
	opacity: 1;
}
#houseTitle{
	position: absolute;
	border:0px dotted grey;
	width:300px;
	height:50px;
	color:white;
	left: 50%;
	margin-left: -150px;
	bottom:20px;
	text-align: center;
}
.title{
	font-weight: 800;
	font-size: 23px;
	display: block;
	padding-bottom: 10px;
}
.subTitle{
	font-size: 15px;
	font-weight: 300;
}
#sound{
	position: relative;
	display: block;
	float: right;
	top: 0px;
	right:0px;
	width: 49px;
	height:38px;
	margin: 15px;
}
#speedoRing{
	position: absolute;
	width:600px;
  	height:600px;
	left: 0px;
	top:0px;
	border: 0px solid red;
	background-image: url(images/SpeedoRingEarth.png);
	background-repeat: no-repeat;
	opacity:1;
}
#glassCover{
	position: absolute;
	width:495px;
  	height:495px;
	left: 130px;
	top:118px;
	border: 0px solid red;
	background-image: url(images/glassCover.png);
	background-repeat: no-repeat;
	opacity:1;
	background-color:;
	border-radius: 50%;
}
#counter{
	position:absolute;
	width:185px;
	height:30px;
	top:499px;
	left:270px;
	font-size:40px;
	font-weight:300;
	padding:10px;
	text-align:center;
	line-height:30px;
	letter-spacing: 30px;
	padding-left:15px;
	color:#45f274;
	background-position:5px 4px;
}