/*
This file defines three different styles depending on the screen size, namely, full, compact, and minimal.
*/

/* Common CSS attributes that are used for all templates */

/* Make body take the entire screen and apply common font and background */
body {
  background: #364050 url("images/bg01.png");
  color: white;
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: 'Open Sans Condensed', sans-serif;
  overflow: hidden;
}

a {
  color: #fab20b;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Set a white background to the map to avoid showing the body background */
#map {
  background-color: white;
}

footer {
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
}

#tooltip {
  background-color: #3067ba;
  color: white;
  padding: 5px;
  border-radius: 5px;
  max-height: 500px;
  max-width: 500px;
  overflow: auto;
}

.ol-control button {
  background-color: #3067ba;
  color: #fab20b;
}

#share-control {
  top: 2.5em;
  right: 0.5em;
}

#layerSelector {
  top: 5.0em;
  right: 0.5em;
  transition: all 0.5s ease;
}

#layerSelector:hover {
  background-color: #3067ba;
}

#layerSelector:hover .layers-icon {
  display: none;
}


#layerSelector:hover {
  width: auto;
  height: auto;
}

#layerSelector .layerlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

#layerSelector:hover .layerlist {
  display: block;
}

#gSearchDiv {
  top: 0.5em;
  right: 0.5em;
}

#curr-loc-control {
  top: 7.143em;
  left: 0.5em;
}

.ol-control button {
  font-family: 'Font Awesome 5 Pro';
}

/* Make the search box slightly bigger and with round edges */
.box.search {
  height: 26px;
}
.search-text, .g-search-text {
  font-weight: 900;
  font-size: 1.2em;
  height: 26px;
  border-radius: 5px;
}

.search-text:focus, .g-search-text:focus {
  border-color: #3067ba;
}

/* Add padding to div of search bar used for selecting region while downloading subset of dataset */
.padding-bottom-15 {
  padding-bottom: 15px;
}

/*Additional search controls are displayed to the right*/

.controls .button {
  box-sizing: border-box;
  border: outset 2px #fab20b;
  text-align: center;
  color: #fab20b;
  transition: all 0.5s ease;
  cursor: default;
}

.controls .button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/*------- Selection pane (typically on the left) ----------*/
#selection-pane .logo {
  text-align: center;
}

.search-text, .g-search-text {
  box-sizing: border-box;
  width: 100%;
}

#selection-pane .controls { float: right; }

#filter-controls {
  line-height: 26px;
  height: 26px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#filter-controls .button {
  width: 26px;
  height: 26px;
  line-height: 26px;
}

#datasets {
  flex-basis: 400px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: ridge 5px rgba(0, 0, 0, 0.5);
}

#datasets ul {
  padding-left: 0;
}

/*Display the list of datasets*/
#datasets .dataset {
  border-top: solid 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
  padding: 0.5em;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  color: white;
}

#datasets .dataset label {
  cursor: pointer;
}

/* Change the background of a dataset when the mouse hovers */
#datasets .dataset:hover {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 3px;
  color: white;
}

/* Give a different background to the selected dataset */
#datasets .dataset.current {
  background-color: #3067ba;
}

#datasets .dataset.hidden {
  display: none;
}

/*By default, hide the no-results label. It will be shown using Javascript when filter is applied*/
.lblNoResults { display: none;}

/*The header of the dataset details is always shown while the details are scrolled*/
a.external:after {
  content: '\f360';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  padding-left: 5px;
  color: rgb(200, 200, 200);
  font-size: 8px;
}

#dataset-details {
  overflow-y: auto;
  flex-basis: 400px;
  flex-grow: 1;
}

#dataset-details .header {
  text-align: center;
  padding: 5px;
  border: outset 2px gray;
}

#dataset-details .details p {
  margin: 0;
}

#selection-pane footer {
  line-height: 28px;
}

/* Initially hide the clear filters button until the user makes some search filters */
.clearFilters.hidden {
  display: none;
}

