body {
    font-family: sans-serif;
    background-color: white;;
}

.lw_wind_gauges, .lw_temperature_gauges {
    width:100%;
    max-width: 1600px;
    margin-top: 2%;
}

h1 {
    text-align: center;
    max-width: 1600px;
    font-size:150%;
    margin: 0.5%;
}

.lw_wind_gauge_container {
    width:12%;
    height:96%;
    margin:0 1% 0 1%;
    display: inline-block; 
    vertical-align: top;
}

.lw_gauge_headline {
    font-size: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0;
    height: 5%;
    margin-bottom: 10%;
}

div.lw_wind_gauge {
    position: relative;
    height: 76%;
}

canvas.lw_wind_gauge {
    width : 100%;
    position: absolute;
}

div.lw_gauge_value {
    text-align: center;
    width: 100%;
    font-size: 110%;
    margin-top: 2%;
    height: 8%;
}

div.lw_chart {
    position: relative;
    height: 88%;
}

canvas.lw_chart {
    position: absolute;
}

.lw_chart_headline {
    font-size: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0;
    height: 5%;
    margin-bottom: 2%;
}

.lw_temperature_gauge_container,.lw_rain_gauge_container {
    width: 9.2%;
    height: 96%;
    margin: 0 0.5% 0 0.5%;
    display: inline-block; 
    vertical-align: top;
}

.lw_temperature_headline, .lw_rain_headline {
    font-size: 100%;
    width: 100%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
    margin-bottom: 2%;
    text-align: center;
}

.lw_temperature_headline_small, .lw_rain_headline_small {
  font-size: 100%;
  width: 80%;
  margin-left: 10%;
  margin-right: 5%;
  margin-top: 0;
  margin-bottom: 2%;
  text-align: center;
}

div.lw_temperature_gauge, div.lw_rain_gauge {
  position: relative;
  height: 88%;
}

canvas.lw_temperature_gauge, canvas.lw_rain_gauge {
    width: 12.5%;
    margin-left: 10%;
    height: 30%;
}

.lw_chart_container {
    position: relative; 
}

.lw_top_graph_container {
    width: 22%;
    height: 96%;
    margin: 0 2% 0 2%;
    display: inline-block; 
    vertical-align: top;
}

.lw_bottom_graph_container {
  width: 22%;
  height: 80%;
  margin: 0 2% 0 2%;
  display: inline-block; 
  vertical-align: top;
}

.lw_lastRead {
    opacity: 1;
    font-size: 70%;
    margin-left: 2%;
}

.lw_lastRead .lw_readIndicator {
  transition: opacity 5s; 
}

.lw_lastRead .lw_readIndicator_fade {
  opacity: 0;
}

.lw_vertical_spacer {
  height: 100%;
}

select.lw_graph {
  display: inline-block;
  font-size: 110%;
  padding: 1.7% 3%;
  border: .1em solid #000000;
  box-sizing: border-box;
  color: #000000;
  background-color: #E7F3FF;
  text-align: center;
  margin-left: 3%;
}

button.lw_records {
  display: inline-block;
  font-size: 110%;
  padding: 2% 5%;
  border: .1em solid #000000;
  box-sizing: border-box;
  color: #000000;
  background-color: #E7F3FF;
  text-align: center;
}

button.lw_records:hover{
  background-color: #FFFFFF;
}

.lw_records_modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.lw_recordsContent {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}

.lw_records_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.lw_records_close:hover,
.lw_records_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

table.lw_records {
  width:95%;
  border-collapse: separate;
  border-spacing: 4px;
}

select.lw_records {
  padding: 0.5% 2%;
  margin: 2% 5%;
  font-size: 100%;
}