/*
 * CSS theme.css v2
 */

body {
  background: black;
  color: white;
  font-family: Arial, sans-serif;
}
.debug {
  border: 1px solid magenta;
}
.rounded {
  border-radius: 8px;
  border-width: 1px;
  border-style: hidden;
}
.card {
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
}
#top, #bottom, #left, #right {
  font-weight: normal;
  font-size: 150%;
}
.mqtt-offline, .ws-offline {
  color:red;
}
.mqtt-online, .ws-online {
  color: lime;
}
ul.menu > li.selected {
  color: cyan;
}
i > span {
  font-family: Arial, sans-serif;
  // font-size: 80%;
}

@media screen and (orientation:landscape) {
  body {
    background: black;
    color: white;
  }
  #viewport {
    background: black;
    color: white;
  }
  #top, #bottom, #left, #right {
    background: black;
    color: white;
  }
  #right div {
    background: red;
  }
  thead {
    background: cyan;
    color: black;
  }
  span.title,
  span.subtitle {
    color: white;
  }
  .card {
    border-color: #0f0f0f;
    background: linear-gradient(#3f3f3f, #000);
  }
  ul.menu > li.selected {
  }
}

@media screen and (orientation:portrait) {
  body {
    background: white;
    color: black;
  }
  #top, #bottom {
    background: white;
    color: silver;
    text-shadow:1px 1px 0 #444;
  }
  #top {
    border-bottom: 1px solid black;
  }
  #bottom {
    border-top: 1px solid black;
  }
  #right div {
    background: dimgrey;
    color: white;
  }
  .card {
    border-color: #f0f0f0;
    background: linear-gradient(#f3f3f3, #fff);
  }
  ul.menu > li.selected {
  }
}