.chart-history-wrapper { 
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 76%;
}

.chart-history-wrapper p {
    margin-top: 30px;
    margin-bottom: -15px;
    width: 600px;
}

.chart-history-wrapper ul {
    list-style: none;
    margin: 40px 0 -20px 10px;
    width: 100%;
}

.chart-history-wrapper li {
    color: #000;
    display: inline;
    font: normal 15px arial, sans-serif;
    padding-right: 15px;
}

.funding-designation-list {
    text-align: center;
}

.chart-history-wrapper span.blue {
    background-color:#05a;
    width:25px;
}

.chart-history-wrapper span.red {
    background-color:#900;
    width:25px;
}

#chart-history {
    display: block;
    height: 300px;
    margin: 2.7em 0 0;
    padding: 0;
    /* fixes layout wonkiness in FF1.5 */
    position: relative;
    width: auto;
}

#chart-history caption {
    caption-side: top;
    color: #000;
    font: bold 95% arial, sans-serif;
    letter-spacing: .5px;
    position: relative;
    text-transform: uppercase;
    top: -26px;
    width: 625px;
    z-index: 10;
}

#chart-history tr, #chart-history th, #chart-history td {
    bottom: 0;
    color: #fff;;
    font: bold 11px arial, sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 77px;
    z-index: 2;
}

#chart-history td {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

#chart-history td:hover {
    background-color: #555;
    /*opacity: .9;*/
    color: #fff;;
}

#chart-history #yr08 {
    left: 0;
}

#chart-history #yr09 {
    left: 120px;
}

#chart-history #yr10 {
    left: 240px;
}

#chart-history #yr11 {
    left: 360px;
}

#chart-history #yr12 {
    left: 480px;
    border-right: none;
}

#chart-history tbody th {
    color: #444;
    bottom: -1.75em;
    border:none;
    left:15px; /* Controls the hortizontal years */
    font: normal 13px arial, sans-serif;
    vertical-align: top;
}

#chart-history .bluebar {
    color:#fff;
    background-color: #05a;
    border:none;
    font: normal 12px arial, sans-serif;
    font-size: 97%;
    left: 15px;    
}

#chart-history .redbar {
    background: #900;
    font-size: 97%;
    padding-top: 0;
}

#chart-history .bluebar2 { /* use then red is stacked on top */
    padding:10px 0 7px;
    font-size: 97%;
}

/* Controls the Left Side Dollar Amount... Try to keep 6 rows to be consistent with the other Funders */ 
#dollar {   
    font: normal 11px arial, sans-serif;
    height: 300px;
    left: 0;
    margin-bottom: -300px;
    position: relative;
    top: -300px;
}

#dollar .funding {  
    border-bottom: 1px dotted #c4c4c4;
    height:59px;
    position: relative;
    width: 730px;    
}

#dollar .funding p {
    left: -3.5em;
    margin: 0;
    position: absolute;
    text-align: left;
    top: -0.8em;
}

#dollar .last {
  border-bottom: none;
}

@media screen and (max-width: 768px) {
    .chart-history-wrapper {    
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 25px;
        width:85%;
    }
  
    .chart-top {
        border-top: 1px solid #DDD;
    }
    
    #dollar .funding {  
        width: 670px;    
    }
    
    #dollar .funding p {  
        left: -4em;    
    }
    
    #chart-history .bluebar, #chart-history .redbar, #chart-history .bluebar2 {
        font-size: 83%;   
    }
  
}

@media screen and (max-width: 640px) {
    .chart-history-wrapper {
        display:none;
    }
}