/**** Notes *****/

.note {
    font-family: Arial;
    font-size: 8pt;
}

td.parameters {
    font-family: Arial;
    vertical-align: top;
    text-align: center;
    font-size: 10pt;
}

/*** Logger Flag Legend ***/

table.flag {
    background-color: #F6F6DE;
    border: solid 2px black;
    padding: 0px 0px 0px 0px;
    border-collapse: collapse;
}

th.flag {
    font-size: larger;
    background-color: #EFE3C6;
    color: #000000;
    padding: 3px 0px 4px 0px;
    border-bottom: solid 1px #000000;
}

.dateLabel {
    /*background-color:#18305A;
	color:#FFFFFF;*/
    /*position:absolute;*/
    /*z-index: 100;*/
    padding: 5px;
    float: right;
    display: none; /* hidden by default */
    /*filter: alpha(Opacity=100, FinishOpacity=70, Style=3);*/
}

.dateLabel a {
    /*color:#FFFFFF;*/
    padding: 5px;
}

.updatedTimeMessage {
    display: none; /* hidden by default */
}

.siteDiv {
    font-size: 10px;
    background-color: #CCCCCC;
    position: absolute; /* note the parent is relative, so these show up absolute in relation to the parent*/
    border: solid 1px black;
    padding: 5px;
    z-index: 100;
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.siteDivPopup {
    font-size: 10px;
    background-color: #CCCCCC;
    color: #000000;
    position: absolute; /* note the parent is relative, so these show up absolute in relation to the parent*/
    border: solid 1px black;
    padding: 5px;
    z-index: 100;
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

/* SHAPE CUSTOMIZATION CLASSES */
.circle {
    border-radius: 50%;
    padding: 13px;
  
}

.dashed-border {
    border-style: dashed !important;
    border-width: 2px;
}

.dotted-border {
    border-style: dotted !important;
    border-width: 2px;
}

.displayTypeLegend.circle {
    border-style: solid;
}
.displayTypeLegend {
    width: 20px;
    height: 20px;
    margin: 5px;
    padding: 0px;
    margin-left: 15px !important;
}
.displayTypeLegend.square {
    border-style: solid;
}

.displayTypeHeader1 {
    width: 35%;
}
.displayTypeLegend2 {
    width: 100%;
    margin-bottom: 5px;
}
/* more specific z-indexes so higher aqi boxes go on top (note this can stil leave
    higher numbers within a category being covered by lower numbers in the same category.  E.g. 301 covering up a 399.
    But that's about as good as we can do with just css
*/
.siteDiv.good {
    z-index: 150;
}
.siteDiv.moderate {
    z-index: 200;
}
.siteDiv.unhealthyforsensitivegroups, .siteDiv.sensitive {
    z-index: 250;
}
.siteDiv.unhealthy {
    z-index: 300;
}
.siteDiv.veryunhealthy {
    z-index: 400;
}
.siteDiv.hazardous {
    z-index: 500;
}
/* make entire siteDiv visible on hover over */
.siteDiv:hover {
    z-index: 1000 !important;
}

/* Google map puts our siteDivs inside infoBox > div, and the infoBox has a transform:translateZ(0px) which we need to defeat in order for the z-index to work */
.infoBox {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}

.aqiLegendPanelLevelValueCell {
    /* shown by default, some customers may want to hide it */
    /*display: none;*/
}

.notify {
    background-color: #000000;
    color: #FFFFFF;
}

tr.good td a {
    /* background-color: #00FF00; */
}

tr.moderate td a {
    background-color: #FFFF00;
}

tr.sensitive td a {
    background-color: #E08000;
}

tr.unhealthy td a {
    background-color: #FF0000;
    color: #FFFFFF;
}

tr.veryunhealthy td a {
    background-color: #A00040;
    color: #FFFFFF;
}

tr.hazardous td a {
    background-color: #800040;
    color: #FFFFFF;
}

tr.unknown td a {
    background-color: #CCCCCC;
    color: #000000;
}

td.siteName {
    /*background-color: #18305A !important; 
     color: #FFFFFF !important;*/
}

td.unknown {
    text-align: center;
    background-color: #CCCCCC !important;
    color: #000000 !important;
}

td.good {
    background-color: #00FF00 !important;
    color: #000000 !important;
}

td.moderate {
    background-color: #FFFF00 !important;
    color: #000000 !important;
}

td.sensitive {
    background-color: #E08000 !important;
    color: #000000 !important;
}

td.unhealthy {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
}

td.veryunhealthy {
    background-color: #A00040 !important;
    color: #FFFFFF !important;
}

td.hazardous {
    background-color: #800040 !important;
    color: #FFFFFF !important;
}

.tabularLink:link, .tabularLink:active, .tabularLink:visited, .tabularLink:hover {
    TEXT-DECORATION: underline;
    /*background-color: #18305A; 
                                                                                    color: #FFFFFF;*/
}

.windbarb {
    position: absolute; /* note the parent is relative, so these show up absolute in relation to the parent*/
    display: inline-block;
    z-index: 100;
    /*background-color: transparent !important;*/
    /*border: none !important;*/
    /*border: solid 1px black;*/
    /*background-color: #ffffff !important;*/
    /*background-color: rgba(255,255,255,0.3) !important;*/
    /* note these negative margins should be HALF of the image size specified below.  This is so the image is more correctly centered instead of hanging off to the right/bottom */
    margin-top: -35px;
    margin-left: -35px;
}

.windbarb img {
    /*background-color: #ffffff;
background-color: rgba(255,255,255,0.5);*/
    /* note when changing these you may also need to adjust the margin-top and margin-left above to center up the image correctly */
    height: 70px;
    width: 70px;
}

/* Air Quality divs on Map Page and their colors*/

div.good, div.moderate, div.sensitive, div.unhealthyforsensitivegroups, div.unhealthy, div.veryunhealthy, div.hazardous, div.unknown {
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

div.good {
    background-color: #00E000;
}

div.moderate {
    background-color: #FFFF00;
}

div.sensitive, div.unhealthyforsensitivegroups {
    background-color: #E08000;
}

div.unhealthy {
    background-color: #FF0000;
}

div.veryunhealthy {
    background-color: #A00040;
}

div.hazardous {
    background-color: #800040;
}

div.unknown {
    background-color: #CCCCCC;
    color: #000000;
}

div.unspecified {
    background-color: #CCCCCC;
    color: #000000;
}

.good {
    background-color: #00E000;
    color: #000000;
}

.moderate {
    background-color: #FFFF00;
    color: #000000;
}

.sensitive, .unhealthyforsensitivegroups {
    background-color: #E08000;
    color: #000000;
}

.unhealthy {
    background-color: #FF0000;
    color: #FFFFFF;
}

.veryunhealthy {
    background-color: #A00040;
    color: #FFFFFF;
}

.hazardous {
    background-color: #800040;
    color: #FFFFFF;
}

.unknown {
    background-color: #CCCCCC;
    color: #000000;
}
.unspecified {
    background-color: #CCCCCC;
    color: #000000;
}

#popupDiv {
    position: fixed;
    border: 1px solid #B8B8B9;
    padding: 2px;
    /*background-color: #FFFFFF;*/
    font-family: Verdana, Helvetica;
    text-align: left;
    font-size: 11px;
    /*color:#3D4D58;*/
    visibility: hidden;
    /*width: 150px;*/
    z-index: 1001;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    white-space: nowrap;
}

.initiallyHidden {
    display: none;
}

.tabularDisplayDiv {
    position: absolute;
    padding: 2px;
    /*background-color: #FFFFFF;*/
    font-family: Verdana, Helvetica;
    text-align: left;
    font-size: 11px;
    z-index: 1000;
    /*top: 100px;*/
    /*left: 2px;*/
    margin-right: 10px;
}

/* TODO: is this even used? */
#AQILegend {
    position: absolute;
    border: solid 1px #FFFFFF;
    /*background-color: #FFFFFF;*/
    font-family: Verdana, Helvetica;
    text-align: center;
    font-size: 11px;
    z-index: 700;
    /* filter: Alpha(Opacity=80, FinishOpacity=70, Style=1);    */
    -moz-opacity: .75;
    opacity: .75;
}

/* TODO: is this even used? */
#ClimatePickList {
    /*position: absolute;*/
    font-family: Verdana, Helvetica;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    /* background-color:#18305A; */
    /*color:#FFFFFF;*/
    z-index: 1000;
}

