/*
 * $Revision: 732 $ 2014 $
 * $Author: tkeffer $ Hartmut $
 * $Date: 2012-11-03 13:59:51 -0700 (Sat, 03 Nov 2012) $
 * $Date: 2014-02-05 12:00:00 +0100 (Mit, 05 Feb 2014) $
 */
  
/* Global */

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    background-color: #f2f2f7;
    background-image: url('./../backgrounds/Clouds.gif');
    background-repeat: repeat;
    background-attachment: scroll;
}	

#hes11 {
   /*margin: 0;
   padding: 0; */
   background-image: url('./../backgrounds/Clouds.jpg');
}

#container {
    margin: 0;
    padding: 0;
    border: 0;
}

a:link {
  text-decoration: none;
  color: #207020;
}

a:hover {
  text-decoration: none;
  color: #30a030;
}

a:visited {
  text-decoration: none;
  color: #207020;
}


/*
 * This is the big header at the top of the page
 */

#header {   
  clear: both;
  /*background-color: #fffff;*/
  border: 1px solid #000000;
  /*border-radius: 10px 20px;*/
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  margin: 10px;
  padding: 2px;
  box-shadow: 6px 4px 10px #000000;
  text-align: center;
}


#masthead {
    margin: 1% 1% 0 1%;
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    /*border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;*/
}

#masthead h1 {
    color: #3d6c87;
}

#masthead h3 {
    color: #5f8ea9;
}

/*
#masthead table { width: 100%; }

#masthead img {  width: 80px;  
                 height: 80px;
              }
*/

/*  indexx  */

#links {
  clear: both;
  background-color: #f0ffff;
  border-radius: 15px;
  box-shadow: 6px 4px 9px #000;
  padding: 2px;
  margin: 10px;
  width: 350px;
  float: left;
}

 
#rechts {
     background-color: #f0ffff;
     border-radius: 15px;
     box-shadow: 6px 4px 9px #000;
     padding: 2px;                                 /*10px 25px;*/
     margin: 10px;
     width: 310px;
     float: right;
}

#contentx {
         background-color: #f0ffff;
         box-shadow: 6px 4px 10px #000;
         border-radius: 20px;
         width: 930px;
         text-align: center;
         margin: 20px auto;
         padding: 2px;
}

#contentx table {
     width: 100%;
}


.mitte {  
    width: 95%;
    min-height: 500px;
    margin: 1%;
    padding: 7px;
    border-radius: 12px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #f0ffff;
  }


.heatindex {
        color: #aa4444;
}

.windchill {
        color: #4444aa;
}

.temphi {
        color: #aa4444;
}

.templo {
        color: #4444aa;
}

.precip-img {
        width: 44px;
}

.obvis-img {
        width: 44px;
}

.pop-img {
        width: 8px;
}

.table_heading  {
        font-size: 80%;
        color: #888888;
        border-bottom: 1px solid #cccccc;
        padding-top: 20px;
}


/*
 * This holds the statistics (daily high/low, etc.) on the left: 
 */

#stats_group {
    width: 30%;
    min-height: 500px;
    margin: 1%;
    padding: 5px;
    float: left;
    border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

.stats table {
    border: thin solid #000000;
    width: 100%;
}

.stats td {
    border: thin solid #000000;
    padding: 2px;
}

.stats_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
}

.stats_label {
    color: green;
    font-size: 10pt;
}

.stats_data {
    color: blue;
    font-size: 10pt;
}

/*
 * This holds the "About", "Almanac", and plots on the right
 */

#contentl, #contentr { 
    min-height: 500px;
    margin: 1%;
    padding: 7px;
    border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#contentl table {
    width: 100%;
}

#content {
    width: 62%;
    min-height: 500px;
    margin: 1%;
    padding: 7px;
    float: right;
    border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
    text-align: center;
}


#content .header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


#content .caption {
    font-weight: bold;
    color: #3d6c87;
}

#content table {
    text-align: center;
    width: 100%;
}


#content .label {
    text-align: right;
    font-style: italic;
}

#content .data {
    text-align: left;
}

#about, #almanac { 
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}


#contentwe {
    width: 64%;
    min-height: 500px;
    margin: 1%;
    padding: 7px;
    float: right;
    border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
    text-align: center;
}

#contentwe table {
    text-align: center;
    width: 100%;
    border: thin solid #000000;
}

#contentwe td {
    border: thin solid #000000;
    padding: 2px;
}

.celestial_group {
}
    
