a { color: #007397; }

/* basic structure */
body.minimal .data-container .data-visuals {
    min-height: 600px;
    height: auto;
    padding-bottom: 25px;
    margin: 20px auto 5px auto;
}

body.minimal .data-container .data-visuals .row {
    margin: 15px 0 15px 0;
}

body.minimal .data-container a.btn {
    padding: 0px 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -khtml-border-radius: 0;
}

body.minimal .data-container a.btn-primary,
body.minimal .data-container a.btn-primary:focus,
body.minimal .data-container a.btn-primary:active {
    background: rgba(0, 127, 166, 1.0);
    border: rgba(0, 127, 166, 1.0) solid .1em;
}

body.minimal .data-container a.btn-primary:hover {
    background: rgba(0, 127, 166, .6);
    border: rgba(0, 127, 166, .6) solid .1em;
    color: #2B2B2B;
}

.data-container .data-visuals .jumbotron {
    width: 100%;
    height: auto;
    background: rgba(240, 248, 255, 1.0);
    margin: 10px 0% 10px 0%;
    padding: 10px 0 10px 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -khtml-border-radius: 0;
    overflow: hidden;
}

.data-container .data-visuals .jumbotron #content-action-bar {
    width: 96%;
    height: auto;
    text-align: center;
    margin: 15px 2% 15px 2%;
}

/* select-menu */
.data-container .data-visuals .jumbotron #content-action-bar select {
    width: 60%;
    margin: 0 20% 0 20%;
    cursor: pointer;
    display: inline-block;
}

.data-container .data-visuals .jumbotron #content-action-bar select:focus {
    outline: 0;
}

.data-container .data-visuals .region-detail {
    height: auto;
    padding: 20px 0 10px 0;
}

.data-container .data-visuals .region-detail .image-map img {
    width: 100%;
}

._data_figure {
    height: auto;
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
}

._data_figure dt {
    width: 86%;
    margin: 0 7% 10px 7%;
    font-size: 700%;
}

._data_figure dd {
    width: 86%;
    margin: 0 7% 10px 7%;
    font-size: 150%;
}

/* typography */
.decrease-accent {
    color: rgba(51, 160, 44, 1.0);
}

.increase-accent {
    color: rgba(227, 26, 28, 1.0);
}

.water-use-accent {
    color: #007397;
}

.eighty-percent-accent {
    color: #8F8F00;
}

/* conservation methods */
.icon-display {
    margin: 5px 0 0 0;
}

.icon-display .icons {
}

.placemark {
    width: 45px;
    vertical-align: text-bottom;
}

.restrictions {
    margin-top: 40px;
}

.restrictions ul li {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 25px;
}

/* detail page tab panes */
.nav-tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 25px;
}

.nav-tabs>li>a {
    background-color: #333333;
    border-color: #777777;
    color: #fff;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #fff;
    background-color: #888888;
    border: 1px solid #888888;
}

.nav-tabs>li>a:hover {
    border-color: #000000;
    background-color: #111111;
}

/*
    leaflet.label
    a plugin that adds labels to markers and vectors for leaflet powered maps
    https://github.com/leaflet/leaflet.label
    https://github.com/jacobtoye
*/

.leaflet-label {
    background: rgba(255, 255, 255, 1);
    background-clip: padding-box;
    border-color: rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 4px;
    color: #000000;
    display: block;
    font-size: 100%;
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-weight: bold;
    padding: 1px 6px;
    position: absolute;
    white-space: nowrap;
    z-index: 10;
}

.leaflet-label.leaflet-clickable {
    cursor: pointer;
    pointer-events: auto;
}

.leaflet-label:before,
.leaflet-label:after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: none;
    position: absolute;
    top: 5px;
}

.leaflet-label:before {
    border-right: 6px solid black;
    border-right-color: inherit;
    left: -10px;
}