table.tabularDisplay td {
    padding: 2px;
}

.forecastHeader {
    background-color: #000000;
    color: #FFFFFF;
}

table.tabularDisplay th, .tabularSitesNames {
    padding: 5px;
    /*background-color: #000000;
	color: #FFFFFF;*/
    background-color: #000000;
    color: #FFFFFF;
}


.hideThis {
    display: none;
    visibility: collapse;
}

/* AQI Color code */
table.AQILegend {
    border-collapse: collapse;
}

    table.AQILegend tr td {
        padding: 0px;
        margin: 0px;
    }

.linkRow {
    margin-bottom: 5px;
}
.link {
    font-weight: bold;
    /* text-align: center; */
}

    .link:link, .link:active, .link:visited, .link:hover {
        TEXT-DECORATION: underline;
        /*background-color: #18305A; color: #FFFFFF;*/
    }

.siteDisplayLabel {
    padding-right: 10px;
}

.siteDisplayValue {
    padding-right: 10px;
	text-align: right;
}
.siteDisplayUnit {
	padding-right: 10px;
}

.siteDisplayValue {
    /* text-align: left; */
}

.siteDisplayHeaderBlock .row {
    margin-right: 15px;
    margin-left: 15px;
}

.siteDisplayHeaderBlock {
	display: inline-block;
	vertical-align: top;
	/* text-align: center; */
	margin: 15px 15px 15px 0px;
}

