html, body {
    /* in the public display set the background to initial (or none on IE),
        so if it's hosted within an iframe it can take on the parent's color
    */
    background: none;
    background: initial;
}

/* override bootstrap's table junk */
table {
    margin-right: unset;
}

.bold
{
    font-weight: bold;
}

/* overflow needed for the parameter graph control which has fixed widths, 
    to scroll when hosted in an iframe
*/
.siteSelectGraphControl {
    overflow: auto;
}
.siteSelectGraphControlControlGroup > div {
    display: inline-block;
    vertical-align: middle;
}
.siteSelectGraphControlDisclaimer {

}
.siteSelectGraphControlParameterItem {
    padding: 10px 0 10px 0;
}

.siteSelectGraphControlParameterDisplayInfo {
    margin: 10px 0 10px 0;
}

    .AQILegendPanel {
        font-size: smaller;
    }

    .aqiBody {
        /*min-width: 750px;*/
        /* display:table makes the outer div only as wide as it needs to be. this keeps the aqi legend in the lower right corner of the map image.
            similar to the site master which has display:table on the page content
        */
        display: table; 
    }


.siteDataAqi {
}

.siteDataAqi .siteSelectGraphControlDisclaimer {
    display: none;
}

.siteDataAqi .siteDataAqiDisplayPanel {
    margin-bottom: 20px;
}

.disclaimerPanel {
    margin: 10px 0 10px 0;
    border: 1px solid #8ba0bc;
    padding: 10px;
    font-weight: bold;
}

.siteDataAqiDisplayPanel {
    font-weight: bold;
}
   
.siteDataAqiDisplayPanel > * {
    margin: 3px 3px 3px 3px;
}

.currentAqiRow {
    font-size: x-large;
}

.rTable {
    display: table;
}

.rTableRow {
    display: table-row;
}

.rTableHeading {
    display: table-header-group;
}

.rTableBody {
    display: table-row-group;
}

.rTableFoot {
    display: table-footer-group;
}

.rTableCell, .rTableHead {
    display: table-cell;
}

.latestReadingRow .rTableCell {
    padding: 3px 10px;
}