html {margin: 0px auto; text-align: center;background-color: #fff; color: #333; display: block}
body {margin: 0; display: block; width: 1380px;background-color: #fff; border: 1px solid #fff;}
span {text-decoration: none; color: #000;}


#kalendar {position: absolute; left: 15px; top: 1950px; width: 1015px; background-color: #ccc; padding: 5px 0px 5px 5px; border: 1px solid #000;}
#topeni {width: 1080px; height: 473px; background-image: url('img/topeni.png'); background-repeat: no-repeat; background-position: 5px center; padding: 0px; margin: 10px;}
#user {position: absolute; font-size: 8px;}
#user a{      
      font-size: 10px; padding: 5px; background-color: #fff; border: 0px solid #ccc; -moz-border-radius: 5px;
      border-radius: 5px;  
      -moz-box-shadow: 0 0 5px #000;
      -webkit-box-shadow: 0 0 5px #000;
      box-shadow: 0 0 5px #000;
      }
#login_form {position: absolute; z-index: 10; width: 1901px; height: 769px; padding-top: 200px; top: 0px; left: 0px;background-image: url('img/background2.jpg'); background-repeat: no-repeat;  text-align: center;
            }
#login_form a{      
      font-size: 30px; padding: 25px; background-color: #fff; border: 1px solid #ccc; -moz-border-radius: 10px;
      border-radius: 10px;  
      -moz-box-shadow: 0 0 10px #000;
      -webkit-box-shadow: 0 0 10px #000;
      box-shadow: 0 0 10px #000;
      }            
            
#login_form input {font-size: 30px; padding: 5px; border:1px solid #fff;}
#login {position: absolute; top: 400px; left: 400px; font-size: 30px; padding: 25px; background-color: #fff; border: 1px solid #ccc; -moz-border-radius: 10px;
      border-radius: 10px;  
      -moz-box-shadow: 0 0 10px #000;
      -webkit-box-shadow: 0 0 10px #000;
      box-shadow: 0 0 10px #000;}
#napajeni_tuv {width: 18px; height: 100px; position: absolute; top: 252px; left: 81px; background-image: url('img/napajeni_tuv_stop.gif'); text-decoration: none;}
#napajeni_tuv a{display: block; width: 18px; height: 100px; text-decoration: none;}
#napajeni_aku {width: 100px; height: 26px; position: absolute; top: 298px; left: 245px; background-image: url('img/napajeni_aku.gif');}
#teplota_tuv {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 206px; left: 70px; text-align: center; }
#teplota_tuv_nastavena {opacity: 0.5; color: #fff; width: 40px; height: 15px; font-size: 11px; position: absolute; top: 190px; left: 70px; text-align: center;}
#time_o {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 226px; left: 70px; text-align: center; }
#spotreba_tuv {width: 50px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 80px; left: 75px; text-align: center;}
#teplota_tuv_vystup {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 369px; left: 15px; text-align: center;}
#teplota_cirkulace {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 369px; left: 75px; text-align: center;}
#voda_studena_celkem {width: 50px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 420px; left: 25px; text-align: center;}
#voda_studena_prutok {width: 50px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 420px; left: 85px; text-align: center;}
#time_c {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 345px; left: 130px; text-align: center;}
#uptime {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 10px; left: 95px; text-align: center;}
#teplota_aku_spodni {width: 50px; height: 15px; color: #fff; border: 1px solid gray; font-size: 11px; position: absolute; top: 447px; left: 324px; text-align: center;}
#teplota_aku_stred {width: 50px; height: 15px; color: #fff; background-color: rgb(67,66,66); border: 1px solid gray; font-size: 11px; position: absolute; top: 317px; left: 324px; text-align: center;}
#teplota_aku_horni {width: 50px; height: 15px; color: #fff; border: 1px solid gray; font-size: 11px; position: absolute; top: 173px; left: 324px; text-align: center;}
#tlak_UT {width: 40px; height: 15px; color: #fff; font-size: 9px; position: absolute; top: 178px; left: 374px; text-align: center;}
#teplota_solar {width: 50px; height: 15px; color: #fff; font-size: 11px; position: absolute; top: 33px; left: 224px; text-align: center;}
#solar_cerpadlo_vykon {width: 50px; height: 15px; color: #999; font-size: 11px; position: absolute; top: 83px; left: 174px; text-align: center;}
#solar_vykon {width: 50px; height: 15px; color: #fff; font-size: 15px; position: absolute; top: 56px; left: 204px; text-align: center;}
#solar_prutok {width: 50px; height: 15px; color: #999; font-size: 9px; position: absolute; top: 43px; left: 364px; text-align: center;}
#teplota_krb {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 383px; left: 603px; text-align: center;}
#teplota_spaliny {width: 50px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 303px; left: 544px; text-align: center;}
#teplota_zatepleni {width: 30px; height: 10px; border: 1px solid gray; background-color: #fff; font-size: 8px; position: absolute; top: 353px; left: 709px; text-align: center; }
#teplota_TC_vstup {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 353px; left: 709px; text-align: center; }
#teplota_TC_vystup {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 340px; left: 709px; text-align: center; }
#TC_vykon_voda {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 330px; left: 759px; text-align: center; }
#prikon_TC {width: 35px; height: 10px; color: #fff; font-size: 9px; position: absolute; top: 460px; left: 1003px; text-align: center; }
#doba_behu_TC {width: 35px; height: 10px; color: #fff; font-size: 9px; position: absolute; top: 420px; left: 1003px; text-align: center; }
#TC_obehove_cerpadlo_vykon {width: 50px; height: 15px; color: #999; font-size: 9px; position: absolute; top: 360px; left: 440px; text-align: center;}
#TC_obehove_cerpadlo_prutok {width: 50px; height: 15px; color: #999; font-size: 9px; position: absolute; top: 333px; left: 600px; text-align: center;}



