.bargraph {
	height: 285px;
	padding-left: 40px;
	font-size: 19px;
}
.bargraph h1 {
	position: absolute;
	display: block;
	text-align: center;
	color: #999;
	left: 0;
	bottom: 10px;
	-moz-transform: rotate(270deg);
	-moz-transform-origin: bottom left;
	-ms-transform: rotate(270deg);
	-ms-transform-origin: bottom left;
	-webkit-transform: rotate(270deg);
	-webkit-transform-origin: bottom left;
	padding-right: 2px;
	margin-left: 20px;
}
.bargraph .bar-box {
	height: 210px;
	float: left;
	position: relative;
	-moz-transition-property: width, margin;
	-moz-transition-duration: 2s;
	-moz-box-reflect:below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(rgba(255,255,255,0.5)));
	-ms-transition-property: width, margin;
	-ms-transition-duration: 2s;
	-ms-box-reflect:below 1px -ms-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(rgba(255,255,255,0.5)));
	-webkit-transition-property: width, margin;
	-webkit-transition-duration: 2s;
	-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(rgba(255,255,255,0.5)));
}
.bargraph .bar-box.hide {
	width: 0!important;
	margin: 0!important;
}
.bargraph .bar-box.hide .bar {
	height: 0!important;
}
.bargraph .bar-box.hide span.value {
	bottom: 0!important;
	opacity: 0;
}
.bargraph .bar-box.hide h3 {
	opacity: 0;
}
.bargraph.bars-1 .bar-box,
.bargraph.bars-2 .bar-box,
.bargraph.bars-3 .bar-box,
.bargraph.bars-4 .bar-box {
	width: 190px;
	margin: 0 20px;
}
.bargraph.bars-5 .bar-box {
	width: 162px;
	margin: 0 15px;
}
.bargraph.bars-6 .bar-box {
	width: 140px;
	margin: 0 10px;
}
.bargraph.bars-7 .bar-box {
	width: 121px;
	margin: 0 8px;
}
.bargraph.bars-8 .bar-box {
	width: 104px;
	margin: 0 8px;
}
.bargraph.bars-9 .bar-box {
	width: 90px;
	margin: 0 8px;
}
.bargraph.bars-10 .bar-box {
	width: 80px;
	margin: 0 8px;
}
.bargraph.bars-10 .bar-box {
	width: 80px;
	margin: 0 8px;
}
.bargraph.bars-11 .bar-box {
	width: 75px;
	margin: 0 6px;
}
.bargraph.bars-12 .bar-box {
	width: 70px;
	margin: 0 5px;
}
.bargraph .bar-box h3 {
	display: block;
	position: absolute;
	bottom: -55px;
	width: 180px;
	right: 25%;
	text-align: right;
	text-shadow: 0px 0px 3px #000;
	-moz-transform-origin: bottom right;
	-moz-transform: rotate(-30deg);
	-moz-transition-property: opacity;
	-moz-transition-duration: 2s;
	-ms-transform-origin: bottom right;
	-ms-transform: rotate(-30deg);
	-ms-transition-property: opacity;
	-ms-transition-duration: 2s;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotate(-30deg);
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
.bargraph .bar-box span.value {
	-moz-transition-property: bottom, opacity;
	-moz-transition-duration: 2s;
	-ms-transition-property: bottom, opacity;
	-ms-transition-duration: 2s;
	-webkit-transition-property: bottom, opacity;
	-webkit-transition-duration: 2s;
	display: block;
	position: absolute;
	width: 100%;
	text-align: center;
}
.bargraph .bar {
	-moz-transition-property: height, background-color;
	-moz-transition-duration: 2s;
	-ms-transition-property: height, background-color;
	-ms-transition-duration: 2s;
	-webkit-transition-property: height, background-color;
	-webkit-transition-duration: 2s;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.color-1 .bargraph .bar { background-color: #abc507;}
.color-2 .bargraph .bar { background-color: #ec1559;}
.color-3 .bargraph .bar { background-color: #74c6f1;}
.color-4 .bargraph .bar { background-color: #586b7a;}
.color-5 .bargraph .bar { background-color: #94b3c5;}
.color-6 .bargraph .bar { background-color: #ff4a12;}
.color-7 .bargraph .bar { background-color: #f7ae16;}
.color-8 .bargraph .bar { background-color: #820f00;}
