.progressBar{
position: absolute;
width: 420px;
padding: 10px;
background: #ccccdd;
margin: 0px 5px 0px 0px;
z-index: 100;
font-size: 1.1em;
border: 2px dotted #7777dd;
}
.progressBar .name{
text-align: center;
background: #5555aa;
color: #fff;
font-weight: bold;
padding: 5px;
margin: 5px 0px;
}
.progressBar .status{
color: #000;
margin: 5px 0px;
}
.progressBar .barContainer{
position: relative;
height: 15px;
background: #eeeeff;
border: 2px solid #eeeeff;
text-align: center;
padding: 5px;
}
.progressBar .barContainer .bar{
float: left;
height: 15px;
background: #7777dd;
margin: 0px 0px;
padding: 0px;
}
.progressBar .barContainer .description{
position: absolute;
text-align: center;
height: 15px;
width: 400px;
left: 0px;
top: 0px;
padding: 5px;
z-index: 10;
color: #aaaaff;
}
#controlsWrapper{
float:right;
margin: 0px;
clear:both;
}
#controlsWrapper .toggleButton {
background:transparent;
border-width:0;
float:right;
overflow:visible;
padding:0px;
text-decoration:none;
font-family:sans-serif;
position:relative;
padding: 1ex;
}
#controlsWrapper .toggleButton:hover{
background:#ffffdd;
}
#controlsWrapper .toggleButton span {
display:block;
margin: 0px;
padding: 8px 0;
}
#controlsWrapper .toggleButton span span {
display:block;
border-width:1px 0;
padding: 8px 1em;
margin-top: -9px;
margin-bottom: -9px;
}
#controlsWrapper .toggleButton, input[type="reset"], input[type="button"], input[type="submit"] {
cursor:pointer;
line-height:normal;
text-align:left;
}
#controlsWrapper input.toggleButton:hover{
background-position:0 -60px;
color:#222;
text-decoration:none;
}
#controlsWrapper .disabled {
font-size:12px;
}
#controlsWrapper .disabled span {
background:#f7f1f1;
border-left:1px solid #e0dada;
border-right:1px solid #e0dada;
}
#controlsWrapper .disabled span span {
border-bottom:1px solid #e0dada;
border-top:1px solid #e0dada;
color: #777;
}
#controlsWrapper .disabled label{
color: gray;
}
#controlsWrapper .off {
color: #000;
}
#controlsWrapper .off span {
background:#f7f1f1;
border-left:1px solid #bbbbbb;
border-right:1px solid #aaaaaa;
}
#controlsWrapper .off span span {
border-bottom:1px solid #aaaaaa;
border-top:1px solid #bbbbbb;
}
#controlsWrapper .on{
font-weight:bold;
}
#controlsWrapper .on span {
background:#fffff1;
border-left:1px solid #bbbbbb;
border-right:1px solid #aaaaaa;
}
#controlsWrapper .on span span {
border-bottom:1px solid #aaaaaa;
border-top:1px solid #bbbbbb;
}
#controlsWrapper .doubleToggle{
float:right;
}
#controlsWrapper .doubleToggle .radio{
float: left;
padding: 12px 5px 0px 0px;
}
#controlsWrapper .server_status{
float:right;
padding: 8px 1em;
}
#controlsWrapper .server_status div{
width: 24px;
height: 24px;
background-image: url();
}
#controlsWrapper .server_status div.idle{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/a7/HAPPI_Loading.gif);
}
#controlsWrapper .server_status div.loading{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/a7/HAPPI_Loading.gif);
}
#controlsWrapper .server_status div.error{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/HAPPI_Frown.png);
}
#controlsWrapper .server_status div.success{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/2/2f/HAPPI_Happy.png);
}
#controlsWrapper .server_status div.long{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/d/d5/HAPPI_Clock.png);
}
#consoleWrapper{
width: 250px;
height: 100px;
float: right;
background: #ddd;
border: 1px dotted black;
padding: 5px;
overflow: auto;
}
#consoleWrapper div .prefix{
font-weight: bold;
color: darkgrey;
}
#consoleWrapper div.error{
font-weight: bold;
color: #990000;
}
#legendWrapper{
float: right;
margin-right: 10px;
padding: 2ex;
}
#legendWrapper .legend{
z-index: 0;
}
#legendWrapper .legend span{
margin: 1px;
border: 1px solid #aaaaaa;
}
#legendWrapper .legend .label{
margin: 5px;
border: 0px solid #ffffff;
}
#legendWrapper .legend .new{
background: #c5c4ff;
}
#legendWrapper .legend a{
cursor: pointer;
color: #44f;
text-decoration: none;
border: 2px solid #88f;
padding: 0px 5px;
}
#legendWrapper .established .survived_2{background: #ffffff;}
#legendWrapper .established .survived_4{background: #ffd0d0;}
#legendWrapper .established .survived_8{background: #ffb0b0;}
#legendWrapper .established .survived_16{background: #ff9090;}
#legendWrapper .established .survived_32{background: #ff4545;}
#legendWrapper .established .survived_max{background: #ff0000;}
#legendWrapper .novel .survived_2{background: #00ff00;}
#legendWrapper .novel .survived_4{background: #45ff45;}
#legendWrapper .novel .survived_8{background: #90ff90;}
#legendWrapper .novel .survived_16{background: #b0ffb0;}
#legendWrapper .novel .survived_32{background: #d0ffd0;}
#legendWrapper .novel .survived_max{background: #ffffff;}
#legendWrapper .truthiness .survived_2{background: #ff0000;}
#legendWrapper .truthiness .survived_4{background: #ff4545;}
#legendWrapper .truthiness .survived_8{background: #ff9090;}
#legendWrapper .truthiness .survived_16{background: #ffb0b0;}
#legendWrapper .truthiness .survived_32{background: #ffd0d0;}
#legendWrapper .truthiness .survived_max{background: #ffffff;}
#legendWrapper .legend .documentation{
position: absolute;
background: #fff;
border: 2px dotted #7777dd;
padding: 10px;
width: 300px;
}
#legendWrapper .legend .documentation h2{
border-bottom: 0px;
text-align: center;
}
#legendWrapper .legend .documentation .closeButton{
position: absolute;
top: 3px;
right: 3px;
border: 2px solid #88f;
padding: 0px 5px;
font-weight: bold;
cursor: pointer;
}
.happi_notice{
margin: 10px auto;
border: 1px solid #aaa;
text-align: center;
padding: 10px;
}
.happi_notice .title{
text-align: center;
font-weight: bold;
}
.happi_notice .hide_link{
float: right;
border: 1px dotted #00a;
color: #00e;
cursor: pointer;
padding: 2px 6px;
}