.leaflet-label:after {
    border-left: 6px solid black;
    border-left-color: inherit;
    right: -10px;
}

.leaflet-label-right:before,
.leaflet-label-left:after {
    content: "";
}

.leaflet-container .leaflet-control-attribution {
    display: none;
}


/*
    census reporter circles on a line charts

    Based on census reporter distribution "circles on a line" charts

    example here: http://censusreporter.org/data/distribution/?table=B25064&geo_ids=860|16000US0644000

    census reporter circles on a line charts
    formula to arrive at the circles on a line: https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/js/comparisons.js#L703

    styles to arrive at the circles on a line:
    https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/css/charts.css#L450
*/

section.coal-chart-container {
    padding: 2em 0 4em;
    margin: 25px 0 0 0;
}

section.chart-divider {
    margin: 1em 0 0;
    padding: 0.6em 0.75em;
    background-color: #f7f8f3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top: 1px solid #e8eadf;
    border-bottom: 1px solid #cad0b5;
}

section.chart-divider h2 {
    margin: 0;
    line-height: 1;
}

.coal-chart-container h2 {} .coal-chart {
    list-style: none;
    position: relative;
    height: 10px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 1.5em;
}

.coal-chart li {
    display: inline;
    position: absolute;
    bottom: -6px;
    margin-left: -5px;
    z-index: 15;
}

.coal-chart li .point {
    display: block;
    cursor: pointer;
    position: relative;
    height: 11px;
    width: 11px;
    color: #222;
    background-color: rgba(31, 120, 180, .7);
    border: 1px solid rgba(31, 120, 180, .7);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.coal-chart li .point:hover,
.coal-chart li .point.hovered {
    background-color: #42472e;
    border-color: #42472e;
    z-index: 3;
}

.coal-chart li .point.selected {
    background-color: #027b7a;
    border-color: #027b7a;
    z-index: 2;
}

.coal-chart li .point.selected.hovered {
    z-index: 4;
}

.coal-chart li .point .hovercard {
    position: absolute;
    width: 15em;
    bottom: 1.5em;
    right: -7.5em;
    font-size: .83em;
    line-height: 1.3;
    text-align: center;
    display: none;
    padding: .5em;
    border: 1px solid #e0e0e0;
    pointer-events: auto;
}

.coal-chart li .point:hover .hovercard,
.coal-chart li .point.hovered .hovercard,
.coal-chart li .point.selected .hovercard {
    display: block;
    background-color: #fff;
}

.coal-chart li.tick-mark {
    height: 26px;
    bottom: -13px;
    margin-left: 0;
    border-left: 1px solid #d5d5d5;
    z-index: 10;
}

.coal-chart li.tick-mark.tick-mark-min {
    left: 0;
}

.coal-chart li.tick-mark.tick-mark-max {
    left: 100%;
}

.coal-chart li.tick-mark span {
    position: relative;
    font-size: 70%;
    display: block;
    color: #606060;
    padding: 0;
    margin-top: 30px;
    margin-left: -50%;
    white-space: nowrap;
}

.coal-chart li.tick-mark-min span {
    margin-left: -10px;
}

.coal-chart li.tick-mark-max span {
    /* margin-left: -99%; */
}

.coal-chart li.tick-mark-median span {
    margin-left: -15px;
}

.coal-chart li.tick-mark-average span {
    margin-left: -20px;
    margin-top: -30px;
}

.placeholder {
    background-color: #f5f5f5;
    color: #777;
    text-align: center;
    height: 200px;
    padding-top: 75px;
    border: 1px solid #777;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
    font-weight: 500;
    line-height: 28px;
}

.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
    font-size: 130%;
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em;
    font-size: 120%;
}



/* DEPRECATED */

