File: css/trafficlight.css

html * {margin:0; padding:0;}
body {font:0.9em Sans,FreeSans,verdana,sans-serif; position:relative; margin:1em;}

div#traffic-light-container-1 {position:absolute; top:100px; left:100px;}
div#traffic-light-container-2 {position:absolute; top:100px; left:300px;}
div#traffic-light-container-3 {position:absolute; top:100px; left:500px;}

div.strap {font-size:9px; text-align:center; width:60px; margin:3px 0 0 0;}

.traffic-light {
    background-color: #000;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    padding: 10px 4px;
    width: 60px;
}

.traffic-light span {
    border-radius: 50px; /* square to circle */
    display: block;
    height: 40px;
    width: 40px;
    margin: 4px auto 0;
    opacity: 0.8;
}
/* credit: Chris Upjohn */

.traffic-light span.red {background:red;}
.traffic-light span.reddim {background:darkred;}
.traffic-light span.green {background:green; margin-top:15px;}
.traffic-light span.greendim {background:darkgreen; margin-top:15px;}
.traffic-light span.greenbright {background:#7fff00; margin-top:15px;}
.traffic-light span.blinker {animation:blinker 1s linear infinite;}
@keyframes blinker {50% {opacity:0;}}

.error {color:#c00;}