.siteDisplayHeaderBlockGroup {
    display: inline-block;
    vertical-align: top;
}

.monitoredParameterList table thead tr {
    font-weight: bold;
}
.monitoredParameterList table thead tr:nth-child(2) {
    font-size: .9em;
}

.monitoredAqiParameterList table thead tr {
    font-weight: bold;
}

.monitoredAqiParameterList table thead tr:nth-child(2) {
    font-size: .9em;
}

.meteorologyParameterList table thead tr {
    font-weight: bold;
}

.meteorologyParameterList table thead tr:nth-child(2) {
        font-size: .9em;
    }


.siteStaticInfoHeader {
    font-weight: bold;
}
.siteStaticInfoContent {
}

    .SiteDisplayLocationLabel {
        font-weight: bold;
    }

.siteNameWrapper {
	display: inline;
}
.SiteDisplayName {
    /* text-align: center; */
    font-weight: bold;
    font-variant: initial;
    display: inline; /* so the timestamp can float next to it*/
}
.siteDisplaySiteTimestamp {
    float: right;
}

.siteDisplaySiteInfoCell {
    vertical-align: top;
}

    .siteDisplaySiteInfoCell table {
        text-align: left;
    }
.siteDisplayHeader {
    /*background-color:#666666;
	color: #FFFFFF;*/
}

.listHeader {
    font-weight: bold;
    white-space: nowrap;
}

.hidecolumn {
    display: none;
    visibility: collapse;
}

.hide {
    display: none;
    visibility: collapse;
}

.forecast {
    font-weight: bold;
    /*background-color:#000000;*/
}

.picklist tr td {
    text-align: left;
}


/* Forecast Editor */

.forecastTitle {
    text-align: center;
    font-weight: bold;
}

.forecastSiteName {
    text-align: right;
    font-size: 10px;
    padding-right: 4px;
}

.today {
    padding-left: 2px;
    background-color: #CCCCCC;
    color: #000000;
}


.tomorrow {
    padding-left: 2px;
    background-color: #CCCCCC;
    color: #000000;
}

input, select {
    /* background-color: #72A8A8; */
    font-weight: bold; /* color:#333333; */
}

.next {
    padding-left: 2px;
    background-color: #CCCCCC;
    color: #000000;
}

.picklistPanelContainer {
    /* display:table is to fix a weird issue where the picklists were not clickable because the map somehow is in front of them. very strange. */
    display: table;
    width: 100%;
}

.ClimatePicklistPanel {
    /*width: 300px;*/
    /* text-align: right; */
    /*padding-left: 10px;*/
    /* float: left; */
    display: inline-block;
}

.LayerPicklistPanel {
    /*width: 300px;*/
    /* text-align: right; */
    padding-left: 10px;
    /* float: left; */
    display: inline-block;
}

