#content {
    width:700px;
    margin:30px auto;
}
.thermometer {
    float: left;
    margin:0 150px;
}
.thermometer {
    width:70px;
    height:300px;
    position: relative;
    background: none;
    border:none;
}

.thermometer .track {
    height:280px;
    top:10px;
    width:20px;
    border: none;
    position: relative;
    margin:0 auto;
    background: rgb(255,255,255);
    
}

.thermometer .progress {
    height:0%;
    width:100%;
    background: #3a756d;
    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;
    color:#fff;
}

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



.thermometer.horizontal {
    margin:20px 0 0;
}

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

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

   
}

.thermometer.horizontal .progress {
    height:100%;
    width:0%;
    bottom: -16px;
}

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

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

}

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