/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 28, 2016, 6:22:29 PM
    Author     : bata
*/

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    
      #main {
        position: relative;
        height: 100%;
        width: 1600px;
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
      }
      #menu {
        position: relative;
        top: 0px;
        left: 0px;
        width: 1600px;
        height: 20px;
        color: white;
        text-align: center;
        font-size: 14px;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        background-color: #2342ae;
        border-radius: 0px 0px 0px 0px;
      }
      .ahs {
        position: relative;
        width: 320px;
        height: 100%;
        text-align: center;
        opacity: 0.5;
        cursor: pointer;
        float: left;
      }
      .ahs:hover {
          opacity: 1.0;
      }
      #menu_top {
          position: relative;
          width: 400px;
          height:80px;
          font-size: 14px;
          float: left;
          margin-left: 0px;
          margin-top: 0px;
      }
      .ahs_top {
        position: relative;
        
        width: 400px;
        height: 15px;
        text-align: center;
        opacity: 0.5;
        cursor: pointer;
      }
      .ahs_top:hover {
          opacity: 1.0;
      }
      #imageleft {
        position: relative;
        //display: inline-block;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 300px;
        margin: 0px 20px 0px 0px;
        padding: 0px;
        border-radius: 0px 0px 20px 0px;
        //box-shadow: 0px 10px 5px grey;
        float: left;
      }
      #imageright {
        position: relative;
        //display: inline-block;
        width: 200px;
        height: 300px;
        top: 0px;
        right: 0px;
        margin: 0px 00px 0px 20px;
        padding: 0px;
        border-radius: 0px 0px 0px 20px;
        //box-shadow: 0px 10px 5px grey;
        float: right;
      }
      .porastgleft {
        position: relative;
        //display: inline-block;
        width: 432px;
        height: 200px;
        top: 0px;
        left: 0px;
        font-size: 20px;
        text-align: center;
        margin: 0px;
        padding: 0px;
        float: left;
      }
      .porastgright {
        position: relative;
        //display: inline-block;
        width: 432px;
        height: 200px;
        top: 0px;
        right: 0px;
        font-size: 20px;
        text-align: center;
        margin: 0px;
        padding: 0px;
        float: right;
      }
      .porastgt {
        position: relative;
        width: 432px;
        height: 30px;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        margin: 0px;
        padding: 0px;
      }
      .porastgt p {
        margin: 0;
        position: absolute;
        font-weight: normal;
        font-size: 22px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      .porast {
        position: relative;
        display: inline-block;
        width: 140px;
        height: 170px;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        margin: 0px;
        padding: 0px;
      }
      .porastt p {
        margin: 0;
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 70px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      .porasth {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: #2342ae;
        margin: 0px;
        padding: 0px;
      }
      .porastt {
        position: relative;
        width: 100%;
        height: 75%;
        font-size: 10px;
        color: black;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }
      
    .porasth p {
        margin: 0;
        position: absolute;
        font-weight: bold;
        font-size: 22px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      .title {
        position: relative;
        display: inline-block;
        width: 296px;
        height: 200px;
//        left: 0px;
//        float: left;
        color: white;
//        background-color: white;
        margin: 0px;
        font-size: 18px;
        text-align: center;
        //float: left;
      }
      .title p {
        margin: 0px;
        position: relative;
        font-weight: normal;
        font-size: 18px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      
      #logo {
          background-image: url("meteoswhite.png");
          background-repeat: no-repeat;
          position: relative;
          //display: inline-block;
          width: 200px;
          height:60px;
          float: left;
          margin-left: 10px;
          margin-top: 10px;
      }
      #logo2 {
          background-image: url("dlhe_logo.png");
          background-repeat: no-repeat;
          position: relative;
          right: 10px;
          overflow: visible;
          width: 405px;
          height:50px;
          margin-left: 0px;
          margin-top: 15px;
          float: right;
          border-radius: 10px 10px 10px 10px;
          box-shadow: 0px 0px 15px white;
      }
      #toplogo {
        position: relative;
        height: 80px;
        width: 1600px;
        color: white;
        text-align: center;
        font-size: 24px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        background-color: mediumblue;
        background-image: url("bg01.jpg");
        border-radius: 20px 20px 0px 0px;
        //box-shadow: 5px 10px 10px grey;
        z-index: 2;
      }
      #top3 {
        height: 80px;
        width: 1600px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
      }
      #middle {
        height: 100px;
        width: 1162px;
        margin: auto;
      }
      #temp {
        position: relative;
        //display: inline-block;
        top: 0px;
        left: 0px;
        width: 286px;
        height: 100%;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        float: left;
        margin: 0px;
        padding: 0px;
      }
      #temph {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: #2342ae;
        margin: 0px;
        padding: 0px;
      }
      
      #temph p {
        margin: 0px;
        padding: 0px;
        position: absolute;
        font-weight: normal;
        font-size: 14px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #tempt {
        position: relative;
        width: 100%;
        height: 75%;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }
      #tempt p {
        margin: 0;
        position: absolute;
        color: darkred;
        font-weight: bold;
        font-size: 50px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #level {
        position: relative;
        //display: inline-block;
        top: 0px;
        left: 5px;
        width: 286px;
        height: 100%;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        float: left;
        margin: 0px;
        padding: 0px;
      }
      #levelh {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: #2342ae;
        margin: 0px;
        padding: 0px;
      }
      
      #levelh p {
        margin: 0px;
        padding: 0px;
        position: absolute;
        font-weight: normal;
        font-size: 14px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #levelt {
        position: relative;
        width: 100%;
        height: 75%;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }
      #levelt p {
        margin: 0;
        position: absolute;
        color: darkgreen;
        font-weight: bold;
        font-size: 50px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #kota {
        position: relative;
        //display: inline-block;
        top: 0px;
        left: 10px;
        width: 286px;
        height: 100%;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        float: left;
        margin: 0px;
        padding: 0px;
      }
      #kotah {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: #2342ae;
        margin: 0px;
        padding: 0px;
      }
      
      #kotah p {
        margin: 0px;
        padding: 0px;
        position: absolute;
        font-weight: normal;
        font-size: 14px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #kotat {
        position: relative;
        width: 100%;
        height: 75%;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }
      #kotat p {
        margin: 0;
        position: absolute;
        color: darkblue;
        font-weight: bold;
        font-size: 50px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      