.SitePicklistPanel {
        /*width: 300px;*/
    /* text-align: right; */
    padding-left: 10px;
    /* float: left; */
    display: inline-block;
}

.AqiTableLinkPanel {
    /*width: 300px;*/
    /* text-align: right; */
    padding-left: 10px;
    /* float: left; */
    display: inline-block;
}

.climateZoneLabelCell {
    vertical-align: middle;
    text-align: right;
    padding-left: 10px;
    /*padding-right: 5px;*/
}


.favoritesDropDownPanelContainer {
    display: inline-block;
    padding-left: 10px;
}


.layerLabelCell {
    vertical-align: middle;
    text-align: right;
    /*padding-right: 5px;
    padding-left: 10px;*/
}

.dataHistoryLink {
    text-decoration: underline;
    text-align: center;
}

.mapContainer {
    position: relative;
    clear: both;
}
.geoMapTabContainer {
    position: relative;
    min-height: 200px; /* so the screen looks ok while map/images are loading */
}

.AQILegendPanel {
    /*display: inline-block;*/
    bottom: 20px;
    right: 20px;
    position: absolute;
}

.googleMapPageContainer .AQILegendPanel {
    right: 55px;
}

/* some extra settings to play nice with bing map */
.AQILegendPanelBing {
    z-index: 1000;
    bottom: 27px;
}

/* some extra settings to play nice with openstreetmap */
.AQILegendPanelOsm {
    bottom: 25px;
}

/* some extra settings to play nice with thinkgeo map */
.AQILegendPanelGeo {
    z-index: 1000;
    bottom: 27px;
}

/* When non-AQI layer selected, hide the legend */
.AQILegendPanel.NonAQI {
    display: none;
}
/* When AQI layer selected, show the legend */
.AQILegendPanel.AQI {
    display: block;
}

@media (max-width: 500px) {
    .AQILegendPanel {
        font-size: smaller;
    }
}


.AQILegend2 {
    border: solid 1px #FFFFFF;
    background-color: #FFFFFF;
    font-family: Verdana, Helvetica;
    text-align: center;
    /*font-size: 11px;*/
    font-size: smaller;
     /* filter: Alpha(Opacity=80, FinishOpacity=70, Style=1);    */
    -moz-opacity: .75;
    opacity: .75;
    width: 100%;
}

table.AQILegend2 {
    border-collapse: collapse;
}

table.AQILegend2 tr td {
    /*padding: 0px;*/
    margin: 0px;
}

.aqiLegendHeader {
    padding-bottom: 5px;
    text-decoration: underline;
}

.forecastLegendHeader {
    padding-bottom: 5px;
    text-decoration: underline;
    background-color: #18305A;
    color: #FFFFFF;
    text-align: center;
}

.aqiLegendPopupContentDiv {
    padding: 4px; 
    border: 2px; 
    border-color: #333333; 
    border-style: solid; 
    border-width: thin;
}

.aqiCategoryStrong {
    font-weight: bold;
}

.valueDisplay {
    white-space: nowrap;
}

.favoritesPanelCell {
    /*width: 90%;
    padding-left: 10px;
    vertical-align: top;*/
}

.mapPageFooter {
    text-align: center;
}

.footerTableRow {
    width: 100%;
    vertical-align: top;
}

.footerTable {
    /*padding: 10px;*/
    width: 100%;
}

.lowerNavPanel {
    text-align: left;
}

#Footer {
    width: 540px;
    text-align: right;
    padding: 20px;
}

.map {
    display: inline-block;
}

.spinner {
    background: transparent url("../images/spinner_30x30.gif") no-repeat scroll center center;
    min-height: 60px;
    min-width: 60px;
}

.map img {
    /* set minimum size so it will look right even if it takes a second to load the image */
    /*min-height: 500px;
    min-width: 928px;*/
    /* note the browser resolves the image path relative to the current css file */
    /*background: transparent url("../images/spinner_30x30.gif") no-repeat scroll center center;*/
}

.aqiLoopImage {
    /* set minimum size so it will look right even if it takes a second to load the image */
    /*min-height: 500px;
    min-width: 928px;*/
    background: transparent url("../images/spinner_30x30.gif") no-repeat scroll center center;
    min-height: 60px;
    min-width: 60px;
    max-width:100%
}

