/* style sheet for lexmaweather.info */
/* css/main.css 20250625
 20250625 moreAeris weather -> Xweather
 20250516 adding Windy radar
 20250422 Aeris weather -> Xweather
 20250328 increase shadow for date/time for better visibility
 20241120 social media tweaking
 20241115 add bluesky link
 20230226 all home page blocks now initially closed by CSS
 20221122 Mastodon timeline support
 20221112 Mastodon support
 20220923 fix width for displayed images
 20220918 twitter timelines changed - need css to center
 20220917 fix about page table layout (weird safari-only problem)
 20220419 fixed comment
 20220411 added text links to US advisory map for territories offices
 20220110 increase font size for feels like so it's more readable
 20210308 add forecast overview using synopsis section from AFD
 20200930 about page PWS table - clear left content when narrow
 20200913 add zoneCountyMap definitions
 20200823 added mapPage
 20200821 genericized forecast page map name
 20200818 center table on about page
 20200816 forecast page map additions
 20200710 add UV to home current conditions and banner ticker
 20200704 table for pws networks on about page
 20200611 fixed pws display for < 750px; tweaks to aeris logo
 20200609 added aeris logo styling
 20190929 support for adding link to forecast office
 20190811 moved forecastMap styling to main.css
 20190810 added nwsProductMeta definitions
 20190809 replace alert archive form with date picker
 20190729 fix <a> styling for forecast warnings (be more specific)
 20190708 forecast page hourly forecasts
 20190620 home page hourly forecasts
 20190614 support for selection of other forecast locations
 20190317 max height for displayed image 90% vh
 20190313 fix to GOES height
 20190303 limit height of GOES east image
 20190216 graphical forecast support
 20181204 fixed usalerts map div widths so alaska/hawaii do not overlap continental
 20181115 widened homePrecipGroup
 20181108 adds for alert archive page
 20181008 put in space for feels like when not displaying so that screen doesn't jump
 20180921 center contents of precip and extremes panes via flex
 20180816 get rid of shadow on forecast discussion text on home and forecast page
 20180704 made conditionsSmallerP to be same as feels like font size
 20180614 json alerts / changed font to arial
 20180527 added conditionsSmallerP
 20180524 support for alerts changes to JSON
 20180519 changed ticker background to contrast from base background color
 20180518 alert box changes (anticipating alerts rewrite)
 20180516 restyling to fix larger browser windows
 20180511 mapbox and leaflet integration
 20180425 added jsEnabled
 20180417 reCAPTCHA for contact page
 20180413 added margins for homeSevere paragraphs
 20180411 added jQuery UI tabs support for home page
 20180409 changes to US alerts map
 20180406 added support for homeSnow
 20180401 added instaneous wind speed to home page current conditions
 20180311 left align text in homeSevere box
 20180304 change map legend types to class
 20180223 advisory / severe google map support
 20180201 NWS details map support
 20171103 Twitter block added to home page
 20171014 Updates to top banner image and text
 */

/* HTML5 fixup for new block elements that may be unrecognized by older browsers */
article, aside, figure, figcaption, footer,
header, main, nav, section, summary
{
  display: block;
}

html, body
{
  margin: 0;
  padding: 0;
}

body
{
  color: black;
  background-color: #F3F2EB;
  font-family: verdana, helvetica, arial, sans-serif;
  font-family: arial, helvetica, sans-serif;
}

a
{
  text-decoration: none;  /* no underline */
  color: #336699;
}

pre  /* have all preformatted text wrap */
{
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  font-size: 110%;
}


/* content width default - for > 1000 pixel windows */

/* each page's content is framed within a fixed div in the browser window */
#pageWrapper
{
  /* fill to top/bottom of the browser window */
  margin: 0;
  padding: 0;
  margin-right: auto;
  margin-left: auto;
/*  width: 1000px; */
  width: 100%;
}

/* 1000 < pixels: fill window horizontally */
/*
@media screen and (max-width: 1000px)
{
  #pageWrapper
  {
    width: 100%;
    margin: 0;
  }
}  max-width 1000px 
 */

#topstuff
{
  position: relative;  /* so we can position hamburger absolute */
  width: 100%;
  margin: 0;
}

#topstuff a
{
  text-decoration: none;
}

/* banner image: fill horizontally */
#pageBanner
{
  position: relative; /* so containing items can be positioned absolutely */
  width: 100%;
  background-color: #3173B1;
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
  background-image: url('../images/banner.jpg?v=2');
  background-size: cover;
}

#pageBanner #siteName
{
  padding-top: 1ex;
}

#pageBanner h1
{
  margin: 0;
  padding-top: .2ex;
  padding-bottom: 1.5ex;
  color: #F0FFF0;
  text-align: center;
  text-shadow: 3px 3px 3px black;
  line-height: 85%;
  font-size: 600%;
  font-weight: normal;
}

#pageBanner .subHeaderLeft {
  color: #F0FFF0;
  float: left;
  clear: both;
  position: absolute;
  left: 3%;
  bottom: 10%;
  margin: 0;
  padding: 0;
  max-width: 38%;
}

#pageBanner .subHeaderLeft p
{
  margin: 0;
  font-size: 140%;
  text-shadow: 1px 1px 1px black;
}

#pageBanner .subHeaderRight
{
  color: #F0FFF0;
  float: right;
  position: absolute;
  bottom: 13%;
  right: 18%;
  font-size: 125%;
  text-align: right;
  margin:  0;
  padding:  0;
  text-shadow: 3px 3px 3px black;
}

#pageBanner .headerTemp  /* temperature */
{
  color: #F0FFF0;
  float: right;
  position: absolute;
  bottom: 5%;
  right: 3%;
  font-size: 300%;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
}

/* resize banner fonts based on screen width */
@media screen and (max-width: 900px)
{
  #pageBanner h1 { font-size: 450%; }
  #pageBanner .subHeaderLeft p { font-size: 126%; }
  #pageBanner .subHeaderRight { font-size: 108%; }
  #pageBanner .headerTemp { font-size: 270%; }
}
@media screen and (max-width: 800px)
{
  #pageBanner h1 { font-size: 400%; }
  #pageBanner .subHeaderLeft p { font-size: 112%; }
  #pageBanner .subHeaderRight { font-size: 96%; }
  #pageBanner .headerTemp { font-size: 240%; }
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  #pageBanner h1 { font-size: 300%; padding-bottom: 0; }
  #pageBanner .subHeaderLeft p { font-size: 120%; }
  #pageBanner .subHeaderRight { font-size: 96%; }
  #pageBanner .headerTemp { font-size: 240%; }
  #pageBanner .subHeaderLeft,
  #pageBanner .subHeaderRight,
  #pageBanner .headerTemp { float: none; position: relative; left: auto;
    right: auto; bottom: auto; text-align: center; max-width: none; }
  #pageBanner .subHeaderRight { padding-bottom: 1ex; }
}

@media screen and (max-width: 500px)
{
  #pageBanner h1 { font-size: 250%; padding-bottom: 0; }
  #pageBanner .subHeaderLeft p { font-size: 125%; }
  #pageBanner .subHeaderRight { font-size: 120%; }
}