/* Safari 4.0 - 8.0 */
@-webkit-keyframes warning {
    0%   {background-color:lightblue;}
    40%  {background-color:lightblue;}
    70%  {background-color:red;}
    100%  {background-color:lightblue;}
}

/* Standard syntax */
@keyframes warning {
    0%   {background-color:lightblue;}
    40%  {background-color:lightblue;}
    70%  {background-color:red;}
    100%  {background-color:lightblue;}
}

      #batterywarning {
        position: relative;
        display: inline-block;
        top: 0px;
        left: 15px;
        width: 286px;
        height: 100%;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        float: left;
        margin: 0px;
        padding: 0px;
        -webkit-animation-name: warning; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
        -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
        animation-name: warning;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      
      #battery {
        position: relative;
        display: inline-block;
        top: 0px;
        left: 15px;
        width: 286px;
        height: 100%;
        font-size: 20px;
        text-align: center;
        background-color: lightblue;
        float: left;
        margin: 0px;
        padding: 0px;
      }
      #batteryh {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: #2342ae;
        margin: 0px;
        padding: 0px;
      }
      
      #batteryh p {
        margin: 0px;
        padding: 0px;
        position: absolute;
        font-weight: normal;
        font-size: 14px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #batteryt {
        position: relative;
        width: 100%;
        height: 75%;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }
      #batteryt p {
        margin: 0;
        position: absolute;
        color: darkred;
        font-weight: bold;
        font-size: 50px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #titlelogo {
        width: 100%;
        height: 100%;
        color: white;
        margin: auto;
      }
      #titlelogo p {
        text-shadow: 5px 5px 15px white;
         margin: 0;
        position: absolute;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 26px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #info {
        float: right;
        text-align: center;
        color: black;
        height: 66px;
        width: 369px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 8px;
        margin-bottom: 8px;
        border-style: solid;
        border-width: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: white;
        border-radius: 20px;
        opacity: 0.8;
      }
      #map {
        position: relative;
        display: inline-block;
        height: 550px;
        width: 400px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        border-radius: 0px 20px 0px 0px;
      }
      #image {
        position: absolute;
        top: 90px;
        right: 20px;
        width: 140px;
        height: 160px;
        background-image: url("ams.jpg");
        border-width: 1px;
        border-style: solid;
        border-color: black;
        border-radius: 20px 20px 20px 20px;
        box-shadow: 5px 5px 5px grey;
        z-index: 1;
      }
      #loader {
        position: absolute;
        display: none;
        top: 550px;
        left: 750px;
        width: 106px;
        height: 106px;
        background-image: url("loader.gif");
        opacity: 0.5;
        z-index: 1;
      }
      #leftwindow {
        display: inline-block;
        height: 550px;
        width: 800px;
        margin: 0px;
        background-color: #F0F0FF;
        border-radius: 20px 0px 0px 0px;
      }
      #graph {
        position: relative;
        height: 500px;
        width: 1600px;
        margin: 10px 0px 0px 0px;
        background-color: #F0F0FF;
//        border-radius: 0px 0px 20px 20px;
      }
      #priorday {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 36px;
          opacity: 0.3;
      }
      #priorday:hover {
          opacity: 1.0;
      }
      #nextday {
          display: inline-block;
          float: right;
          font-weight: normal;
          font-size: 36px;
          opacity: 0.3;
      }
      #nextday:hover {
          opacity: 1.0;
      }
      #dateofgraph {
          display: relative;
          margin: auto;
          font-weight: normal;
          font-size: 36px;
          opacity: 0.3;
      }
      #dateofgraph:hover {
          opacity: 1.0;
      }
      #divdateofgraph {
          display: inline-block;
          width:100%;
          text-align: center;
          margin: auto;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }