html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  background-color: white;
  overflow-x: hidden;
}

noscript {
  color: red;
  margin-bottom: 10px;
}

abbr {
  text-decoration: none;
  border: none;
  font-weight: inherit;
  font-style: normal;
}

label {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

input[disabled] ~ * {
  color: #777777;
}

td {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

h1 {
  font-size: 200%;
  margin: 20px 0;
}

h2 {
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
}

h2.notes {
  margin: 1.5em 0 0.5em 0;
  color: #888888;
}

#head {
  padding: 20px 0 0 20px;
  background-color: #a2cdc7;
  background-image: url("../img/piano_roll.png");
  background-repeat: repeat-y;
}

h1#page-header {
  margin: 0 0 0 80px;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  font-size: 3.5em;
  color: white;
  text-shadow: 1px 1px 1px #09564f, 2px 2px 2px #0d645c;
  white-space: nowrap;
}

#main {
  padding: 10px 0 0 20px;
  background-color: white;
  overflow-x: auto;
}

input[type=radio], input[type=checkbox] {
  display: inline-block;
  margin-right: 0.5em;
}

#info {
  max-width: 50em;
}
#info p {
  font-size: 80%;
  font-family: "Play", Lucida Sans, sans-serif;
  line-height: 1.3em;
  color: #999999;
  margin-bottom: 1em;
}
#info p a {
  text-decoration: none;
  border-bottom: 1px dashed #999999;
}
#info p a:hover {
  border-bottom: 1px solid #999999;
}
#info p a, #info p a:visited, #info p a:hover, #info p a:focus {
  color: #555555;
}

#menu {
  margin: 0 0 1em -20px;
  padding: 1em 20px 0 100px;
  border-bottom: 1px solid #aaaaaa;
  min-width: 500px;
  white-space: nowrap;
}
#menu li.tab {
  display: inline-block;
  position: relative;
  top: 1px;
  background-color: #dddddd;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  border-top: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
#menu li.tab a {
  padding: 0.3em 0.9em;
  text-decoration: none;
  font-weight: bold;
  color: black;
  display: inline-block;
}
#menu li.current-page {
  background-color: white;
  border-top: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-bottom: 1px solid white;
}
#menu li.current-page a {
  cursor: default;
}
@media screen and (max-device-width: 320px) {
  #menu li.tab {
    font-size: 1.8em;
  }
}

#foot {
  padding-left: 20px;
}

div#stats table.key-stat td.vocaloid-info, div#stats table.tempo-stat td.vocaloid-info, div#stats table.tempo-range-stat td.vocaloid-info, div#stats table.key-range-stat td.vocaloid-info {
  box-sizing: content-box;
}
div#stats table.key-stat td.vocaloid-info div.info-bar, div#stats table.tempo-stat td.vocaloid-info div.info-bar, div#stats table.tempo-range-stat td.vocaloid-info div.info-bar, div#stats table.key-range-stat td.vocaloid-info div.info-bar {
  background-repeat: no-repeat;
  height: 1em;
  line-height: 1em;
  display: inline-block;
}

div#stats table.tempo-stat thead th.vocaloid-info {
  background-image: url("../img/tempo_line.png");
  background-repeat: no-repeat;
  height: 45px;
}

div#stats table.tempo-range-stat td.vocaloid-name div.vocaloid-name, div#stats table.key-range-stat td.vocaloid-name div.vocaloid-name, div#stats table.tempo-range-stat td.vocaloid-info div.info-bar, div#stats table.key-range-stat td.vocaloid-info div.info-bar {
  font-size: 0.8em;
  height: 0.8em;
}

div#stats table.key-stat tbody tr:nth-child(even), div#stats table.tempo-stat tbody tr:nth-child(even) {
  background-color: rgba(200, 200, 200, 0.1);
}

div#control-panel.list-page label {
  display: table-row;
  font-size: 1em;
}
div#control-panel.list-page label span, div#control-panel.list-page label select {
  display: table-cell;
  padding-bottom: 0.5em;
  vertical-align: top;
  line-height: 1em;
}
div#control-panel.list-page label:last-of-type::before {
  display: table-cell;
  content: "";
  min-width: 6em;
}
div#control-panel.list-page label:last-of-type input {
  display: table-cell;
}
div#control-panel.list-page label:last-of-type span {
  display: inline-block;
  line-height: 1.5em;
  padding-top: -0.5em;
}
@media screen and (max-device-width: 480px) {
  div#control-panel.list-page label {
    font-size: 2em;
  }
  div#control-panel.list-page label select {
    font-size: 0.5em;
  }
}

