User:EpochFail/HAPPI.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

	.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;
	}