.specialLink {
    top: 150px;
    left: 150px;
    position: absolute;
    border: 4px solid red;
    padding: 40px;
    background-color: #FFFFFF;
    font-family: Verdana, Helvetica;
    text-align: center;
    color: green;
    font-size: large;
    z-index: 800;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    white-space: nowrap;
}

.aqiBody {
    position: relative; /* to allow the site divs to be positioned absolutely with respect to this container*/
}

.ErrorDisplay {
    overflow: scroll;
    position: absolute;
    top: 40px;
    left: 285px;
    width: 250px;
    height: 220px;
    padding: 10px;
    background-color: #FFFFFF;
    font-family: Verdana, Helvetica;
    text-align: left;
    font-size: 11px;
    z-index: 2000;
    color: Black;
    margin-right: 10px;
    border: solid 3px Red;
}

.errorDisplayDiv {
    font-size: larger;
    padding-bottom: 5px;
    margin-left: -10px;
    margin-top: -10px;
    width: 100%;
    background-color: Red;
    color: White;
    font-weight: bold;
    text-align: center;
}

.errorDisplaySpan {
    padding: 10px;
    font-weight: normal;
    text-decoration: underline;
}

.aqiTableClose {
    color: Black;
    background-color: white;
    display: none;
}

#tabularDisplay {
    z-index: 1000;
    text-align: center;
}

.forecastPanelHeader {

}

.forecastPanelTable {

}

.forecastPanelSiteNameCell {
    text-align: right;
}

.forecastPanelAqiCategoryCell {
    padding-left: 5px;
    padding-right: 5px;
    /*padding: 3px;*/ 
    border: outset;
    /*margin: 20px 40px 20px 40px;*/
    /*padding: 20px;*/
    text-align: center;
}