/* ---------- Selection bar (typically at the top) --------- */
#selection-bar {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 28px;
}

#selection-bar .logo {
  width: 28px;
  height: 28px;
  transition: all 0.5s;
  text-align: center;
}

#selection-bar .button {
  width: 28px;
  height: 28px;
  line-height: 28px;
}

#selection-bar nav {
  flex-grow: 1;
}

#datasets-select select {
  float: left;
  border-radius: 5px;
  color: white;
  background: #181d24 url("images/bg01.png");
  height: 28px;
  width: 100%;
}

#datasets-select select option {
  color: white;
  background: #181d24 url("images/bg01.png");
}

#selection-bar .controls {
  flex-shrink: 0;
}


.dataset-summary a {
  font-size: 1.2em;
}

#selection-bar footer {
  background: none;
  line-height: 28px;
  font-size: 22px;
}

/* ------- Advanced filter form --------- */

/*Highlight the title of the advanced form*/
#advanced-filter .titlebar {
  text-align: center;
  background-color: #364050;
  color: white;
  padding: 0.5em;
  font-weight: 900;
  display: flex;
}

#advanced-filter .title {
  flex-grow: 1;
}

.close {
  color: rgb(255, 128, 128);
  transition: color 0.5s ease;
}

.close:hover {
  color: rgb(255, 64, 64);
}

#advanced-filter label.new-filter {
  display: block;
  padding: 5px;
}

/* -----------------  Stylize dataset attributes ------------------------ */

ul.attributes {
  padding: 0;
  margin-top: 3px;
  margin-bottom: 3px;
  display: flex;
  flex-wrap: wrap;
}

.attributes li {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  flex-grow: 1;
  border: outset 1px gray;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  cursor: default;
  font-weight: normal;
  line-height: 1.2em;
  margin-top: 1px;
}

.attributes li:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.25s ease-in-out;
}

.attributes li:before {
  background-color: black;
  color: wheat;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: 900;
}

.attributes li.date:before, .attributes li.datetime:before {
  content: '\f073';
}

.attributes li.string:before {
  content: 'Aa';
}

.attributes li.map:before {
  content: '\f104\f105';
}

.attributes li.integer:before {
  content: '123';
}

.attributes li.number:before {
  content: '1.23';
}

.attributes li.wkt:before, .attributes li.geojson:before {
  content: '\f5ee';
}

/* ---------------- Share pane ------------------- */

#share-pane {
  position: absolute;
  right: 3em;
  top: 3em;
  background-color: #fab20b;
  width: 30em;
  max-width: 80%;
  padding: 5px;
  border-radius: 4px;
  color: black;
}

#share-pane textarea {
  font-size: x-small;
}

/*To show/hide the pane*/
#share-pane.hidden {
  display: none;
}

.template { display: none; }

/* Download Dialog */
.full-download-button {
  width: 100%;
  background-color: #0E5518;
  color: #fab20b;
  text-align: center;
  font-size: 1.5em;
  border: solid 1px black;
}

.download-dialog nav label {
  font-size: x-large;
}

#download_region {
  width: 95%;
}

/*Contents of the download dialog*/
.download-dialog section {
  background-image: linear-gradient(white, rgb(202, 252, 253));
}

.download-dialog a {
  color: maroon;
}

.download-dialog input:checked + label {
  text-shadow: 2px 2px #bbb;
  font-weight: bolder;
}

/* Tabbed dialog with flex */
.tabbed-dialog2 {
  display: flex;
  flex-direction: column;
}

/*The navigation bar */
.tabbed-dialog2 nav {
  display: flex;
  flex-grow: 0;
}

/*One tab in the navigation bar*/
.tabbed-dialog2 nav label {
  flex-grow: 1;
  text-align: center;
  border: solid 1px black;
  color: #666;
}