#otacky_ventilatoru_TC {width: 37px; height: 10px; color: #999; font-size: 9px; position: absolute; top: 450px; left: 950px; text-align: center; }
#otacky_kompresoru_TC {width: 37px; height: 10px; color: #ccc; font-size: 8px; position: absolute; top: 430px; left: 1003px; text-align: center; }
#vykon_TC {width: 35px; height: 10px; color: #ccc; font-size: 10px; position: absolute; top: 440px; left: 1003px; text-align: center; }
#vykon_TC_W {width: 35px; height: 10px; color: #ccc; font-size: 10px; position: absolute; top: 410px; left: 1003px; text-align: center; }
#cop {width: 25px; height: 10px; color: #ccc; font-size: 10px; border: 1px solid #ccc; position: absolute; top: 410px; left: 953px; text-align: center; padding-bottom: 2px; }
#doba_behu_TC {width: 35px; height: 10px; border: 1px solid gray; color: #fff; font-size: 9px; position: absolute; top: 420px; left: 1003px; text-align: center; }
#teplota_venkovni {width: 50px; height: 15px; background-image: url('img/teplomer.png'); background-repeat: no-repeat; background-color: #fff; font-size: 11px; position: absolute; top: 373px; left: 900px; text-align: center;}

#teplota_bazen {width: 45px; height: 15px; font-size: 11px; position: absolute; top: 288px; left: 1225px; text-align: center; z-index:10;}
#teplota_kolektor {width: 45px; height: 15px; font-size: 11px; color: #fff; position: absolute; top: 335px; left: 1425px; text-align: center;}
#teplota_solar1 {width: 40px; height: 15px; background-color: #fff; font-size: 11px; position: absolute; top: 325px; left: 1477px; text-align: center;}
#solar1_vykon {width: 50px; height: 15px; color: #fff; font-size: 11px; position: absolute; top: 360px; left: 1418px; text-align: center;}
#teplota_solar2 {width: 40px; height: 15px; background-color: #fff; font-size: 11px;  position: absolute; top: 418px; left: 1477px; text-align: center;}
#teplota_tepelko {width: 40px; height: 15px; background-color: #fff; font-size: 11px; position: absolute; top: 190px; left: 1477px; text-align: center;}

#teplota_zona1 {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 207px; left: 790px; text-align: center; }
#teplota_zona2 {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 9px; position: absolute; top: 89px; left: 790px; text-align: center; }
#teplota_mix1_skutecna {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff;font-size: 9px; position: absolute; top: 205px; left: 645px; text-align: center;}
#teplota_mix1_pozadovana {width: 30px; height: 10px; border: 1px solid #ccc; color: #ccc;font-size: 9px; position: absolute; top: 194px; left: 645px; text-align: center;}
#teplota_mix2_skutecna {width: 30px; height: 10px; border: 1px solid #ccc; background-color: #fff;font-size: 9px; position: absolute; top: 87px; left: 645px; text-align: center;}
#teplota_mix2_pozadovana {width: 30px; height: 10px; border: 1px solid #ccc; color: #ccc;font-size: 9px; position: absolute; top: 76px; left: 645px; text-align: center;;}
#teplota_ref1 {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 172px; left: 637px; text-align: center;}
#teplota_ref2 {width: 40px; height: 15px; border: 1px solid gray; background-color: #fff; font-size: 11px; position: absolute; top: 65px; left: 637px; text-align: center;}

