html, body { width: 100%; height: 100%; }
body { color: #2e2e2e; background: #f7f7f7; font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; }
body, html, dl, dd { margin: 0; padding: 0; }
.wrapper { width: 768px; margin: 0 auto; margin-bottom: 30px; }
.wrapper button { background: #e9e9e9; cursor: pointer; border: 1px solid #ddd; padding: 2px 13px; border-radius: 3px; margin: 0; cursor: pointer; line-height: 20px; }
.wrapper button input[type="text"] { font-size: 12px; border: 1px solid #ddd; text-align: center; border-radius: 3px; margin: 0 -11px 0 5px; padding: 2px; }
.wrapper a { color: #5b5b5b; font-size: 18px; }
.wrapper a:hover { color: #2e2e2e; }
.wrapper hgroup h1 { text-align: center; }
.wrapper .container h2 { margin: 0 0 25px 0;}
.wrapper .container > div { background: white; padding: 30px; border: 1px solid #ddd; box-sizing: border-box; margin-top: 30px; }
.wrapper div dl { margin: 20px 0; }
.wrapper div dl dd,
.wrapper div dl dt { margin-bottom: 5px; }

.wrapper div dl dd { display: inline-block; font-size: 12px; margin-bottom: 5px; }
.wrapper div dl dt span { color: #5b5b5b; font-size: 0.8em; }
.wrapper div .output { display: block; width: 100%; height: 100px; border: 1px solid #ddd; overflow-y: auto; font-size: 13px; padding: 5px; box-sizing: border-box; line-height: 1.4em; resize: vertical; font-family: Inconsolata, Monaco, monospace; }

dl.songs ul { padding: 0 0 0 20px; margin: 0; }
dl.console dd { width: 100%; white-space: nowrap; }
dl.console .clear { margin-top: 10px; }