/* index page bar charts */
/*
.decrease,
.increase {
    min-height: 400px;
    height: auto;
}

.decrease header.charts {
    width: 100%;
    height: 75px;
    background: rgba(51, 160, 44, 1.0);
    padding: 1% 0 1% 2%;
}

.increase header.charts {
    width: 100%;
    height: 75px;
    background: rgba(227, 26, 28, 1.0);
    padding: 1% 2% 1% 0;
}

.decrease header.charts h5,
.increase header.charts h5 {
    font-weight: 700;
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    text-transform: uppercase;
}

section.display ol {
    width: 100%;
    padding: 2% 0% 2% 0%;
}

section.display ol li {
    min-width: 96%;
    width: 96%;
    min-height: 1.5em;
    color: #000;
    margin: 0 2% .5% 2%;
    border-bottom: 1px solid #000;
}

section.display ol li:last-child {
    border-bottom: 1px solid #000;
}

section.display ol li dl {
    position: relative;
    width: 100%;
}

.decrease section.display ol li dl dt {
    width: 65%;
    text-align: right;
    float: right;
}

.decrease section.display ol li dl dd {
    width: 35%;
    text-align: left;
    float: left;
    margin-left: 15px;
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-weight: 700;
}

.increase section.display ol li dl dt {
    min-width: 100px;
    width: 35%;
    text-align: left;
    float: left;
}

.increase section.display ol li dl dd {
    width: 35%;
    text-align: right;
    float: right;
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-weight: 700;
}

.decrease section.display ol li dl dd.neg,
.increase section.display ol li dl dd.pos {
    height: 50px;
    margin-bottom: 5px;
}

.decrease section.display ol li dl dd.neg {
    float: right;
    background-color: rgba(51, 160, 44, 1.0);
    clear: right;
}

.decrease section.display ol li dl dd.neg span {
    position: absolute;
    bottom: 25px;
    left: 5px;
}

.increase section.display ol li dl dd.pos span {
    position: absolute;
    bottom: 25px;
    right: 5px;
}

.increase section.display ol li dl dd.pos {
    float: left;
    background-color: rgba(227, 26, 28, 1.0);
    clear: left;
}
*/

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /*
    .data-legend #content-action-bar select {
        background: url(../images/select-arrow.png) 95% 50% no-repeat;
    }
    */
}

@media (min-width: 200px) {

    body.minimal .data-container h1 {
        font-size: 365%;
    }

    body.minimal .data-container h2 {
        font-size: 320%;
    }

    body.minimal .data-container h3 {
        font-size: 260%;
    }

    body.minimal .data-container h4 {
        font-size: 200%;
    }

    body.minimal .data-container h5 {
        font-size: 180%;
    }

    body.minimal .data-container h6 {
        font-size: 160%;
        line-height: 130%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 155%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        width: 92%;
        margin: 0 3% 5px 3%;
        height: auto;
        font-size: 465%;
        line-height: 50px;
    }

    ._data_figure dd {
        width: 92%;
        margin: 0 3% 10px 3%;
        height: auto;
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        /*line-height: 5px;*/
    }

    .icon-display {
        margin: 5px 0 10px 0;
    }

    .icon-display .icons {
        margin: 15px 0 10px 0;
    }

    .icon-display .placemark {
        width: 30%;
        margin: 0 35% 10px 35%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 130%;
        text-align: center;
    }

    .data-container .data-visuals .region-detail {
        height: auto;
        padding: 0px 0 0px 0;
    }

    .data-container .data-visuals .jumbotron #content-action-bar {
        font-size: 65%;
    }

}