#teplota_obyvak {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 113px; left: 1320px; text-align: center;}
#teplota_pokoj_prizemi {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 113px; left: 1520px; text-align: center;}
#teplota_koupelna_prizemi {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 293px; left: 1485px; text-align: center;}
#teplota_technicka_mistnost {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 263px; left: 1539px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); o-transform: rotate(-90deg); text-align: center;}
#teplota_zadveri {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 293px; left: 1320px; text-align: center;}
#teplota_loznice {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 643px; left: 1260px; text-align: center;}
#teplota_pokoj_vychod {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 486px; left: 1260px; text-align: center;}
#teplota_pokoj_zapad {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 486px; left: 1500px; text-align: center;}
#teplota_satna {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 466px; left: 1370px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); o-transform: rotate(-90deg); text-align: center;}

#teplota_koupelna_podkrovi {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 616px; left: 1520px;  text-align: center;}
#teplota_zachod_podkrovi {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 640px; left: 1460px;  -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); o-transform: rotate(-90deg);  text-align: center;}

#teplota_puda {display: none; width: 50px; height: 25px; font-size: 15px; color: #ccc; position: absolute; top: 616px; left: 1520px;}
#teplota_garaz {width: 50px; height: 20px; font-size: 11px; color: #ccc; position: absolute; top: 806px; left: 910px;}

#teplota_n1 {width: 40px; height: 15px; background-color: #fff; font-size: 11px; position: absolute; top: 192px; left: 637px; text-align: center;}
#teplota_n2 {width: 40px; height: 15px; background-color: #fff; font-size: 11px; position: absolute; top: 85px; left: 637px; text-align: center;}
#uroven_aku {width: 123px; height: 275px; background-image: url('img/uroven.jpg'); position: absolute; top:175px; left: 194px; z-index: -1; background-position: left -500px}
#uroven_tuv {width: 71px; height: 128px; background-image: url('img/uroven_tuv.jpg'); position: absolute; top:53px; left: 60px; z-index: -1; background-position: left -270px}
#procenta_aku {width: 70px; height: 20px; background-color: #000; border: 1px solid gray; position: absolute; top:270px; left: 315px; z-index: 1; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; font-weight: bold; text-align: center; color: #fff; opacity: 0.5;}
#tepelne_ztraty {width: 90px; height: 20px; background-color: #000; border: 1px solid gray; position: absolute; top:315px; left: 212px; z-index: 1; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; font-weight: bold; text-align: center; color: #fff; opacity: 0.5;}
#krb {width: 77px; height: 59px; background-color: #000; position: absolute; top:415px; left: 626px;}
#pocasi {position: absolute; left: 980px; top: 80px;}
#bazen {position: absolute; left: 1180px; top: 180px; width: 341px; height: 267px; background-image: url('img/bazen.png'); background-repeat: no-repeat;}
#topeni_akt {position: absolute; left: 920px; background-color: rgb(255,153,0);}
#spotreba div{font-size: 9px;}
#faze1_akt {position: absolute; left: 950px; background-color: rgb(0,0,0); color: #fff;}
#faze2_akt {position: absolute; left: 985px; background-color: rgb(102,51,51); color: #fff;}
#faze3_akt {position: absolute; left: 1020px; background-color: rgb(150,150,150);}
#faze_akt {position: absolute; left: 1055px; background-color: rgb(153,0,0); color: #fff;}
#faze1_celk {position: absolute; left: 920px;}
#faze2_celk {position: absolute; left: 970px;}
#faze3_celk {position: absolute; left: 1020px;}
#faze_celk {position: absolute; left: 1070px;}
#topeni_celk {position: absolute; left: 920px;}
#spotreba_topeni{position: absolute; left: 870px; top: 355px; font-size: 8px; color: red;}
#spotreba_faze1 {position: absolute; left: 930px; top: 355px; font-size: 8px; color: red;}
#spotreba_faze2 {position: absolute; left: 980px; top: 355px; font-size: 8px; color: red;}
#spotreba_faze3 {position: absolute; left: 1030px; top: 355px;font-size: 8px; color: red;}
#spotreba_faze_celk {position: absolute; left: 1080px;top: 355px; font-size: 8px; color: red;}
#cena_celk {position: absolute; z-index:1; width: 250px; left: 870px;top: 105px; font-size: 30px; color: green;opacity: 0.5; text-align: center;}
#nt {display: none;}