div#control-panel.compare-page {
  table-layout: fixed;
  border-bottom: 1px solid #eeeeee;
  margin: 0 1em 1em 0;
  padding-bottom: 1em;
}
div#control-panel.compare-page #sort-settings {
  margin-left: 1em;
}
div#control-panel.compare-page > label {
  display: table-cell;
  padding-bottom: 10px;
  vertical-align: top;
  font-size: 1em;
}
@media screen and (max-device-width: 480px) {
  div#control-panel.compare-page label {
    font-size: 2em;
  }
  div#control-panel.compare-page select, div#control-panel.compare-page input {
    font-size: 0.5em;
  }
}
div#control-panel.compare-page #multiselect {
  display: table-row;
  table-layout: fixed;
}
div#control-panel.compare-page #multiselect-search-box, div#control-panel.compare-page #multiselect-storage {
  display: table-cell;
  vertical-align: top;
}
div#control-panel.compare-page #multiselect-search-box {
  width: 17em;
}
div#control-panel.compare-page #multiselect-search-box input, div#control-panel.compare-page #multiselect-search-box select {
  display: block;
}
div#control-panel.compare-page #multiselect-search-box select {
  position: absolute;
  left: 18em;
}
div#control-panel.compare-page #multiselect-search-input {
  width: 17em;
}
@media screen {
  div#control-panel.compare-page #multiselect-storage label.search {
    display: inline-block;
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    padding: 0 5px;
    margin: 0 10px 10px 0;
    font-size: 0.9em;
    cursor: pointer;
    white-space: nowrap;
  }
  div#control-panel.compare-page #multiselect-storage label.search input[type="checkbox"] {
    display: none;
  }
  div#control-panel.compare-page #multiselect-storage label.search input[type="checkbox"] ~ span {
    text-decoration: line-through;
  }
  div#control-panel.compare-page #multiselect-storage label.search input[type="checkbox"]:checked ~ span {
    text-decoration: none;
  }
  div#control-panel.compare-page #multiselect-storage label.search:hover {
    background-color: #dddddd;
  }
}
div#control-panel.compare-page #multiselect-menu {
  position: absolute;
  background-color: #555555;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  opacity: 0.9;
  color: white;
  font-size: 90%;
  min-width: 12em;
  z-index: 9999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#control-panel.compare-page #multiselect-menu li {
  list-style-type: none;
}
div#control-panel.compare-page #multiselect-menu label {
  display: block;
  padding: 3px 10px;
}
@media screen {
  div#control-panel.compare-page #multiselect-menu label input[type="checkbox"] {
    position: absolute;
    left: -9999px;
  }
}
div#control-panel.compare-page #multiselect-menu li:first-of-type label {
  padding-top: 6px;
}
div#control-panel.compare-page #multiselect-menu li:last-of-type label {
  padding-bottom: 6px;
}
@media screen and (max-device-width: 480px) {
  div#control-panel.compare-page #multiselect-search-box {
    width: 23em;
  }
  div#control-panel.compare-page #multiselect-search-input {
    width: 12em;
    font-size: 1.5em;
    padding-right: 1em;
  }
  div#control-panel.compare-page #multiselect-menu {
    min-width: 20em;
  }
  div#control-panel.compare-page #multiselect-storage label.search {
    font-size: 1.5em;
  }
}

div#control-panel.timeline-page {
  margin-bottom: 2em;
  line-height: 1.5em;
}
div#control-panel.timeline-page label {
  display: table-row;
  font-size: 1em;
}
div#control-panel.timeline-page label input, div#control-panel.timeline-page label span {
  display: table-cell;
  padding-left: 0.3em;
}
@media screen and (max-device-width: 480px) {
  div#control-panel.timeline-page label {
    font-size: 2em;
    line-height: 1.5em;
  }
}

h1#stat-header {
  white-space: nowrap;
  font-size: 1.7em;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  margin-bottom: 1.5em;
}

div#stats > h2 {
  font-size: 1.5em;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  margin: 20px 0 10px 0;
}

