@media screen, print {
	/* ==================== BAR GRAPH  ==================== */
	/* ------ container ------ */
	div.css_bar_graph
		{
		width: 760px;
		height: 320px;
		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;	
		border: 1px solid #d5d5d5;
		/* --- 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: 90px;
		text-align: center;
		}
	
	/* ------ labels ------ */
	div.css_bar_graph ul.x_axis li
		{
		display: inline;
		width: 90px;
		float: left;
		}
	
	/* ==================== 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;
		}
	
	/* ------ bars positions ------ */
	div.css_bar_graph div.graph li.nr_1
		{
		left: 110px;
		}
	
	div.css_bar_graph div.graph li.nr_2
		{
		left: 200px;
		}
	
	div.css_bar_graph div.graph li.nr_3
		{
		left: 290px;
		}
	
	div.css_bar_graph div.graph li.nr_4
		{
		left: 380px;
		}
	
	div.css_bar_graph div.graph li.nr_5
		{
		left: 470px;
		}
	
	div.css_bar_graph div.graph li.nr_6
		{
		left: 560px;
		}
	
	div.css_bar_graph div.graph li.nr_7
		{
		left: 650px;
		}
	
	div.css_bar_graph div.graph li.nr_8
		{
		left: 740px;
		}

	/* ==================== BLUE BAR  ==================== */
	/* ------ base ------ */
	div.css_bar_graph div.graph li.blue
		{
		background: #208faf;	/* --- IE --- */
		background: rgba(32,143,175,0.8);
		}

	/* ------ top ------ */
	div.css_bar_graph div.graph li.blue div.top
		{
		background: #72b8cc;
		}
	
	/* ------ bottom ------ */
	div.css_bar_graph div.graph li.blue div.bottom
		{
		background: #208faf;
		}
	
	/* ==================== GREEN BAR  ==================== */
	/* ------ base ------ */
	div.css_bar_graph div.graph li.green
		{
		background: #608d00;	/* --- IE --- */
		background: rgba(96,141,0,0.8);
		}

	/* ------ top ------ */
	div.css_bar_graph div.graph li.green div.top
		{
		background: #a2c656;
		}
	
	/* ------ bottom ------ */
	div.css_bar_graph div.graph li.green div.bottom
		{
		background: #608d00;
		}
	
	/* ==================== ORANGE BAR  ==================== */
	/* ------ base ------ */
	div.css_bar_graph div.graph li.orange
		{
		background: #ff9000;	/* --- IE --- */
		background: rgba(255,144,0,0.8);
		}

	/* ------ top ------ */
	div.css_bar_graph div.graph li.orange div.top
		{
		background: #ffc24c;
		}
	
	/* ------ bottom ------ */
	div.css_bar_graph div.graph li.orange div.bottom
		{
		background: #ff9000;
		}
	
	/* ==================== PURPLE BAR  ==================== */
	/* ------ base ------ */
	div.css_bar_graph div.graph li.purple
		{
		background: #7d47ba;	/* --- IE --- */
		background: rgba(125,71,186,0.8);
		}

	/* ------ top ------ */
	div.css_bar_graph div.graph li.purple div.top
		{
		background: #b592dd;
		}
	
	/* ------ bottom ------ */
	div.css_bar_graph div.graph li.purple div.bottom
		{
		background: #7d47ba;
		}
	
	/* ==================== RED BAR  ==================== */
	/* ------ base ------ */
	div.css_bar_graph div.graph li.red
		{
		background: #d23648;	/* --- IE --- */
		background: rgba(210,54,72,0.8);
		}

	/* ------ top ------ */
	div.css_bar_graph div.graph li.red div.top
		{
		background: #ea828e;
		}
	
	/* ------ bottom ------ */
	div.css_bar_graph div.graph li.red div.bottom
		{
		background: #d23648;
		}
	
	/* ==================== HOVERS  ==================== */
	div.css_bar_graph div.graph li.blue:hover
		{
		cursor: pointer;
		background: #208faf;
		}
	
	div.css_bar_graph div.graph li.green:hover
		{
		cursor: pointer;
		background: #608d00;
		}
	
	div.css_bar_graph div.graph li.orange:hover
		{
		cursor: pointer;
		background: #ff9000;
		}
	
	div.css_bar_graph div.graph li.purple:hover
		{
		cursor: pointer;
		background: #7d47ba;
		}
	
	div.css_bar_graph div.graph li.red:hover
		{
		cursor: pointer;
		background: #d23648;
		}
	
	div.css_bar_graph div.graph li.bar:hover span
		{
		cursor: pointer;
		top: -60px;
		padding: 10px;
		margin: 0px;
		}	
}