/* ==================== BAR CONICAL GRAPH  ==================== */
/* ------ container ------ */
div.css_bar_graph {
	width: 490px;
	height: 250px;
	padding: 40px 20px 10px 70px;
	/* --- font --- */
	font-size: 13px;
	font-family: arial, sans-serif;
	font-weight: normal;
	color: #444444;
	background-color: #ffffff;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	/* --- css3 --- */
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

/* ------ hyperlinks ------ */
div.css_bar_graph a {
	color: #444444;
	text-decoration: none;
}

/* ------ lists ------ */
div.css_bar_graph ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

div.css_bar_graph li {
	margin: 0px;
	padding: 0px;
}

/* ==================== Y-AXIS LABELS ==================== */
/* ------ base ------ */
div.css_bar_graph ul.y_axis {
	width: 50px;
	position: absolute;
	top: 40px;
	left: 10px;
	text-align: right;
}

/* ------ labels ------ */
div.css_bar_graph ul.y_axis li {
	width: 100%;
	height: 49px; /* 50px including border */
	float: left;
	color: #888888;
	/* --- alignment correction --- */
	border-top: 1px solid transparent;
	position: relative;
	top: -13px; /* value = font height */
}

/* ==================== X-AXIS LABELS  ==================== */
/* ------ base ------ */
div.css_bar_graph ul.x_axis {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: center;
}

/* ------ labels ------ */
div.css_bar_graph ul.x_axis li {
	display: inline;
	width: 90px;
	float: left;
	font-size:12px;
}

/* ==================== GRAPH LABEL  ==================== */
/* ------ base ------ */
div.css_bar_graph div.label {
	width: 100%;
	height: 50px;
	float: left;
	margin-top: 20px;
	text-align: center;
}

div.css_bar_graph div.label span {
	font-weight: bold;
}

/* ==================== GRAPH  ==================== */
/* ------ base ------ */
div.css_bar_graph div.graph {
	width: 100%;
	height: 100%;
	float: left;
}

/* ------ grid ------ */
div.css_bar_graph div.graph ul.grid {
	width: 100%;
}

/* ------ IE grid ------ */
div.css_bar_graph div.graph li {
	width: 100%;
	height: 49px; /* 50px including border */
	float: left;
	border-top: 1px solid #e5e5e5;
}

/* ------ other browsers grid ------ */
div.css_bar_graph div.graph li:nth-child(odd) {
	width: 100%;
	height: 49px; /* 50px including border */
	float: left;
	border-top: 1px solid #e5e5e5;
	background-color: #f8f8f8;
}

div.css_bar_graph div.graph li:nth-child(even) {
	width: 100%;
	height: 49px; /* 50px including border */
	float: left;
	border-top: 1px solid #e5e5e5;
}

/* ------ bottom grid element ------ */
div.css_bar_graph div.graph li.bottom {
	border-top: 1px solid #d5d5d5;
	background-color: #eeeeee;
	height: 19px;
}

/* ==================== BARS COMMON  ==================== */
/* ------ common styles ------ */
div.css_bar_graph div.graph li.bar {
	width: 50px;
	float: left;
	position: absolute;
	bottom: 70px;
	text-align: center;
	/* --- css3 --- */
	/* --- transitions --- */
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

/* ------ bar top circle ------ */
div.css_bar_graph div.graph li.bar div.top {
	width: 100%;
	height: 20px;
	margin-top: -10px;
	/* --- css3 --- */
	-moz-border-radius: 50px/20px;
	-webkit-border-radius: 50px 20px;
	border-radius: 50px/20px;
	/* --- transitions --- */
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

/* ------ bar bottom circle ------ */
div.css_bar_graph div.graph li.bar div.bottom {
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: -10px;
	left: 0px;
	/* --- css3 --- */
	-moz-border-radius: 50px/20px;
	-webkit-border-radius: 50px 20px;
	border-radius: 50px/20px;
	/* --- transitions --- */
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

/* ------ bar top label ------ */
div.css_bar_graph div.graph li.bar span {
	position: relative;
	top: -50px;
	padding: 3px 5px 3px 5px;
	z-index: 100;
	background-color: #eeeeee;
	border: 1px solid #bebebe;
	/* --- css3 --- */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	/* --- gradient --- */
	background-image: linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',
		endColorstr='#ebebeb'); /* IE5.5 - 7 */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',
		endColorstr='#ebebeb'); /* IE8 */
	background: -ms-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb);
	/* IE9 */
	background: -moz-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb);
	/* Firefox */
	background: -o-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb);
	/* Opera 11  */
	background: -webkit-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb);
	/* Chrome 11  */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),
		color-stop(0.05, #f1f1f1), color-stop(1, #ebebeb));
	/* Chrome 10, Safari */
	/* --- shadow --- */
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
	/* --- transitions --- */
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

div.css_bar_graph div.graph li.bar:hover span {
	cursor: pointer;
	top: -60px;
	padding: 10px;
	margin: 0px;
}