.status { border: solid thin; font: 0.6em sans-serif; width: 12em; padding: 0.5em; position: absolute; left: 0.5em; background: white; color: black; }
.status strong { display: block; border-bottom: thin solid black; margin: -0.5em -0.5em 0.4em; padding: 0.2em 0.5em 0.1em; background: black; color: white; }
.status.UNKNOWN strong { background: gray; color: white; }
.status.TBW strong { background: red; color: white; }
.status.WIP strong { background: red; color: white; }
.status.FD strong { background: orange; color: black; }
.status.WD strong { background: orange; color: black; }
.status.ATRISK strong { background: red; color: yellow; }
.status.LC strong { background: yellow; color: black; }
.status.CR strong { background: lime; color: black; }
.status.REC strong { background: green; color: white; }
.status:after { position: absolute; top: 0; left: 100%; content: '\25B6'; }
.status p { margin: 0; clear: both; }
.status div.implementations { height: 22px; }
.status div.implementations:before { display: block; content: "Implementation status:"; }
.status div.implementations p { font-size: 16px; float: left; margin: 0; border: 2px solid transparent; padding: 1px; text-indent: -10000px; /* well that's just silly */ width: 1em; height: 1em; background: no-repeat center center; /*background-size: 1em 1em;*/ clear: none; }
.status div.implementations p.IE { background-image: url(http://msdn2.microsoft.com/en-us/library/ms535205.new\(en-us,VS.85\).gif); background-position: center left; }
.status div.implementations p.Firefox { background-image: url(http://www.mozilla.org/favicon.ico); }
.status div.implementations p.Safari { background-image: url(http://www.webkit.org/favicon.ico); }
.status div.implementations p.Opera { background-image: url(http://www.opera.com/favicon.ico); }
.status div.implementations p.PASS { }
.status div.implementations p.PARTIAL { opacity: 0.4; }
.status div.implementations p.NONE { opacity: 0.05; }
.status div.implementations p.BUG { border-bottom-color: red; }
.status div.implementations p.CRASH { border-style: dotted; border-color: black; background-color: yellow; }
.status .edit-link { display: none; }

.progress { text-decoration: blink; }

.panel { position: fixed; top: 10%; left: 0; margin: auto; right: 0; width: 30em; border: double thick; background: #EEEEEE; color: black; padding: 1em; font: 1em sans-serif; }
.panel h2 { margin: 0; text-align: center; }
.panel ul { min-height: 6em; }
.panel p { text-align: right; margin: 0; }
.panel form { background: transparent; color: black; margin: 0.5em -0.5em; padding: 0.5em; }
.panel form.changed { background: yellow; color: black; }
.panel form p { text-align: left; margin: 1em 0; }
.panel form p:first-child { margin-top: 0; }
.panel form p:last-child { margin-bottom: 0; }
.panel form p textarea { width: 100% /* need the keyword that makes it fit to the parent here XXX */; min-height: 4em; display: block; }

.loginUI { position: absolute; top: 10em; right: 1em; padding: 0.3em; width: 10em; font-size: small; text-align: center; background: #EEEEEE; color: black; border: inset thin; }
.loginUI input { display: block; margin: auto; }