/* banner ticker.  additional definitions in webticker.css */
#bannerTickerWrapper
{
  clear: both;
  float: none;
  visibility: hidden;
  /* border: .1em solid #808080; */
  /* background-color: #f9f9f9; */
  background-color: #f0f0f0;
  padding-bottom: .5ex;
}

.bannerTickerLabel
{
  margin-left: 1em;
  color: #a00000;
}

#bannerTicker #uvTickerWord
{
  font-size: 80%;
}

/* common content styling defaults for pages */
#topAlerts,
#homeContent,
#forecastContent,
#advisoryContent,
#aboutContent,
#statusContent,
#contactContent,
#pwsContent,
#regionalContent,
#trendsContent,
#cocorahsContent,
#nwsContent,
#conditionsContent,
#indoorContent,
#imageContent,
#alertArchiveContent,
#mapContent
{
  overflow: hidden;
  background-color: #f9f9f9;
  /* border: .25em solid #808080; */
/*
  border-top: .25em solid #808080;
  border-bottom: .25em solid #808080;
 */
  padding: 0;
}

#astronomyContent
{
  overflow: hidden;
  color: white;
  background-color: black;
  /* border: .25em solid #808080; */
  border-top: .25em solid #808080;
  border-bottom: .25em solid #808080;
  padding: 0;
  padding-bottom: 2ex;
}


/* top of page alerts (generated by nws-alerts.php) */
#topAlerts
{
  width: auto;
}

#topAlerts > div
{
  width: 100%;
/*  border: solid thin #000000; */
/*  margin: 0px auto 0px auto; */
}

#topAlerts > div > div
{
  text-align: center;
  padding: .5ex 0;
}

/* home page content */
#homeContent
{
  /* background-color: #808080; */
}

.homeBlock
{
  float: left;
  width: 99.1%;
  width: 100%;
  background-color: #f9f9f9;
  margin: .1em 0;
  padding: .2em 0;
  /* border: .1em solid #808080; */
  /* border-top: .1em solid #808080; */
  border-bottom: .2em solid #808080;
  font-size: 95%; /* default - change specifics below */
  text-align: center; /* ditto */
}

@media screen and (max-width: 700px)
{
  #homeContent,
  #homeCurrent,
  #forecastContent,
  #advisoryContent,
  #aboutContent,
  #statusContent,
  #contactContent,
  #pwsContent,
  #regionalContent,
  #trendsContent,
  #cocorahsContent,
  #nwsContent,
  #conditionsContent,
  #indoorContent,
  #imageContent,
  #astronomyContent,
  #alertArchiveContent,
  #mapContent
  {
    margin-top: 0;
  }
}

.homeBlock h2
{
  width: 100%;
  text-align: center;
  margin: 0;
  margin-bottom: .4ex;
  padding: 0;
}

.homeBlock .collapse
{
  display: none; /* initially all blocks closed */
}

.homeBlockIcon,
.openIcon,   /* used to open/collapse blocks */
.collapseIcon
{
  text-align: right;
  display: none;  /* javascript will reveal */
  cursor: pointer;
}

div.extrasLink
{
  margin: 1ex 0;
  padding: 0;
  text-shadow: .4px .4px black;
}

div.extrasLink h3
{
  margin: 0;
  padding: 0;
}

div.extrasLink .nwsProduct
{
  text-shadow: none;
}


/* home page tabs */
.homeTabShowNarrow
{
  display: none;
}

.homeTabShowWide
{
  display: inline;
}

@media screen and (max-width: 550px)
{
  .homeTabShowNarrow
  {
    display: inline;
  }
  .homeTabShowWide
  {
    display: none;
  }
}

.homeTab .homeTabUl
{
  display: inline-block;
}

