body {font-family:verdana; background-color:#000000; color:#fff; padding:0px; } a {color:#EEE; text-decoration:none;outline:none;} #boxHeader{position:fixed; top:0px; left:0px; width:100%; z-index:20;} #header{ margin: 0px auto; padding-bottom:3px; width:800px; background-color:#000; box-shadow: 0px 8px 10px #000; } #titleDiv {position:relative;padding:3px 5px;} #title {font-size:14px; color:#EEE; font-weight:bold;} #subtitle {font-size:12px; color:#AAA; } #dateTxt {position:absolute; top:0px; right:0px; } #date,#time{ text-align:right; font-size:10px; color:#888;padding-right:5px; } #buttonsLastDiv {display:inline-block; vertical-align:top; margin:5px 0px 0px 0px; padding:0px; width:44px; height:80px; border:0px solid #777;} #dataDiv {display:inline-block; vertical-align:top; width:367px; margin:5px 0px 5px 0px; height:82px; padding:0px; text-align:left; border:1px solid #777;border-radius: 8px; background-color:#223; -webkit-transition: border-color 2s; transition: border-color 2s;} #dataDivTitle { width: 367px; height:14px; margin-left:-1px; margin-top:-1px; text-align:left; background-color: #777; border:1px solid #777; border-top-left-radius: 8px; border-top-right-radius: 8px; overflow:hidden; position:relative;-webkit-transition: background-color 2s, border-color 2s; transition: background-color 2s, border-color 2s;} #dataTitle {font-size:10px; font-weight:bold; padding-left:10px; color:#CCC;} #dataStatus {font-size:10px; font-weight:bold; padding-left:10px; color:#CCC;position:absolute; top:0px; right:0px; padding-right:10px;} .iconDiv {width:70px; height:60px; margin:4px 0px 3px 3px; position:relative; border-radius:5px; display:block; float:left; } .icon {width:49px; height:33px; position:absolute; top:12px; left:9px; } .dataValue {position:absolute; top:0px; left:5px; width:60px; height:10px; overflow:hidden; font-size:8px; color:#999;font-family:arial; display:none;} .dataText {position:absolute; bottom:2px; width:100%;height:12px; overflow:hidden; font-size:9px; color:#999;font-family:arial; text-align:center; display:none;} .switchLed {position:absolute; top:2px; right:2px; width:6px; height:6px; background-color:#AAA;border-radius:5px;} .temp {height:60px; top:0px; left:0px; background: url('../img/ico_temp.png') no-repeat; z-index:30} #logDiv {display:inline-block; vertical-align:top; float:right; position:relative; margin:5px 0px 5px 0px; padding:0px; width:364px; height:80px; border:2px solid #777;border-radius: 8px; background-color:#223; overflow:hidden; } #logDiv_lst {position:absolute; bottom:0px; padding:0px; overflow:hidden; width:100%; } #logDiv_lst div.row{border-top:1px dashed #333; padding:2px 0px 4px 0px; width:100%; } .logIconDiv {margin:2px 0px 0px 4px; width:13px; height:13px; float:left;} .logTextDiv {margin-left:20px; padding-top:1px; font-size:10px; color:#777;} .logIconDiv.loading{background: url('../img/log_gear.gif') no-repeat; } .logIconDiv.ok{background: url('../img/log_ok.png') no-repeat; } .logIconDiv.ko{background: url('../img/log_ko.png') no-repeat; } .logIconDiv.inf{background: url('../img/log_inf.png') no-repeat; } #section {margin: 0px auto 0px auto; padding:140px 10px 10px 10px; width:780px; min-height:400px;} .avxGraph_box { width:740px; border:1px solid #444; padding:0px; margin:0px auto 10px 40px;border-radius: 8px; position:relative; } .avxGraph_title { margin-top:-1px; border:1px solid #444; background-color: #444;padding:1px 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; overflow:hidden; font-size:10px; color:#BBB; font-weight:bold;} .avxGraph_swapUp { z-index:19; position: absolute; top:5px; right:30px; border: solid #888; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} .avxGraph_swapUp:hover { border-color:#BBB; cursor:pointer; } .avxGraph_swapDown { z-index:19; position: absolute; top:2px; right:10px; border: solid #888; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .avxGraph_swapDown:hover { border-color:#BBB; cursor:pointer;} #boxButtons{position:fixed; top:145px; left:0px; width:100%; z-index:18;} #buttonsBar{ margin: 0px auto; padding-bottom:3px; width:800px; } #buttonsGraph {position: relative; margin:3px 0px 0px 5px; padding:0px;} #buttonsGraph li { margin:0px 0px 4px 0px; padding:0px; list-style: none;} #buttonsGraph li, #buttonsGraph a { height: 32px; display: block;} #buttonsLast {position: relative; float:left; margin:3px 0px 0px 5px; padding:0px;} #buttonsLast li { margin:0px 0px 4px 0px; padding:0px; list-style: none;} #buttonsLast li, #buttonsLast a { height: 32px; display: block;} #botRequestGraph, #botRequestLast {left: 0px; width: 32px; background: url('../img/menu_graph.png') 0 -96px;} #botRequestGraph a:active, #botRequestLast a:active {background: url('../img/menu_graph.png') -32px -96px;} #botRequestGraph a.disabled, #botRequestLast a.disabled {background: url('../img/menu_graph.png') -64px -96px; pointer-events: none; cursor: default;} #botAutoRequestGraph, #botAutoRequestLast{left: 0px; width: 32px; background: url('../img/menu_graph.png') 0px -128px;} #botAutoRequestGraph a.active, #botAutoRequestLast a.active {background: url('../img/menu_graph.png') -32px -128px;z-index:20;} #botAutoRequestGraph a.disabled, #botAutoRequestLast a.disabled {background: url('../img/menu_graph.png') -64px -128px; pointer-events: none; cursor: default;z-index:20;} #graphTimerBar, #lastTimerBar{position:absolute; width:0px; height:3px; background-color: #F20; top:6px; left:5px;} #botAyer{left: 0px; width: 32px; margin-top:10px !important; background: url('../img/menu_graph.png') 0px 0px;} #botAyer a.active {background: url('../img/menu_graph.png') -32px 0px;} #botAyer a.disabled {background: url('../img/menu_graph.png') -64px 0px; pointer-events: none; cursor: default;} #botAreas{left: 0px; width: 32px; background: url('../img/menu_graph.png') 0px -32px;} #botAreas a.active {background: url('../img/menu_graph.png') -32px -32px;} #botAreas a.disabled {background: url('../img/menu_graph.png') -64px -32px; pointer-events: none; cursor: default;} #botSwitch{left: 0px; width: 32px; background: url('../img/menu_graph.png') 0px -64px;} #botSwitch a.active {background: url('../img/menu_graph.png') -32px -64px;} #botSwitch a.disabled {background: url('../img/menu_graph.png') -64px -64px; pointer-events: none; cursor: default;} #botUnitsC{left: 0px; width: 32px; height:44px !important; background: url('../img/menu_graph.png') 0px -160px;} #botUnitsC a {height:44px;} #botUnitsC a.active {background: url('../img/menu_graph.png') -32px -160px;} #botUnitsC a.disabled {background: url('../img/menu_graph.png') -64px -160px; pointer-events: none; cursor: default; } #botUnitsF{left: 0px; width: 32px; height:44px !important; background: url('../img/menu_graph.png') 0px -204px;} #botUnitsF a {height:44px;} #botUnitsF a.active {background: url('../img/menu_graph.png') -32px -204px; } #botUnitsF a.disabled {background: url('../img/menu_graph.png') -64px -204px; pointer-events: none; cursor: default;} #cloudWatcher {z-index:10;} #pie{border:1px solid #444; margin: 10px auto 0px auto; padding:2px 10px; width:780px; border-radius: 8px; background-color:#223; font-size:11px; color:#777;} #pie a {color:#777;} #pieLangs{float:right; margin-top:1px;} #pieLangs div{display:inline; vertical-align:top; font-size:10px;} #pieLangs img{margin-left:5px;} #version {display:inline;margin-left:30px;} @media (max-width: 800px) { #boxHeader, #boxButtons { position: absolute; } }