/*********************************************************************
 * The overall structure of CFN pages is indicated in this diagram
 * with the indicated class names used on the HTML elements:
 *
 *   +-----------------------------+
 *   |           #banner           |
 *   +-----------------------------+
 *   |          .menu-bar          |
 *   +-----------------------------+
 *   |                             |
 *   |                             |
 *   |                             |
 *   |          .content           |
 *   |       .<page>-content       |
 *   |                             |
 *   |                             |
 *   |                             |
 *   +-----------------------------+
 *   |          .menu-bar          |
 *   +-----------------------------+
 *   |        #sponsor-bar         |
 *   +-----------------------------+
 *
 * The content area comes in three flavours:
 *   1. Paragraphs of mainly text (Home, Help)
 *   2. Map with a selection column (Map, Satellite, Radar)
 *   3. Just a map (Chart)
 *
 * Type #1 uses basic HTML elements, such as H1, P and A so these are
 * styled below with reasonable defaults.q
 *
 * Type #2 is built from two columns (each a DIV element) that are
 * styled using the class ".content-column".  It is this class that
 * has the magic spells to create the DIV's behave as columns.
 *
 * Type #2 also has two other classes that are used to control the
 * specifics of each column.  They are:
 *
 *   .main-columnm          The left-hand column
 *   .selector-column       The right-hand column
 *
 * Type #3 is really just a single-column version of type #2
 *
 *
 * Within these columns are a range of content items that have unique
 * classes of their owns related to the page they appear on. Some
 * do have utility on multiple pages, e.g. the "range-slider-box".
 *
 * In general, the classes in this stylesheet appear roughly in
 * the order the HTML appears on the page, and within that, in the
 * order of "least page specific" to "most page specific". Generally
 * page-specifc styles are named accordingly; e.g. .radar-regions.
 *
 *********************************************************************/

html {
  color: rgb(200, 200, 200);
  background-color: black;

  font-size: 15.6px;
  font-family: verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  text-align: left;
}

body {
  margin: 0;
  border: none;
  padding: 0;

  background-color: rgb(30, 30, 30);

  min-width: 760px;
  width: 1640px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/*********************************************************************
 * Global defaults for various elements
 *********************************************************************/

p {
  margin-top: 12px;
  margin-right: 0px;
  margin-bottom: 12px;
  margin-left: 0px;
}

a {
  color: rgb(240, 200, 0);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1 {
  color: rgb(240, 200, 0);
  font-size: 100%;
  font-weight: normal;
  margin-top: 18px;
  margin-right: 0px;
  margin-bottom: 12px;
  margin-left: 0px;
}

table, tr, td {
  margin: 0;
  border: 0;
  padding: 0;
}

.svg-button {
  fill: rgb(200, 200, 200);
  stroke: rgb(200, 200, 200);
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
}

/*********************************************************************
 * The banner at the top of every page
 *********************************************************************/

#banner {
  line-height: 0;
  margin: 0;
}

#banner a {
  cursor: default;
}

/*********************************************************************
 * The menu-bar, and the elements within
 *********************************************************************/

.menu-bar {
  background-color: rgb(34, 79, 119);
  text-align: center;
  font-size: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 0.45em;
}

.menu-bar .highlight {
  color: rgb(240, 200, 0);
}

.menu-bar a {
  color: rgb(200, 200, 200);
  font-weight: bold;
  text-decoration: none;
  padding: 0.3em;
  cursor: pointer;
}

.menu-bar a:first-of-type {
  padding-left: 0px;
}

.menu-bar a:last-of-type {
  padding-right: 0px;
}

.menu-bar a:hover {
  text-decoration: underline;
}

/*********************************************************************
 * The main content box for all pages
 *********************************************************************/

/** Set the margin around the content box **/
.content {
  margin: 18px;
}

/** Put all the columns on the left **/
.content-column {
  float: left;
  margin-right: 18px;
}

/** No right margin on the last column **/
.content-column:last-of-type {
  margin-right: 0px;
}

/** Clear the "float" after the last column **/
.content::after {
  clear: both;
  content: "";
  display: table;
}

/*********************************************************************
 * The sponsor bar
 *********************************************************************/

#sponsor-bar {
  text-align: center;
  margin: 0;
}

#sponsor-bar img {
  padding: 1em;   /* Space out the images a bit */
}

/*********************************************************************
 * Some content that can appear on pages
 *********************************************************************/

/** Testimonials **/

.testimonial .quote {
  color: rgb(240, 200, 0);
  font-style: italic;
}

.testimonial .citation {
  font-size: 80%;
  display: block;
}

/** Rotators **/
.rotator-group {
  display: none;    /* Javascript will change this */
}

/** FAQ's **/

.faq-list > h1 {
  text-decoration: underline;
  cursor: pointer;
}

.faq-list > h1:hover {
  text-decoration: none;
}

.faq-list > :not(h1) {
  margin-top: 8px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  display: none;
}

.faq-visible {
  display: "";
}

/*********************************************************************
 * Overall settings for pages showing a map with an overlay. This
 * is for the pages: Map, Chart, Satellite and Radar
 *********************************************************************/

/** The main column */

.main-column {
  width: 1600px;
  text-align: center;
}

.main-column div {
  margin-bottom: 0px;
}

/** The selector column (for those that have one) */

.selector-column {
  width: 120px;
}

.selector-column > p:first-of-type {
  font-weight: bold;
  font-size: 120%;
  padding-bottom: 1em;
}

.selector-column > div {
  margin-bottom: 1em;
}

.selector-column > div:last-of-type {
  margin-bottom: 0;
}

.selector-column p {
  margin: 0px;
}

.selector-column a {
  white-space: nowrap;  /* don't wrap inside links */
}

/** Position and size the main image content **/

#main-image-box {
  text-align: center;
  position: relative;   /* Create a reference point for #places-image */
}

#main-image-box img {
  width: 1600px;
  height: 780px;
}

#main-image {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}

#places-image {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  display: none;
}

#lonlats-image {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  display: none;
}

/** Position and size the time-slider */

#time-slider-box {
  text-align: center;
  margin-bottom: 0px;
}

#time-slider {
  width: 80%
}

/** Position and size the time-step buttons */

.time-buttons {
  text-align: center;
}

.time-buttons a {
  text-decoration: none;
}

.time-buttons p {
  color: rgb(200, 200, 200);
  font-size: 80%;
  font-weight: bold;
  display: inline;
}

/** Prepare play/pause buttons for overlay **/
#play-button svg, #pause-button svg {
  width: 24px;
}

#pause-button {
  display: none;
}

/*********************************************************************
 * PAGE SPECIFIC: "index.html"
 *********************************************************************/

.home-content {
  text-align: justify;
  text-align-last: left;
}

/* Vertically center the testimonial */
.home-content .testimonial {
  height: 100%;  /* Fill out to size of rotator-group */
  display: table;
}

.home-content .testimonial > div {
  vertical-align: middle;
  display: table-cell;
}

/* Put a margin on images, and set their height */
.home-content .testimonial img {
  margin-left: 10px;
  height: 130px;
  width: auto;
}

/* Center the sample images */
.home-content .sample-images {
  text-align: center;
  text-align-last: center;
}

.home-content .sample-images img {
  margin: 0px 5px;
  width: 150px;
  height: 150px;
}

/*********************************************************************
 * PAGE SPECIFIC: "map.html"
 *********************************************************************/

/** Space out the controls below the map **/
.map-content .time-buttons a {
  margin: 0px 9px;
}

/** Alow the models onto a single line */
.map-models a {
  display: block;
}

/** Slightly shrink the text on the models, regions and types */
.map-models, .map-regions, .map-types {
  font-size: 95%;
}

/** Make the links look a little different **/
.map-external-links a {
  display: block;
  font-weight: bold;
  font-size: 95%;
  margin-top: 10px;
}

/** Make the links look a little different **/
.fcstobs-models a {
  font-weight: bold;
  font-size: 90%;
}

/*********************************************************************
 * PAGE SPECIFIC: "meteogram.html"
 *********************************************************************/

/** Put each model on a line by itself */
.meteogram-models a {
  display: inline-block;
}

/** Slightly shrink the text on the models and the places */
.meteogram-models, .meteogram-places {
  font-size: 88%;
}

/** "Type" and "States" spread out below the image **/
.meteogram-types, .meteogram-states {
  text-align: center;
  margin-bottom: 18px;
}

.meteogram-types a, .meteogram-states a {
  display: inline;
  color: rgb(200, 200, 200);
  font-size: 105%;
  font-weight: bold;
  text-decoration: none;
  margin: 0px 5px;
}

/*********************************************************************
 * PAGE SPECIFIC: "satellite.html"
 *********************************************************************/

/** Space out the controls below the map **/
.satellite-content .time-buttons a {
  margin: 0px 16px;
}

/** Ensure regions are all on a single line **/
.satellite-regions a {
  font-size: 95%;
  display: block;
}

/** Put each type on a line by itself **/
.satellite-types a {
  font-size: 95%;
  display: block;
}

/*********************************************************************
 * PAGE SPECIFIC: "radar.html"
 *********************************************************************/

/** Stop text inside a link from wrapping **/
.radar-content a {
  white-space: nowrap;
}

div.radar-locations {
  font-size: 90%;
  margin-bottom: 4px;
}

/** Heading on a line by itself **/
.radar-locations p {
  display: block;
}

/** Bunch up the links, but without wrap **/
.radar-locations a {
  display: inline-block;
}

/*********************************************************************
 * PAGE SPECIFIC: "weather.html"
 *********************************************************************/

/** Stop text inside a link from wrapping **/
.weather-content a {
  white-space: nowrap;
}

div.weather-locations {
  font-size: 90%;
  margin-bottom: 4px;
}