#spotreba_topeni_nt{position: absolute; left: 870px; top: 475px; font-size: 8px; color: green;}
#spotreba_faze1_nt {position: absolute; left: 930px; top: 475px; font-size: 8px; color: green;}
#spotreba_faze2_nt {position: absolute; left: 980px; top: 475px; font-size: 8px; color: green;}
#spotreba_faze3_nt {position: absolute; left: 1030px; top: 475px;font-size: 8px; color: green;}
#spotreba_faze_celk_nt {position: absolute; left: 1080px;top: 475px; font-size: 8px; color: green;}
#cena_faze_celk_nt {position: absolute; left: 1120px;top: 475px; font-size: 8px; color: green;}
#cena_celk_mesic {position: absolute; left: 870px;top: 28px; font-size: 8px; width: 250px; height: 11px; border: 1px solid #000; background-color: #000; color: #fff; text-align: center;}
#predpoklad {position: absolute; left: 870px;top: 39px; font-size: 9px; width: 250px; height: 11px; border: 1px solid #000; background-color: #000; color: #fff; text-align: center;}
#smer_mix1 {position: absolute; left: 486px; top: 144px; width: 3px; height: 17px; z-index: 2;}
#smer_mix2 {position: absolute; left: 486px; top: 37px; width: 3px; height: 17px; z-index: 2;}
#prizemi {position: absolute; width: 399px; height: 327px; background-image: url('img/prizemi.png'); top: 510px; left: 20px;}
#podkrovi {position: absolute; width: 399px; height: 327px; background-image: url('img/podkrovi.png'); top: 510px; left: 460px;}
#garaz {position: absolute; width: 164px; height: 327px; background-image: url('img/garaz.png'); top: 510px; left: 900px;}
#rekucofa {position: absolute; width: 100px; height: 66px; background-image: url('img/rekucofa.png'); top: 10px; left: 10px;}
#teplota_reku1 {position: absolute; top: 60px; left: 20px; font-size: 9px;} 
#teplota_reku3 {position: absolute; top: 60px; left: 80px; font-size: 9px;} 
#teplota_reku2 {position: absolute; top: 15px; left: 80px; font-size: 9px;}  
#teplota_reku4 {position: absolute; top: 15px; left: 20px; font-size: 9px;} 
#chart_div {position: absolute; width: 550px; height: 400px; top: 450px; left: 1100px; font-size: 7px;} 
#ucinnost_reku {position: absolute; top: 55px; left: 52px; font-size: 9px;} 
#prizemi_zdi {position: absolute; width: 399px; height: 327px; background-image: url('img/prizemi_zdi.png'); top: 30px; left: 1200px;}
#nastaveni {display: none; position: absolute; width: 250px; height: 467px; border: 1px solid #000; background-color: rgb(153,155,157); top: 500px; left: 870px;}
#nastaveni_nadpis {background-color: #000; font-size: 18px; padding: 10px; text-align: center; color: transparent; text-shadow: 0px 0px 1px #FFF;}
#nastaveni .polozka {border-bottom: 1px solid #333;}
.nastaveni_teplota{float: left; padding: 5px; width: 120px;}
#nastaveni a{float: left; margin: 0 5px; padding: 5px 5px 5px 5px; color: #000; text-decoration: none;  text-align: center;}
#nastaveni a:hover{text-decoration: none; background-color: red; opacity: 0;
                  -webkit-transiton: opacity 1.5s;
                  -moz-transition: opacity 1.5s;
                  -ms-transition: opacity 1.5s;
                  -o-transition: opacity 1.5s;
                  -transition: opacity 1.5s;}
