body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

/* Room for navigation bar on all pages */
#navbar {
  position: fixed;
  z-index: 100;
}

/* Content pane where pages are loaded */
#content {
}

/* Styles for loaded pages */
.fullpage {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.below-navi {
  position: fixed;
  top: min(7.6vw, 15.2vh);
  height: calc(100vh - min(7.6vw, 15.2vh));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Navigation bar on all pages */
#navbar #navi {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  display: flex;
  flex-direction: row;
}
#navbar .icon, #navbar img {
  width: min(6vw, 12vh);
  height: min(6vw, 12vh);
}
#navbar .icon {
  margin: min(0.8vw, 1.6vh);
  position: relative;
}
#navbar img.rounded {
  border-radius: 10px;
}
#navbar .icon.plug {
  background-color: #2C75FF;
  border-radius: 10px;
}
#navbar .icon.plug > div{
  margin: 0.4vw;
}
#navbar #events {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: row-reverse;
}
#navbar .icon > .playButton{
  position: absolute;
  width: min(4vw, 8vh);
  top: min(1vw, 2vh);
  left: min(1vw, 2vh);
  visibility: hidden;
}

/* Clock in the top-right corner */
#kello.corner {
  font-size: min(6vw, 12vh); 
  position: fixed;
  top: 0.1em;
  right: 0.1em;
  z-index: 9;
}


/* FMI weather indicators (fixed at bottom) */
#weather {
  position: fixed;
  bottom: 0px;
  z-index: 10;
  font-size: min(5vw, 8vh); 
  width: 100%;
  text-align: center;
}
#weather .values {
  display: inline-block;
}
#weather .values div {
  float: left;
  margin-left: 0.6em;
}
#fmiWindArrow {
  display: inline-block;
}
#fmiWindArrow > div {
  width: min(4vw, 7vh);
  height: min(4vw, 7vh);
  margin-left: 0.2em;
  position: relative;
  bottom: 0.2em;
}

/* Key+value indicators on home/photo pages */
#leftRightPanes {
  position: fixed;
  x: 0;
  y:0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  font-size: min(5vw, 8vh); 
}
#homePage .valuePane, #photoPage .valuePane, #vattuniemiPage .valuePane {
  text-align: center;
  visibility: hidden;
  margin: 0 0.2em;
  min-width: 20vh;
}
#homePage .valuePane .icon, #photoPage .valuePane .icon, #vattuniemiPage .valuePane .icon{
  margin: 0.2em auto 0 auto;
  width: min(6vw, 8vh);
  height: min(6vw, 8vh);
}
#homePage .valuePane .unit, #photoPage .valuePane .unit, #vattuniemiPage .valuePane  .unit {
  font-size: min(3vw, 4vh); 
  margin-left: 0.1em;
}
#homePage .energyPrice {
  color: red;
  font-size: min(2vw, 4vh); 
}
#homePage .energyPrice .number{
  font-size: min(2vw, 4vh); 
}
#homePage .energyPrice .unit{
  font-size: min(1vw, 2vh); 
}

/* Login page */
.loginPage form {
  border: 10px solid red;
}

/* RTSP psge */
#rtspPage canvas {
  height: 100%;
  z-index: 10;
}
#rtspPage #wait-for-video {
  font-size: min(4vw, 10vh); 
  z-index: 20;
  position: absolute;
}