#chart {
  height: 300px;
  width:auto;
  display: block;
  background-color: #ffffff;
  font-family:Arial;
  font-size:medium;
}

/**handle the different screen sizes*/

/*small screens*/
@media only screen and (max-width: 500px) {
   #chart {
        font-size:smaller;
    }
   #chart #numbers {
        width: 8%;
        font-family:Arial;
        font-size:smaller;
    }
 
}

/*large screens*/
@media only screen and (min-width: 600px) 
{
    #chart 
    {
        margin: 30px auto 0 20px;
    }
    #chart #numbers 
    {
        width: 2%;
    }
}
/*****/




/*support IE8*/
.ie8 
    #chart {
        margin-left:10px;
        margin-top:30px;
    }    


    #chart #numbers
    {
         width: 50px;
    }
   
/*******/    


#chart #numbers {
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}


#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #cecece;
  position: relative;
  /*bottom: 6px;*/
  vertical-align:bottom;
}


/*
#chart #numbers li:last-child {
  height: 30px;
}
    */

#chart #numbers li span {
  color: #000;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {
  display: inline-block;
  /*background: #eee;*/
  height: 300px;
  padding: 0;
  margin: 0;
  border-bottom:1px solid #cecece;
  /*box-shadow: 0 0 0 1px #444;*/
}
#chart #bars li {
  display: table-cell;
  /*width: 100px;*/
  min-width: 40px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  /*width: 70px;
  margin-left: 15px;
  background: #49E;*/
  position: absolute;
  bottom: 0;
  
}
#chart #bars li .bar:hover {
 /* background: #cecece;*/
  cursor: pointer;
}

/*
#chart #bars li .bar:hover:before {
  color: #000;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 20px;
}
*/

#chart #bars li span {
  color: #000;
  width: 100%;
  position: absolute;
  top:270px; /*change this height for icons+text position on bars*/
  /*bottom:-40px; */
  left: 0;
  text-align: center;
}

/*icon image style...makes the img responsive*/
#chart #bars li span img {
    max-width: 100%;
    height: auto;
}


#chart #bars li img {
  cursor:pointer;
  border:0;
  padding:0;
}

 
.chartBG1{background:#9A711F;}
.chartBG2{background:#8875BB;}
.chartBG3{background:#46865E;}
.chartBG4{background:#C73A37;}
.chartBG5{background:#56A7B4;}
.chartBG6{background:#0089A4;}
.chartBG7{background:#EE5C55;}
   
.chartBG{background:#cecece;}
 

.bLabel
{
    margin-top:-20px;
}

.floatLabel
{
    position:absolute;
    margin-top:280px;
    z-index:100 !important;
    text-align:center;
    display:block;
    font-family:Arial;
    font-size:larger;
    /*width:100px;*/
}