﻿@charset "utf-8";

* {
margin: 0;
padding: 0;
font-size: 1em;
font-family: 'Trebuchet MS', Verdana, 'Lucida Grande', Arial, Sans-Serif;
}

body {
background-color: #340D71;
}

noscript {
font-size: 0.8em;
color: #008F3B;
}
noscript div {
margin: 10px;
padding: 5px 10px;
background-color: #E8F7EE;
}
noscript a {color: #008F3B;}
noscript a:hover {
text-decoration: none;
color: BLACK;
}

#boxMsg {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: WHITE;
z-index: 100;
text-align: center;
font-size: 0.9em;
}
#boxMsgTxt {
margin: 0 auto;
border: 3px solid #2070CF;
background-color: #D8E6F7;
}
.msg {
width: 500px;
padding: 10px 20px;
position: relative;
}
.msgHta {
width: 215px;
padding: 10px;
position: absolute;
top: 2px;
left: 2px;
}
#boxMsgProgress {
width: 0;
position: absolute;
bottom: 20px;
left: 0;
height: 40px;
background-color: #CADBEF;
}

#logininfo {
color: WHITE;
font-size: 0.8em;
position: absolute;
left: 15px;
top: 15px;
z-index: 0;
}

#langinfo {
color: WHITE;
font-size: 0.75em;
position: absolute;
left: 15px;
top: 100px;
z-index: 0;
}

#splash {
color: WHITE;
letter-spacing: 0.1em;
background: url('startup.gif') no-repeat 0 0;
width: 220px;
padding: 30px 0 0 0;
text-align: center;
font-size: 0.8em;
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -110px;
overflow: auto;
}

#alert {
position: absolute;
width: 500px;
height: 140px;
top: 50%;
left: 50%;
margin: -75px 0 0 -250px;
overflow: auto;
opacity: 0;
filter:alpha(opacity=0);
z-index: 25;
}

#alert div {
background-color: #FFE7E7;
border: 3px solid #D71A1A;
color: #AF363B;
line-height: 1.5em;
padding: 20px;
text-align: center;
}

#boxDbg {
font-size: 0.7em;
position: absolute;
top: 95px;
left: 3px;
width: 300px;
border: 2px solid;
padding: 3px;
background-color: WHITE;
}
#boxDbg p {
border-bottom: 1px solid GRAY;
}
#boxDbg .closedbg {
display: block;
}

/* Header */
#header {
width: 100%;
overflow: hidden;
border-bottom: 5px solid #FFEF80;
position: relative;
z-index: 1;
background-color: #E3CEEB;
}
#h1 {
position: absolute;
bottom: 0;
left: 115px;
font-size: 2em;
color: #340D71;
letter-spacing: 0.05em;
font-weight: normal;
display: inline;
}
#logo {
position: absolute;
bottom: 5px;
left: 15px;
}
#buttons {
position: absolute;
right: 0;
bottom: 0;
}
#header a {
width: 100px;
display: block;
text-decoration: none;
color: #340D71;
font-size: 0.8em;
padding: 10px 0 10px 40px;
margin: 5px 5px 0 0;
float: right;
}
#header a:hover {
background-color: #FFEF80;
float: right;
}
#btnsettings {background: #E3CEEB url(settings.png) no-repeat scroll 9px 50%;}
#btnmobile {background: #E3CEEB url(mobile.png) no-repeat scroll 9px 50%;}
#btnminimal {background: #E3CEEB url(mini.png) no-repeat scroll 9px 50%;}
#btnwindow {background: #E3CEEB url(window.png) no-repeat scroll 9px 50%;}

#miniheader {
position: relative;
width: 450px;
}
#mh1 {
width: 100%;
text-align: center;
color: #00923F;
letter-spacing: 0.05em;
font-size: 1.3em;
}
#toclassic {
position: absolute;
right: 0;
top: 0;
z-index: 15;
display: block;
width: 23px;
height: 23px;
background-color: gray;
background: url(right.png) no-repeat scroll;
}

/* Displays - společné */
#displays {position: absolute;}
div.minisize {padding: 12px;}

