login leds

dabblet.css

body{background:url('http://ramaze.net/ramaze/images/bg.png');}

/* login leds */

#container {
    width: 626px; width:709px;
    height: 256px;
    margin: -107px 0 0 -348px; margin:-128px 0 0 -348px;
    padding: 0 0 0 0px;
    position: absolute;
    top: 50%; left: 50%;
	
	background:url(images/status_flip_container.png) 79px 0px  no-repeat;
	background:-moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
	background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
}

#flip{
	margin:20px 0 0; float:left;
	width:622px; width: 584px;
	height:152px; height: 112px;
	position:relative; overflow:hidden;
	
	background:  none;
	background: 	-moz-linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.5) ),
						-moz-linear-gradient(90deg, rgba(125,125,125,0.5), rgba(125,125,125,0.8) ),
						-moz-radial-gradient(top 90deg, ellipse closest-side, rgba(204,204,204,0.1) 30%, rgba(0,0,0,0.5) 120% ),
						-moz-linear-gradient(90deg, rgba(70,70,70,0.5), rgba(0,0,0,1) );
	background:  -webkit-gradient(linear, left top, left bottom, from(rgba(70,70,70,0.4)), to(rgba(0,0,0,0.4))),
						-webkit-gradient(radial, center -400, 50, center -480, 682, from(rgba(204,204,204,0.4)), to(rgba(70,70,70,0.2))),
						-webkit-gradient(radial, left center, 150, left center, 622, from(rgba(70,70,70,0.1)), to(rgba(0,0,0,0))),
						-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(125,125,125,0.3)), color-stop(0.01, rgba(0,0,0,0.4)), color-stop(0.03, rgba(0,0,0,0.4)) ),
						-webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgba(0,0,0,0.5)), color-stop(1, rgba(0,0,0,0.9)) );
	
	color: #dadada;
	font-size: 54px; font-weight: bold;
	text-align: left; line-height: 145px; line-height: 104px;
	text-indent:46px; letter-spacing: -2px;
	
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-box-shadow:0 -1px 0  rgba(24,24,24,1), 0 0 35px rgba(121,121,121,0.2);
	-moz-box-shadow:0 -1px 0  rgba(24,24,24,1), 0 0 35px rgba(121,121,121,0.2);
	
	border-top:2px solid rgba(24,24,24,0.3);
	border-top:1px solid rgba(66,66,66,1);
	border-bottom:1px solid rgba(70,70,70,1);
	border-left:1px solid rgba(70,70,70,0.6);
	border-right:1px solid rgba(70,70,70,0.6);
	
	text-shadow:0 0 2px rgba(0,0,0,0.5);
}

#leds{
	width:83px; height:115px; float:left;
	width:96px;
	background:url(images/status_led_sprite.png) 0 -70px no-repeat;
	background:-moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
	background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
}

#leds.on{ background-position:0 44px; }

.online, .offline{
	margin:57px 13px 0 13px;
	width:11px; height:41px; float:left; display:inline;
}

.online{
	background:-moz-linear-gradient(-90deg, rgba(85,92,79,0.9), rgba(69,76,62,1) 1%, rgba(42,49,34,1)  97%, rgba(15,15,15,1) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(85,92,79,0.9)), color-stop(0.04, rgba(69,76,62,1)), color-stop(0.96, rgba(42,49,34,1)), color-stop(1, rgba(15,15,15,1)) );
	border-top:1px solid #0f0f0f;
	border-right:1px solid #0f0f0f;
	border-left:1px solid #0f0f0f;
	border-bottom:1px solid #4e4e4e;
}

.online.active{
	-webkit-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
	-moz-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
	overflow:visible;
	background:-moz-linear-gradient(-90deg, rgba(156,204,105,0.9), rgba(122,186,53,1) 1%, rgba(95,159,26,1) 98%, rgba(40,40,40,0.5) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,204,105,0.9)), color-stop(0.04, rgba(122,186,53,1)), color-stop(0.96, rgba(95,159,26,1)), color-stop(1, rgba(0,0,0,1)) );
	border-top:1px solid rgba(44,66,20,1);
	border-right:1px solid rgba(42,63,20,0.8);
	border-left:1px solid rgba(42,63,20,0.8);
	border-bottom:1px solid rgba(80,99,60,1);
}

.offline{
	background:-moz-linear-gradient(-90deg, rgba(113,91,91,0.9), rgba(100,64,64,1) 1%, rgba(72,37,37,1) 98%, rgba(15,15,15,1) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(113,91,91,0.9)), color-stop(0.04, rgba(100,64,64,1)), color-stop(0.96, rgba(72,37,37,1)), color-stop(1, rgba(15,15,15,1)) );
	border-top:1px solid #0f0f0f;
	border-right:1px solid #0f0f0f;
	border-left:1px solid #0f0f0f;
	border-bottom:1px solid #4e4e4e;
}

.offline.active{
	-moz-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	background:-moz-linear-gradient(-90deg, rgba(226,120,120,0.9), rgba(216,74,74,1) 1%, rgba(188,47,47,1) 98%, rgba(40,40,40,0.5) );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(226,120,120,0.9)), color-stop(0.04, rgba(216,74,74,1)), color-stop(0.96, rgba(188,47,47,1)), color-stop(1, rgba(0,0,0,1)) );
	
	border-top:1px solid rgba(97,30,30,1);
	border-right:1px solid rgba(83,27,27,0.8);
	border-left:1px solid rgba(83,27,27,0.8);
	border-bottom:1px solid rgba(125,69,69,1);
	
	-webkit-animation-name: blink;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes blink {
	from {
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	}
	50%{
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 0.5);
	}
	to {
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	}
}

dabblet.html

<div id="leds">                 
<div class="online led"></div><div class="online led"></div>      
    <div class="offline active led"></div>
<div class="online led"></div>
 <div class="offline active led"></div>

 </div>

settings.json

{"view":"split","fontsize":"150","seethrough":"","prefixfree":"1","page":"css"}