/*Active tab in the navigation bar*/
.tabbed-dialog2-input:checked + label {
  border-bottom: none;
  background-image: linear-gradient(white, #fff0);
  color: black;
}

.tabbed-dialog2 input[type='radio'] { display: none;}

.tabbed-dialog2 section {
  display: none;
  flex-grow: 1;
  border-left: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
}

.tabbed-dialog2 .tabbed-dialog2-input:checked + section {
  display: flex;
  flex-direction: column;
}

.tabbed-dialog2 section textarea {
  flex-grow: 1;
}

section.permalink a {
  color: #1877f2;
  flex-direction: column;
}

.socialmedia a {
 color: #1877f2;
 transition: all 0.5s ease;
 margin-left: 10px;
}
.socialmedia a:hover { color: #4267b2; }

/* Subset download */
.download-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subset-ack ~ .download-links {
  display: none;
}

.ssubset-ack:checked ~ .download-links {
  display: inherit;
}

.citation {
  display: block;
  width: 90%;
  margin-left: 20px;
  padding-right: 20px;
  height: 8em;
  background-color: rgb(246, 248, 201);
  border: solid 1px black;
  padding: 3px;
  overflow: auto;
  font-size: x-small;
}

.share-citation {
  width: 100%;
  padding: 0;
  border: 0;
  background-color: white;
  margin: 0;
}

.download-links {
  display: flex;
  align-content: stretch;
  justify-content: stretch;
}
.download-links * {
  flex-basis: 100px;
  flex-grow: 1;
  text-align: center;
}

.download-link, .download-link-region {
  display: inline-block;
  padding-top: 67px;
  min-width: 60px;
  margin-right: 20px;
  background-repeat: no-repeat;
  background-size: 58px 67px;
  background-position-y: 0;
  background-position-x: 50%;
}

a.download-link:not([href]), a.download-link-region:not([href]) {
  filter: grayscale(100%);
}

.download-link.geojson-download, .download-link-region.geojson-download {
  background-image: url(../images/ff-geojson.png);
}

.download-link.kml-download, .download-link-region.kml-download {
  background-image: url(../images/ff-kml.png);
}

.download-link.csv-download, .download-link-region.csv-download {
  background-image: url(../images/ff-csv.png);
}

.download-link.shapefile-download, .download-link-region.shapefile-download {
  background-image: url(../images/ff-shapefile.png);
}

.download-link.jsonwkt-download, .download-link-region.jsonwkt-download {
  background-image: url(../images/ff-jsonwkt.png);
}

/*
  1- Full: The logo, simple search box, dataset details, and footer are shown to the left,
  and the map is shown in the main part. The advanced filter is displayed when the button is pushed.
 */
 @media (min-width: 1000px) {
  body { display: flex; }

  #selection-pane { width: 300px; }

  #map { flex-grow: 1; height: 100%; }

  #selection-pane {
    display: flex;
    flex-direction: column;
    border-right: outset 2px rgba(0, 0, 0, 0.5);
  }

  /* Put a subtle separator under the logo */
  #selection-pane .logo {
    padding-left: 32px;
    padding-right: 32px;
  }

  .logo-image {
    display: block;
    background-color: transparent;
    background-image: url('../images/logo_h.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  #selection-pane .logo-image {
    width: 100%;
    height: 5em;
  }

  /* Not shown in this template */
  #selection-bar { display: none;}

  #advanced-filter .search-text, #advanced-filter .g-search-text, #advanced-filter .result-count, #advanced-filter .result-label,
  #dataset-details .close {
    display: none;
  }
} /* End of full template */

/*
  2- Compact: The logo, dataset selector, advanced filter, and about button are shown at the top,
  the dataset details and simple search are displayed on the left when the button is pressed, and
  the map is shown in the main part.
 */
