@charset "utf-8";

section.tab {
  position: static; width: 100%; box-sizing: border-box; font-size: 0; background-color: #fff; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
section.tab::-webkit-scrollbar {
  display: none; background-color: transparent;
}
section.tab > div.wrap {
  text-align: center;
}
section.tab > div.wrap > a {
  display: inline-block; padding: 0 12px; height: 56px; line-height: 56px; box-sizing: border-box; border-bottom: 3px solid transparent;
}
section.tab > div.wrap > a > span.text {
  color: #292929; font-size: 14px;
}
section.tab > div.wrap > a.active > span.text {
  color: #0aafdf; font-weight: bold;
}

#container {
  margin: 0 auto 8px auto; font-size: 0;
}
@media only screen and (min-width: 720px) {
  #container {
    margin-bottom: 16px; width: 720px;
  }
}

#container > a.help {
  display: inline-block; padding: 16px 16px 16px 38px; line-height: 20px; color: #a6a6a6; font-size: 14px; background: transparent url('/images/help.png') no-repeat left 16px center; background-size: 14px 14px;
}
#container > a.help:hover {
  cursor: pointer;
}
#container > ul.help {
  display: none; margin: -8px 0 16px 38px;
}
#container > ul.help > li {
  list-style-type: disc; line-height: 18px; color: #737373; font-size: 12px;
}

#container > div.list > a.item {
  position: relative; display: block; margin-bottom: 1px; padding: 16px 0; background-color: #fff;
}
#container > div.list > a.item > figure {
  float: right; display: block; margin: 0 16px 0 8px; width: 60px; height: 60px; border-radius: 30px; background: #f9f9f9 url('/images/thumb.png') center center; background-size: cover;
}
#container > div.list > a.item > p.rank {
  position: absolute; display: inline-block; padding: 8px 0; width: 56px; text-align: center;
}
#container > div.list > a.item > p.rank > span.recent {
  display: block; line-height: 28px; color: #a6a6a6; font-size: 18px; font-style: italic;
}
#container > div.list > a.item > p.rank > span.recent.highlight {
  color: #0aafdf;
}
#container > div.list > a.item > p.rank > span.before {
  display: inline-block; height: 16px; line-height: 16px; font-size: 11px; letter-spacing: 0; background-repeat: no-repeat; background-position: left center; background-size: 12px 12px;
}
#container > div.list > a.item > p.rank > span.before.new {
  color: #ffa81f;
}
#container > div.list > a.item > p.rank > span.before.up {
  padding: 0 2px 0 12px; color: #ffa81f; background-image: url('/images/rank.up.png');
}
#container > div.list > a.item > p.rank > span.before.down {
  padding: 0 2px 0 12px; color: #a6a6a6; background-image: url('/images/rank.down.png');
}
#container > div.list > a.item > p.rank > span.before.equal {
  width: 12px; background-image: url('/images/rank.equal.png');
}
#container > div.list > a.item > h2 {
  margin: 0 0 2px 56px; line-height: 20px; color: #292929; font-size: 14px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#container > div.list > a.item > p.description {
  margin: 0 0 2px 56px; line-height: 18px; color: #a6a6a6; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#container > div.list > a.item > p.info {
  margin-left: 56px;
}
#container > div.list > a.item > p.info > span.vote {
  display: inline-block; padding-left: 15px; line-height: 18px; color: #ff5d57; font-size: 12px; letter-spacing: 0; background: transparent url('/images/vote.png') no-repeat left center; background-size: 11px 10px;
}
#container > div.list > div.empty {
  padding: 96px 0; text-align: center;
}
#container > div.list > div.empty > p {
  color: #a6a6a6; font-size: 18px;
}

#container > div.loading {
  margin: 96px auto; width: 36px; height: 36px; background: transparent url('/images/community.loading.svg') no-repeat; background-size: 36px 36px;
}