@media (min-width: 401px) {

    body.minimal .data-container h1 {
        font-size: 395%;
    }

    body.minimal .data-container h2 {
        font-size: 380%;
    }

    body.minimal .data-container h3 {
        font-size: 320%;
    }

    body.minimal .data-container h4 {
        font-size: 260%;
    }

    body.minimal .data-container h5 {
        font-size: 200%;
    }

    body.minimal .data-container h6 {
        font-size: 140%;
        line-height: 130%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 150%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        width: 92%;
        margin: 0 3% 5px 3%;
        height: auto;
        font-size: 500%;
        line-height: 50px;
    }

    ._data_figure dd {
        width: 92%;
        margin: 0 3% 10px 3%;
        height: auto;
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display {
        margin: 5px 0 10px 0;
    }

    .icon-display .icons {
        margin: 15px 0 10px 0;
    }

    .icon-display .placemark {
        width: 30%;
        margin: 0 35% 20px 35%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 130%;
        text-align: center;
    }

    .data-container .data-visuals .region-detail {
        height: auto;
        padding: 0px 0 0px 0;
    }

    .data-container .data-visuals .jumbotron #content-action-bar {
        font-size: 65%;
    }

}

@media (min-width: 513px) {

    .icon-display .placemark {
        width: 30%;
        margin: 0 35% 20px 35%;
    }

}