.nastaveni_hodnota {float: left; width: 50px; padding: 5px; text-align: center;}                  
/*"Zadveri","Techn.mistnost","Koupelna prizemi","Pokoj prizemi","Kuchyne","Obyvak A","Obyvak B","Obyvak C","Zahrada","Chodba suteren","","","","","","","Chodba podkrovi","Loznice","Pokoj vychod","Satna","Pokoj zapad","Koupelna","Zachod","Digestor"*/
#sv0{position: absolute; width: 120px; height: 120px; top: 730px; left: 98px;}  /*zadveri*/
#sv1{position: absolute; width: 120px; height: 120px; top: 700px; left: 320px;}  /*technicka*/     
#sv2{position: absolute; width: 120px; height: 120px; top: 725px; left: 260px;} /*koupelna*/
#sv3{position: absolute; width: 120px; height: 120px; top: 550px; left: 295px;}  /*pokoj*/
#sv4{position: absolute; width: 87px; height: 138px; top: 685px; left: 34px; opacity: 0.8;}/*kuchyne*/
#sv5{position: absolute; width: 120px; height: 120px; top: 550px; left: 175px;}  /*obyvak1*/
#sv6{position: absolute; width: 120px; height: 120px; top: 550px; left: 100px;}  /*obyvak2*/
#sv7{position: absolute; width: 120px; height: 120px; top: 550px; left: 25px;}  /*obyvak3*/
#sv8{position: absolute; width: 240px; height: 50px; top: 697px; left: 118px; background-position: left center;}  /*chodba*/
#sv9{display:none}           
#sv10{position: absolute; width: 120px; height: 120px; top: 700px; left: 15px;} /*kuchyne2 */


#sv11{position: absolute; width: 120px; height: 120px; top: 645px; left: 595px;} /*chodba podkrovi */
#sv12{position: absolute; width: 120px; height: 120px; top: 709px; left: 480px;} /*loznice */
#sv13{position: absolute; width: 120px; height: 120px; top: 550px; left: 485px;} /*pokoj v */
#sv14{position: absolute; width: 60px; height: 120px; top: 530px; left: 623px; background-position: center; } /*satna */       
#sv15{position: absolute; width: 120px; height: 120px; top: 540px; left: 705px; } /*pokoj z */
#sv16{position: absolute; width: 120px; height: 120px; top: 685px; left: 745px;} /*koupelna */
#sv17{display: none;}
#sv18{position: absolute; width: 35px; height: 78px; top: 744px; left: 725px;background-position: center; } /*zachod */
#sv4.on{ background-image: url('img/kuchyne.png');}

.on {background-image: url('img/light_on.png');}
#svetla a{float: left; display: block; width: 100%; height: 100%;}
#svetla a:hover{   opacity: 0;
                  -webkit-transiton: opacity 1.5s;
                  -moz-transition: opacity 1.5s;
                  -ms-transition: opacity 1.5s;
                  -o-transition: opacity 1.5s;
                  -transition: opacity 1.5s;
  background-image: url('img/light_on.png');
  background-position: center;}
#sv8 a:hover{background-position: left center;}
#sv10 a{width: 20px; height: 20px; border: 1px solid #fff;};
#sv14 a{position: absolute; width: 60px; height: 120px; top: 420px; left: 1363px; background-position: center; } /*satna */
#svg0 {position: absolute; width: 120px; height: 120px; top: 805px; left: 1430px; } /*garaz */

#cidlo1{position: absolute; width: 50px; height: 50px; top: 760px; left: 130px;}  /*zadveri*/                  
#cidlo2{position: absolute; width: 50px; height: 50px; top: 570px; left: 120px;}  /*obyvak2*/
#cidlo3{position: absolute; width: 50px; height: 50px; top: 695px; left: 218px;}  /*chodba*/
#cidlo4{position: absolute; width: 50px; height: 50px; top: 725px; left: 355px;}  /*technicka*/
#cidlo5{position: absolute; width: 50px; height: 50px; top: 685px; left: 635px;} /*chodba podkrovi */         
.alarm {background-image: url('img/alarm.png'); opacity: 0.7;
                  -webkit-transiton: opacity 1.5s;
                  -moz-transition: opacity 1.5s;
                  -ms-transition: opacity 1.5s;
                  -o-transition: opacity 1.5s;
                  -transition: opacity 1.5s;}
