body { font-family: sans-serif; background: #fff; }
label { display: block; }
label > span { width: 64px; display: inline-block; padding: 5px 0; }
.box { display: inline-block; vertical-align: top; padding: 2px 8px; margin-top: 20px; }
.b { display: inline-block; padding: 16px 32px; border: 1px solid black; color: black; text-decoration: none; font-size: 1em; }
.b:hover { background: #eee }
.b:active{ background: #ccc }
#c { width: 256px; height: 384px; border: 1px solid #ccc; padding: 4px;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor; }
-ms-interpolation-mode: nearest-neighbor; }
#c.s8 { width: 128px; height: 192px; }
#c.s16 { width: 256px; height: 320px; }
#all { margin: 10px auto; width: 650px; }
#preview { text-align: left; vertical-align: top; }
#export { text-align: left; width: 320px; margin-top: 32px; }
#options { text-align: left; width: 320px; margin: 20px 0; }
h1 { text-align: left; }
#all > span.loading { display: none; padding: 30px; text-align: center; }
#all.loading > div { display: none; }
#all.loading > span.loading { display: block; }
input[type='range']{ width: 100%; }