.homeTab .homeTabUl .ui-state-active
{
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

.homeTab .ui-widget-header
{
  color: black;
  background-color: #f9f9f9;
  border-top: none;
  border-right: none;
  border-left: none;
}

.homeBlock .ui-widget.ui-widget-content,
#forecastContent .ui-widget.ui-widget-content
{
  border: none;
}

.homeBlock .ui-tabs,
.homeBlock .ui-tabs .ui-tabs-panel,
#forecastContent .ui-tabs,
#forecastContent .ui-tabs .ui-tabs-panel
{
  padding: 0;
}

.homeTab .ui-widget-content,
.homeBlock .ui-widget-content,
#forecastContent .ui-widget-content
{
  color: black;
  background-color: #f9f9f9 !important;
}

.homeBlock .ui-widget-content a,
#forecastContent .ui-widget-content h2 a
{
  text-decoration: none;  /* no underline */
  color: #336699;
}

/* current conditions */

.conditionLabel
{
  color: #a00000;
}

#localConditions
{
  margin: 0;
  margin-top: 1ex;
  padding: 0;
  display: flex; /* makes this a flex container, 100% width */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center; /* centers flex items in container */
}

.localConditionsPair
{
  margin: 0;
  padding: 0;
  display: flex; /* makes this a flex container, 100% width */
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center; /* centers flex items in container */
}

.localConditionsPair > div
{
  width: 15em; /* default width */
  margin: 0;
  margin-bottom: 1ex;
/*  flex-shrink: 0; */
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */
}

#localConditions #conditionsAndTemp
{
  width: 17em;
  margin-left: auto;
  margin-right: auto;
}

#conditionsAndTemp #conditions
{
/*  float: left; */
  float: right;
  width: 39%;
  width: 45%;
  margin: 0;
}

#conditions .conditionsIcon
{
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  width: 5em;
}

#conditions p
{
  font-size: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

#conditionsAndTemp #temperature
{
  float: right;
  width: 53%;
  margin: 0;
  text-align: center;
}

#temperature .currentTempF
{
  font-size: 180%;
  margin: 0;
  padding: 0;
}

#ajaxtemparrow > img  /* up / down arrow */
{
  margin: 0 0 0 .5em;
  height: 1ex;
}

#temperature .currentTempC
{
  font-size: 100%;
  margin: 0;
  padding: 0;
}

#temperature .feelsLike,
#temperature .feelsLikeSpacer
{
  margin: 0;
  padding: 0;
/*  font-size: 80%; */
}

/*
#conditionsAndTemp #highLow
{
  clear: both;
  float: left;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#highLow p
{
  margin: 0;
}
*/
#localConditions #highLowAndHumidity
{
  margin-left: auto;
  margin-right: auto;
}

/*
#highLowAndHumidity #highLow
{
  clear: both;
  float: left;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#highLow p
{
  margin: 0;
}
*/

#highLowAndHumidity #uvCurrentWord
{
  font-size: 80%;
}

.conditionsNormalP
{
  font-size: 100%;
  margin: .2ex 0;
  padding: 0;
}

.conditionsSmallerP
{
  font-size: 80%;
  margin: .2ex 0;
  padding: 0;
}

.conditionsNormalSpacer
{
  font-size: 15%;
  margin: 0;
  padding: 0;
}

.conditionsNormalP > img,
#ajaxbaroarrow > img
{
  margin: 0 0 0 .5em;
  height: 1.8ex;
}

#localConditions #pressureAndPrecip
{
  margin-left: auto;
  margin-right: auto;
}

#localConditions #currentWindVisibility
{
  margin-left: auto;
  margin-right: auto;
}

#currentWindVisibility #currentWindGraphic
{
  float: right;
  width: 40%;
  margin: 0;
}

#currentWindVisibility #currentWindText
{
  float: right;
  width: 55%;
  margin: 0;
  text-align: left;
}


/* expected snow */
#homeSnow
{
}

#homeSnow .snowTimestamp
{
  margin: 0 1em;
  padding: 0;
  text-align: center;
  font-size: 95%;
  font-style: italic;
}

/* forecast */
#homeForecast
{
}

#forecastTabs .homeTabUl
{
  /* center tabs and extend bottom border to 100% */
  width: 100%;
  display: flex;
  justify-content: center;
}

#homeForecast .forecastDisplayFull,
.homeForecastFullTitle,
#forecastDiscussionText,
#forecastOther,
#forecastSources,
#forecastOtherLocs,
#forecastLocations
{
  display: none;  /* reveal with javascript if full forecast is requested */
}

.homeForecastTitle,
.forecastTitle
{
  margin-bottom: 0;
}

.forecastUpdated
{
  text-align: center;
  margin: 0;
  padding: 0;
}

.forecastWarnings
{
  text-align: center;
  font-size: 110%;
}

#forecastDaily .forecastWarnings a
{
  color: red;
  font-weight: bold;
}

.forecastSynopsis
{
  width: 80%;
  text-align: left;
  margin:0 auto 2ex;
}

.forecastPeriod
{
  margin: 0;
}

.forecastPeriod h4
{
  margin: 0 0 1ex 0;
}

.forecastSummary
{
  float: left;
  width: 33%;
  text-align: center;
  margin: 0;
  margin-right: .5em;
}

.forecastGraphic
{
  width: 35%;
  float: right;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

.forecastDescAndTemp
{
  width: 60%;
  float: right;
  text-align: left;
  font-size: 90%;
  font-weight: bold;
  margin: 0;
  margin-left: 1ex;
}

.forecastShortDesc
{
  float: right;
  width: 100%;
}

.forecastShortDesc p
{
  margin: 0;
}

.forecastTemp
{
  float: right;
  clear: right;
  width: 100%;
}

.forecastTemp p
{
  margin: 0;
  margin-top: .5ex;
}

.forecastDesc
{
  float: right;
  width: 62%;
  margin: 0 1em 1ex 0;
  text-align: left;
}

.forecastDesc p
{
  display: block;
  margin: 0;
}

#forecastFull
{
  width: 100%;
}

#forecastFull h3
{
  margin: 0 0 1ex 0;
}

#forecastDiscussion pre
{
  text-align: left;
}

#forecastDiscussionClose
{
  font-weight: bold;
  text-align: center;
}

#forecastOther p,
#forecastOtherLocs p
{
  margin: .5ex 0;
  padding: 0;
  text-align: center;
}

#zipDialog
{
  text-align: center;
}

#forecastPage #forecastContent
{
  font-size: 95%;
}

#forecastPage .ui-dialog .ui-dialog-titlebar,
#homePage .ui-dialog .ui-dialog-titlebar
{
  text-align: center;
  color: #f0f0f0;
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

#forecastPage .ui-dialog .ui-dialog-title,
#homePage .ui-dialog .ui-dialog-title
{
  float: none;
}

#forecastPage .ui-dialog .ui-dialog-titlebar-close,
#homePage .ui-dialog .ui-dialog-titlebar-close
{
  display: none;
}

#forecastPage .ui-dialog .ui-dialog-buttonpane,
#homePage .ui-dialog .ui-dialog-buttonpane
{
  padding-left: 1em;
}

#forecastPage .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,
#homePage .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
{
  float: none;
  text-align: center;
}

/* hourly forecast */
#hourlyForecast
{
  margin: 1ex 0;
  display: flex; /* makes this a flex container, 100% width */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center; /* centers flex items in container */
}

.hourlyForecastPeriod
{
  margin: 1ex .1em;
  padding: 1ex .4em;
  width: 9em;
  background-color: #fdfdfd;
  text-align: center;
}

.hourlyForecastTime
{
  font-weight: bold;
  margin-bottom: 0.25ex;
}

.hourlyForecastCond
{
  font-style: italic;
  min-height: 5.5ex;
}

#hourlyForecastList
{
  margin: 1ex 0;
  width: 100%;
}
#hourlyForecastList > div
{
  display: flex; /* makes this a flex container, 100% width */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center;
  width: 100%;
  margin: .2ex 0;
}

#hourlyForecastList > div > div
{
/*  width: 15%; */
  width: 12em;
  margin: 0 .3em;
  text-align: center;
}

@media screen and (max-width: 700px)
{
  /* hide things that should only show on narrow screens */
  .hourlyForecastListDayTime
  {
    width: 100%;
  }
}

.hourlyForecastListDay
{
  width: 50%;
/*  text-align: right; */
  float: left;
}

.hourlyForecastListTime
{
/*  text-align: right; */
/*  float: right; */
}

@media screen and (max-width: 800px)
{
  .hourlyForecastListDayTime
  {
    width: 100% !important;
  }

  .hourlyForecastListDay,
  .hourlyForecastListTime
  {
    display: inline;
    float: none;
  }

} /* narrow screen */

#forecastMetaData
{
  margin: 0 1em;
}

#forecastContent #forecastMetaData h3
{
  text-align: left;
}

/* forecast map */

#forecastMap
{
  width: 80%;
  margin: 1ex auto;
  border: 1px solid black;
  background-color: #EFEFEF;
  height: 80vh;
}

#forecastMapPage .ui-dialog
{
  z-index: 500 !important;
}

#forecastMapPage .ui-dialog .ui-dialog-titlebar
{
  text-align: center;
  color: #f0f0f0;
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

#forecastMapPage .ui-dialog .ui-dialog-title
{
  float: none;
}

#forecastMapPage .ui-dialog .ui-dialog-titlebar-close
{
  display: none;
}

#forecastMapPage .ui-dialog .ui-dialog-buttonpane
{
  padding-left: 1em;
}

#forecastMapDialog
{
  text-align: center;
  min-height: 2ex !important;
}

#displayedForecastMap
{
  text-align: center;
  padding: 0;
}

#displayedForecastMap ul
{
  display: inline-block;
}

#displayedForecastMap .ui-tabs-panel
{
  padding: 0; /* tab contents are dummies */
}

#displayedForecastMap .ui-state-active
{
  color: #f0f0f0;
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

/* precipitation */

#homePrecip .homePrecipDisclaimer
{
  margin: 0 1em;
  padding: 0;
  text-align: center;
  font-size: 95%;
  font-style: italic;
}

.homePrecipFlexContainer
{
  margin: 0;
  margin-top: 1ex;
  padding: 0;
  display: flex; /* makes this a flex container, 100% width */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center; /* centers flex items in container */
}

.homePrecipGroup
{
/*  float: left; */
  width: 16em;
  margin: .5ex 1em;
  padding: 0;
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */
}

.homePrecipItem
{
  width: 100%;
  font-size: 110%;
/*  margin: 0 1em; */
  margin: 0;
  padding: 0;
}

.homePrecipData
{
  width: 30%;
  float: right;
/*  text-align: left; */
  text-align: right;
  margin: 0 0 0 .25em;
  padding: 0;
}

.homePrecipLabel
{
  width: 63%;
/*  float: right; */
  float: left;
  color: #a00000;
  text-align: left;
  margin: 0 .25em 0 0;
  padding: 0;
}

.homePrecipSingleItem
{
/*  width: 93%; */
/*  float: right; */
  color: #a00000;
  text-align: left;
  margin: 0 .5em 0 0;
  padding: 0;
}

.homePrecipItem p,
.homePrecipData p,
.homePrecipLabel p
{
  margin: 0;
  padding: 0;
}

/* home page extremes */
.homeExtremeHigh
{
  color: red;
}

.homeExtremeLow
{
  color: blue;
}

.homeExtremeFlexContainer
{
  margin: 0;
  margin-top: 1ex;
  padding: 0;
  display: flex; /* makes this a flex container, 100% width */
  flex-flow: row wrap; /* main direction is in a row; flex items can wrap */
  justify-content: center; /* centers flex items in container */
}

.homeExtremeGroup
{
/*  float: left; */
  width: 28em;
  margin: 0;
  margin-bottom: .5ex;
  padding: 0;
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */
}

.homeExtremeItem
{
  width: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.homeExtremeTime
{
  width: 20%;
  float: right;
  text-align: right;
  margin: 0 0 0 .25em;
  padding: 0 .5em 0 0;
}

.homeExtremeData
{
  width: 18%;
  float: right;
  text-align: left;
  margin: 0 0 0 .25em;
  padding: 0;
}

.homeExtremeLabel
{
  width: 51%;
  float: right;
  color: #a00000;
  text-align: left;
  margin: 0 .25em 0 0;
  padding: 0;
}

.homeExtremeSingleItem
{
  width: 93%;
  float: right;
  color: #a00000;
  text-align: left;
  margin: 0 .5em 0 0;
  padding: 0;
}

.homeExtremeItem p,
.homeExtremeData p,
.homeExtremeLabel p
{
  margin: 0;
  padding: 0;
}

#homeExtremes div#extremesLink
{
  margin: 1ex 0;
  padding: 0;
}

#homeExtremes div#extremesLink h3
{
  margin: 0;
  padding: 0;
}


/* home page UV forecast */
#homeUvHigh
{
  float: left;
  width: 50%;
  margin: 0;
  padding: 0 0 1ex 0;
}

#homeUvCurrent
{
  float: left;
  width: 50%;
  margin: 0;
  padding: 0 0 1ex 0;
}

#homeUvHigh p,
#homeUvCurrent p
{
  margin: 0;
  padding: 0;
  line-height: 160%;
}

#homeUvHigh a
{
  font-weight: bold;
}

/* home almanac */
#homeAlmanacSun
{
  float: left;
  width: 45%;
  margin: 0 0 0 2.5em;
  padding: 0;
}

#homeAlmanacMoon
{
  float: right;
  width: 45%;
  margin: 0 2.5em 0 0;
  padding: 0;
}

/* fix margins of the two above as the screen shrinks */
@media screen and (max-width: 950px)
{
  #homeAlmanacSun { margin: 0 0 0 2em; }
  #homeAlmanacMoon { margin: 0 2em 0 0; }
}

@media screen and (max-width: 800px)
{
  #homeAlmanacSun { margin: 0 0 0 1.5em; }
  #homeAlmanacMoon { margin: 0 1.5em 0 0; }
}

/* TEMP
@media screen and (max-width: 700px)
{
  #homeAlmanacSun { margin: 0 0 0 1em; }
  #homeAlmanacMoon { margin: 0 1em 0 0; }
}
*/

.homeAlmanacImage
{
  width: 95%;
  margin: 0 0 1ex 0;
  padding: 0;
}

#homeAlmanac img
{
  display: block;
  border: 0;
  margin: 0 auto;
  padding: 0;
}

.homeAlmanacItem
{
  width: 95%;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.homeAlmanacLabel
{
  float: left;
  text-align: left;
  width: 35%;
}

.homeAlmanacTime,
.homeAlmanacData
{
  float: left;
}

.homeAlmanacTime
{
  text-align: right;
  width: 52%;
}

.homeAlmanacData
{
  text-align: right;
  width: 52%;
}

.homeAlmanacLabel p,
.homeAlmanacTime p,
.homeAlmanacData p
{
  margin: 0;
  padding: 0;
}

/* radar, satellite, severe, and maps */

#homeSevere p
{
  margin-left: 1em;
  margin-right: 1em;
}

#imageContent h1,
#imageContent p,
#imageContent #displayedImage,
#displayedImage p,
.displayedImage,
.displayedImage p
{
  text-align: center;
}

#displayedImage img,
.displayedImage img
{
  margin-top: 1ex;
  max-width: 80%;
  max-height: 90vh;
}

@media screen and (max-width: 700px)
{
  #displayedImage img,
  .displayedImage img
  {
    width: 95%;
  }
}

#displayedImage p,
.displayedImage p
{
  display: block;
}

#mapSelection ul,
#radarSelection ul,
#satelliteSelection ul,
#severeSelection ul,
#snowSelection ul
{
  list-style-type: none;
  margin: 0 0 1ex 0;
  padding: 0;
}

#displayedMap,
/* #displayedRadar, */
/* #displayedSatellite, */
#displayedSevere
/* #displayedSnow */
{
  display: none; /* revealed by javascript */
}  

#displayedMap img,
#displayedRadar img,
#displayedRadar .frameDiv,
#displayedSatellite img,
#displayedSevere img,
#displayedSnow img
{
  margin-top: 1ex;
  width: 80%;
}

/* this is to handle Windy, which displays in a iframe */
#displayedRadar .frameDiv
{
  margin: -90px auto 0;
  overflow: hidden;
}

#displayedRadar .frameDiv iframe
{
  position:relative;
  display: inline;
  aspect-ratio: 16/9;
  width: 115%;
  pointer-events: none;
  bottom: -90px;
}

#displayedSatellite #goesEast img
{
  width: auto;
  max-width: 80%;
  max-height: 90vh;
}


/* used for maps, satellite */
.homeBlockFirstCol,
.homeBlockSecondCol
{
  float: left;
  width: 45%;
}

#severeOther p
{
  margin: .5ex 0;
  padding: 0;
  text-align: center;
}

#advisorySources
{
  display: none;  /* reveal with javascript */
}

/* at 750px we go to smaller screen mode (was 700) */
@media screen and (max-width: 750px)
{
  .homeBlock
  {
    width: auto;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .homeBlockFirstCol,
  .homeBlockSecondCol
  {
    float: none;
    width: 100%;
  }

  #homeCurrent .localConditionsPair
  {
    width: 100%; /* workaround for safari/web-kit flex bug */
  }

/*
  #homeCurrent #localConditions #conditionsAndTemp,
  #homeCurrent #localConditions #highLowAndHumidity,
  #homeCurrent #localConditions #pressureAndPrecip,
  #homeCurrent #localConditions #currentWindVisibility
  {
    width: auto;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
 */
/*
  #conditionsAndTemp #conditions
  {
    width: 40%;
  }
  #conditionsAndTemp #temperature
  {
    width: 45%;
    text-align: left;
  }
 */
  /*
  #homeCurrent #currentWindVisibility
  {
    width: auto;
    margin-top: 2ex;
  }

  #currentWindVisibility #currentWindText
  {
    width: 45%;
  }
 */
  #forecast h3
  {
    width: 90%;
  }

  .forecastWarnings
  {
    line-height: 180%;
  }

  .forecastSummary
  {
    float: none;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .forecastGraphic
  {
    width: 35%;
  }

  .forecastDescAndTemp
  {
    float: right;
    width: 55%;
  }

  .forecastDesc
  {
    clear: both;
    float: none;
    width: 95%;
    margin: 1ex auto;
  }
/*
  .homePrecipGroup
  {
    float: none;
    width: 90%;
  }
  .homePrecipItem
  {
    font-size: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .homePrecipData
  {
    width: 35%;
  }

  .homePrecipLabel
  {
    width: 50%;
  }

  .homePrecipSingleItem
  {
    width: 85%;
  }
 */
  .homeExtremeGroup
  {
    float: none;
    width: 90%;
  }
  .homeExtremeItem
  {
    font-size: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .homeExtremeTime
  {
    width: 22%;
  }

  .homeExtremeData
  {
    width: 21%;
  }

  .homeExtremeLabel
  {
    width: 45%;
  }

  .homeExtremeSingleItem
  {
    width: 80%;
  }

  #homeUvHigh
  {
    float: none;
    width: 95%;
  }

  #homeUvCurrent
  {
    float: none;
    width: 95%;
  }

  #homeAlmanacSun,
  #homeAlmanacMoon
  {
    float: none;
    width: 95%;
    margin: 2ex auto;
    padding: 0;
  }

  .homeAlmanacItem
  {
    width: 95%;
    margin: 0 auto;
  }
  
  .homeAlmanacLabel
  {
    width: 40%;
  }

  .homeAlmanacTime,
  .homeAlmanacData
  {
    width: 55%;
  }

  #mapSelection li,
  #radarSelection li,
  #satelliteSelection li,
  #severeSelection li,
  #snowSelection li
  {
    /* if you change these settings, you also have to make the same change to touch.js  */
    font-size: 120%;
    padding: .5ex 0;
  }

  #displayedMap img,
  #displayedRadar img,
  #displayedRadar .frameDiv,
  #displayedSevere img,
  #displayedSatellite img,
  #displayedSnow img
  {
    width: 98%;
  }

  #displayedRadar .frameDiv,
  {
    aspect-ratio: 4/3;
  }
} /* media query: narrow (phone) screen */

/* US alerts maps */
#usAlertsMaps
{
  position: relative; /* so alaska / hawaii can be placed absolute */
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

#usAlerts
{
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

#alaskaHawaiiAlertsMaps
{
  position: absolute;
  width: 36%;
  bottom: 0;
  z-index: 1;
}

#alaskaAlerts,
#hawaiiAlerts
{
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 49%;
  border: 1px solid #cccccc;
}

/* alert map legend */

#usAlertsMapLegend
{
  width: 80%;
  margin: 1ex auto;
}

.usAlertsMapColumn
{
  width: 50%;
  float: left;
}

#usAlertsMapLegend .usAlertsMapColumn p
{
  text-align: left;
  margin: .5ex 0;
  padding: 0 0 0 3em;
  text-indent: -2.5em;
}

.wwabox  /* color code box */
{
  border: solid 1px black;
  padding: 0 1em 0 0;
  margin-right: .25em;
}

#usAlertsMapLegend a
{
  font-size: 90%;
}

#usAlertsMapIslands
{
  clear: both;
}

/* 1000 < pixels: slightly smaller for hawaii / alaska so as to not
   infringe on texas */
@media screen and (max-width: 1000px)
{
  #alaskaAlerts,
  #hawaiiAlerts
  {
    width: 17%;
  }
} /* max-width 1000px */

/* 750 < pixels: display under US continental map */
@media screen and (max-width: 750px)
{
  #usAlertsMaps
  {
    width: 95%;
  }
  #alaskaHawaiiAlertsMaps
  {
    position: relative;
    width: 100%;
  }
  #alaskaAlerts,
  #hawaiiAlerts
  {
    float: none;
    margin: 1ex auto;
    width: 75%;
  }
  .usAlertsMapColumn
  {
    width: 100%;
    float: none;
    clear: both;
  }
  #usAlertsMapLegend .usAlertsMapColumn p
  {
    margin: 1ex 0;
    padding: 0 0 0 2.2em;
    text-indent: -1.7em;
  }
}

/* twitter */
#homeTwitter .collapse
{
  padding: 1em 1ex;
}

#homeTwitter iframe
{
  max-height: 75vh;
}

.twitter-timeline
{
  margin-left: auto;
  margin-right: auto;
}

/* mastodon */
/* #homeMastodonMT .collapse,
#homeMastodonMastofeed .collapse, */
#homeMastodon .collapse
{
  padding: 1em 1ex;
}

/*
#homeMastodonMastofeed iframe
{
  margin-left: auto;
  margin-right: auto;
  max-height: 75vh;
  max-width: 95%;
  border: 3px solid;
}
 */

.mastodonFeed
{
  text-align: left;
}

.mastodonFeed
{
  max-width: 520px; height: 80vh; margin: 1ex auto;
}

.mastodonFeed .mt-timeline
{
  width: 100%;
}

.mastodonMeta .mastodonHandle
{
  text-indent: -1rem;
  padding-left: 1rem;
}

/* CONDITIONS PAGE */
#conditionsContent h1,
#conditionsContent h2
{
  text-align: center
}

/* FORECAST PAGE */
#forecastContent
{
}

#forecastContent h2,
#forecastContent h3,
#forecastContent h4
{
  text-align: center;
}

.forecastLocation
{
  font-weight: bold;
  color: #a00000;
}

/* point forecast map */
#forecastPageMap
{
/*  max-width: 200px; max-height: 200px; */
  width: 300px;
  width: 70%;
  height: 300px;
  max-height: 80vh;
  margin: 1ex auto;
  border: 1px solid black;
  background-color: #EFEFEF;
  }

#forecastPageMap .leaflet-control
{
  margin-left: 3px;
  margin-top: 3px;
}

#forecastPageMap .leaflet-control-zoom-in,
#forecastPageMap .leaflet-control-zoom-out
{
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 10px;
}

#forecastPage .ui-dialog
{
  z-index: 500 !important;
}

#forecastPage .ui-dialog .ui-dialog-titlebar
{
  text-align: center;
  color: #f0f0f0;
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

#forecastPage .ui-dialog .ui-dialog-title
{
  float: none;
}

#forecastPage .ui-dialog .ui-dialog-titlebar-close
{
  display: none;
}

#forecastPage .ui-dialog .ui-dialog-buttonpane
{
  padding-left: 1em;
}

#forecastDialog
{
  text-align: center;
  min-height: 2ex !important;
}


/* ADVISORY PAGES (styles include manipulation to nws-alerts-summary-inc.php */
#alertDetailsPage #advisoryContent
{
  
}

/* #alertDetailsPage #advisoryContent */
.nwsAlertsHeader
{
  width: 100%;
/*  margin: 1ex auto;
  border: 1px solid black; */
  background-color:#F5F8FE;
  background: url('../Base-USA/alert-images/NOAAlogo1.png') no-repeat;
  background-position:center;
/*  padding: 5px 0px; */
}

.nwsAlertsHeader h1
{
  font-size: 180%;
  text-align: center;
  margin: .5ex 1em;
}

.nwsAlertsHeader h2
{
  font-size: 120%;
  text-align: center;
  margin: .5ex 1em;
}

.nwsAlertsHeader p
{
  text-align: center;
  margin: 0;
}

/* #alertDetailsPage #advisoryContent */
.nwsAlertsInfo
{
  width: 100%;
  margin: 1ex auto 0;
  border: 1px solid black;
  background-color: #EFEFEF;
}

.nwsAlertsInfo h2,
.nwsAlertsInfo h3,
.nwsAlertsInfo h4
{
  text-align: center;
  /* font-weight: normal; */
  margin: .3ex 1em;
}

/*
.nwsAlertsInfo h2
{
  font-size: 110%;
}

.nwsAlertsInfo h3
{
  font-size: 90%;
}

.nwsAlertsInfo h4
{
  font-size: 80%;
}
 */

#archiveDatePicker .ui-datepicker
{
  margin: 1ex auto;
}

.nwsAlertsDetails
{
  border-top: 1px solid black;
  padding-top: .5ex;
}

.nwsAlertsText
{
  margin: 0 auto;
  padding: 1ex 1em;
  text-align: left;
}

.nwsAlertsText > div
{
  width: 100%;
  margin: 0 auto;
}

/* alert text icons */
.nwsAlertsText .alertIcon
{
  border: 1px solid black;
  padding: 0 1em 0 0;
  margin-right: .25em;
  font-size: 75%;
}

.nwsAlertsText > #map,
.nwsAlertsText > #detailsMap
{
  width: 100%;
  height: 50ex;
  border: 1px solid black
}

.nwsAlertsText .ui-widget-content a
{
  color: #336699;
}

.nwsAlertsText #alertTabs li
{
  text-align: center;
}

.nwsAlertsDetails > p
{
  margin: 0;
  padding: 0;
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  .nwsAlertsText > #map,
  .nwsAlertsText > #detailsMap
  {
    height: 40ex;
  }
}

.nwsAlertsText #mapLegend
{
  width: 100%;
  text-align: center;
}

.nwsAlertsText .mapLegendBox
{
  color: black;
  font-size: 75%;
  border: 2px solid white;
}

.nwsAlertsText .mapLegendText
{
  color: black;
  font-size: 75%;
}

.nwsAlertsText > hr
{
  width: 100%;
  margin: .5ex 0;
  padding: 0;
}

.nwsAlertsText #map_canvas
{
  width: 75%;
  height: 30ex;
}

.nwsAlertsInfo form
{
  text-align: center;
  margin: 0 auto;
}

/* map parameters may be overriden in alertsLeaflet.css */
#homeAdvisoryMap,
#advisoryMap,
#zoneCountyMap
{
  width: 80%;
  margin: 1ex auto;
  border: 1px solid black;
  background-color: #EFEFEF;
  height: 50ex;
}

#advisoryMap
{
  height: 60ex;
}

#homeSevere #homeAdvisoryMap
{
  text-align: left;
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  #homeAdvisoryMap,
  #advisoryMap,
  #zoneCountyMap
  {
    height: 40ex;
  }
}

#homeAdvisoryMap img,
#advisoryMap img,
#zoneCountyMap img
{
  width: 100%;
}

#homeAdvisoryMap p,
#advisoryMap p,
#zoneCountyMap p
{
  text-align: center;
}

/* ABOUT / STATUS PAGE */
#aboutContent,
#statusContent
{
}

#aboutContent h1,
#aboutContent h2,
#aboutContent h3,
#aboutContent h4,
#statusContent h1,
#statusContent h2,
#statusContent h3,
#statusContent h4
{
  text-align: center;
}

#aboutContent p,
#statusContent p
{
  margin-left: 2em;
  margin-right: 2em;
  font-size: 90%;
}

#aboutContent #weatherStation1
{
  float: right;
  margin: 0 1em 2ex 2em;
  border: 1px solid black;
/*  width: 20%; */
  max-height: 30vh;
}

#aboutContent #weatherStation2
{
  float: left;
  margin: 0 1em 2ex 0;
  border: 1px solid black;
/*  width: 40%; */
  max-height: 30vh;
}

#aboutContent #stationTable
{
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

#aboutContent table
{
  border: 1px solid black;
  border-collapse: collapse;
  width: 50%;
  width: 100%;
/*  margin-left: auto;
  margin-right: auto; */
}

#aboutContent table th,
#aboutContent table td
{
  text-align: center;
  border: 1px solid black;
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  #aboutContent p,
  #statusContent p
  {
    margin-left: .5em;
    margin-right: .5em;
  }

  #aboutContent #weatherStation1,
  #aboutContent #weatherStation2
  {
    width: 30%;
  }

  #aboutContent table
  {
    clear: left;
  }
}

#statusContent table
{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

#statusContent .column1
{
  width: 35%;
  text-align: left;
}

#statusContent .column2
{
  width: 15%;
  text-align: center;
}

#statusContent .column3
{
  width: 10%;
  text-align: center;
}

#statusContent .column4
{
  width: 40%;
  text-align: center;
}

#statusContent .dataDump
{
  text-align: center;
  margin-top: 4ex;
}

/* CONTACT page */
#contactContent h1,
#contactContent h2,
#contactContent h3,
#contactContent h4
{
  text-align: center;
}

#contactContent p
{
  margin-left: 2em;
  margin-right: 2em;
  font-size: 90%;
}

.contact
{ 
  margin-top: 3ex;
}

.contactLabel
{ 
  float: left;
  text-align: right;
  font-weight: bold;
  width: 6em;
  margin-right: 2em;
  clear: left;
}

/* form entry fields */

input#contactName,
input#contactEmail,
input#contactSubject,
textarea#contactMessage
{ 
  background-color: rgb(220,220,220);
  /* font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif; */
  font-size: 100%;
  color: rgb(32,32,32);
  margin: 0;
/*   margin-top: -2px; */
  width: 70%;
}
input#contactName,
input#contactEmail,
input#contactSubject
{
/*   margin-right: 10px; */
}

textarea#contactMessage
{ 
  height: 12em;
  font-family: verdana, helvetica, arial, sans-serif;
  font-family: arial, helvetica, sans-serif;
}

input#contactName:focus,
input#contactEmail:focus,
input#contactSubject:focus,
textarea#contactMessage:focus
{ 
  background-color: rgb(240,240,240);
}

input#contactPhone
{ 
  visibility: hidden;
  display: none;
}

/* contact error messages */
/* javascript */
#contactErrorMessage
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding-bottom: 0;
  display: none;
}

#contactErrorMessage h2
{
  color: rgb(175,5,0);  /* red text */
}

#contact label.error
{
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
  display: block;
  margin-left: 8em;
  width: 70%;
}

#contact input.error,
#contact select.error {
  color: rgb(175,5,0);  /* red text */
}

/* PHP */
.contactErrors
{ 
  margin-left: 3em;
}

.contactErrors p
{ 
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
}

p.contactError
{ 
  text-indent: 10%;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

label.contactErrorInput
{
  color: rgb(175,5,0);  /* red text */
}

/* reCAPTCHA */
.g-recaptcha > div
{
  margin: 1ex auto;
}

/* submit button */
#contactSubmit
{ 
  display: block;
  clear: both;
  margin: 1ex auto;
}

input#contactSubmit
{ 
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  border-radius: 5em;
  background-color: rgb(20,13,71);
  background: linear-gradient(rgba(60,39,213,1), rgba(20,13,71,1));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  .contactLabel
  { 
    float: none;
    text-align: left;
    font-size: 120%;
  }

  input#contactName,
  input#contactEmail,
  input#contactSubject,
  textarea#contactMessage
  { 
    width: 90%;
    font-size: 120%;
    margin: .2ex auto;
  }

  #contact label.error
  {
    margin-left: 1%;
    width: 95%;
  }

  .contactErrors
  { 
    margin-left: 0;
  }

  p.contactError
  { 
    text-indent: 1%;
  }
} /* end smaller screen */




/* sun / moon / astronomy page */
#astronomyContent h1
{
  text-align: center;
}

.astronomyBlock
{
  float: left;
  width: 98.6%;
  margin: 1ex 0;
  padding: .2em;
  font-size: 95%; /* default - change specifics below */
  text-align: center; /* ditto */
}

#astronomySun
{
  float: left;
  width: 45%;
  margin: 0 0 0 1.5em;
  padding: 0;
}

#astronomyMoon
{
  float: right;
  width: 45%;
  margin: 0 1.5em 0 0;
  padding: 0;
}

/* fix details of the two above as the screen shrinks */
@media screen and (max-width: 950px)
{
  #astronomySun { margin: 0 0 0 1em; }
  #astronomyMoon { margin: 0 1em 0 0; }
}

@media screen and (max-width: 800px)
{
  #astronomySun { margin: 0 0 0 .5em; }
  #astronomyMoon { margin: 0 .5em 0 0; }
}

/* TEMP
@media screen and (max-width: 700px)
{
  #astronomySun { margin: 0 0 0 0; }
  #astronomyMoon { margin: 0 0 0 0; }
}
*/

.astronomyImage
{
  width: 95%;
  margin: 0 auto;
  padding: 0;
}

.astronomyImage img
{
  display: block;
  border: 0;
  margin: 0 auto;
  padding: 0;
}
 
#astronomyMoon .astronomyImage img
{
  width: 72px;  /* exact pixels so it matches the sun icon */
}

.astronomyItem
{
  width: 95%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.astronomyItem p
{
  margin: 0;
  padding: 0;
}

#astronomyMoonPhases
{
}

#astronomyMoonPhases .moonPhase
{
  float: left;
  width: 25%;
  margin: 0;
  padding: 0;
}

.moonPhase p
{
  margin: 0;
  padding: 0;
}

.moonPhase small
{
  color: #777;
}

/* fix as the screen shrinks */
@media screen and (max-width: 750px)
{
  #astronomyMoonPhases .moonPhase
  {
    width: 50%; /* two per line */
    margin-top: 1ex;
    margin-bottom: 1ex;
  }
}

#astronomySeasons
{
}

#astronomySeasons .season
{
  float: left;
  width: 25%;
  margin: 0;
  padding: 0;
}

.season p
{
  margin: 0;
  padding: 0;
}

.season small
{
  color: #777;
}

/* fix as the screen shrinks */
@media screen and (max-width: 750px)
{
  #astronomySeasons .season
  {
    width: 50%; /* two per line */
    margin-top: 1ex;
    margin-bottom: 1ex;
  }
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  #astronomySun,
  #astronomyMoon
  {
    float: none;
    width: 95%;
    margin: 2ex auto;
    padding: 0;
  }

} /* end smaller screen */


/* PWS page */
#pwsContent h1,
#pwsContent p
{
  text-align: center;
}

#pwsDisplay
{
  text-align: center;
}

/* at 700px we go to smaller screen mode */
@media screen and (max-width: 700px)
{
  #pwsDisplay img
  {
    width: 98%;
  }
} /* end smaller screen */

/* PWS now uses regional conditions formatting */

/* regional conditions page */
#regionalContent h1,
#pwsContent h1,
#regionalContent h3,
#pwsContent h3,
#regionalContent p,
#pwsContent p
{
  text-align: center
}

#regionalContent h3,
#pwsContent h3
{
  margin: 0;
  padding: 0;
  color: #a00000;
}

#regionalContent #metarBlocks,
#pwsContent #metarBlocks
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#regionalContent .metarDisplay,
#pwsContent .metarDisplay
{
  width: 48%;
  width: 25em;
  margin: .1ex .1em;
  padding: .2ex .1em;
  border: .25em solid #808080;
}

/*
.metarOdd
{
  clear: left;   take care of two columns previously, first column taller 
}
*/

/* fix as the screen shrinks */
@media screen and (max-width: 750px)
{
  #regionalContent .metarDisplay,
  #pwsContent .metarDisplay
  {
    float: none;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* REGIONAL PAGE */
#regionalContent .metarDisplay p,
#pwsContent .metarDisplay p
{
  font-size: 85%;
  margin: 0;
  padding: 0;
}

#regionalContent img
{
  display: block;
  margin: .2ex auto 0 auto;
  padding: 0;
}

#regionalContent .condIcon
{
  float: left;
  width: 48%;
  margin: .5ex 0;
  padding: 0;
}

#regionalContent .condIcon img
{
  width: 5em;
}

#regionalContent .windIcon
{
  float: right;
  width: 48%;
  margin: .5ex 0;
  padding: 0;
}

#regionalContent .windIcon img
{
}

#regionalContent small
{
  color: #777;
}

#regionalContent .notCurrent
{
  color: red;
}

#pwsContent #metarBlocks a
{
  color: inherit;
}

/* fix as the screen shrinks */
@media screen and (max-width: 750px)
{
  #pwsContent #metarBlocks a
  {
    width: 100%;
  }
}


/* trends / records page */
#trendsContent h1,
#trendsContent h2
{
  text-align: center;
  margin: 0 0;
  padding: 0;
}

#trendsSection
{
  width: 98.6%;
  margin: 1ex 0;
  padding: .2em;
}

.trendBlock
{
  float: left;
  width: 24.6%;
  border: .1em solid #808080;
  margin: 0;
  padding: 0;
}

/* fix as the screen shrinks */
@media screen and (max-width: 980px)
{
  .trendBlock
  {
    width: 49%;
  }
}
@media screen and (max-width: 465px)
{
  #trendsSection
  {
    padding: 0;
  }

  .trendBlock
  {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .trendBlockBreak
  {
    display: none;
  }
} /* narrow screen */

.trendBlock h3,
.extremeBlock h3,
.rainWindBlock h3
{
  text-align: center;
  border-bottom: 1px solid black;
  margin: 0;
  padding: 0;
  background-color: #96c6f5;
}

.trendBlock table,
.extremeBlock table,
.rainWindBlock table
{
  width: 98%;
  margin: 1ex auto;
  border-spacing: 0;
  border-collapse: collapse;
}

.trendBlock table tr,
.extremeBlock table tr,
.rainWindBlock table tr
{
  margin: 0;
  padding: 0;
}

.trendBlock table td,
.extremeBlock table td,
.rainWindBlock table td
{
  padding: 0;
}

.oddRow
{
  background-color: #f0f0f0;
}

.evenRow
{
  background-color: #e0e0e0;
}

.trendBlock table td.trendLabel,
.extremeBlock table td.trendLabel,
.rainWindBlock table td.trendLabel
{
  color: #a00000;
  padding-left: .5ex;
}

#extremesSection,
#rainWindSection
{
  width: 98.6%;
  margin: 1ex 0;
  padding: .2em;
}

.extremeBlock,
.rainWindBlock
{
  float: left;
  width: 49%;
  border: .1em solid #808080;
  margin: 0;
  padding: 0;
}

/* fix as the screen shrinks */
@media screen and (max-width: 930px)
{
  #extremesSection,
  #rainWindSection
  {
    padding: 0;
  }

  .extremeBlock,
  .rainWindBlock
  {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .extremeBlockBreak,
  .rainWindBlockBreak
  {
    display: none;
  }
}

.trendsFootnotes
{
  clear: both;
  float: none;
  margin: 2ex 0;
}

.trendsFootnotes p
{
  margin: 0 2em;
  padding: 0;
}


/* local precip page */
#cocorahsContent h1,
#cocorahsContent h2,
#cocorahsContent h3
{
  text-align: center;
  margin: .2ex 0;
}

#cocorahsContent .introText
{
  width: 80%;
  margin: 0 auto;
}

#cocorahsContent p
{
  text-align: left;
}

#cocorahsReports
{
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
}

.cocorahsDisplay
{
  width: 98%;
  margin: 1ex auto;
  padding: 0;
  border: .25em solid #808080;
}

@media screen and (min-width: 1000px)
{
  .cocorahsDisplay
  {
    width: 49%;
  }
}

.cocorahsDisplay table
{
  width: 98%;
  margin: 0 auto;
  text-align: center;
}

.headerRow
{
  color: black;
  background-color: #96C6F5;
  font-weight: bold;
}

.columnDark
{
  color: black;
  background-color: #F1F8FE;
}

.columnLight
{
  color: black;
  background-color: white;
}

/* MAP PAGE */
#mapContent h1,
#mapContent h2
{
  text-align: center
}

#mapContent h1
{
  margin-bottom: 0;
}

#mapContent h2
{
  margin-top: 0;
}



/* NWS product display */
.nwsProduct
{
  margin: 0 auto 1ex auto;
  padding: 1ex 1em;
}

.nwsProduct h2
{
  text-align: center;
}

.nwsProduct .nwsProductMeta
{
  text-align: left;
}

.nwsGraphicalForecast
{
  display: block;
  margin: 1ex auto;
  width: 90%;
  max-width: 1000px;
}

/* indoor */
#indoorContent h1,
#indoorContent h2,
#indoorContent p
{
  margin: 0;
  text-align: center;
}

/* footer */

#footer
{
  color: black;
  background-color: #f0f0f0;
  /* border: .1em solid black; */
  border-top: .1em solid black;
  border-bottom: .1em solid black;
  font-size: 92%;
  text-align: center;
  line-height: 1.25em;
/*  margin: 1ex 0 5ex 0; */
  margin: 0 0 5ex 0;
  padding: 1ex 1em;
  clear: both;
}

#footer div
{
  margin: 0;
  padding: 0;
  clear: both;
}

#footer p
{
  margin-top: 1ex;
  margin-bottom: 1ex;
}

#footer a
{
  font-weight: bold;
}

#footer #socialMedia
{
  margin: 2ex 0;
}

#footer .mastodonLogo,
#footer .blueskyLogo
{
  height: 3.5ex;
  vertical-align: middle;
}

/* general bold, italics text */
.boldText
{
  font-weight: bold;
}
.italicsText
{
  font-style: italic;
}

/* general purpose "clear both" div */
.bottomOfDiv
{
  clear: both;
}

/* Saratoga Ajax gizmo stuff */
#gizmotemparrow > img,
#gizmowindicon > img,
.gizmoRiseFall  /* up / down arrow */
{
  margin: 0 0 0 .5em;
  height: 1.5ex;
}

/* same for ticker replacement */
#tickertemparrow > img,
#tickerwindicon > img,
#tickerbaroarrow > img,
.tickerRiseFall  /* up / down arrow */
{
  margin: 0;
  height: 1.5ex;
}

#tickertemparrow > img,
#tickerbaroarrow > img,
.tickerRiseFall
{
  margin-left: .25em;
}

@media screen and (max-width: 700px)
{
  #gizmotemparrow > img,
  #gizmowindicon > img,
  .gizmoRiseFall  /* up / down arrow */
  {
    height: 2ex;
  }
  #tickertemparrow > img,
  #tickerwindicon > img,
  .tickerRiseFall  /* up / down arrow */
  {
    height: 2ex;
  }
}

/* general purpose class to not display something */
.hideMe
{
  display: none;
}

@media screen and (min-width: 701px)
{
  /* hide things that should only show on narrow screens */
  .showNarrow
  {
    display: none;
  }
}

@media screen and (max-width: 700px)
{
  /* use when clear:both needed only for narrow screen */
  .bottomOfDivNarrow
  {
    clear: both;
  }

  /* hide things that should only show on wide screens */
  .showWide
  {
    display: none;
  }
}

/*
   to deal with different content depending on whether js is enabled.
   js code on a page using this classes has to show()
 */

.jsEnabled
{
  display: none;
}

/* aeris logo replaced by xweather logo */
/*
img.aerisLogo,
#displayedImage img.aerisLogo
{
  width: 104px;
}
 */

svg.pwsWeatherLogo,
img.xweatherLogo,
#displayedImage img.xweatherLogo
{
  width: 200px;
  margin: 10px;
}