*{margin:0;padding:0}html{font:16px Helvetica,arial,freesans,clean,sans-serif}body{margin:0;padding:0;font-size:62.5%;width:320px;height:100%;}.button{outline:0;font-weight:normal;font-size:17px;text-decoration:none;color:white;line-height:30px!important;display:inline-block;cursor:pointer;width:30px;height:30px;border-radius:50%;text-align:center;position:relative;z-index:1;color:#fff;margin:5px;background:rgba(255,255,255,0.1);-webkit-transition:background .2s,color .2s;-moz-transition:background .2s,color .2s;transition:background .2s,color .2s}.button:before{speak:none;font-size:17px;line-height:30px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;display:block;-webkit-font-smoothing:antialiased}.button:after{pointer-events:none;position:absolute;width:22px;height:22px;border-radius:50%;content:'';-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;top:-3px;left:-3px;padding:7px;box-shadow:0 0 0 2px #fff;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s;opacity:0;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.button.clicked{background:#fff;color:#41ab6b}.button.clicked:after{-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);opacity:1}.button.active{background-color:white;color:#41ab6b}header{height:50px;background:#41ab6b;padding:0 10px;width:300px;display:table;}header a{margin-top:10px!important}header #ctl{display:table-cell; vertical-align: middle; overflow: hidden;}header #ctl_btn{transition:width .4s ease;width:0px;height:50px!important;} header #ctl_line{width:84px;height:50px;float:left;}header h1{color:white;line-height:50px}header img{/*float:right;margin-top:7px;margin-right:10px*/display:table-cell;margin:7px auto 0 auto;}nav{float:left;top:0;left:0;position:relative;z-index:2;width:149px;height:100%;border-right:1px solid #303c4a;list-style:none;background-color:#475566}nav li a{display:block;line-height:40px;font-size:1.5em;text-decoration:none;border-bottom:1px solid #303c4a;color:#f0f0f0;font-weight:bold;cursor:pointer}nav li a span{margin:0 10px;font-weight:normal}nav li a span:last-child{float:right;font-weight:bold}#app{background-color:#666;width:320px;overflow:hidden}#app_view{width:470px;position:relative;left:-150px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}#app_view.show_nav{left:0}#content{width:320px;float:left}.page{width:320px;height:auto;float:left;}.page h2{color:white;padding-left:20px;text-shadow:0 0 1px black;font-size:2em;line-height:2.3em;background-color:#333;border-bottom:1px solid #222;margin-bottom:15px}.page h2 span{margin-right:10px;font-size:1.2em;position:relative;top:.1em}.page table{margin:10px 20px;border-collapse:collapse;border:0;width:280px}.page table th{text-align:justify;width:120px;line-height:3em;color:#f0f0f0;text-shadow:1px 1px 1px #333}.page table td{width:160px}.page table td input{width:100%;line-height:2.5em;height:2.5em;border:1px solid #555;padding:0 5px;font-size:.8em;background:#fcfcfc;border-radius:3px}.page#login{position:relative;left:0;padding-bottom:20px;}.page#login p{color:white;padding-left:20px;font-size:1.6em;text-shadow:1px 1px 1px #333;font-weight:bold;line-height:1.8em}.page#login p span{margin-right:5px;font-size:1.6em}.page#login div#login_submit,.page#login div#login_try{margin:0 auto;width:80px;padding:7px 15px;font-size:1.4em;font-weight:bold;color:white;text-shadow:1px 1px 0 #666;background-color:#df7718;border-radius:3px;border:1px solid #555;border-bottom-color:#353535;box-shadow:0 1px 3px rgba(0,0,0,0.05);vertical-align:middle;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}.page#login div#login_submit span,.page#login div#login_try span{margin-right:5px;font-size:1em}.page#login div#login_submit#login_try,.page#login div#login_try#login_try{background-color:#c5c96d}.page#login div#login_submit#login_try span,.page#login div#login_try#login_try span{position:relative;top:1px}.page#nodes h2{margin-bottom:0}.page div.node{margin:0;border-bottom:1px solid #666;background-color:#BBB;height:50px;overflow:hidden}.page div.node div.state{background-color:white;border-right:1px solid #999;width:50px;height:60px;float:left;text-align:center}.page div.node div.state div{width:10px;height:10px;border-radius:50%;margin:10px auto;border:1px solid #CCC}.page div.node div.state div.active{background-color:green}.page div.node div.state div.inactive{background-color:red}.page div.node div.state span{font-weight:bold}.page div.node div.info{float:left;margin-left:20px}.page div.node div.info span{float:left;font-size:2.2em;line-height:50px}.page div.node div.info h3{margin-left:40px;margin-top:12px;font-size:1.4em}.page div.node div.info p{margin-left:40px;line-height:5px;margin-top:5px}.page div.node div.controls{float:right;margin-right:15px}.page div.node div.controls div.button{margin-top:10px;background-color:#999}.page div.node div.controls div.button.clicked{background-color:white;color:#333}.page div.sensor{margin:0;border-bottom:1px solid #999;background-color:#DDD;height:50px;overflow:hidden}.page div.sensor div.state{background-color:white;border-right:1px solid #999;width:50px;height:60px;float:left;text-align:center}.page div.sensor div.state div{width:10px;height:10px;border-radius:50%;margin:10px auto;border:1px solid #CCC}.page div.sensor div.state div.active{background-color:green}.page div.sensor div.state div.inactive{background-color:red}.page div.sensor div.state span{font-weight:bold}.page div.sensor div.info{float:left;margin-left:15px}.page div.sensor div.info h3{margin-top:12px;font-size:1.4em}.page div.sensor div.info p{line-height:5px;margin-top:5px}.page div.sensor div.controls{float:right;margin-right:15px}.page div.sensor div.controls div.button{margin-top:10px;background-color:#999}.page div.sensor div.controls div.button.clicked{background-color:white;color:#333}.page#sensors h2{margin-bottom:0}.page#sensor{background-color:#dcdcdc}.page#sensor h2{margin-bottom:0}.page#sensor div.graph{background-color:#dcdcdc;border-bottom:#AAA;padding:0 10px 10px 10px}.page#sensor div.graph div.controls{height:30px}.page#sensor div.graph div.controls ul{list-style:none;margin:0;margin-top:10px}.page#sensor div.graph div.controls ul li{float:left;line-height:20px;margin:5px;padding:0 10px;border:1px solid #999;background-color:#AAA;border-radius:3px}.page#sensor div.graph div.controls ul li a{color:white;font-weight:bold;text-decoration:none}.page#sensor div.graph div.controls ul li.active{background-color:#BBB;border-color:#BBB}.page#sensor div.graph div.controls ul li.active a{color:#444}.page#sensor div.graph div#graph_placeholder{width:300px;height:200px;margin-top:10px}.page#actuators{background-color:#CCC}.page#actuators .onoffswitch{position:relative;width:90px;margin-left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page#actuators td{padding-bottom:30px}.page#actuators .onoffswitch-checkbox{display:none}.page#actuators .onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:2px solid #666;border-radius:5px}.page#actuators .onoffswitch-inner{width:200%;margin-left:-100%;-moz-transition:margin .3s ease-in 0s;-webkit-transition:margin .3s ease-in 0s;-o-transition:margin .3s ease-in 0s;transition:margin .3s ease-in 0s}.page#actuators .onoffswitch-inner:before,.page#actuators .onoffswitch-inner:after{float:left;width:50%;height:30px;padding:0;line-height:30px;font-size:16px;color:white;font-family:Trebuchet,Arial,sans-serif;font-weight:bold;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.page#actuators .onoffswitch-inner:before{content:"ON";padding-left:10px;background-color:#52d471;color:#fff}.page#actuators .onoffswitch-inner:after{content:"OFF";padding-right:10px;background-color:#ca121c;color:#DDD;text-align:right}.page#actuators .onoffswitch-switch{width:35px;margin:0;background:#fff;border:2px solid #666;border-radius:5px;position:absolute;top:0;bottom:0;right:51px;-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s ease-in 0s;-o-transition:all .3s ease-in 0s;transition:all .3s ease-in 0s;background-image:-moz-linear-gradient(center top,rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 100%);background-image:-webkit-linear-gradient(center top,rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 100%);background-image:-o-linear-gradient(center top,rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(center top,rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 100%)}.page#actuators .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner{margin-left:0}.page#actuators .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{right:0}section{width:1920px;height:auto;overflow:hidden;position:relative;left:0;padding:0 0 20px 0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}footer{background-color:#ca121c;position:fixed;bottom:0;left:0;width:320px;z-index:2;color:white;height:20px;text-align:center;border-top:1px solid #555;}footer div.circle{width:60px;height:60px;border-radius:50%;background-color:#ca121c;overflow:hidden;margin-left:calc(41%);position:absolute;margin-top:-15px;border:1px solid #555}footer div.circle div.arrow{width:10px;height:10px;border-left:2px solid white;border-top:2px solid white;-webkit-transform:rotate(45deg);margin-left:24px;margin-top:8px;cursor:pointer}footer a{position:relative;z-index:2;line-height:20px;background-color:#ca121c;font-weight:bold;text-decoration:none;color:#FFF;}