/*****************************************************************/
/*****************************************************************/
/*****************************************************************/
/* CSS Graphs - Bar */
/* Author: Bradley Taunt */
/* Inspired by the data design concepts of Edward Tufte */
/*****************************************************************/
/*****************************************************************/
/*****************************************************************/

/* All fallback table styling for screens less than 800px */
/*****************************************************************/
@media(max-width: 800px) {

    #bar-graph {
        border-collapse: collapse;
        margin: 0 auto;
        max-width: 600px;
        padding: 0 10px;
        width: 100%;
    }

    #bar-graph caption {
        border-bottom: 1px solid #111;
        font-size: 20px;
        padding: 0 0 10px 10px;
        text-align: left;
    }

    #bar-graph tr th,
    #bar-graph tr td {
        border-bottom: 1px solid #E7E7E7;
        padding: 10px;
    }

    #bar-graph tbody tr th {
        text-align: left;
    }

    #bar-graph thead tr th,
    #bar-graph tbody tr td {
        text-align: right;
    }

    #bar-ticks {
        display: none;
    }

}

/* All styling for bar graphs only when 800px or wider */
/*****************************************************************/
@media(min-width: 800px) {

    #bar-graph {
        background: transparent;
        display: block;
        height: 300px;
        margin: 5.1em 0 0;
        padding: 0;
        position: relative;
        width: 600px;
    }

    #bar-graph caption {
        caption-side: top;
        font-size: 12px;color: #fff;
        letter-spacing: .5px;
        position: absolute;
        text-align: left;
        top: -60px;
        width: 600px;
        z-index: 10;
    }

    #bar-graph tr, #bar-graph th, #bar-graph td {
        bottom: 3px;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        width: 150px;
        z-index: 2;
    }

    #bar-graph td { transition: all .3s ease; }
    #bar-graph td:hover {
        background-color: #111 !important;
        color: white;
    }

    #bar-graph thead tr {
        bottom: auto;
        right: 0;
        top: -46px;
    }

    #bar-graph thead th {
        height: auto;color: #fff;
        font-weight: 400;
        padding: 0;font-size: 14px;
        width: auto;
    }

    #bar-graph thead th.before {
        line-height: 2;
        right: 300px;
    }
    #bar-graph thead th.after {
        line-height: 2;
        right: 250px;
    }
    #bar-graph thead th.last {
        line-height: 2;
        right: 180px;
    }
    #bar-graph thead th.before:after,
    #bar-graph thead th.after:after,
    #bar-graph thead th.last:after {
        content: '';
        height: 10px;
        left: -15px;
        position: absolute;
        top: 8px;
        width: 10px;
    }
    #bar-graph thead th.before:after { background: #0f93ce; }
    #bar-graph thead th.after:after { background:#f5ec0c; }
    #bar-graph thead th.last:after { background: #eaeadf; }

    #bar-graph tbody tr {
        height: 296px;
        padding-top: 2px;
    }

    #bar-graph #section-1 { left: 25px; }
    #bar-graph #section-1 .before { height: 90px; }
    #bar-graph #section-1 .after { height: 8px; }
    #bar-graph #section-1 .last { height: 0.1px; }

    #bar-graph #section-2 { left: 165px; }
    #bar-graph #section-2 .before { height: 215px; }
    #bar-graph #section-2 .after { height: 20px; }
    #bar-graph #section-2 .last { height: 0.1px; }

    #bar-graph #section-3 { left: 325px; }
    #bar-graph #section-3 .before { height: 235px; }
    #bar-graph #section-3 .after { height: 20px; }
    #bar-graph #section-3 .last { height: 5px; }

    #bar-graph tbody th {
        bottom: -1.75em;
        font-weight: normal;color: #fff;
        vertical-align: top;
    }

    #bar-graph .bar {
        border-bottom: none;
        border: 1px solid;color: #fff;
        color: #000;
        width: 30px;
    }
    #bar-graph .bar p { margin: 5px 0 0; padding: 0; }

    #bar-graph tbody {
        display: block;
        height: 340px;
    }

    #bar-graph tbody .before {
        background-color: #0f93ce;
        border-color: transparent;
        left: 20px;
    }

    #bar-graph tbody .after {
        background-color:#f5ec0c;
        border-color: transparent;
        left: 55px;
    }
    #bar-graph tbody .last {
        background-color:#eaeadf;
        border-color: transparent;
        left: 90px;
    }


    #bar-ticks {
        display: block;
        height: 300px;
        left: 0;
        margin-bottom: -300px;
        position: relative;
        top: -300px;
        width: 600px;
        z-index: 1;
    }

    #bar-ticks .tick {
        border-bottom: 1px solid #E7E7E7;
        height:98px;
        position: relative;
        width:450px;
    }
    #bar-ticks .tick:first-child {
        border-top: 1px solid #E7E7E7;
    }
    #bar-ticks .tick:last-child {
        border: 0;
    }

    #bar-ticks .tick p {
        left: -3em;
        margin: 0 0 0 0.5em;
        position: absolute;
        top: -0.8em;
    }

}