body {
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.95em; /* 0.75em */
margin: 0px;
}

h1 {
font-size:1.6em;
margin: 0.5em; /* 0.5em 0.5em 1em 0 */
}

h2 {
font-size:1.2em;
margin:0.5em 0.5em 0.5em 0.5em; /* 0.8em 0.5em 0.3em 0.6em */
}

#header {
position: relative;
width: 100%;
height: 1.8em;
font-size: 1.7em;
background: #4B8BD0;
font-family: Roboto-light;
color: #FFFFFF;
padding: 0;
}

#header a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

#header-logo {
display: inline;
padding-left: 0.5em;
position:relative;
top: 0.14em;
}

#header-content {
display: inline;
padding-left: 0.3em;
position:relative;
top: 0.12em;
}

#temp_container {
display: block;
text-align: center;
}

#sensor_switch {
display: inline;
font-size: 2.2em;
font-family: Roboto-thin;
vertical-align: bottom;
position: relative;
left: -50pt;
top: 0pt;
}

#actualtemp {
display: inline;
font-size: 4.5em;
font-family: Roboto-thin;
position: relative;
left: 18pt;
}
#celsius {
display: inline;
font-size: 2.2em;
color: #bbbbbb;
font-family: Roboto-light;
vertical-align: top;
position: relative;
left: 15pt;
top: 10pt;
}

#dt {
display: inline;
font-size: 1.2em;
font-family: Roboto-light;
position: relative;
left: 0pt;
}
#dt_unit {
display: inline;
font-size: 1.0em;
color: #999999;
font-family: Roboto-light;
position: relative;
left: 0;
}

#avg24h {
display: inline;
font-size: 1.2em;
font-family: Roboto-light;
position: relative;
left: 0pt;
}
#avg24h_unit {
display: inline;
font-size: 1.0em;
color: #999999;
font-family: Roboto-light;
position: relative;
left: 0;
}
#doordata {
display: inline;
font-size: 1.8em;
font-family: Roboto-light;
position: relative;
left: 0pt;
}

#content {
/*padding-left: 0.5em;
padding-right: 0.5em;*/
padding-left: 0;
padding-right: 0;
}

#login-logo {
text-align: center;
padding-top: 20px;
}

/*
#login_header {
font-size: 1.5em;
color: #4B8BD0;
font-family: Roboto-light;
display: block;
text-align: center;
padding-top: 0px;
position: relative;
bottom: 5px;
}
*/

#login_header {
font-size: 3em;
color: #4B8BD0;
font-family: Roboto-light;
display: block;
text-align: center;
padding-top: 20px;
}


#lock {
text-align: center;
position: relative;
top: 100px;
}

#lock a {
padding: 1em;
padding-top: 2em;
}


#message {
border: 1px solid #ddd;
background:#f0f0f0 url(../iconmonstr-info-6-icon.svg) no-repeat 11px 50%;
background-size: 25px 25px;
padding: 0.8em;
padding-left: 3em;
margin: 0.5em;
margin-top: 1em;
color: #123456;
}

#settings-button {
position: absolute;
bottom: 0;
left: 0;
/* right: 45px; */
padding-bottom: 0.25em;
padding-right: 0em;
}

#settings-button a {
border: 0px solid;
padding-top: 1.9em;
padding-left: 0.3em;
padding-bottom: 0.25em;
padding-right: 1.2em;
}

#saunasettings-button {
position: absolute;
bottom: 0;
right: 0;
padding-bottom: 0.25em;
padding-right: 0em;
}

#saunasettings-button a {
border: 0px solid;
padding-top: 1.9em;
padding-left: 0.5em;
padding-bottom: 0.25em;
padding-right: 0.4em;
}

#power-button {
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 0.25em;
padding-left: 0em;
}

#power-button a {
border: 0px solid;
padding-top: 1.9em;
padding-left: 0.4em;
padding-bottom: 0.25em;
padding-right: 1.3em;
}

#timer-button {
text-align: center;
padding-top: -0.3em;
padding-bottom: 0.0em;
}

#timer-button a {
border: 0px solid;
padding: 0.0em;
/*padding-top: 1.3em;*/
padding-bottom: 0.0em;
}

#timer-button img {
position: relative;
top: 4px;
}

#disable-master {
display: inline;
}

#graphprefill {
display: inline-block;
width: 100%;
text-align: center;
}

.pad {
margin: 0.5em;
}

.center-info {
font-size: 1.2em;
text-align: center;
font-family: Roboto-light;
color: #333333;
}

.center-info-large {
font-size: 1.8em;
text-align: center;
font-family: Roboto-light;
color: #333333;
}

.password-clear {
display: none;
color: #808080;
font-style: italic;
}

.default-value {
color: #808080;
font-style: italic;
}

.timer-data {
font-family: Roboto-regular;
font-size: 1.1em;
color: #c0c0c0;
display: inline;
vertical-align: bottom;
position: relative;
bottom: 4px;
left: 8px;
}

