html { background-color: #aaa; }

.color-group { border: 1px solid #333; float: left; margin: 8px; width: 128px; }

.color-group span { display: block; height: 42.666666666666667px; }

.color-group input { width: 128px; }

.controls { background-color: #ddd; clear: both; margin: 8px; padding: 8px; width: 256px; }

.controls span { display: block; padding-bottom: 8px; }

.controls span input { border: 0px solid transparent; }

#output-code { float: left; font-family: monospace; height: 32em; width: 16em; }

#output-visual { margin-left: 20em; }

.palette-block { float: left; font-family: monospace; height: 128px; margin: 8px; white-space: nowrap; width: 128px; }

.palette-block span { display: block; height: 32px; padding-left: 8px; }

.palette-block span.color { background-color: #77a182; line-height: 32px; }

.palette-block span.title { background-color: #fff; line-height: 32px; }

* { font-family: sans-serif; }