/*
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
*/


.submanu {
    position: relative;
    display: inline-block;
    min-width: 80px;
    float: left;
    margin-left: 50px;
}

.dropbtn {
    font-size: 12px;
    cursor: pointer;
    color: black;
    min-width: 95px;
    opacity: 0.4;
    height: 23px;
}


.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    font-size: 12px;
    right: 0;
    opacity: 0.95;
    min-width: 95px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    background-color: white;
    opacity: 0.95;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: lightblue;
    opacity: 0.95;
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1.0;
}

.dropdown-report {
    display: none;
    position: absolute;
    text-align: left;
    font-size: 12px;
    right: 0;
    opacity: 0.95;
    min-width: 95px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-report a {
    color: black;
    background-color: white;
    opacity: 0.95;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
}

.dropdown-report a:hover {
    background-color: lightblue;
    opacity: 0.95;
}

.dropdown:hover .dropdown-report {
    display: block;
    opacity: 1.0;
}

.dropdown:hover .dropbtn {
    opacity: 1.0;
}

/* 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;
    }
    canvas_month {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_month_rad {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_month_rhbar {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_ws {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_wsfrequency {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_wshi {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    canvas_calm {
        -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;
      }
      
      #toplogo {
        position: fixed;
        top: 0px;
        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;
      }
      #top {
        height: 80px;
        width: 1600px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
      }
      #middle {
        position: relative;
        height: 300px;
        width: 1600px;
        //top: 80px;
        margin-bottom: 10px;
        //padding-top: 80px;
        //border: 1px solid #FF0000;
      }
      #imageleft {
        position: absolute;
        //display: inline-block;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 300px;
        margin: 0px 0px 0px 0px;
        padding: 0px;
//        background-image: url("pictures/ms-wp_200x300_01_20170131.jpg");
//        background-repeat: no-repeat;

        border-radius: 0px 0px 20px 0px;
        //box-shadow: 0px 10px 5px grey;
        //float: left;
      }
      #imageright {
        position: absolute;
        //display: inline-block;
        width: 200px;
        height: 300px;
        top: 0px;
        right: 0px;
        margin: 0px 0px 0px 0px;
        padding: 0px;
//        background-image: url("pictures/ms-wp_200x300_03_20170131.jpg");
        background-repeat: no-repeat;
        border-radius: 0px 0px 0px 20px;
        //box-shadow: 0px 10px 5px grey;
        //float: right;
      }
      .porastgleft {
        position: relative;
        //display: inline-block;
        width: 20%;
        height: 100%;
        top: 0px;
        left: 0px;
        font-size: 20px;
        text-align: center;
        margin: 0px;
        padding: 0px;
        
        //float: left;
      }
      #maininfo {
        position: relative;
        //display: inline-block;
        display: none;
        width: 20%;
        height: 100%;
        top: 0px;
        right: 0px;
        font-size: 20px;
        text-align: center;
        margin: 0px;
        padding: 0px;
        //float: left;
      }
      .none {
        display: none;  
      }
      .porastgright {
        position: relative;
        //display: inline-block;
        width: 20%;
        height: 100%;
        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("logo.png");
          background-repeat: no-repeat;
          background-position: center;
          background-color: white;
          position: relative;
          right: 10px;
          overflow: visible;
          width: 220px;
          height:46px;
          margin-left: 0px;
          margin-top: 17px;
          float: right;
          border-radius: 10px 10px 10px 10px;
          box-shadow: 0px 0px 15px white;
      }
      
      #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: 1px 1px 1px white;
         margin: 0;
        position: absolute;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 16px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #titlelogo table {
        //text-shadow: 1px 1px 1px white;
        margin: 0;
        position: absolute;
        //text-transform: uppercase;
        font-weight: normal;
        font-size: 16px;
        color: white;
        top: 50%;
        left: 50%;
        -ms-transform: translate(0%, 0%);
        transform: translate(-50%, -50%);
      }
      #titlelogo td {
        //text-shadow: 1px 1px 1px white;
        margin: 0;
        border-width: 0px;
        text-align: left;
      }
      #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;
      }
      
      #mainmanu {
        position: relative;
        height: 23px;
        width: 1596px;
        margin: 0px 0px 0px 0px;
        background-color: #2440AD;
        font-size: 20px;
        top: 0px;
        left:2px;
        z-index: 5;
//        border-radius: 0px 0px 20px 20px;
      }
      #monthtext {
        display: inline-block;
        float: left;
        height: 23px;
        width: 300px;
        margin: 0px 0px 0px 0px;
      }
      #priormonth {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 23px;
      }
      #priormonth:hover {
          opacity: 1.0;
      }
      #nextmonth {
          display: inline-block;
          float: right;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 23px;
      }
      #nextmonth:hover {
          opacity: 1.0;
      }
      .monthstatic {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 23px;
      }
      .month {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 23px;
      }
      .month:hover {
          opacity: 1.0;
      }
      .monthtime {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 16px;
          width: 40px;
      }
      .monthtime:hover {
          opacity: 1.0;
      }
      .monthcal {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 16px;
      }
      .monthcal:hover {
          opacity: 1.0;
      }
      .year {
          display: inline-block;
          float: left;
          font-weight: normal;
          font-size: 12px;
          opacity: 0.4;
          height: 23px;
      }
      .year:hover {
          opacity: 1.0;
      }
      .space {
          display: inline-block;
          float: right;
          height: 26px;
          width: 70px;
      }
      .tablemonthly {
        position: absolute;
        height: 171px;
        width: 1596px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
        top: 107px;
        left:2px;
//        border-radius: 0px 0px 20px 20px;
      }
      .tablemonthly table, th, td {
          border-left: 1px solid lightblue;
          border-right: 1px solid lightblue;
          border-collapse: collapse;
      }
      .tablemonthly table {
          width: 1592px;
          height: 167px;
          margin: auto;
          margin-top: 2px;
          font-size: 12px;
      }
      .tablemonthly th {
          font-size: 14px;
          font-style: strong;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          background-color: lightblue;
      }
      .tablemonthly tr:nth-child(odd) {
        background-color: #eee;
      }
      .tablemonthly td {
          font-size: 12px;
          text-align: right;
      }
      .radar {
        position: absolute;
        height: 396px;
        width: 396px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
        top: 1482px;
        left:2px;
//        border-radius: 0px 0px 20px 20px;
      }
      .radarhi {
        position: absolute;
        height: 396px;
        width: 396px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
        top: 1482px;
        left:1202px;
//        border-radius: 0px 0px 20px 20px;
      }
      .radarcalm {
        display: none;
        position: absolute;
        height: 396px;
        width: 396px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
        top: 82px;
        left:1002px;
//        border-radius: 0px 0px 20px 20px;
      }
      .graphwsfrequency {
        position: absolute;
        height: 396px;
        width: 796px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
        top: 1482px;
        left:402px;
//        border-radius: 0px 0px 20px 20px;
      }
      #graph {
        display: none;
        position: absolute;
        height: 500px;
        width: 1600px;
        top: 1000px;
        left: 0px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
//        border-radius: 0px 0px 20px 20px;
      }
      .graphmonth {
        position: absolute;
        height: 396px;
        width: 1596px;
        top: 282px;
        left: 2px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
//        border-radius: 0px 0px 20px 20px;
      }
      .graphmonthrad {
        position: absolute;
        height: 396px;
        width: 1596px;
        top: 1082px;
        left: 2px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
//        border-radius: 0px 0px 20px 20px;
      }
      .graphmonthrhbar {
        position: absolute;
        height: 396px;
        width: 1596px;
        top: 682px;
        left: 2px;
        margin: 0px 0px 0px 0px;
        background-color: #FFFFFF;
//        border-radius: 0px 0px 20px 20px;
      }
      
      #dateofgraph {
          display: relative;
          margin: auto;
          font-weight: normal;
          font-size: 36px;
          opacity: 0.4;
      }
      #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;
      }