@media (max-width: 999px) and (min-width: 500px) {
  body {
    display: flex;
    flex-direction: column;
  }

  /*Selection pane is initially hidden*/
  #selection-pane {
    display: flex;
    flex-direction: column;
    position: absolute;
    height: calc(100% - 32px);
    top: 32px;
    left: -300px;
    width: 300px;
    z-index: 100;
    background: #364050 url("images/bg01.png");
    border-right: double 8px #fab20b;
    transition: all 0.5s ease;
    box-shadow: 3px 0px 3px rgba(64,64,64,0.5);
  }

  #selection-pane.popup, #selection-pane:hover {
    left: 0;
    border-right: groove 2px #364050;
  }

  /* She the selection bar at the top and the map takes the rest */
  #selection-bar {
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
  }

  #selection-bar .logo { width: auto;}

  #selection-bar .logo .logo-image {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url('../images/logo_h.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    border-radius: 5px;
    width: 75px;
    height: 100%;
  }

  #selection-bar .logo:hover {
    background-color: rgba(255, 255, 255, 0.5);
    background-size: 99%;
  }

  /* Hide the logo and footer from selection pane as they are shown on the selection bar */
  #selection-pane .logo { display: none;}
  #selection-pane footer { display: none;}
  
  #advanced-filter .search-text, #advanced-filter .g-search-text, #advanced-filter .result-count, #advanced-filter .result-label,
  #selection-bar .dataset_info, #dataset-details .close {
    display: none;
  }

  #selection-bar .dataset-summary {
    min-width: 50px;
  }

  #map {
    height: calc(100% - 32px);
    flex-grow: 1;
  }

  .download-link, .download-link-region {
    padding-top: 45px;
    min-width: 40px;
    margin-right: 10px;
    background-size: 40px 45px;
  }
} /* End of compact template */

/*
3- Minimal: The logo, dataset selector, adn advanced button are shown at the top,
    an additional info button is added to show the details of the selected dataset including
    the download link.
*/
@media (max-width: 499px) {
  body {
    display: flex;
    flex-direction: column;
  }

  /* She the selection bar at the top and the map takes the rest */
  #selection-bar {
    display: flex;
    justify-content: space-between;
    height: 32px;
    box-sizing: border-box;
  }

  .logo {
    display: none;
  }

  /*Selection pane only contains the dataset details and appears as a modal*/
  #selection-pane {
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #36405080;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    flex-direction: column;
    visibility: hidden;
  }

  #selection-pane.popup {
    visibility: visible;
  }

  #selection-pane .logo, #selection-pane .box.search, #selection-pane #filter-controls,
  #selection-pane #datasets, #selection-pane footer { display: none; }

  #selection-pane #dataset-details {
    background: #364050 url("images/bg01.png");
    max-height: 80%;
    max-width: 80%;
    box-shadow: 3px 3px 3px rgba(64,64,64,0.5);
    padding: 3px;
  }

  #selection-pane .close {
    float: right;
    position: relative;
    right: 8px;
    top: 8px;
  }
  
  #selection-bar .result-count, #selection-bar .result-label { display: none; }

  #map {
    height: calc(100% - 32px);
    flex-grow: 1;
  }

  #selection-bar .dataset-summary {
    display: none;
    flex-shrink: 0;
  }

  #selection-bar footer {
    order: -1;
    padding-left: 2px;
    padding-right: 2px;
  }

  #selection-bar footer a:before {
    background: #364050 url("../images/favicon64.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    width: 28px;
    height: 28px;
    display: inline-block;
  }

  .download-link, .download-link-region {
    padding-top: 23px;
    min-width: 20px;
    margin-right: 5px;
    background-size: 20px 23px;
  }
}

/* A class to disable download links for region download */
.img-disabled {
  filter: grayscale(100%);
  opacity: 0.4;
}

/** A class to add a red cross on elements. Edited from from http://jsfiddle.net/60dw53mp/1/ */

.crossedout {
  position: relative;
  padding: 15px;
  overflow: hidden;
}

.crossedout:before, .crossedout:after {
  position: absolute;
  content: '';
  background: red;
  display: block;
  width: 100%;
  height: 15px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}

.crossedout:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}