.finespace {
display: inline;
font-size: 0.4em;
}

.tai {
color: #808080;
font-size: 1.1em;
font-style: italic;
padding: 0.5em;
}

tr.even {
background: #E8E8E8;
}
tr.odd {
background: #F0F0F0;
}

td.main {
width: 100%;
max-width:80px;
overflow:hidden;
padding: 0px;
}

td.left {
padding-left: 0.5em;
max-width: 100px;
white-space:nowrap;
overflow:hidden;
}

td.center {
max-width:140px; /*toimii, koska??*/
white-space:nowrap;
overflow:hidden;
}

td.right {
text-align: right;
padding-right: 0.5em;
}

td.button_left {
padding: 0;
padding-right: 0.4em;
width:50%;
}

td.button_right {
padding: 0;
padding-left: 0.4em;
width:50%;
}

table td {
padding: 0;
}

table tr td a {
display: block;
height: 100%;
width: 100%;
padding: 0;
padding-top: 0.6em;
padding-bottom: 0.6em;
}

table {
width:100%;
border: 0;
border-spacing: 0;
border-collapse: collapse;
}

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

input
{
color: #000000;
background: #ffffff;
border: 1px solid #CDCDCD;
-webkit-appearance: none;
border-radius: 0;
}

input[disabled]
{
color: #cdcdcd;
background: #fafafa;
border: 1px solid #CDCDCD;
}

div.scale input
{
width: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding: 0.5em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}

input[type='checkbox']
{
-webkit-appearance: checkbox;
min-width: 17px;
min-height: 17px;
vertical-align: bottom;
position: relative;
top: 2px;
}

div.scalesubmit input
{
color: #000000;
background-color: #eeeeee;
width: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .3);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .3);
box-shadow: 0 0 4px rgba(0,0,0, .3);
padding: 0.5em;
margin-top: 0.7em;
margin-bottom: 0.2em;
cursor: pointer;
}

div.onbutton
{
display:inline; 
}
div.offbutton
{
display:inline; 
}

div.onbutton input
{
color: #006B09;
background-color: #4DDC59;
font-size: 1.2em;
width: 100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .3);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .3);
box-shadow: 0 0 4px rgba(0,0,0, .3);
padding: 0.5em;
margin-top: 0.7em;
margin-bottom: 0.2em;
cursor: pointer;
}

div.offbutton input
{
color: #6B0900;
background-color: #DC594D;
font-size: 1.2em;
width: 100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .3);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .3);
box-shadow: 0 0 4px rgba(0,0,0, .3);
padding: 0.5em;
margin-top: 0.7em;
margin-bottom: 0.2em;
cursor: pointer;
}


div.scaleOn {
/*General*/
transform: scale(0.3, 0.3);
/*Firefox*/
-moz-transform: scale(0.3, 0.3);
/*Microsoft Internet Explorer*/
-ms-transform: scale(0.3, 0.3);
/*Chrome, Safari*/
-webkit-transform: scale(0.3, 0.3);
/*Opera*/
-o-transform: scale(0.3, 0.3);
}

@font-face
{
font-family: Gen;
src: url(Gen-Light.otf);
}

@font-face
{
font-family: Gen;
src: url(Gen-Regular.otf);
font-weight:bold;
}

@font-face
{
font-family: Roboto-thin;
src: url(Roboto-Thin-webfont.woff);
}
@font-face
{
font-family: Roboto-light;
src: url(Roboto-Light-webfont.woff);
}
@font-face
{
font-family: Roboto-regular;
src: url(Roboto-Regular-webfont.woff);
}


/* loading spinner */
.spinner {
  margin: 50px auto;
  margin-bottom: 60px;
  width: 100px;
  height: 100px;
  position: relative;
}

.smallspinner {
  margin: 6px auto;
  margin-bottom: 2.5px;
  width: 17px;
  height: 17px;
  position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 30px;
  height: 30px;
  background-color: #4B8BD0;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.smallcontainer1 > div, .smallcontainer2 > div, .smallcontainer3 > div {
  width: 5px;
  height: 5px;
  background-color: #333333;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.smallspinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2, .smallcontainer2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3, .smallcontainer3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}


.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1, .smallcontainer2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1, .smallcontainer3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2, .smallcontainer1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2, .smallcontainer2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2, .smallcontainer3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3, .smallcontainer1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3, .smallcontainer2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3, .smallcontainer3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4, .smallcontainer1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4, .smallcontainer2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4, .smallcontainer3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}


@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* loading grid */
.lds-grid {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 160px;
  top: 30%;
}
.lds-grid div {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e3e3e3;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 16px;
  left: 16px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 16px;
  left: 64px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 16px;
  left: 112px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 64px;
  left: 16px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 64px;
  left: 64px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 64px;
  left: 112px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 112px;
  left: 16px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 112px;
  left: 64px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 112px;
  left: 112px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}