.thermometer {
  /*float: left;
  margin:0 50px;*/
  margin:0 50px;
}
.thermometer {
  width:70px;
  height:300px;
  background: #ddd;
  border:1px solid #aaa;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;

  -webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}

.thermometer .track {
  height:280px;
  top:10px;
  width:20px;
  border: 1px solid #aaa;
  position: relative;
  margin:0 auto;
  background: rgb(255,255,255);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
  background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background-position: 0 -1px;
  background-size: 100% 5%;
}

.thermometer .progress {
  height:0%;
  width:100%;
  background: rgb(20,100,20);
  background: rgba(20,100,20,0.6);
  position: absolute;
  bottom:0;
  left:0;
}

.thermometer .goal {
  position:absolute;
  top:0;
}

.thermometer .amount {
  display: inline-block;
  padding:0 5px 0 60px;
  border-top:1px solid black;
  font-family: Trebuchet MS;
  font-weight: bold;
  color:#333;
}

.thermometer .progress .amount {
  padding:0 60px 0 5px;
  position: absolute;
  border-top:1px solid #060;
  color:#060;
  right:0;
}



.thermometer.horizontal {
  margin:100px auto;
}

.thermometer.horizontal {
  width:350px;
  height:70px;
}

.thermometer.horizontal .track {
  width:90%;
  left:0;
  height:20px;
  margin:14px auto;

  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
  background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:      -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:     -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:    -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:   linear-gradient(to right, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background-size: 5% 100%;
}

.thermometer.horizontal .progress {
  height:100%;
  width:0%;
}

.thermometer.horizontal .goal {
  left:100%;
  height:100%;
}

.thermometer.horizontal .amount {
  bottom:0;
  position: absolute;
  padding:0 5px 50px 5px;
  border-top:0;
  border-left:1px solid black;

}

.thermometer.horizontal .progress .amount {
  border-left:0;
  border-top:0;
  border-right:1px solid #060;
}