@media screen and (max-device-width: 480px) {
  h1#stat-header {
    font-size: 2em;
  }
}
div#stats {
  overflow: hidden;
}
div#stats th {
  text-indent: -9999px;
  font-size: 0;
}
div#stats div.footer.key-stat {
  margin-left: 200px;
  background-image: url("../img/keyboard.png"), url("../img/key_background.png");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom left, top left;
  height: 75px;
  width: 737px;
}
div#stats h2.key-stat {
  height: 0;
  margin: 0;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
}
div#stats h2.key-stat span {
  position: relative;
  top: 51px;
}
div#stats h2.key-stat:first-child span {
  top: 22px;
}
div#stats h2.tempo-stat {
  margin: 0 0 -20px 0;
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
}
div#stats h2.tempo-stat span {
  position: relative;
  top: 15px;
}
div#stats tbody td {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
div#stats tbody tr + tr td {
  padding-top: 0;
}
div#stats table.key-stat tr:hover td, div#stats table.tempo-stat tr:hover td {
  background-color: #eeeeee;
}
div#stats table.key-stat th.vocaloid-name, div#stats table.tempo-stat th.vocaloid-name {
  min-width: 200px;
}
div#stats table.key-stat td.vocaloid-name, div#stats table.tempo-stat td.vocaloid-name {
  box-sizing: content-box;
  max-width: 200px;
  width: 200px;
  font-size: 0.9em;
}
div#stats table.key-stat td.vocaloid-name div.vocaloid-name, div#stats table.tempo-stat td.vocaloid-name div.vocaloid-name {
  display: inline-block;
  line-height: 1em;
  white-space: nowrap;
}
div#stats table.key-stat td.vocaloid-info, div#stats table.tempo-stat td.vocaloid-info {
  width: 737px;
}
div#stats table.key-stat td.vocaloid-info div.vocaloid-info, div#stats table.tempo-stat td.vocaloid-info div.vocaloid-info {
  white-space: nowrap;
}
div#stats table.key-stat td.vocaloid-info div.vocaloid-info div.info-bar span:first-child, div#stats table.tempo-stat td.vocaloid-info div.vocaloid-info div.info-bar span:first-child {
  font-size: 80%;
  float: left;
}
div#stats table.key-stat td.vocaloid-info div.vocaloid-info div.info-bar span:nth-child(2), div#stats table.tempo-stat td.vocaloid-info div.vocaloid-info div.info-bar span:nth-child(2) {
  display: none;
}
div#stats table.key-stat td.vocaloid-info div.vocaloid-info div.info-bar span:last-child, div#stats table.tempo-stat td.vocaloid-info div.vocaloid-info div.info-bar span:last-child {
  font-size: 80%;
  float: right;
  position: relative;
  left: 7px;
}
div#stats table.key-stat div.info-bar-head, div#stats table.key-stat div.info-bar-tail, div#stats table.tempo-stat div.info-bar-head, div#stats table.tempo-stat div.info-bar-tail {
  width: 40px;
  height: 1em;
  display: inline-block;
  background-repeat: no-repeat;
}
div#stats table.tempo-stat div.info-bar span:last-child {
  left: 0;
}
div#stats table.tempo-range-stat td, div#stats table.key-range-stat td {
  padding: 1px 0;
}
div#stats table.tempo-range-stat h2, div#stats table.key-range-stat h2 {
  white-space: nowrap;
}
div#stats table.tempo-range-stat td.vocaloid-name, div#stats table.key-range-stat td.vocaloid-name {
  box-sizing: content-box;
  max-width: 250px;
  width: 250px;
}
div#stats table.tempo-range-stat td.vocaloid-name div.vocaloid-name, div#stats table.key-range-stat td.vocaloid-name div.vocaloid-name {
  display: inline-block;
  line-height: 1em;
  white-space: nowrap;
}
div#stats table.tempo-range-stat td.vocaloid-name div.vocaloid-name, div#stats table.key-range-stat td.vocaloid-name div.vocaloid-name {
  width: 250px;
  font-weight: bold;
  padding: 0.3em 0.2em 0.4em 0.5em;
  margin-bottom: 0.1em;
}
div#stats table.tempo-range-stat td.vocaloid-name div.vocaloid-name span.stat-name, div#stats table.key-range-stat td.vocaloid-name div.vocaloid-name span.stat-name {
  line-height: 1em;
}
div#stats table.tempo-range-stat td.vocaloid-info div.info-bar, div#stats table.key-range-stat td.vocaloid-info div.info-bar {
  font-weight: bold;
  text-align: right;
  padding: 0.3em 0.5em 0.4em 0.2em;
  margin-bottom: 0.1em;
}
div#stats table.tempo-range-stat td.vocaloid-info div.info-bar span, div#stats table.key-range-stat td.vocaloid-info div.info-bar span {
  line-height: 1em;
}
div#stats table.key-range-stat div.vocaloid-name {
  color: indigo;
  background-color: thistle;
}
div#stats table.key-range-stat div.info-bar {
  color: white;
  background-color: #67308e;
}
div#stats table.tempo-range-stat div.vocaloid-name {
  color: navy;
  background-color: lightsteelblue;
}
div#stats table.tempo-range-stat div.info-bar {
  color: white;
  background-color: #38308e;
}
div#stats table.key-stat {
  background-image: url("../img/key_background.png");
  background-repeat: repeat-y;
  background-position: 200px;
}
div#stats table.key-stat thead th.vocaloid-info {
  background-image: url("../img/keyboard.png"), url("../img/key_background.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 30px, 0 0;
  height: 105px;
}
div#stats table.key-stat tbody td {
  padding-top: 5px;
}
div#stats table.key-stat:first-of-type thead th.vocaloid-info {
  background-image: url("../img/keyboard.png"), url("../img/key_background.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom left;
  height: 75px;
}
div#stats table.tempo-stat thead th.vocaloid-info {
  margin-left: 200px;
}
div#stats table.tempo-stat tbody td {
  padding-top: 5px;
}
div#stats #misc-stats {
  max-width: 27em;
  -webkit-text-size-adjust: 100%;
}
div#stats #misc-stats dt {
  font-family: "Play", Lucida Sans, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  padding: 0.3em 0;
}
div#stats #misc-stats dt .fa-caret-down, div#stats #misc-stats dt .fa-caret-right {
  width: 0.9em;
  color: indigo;
}
div#stats #misc-stats > dt a {
  text-decoration: none;
  color: inherit;
}
div#stats #misc-stats > dd.inactive {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
div#stats #misc-stats > dd.active {
  position: stative;
}
div#stats #misc-stats > dd {
  border-left: 0.3em solid #c9ecec;
  margin-left: 0.2em;
}
div#stats #misc-stats dd {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  padding: 0 0 0.1em 0.8em;
}
div#stats #misc-stats dd dd {
  padding: 0;
}
div#stats #misc-stats dd + dd {
  padding-top: 0.5em;
}
div#stats #misc-stats dd dl dt {
  font-weight: normal;
}
div#stats #misc-stats dd dl dd {
  font-size: 1em;
}
div#stats #misc-stats dd dl dd + dt {
  margin-top: 0.5em;
}
div#stats #misc-stats dd dl dt:first-of-type {
  margin-top: 0;
}
@media screen and (max-device-width: 480px) {
  div#stats #misc-stats {
    max-width: 100%;
  }
  div#stats #misc-stats dt {
    font-size: 2.5em;
  }
  div#stats #misc-stats dd {
    font-size: 2em;
  }
  div#stats #misc-stats dd dl dt {
    font-size: 1.2em;
  }
  div#stats #misc-stats dd dl dd {
    font-size: 1em;
  }
}