.siteForecastPanelHeader {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.forecastCaption {
    display: inline;
    font-weight: bold;
}

.forecastValue {
    display: inline;
}

.forecastDetailText {
    /*font-size: small;*/
}

.siteForecastParameterDisplayInfo {
    /*font-size: small;*/
}

.olPopup {
    /* force the height:auto - without this the site marker popups won't show data if it goes above the default height */
    height: auto !important;
}

.olPopupContent {
    /* force the height to 100% */
    height: 100% !important;
}

.siteMarkerPopup {
    padding: 5px 5px 5px 5px;
}

    .siteMarkerPopup img {
        height: 40px;
        width: 40px;
        vertical-align: middle;
        margin: 0px 5px 0px 0px;
    }

.siteMarkerPopupDataTable {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #18305A;
}

table.siteMarkerPopupDataTable td {
    padding-left: 5px;
    padding-right: 5px;
}

.siteMarkerPopupDataTable tr:nth-child(odd) {
    background-color: #EEE;
}

.siteMarkerPopupNavigateToContainer {
    border-collapse: collapse;
    border: 1px solid #18305A;
}

.siteMarkerPopupQuickLinkContainer {
    border-collapse: collapse;
    border: 1px solid #18305A;
}

.siteMarkerPopupNavigateToLabel {
        background-color: #EEE;
    font-weight: bold;
}

.siteMarkerPopupShowSiteDisplayQuickLink {
    
    padding: 2px 5px 2px 0px;
}

.siteMarkerPopupShowConcentrationQuickLink {
    
    padding: 2px 5px 2px 0px;
}

.siteMarkerPopupShowSiteDisplayPageLink {
    
    padding: 2px 5px 2px 0px;
}

.siteMarkerPopupShowConcentrationPageLink {
    
    padding: 2px 5px 2px 0px;
}

.siteDisplaySiteInfoRow {
    margin: auto;
    /* text-align: center; */
}

.siteAqiTable {
/*    max-width: 960px;*/
    /* margin: auto; /* center table in the container !1! */
}

.siteAqiTable td, th {
    padding: 2px;
    text-align: left;
}

.siteForecastTable {
    
}

.geoMapPageControl {
    width: 100%;
    height: 100%;
}

.geoMapFooterMessage {
    font-size: .8em;
}

/* example of changing the site display stacking order 
.siteStackingPanel {
    display: flex;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.siteImageBlock {
    order: 0;
}
.siteDisplayLocationBlock {
    order: 1;
}
.monitoredAqiParameterList {
    order: 2;
}
.monitoredParameterList {
    order: 3;
}
.meteorologyParameterList {
    order: 4;
}
.siteStaticInfoContainer {
    order: 5;
}
*/

.infoWindowDiv {
    /*z-index: 1001;*/
    /*height: 200px;
    width: 200px;*/
    background-color: white;
    /* hoist up the info window so it is a few pixels above the point and doesn't cover our marker */
    /*padding-bottom: 10px;*/
    margin-bottom: 11px;
}

.infoWindowHeader {
    background: #00A2E8;
    color: white;
    /*color: #00A2E8;*/
    /*background: white;*/
    padding: 5px;
}

.contourMapLinkPanel {
    float: left;
    padding-left: 10px;
}


/*.legendWrapper {
    float: left;
}*/
.favoritesWrapper {
	display: grid;
}

.geoMapHomeLinkPanel {
}

/* fugly code to make the google map infowindow look nicer. this is fragile and relies on some jquery adding classes to the underlying google maps div elements. */
.infowindowSiblings {
    display: none;
}

.mapBarChartContainer {
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/************ Custom CSS to make map site markers balloons instead of rectangles
 ************ Just copy this to your custom.css (or wherever) 
.siteDiv {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 40px;
    -moz-border-radius: 40px 40px 0 40px;
    -ms-border-radius: 40px 40px 0 40px;
    border-radius: 40px 40px 0 40px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
}

.siteDiv:after {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.siteDiv > span {
    position: relative;
    display: block;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.siteDiv > .aqiValueDisplay {
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    font-weight: bold;
    font-size: larger;
        margin-top: 4px;
    margin-left: 10px;
}

.valueDisplay {
    white-space: normal;
}
/*
*/

.forecastTablePanelPanel {
    /* padding-bottom: 5px; */
}
.forecastTablePanelTable {
    border-spacing: 2px;
    border-collapse: collapse;
    width: 100%;
}
.forecastTablePanelTable thead {
    border-style: hidden;
}
.forecastTablePanelTable td {
    border: 1px black solid;
}
.forecastTablePanelTable td, th {
    padding: 2px;
    text-align: left;
}
.forecastTablePanelTable .forecastTablePanelHeader1 th {
    background-color: white;
    color: black;
    border: none;
}
.forecastTablePanelTable .forecastTablePanelHeader2 th {
    background-color: black;
    color: white;
    border: 1px white solid;
}
.forecastTablePanelTable tbody {
    border-style: hidden;
}
.aqiTablePanel table {
    border-spacing: 2px;
    border-collapse: collapse;
    width: 100%;
}
.aqiTablePanel table thead {
    border-style: hidden;
}
.aqiTablePanel table tbody {
    border-style: hidden;
}
.aqiTablePanel table td {
    border: 1px black solid;
}
.aqiTablePanel td, th {
    padding: 2px;
    text-align: left;
}
.aqiTablePanel table .aqiTablePanelHeader1 th {
    background-color: white;
    color: black;
    border: none;
}
.aqiTablePanel table .aqiTablePanelHeader2 th {
    background-color: black;
    color: white;
    border: 1px white solid;
}

.av-popup-mode .siteDisplayImage {
    max-height: 120px;
}

.av-iframe-mode .siteDisplayImage {
    max-height: 600px;
}

/*custom css for multi image display*/
.grid3x3 {
/*    width: 46%;*/
/*    min-width: 500px;*/
/*    height: 46%;*/
	display: inline-block;
	max-width: 600px;
}

.grid3x3Image {
	width: 33%;
	height: 33%;
	float: left;
	margin: .1%;
}

.hiddenImage {
	visibility: hidden;
	width: 0%;
	height: 0%;
}

.visibleImage {
	visibility: visible;
	width: 33%;
	height: 33%;
}

.siteMultiImageDisplaySiteInfoBlock {
    display: inline-block;
    vertical-align: top;
    /* text-align: center; */
    margin: 15px 15px 15px 15px;
    /*width: 20%*/
}

.siteMultiImageDisplayHeaderBlock {    
    vertical-align: top;
    /* text-align: center; */
    margin: 15px 15px 15px 0px;
}

.siteMultiImageDisplayMonitoredParameterList {   
    padding-top: 10px;
    padding-bottom: 10px;
}