.alarm_off {background-image: url('img/alarm.png'); opacity: 0;}
#control{position: absolute; top: 850px; left: 20px; width: 1000px;}
#control2{position: absolute; top: 480px; left:1150px; width: 500px;}
.tlacitko_zapnuto{float: left; margin-right: 15px; display: block; -moz-border-radius: 7px; border-radius: 7px;  width: 90px; height: 24px; background-color: rgb(0,204,0); color: #fff; padding-top: 5px; font-size: 15px; text-align: center; vertical-align: center; text-decoration: none;}
.tlacitko_vypnuto{float: left; margin-right: 15px; display: block; -moz-border-radius: 7px; border-radius: 7px;  width: 90px; height: 24px; background-color: rgb(204,0,0); color: #fff; padding-top: 5px; font-size: 15px; text-align: center; vertical-align: center; text-decoration: none;}
.tlacitko_auto {float: left; margin-right: 15px; display: block; -moz-border-radius: 7px; border-radius: 7px;  width: 90px; height: 24px; background-color: rgb(204,0,0); color: #fff; padding-top: 5px; font-size: 15px; text-align: center; vertical-align: center; text-decoration: none;}

.tlacitka {float: left; margin-right: 25px; display: block; -moz-border-radius: 15px; border-radius: 15px;  width: 140px; height: 30px; background-color: #000; color: #fff; padding-top: 5px; font-size: 20px; text-align: center; vertical-align: center; text-decoration: none;}

.cervena {background-color: rgb(255,0,0);}
.modra {background-color: rgb(0,0,255);}
#nadpis a{
    position: absolute;
    left: 950px;
    text-decoration: none;
    top: 10px;
    font-size: 16px;
    }

.bargraph {width: 35px; border: 1px solid #000; background-color: gray; font-size: 10px; text-align: center; top: 350px;}
.bargraph_value {width: 35px; height: 300px; border: 1px solid #000; background-color: white; z-index: -5; font-size: 10px; text-align: center; top: 50px;}
#nt_casy {display: none; border: 1px solid #ccc; position: absolute; left: 850px; top: 980px; background-image: url('img/nt.jpg'); width: 795px; height: 485px;}

#tepelne_cerpadlo {position: absolute;width: 44px; height: 44px; top: 418px; left: 945px;
                  background-image: url('img/vrtule.png'); background-repeat: no-repeat; 
                  }
#cerpadlo_solar {position: absolute;width: 20px; height: 20px; top: 30px; left: 345px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }
#cerpadlo_TC {position: absolute;width: 20px; height: 20px; top: 338px; left: 455px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }
#cerpadlo_mix1 {position: absolute;width: 20px; height: 20px; top: 201px; left: 610px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }
#cerpadlo_mix2 {position: absolute;width: 20px; height: 20px; top: 83px; left: 610px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }
#cerpadlo_cirkulace {position: absolute;width: 20px; height: 20px; top: 343px; left: 108px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }                  
#cerpadlo_krb {position: absolute;width: 20px; height: 20px; top: 379px; left: 575px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; 
                  }                  
#cerpadlo_bazen_filtrace {position: absolute;width: 20px; height: 20px; top: 247px; left: 1340px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; z-index: 1; 
                  }
#cerpadlo_bazen_solar2 {position: absolute;width: 20px; height: 20px; top: 247px; left: 1370px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; z-index: 1; 
                  }
#cerpadlo_bazen_solar1 {position: absolute;width: 20px; height: 20px; top: 247px; left: 1400px;
                  background-image: url('img/cerpadlo.png'); background-repeat: no-repeat; z-index: 1;                  
                  }
#bazen_voda {position: absolute;width: 129px; height: 129px; top: 232px; left: 1181px;
                  background-image: url('img/bazen_voda.png'); background-repeat: no-repeat;  
                  
                  }

#t_bubble{position: absolute;width: 30px; height: 10px; top: 480px; left: 1528px;
                  font-size: 8px; z-index: 1;                  
                  }                  
#t_filtrace{position: absolute;width: 30px; height: 10px; top: 186px; left: 1334px;
                  font-size: 8px; z-index: 1; text-align: center;                  
                  }                  
#t_solar1{position: absolute;width: 30px; height: 10px; top: 325px; left: 1435px;
                  font-size: 8px; z-index: 1;                  
                  }                  
#t_solar2{position: absolute;width: 30px; height: 10px; top: 400px; left: 1228px;
                  font-size: 8px; z-index: 1;                  
                  }                  
#rezim_auto{position: absolute;width: 30px; height: 10px; top: 170px; left: 1198px;
                  z-index: 1;                  
                  }                  

#offline {position: absolute; background-image: url('img/offline.png'); background-repeat: no-repeat; background-position: center; background-color: #fff;
          top: 0; left: 0; text-align: center; width: 1080px; height: 900px; opacity: 0.65;
          }                  
                  
 
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}  
   

* {box-sizing: border-box;}
#webcam {margin-top: 400px;}
#myimage{
    width: 400px; height: 220px;
    border: 1px solid #666;
    border-radius: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    margin: 5px;}