/** Heading on a line by itself **/
.weather-locations p {
  display: block;
}

/** Bunch up the links, but without wrap **/
.weather-locations a {
  display: inline-block;
}

/*********************************************************************
 * PAGE SPECIFIC: "chart.html"
 *********************************************************************/

/** Center the content; we don't have columns on this page **/
.chart-column {
  width: 1200px;
  text-align: center;
}

.chart-content {
  text-align: center;
}

/** The main content is a bit wider than the other pages **/
.chart-content #main-image-box img {
  width: 850px;
  height: 578px;
}

/** Space out the controls below the map **/
.chart-content .time-buttons a {
  margin: 0px 16px;
}

/*********************************************************************
 * PAGE SPECIFIC: "camera.html"
 *********************************************************************/

/** The container for each camera */
.camera {
  margin-bottom: 12px;
}

/** The title above each camera image */
.camera-title {
  display: inline-block;
  width: 75%;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 3px;
}

/** The "link to source" above each camera image */
.camera-source {
  display: inline-block;
  width: 25%;
  text-align: right;
  font-size: 80%;
  font-style: italic;
}

/** The image displayed whilst the camera loads */
.camera-loading {
  margin-top: 100px;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
}

/** The camera image itself */
.camera-image {
  width: 100%;
}

/** Slightly shrink the text on the regions and the places */
.camera-regions, .camera-places {
  font-size: 90%;
}

/*********************************************************************
 * PAGE SPECIFIC: "forecast.html"
 *********************************************************************/

/** Ensure this is the same size as the main-image **/
#forecast-image {
  width: 650px;
  height: 650px;
}

/** Slightly shrink the text on the regions and the places */
.forecast-regions, .forecast-places {
  font-size: 90%;
}

/*********************************************************************
 * PAGE SPECIFIC: "ocf.html"
 *********************************************************************/

/** Ensure this is the same size as the main-image **/
#ocf-image {
  width: 650px;
  height: 650px;
}

/** Slightly shrink the text on the regions and the places */
.ocf-regions, .ocf-places {
  font-size: 90%;
}

/*********************************************************************
 * PAGE SPECIFIC: "help.html"
 *********************************************************************/

/* Center testimonial  images above the text */
.help-content .testimonial img {
  display: block;
  margin: 0.5em auto;
}

.help-content .testimonial .quote {
  color: rgb(200, 200, 200);
}

.help-content p {
  text-align: justify;
  text-align-last: left;
}

/*********************************************************************
 * PAGE SPECIFIC: "analogue.html"
 *********************************************************************/

.analogue-content {
  margin: 0px;
}

/*********************************************************************
 * PAGE SPECIFIC: "era5.html"
 *********************************************************************/

/* Put each select on a seperate line */
.era5-content .datetime-select select {
    display: block;
    width: 60px;
}

.era5-content #hour-select {
    width: 80px;
}

/* Put some spacing between date & time */
.era5-content .datetime-select p {
    margin-top: 20px;
}

/** Space out the controls below the image **/
.era5-content .time-buttons a {
  margin: 0px 9px;
}

/** Add some space above the commentary */
.era5-content .commentary {
  margin-top: 40px;
}

/*********************************************************************
 * Override various styles for specific devices
 *********************************************************************/

.desktop-only { display: inline; }
.mobile-only { display: none; }

@media only screen and (device-width: 320px),     /* iPhone 5 */
       only screen and (device-width: 375px),     /* iPhone 6, 7, 8, X */
       only screen and (device-width: 414px)      /* iPhone 6+, 7+, 8+, X+ */
{
  html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .menu-bar {
    font-size: 165%;
  }

  .menu-bar a {
    padding: 0.2em;
  }

  .home-content, .help-content {
    font-size: 150%;
  }

  .desktop-only { display: none; }
  .mobile-only { display: inline; }
}

@media only screen and (device-width: 360px),       /* Galaxy S7, S8, S9, S10 */
       only screen and (device-width: 412px) {      /* Galaxy S8+, S9+, S10+ */
  html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .menu-bar {
    font-size: 190%;
  }

  .menu-bar a {
    padding: 0.2em;
  }

  .home-content, .help-content {
    font-size: 180%;
  }

  .desktop-only { display: none; }
  .mobile-only { display: inline; }
}

/* Match against specific widths and put a label on the display */

/*
@media only screen and (device-width: 320px) {
    body::after {
        font-size: 50px;
        content: "320";
    }
}

@media only screen and (device-width: 360px) {
    body::after {
        font-size: 50px;
        content: "360";
    }
}

@media only screen and (device-width: 375px) {
    body::after {
        font-size: 50px;
        content: "375";
    }
}

@media only screen and (device-width: 412px) {
    body::after {
        font-size: 50px;
        content: "412";
    }
}

@media only screen and (device-width: 414px) {
    body::after {
        font-size: 50px;
        content: "414";
    }
}
*/