@charset "UTF-8";
body {
  background-color: #000000;
  background: url(../resources/images/background_green_hicomp.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.loading_img {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: bold 18px arial;
  color:#FF8040;
}
.cpm_gauge{
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
}
.countdown_timer {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-575px);
  width: 400px;
  font:  9px arial;
  color:#FF8040;
}
.gauge_legend {
  position: absolute;
  top: 230px;
  left: 50%;
  transform: translateX(-51px);
  width: 400px;
  font:  14px arial;
  color:#FF8040;
}
.gauge_text {
  position: absolute;
  top: 200px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 50px;
  font: bold 18px arial;
  color:#00FF00;
}
.gauge_title {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  font: bold 15px arial;
  text-align: center;
  color:#FF8040;
}
.main_graph {
  position: absolute;
  top: 580px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 560px;
}
.longterm_graph {
  position: absolute;
  top: 2400px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 560px;
}
.map {
  position: absolute;
  top: 3020px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.mouter {
  width: 100%;
  height: 100%;
  max-width: 1150px; 
  max-height: 600px;
}
.minner {
  height: 0px;
  padding-bottom: 56.25%;
}
.history {
  position: absolute;
  top: 1600px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 1150px;
  height: 600px;
  border: 0px;
}
.key {
	position: absolute;
	top: 3340px;
	left: 50%;
	/* bring your own prefixes */
  transform: translate(-50%, -50%);
	font-family: arial;
	font-size: 14px;
	color:#FF8040;
}
.graphtoday {
  position: absolute;
  top: 325px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 450px;
  border: 0px;
}
.graphtoday64 {
  position: absolute;
  top: 1180px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.graphlasthour {
  position: absolute;
  top: 1800px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.graphweek {
  position: absolute;
  top: 870px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.graphmonth {
  position: absolute;
  top: 1490px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.graphquarter {
  position: absolute;
  top: 2110px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.graphyear {
  position: absolute;
  top: 2740px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1150px; 
  max-height: 600px;
  border: 0px;
}
.textheader {
  position: absolute;
  top: 45px;
  left: 50%;
  padding: 2px; 
  text-align: center;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 1150px;
  font: 14px arial;
  color:#FF8040;
  background-color: #505050; 
}
.textheadergreen {
  position: absolute;
  left: 50%;
  padding: 2px; 
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 1150px;
  font: 14px arial;
  color:#00FF00;
  background-color: #505050; 
}
.text {
  position: absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 1150px;
  font: 14px arial;
  color:#FF8040;
}
.linktext {
  font: 14px arial;
  color:#FF8040;
}
.infotext {
  font: 14px arial;
  color:#FF8040;
}
.manualtext {
  font: 14px arial;
  color:#000000;
}
.imagetext {
  text-align: center;
  font: 14px arial;
  color:#FF8040;
}
.infotitle {
  text-align: center;
  font: bold 18px arial;
  color:#00FF00;
}
.contact {
  position: absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
.pdf {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.graphtext {
  font: 14px arial;
  color:#FFFFFF;
}
.container {
   position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
	top: 80px;
    width: 700px;
}
.thumbnail {
  position: relative;
  left: 80px;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  float: left;
  padding: 10px;
}
.ifooter {
  position: absolute;
  top: 3390px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  font: bold 15px arial;
  color:#FF8040;
}
.gc_pic {
  position: absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 800px; 
  max-height: 225px;
}
.dfooter {
  position: absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  font: bold 15px arial;
  color:#FF8040;
}
.map_title {
  position: absolute;
  top: 2690px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  font: bold 18px arial;
  color:#FF8040;
}
.afooter {
  position: absolute;
  top: 3060px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  font: bold 15px arial;
  color:#FF8040;
}
.counter {
  position: absolute;
  top: 3420px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  font: 11px arial;
  color:#00AA00;
}
a:link {
  color: #FF8040;
  font: 14px arial;
  text-decoration: none;
}
a:visited {
  color: #FF8040;
  text-decoration: none;
}
a:hover {
  color: #FFFF00;
  text-decoration: none;
}
a:active {
  color: #FF8040;
  text-decoration: none;
}
#navbar ul { 
	margin: 0; 
	padding: 5px; 
	list-style-type: none; 
	text-align: center; 
	background-color: #000; 
	} 
 
#navbar ul li {  
	display: inline; 
	} 
 
#navbar ul li a { 
	text-decoration: none; 
	padding: .2em 1em; 
	font: bold 15px arial;
	color: #FF8040; 
	background-color: #000; 
	} 
 
#navbar ul li a:hover { 
	color: #00FF00; 
	/*background-color: #00FF00; */
	}