/*
 * Charts
 * HTML5 and CSS3 Charts Engine
 * developer's website: http://wemakesites.net/#!/web-dev
 * developer's twitter: https://twitter.com/#!/wemakesitesnet
 * developer's blog http://acidmartin.wordpress.com/
 **/

.acidjs-charts,
.acidjs-charts *::before,
.acidjs-charts *::before
{
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.acidjs-charts ul,
.acidjs-charts ul li div,
.acidjs-charts ul li div *,
.acidjs-charts ul li div::before,
.acidjs-charts .acidjs-charts-grid
{
    width: 100%;
}

.acidjs-charts ul,
.acidjs-charts ul li,
.acidjs-charts ul li div::before,
.acidjs-charts .acidjs-charts-grid
{
    height: 100%;
}

.acidjs-charts p,
.acidjs-charts h6,
.acidjs-charts ul li div *
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.acidjs-charts ul li div *,
.acidjs-charts ul li div::before,
.acidjs-charts .acidjs-charts-grid
{
    position: absolute;
}

.acidjs-charts li div,
.acidjs-charts ul li div *,
.acidjs-charts .acidjs-charts-details
{
    text-align: center;
}

.acidjs-charts.acidjs-charts-loading ul li div *,
.acidjs-charts.acidjs-charts-loading .acidjs-charts-details
{
    opacity: 0;
}

.acidjs-charts ul li div *,
.acidjs-charts .acidjs-charts-details
{
    opacity: 1;
    
    -moz-transition: opacity 500ms 1s cubic-bezier(.09, .11, .24, .91);
    -webkit-transition: opacity 500ms 1s cubic-bezier(.09, .11, .24, .91);
    -ms-transition: opacity 500ms 1s cubic-bezier(.09, .11, .24, .91);
    -o-transition: opacity 500ms 1s cubic-bezier(.09, .11, .24, .91);
    transition: opacity 500ms 1s cubic-bezier(.09, .11, .24, .91);
}

.acidjs-charts,
.acidjs-charts .acidjs-charts-grid li b::before
{
    display: inline-block;
}

.acidjs-charts > div,
.acidjs-charts li div
{
    position: relative;
}

.acidjs-charts li div,
.acidjs-charts ul li div *
{
    font-size: 12px;
}

.acidjs-charts ul,
.acidjs-charts .acidjs-charts-grid
{
    display: table;
}

.acidjs-charts ul li div em,
.acidjs-charts .acidjs-charts-grid
{
    margin: -20px 0 0;
}

.acidjs-charts ul li,
.acidjs-charts .acidjs-charts-grid li b
{
    display: table-cell;
}

.acidjs-charts,
.acidjs-charts p
{
    color: #878787;
}

/* reset all elements inside of the chart element */
.acidjs-charts *
{
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: normal;
    font-style: normal;
}

.acidjs-charts .acidjs-charts-details *
{
    line-height: 18px;
}

.acidjs-charts h6
{
    font-size: 16px;
}

.acidjs-charts p
{
    font-size: 14px;
}

.acidjs-charts
{
    vertical-align: top;
    padding: 4px 4px 4px 30px;
    font-family: "Segoe UI", Arial, Sans-serif;
    background: #1d1d1d;
    border-radius: 6px;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.acidjs-charts.acidjs-charts-loading li div
{
    height: 0 !important;
}

.acidjs-charts li div
{
    top: -20px;
    -moz-transition: height 500ms cubic-bezier(.09, .11, .24, .91);
    -webkit-transition: height 500ms cubic-bezier(.09, .11, .24, .91);
    -ms-transition: height 500ms cubic-bezier(.09, .11, .24, .91);
    -o-transition: height 500ms cubic-bezier(.09, .11, .24, .91);
    transition: height 500ms cubic-bezier(.09, .11, .24, .91);
}

.acidjs-charts .acidjs-charts-grid
{
    border-collapse: collapse;
    counter-reset: percentage 11;
}

.acidjs-charts .acidjs-charts-grid li
{
    display: table-row;
    counter-increment: percentage -1; /* display a reverse counter */
}

.acidjs-charts .acidjs-charts-grid li b
{
    border: dashed 1px rgba(135, 135, 135, .2);
    border-left: 0;
    border-right: 0;
    font-size: 10px;
    vertical-align: middle;
}

.acidjs-charts .acidjs-charts-grid li b::before
{
    content: counter(percentage) "0%";
    text-align: right;
    width: 26px;
    margin: 0 0 0 -28px;
}

.acidjs-charts .acidjs-charts-grid li:last-child b::before
{
    content: "0%";
}

.acidjs-charts ul li
{
    padding: 0 2px;
    vertical-align: bottom;
}

.acidjs-charts ul li div
{
    border-radius: 4px 4px 0 0;
}

/* add "glossy" look and feel to the bars */
.acidjs-charts ul li div::before
{
    content: "";
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(255, 255, 255, .2), rgba(0, 0, 0, .1));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(255, 255, 255, .2), rgba(0, 0, 0, .1));
    background: -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(255, 255, 255, .2), rgba(0, 0, 0, .1));
    background: -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(255, 255, 255, .2), rgba(0, 0, 0, .1));
    background: linear-gradient(left, rgba(0, 0, 0, .1), rgba(255, 255, 255, .2), rgba(0, 0, 0, .1));
}

.acidjs-charts ul li:last-child div
{
    border-radius: 4px 4px 4px 0;
}

.acidjs-charts ul li:first-child div
{
    border-radius: 4px 4px 0 4px;
}

.acidjs-charts ul li div *
{
    display: block;
    line-height: 16px;
}

.acidjs-charts ul li div b
{
    bottom: -20px;
}

.acidjs-charts .acidjs-charts-details
{
    margin: 0 0 40px;
}

/* browser fixes */
/* fixes a Google Chrome redrawing issue */
@media screen and (-webkit-min-device-pixel-ratio: 0)
{
    .acidjs-charts.acidjs-charts-loading li div
    {
        margin: 1px 0 0;
    }
}

/* Internet Explorer 6 and 7 are not supported due to CSS issues, so we just hide the charts */
* html .acidjs-charts,
* + html .acidjs-charts
{
    display: none;
}