.celestial_body {
    width: 48%;
    vertical-align: top;
    display:inline-block;
}


#plots { 
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
#plots img {
    border: thin solid #3d6c87;
    margin: 3px;
    padding: 3px;
}


/*
 * Navigation bar (week, month, etc.) at the bottom
 */

.navbar {
    margin: 0 1% 1% 1%;
    padding: 5px;
    text-align: center;
    clear: both;
    border-radius: 5px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-image: linear-gradient(left,
                                      purple,
                                      blue,
                                      green,
                                      yellow,
                                      red,
                                      purple);

    background-image: -moz-linear-gradient(left,
                                           purple,
                                           blue,
                                           green,
                                           yellow,
                                           red,
                                           purple);
    background-image: -o-linear-gradient(left,
                                           purple,
                                           blue,
                                           green,
                                           yellow,
                                           red,
                                           purple);
    background-image: -webkit-linear-gradient(left,
                                           purple,
                                           blue,
                                           green,
                                           yellow,
                                           red,
                                           purple);
   background-image: -ms-linear-gradient(left,
                                           purple,
                                           blue,
                                           green,
                                           yellow,
                                           red,
                                           purple);
}

.hesnavbar {
    margin: 0 1% 1% 1%;
    padding: 5px;
    width: 150px;
    text-align: left;
    flot: left;
    clear: both;
    border-radius: 5px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    box-shadow: 6px 10px 10px #000000;
}

/* main menu styles */
#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
    border-radius:10px;
   -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 6px 6px rgba(0,0,0, .5);
    -moz-box-shadow:0 6px 6px rgba(0,0,0, .5);
    -webkit-box-shadow:0 6px 6px rgba(0,0,0, .5);
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

#nav li:hover > a {
    background-image: -moz-linear-gradient(left,
                                           green,
                                           yellow,
                                           red);
    background-image: -webkit-linear-gradient(left,
                                           green,
                                           yellow,
                                           red);
    color:#000;
    border-top:1px solid #f8f8f8;
    box-shadow:0 2px 2px rgba(0,0,0, .7);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#335533 repeat-x 0 -100px;
    color:#fff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background-image: -moz-linear-gradient(left,
                                           green,
                                           yellow,
                                           red);
    background-image: -webkit-linear-gradient(left,
                                           green,
                                           yellow,
                                           red);
    border:1px solid #7788aa;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}

#nav ul li {
    float:none;
    margin-bottom: 12px;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160px;
    top:0px;
}



/*************** Global Styles ***************/

h2, h3, h4, h5, h6 {
    color: #3d6c87;
}

.header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


li {  list-style-type: none;   }  


/**************** linke Tabelle index.html.tmpl *********************/

.metrics {
  font-size: 80%;
}

.metrics table {
   width: 100%;
}

.metrics a {
  text-decoration: none;
}

.metric_title {
  text-align: left;
  font-weight: bold;
}

.metric_name {
  text-align: right;
}

.metric_large {
  text-align: left;
  font-weight: bold;
  font-size: 230%;
}

tr.even {
  background-color: #ffffff;
}

tr.odd {
  background-color: #B5D3DB;
}

.metric_value {
  text-align: left;
  font-weight: bold;
}

.metric_units {
  text-align: left;
}

.hilo_time {
  text-align: left;
  color: #333333;
  font-size: 85%;
}

/****************** almanach ****************************/

.ametrics {
}

.ametrics table {
   width: 100%;
}

.ametrics a {
  text-decoration: none;
}

.ametric_title {
  text-align: left;
  font-weight: bold;
}

.ametric_name {
  text-align: right;
}

.ametric_sym {
  font-weight: bold;
  font-size: 250%;
}

.ametric_large {
  text-align: left;
  font-weight: bold;
  font-size: 230%;
}

.ametric_value {
  text-align: left;
  color: #007000;
}

.ametric_valuem {
  text-align: left;
  color: #ff0000;
}

.ametric_units {
  text-align: left;
}

.ahilo_time {
  text-align: left;
  font-size: 85%;
}



/************************* footer ******************************/

/*#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: yellow;
    height: 2em;
}*/

#footer p {
   text-align: center;
}


#footer  {
    clear: both;
    margin: 1% 1% 2% 1%;
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    border-radius: 20px;
    /*border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;*/
    box-shadow: 6px 10px 10px #000000;
    background-color: #fafaff;
}


#fzei {
    width: 95%;
    margin: 1%;
    padding: 7px;
    border-radius: 12px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #f0ffff;
    text-align: center;
}

