/* Faded out hr */
hr.soften {
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  border: 0; }

body {
  background-color: #f5f5f5;
  color: #777;
  font-family: Lato, 'Helvetica Neue', "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; }

header {
  margin-top: 1em;
  margin-bottom: 2em;
  min-height: 2em; }

footer {
  margin-top: 3em; }

#recaptcha-container {
  display: flex;
  align-items: center;
  justify-content: center; }

.site-tab {
  margin-top: 3em;
  margin-bottom: 2em; }
  .site-tab .ui.menu {
    background-color: #F5F4F0; }

.tab li {
  margin-bottom: 1em; }

.in-tab-section {
  margin-top: 1.5em; }
  .in-tab-section > .header {
    margin-bottom: 2em; }

a {
  color: rgba(147, 34, 16, 0.67); }
  a:hover {
    color: #882A1B; }

.ui.horizontal.link.list a.item,
.ui.horizontal.link.list a.item i {
  color: rgba(0, 0, 0, 0.4); }

.ui.card > .extra a:not(.ui):hover, .ui.cards > .card > .extra a:not(.ui):hover {
  color: #882A1B; }

.ui.card > .content > a.header:hover, .ui.cards > .card > .content > a.header:hover {
  color: #882A1B; }

.in-tab-section {
  margin-top: 1.5em; }
  .in-tab-section > .header {
    margin-bottom: 1.5em; }

.section {
  padding-top: 5em; }
  .section > .header {
    margin-bottom: 2em; }

.hero {
  padding-bottom: 3em; }
  @media only screen and (min-width: 768px) {
    .hero .description {
      position: absolute;
      left: 4em;
      bottom: 4em; }
      .hero .description .hello {
        margin-bottom: 2em; } }
.canvas {
  background-color: #F5F4F0 !important; }

.stamp {
  position: absolute;
  right: 1em;
  bottom: 1em; }

.more-details {
  text-decoration: underline; }

.code-gu {
  color: #882A1B;
  background-color: rgba(216, 187, 148, 0.47); }

.small.logo {
  max-height: 28px; }

.large.logo {
  max-height: 36px; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.center-text {
  text-align: center; }

.notification {
  margin-bottom: 2em; }

.small {
  font-size: 0.85em; }
  .small i.icon {
    font-size: 0.85em; }

.hidden.icon {
  color: #f5f5f5 !important; }

i.china-red-light.icon {
  color: rgba(147, 34, 16, 0.67) !important; }
  i.china-red-light.icon:hover {
    z-index: 5;
    -webkit-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px); }

img.with-border {
  margin: 1.5em auto !important;
  max-width: 100%;
  height: auto;
  display: block;
  border: 10px solid white;
  box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); }

.post-content {
  /* Dotted hr */ }
  .post-content img {
    margin: 1.5em auto !important;
    max-width: 100%;
    height: auto;
    display: block;
    border: 10px solid white;
    box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); }
  .post-content figcaption {
    text-align: center;
    font-size: 0.85em; }
  .post-content hr {
    margin: 2em 0;
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999; }
  .post-content pre {
    padding: 1em; }
  .post-content :not(pre) > code {
    color: #882A1B;
    background-color: rgba(216, 187, 148, 0.47);
    padding-left: 5px;
    padding-right: 5px; }

.category-intro {
  margin-top: 3em; }

.comments {
  margin-top: 3em; }

blockquote {
  box-sizing: border-box;
  margin: 1.75em 0 1.75em 0em;
  padding: 0 0 0 0.75em;
  border-left: #4A4A4A 0.2em solid;
  font-style: italic; }
  blockquote.alt {
    border-left: #f2711c 0.2em solid; }

.quote-container {
  padding: 6em 0 6em 0 !important;
  transition: all 0.3s ease; }
  .quote-container.loading {
    transform: scale(0.1); }
  .quote-container .quote-text {
    quotes: "" " " "" "'" "'"; }
    .quote-container .quote-text:before {
      content: open-quote; }
    .quote-container .quote-text:after {
      content: close-quote; }

/* ann */
.ann .page-header-container {
  margin-bottom: 3em; }

.ann .vote-header {
  color: white;
  position: absolute;
  top: 18%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -20%); }
  @media only screen and (max-width: 768px) {
    .ann .vote-header {
      top: 12%; } }