/* CSS Document */
* { font-family: "Ubuntu", arial; font-size: 12px; box-sizing: border-box; }
body { margin: 0px; padding: 0px; }
.max960 { margin: 0 auto; width: 960px; height: 100%; }
.col1, .col2, .col3, .col4, .col5, .col6, 
.col7, .col8, .col9, .col10, .col11, .col12 { padding: 0 10px; float: left; }
.col1 { width:  80px; }
.col2 { width: 160px; }
.col3 { width: 240px; }
.col4 { width: 320px; }
.col5 { width: 400px; }
.col6 { width: 480px; }
.col7 { width: 560px; }
.col8 { width: 640px; }
.col9 { width: 720px; }
.col10 { width: 800px; }
.col11 { width: 880px; }
.col12 { width: 960px; }

#sensorList { }

.bgbox { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;
         background: #cccccc url("images/bg_trini_hd.png") no-repeat;
         background-size: cover;
       }
.menubox { position: relative; width: 320px; height: 100%; float: right;
           box-shadow: 1px 2px 6px rgba(32,32,32,.5); background: rgba(47, 106, 188, 0.95); /*#2f6abc;*/
         }       
.sysnamebox { color: #f0f0f0; font-size: 24px; font-style: italic; font-weight: bold; margin: 20px; 
              border-bottom: solid 1px #f0f0f0; text-align: right; padding-right: 10px;
}

#logo { text-align: center; margin: 40px 20px; }         

