body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

hr {
  border: none;
  border-top: 1px solid orange;
}

.box {
  border-bottom: 2px dashed orange;
  padding-bottom: 24px;
  padding: 24px;
}

.box:last-child {
  border: none;
  margin-bottom: 0;
}

.title {
  margin-top: 0;
  font-size: 18px;
}

.desc {

}

.widget {
  margin: 12px 0;
}

.meta {

}

.data-list,
.mask-list {

}

.sprite-opt {
  resize: none;
  overflow: hidden;
  height: 112px;
  padding: 6px;
  width: 200px;
  border: 0;
  background-color: #f7f7f7;
}

.mask-key .color {
  margin-right: 6px;
}

.mask-key .color,
.data,
.mask {
  width: 16px;
  height: 16px;
  border: 1px solid #ababab;
  float: left;
  text-align: center;
  font-family: monospace;
}

.mask-key-0,
.data-0,
.mask-0 {

}

.mask-key-1 .color,
.data-1,
.mask-1 {
  background-color: #c3ffb9;
}

.mask-key-2 .color,
.data-2,
.mask-2 {
  background-color: #bfbfff;
}

.mask-key--1 .color,
.data--1,
.mask--1 {
  background-color: #fdc1bf;
}

/* mirror */
.data-8,
.mask-8 {
  text-indent: -9999px;
  background-color: #f7f7f7;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
}

/* new line */
.data-9,
.mask-9 {
  float: none;
  text-indent: -9999px;
}

.mask-keys {
  margin: 6px;
}

.mask-key {
  clear: both;
}

.last-sprite {
  margin-bottom: 24px;
}

.sprites {
  
}

.sprite {
  margin: 4px;
}