.tick .over .bckgerr, .tick .under .bckgerr {visibility: visible !important}
.tick .over .value {color: #DA241C !important}
.tick .under .value {color: #0E8AEF !important}

.snsbox #battery {
position: absolute;
width: 40px;
height: 18px;
overflow: hidden;
background: url(battery.png) no-repeat scroll 0 -108px;
z-index: 5;
}

/* Displays - numeric */
.numeric #battery {
left: 130px;
bottom: 10px;
}
.numeric .snsbox {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.numeric .bckgstd, .numeric .bckgerr {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.numeric .name, .numeric .value, .numeric .watchmax, .numeric .watchmin {
position: absolute;
z-index: 2;
}
.numeric .name {
top: 25px;
left: 0;
width: 300px;
text-align: center;
font-size: 1.2em;
letter-spacing: 0.05em;
color: #2E2E2F;
}
.numeric .watchmax {
top: 140px;
right: 35px;
font-size: 1.3em;
color: #DA241C;
cursor: help;
}
.numeric .watchmin {
top: 140px;
left: 35px;
font-size: 1.3em;
color: #0E8AEF;
cursor: help;
}
.numeric .value {
top: 70px;
left: 0;
font-size: 2.5em;
width: 300px;
text-align: center;
font-weight: bold;
color: #2E2E2F;
}
.numeric .snsbox .bckgerr {visibility: hidden}

/* Displays - mercurical */
.mercurical #battery {
left: 22px;
top: 50px;
}
.mercurical .snsbox {
position: relative;
width: 174px;
height: 460px;
overflow: hidden;
}
.mercurical .bckgstd {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.mercurical .bckgerr {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.mercurical .bckgmer {
position: absolute;
height: 150px;
width: 174px;
bottom: 0;
left: 0;
z-index: 3;
overflow: hidden;
}
.mercurical .bckgmer .mer {
position: absolute;
bottom: 0;
left: 0;
z-index: 4;
}
.mercurical .bckgmer .top {
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: none;
}
.mercurical .name, .mercurical .value, .mercurical .watchmax, .mercurical .watchmin {
position: absolute;
z-index: 4;
}
.mercurical .name {
top: 15px;
left: 0;
width: 174px;
text-align: center;
font-size: 1.0em;
letter-spacing: 0.05em;
color: #2E2E2F;
}
.mercurical .snsbox .bckgerr {visibility: hidden}
.mercurical .watchmax, .mercurical .watchmin {
left: 98px;
font-size: 0.8em;
cursor: help;
width: 60px;
text-align: right;
}
.mercurical .watchmax {color: #DA241C;}
.mercurical .watchmin {color: #0E8AEF;}
#scale hr, .mercurical #whrmin, .mercurical #whrmax {
border-width: 0;
color: WHITE;
height: 0;
margin-bottom: 0;
margin-top: 0;
padding: 0;
position: absolute;
z-index: 6;
}
.mercurical #whrmin {
border-bottom: 1px solid #0E8AEF;
left: 98px;
width: 62px;
}
.mercurical #whrmax {
border-bottom: 1px solid #DA241C;
left: 98px;
width: 62px;
}
.mercurical .value {
bottom: 13px;
left: 0;
font-size: 1.5em;
width: 174px;
text-align: center;
font-weight: bold;
color: #2E2E2F;
}
.mercurical #scale {
position: absolute;
left: 0;
bottom: 0;
z-index: 6;
}
#scale .st {
color: #25015D;
font-size: 11px;
position: absolute;
text-align: right;
width: 45px;
}
#scale hr.m {
border-bottom: 1px solid #9A80C5;
left: 65px;
width: 10px;
}
#scale hr.v {
border-bottom: 1px solid #9A80C5;
left: 55px;
width: 20px;
}

/* Displays - hta */
.hta .snsbox {
position: relative;
width: 250px;
height: 100px;
overflow: hidden;
}
.hta .value, .hta .watchmax, .hta .watchmin {
position: absolute;
z-index: 2;
}
.hta .watchmax {
top: 16px;
right: 12px;
font-size: 0.9em;
color: #DA241C;
cursor: help;
font-weight: bold;
}
.hta .watchmin {
top: 60px;
right: 12px;
font-size: 0.9em;
color: #0E8AEF;
cursor: help;
font-weight: bold;
}
.hta .value {
top: 28px;
left: 0;
font-size: 1.7em;
width: 140px;
text-align: right;
font-weight: bold;
color: WHITE;
}
.hta.tick .over {background-color: #710D40}

/* Tipy */
.popisek, .vetsipopisek, .extremtip {z-index: 50;}
.popisek .tip .tip-title, .vetsipopisek .tip .tip-title {
color: WHITE;
font-size: 0.7em;
background-color: #5076C7;
padding: 4px 8px;
border: 1px solid WHITE;
z-index: 40;
}
.popisek .tip .tip-title {width: 180px;}
.vetsipopisek .tip .tip-title {width: 450px;}
.popisek .tip-top, .popisek .tip-bottom, .popisek .tip .tip-text, .vetsipopisek .tip-top, .vetsipopisek .tip-bottom, .vetsipopisek .tip .tip-text, .extremtip .tip .tip-text {
display: none;
}
.tinfo {
font-size: 13px;
font-weight: bold;
padding: 2px;
color: #7588BB;
position: relative;
bottom: 5px;
}
.extremtip {
font-size: 0.8em;
background-color: #B5DDC7;
padding: 2px 5px;
border: 1px solid WHITE;
color: #00923F;
}

/* Status */
#status {
font-size: 0.7em;
text-align: right;
padding: 3px 5px 3px 20px;
color: #FFEF80;
position: absolute;
bottom: 0;
right: 0;
}
.updating {background: url(refresh.gif) no-repeat scroll 0 1.5%;}
#status span, #status .file {
color: WHITE;
}
#status .file:hover {
text-decoration: none;
}