/*
 * CSS hestia/meteo.css v2
 */

:root {
  --ui-color: cyan;
  --ui-active-color: cyan;
  --ui-inactive-color: grey;
  --cloudy-color: grey;
  --sunny-color: yellow;
  --dynamic-color: white;
}
.cloudy {
  color: var(--cloudy-color);
}
.sunny {
  color: var(--sunny-color);
}
.valuefoo {
  font-size: 150%;
  color: var(--ui-color);
}
.value,
.timestamp,
.hilo,
.sum {
  color: var(--ui-color);
}
.small {
  font-size: 80%;
}
.small.value {
  font-size: 80%;
}
#forecast > div {
  padding-top: 15px;
  /* border: 1px solid magenta; */
}
#obs i {
  font-size: 150%;
  margin-left: 5px;
}
#obs i.small {
  font-size: 100%;
  margin-left: 5px;
}
#maree {
  padding-top: 5px;
}
.graph-only {
  display: none;
}
#graph li {
  padding-right: 5px;
}
#graph li span {
  font-size: 150%;
  line-height: 40px;
}
#graph img {
  border-radius: 8px;
  border: 1px hidden black;
  width: 100%;
}
#synop img {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
}
div#metoffice-datapoint-service {
  font-style: italic;
  font-size: 80%;
}
#ephemeride {
  padding-right: 5px;
}
#frbateaux {
  margin-top: 10px;
  border: 0;
}
#frbateaux > iframe {
  width: 246px;
  height: 217px;
  scrolling: no;
  frameborder: 0;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px hidden white;
  background: white;
}
.dynamic-color {
  color: var(--dynamic-color);
}
li > a.highlighted {
  text-shadow:1px 1px 0 #444;
  font-weight: bold;
}
li > a.highlighted:hover {
}
span.value {
  font-weight: bold;
}
div.version {
  font-style: italic;
  font-size: 80%;
  margin-top: 5px;
  border-top: 1px solid var(--ui-color);
  padding-top: 5px;
}
span.value {
  text-shadow:1px 1px 0 #444;
}
i#sunny{
  color: yellow;
  margin-top: 5px;
  margin-right: 5px;
}
span.unit {
  text-shadow:1px 1px 0 #444;
}
ul.w3-ul li {
  border-bottom: none;
  padding: 2px 2px 2px 16px;
}
/*--- [ footer ] ---*/
div#footer {
  border-top: 1px solid var(--ui-color);
  font-style: italic;
}
div#footer span.label,
div#footer span.value {
  font-size: 80%;
}
div#footer ul li {
  padding: 2px 2px 2px 16px;
}
div#footer span.snmpgw {
  float: right;
}
div#footer span.snmpgw span.label,
div#footer span.snmpgw span.value {
  font-size: 80%;
}
/* wi-day-sunny */
span.fcast08::before {
  font-family: 'weathericons';
  content: "\f00d";
}
/* wi-day-cloudy */
span.fcast06::before {
  font-family: 'weathericons';
  content: "\f002";
}
/* wi-cloudy */
span.fcast02::before {
  font-family: 'weathericons';
  content: "\f013";
}
/* wi-snow-wind */
span.fcast18::before {
  font-family: 'weathericons';
  content: "\f064";
}
/* wi-rain-mix */
span.fcast19::before {
  font-family: 'weathericons';
  content: "\f017";
}
/* wi-rain */
span.fcast03::before {
  font-family: 'weathericons';
  content: "\f019";
}
/* wi-day-rain */
span.fcast07::before {
  font-family: 'weathericons';
  content: "\f008";
}
/* wi-day-snow-wind */
span.fcast22::before {
  font-family: 'weathericons';
  content: "\f065";
}
/* wi-day-rain-mix */
span.fcast23::before {
  font-family: 'weathericons';
  content: "\f006";
}
#wm3AgentVersionString {
  padding-top: 130px;
  text-align: right;
  padding-right: 10px;
}
/*
 * graph period selector
 */
div#graph ul {
  /* border: 1px solid var(--ui-color); */
  list-style-type: none;
}
div#graph-header {
  padding-top: 5px;
  margin-bottom: 20px;
}
ul#graph-period-selector {
  display: inline;
  margin: 0;
  margin-right: 10px;
  padding: 5px;
}
ul#graph-period-selector li {
  display: inline;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid white;
}
ul#graph-period-selector li.active {
  font-weight: bold;
  color: var(--ui-active-color);
}
ul#graph-period-selector li.inactive {
  color: var(--ui-inactive-color);
  // border-right: 1px solid var(--ui-inactive-color);
}
ul#graph-period-selector li:last-child {
  border-right: 0;
}

div#graph-body {
  padding-top: 15px;
}
div#graph-body i {
  margin-top: 15px;
  margin-bottom: 10px;
}
div#graph-body i > span {
  margin-left: 10px;
  font-family: 'sans-serif';
  font-weight: bold;
  font-size: 100%;
}
#hmenu > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#hmenu > ul > li {
  float: left;
  text-align: center;
  width: 13%;
}
#hmenu > ul > li > a {
  text-decoration: none;
}
.active {
  color: var(--ui-color);
  font-weight: bold;
  margin: 0;
  margin-bottom: 2px;
  background: black;
}
#bottom > ul > li {
  width: 20%;
}
@media screen and (orientation:landscape)
	and (min-width: 780px)
	and (max-width: 820px) {
  #graph li span {
    padding-left: 40px;
  }
}
@media screen and (orientation:landscape) and (max-width: 600px) {
  .tablet-only {
    display: none;
  }
}
@media screen and (orientation:landscape) and (min-width: 600px) {
  #left {
    padding-top: 10px;
  }
  #baro i {
    padding-left: 40px;
  }
  .value {
    font-size: 200%;
  }
  #main i {
    font-size: 200%;
  }
}
@media screen and (orientation:landscape) and (min-width: 840px) {
  #left {
    padding-top: 0;
  }
  #baro i {
    padding-left: 0;
  }
}
@media screen and (orientation:portrait) {
  #bottom ul.menu > li {
    width: 16%;
    font-size: 100%;
  }
  div#graph-header {
    margin-top: 20px;
    background: silver;
  }
  div#graph-body {
  }
  i#sunny {
    text-shadow:1px 1px 0 #444;
  }
}