.thermometer-detailed {
	width:70px;
	height:300px;
	position: relative;
	margin: auto;
	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-detailed .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-detailed .progress {
	height:0%;
	width:100%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
	position: absolute;
	bottom:0;
	left:0;
	margin-bottom: 0;
	border-radius: 0;
	overflow: initial;
}

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

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

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



.thermometer-detailed.horizontal {
	/*margin:100px auto;*/
	margin:50px auto;
}

.thermometer-detailed.horizontal {
	width:350px;
	height:70px;
	width: 100%;
}

.thermometer-detailed.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-detailed.horizontal .progress {
	height:100%;
	width:0%;
}

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

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

}

.thermometer-detailed.horizontal .goal .amount {
	padding: 50px 5px 0 5px;
    bottom: unset;
    border-left: 0;
    border-right: 1px solid black;
    right: 0;
}
.thermometer-detailed.horizontal .progress .amount {
	border-left:0;
	border-top:0;
	border-right:1px solid;
}


/* DETAILED COLORS */
.thermometer-detailed.giving-blue .progress {
	background-color: rgb(0, 93, 185);
	background-color: rgba(0, 93, 185, .6);
}
.thermometer-detailed.giving-blue .progress .amount {
	color: rgb(0, 93, 185);
	border-color: rgb(0, 93, 185);
}
.thermometer-detailed.giving-green .progress {
	background-color: rgb(0, 160, 147);
	background-color: rgba(0, 160, 147, .6);
}
.thermometer-detailed.giving-green .progress .amount {
	color: rgb(0, 160, 147);
	border-color: rgb(0, 160, 147);
}
.thermometer-detailed.giving-purple .progress {
	background-color: rgb(97, 39, 158);
	background-color: rgba(97, 39, 158, .6);
}
.thermometer-detailed.giving-purple .progress .amount {
	color: rgb(97, 39, 158);
	border-color: rgb(97, 39, 158);
}









/* BASIC THERMOMETER */
/* HORIZONTAL */
.thermometer {
	height: 24px; /* 20 --> 30 w/ 8 padding works well */
	position: relative;
	background: #888; /* Default: #555 */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 0px; /* 10 --> 8 w/ 30 height works well */
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	margin-bottom: .5em;
}
.thermometer .thermometer-progress {
	display: block;
	height: 100%;
	border-radius: 4px;
	background-color: rgb(40,135,26);
	box-shadow: 
		inset 0 2px 9px  rgba(255,255,255,0.3),
		inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: unset;
	/*color: black;*/
	color: white;

	line-height: 1.75;
	font-family: Trebuchet MS;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
	/*transition: width .6s ease;*/
}
.thermometer .thermometer-progress > span {
	padding: 0 1em;
}


/* VERTICAL */
.thermometer-vertical {
	height: 300px;
	width: 30px;
	position: relative;
	background: #888;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 0px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	/*margin: 0 auto .5em;*/
	margin: 0 auto;
}
.thermometer-vertical .thermometer-progress {
	height:0%;
	width:100%;
	background-color: rgb(40,135,26);
	position: absolute;
	bottom:0;
	left:0;
	margin-bottom: 0;
	border-radius: 4px;
	overflow: initial;
	white-space: nowrap;
	font-family: Trebuchet MS;
	font-weight: bold;
	/*transition: height .6s ease;*/
}
.thermometer-vertical .thermometer-progress > span {
	display: inline-block;
	position: absolute;
	left: 40px;
	background-color: white;
}

/* ROUND */
.thermometer.thermometer-round, .thermometer-vertical.thermometer-round {
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}
.thermometer-round .thermometer-progress {
	border-radius: 20px;
}


/* COLORS */
.giving-blue .thermometer-progress {
	background-color: rgb(0, 93, 185);
	/*background-color: rgba(0, 93, 185, .7);*/
}
.giving-green .thermometer-progress {
	background-color: rgb(0, 132, 132); 
	/*background-color: rgba(0, 160, 147, .7);*/
}
.giving-purple .thermometer-progress {
	background-color: rgb(97, 39, 158);
	/*background-color: rgba(97, 39, 158, .7);*/
}

/*.thermometer.giving-blue .thermometer-progress, .thermometer.giving-purple .thermometer-progress {
	color: white;
}*/