html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  width: 100px;
  height: 100vh;
  font-family: Arial, sans-serif; font-size: 10px; 
}
span {text-decoration: none; color: #000;}
#user {position: absolute; top: 30px; left: 85px; font-size: 8px;}
#user a{  
      text-decoration: none;    
      font-size: 15px; padding: 5px; background-color: #fff; border: 1px solid #ccc; -moz-border-radius: 20px;
      border-radius: 20px;  
      -moz-box-shadow: 0 0 2px #000;
      -webkit-box-shadow: 0 0 2px #000;
      box-shadow: 0 0 2px #000;
      }
#login_form {position: absolute; z-index: 10; width: 1101px; 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: 20px; 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: 10px; padding: 5px; border:1px solid #fff;}
#login {position: absolute; top: 400px; left: 400px; font-size: 12px; 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;}
#aktualizace {position: absolute; top: 32px; left: 430px; color: #666;}

#byt {position: absolute; width: 1028px; height: 785px; background-image: url('img/podklad.png'); top: 30px; left: 30px;}
#nastaveni {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"*/

#svetla a{float: left; width: 100%; height: 100%;}
#svetla .off {opacity: 0.1;}
  
#SV01{position: absolute; width: 33px; height: 127px; left: 90px; top: 630px; background-image: url('img/SV01.png');}  /*36V, 2x bodovka nad kuch. linkou*/
#SV02{position: absolute; width: 44px; height: 131px; left: 55px;top: 649px; background-image: url('img/SV02.png');} /*24V, led pásek nad kuch. linkou*/
#SV03{position: absolute; width: 124px; height: 40px; left: 94px; top: 210px; background-image: url('img/SV03.png');}  /*24V, led pásek v šatní skříni*/
#SV04{position: absolute; width: 34px; height: 76px; left: 191px; top: 592px; background-image: url('img/SV04.png');} /*2x bodovka nad kuch. ostrůvkem*/
#SV04A,#SV05{position: absolute; width: 106px; height: 251px; left: 155px; top: 558px; background-image: url('img/SV04A.png');} /*24V, led pásek v led podhledu nad kuch. ostrůvkem - fotka pojmenovaná SV04.01+SV05*/
#SV06{position: absolute; width: 16px; height: 49px; left: 200px; top: 700px; background-image: url('img/SV06.png');}  /*230V, světlo jídelní stůl*/
#SV07{position: absolute; width: 131px; height: 75px; left: 425px; top: 684px; background-image: url('img/SV07.png');}  /*230V, světla balkón*/
#SV08{position: absolute; width: 129px; height: 165px; left: 413px; top: 407px; background-image: url('img/SV08.png');}  /*24V, led pásek na podhledu v obýváku*/
#SV08A{position: absolute; width: 237px; height: 278px; left: 359px; top: 350px; background-image: url('img/SV08A.png');}  /*24V, led pásek kolem podhledu v obýváku - fotka pojmenovaná SV08.01*/
#SV09{display: none;}  /*ventilator*/
#SV10{position: absolute; width: 158px; height: 36px; left: 395px; top: 308px; background-image: url('img/SV10.png');} /*24V, led pásek, světlo pod stříňkou a za televizí*/
#SV11{position: absolute; width: 142px; height: 190px;  left: 430px; top: 55px; background-image: url('img/SV11.png');} /*24V, led pásek, světlo kolem dřev. podhledu a na zdi - v ložnici*/
#SV12{position: absolute; width: 127px; height: 8px;  left: 410px; top: 294px; background-image: url('img/SV12.png');} /*24V, led pásek, podsvícení obrazu*/
#SV13{position: absolute; width: 143px; height: 378px; left: 145px; top: 80px; background-image: url('img/SV13.png');}/*36V, 4x bodovka, světla na chodbě*/
#SV14{display: none;} /*světla zatim neosazena*/
#SV15{position: absolute; width: 34px; height: 33px; left: 100px; top: 165px; background-image: url('img/SV15.png');} /*36V, 1x bodovka, světlo šatny*/
#SV16{position: absolute; width: 34px; height: 33px; left: 120px; top: 273px; background-image: url('img/SV15.png');} /*36V, 1x bodovka, světlo WC*/
#SV17{position: absolute; width: 33px; height: 165px; left: 121px; top: 343px; background-image: url('img/SV17.png');} /* 36V, 3x bodovka, světlo v koupelně*/
#SV18{position: absolute; width: 5px; height: 77px; left: 53px; top: 395px; background-image: url('img/SV18.png');} /*24V, led pásek, světlo kolem zrcadla- nevím zdali jsem nepřehodil s SV19*/
#SV19{position: absolute; width: 14px; height: 24px; left: 55px; top: 417px; background-image: url('img/SV19.png');} /* 230V, světlo nad zrcadlem - nevím zdali jsem nepřehodil s SV18*/
#SV20{position: absolute; width: 38px; height: 43px; left: 53px; top: 475px; background-image: url('img/SV20.png');} /*24V, led pásek, světla pod skl. poličkami a na zdi mezi obklady - fotky SV20 a SV 20*/
#VENTIL{display: none;}