.mainmenu { margin: 40px 0; }
.mainmenu ul { list-style: none; padding: 0px; margin: 0px; }
.mainmenu li {}
.mainmenu a { font-size: 18px; display: block; padding: 10px 30px; text-decoration: none; color: #f0f0f0; }
.mainmenu a:hover { background: rgba(208,208,208,.25); }

#loading { position: absolute; right: 10px; bottom: 10px; display: none; }

.contentbox { width: 640px; height: 100%; overflow: auto; }

.sensorbox { position: relative; margin: /*0.4vw*/ 10px 0px;  
             border: solid 1px grey; border-radius: /*0.444vw;*/ 6px; 
             height: /*5.466vw;*/ 74px; width: 100%; /*480px;*/ /* background-image: linear-gradient(#e0e0f0, white);*/
             background-color: rgba(224,224,240,.65);
             box-shadow: 2px 2px 6px #888; }
.regenbox { position: relative; border: solid 1px grey; border-radius: 6px; 
            background-color: rgba(224,224,240,.65); box-shadow: 2px 2px 6px #888; }
.windbox { position: relative; border: solid 1px grey; border-radius: 6px; 
           background-color: rgba(224,224,240,.65); box-shadow: 2px 2px 6px #888; }
.heizungbox { position: relative; border: solid 1px grey; border-radius: 6px; 
              background-color: rgba(224,224,240,.65); box-shadow: 2px 2px 6px #888; }
         
.kachel { padding: 0px; }             
.kachel .sensorbox { height: 130px; width: 180px; float: left; margin: 0px 10px 20px 10px; }
.kachel .name { font-size: 14px; }
.kachel .temperatur,
.kachel .t_wert { font-size: 42px; }
.kachel .temperatur { top: 30px; }
.kachel .feuchte { bottom: 30px; }
.kachel .zeit { left: 20px; font-size: 10px; }
.kachel .regen { font-size: 16px; }
.kachel .r_wert { font-size: 42px; }
.kachel .regen { top: 45px; }
.kachel .rday { top: 27px; right: 20px; font-size: 14px; }

.kachel .regenbox { height: 130px; width: 180px; float: left; margin: 0px 10px 20px 10px; }

.kachel .windbox { height: 130px; width: 380px; float: left; margin: 0px 10px 20px 10px; }
.kachel .windstaerke { position: absolute; top: 40px; right: 115px; font-size: 42px; }
.kachel .windstaerke-einheit { position: absolute; top: 64px; right: 75px; font-size: 16px; }
.kachel .windrichtung { position: absolute; top: 90px; right: 20px; }
.kachel .windimage { position: absolute; right: 20px; top: 35px; width: 50px; }

.kachel .boeebox { position: absolute; left: 20px; top: 50px; }
.kachel .boeebox div { margin-left: 25px; }
.kachel .boeeimage { width: 20px; vertical-align: top; }
.kachel .boeestaerke { font-size: 16px; margin: 0px 0px 0px 5px; }

.kachel .maxbox { position: absolute; left: 120px; top: 50px; }
.kachel .maxbox div { margin-left: 25px; }
.kachel .maximage { width: 20px; vertical-align: top; }
.kachel .maxstaerke { font-size: 16px; margin: 0px 0px 0px 5px; }

.kachel .heizungbox { min-height: 35px; width: 580px; margin: 0px 10px 20px 10px; padding: 8px 0px 8px 100px; }
.heizungbox .schalter { display: inline-block; width: 114px; padding: 2px 5px; 
                         border: solid 1px grey; border-radius: 4px; margin: 2px;
                         background-color: rgba(64,64,64,.45); }
.heizungbox .on0 {}
.heizungbox .on1 { background: #ffcc00; }
.heizungbox .on2 { background: #b80000; color: white; }
.heizungbox .on3 { background: #368f00; }                         


.standortName { position: relative; margin: 40px 10px; font-weight: bold; font-size: 48px; text-shadow: 2px 2px 16px #000000; color: #e0e0f0;  }   
.chartBtn { position: absolute; right: 40px; bottom: 7px; 
            box-shadow: 2px 2px 6px #888;
            background: rgba(224,224,240,.65); border: solid 1px grey; border-radius: 6px; }
.chartBtn:hover { background: rgba(224,224,240,1); }            
          
.sensorbox:hover .sid { background: yellow; }             
.sid { position: absolute; left: -10px; top: 5px; width: 20px; height: 20px; padding-top: 1px; 
       border: solid 1px grey; border-radius: 10px; background: #e0e0f0; text-align: center;}             
.name { position: absolute; left: /*1.6vw;*/ 20px; top: /*0.888vw;*/ 12px; font-size: /*2.364vw;*/ 32px; }
.zeit { position: absolute; left: /*2vw;*/ 25px; bottom: /*0.666vw;*/ 8px; font-size: /*0.887vw;*/ 12px; }
.temperatur, .t_wert { font-size: /*2.659vw;*/ 36px; }
.temperatur { position: absolute; right: /*1.6vw;*/ 20px; top: /*0.4vw;*/ 5px; }
.feuchte { position: absolute; right: /*1.6vw;*/ 20px; bottom: /*0.4vw;*/ 5px; font-size: /*1.182vw;*/ 16px; }
.f_wert:before { font-size: /*0.888vw;*/ 12px; content: "Luftfeuchte: "; }
.f_wert { font-size: /*1.182vw;*/ 16px; }
.regen, .r_wert { font-size: 36px; }
.regen { position: absolute; right: 20px; top: 5px; }
.rday { position: absolute; }

#abdunkeln { position: fixed; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background: rgba(64, 64, 64, 0.5) none repeat scroll 0 0; }
.diagrambox { position: relative; margin: 120px auto 0;  
              width: 768px; 
              background: white; box-shadow: 1px 2px 6px rgba(255,255,255,.5);
            }
.controlsBox { position: relative; padding: 10px 20px 15px 20px;
               border-top: solid 1px grey; 
               text-align: right; }
.controlsBox span { font-size: 14px; margin-left: 5px; margin-right: 5px; }               
.btn { position: relative; font-size: 14px; border-radius: 4px 4px; border: solid 1px #2f6abc; background: #2f6abc; padding: 4px; width: 100px; color: #e0e0e0; box-shadow: 1px 2px 4px rgba(0,0,0,0.5); font-weight: bold; margin: 0 0 0 20px; }
.btn:hover { color: white; }
               
.datepicker { width: 100px; border: solid 1px #2f6abc; font-size: 14px; height: 25px; padding: 2px 4px; }
button.ui-datepicker-trigger { font-size: 14px; border-radius: 4px 4px; border: solid 1px #2f6abc; background: #2f6abc; padding: 4px; color: #e0e0e0; box-shadow: 1px 2px 4px rgba(0,0,0,0.5); font-weight: bold; margin: 0 10px 0 5px; width: 30px; }
button.ui-datepicker-trigger:hover { color: white; }
.days { width: 45px; border: solid 1px #2f6abc; font-size: 14px; padding: 2px 1px; }