@CHARSET "ISO-8859-1";


div.gauge {
    position:relative;
	width:400px;
	height:20px;
	border:1px solid #c8c8c8;
	cursor:pointer;
	background-image: linear-gradient(bottom, rgb(237,237,237) 0%, rgb(250,250,250) 67%);
	background-image: -o-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(250,250,250) 67%);
	background-image: -moz-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(250,250,250) 67%);
	background-image: -webkit-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(250,250,250) 67%);
	background-image: -ms-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(250,250,250) 67%);
}

div.gauge span {
  	height:100%;
  	position:absolute;
  	left:0;
  	top:0;
  	z-index:2;
}

div.gauge .blue {
	background-image: linear-gradient(bottom, rgb(47,138,212) 3%, rgb(59,167,255) 39%);
	background-image: -o-linear-gradient(bottom, rgb(47,138,212) 3%, rgb(59,167,255) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(47,138,212) 3%, rgb(59,167,255) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(47,138,212) 3%, rgb(59,167,255) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(47,138,212) 3%, rgb(59,167,255) 39%);
}

div.gauge .yellow {
	background-image: linear-gradient(bottom, rgb(207,207,60) 3%, rgb(255,247,94) 39%);
	background-image: -o-linear-gradient(bottom, rgb(207,207,60) 3%, rgb(255,247,94) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(207,207,60) 3%, rgb(255,247,94) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(207,207,60) 3%, rgb(255,247,94) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(207,207,60) 3%, rgb(255,247,94) 39%);
}

div.gauge .yellow_bright {
	background-image: linear-gradient(bottom, rgb(232,247,94) 3%, rgb(255,250,140) 39%);
	background-image: -o-linear-gradient(bottom, rgb(232,247,94) 3%, rgb(255,250,140) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(232,247,94) 3%, rgb(255,250,140) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(232,247,94) 3%, rgb(255,250,140) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(232,247,94) 3%, rgb(255,250,140) 39%);
}

div.gauge .orange{
	background-image: linear-gradient(bottom, rgb(190,90,0) 3%, rgb(255,120,0) 39%);
	background-image: -o-linear-gradient(bottom, rgb(190,90,0) 3%, rgb(255,120,0) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(190,90,0) 3%, rgb(255,120,0) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(190,90,0) 3%, rgb(255,120,0) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(190,90,0) 3%, rgb(255,120,0) 39%);
}

div.gauge .red {
	background-image: linear-gradient(bottom, rgb(184,0,0) 3%, rgb(250,5,5) 39%);
	background-image: -o-linear-gradient(bottom, rgb(184,0,0) 3%, rgb(250,5,5) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(184,0,0) 3%, rgb(250,5,5) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(184,0,0) 3%, rgb(250,5,5) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(184,0,0) 3%, rgb(250,5,5) 39%);
}

div.gauge .green_bright {
	background-image: linear-gradient(bottom, rgb(54,210,30) 3%, rgb(96,250,26) 39%);
	background-image: -o-linear-gradient(bottom, rgb(54,210,30) 3%, rgb(96,250,26) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(54,210,30) 3%, rgb(96,250,26) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(54,210,30) 3%, rgb(96,250,26) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(54,210,30) 3%, rgb(96,250,26) 39%);
}

div.gauge .green {
	background-image: linear-gradient(bottom, rgb(54,181,22) 3%, rgb(96,235,26) 39%);
	background-image: -o-linear-gradient(bottom, rgb(54,181,22) 3%, rgb(96,235,26) 39%);
	background-image: -moz-linear-gradient(bottom, rgb(54,181,22) 3%, rgb(96,235,26) 39%);
	background-image: -webkit-linear-gradient(bottom, rgb(54,181,22) 3%, rgb(96,235,26) 39%);
	background-image: -ms-linear-gradient(bottom, rgb(54,181,22) 3%, rgb(96,235,26) 39%);
}


/*-- Transition --*/
@-webkit-keyframes fill {
  0%   { width:0; }
  100% {}
}


@keyframes fill {
  0%   { width:0; }
  100% {}
}
.gauge:hover span{
  -webkit-animation: fill 1s ease-in-out; /* Safari 4+ */
  -moz-animation:    fill 1s ease-in-out; /* Fx 5+ */
  -o-animation:      fill 1s ease-in-out; /* Opera 12+ */
  animation:         fill 1s ease-in-out; /* IE 10+ */
}