#SV01:hover{opacity: 0.5}  
#SV02:hover{opacity: 0.5} 
#SV03:hover{opacity: 0.5} 
#SV04:hover{opacity: 0.5}  
#SV04A:hover{opacity: 0.5} 
#SV05:hover{opacity: 0.5} 
#SV06:hover{opacity: 0.5}  
#SV07:hover{opacity: 0.5} 
#SV08:hover{opacity: 0.5} 
#SV08A:hover{opacity: 0.5} 
#SV10:hover{opacity: 0.5} 
#SV11:hover{opacity: 0.5}  
#SV12:hover{opacity: 0.5} 
#SV13:hover{opacity: 0.5} 
#SV14:hover{opacity: 0.5} 
#SV15:hover{opacity: 0.5}  
#SV16:hover{opacity: 0.5} 
#SV17:hover{opacity: 0.5} 
#SV18:hover{opacity: 0.5} 
#SV19:hover{opacity: 0.5}  
#SV20:hover{opacity: 0.5} 

#teplota1{font-family: sans-serif; position: absolute; left: 350px; top: 60px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*loznice*/
#teplota2{font-family: sans-serif; position: absolute; left: 260px; top: 60px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*chodba*/
#teplota3{font-family: sans-serif; position: absolute; left: 60px; top: 190px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*satna*/
#teplota4{display: none}  /*zachod*/
#teplota5{font-family: sans-serif; position: absolute; left: 170px; top: 335px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*koupelna*/
#teplota6{font-family: sans-serif; position: absolute; left: 320px; top: 640px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*kuchyne*/
#teplota7{font-family: sans-serif; position: absolute; left: 110px; top: 141px; text-decoration: none; font-size: 10px; font-weight: bold; color: #fff; opacity: 0.5;}  /*rozvadec*/

#svetla_garaz a{float: left; width: 100%; height: 100%;}
#svetla_garaz .off {opacity: 0.1;}
 
#SVG01{position: absolute; width: 58px; height: 462px; left: 780px; top: 105px; background-image: url('img/SVG01.png');}  /*garaz*/
#SVG02{position: absolute; width: 215px; height: 346px; left: 800px; top: 175px; background-image: url('img/SVG02.png');}  /*garaz strop*/
#SVG03{position: absolute; width: 87px; height: 72px; left: 945px; top: 585px; background-image: url('img/SVG03.png');}  /*garaz ponk*/
#SVG01:hover{opacity: 0.5}  
#SVG02:hover{opacity: 0.5} 
#SVG03:hover{opacity: 0.5} 
                  
#tlacitko_vrata a{position: absolute; top: 32px; left: 760px; font-size: 12px; padding: 5px; 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;
      text-decoration: none;}
#teplota_garaz{font-family: sans-serif; position: absolute; left: 870px; top: 565px; text-decoration: none; font-size: 12px; font-weight: bold; color: #fff; opacity: 0.5;}  /*garaz*/
#vrata_otevreno{position: absolute; width: 186px; height: 160px; top: 61px; left: 816px; border: 1px solid #000; background-color: rgb(204,153,51);
	-webkit-animation: slide-left 0.5s linear 1s both;
	        animation: slide-left 0.5s linear 1s both;
}  /*vrata*/

#vrata_otevreno a{float: left; display: block; width: 100%; height: 100%;}


