/* ==================== BAR GRAPH  ==================== */
/* ------ container ------ */
div.css_bar_graph {
  width: 490px;
  height: 320px;
  padding: 30px 50px 30px 50px;
  margin: 10px 0;
  /* --- font --- */
  font-size: 13px;
  font-weight: normal;
  background-color: #ffffff;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0, 0, 0, 0.196);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.047);
  /* --- css3 --- */
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
/* ------ hyperlinks ------ */
div.css_bar_graph a {
  color: #888888;
  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: 30px;
  left: -5px;
  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;
  color: #888888;
  bottom: 20px;
  left: 55px;
  text-align: center;
}
/* ------ labels ------ */
div.css_bar_graph ul.x_axis li {
  display: inline;
  width: 40px;
  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;
  color: #888888;
}
/* ------ 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: 30px;
  float: left;
  position: absolute;
  bottom: 90px;
  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: 10px;
  margin-top: -5px;
  /* --- css3 --- */
  -moz-border-radius: 30px/10px;
  -webkit-border-radius: 30px 10px;
  border-radius: 30px/10px;
  /* --- 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: 10px;
  position: absolute;
  bottom: -5px;
  left: 0px;
  /* --- css3 --- */
  -moz-border-radius: 30px/10px;
  -webkit-border-radius: 30px 10px;
  border-radius: 30px/10px;
  /* --- 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: -35px;
  width: 40px;
  left: 0px;
  padding: 3px 3px 3px 3px;
  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: 60px; }
div.css_bar_graph div.graph li.nr_2 { left: 100px; }
div.css_bar_graph div.graph li.nr_3 { left: 140px; }
div.css_bar_graph div.graph li.nr_4 { left: 180px; }
div.css_bar_graph div.graph li.nr_5 { left: 220px; }
div.css_bar_graph div.graph li.nr_6 { left: 260px; }
div.css_bar_graph div.graph li.nr_7 { left: 300px; }
div.css_bar_graph div.graph li.nr_8 { left: 340px; }
div.css_bar_graph div.graph li.nr_9 { left: 380px; }
div.css_bar_graph div.graph li.nr_10 { left: 420px; }
div.css_bar_graph div.graph li.nr_11 { left: 460px; }
div.css_bar_graph div.graph li.nr_12 { left: 500px; }
/* ==================== 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: -45px;
  padding: 6px;
  margin: 0px;
}