ul.graph li {
  display: inline-block;
  width: 150px;
  text-align: center;
}

.bar1{
  width: 40px;
  height: 50px;
  margin: 0 auto;
  background-color: #cc0000;
}
.bar2{
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: #66cc00;
}
.bar3{
  width: 40px;
  height: 70px;
  margin: 0 auto;
  background-color: #0033ff;
}




/* ==================== BAR GRAPH  ==================== */
/* ------ container ------ */

div.css_bar_graph {
width: 450px;
height: 360px;
padding: 40px 0px 10px 0px;
/* --- 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;
}

@media only screen and (max-width: 767px) {
  div.css_bar_graph{
      width: 100%;
      overflow-x: scroll;
  }
}

/* ------ 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: 50px;	/* 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;
}

@media only screen and (max-width: 767px) {
  div.css_bar_graph ul.x_axis li {
  width: 60px;
  }
}

/* ==================== 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: 29px;
}

/* ==================== 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; }

@media only screen and (max-width: 767px) {
div.css_bar_graph div.graph li.nr_1 { left: 95px; }

div.css_bar_graph div.graph li.nr_2 { left: 155px; }

div.css_bar_graph div.graph li.nr_3 { left: 215px; }

div.css_bar_graph div.graph li.nr_4 { left: 275px; }

div.css_bar_graph div.graph li.nr_5 { left: 335px; }

div.css_bar_graph div.graph li.nr_6 { left: 350px; }

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;
}