/* Gradients */
div#stats tbody td.vocaloid-info div.big-al div.info-bar-head, div#stats tbody td.vocaloid-info div.clara div.info-bar-head, div#stats tbody td.vocaloid-info div.cul div.info-bar-head, div#stats tbody td.vocaloid-info div.yuezheng-ling div.info-bar-head {
  background-image: linear-gradient(to left, crimson 0%, #e34363 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.big-al div.info-bar-tail, div#stats tbody td.vocaloid-info div.clara div.info-bar-tail, div#stats tbody td.vocaloid-info div.cul div.info-bar-tail, div#stats tbody td.vocaloid-info div.yuezheng-ling div.info-bar-tail {
  background-image: linear-gradient(to right, crimson 0%, #e34363 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.bruno div.info-bar-head {
  background-image: linear-gradient(to left, cornflowerblue 0%, #83aaf1 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.bruno div.info-bar-tail {
  background-image: linear-gradient(to right, cornflowerblue 0%, #83aaf1 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.vy2 div.info-bar-head {
  background-image: linear-gradient(to left, darkblue 0%, #3333a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.vy2 div.info-bar-tail {
  background-image: linear-gradient(to right, darkblue 0%, #3333a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yuezheng-longya div.info-bar-head {
  background-image: linear-gradient(to left, darkcyan 0%, #33a2a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yuezheng-longya div.info-bar-tail {
  background-image: linear-gradient(to right, darkcyan 0%, #33a2a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.tonio div.info-bar-head {
  background-image: linear-gradient(to left, darkkhaki 0%, #cac589 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.tonio div.info-bar-tail {
  background-image: linear-gradient(to right, darkkhaki 0%, #cac589 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.stardust div.info-bar-head {
  background-image: linear-gradient(to left, darkslateblue 0%, #6d64a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.stardust div.info-bar-tail {
  background-image: linear-gradient(to right, darkslateblue 0%, #6d64a2 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.gackpoid div.info-bar-head, div#stats tbody td.vocaloid-info div.merli div.info-bar-head {
  background-image: linear-gradient(to left, darkviolet 0%, #a933dc 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.gackpoid div.info-bar-tail, div#stats tbody td.vocaloid-info div.merli div.info-bar-tail {
  background-image: linear-gradient(to right, darkviolet 0%, #a933dc 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.mayu div.info-bar-head {
  background-image: linear-gradient(to left, deeppink 0%, #ff43a9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.mayu div.info-bar-tail {
  background-image: linear-gradient(to right, deeppink 0%, #ff43a9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.aoki-lapis div.info-bar-head {
  background-image: linear-gradient(to left, deepskyblue 0%, #33ccff 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.aoki-lapis div.info-bar-tail {
  background-image: linear-gradient(to right, deepskyblue 0%, #33ccff 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kaai-yuki div.info-bar-head, div#stats tbody td.vocaloid-info div.meiko div.info-bar-head {
  background-image: linear-gradient(to left, firebrick 0%, #c14e4e 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kaai-yuki div.info-bar-tail, div#stats tbody td.vocaloid-info div.meiko div.info-bar-tail {
  background-image: linear-gradient(to right, firebrick 0%, #c14e4e 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.avanna div.info-bar-head {
  background-image: linear-gradient(to left, forestgreen 0%, #4ea24e 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.avanna div.info-bar-tail {
  background-image: linear-gradient(to right, forestgreen 0%, #4ea24e 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.cyber-diva div.info-bar-head, div#stats tbody td.vocaloid-info div.kagamine-rin-len div.info-bar-head {
  background-image: linear-gradient(to left, gold 0%, #ffdf33 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.cyber-diva div.info-bar-tail, div#stats tbody td.vocaloid-info div.kagamine-rin-len div.info-bar-tail {
  background-image: linear-gradient(to right, gold 0%, #ffdf33 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.zhiyu-moke div.info-bar-head {
  background-image: linear-gradient(to left, gainsboro 0%, #e3e3e3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.zhiyu-moke div.info-bar-tail {
  background-image: linear-gradient(to right, gainsboro 0%, #e3e3e3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.dex div.info-bar-head, div#stats tbody td.vocaloid-info div.mew div.info-bar-head, div#stats tbody td.vocaloid-info div.wil div.info-bar-head {
  background-image: linear-gradient(to left, gray 0%, #999999 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.dex div.info-bar-tail, div#stats tbody td.vocaloid-info div.mew div.info-bar-tail, div#stats tbody td.vocaloid-info div.wil div.info-bar-tail {
  background-image: linear-gradient(to right, gray 0%, #999999 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.macne-nana div.info-bar-head {
  background-image: linear-gradient(to left, greenyellow 0%, #bdff59 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.macne-nana div.info-bar-tail {
  background-image: linear-gradient(to right, greenyellow 0%, #bdff59 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.maika div.info-bar-head, div#stats tbody td.vocaloid-info div.tone-rion div.info-bar-head, div#stats tbody td.vocaloid-info div.uni div.info-bar-head, div#stats tbody td.vocaloid-info div.xin-hua div.info-bar-head {
  background-image: linear-gradient(to left, hotpink 0%, #ff87c3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.maika div.info-bar-tail, div#stats tbody td.vocaloid-info div.tone-rion div.info-bar-tail, div#stats tbody td.vocaloid-info div.uni div.info-bar-tail, div#stats tbody td.vocaloid-info div.xin-hua div.info-bar-tail {
  background-image: linear-gradient(to right, hotpink 0%, #ff87c3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sf-a2-miki div.info-bar-head {
  background-image: linear-gradient(to left, indianred 0%, #d77d7d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sf-a2-miki div.info-bar-tail {
  background-image: linear-gradient(to right, indianred 0%, #d77d7d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yanhe div.info-bar-head {
  background-image: linear-gradient(to left, lightcoral 0%, #f39999 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yanhe div.info-bar-tail {
  background-image: linear-gradient(to right, lightcoral 0%, #f39999 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.tohoku-zunko div.info-bar-head {
  background-image: linear-gradient(to left, lightgreen 0%, #a6f1a6 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.tohoku-zunko div.info-bar-tail {
  background-image: linear-gradient(to right, lightgreen 0%, #a6f1a6 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.nekomura-iroha div.info-bar-head {
  background-image: linear-gradient(to left, lightsalmon 0%, #ffb395 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.nekomura-iroha div.info-bar-tail {
  background-image: linear-gradient(to right, lightsalmon 0%, #ffb395 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.hiyama-kiyoteru div.info-bar-head {
  background-image: linear-gradient(to left, lightslategray 0%, #92a0ad 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.hiyama-kiyoteru div.info-bar-tail {
  background-image: linear-gradient(to right, lightslategray 0%, #92a0ad 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.megpoid div.info-bar-head {
  background-image: linear-gradient(to left, limegreen 0%, #5bd75b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.megpoid div.info-bar-tail {
  background-image: linear-gradient(to right, limegreen 0%, #5bd75b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sweet-ann div.info-bar-head {
  background-image: linear-gradient(to left, lemonchiffon 0%, #fffbd7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sweet-ann div.info-bar-tail {
  background-image: linear-gradient(to right, lemonchiffon 0%, #fffbd7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.v-flower div.info-bar-head {
  background-image: linear-gradient(to left, mediumorchid 0%, #c877dc 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.v-flower div.info-bar-tail {
  background-image: linear-gradient(to right, mediumorchid 0%, #c877dc 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sonika div.info-bar-head {
  background-image: linear-gradient(to left, mediumseagreen 0%, #63c28d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.sonika div.info-bar-tail {
  background-image: linear-gradient(to right, mediumseagreen 0%, #63c28d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.hatsune-miku div.info-bar-head, div#stats tbody td.vocaloid-info div.utatane-piko div.info-bar-head {
  background-image: linear-gradient(to left, mediumturquoise 0%, #6ddad6 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.hatsune-miku div.info-bar-tail, div#stats tbody td.vocaloid-info div.utatane-piko div.info-bar-tail {
  background-image: linear-gradient(to right, mediumturquoise 0%, #6ddad6 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.cyber-songman div.info-bar-head, div#stats tbody td.vocaloid-info div.galaco div.info-bar-head, div#stats tbody td.vocaloid-info div.prima div.info-bar-head, div#stats tbody td.vocaloid-info div.sachiko div.info-bar-head {
  background-image: linear-gradient(to left, mediumvioletred 0%, #d2449d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.cyber-songman div.info-bar-tail, div#stats tbody td.vocaloid-info div.galaco div.info-bar-tail, div#stats tbody td.vocaloid-info div.prima div.info-bar-tail, div#stats tbody td.vocaloid-info div.sachiko div.info-bar-tail {
  background-image: linear-gradient(to right, mediumvioletred 0%, #d2449d 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.vy1 div.info-bar-head {
  background-image: linear-gradient(to left, mistyrose 0%, #ffe9e7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.vy1 div.info-bar-tail {
  background-image: linear-gradient(to right, mistyrose 0%, #ffe9e7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.matcha div.info-bar-head {
  background-image: linear-gradient(to left, olivedrab 0%, rgba(107, 142, 35, 0.8) 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.matcha div.info-bar-tail {
  background-image: linear-gradient(to right, olivedrab 0%, rgba(107, 142, 35, 0.8) 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.seeu div.info-bar-head, div#stats tbody td.vocaloid-info div.unity-chan div.info-bar-head {
  background-image: linear-gradient(to left, orange 0%, #ffb733 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.seeu div.info-bar-tail, div#stats tbody td.vocaloid-info div.unity-chan div.info-bar-tail {
  background-image: linear-gradient(to right, orange 0%, #ffb733 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.azuki div.info-bar-head {
  background-image: linear-gradient(to left, palevioletred 0%, #e28da9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.azuki div.info-bar-tail {
  background-image: linear-gradient(to right, palevioletred 0%, #e28da9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.ia div.info-bar-head, div#stats tbody td.vocaloid-info div.kokone div.info-bar-head {
  background-image: linear-gradient(to left, peachpuff 0%, #ffe1c7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.ia div.info-bar-tail, div#stats tbody td.vocaloid-info div.kokone div.info-bar-tail {
  background-image: linear-gradient(to right, peachpuff 0%, #ffe1c7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.chika div.info-bar-head, div#stats tbody td.vocaloid-info div.megurine-luka div.info-bar-head, div#stats tbody td.vocaloid-info div.rana div.info-bar-head, div#stats tbody td.vocaloid-info div.yuu div.info-bar-head {
  background-image: linear-gradient(to left, pink 0%, #ffcdd5 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.chika div.info-bar-tail, div#stats tbody td.vocaloid-info div.megurine-luka div.info-bar-tail, div#stats tbody td.vocaloid-info div.rana div.info-bar-tail, div#stats tbody td.vocaloid-info div.yuu div.info-bar-tail {
  background-image: linear-gradient(to right, pink 0%, #ffcdd5 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yuzuki-yukari div.info-bar-head {
  background-image: linear-gradient(to left, plum 0%, #e4b3e4 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yuzuki-yukari div.info-bar-tail {
  background-image: linear-gradient(to right, plum 0%, #e4b3e4 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.arsloid div.info-bar-head, div#stats tbody td.vocaloid-info div.fukase div.info-bar-head {
  background-image: linear-gradient(to left, red 0%, #ff3333 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.arsloid div.info-bar-tail, div#stats tbody td.vocaloid-info div.fukase div.info-bar-tail {
  background-image: linear-gradient(to right, red 0%, #ff3333 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.luo-tianyi div.info-bar-head {
  background-image: linear-gradient(to left, royalblue 0%, #6787e7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.luo-tianyi div.info-bar-tail {
  background-image: linear-gradient(to right, royalblue 0%, #6787e7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.anon-kanon div.info-bar-head, div#stats tbody td.vocaloid-info div.daina div.info-bar-head {
  background-image: linear-gradient(to left, sandybrown 0%, #f6b680 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.anon-kanon div.info-bar-tail, div#stats tbody td.vocaloid-info div.daina div.info-bar-tail {
  background-image: linear-gradient(to right, sandybrown 0%, #f6b680 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kaito div.info-bar-head, div#stats tbody td.vocaloid-info div.otomachi-una div.info-bar-head {
  background-image: linear-gradient(to left, slateblue 0%, #887bd7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kaito div.info-bar-tail, div#stats tbody td.vocaloid-info div.otomachi-una div.info-bar-tail {
  background-image: linear-gradient(to right, slateblue 0%, #887bd7 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kyo div.info-bar-head {
  background-image: linear-gradient(to left, steelblue 0%, #6b9bc3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.kyo div.info-bar-tail {
  background-image: linear-gradient(to right, steelblue 0%, #6b9bc3 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yumemi-nemu div.info-bar-head {
  background-image: linear-gradient(to left, turquoise 0%, #66e6d9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.yumemi-nemu div.info-bar-tail {
  background-image: linear-gradient(to right, turquoise 0%, #66e6d9 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.lily div.info-bar-head {
  background-image: linear-gradient(to left, yellow 0%, #ffff33 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.lily div.info-bar-tail {
  background-image: linear-gradient(to right, yellow 0%, #ffff33 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.gachapoid div.info-bar-head {
  background-image: linear-gradient(to left, yellowgreen 0%, #aed75b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.gachapoid div.info-bar-tail {
  background-image: linear-gradient(to right, yellowgreen 0%, #aed75b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.mo-qingxian div.info-bar-head {
  background-image: linear-gradient(to left, #fcea6e 0%, #fdee8b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.mo-qingxian div.info-bar-tail {
  background-image: linear-gradient(to right, #fcea6e 0%, #fdee8b 20%, rgba(255, 255, 255, 0) 100%);
}

div#stats tbody td.vocaloid-info div.anon-kanon div.info-bar {
  background-color: sandybrown;
  color: black;
}
div#stats tbody td.vocaloid-info div.aoki-lapis div.info-bar {
  background-color: deepskyblue;
  color: black;
}
div#stats tbody td.vocaloid-info div.arsloid div.info-bar {
  background-color: red;
  color: white;
}
div#stats tbody td.vocaloid-info div.avanna div.info-bar {
  background-color: forestgreen;
  color: white;
}
div#stats tbody td.vocaloid-info div.azuki div.info-bar {
  background-color: palevioletred;
  color: white;
}
div#stats tbody td.vocaloid-info div.big-al div.info-bar {
  background-color: crimson;
  color: white;
}
div#stats tbody td.vocaloid-info div.bruno div.info-bar {
  background-color: cornflowerblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.chika div.info-bar {
  background-color: pink;
  color: black;
}
div#stats tbody td.vocaloid-info div.clara div.info-bar {
  background-color: crimson;
  color: white;
}
div#stats tbody td.vocaloid-info div.cul div.info-bar {
  background-color: crimson;
  color: white;
}
div#stats tbody td.vocaloid-info div.cyber-diva div.info-bar {
  background-color: gold;
  color: black;
}
div#stats tbody td.vocaloid-info div.cyber-songman div.info-bar {
  background-color: mediumvioletred;
  color: white;
}
div#stats tbody td.vocaloid-info div.daina div.info-bar {
  background-color: sandybrown;
  color: black;
}
div#stats tbody td.vocaloid-info div.dex div.info-bar {
  background-color: gray;
  color: white;
}
div#stats tbody td.vocaloid-info div.fukase div.info-bar {
  background-color: red;
  color: white;
}
div#stats tbody td.vocaloid-info div.gachapoid div.info-bar {
  background-color: yellowgreen;
  color: black;
}
div#stats tbody td.vocaloid-info div.gackpoid div.info-bar {
  background-color: darkviolet;
  color: white;
}
div#stats tbody td.vocaloid-info div.galaco div.info-bar {
  background-color: mediumvioletred;
  color: white;
}
div#stats tbody td.vocaloid-info div.hatsune-miku div.info-bar {
  background-color: mediumturquoise;
  color: black;
}
div#stats tbody td.vocaloid-info div.hiyama-kiyoteru div.info-bar {
  background-color: lightslategray;
  color: white;
}
div#stats tbody td.vocaloid-info div.ia div.info-bar {
  background-color: peachpuff;
  color: black;
}
div#stats tbody td.vocaloid-info div.kaai-yuki div.info-bar {
  background-color: firebrick;
  color: white;
}
div#stats tbody td.vocaloid-info div.kagamine-rin-len div.info-bar {
  background-color: gold;
  color: black;
}
div#stats tbody td.vocaloid-info div.kaito div.info-bar {
  background-color: slateblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.kokone div.info-bar {
  background-color: peachpuff;
  color: black;
}
div#stats tbody td.vocaloid-info div.lily div.info-bar {
  background-color: yellow;
  color: black;
}
div#stats tbody td.vocaloid-info div.luo-tianyi div.info-bar {
  background-color: royalblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.macne-nana div.info-bar {
  background-color: greenyellow;
  color: black;
}
div#stats tbody td.vocaloid-info div.maika div.info-bar {
  background-color: hotpink;
  color: black;
}
div#stats tbody td.vocaloid-info div.mayu div.info-bar {
  background-color: deeppink;
  color: white;
}
div#stats tbody td.vocaloid-info div.matcha div.info-bar {
  background-color: olivedrab;
  color: white;
}
div#stats tbody td.vocaloid-info div.megpoid div.info-bar {
  background-color: limegreen;
  color: black;
}
div#stats tbody td.vocaloid-info div.megurine-luka div.info-bar {
  background-color: pink;
  color: black;
}
div#stats tbody td.vocaloid-info div.meiko div.info-bar {
  background-color: firebrick;
  color: white;
}
div#stats tbody td.vocaloid-info div.merli div.info-bar {
  background-color: darkviolet;
  color: white;
}
div#stats tbody td.vocaloid-info div.mew div.info-bar {
  background-color: gray;
  color: white;
}
div#stats tbody td.vocaloid-info div.mo-qingxian div.info-bar {
  background-color: #fcea6e;
  color: black;
}
div#stats tbody td.vocaloid-info div.nekomura-iroha div.info-bar {
  background-color: lightsalmon;
  color: black;
}
div#stats tbody td.vocaloid-info div.otomachi-una div.info-bar {
  background-color: slateblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.prima div.info-bar {
  background-color: mediumvioletred;
  color: white;
}
div#stats tbody td.vocaloid-info div.rana div.info-bar {
  background-color: pink;
  color: black;
}
div#stats tbody td.vocaloid-info div.sachiko div.info-bar {
  background-color: mediumvioletred;
  color: white;
}
div#stats tbody td.vocaloid-info div.seeu div.info-bar {
  background-color: orange;
  color: black;
}
div#stats tbody td.vocaloid-info div.sf-a2-miki div.info-bar {
  background-color: indianred;
  color: white;
}
div#stats tbody td.vocaloid-info div.sonika div.info-bar {
  background-color: mediumseagreen;
  color: white;
}
div#stats tbody td.vocaloid-info div.stardust div.info-bar {
  background-color: darkslateblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.sweet-ann div.info-bar {
  background-color: lemonchiffon;
  color: black;
}
div#stats tbody td.vocaloid-info div.tohoku-zunko div.info-bar {
  background-color: lightgreen;
  color: black;
}
div#stats tbody td.vocaloid-info div.tone-rion div.info-bar {
  background-color: hotpink;
  color: black;
}
div#stats tbody td.vocaloid-info div.tonio div.info-bar {
  background-color: darkkhaki;
  color: black;
}
div#stats tbody td.vocaloid-info div.uni div.info-bar {
  background-color: hotpink;
  color: black;
}
div#stats tbody td.vocaloid-info div.unity-chan div.info-bar {
  background-color: orange;
  color: black;
}
div#stats tbody td.vocaloid-info div.utatane-piko div.info-bar {
  background-color: mediumturquoise;
  color: black;
}
div#stats tbody td.vocaloid-info div.v-flower div.info-bar {
  background-color: mediumorchid;
  color: white;
}
div#stats tbody td.vocaloid-info div.vy1 div.info-bar {
  background-color: mistyrose;
  color: black;
}
div#stats tbody td.vocaloid-info div.vy2 div.info-bar {
  background-color: darkblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.xin-hua div.info-bar {
  background-color: hotpink;
  color: black;
}
div#stats tbody td.vocaloid-info div.yanhe div.info-bar {
  background-color: lightcoral;
  color: white;
}
div#stats tbody td.vocaloid-info div.yuezheng-ling div.info-bar {
  background-color: crimson;
  color: white;
}
div#stats tbody td.vocaloid-info div.yuezheng-longya div.info-bar {
  background-color: darkcyan;
  color: white;
}
div#stats tbody td.vocaloid-info div.yumemi-nemu div.info-bar {
  background-color: turquoise;
  color: black;
}
div#stats tbody td.vocaloid-info div.yuzuki-yukari div.info-bar {
  background-color: plum;
  color: black;
}
div#stats tbody td.vocaloid-info div.zhiyu-moke div.info-bar {
  background-color: gainsboro;
  color: black;
}
div#stats tbody td.vocaloid-info div.kyo div.info-bar {
  background-color: steelblue;
  color: white;
}
div#stats tbody td.vocaloid-info div.wil div.info-bar {
  background-color: gray;
  color: white;
}
div#stats tbody td.vocaloid-info div.yuu div.info-bar {
  background-color: pink;
  color: black;
}

/* Timeline */
div#stats div.timeline-year, div#stats div.timeline-month {
  vertical-align: top;
  display: inline-block;
  width: 15em;
}
div#stats div.timeline-year h2:first-child, div#stats div.timeline-month h2:first-child {
  margin-top: 0;
}
div#stats div.timeline-year h2, div#stats div.timeline-month h2 {
  color: white;
  padding-left: 0.2em;
  font-size: 1.2em;
}
div#stats div.timeline-year dl, div#stats div.timeline-month dl {
  margin-left: 0.2em;
}
div#stats div.timeline-year dl dd:last-of-type, div#stats div.timeline-month dl dd:last-of-type {
  margin-bottom: 30px;
}
div#stats div.timeline-year dt, div#stats div.timeline-year dd, div#stats div.timeline-month dt, div#stats div.timeline-month dd {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  line-height: 1.5em;
}
div#stats div.timeline-year dt, div#stats div.timeline-month dt {
  margin-top: 10px;
  font-weight: bold;
}
div#stats div.timeline-month {
  padding-right: 30px;
}
div#stats div.timeline-year {
  padding-right: 10px;
}
div#stats h2.month-order {
  background-color: brown;
}
div#stats h2.year-order {
  background-color: indigo;
}
@media screen and (max-device-width: 480px) {
  div#stats div.timeline-year, div#stats div.timeline-month {
    width: 20em;
  }
  div#stats div.timeline-year h2, div#stats div.timeline-month h2 {
    font-size: 1.8em;
  }
  div#stats div.timeline-year dt, div#stats div.timeline-year dd, div#stats div.timeline-month dt, div#stats div.timeline-month dd {
    font-size: 1.4em;
  }
}