@media (min-width: 605px) {

    body.minimal .data-container h1 {
        font-size: 440%;
    }

    body.minimal .data-container h2 {
        font-size: 380%;
    }

    body.minimal .data-container h3 {
        font-size: 320%;
    }

    body.minimal .data-container h4 {
        font-size: 260%;
    }

    body.minimal .data-container h5 {
        font-size: 200%;
    }

    body.minimal .data-container h6 {
        font-size: 140%;
        line-height: 130%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 185%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        height: auto;
        font-size: 600%;
        line-height: 65px;
    }

    ._data_figure dd {
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display {
        margin: 5px 0 10px 0;
    }

    .icon-display .icons {
        margin: 15px 0 10px 0;
    }

    .icon-display .placemark {
        width: 26%;
        margin: 0 37% 20px 37%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 130%;
        text-align: center;
    }

}

@media (min-width: 768px) {

    body.minimal .data-container h1 {
        font-size: 440%;
    }

    body.minimal .data-container h2 {
        font-size: 380%;
    }

    body.minimal .data-container h3 {
        font-size: 320%;
    }

    body.minimal .data-container h4 {
        font-size: 260%;
    }

    body.minimal .data-container h5 {
        font-size: 200%;
    }

    body.minimal .data-container h6 {
        font-size: 140%;
        line-height: 130%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 195%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        height: auto;
        font-size: 650%;
        line-height: 70px;
    }

    ._data_figure dd {
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display {
        margin: 5px 0 10px 0;
    }

    .icon-display .icons {
        margin: 15px 0 10px 0;
    }

    .icon-display .placemark {
        width: 26%;
        margin: 0 37% 20px 37%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 130%;
        text-align: center;
    }

}

@media (min-width: 830px) {

    body.minimal .data-container h1 {
        font-size: 440%;
    }

    body.minimal .data-container h2 {
        font-size: 380%;
    }

    body.minimal .data-container h3 {
        font-size: 320%;
    }

    body.minimal .data-container h4 {
        font-size: 260%;
    }

    body.minimal .data-container h5 {
        font-size: 200%;
    }

    body.minimal .data-container h6 {
        font-size: 170%;
        line-height: 130%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 215%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        height: auto;
        font-size: 650%;
        line-height: 70px;
    }

    ._data_figure dd {
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display {
        margin: 5px 0 10px 0;
    }

    .icon-display .icons {
        margin: 15px 0 10px 0;
    }

    .icon-display .placemark {
        width: 20%;
        margin: 0 40% 20px 40%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 130%;
        text-align: center;
    }

}

@media (min-width: 844px) {

    body.minimal .data-container h1 {
        font-size: 480%;
    }

    body.minimal .data-container h2 {
        font-size: 420%;
    }

    body.minimal .data-container h3 {
        font-size: 360%;
    }

    body.minimal .data-container h4 {
        font-size: 300%;
    }

    body.minimal .data-container h5 {
        font-size: 240%;
    }

    body.minimal .data-container h6 {
        font-size: 180%;
        line-height: 150%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 215%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        height: auto;
        font-size: 700%;
        line-height: 85px;
    }

    ._data_figure dd {
        font-size: 150%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display .placemark {
        width: 26%;
        margin: 0 37% 20px 37%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 150%;
        text-align: center;
    }

}

@media (min-width: 992px) {

    body.minimal .data-container h1 {
        font-size: 480%;
    }

    body.minimal .data-container h2 {
        font-size: 420%;
    }

    body.minimal .data-container h3 {
        font-size: 360%;
    }

    body.minimal .data-container h4 {
        font-size: 300%;
    }

    body.minimal .data-container h5 {
        font-size: 240%;
    }

    body.minimal .data-container h6 {
        font-size: 180%;
        line-height: 150%;
    }

    body.minimal .data-container p {
        font-size: 150%;
    }

    body.minimal .data-container .data-visuals .jumbotron h4 {
        font-size: 240%;
    }

    .data-visuals .image-map img {
        width: 100%;
    }

    ._data_figure dt {
        height: auto;
        font-size: 700%;
        line-height: 85px;
    }

    ._data_figure dd {
        font-size: 190%;
    }

    ._data_figure dd.accent-text {
        line-height: 5px;
    }

    .icon-display .placemark {
        width: 30%;
        margin: 0 35% 20px 35%;
    }

    body.minimal .data-container .icon-display p {
        font-size: 150%;
    }

}

ul.mobile-data-points {
    display: table;
    width: 100%;
    list-style: none;
}

ul.mobile-data-points li {
    display: table-cell;
    text-align: center;
}

ul.mobile-data-points li:first-child {
    text-align: left;
}

ul.mobile-data-points li:last-child {
    text-align: right;
}


span.show {
    display: inline !important;
}

/* table styles */
.data-container table { width: 100%; height: auto; }
.data-container table.table-striped thead th { background-color: #2B2B2B; color: #fdfdfd; }
.data-container table.table-striped tbody > tr:nth-child(even) > td,
.data-container table.table-striped tbody > tr:nth-child(even) > th { background-color: #aaaaaa; }
.data-container table.table-striped tbody > tr:nth-child(odd) > td,
.data-container table.table-striped tbody > tr:nth-child(odd) > th { background-color: #fdfdfd; }

/* tablestacker styles */
#table-container {
    background: #ffffff;
    padding: 20px 10px 20px 10px;
    font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
}

#table-container .kpcc-table th {
    color: #B24401;
    text-transform: uppercase;
    background: #f5f5f5;
    text-align: left;
    vertical-align: middle;
    font-weight: 500;
    /*border-top: 1px solid #f17b21;*/
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.4);*/
    /*font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;*/
    /*font-weight: 700;*/
    /*vertical-align: bottom;*/
    /*font-size: 0.6875em;*/
    /*padding: 20px 14px 9px 5px;*/
    /*line-height: 1;*/
    /*color: rgba(0, 0, 0, 0.4);*/
    /*box-shadow: inset 0 -4px 0 #e8e8e8;*/
 }

#table-container .kpcc-table td { text-align: left; vertical-align: middle; font-weight: 500; line-height: 1.1; padding: 10px 14px 10px 5px; vertical-align: top; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
#table-container .kpcc-table td mark { text-transform: uppercase; color: #B24401; background: none; margin-bottom: 4px; font-weight: 700; display: none; }
#table-container .kpcc-table tr td:first-child { }
#table-container .kpcc-table tr td:first-child mark { display: none; }
#table-container .kpcc-table tr td:last-child { box-shadow: none; }

#table_fu input[type="text"] {
    display: inline-block;
    height: 40px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    font-weight: 700;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#table-container #table_fu #controls { height: auto; clear: both; display: block; overflow: visible; margin: 10px 0 15px 0; }

#table-container #table_fu #controls #filter,
#table-container #table_fu #controls #pager { margin: 5px auto 25px auto; }

@media screen and (max-width: 595px) {
    #table-container #table_fu #controls { font-size: 140%; }
    #table-container .kpcc-table { border-top: 3px solid #f17b21; border-bottom: 3px solid black; width: 100%; font-size: 160%; }
    #table-container .kpcc-table thead { display: none; }
    #table-container .kpcc-table tbody, #table-container .kpcc-table tr, #table-container .kpcc-table td { width: 100%; }
    #table-container .kpcc-table td { box-shadow: none; display: block; width: 100%; padding: 7px 10px 7px 10px; font-size: 110%; border-bottom-color: #cfcfcf; }
    #table-container .kpcc-table td mark { display: block; }
    #table-container .kpcc-table tr td:first-child { font-size: 1.25em; background: #f5f5f5; font-weight: 700; border-bottom-color: gray; padding-top: 15px; }
    #table-container .kpcc-table tr td:nth-child(2) { padding-top: 12px; }
    #table-container .kpcc-table tr td:last-child { padding-bottom: 20px; border-bottom: 1px solid black; }
}

@media (min-width: 596px) {
    #table-container #table_fu #controls { font-size: 110%; }
    #table-container .kpcc-table { font-size: 110%; }
    #table-container .kpcc-table th { font-size: 70%; }
}

@media (min-width: 640px) {
    #table-container #table_fu #controls { font-size: 120%; }
    #table-container .kpcc-table { font-size: 120%; }
    #table-container .kpcc-table th { font-size: 85%; }
}

@media (min-width: 768px) {
    #table-container #table_fu #controls { font-size: 130%; }
    #table-container .kpcc-table { font-size: 130%; }
    #table-container .kpcc-table th { font-size: 95%; }
}

@media (min-width: 992px) {
    #table-container #table_fu #controls { font-size: 140%; }
    #table-container .kpcc-table { font-size: 140%; }
    #table-container .kpcc-table th { font-size: 105%; }
}

#table-container #table_fu div.bullet-graph-wrap { position: relative; width: 100%; height: 21px; top: 0; left: 0; margin: 0; padding: 0; }
#table-container #table_fu div.bullet-graph-box1 { position: absolute; height: 20px; width: 30%; left: 0; background-color: #eeeeee; z-index: 1; font-size: 0; }
#table-container #table_fu div.bullet-graph-box2 { position: absolute; height: 20px; width: 30%; left: 30%; background-color: #dddddd; z-index: 1; font-size: 0; border:1px solid #CCC; }
#table-container #table_fu div.bullet-graph-box3 { position: absolute; height: 20px; width: 30%; left: 60%; background-color: #bbbbbb; z-index: 1; font-size: 0; }
#table-container #table_fu div.bullet-graph-box4 { position: absolute; height: 20px; width: 10%; left: 90%; background-color: #bbbbbb; z-index: 1; font-size: 0; }
#table-container #table_fu div.bullet-graph-target { position: absolute; height: 21px; width: 2px; left: 32px; top: 0; background-color: #cc0000; z-index: 7; font-size: 0; }
#table-container #table_fu div.bullet-graph-actual { position: absolute; height: 8px; left: 0px; top: 7px; background-color: #000000; font-size: 0; z-index: 5; font-size: 0; }

#table-container table.kpcc-table th, #table-container table.kpcc-table td { text-align: center; }

/* monthly targeted use */
#chart-legend-bar .block-container { margin: 10px 20px 0 0; display: inline-block;}
#chart-legend-bar .block-container mark { background: none; line-height: 25px; }
#chart-legend-bar .block { width: 25px; height: 25px; margin: 0px 10px 0 0; float: left; display: block; }
#chart-legend-bar .current-use { background-color: #007397; }
#chart-legend-bar .threshold-use { background-color: rgba(51, 160, 44, 1.0); }
#chart-legend-bar .baseline-use { background-color: rgba(227, 26, 28, 1.0); }