.rthes {
   float: right;
   clear: right;
   text-align: right;
   font-size: 8pt;
}
    
.lthes {
    float: left;
    clear: left;
    text-align: left;
    font-size: 8pt;
}

/*  rechts */


#radar_img,
#radar_local_img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px;
}
    
#radar_img img,
#radar_local_img img {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin: 3px;
    padding: 3px;
}
    
#radar_img p,
#radar_local_img p {
    width: 90%;
    font-style: italic;
    font-size: smaller;
    text-align: center;
    margin-top: 0;
}
    
/***************** Tabellen *******************/

#hesdata {
  clear: both;
  background-color: #f0ffff;
  border: 1px solid #000;
  border-radius: 10px 20px;
  margin: 10px;
  padding: 20px;
  box-shadow: 6px 4px 10px #000000;
  text-align: center;
}

.mittetab {                
    width: 95%;
    min-height: 50px;
    margin: 1%;
    padding: 7px;
    border-radius: 12px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #f0ffff;
}

#hesdata table {
    text-align: center;
    width: 100%;
}


#contentcmon {
  clear: both;
  border: 1px solid #000000;
  border-radius: 10px 20px;
  margin: 10px;
  padding: 2px;
  box-shadow: 6px 4px 10px #000000;
  text-align: center;
}

/* neue Seite */

.hes1 {
  font-size: 90%;
}

.hes1_kopfa {
    font-size: 150%;
    color: coral;
    font-weight: bold;
}

.hes1_bigval {
    font-size: 200%;
    color: chocolate;
    font-weight: bold;
    text-align: right;
}

/*#flexbox {
    display: flex;
    align-items: flex-start;
    flex-direction: row ;
    flex-wrap: wrap ;

}
#flexbox div {
      flex-grow: 1 ;
      flex-basis: auto;
}*/


.hes {
    float: left;
    width: 330px;
    /*height: 180px;*/
    margin: 10px;
    padding: 2px;
    border-radius: 12px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    box-shadow: 6px 4px 10px #000000;
    background-color: #f0ffff;
}

.hes table {
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
}


.hesbox {
    margin: 1%;
    padding: 5px;
    vertical-align: center;
    text-align: center;
    border-radius: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

.hes1_kopf {
        font-size: 80%;
        color: #888888;
        border-bottom: 1px solid #cccccc;
        padding-top: 20px;
}

.hes1_kopfb {
       text-align: right;
       padding-top: 10px;
}

.hes1_kopfc {
       text-align: center;
       padding-top: 10px;
}

.hes1_valhi {
        color: fuchsia;
}

.hes1_vallo {
        color: dodgerblue;
}

.hes1_leer {
     width: 44px;
     background-color: #faebd7;
}

.hes1_trendhi {
       color: fuchsia;
       font-weight: bold;
       font-size: 180%;
  }

.hes1_trendlo {
       color: dodgerblue;
       font-weight: bold;
       font-size: 180%;
}

.hes1_wind {
       width: 45px;
}
.hes1_nam {
      background-color: gold;
}
.hes1_mon {
     background-color: darkblue;
     color: white;
}
/*
.hes_lufe,
.hes_reg {
      background-image: url('./../backgrounds/drops.gif');
}

.hes_temp {
      background-image: url('./../backgrounds/leaf.jpg');
}

.hes_win {
        background-image: url('./../backgrounds/butterfly.jpg');
}

.hes_somo {
     background-image: url('./../backgrounds/night.gif');
}*/


td.hes1_wol {
   width: 33%;
}
td.hes1_wind {
   font-size: 230%;
   font-weight: bold;
}

.hesso {
    /*background-color: gold;*/
    position: absolute;
    width: 100px;
    height: 100px;
    top: 30px;
    left: 50px;
    border: 2px solid gold;
    border-radius: 50px;
    background-image: url('xicons/son01.png');

}
/*
.hesso ul li,
.hesmo ul li { 
    margin-top: 15px;
    padding-top: 5px;
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
}*/

.hesmo {
    /*background-color: lightskyblue;*/
    position: absolute;
    width: 100px;
    height: 100px;
    top: 30px;
    right: 80px;
    border: 3px solid lightskyblue;
    text-align: center;
    border-radius: 50px;
    background-image: url('xicons/Mo33.png');

}

#hesBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#hesBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}


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

#cookiedingsbums a:hover {text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #d6e0eb; 
   background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#d6e0eb', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}