#cidlo1{position: absolute; width: 50px; height: 50px; top: 280px; left: 1310px;}  /*zadveri*/
#cidlo2{position: absolute; width: 50px; height: 50px; top: 90px; left: 1300px;}  /*obyvak2*/
#cidlo3{position: absolute; width: 50px; height: 50px; top: 215px; left: 1398px;}  /*chodba*/
#cidlo4{position: absolute; width: 50px; height: 50px; top: 245px; left: 1535px;}  /*technicka*/
#cidlo5{position: absolute; width: 50px; height: 50px; top: 575px; left: 1375px;} /*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;}
.tlacitka {display: block; width: 90%; height: 50px; border: 1px solid #ccc; padding-top: 15px; font-size: 26px; text-align: center; vertical-align: center;}

.cervena {background-color: rgb(255,0,0);}
.modra {background-color: rgb(0,0,255);}
.bargraph {width: 50px; border: 1px solid #000; background-color: gray; font-size: 10px; text-align: center; top: 450px;}
.bargraph_value {width: 50px; height: 400px; border: 1px solid #000; background-color: white; z-index: -5; font-size: 10px; text-align: center; top: 50px;}

.rotate {  transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
          padding: 3px 0;}
#mezera {float: left; height: 10px; width: 70px;}          
#satna {position: absolute; top: 15px; left: -34px; width: 49px; text-align: center; background-color: #ccc;}
#zachod {position: absolute; top: 62px; left: -22px; width: 25px; text-align: center; background-color: #ccc;}
#koupelna {position: absolute; top: 135px; left: -59px; width: 99px; text-align: center; background-color: #ccc;}
#kuchyne {position: absolute; top: 270px; left: -84px; width: 149px; text-align: center; background-color: #ccc;}
#obyvaci_pokoj {position: absolute; top: 405px; left: -59px; width: 99px; text-align: center; background-color: #ccc;}
#loznice {position: absolute; float: right; top: 491px; left: -35px; width: 50px; text-align: center; background-color: #ccc;}
#ventil {position: absolute; float: right; top: 590px; left: -35px; width: 50px; text-align: center; background-color: #ccc;}

#ovladani_svetla {position: absolute; top: 30px; left: 660px; width: 70px;}
#ovladani_svetla a{float: left; display: block; border-bottom: 1px solid #ccc; width: 70px; text-align: center; text-decoration: none; padding: 6px 0;}
#ovladani_svetla .on{background-color: rgb(255,255,0);}
#ovladani_svetla .off{background-color: rgb(0,0,0); color: #fff;}

#ovladani {position: absolute; top: 590px; left: 660px; width: 70px;}
#ovladani a{float: left; display: block; border-bottom: 1px solid #ccc; width: 70px; text-align: center; text-decoration: none; padding: 6px 0;}
#ovladani .off{background-color: rgb(255,255,0);}
#ovladani .on{background-color: rgb(0,0,0); color: #fff;}

#ovladani_rolety {position: absolute; top: 715px; left: 654px; width: 400px; height: 120px;}
#ovladani_rolety span {float: left; text-align: center; background-color: #000; width: 70px; color: #fff; padding: 3px 0; border-right: 1px solid #ccc; margin-right: 25px;}
#ovladani_rolety a{float: left; width: 70px; height: 40px; text-align: center;}

#ovladani_svetla_garaz {position: absolute; top: 30px; left: 1080px; width: 70px;}
#ovladani_svetla_garaz a{float: left; display: block; border-bottom: 1px solid #ccc; width: 70px; text-align: center; text-decoration: none; padding: 6px 0;}
#ovladani_svetla_garaz .on{background-color: rgb(255,255,0);}
#ovladani_svetla_garaz .off{background-color: rgb(0,0,0); color: #fff;}

#budik {position: absolute; width: 110px; height: 70px; top: 200px; left: 450px; background-image: url('img/budik.png'); background-repeat: no-repeat; padding-top: 65px; }
#budik_popis {float: left; font-size: 12px;} 
#budik_value{float: left; width: 45px; background: none; padding: 0; border: 0; text-align: right;}
#budik2_value{float: left; width: 45px; background: none; padding: 0; border: 0; text-align: right;}

#webcam {position: absolute; left: 781px; top: 61px;}
#webcam img{width: 250px; opacity: 0.05;}
#webcam img:hover{width: 250px; opacity: 1; -webkit-transition: 0.25s all ease-in-out;
	-moz-transition: 0.25s all ease-in-out;
	-o-transition: 0.25s all ease-in-out;
	transition: 0.25s all ease-in-out;}