body {
  margin: 0 auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f6f6f6;
  font-family: 'Microsoft Jhenghei', 'Microsoft YaHei', Helvetica Neue, Helvetica, sans-serif;
  line-height: 1.8em;
  word-wrap: break-word;
  color: #333; }

  a {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    color: #333; }
    a:hover {
      text-shadow: 0 0 4px #999; }

figure {
  margin: 1em 0;
  text-align: center; }
  figure figcaption {
    font-size: 0.8em;
    color: #aaa; }

del {
  opacity: 0.3; }

  ul ul, ul ol, ol ol, ol ul {
    padding: 0 0 0 1em !important; }

    .footnotes ol p, ul p, ol p, pre p {
      margin: 0 !important;
      padding: 0 !important; }

      .labeltitle {
        font-size: 0.9em;
        color: #aaa;
        margin-bottom: 5px; }

        .eof {
          text-align: center;
          font-size: 2em;
          line-height: 1em;
          margin-bottom: 50px;
          font-weight: 100;
          color: #eee; }
          .eof:before {
            content: '——';
            margin-right: 25px; }
            .eof:after {
              content: '——';
              margin-left: 10px; }

aside {
  width: 32%;
  position: fixed;
  top: 0;
  bottom: 0;
  text-align: center; }

  main {
    width: 68%;
    background: rgba(255, 255, 255, 0.8);
    float: right;
    border-left: 1px solid #eee;
    padding: 5em;
    box-sizing: border-box; }

    footer {
      width: 68%;
      float: right;
      text-align: center;
      background: #eee;
      border-left: 1px solid #eee;
      box-sizing: border-box;
      font-size: 0.8em;
      color: #aaa;
      padding: 11px;
      height: 50px; }
      footer a {
        color: #aaa; }

aside header {
  margin-top: 4.3em; }
  aside header a img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 0px solid #fff;
    background: #fff;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%); }
    aside header a img:hover {
      -moz-box-shadow: 0 0 10px #999;
      -webkit-box-shadow: 0 0 10px #999;
      box-shadow: 0 0 10px #999;
      -webkit-filter: grayscale(0);
      filter: grayscale(0); }
  aside header h1 {
    font-size: 3em;
    margin: 60px auto 50px;
    text-shadow: 0 0 2px #bbb;
    line-height: 1em; }
    aside header h1 a:hover {
      text-shadow: 0 0 10px #999; }

aside nav {
  font-family: Cambria, 'STZhongsong', '华文中宋', 'Microsoft Yahei', serif; }
  aside nav ul {
    padding: 0 !important;
    list-style: none; }
    aside nav ul li a {
      display: block;
      font-weight: bold;
      font-size: 1.4em;
      padding: 8.5px;
      margin: 0 2em;
      letter-spacing: 0.8em;
      text-indent: 0.8em;
      text-shadow: 0 0 3px #999; }
      aside nav ul li a:hover, aside nav ul li a.active {
        background: url(../template/img/hover.png) no-repeat center;
        color: #000;
        text-shadow: 0 0 2px #333; }

aside .my_socials {
  position: fixed;
  width: 32%;
  bottom: 90px;
  left: 0; }
  aside .my_socials a {
    padding: 5px; }

aside #search_bar input#search_posts_keywords {
  border: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  outline: none;
  padding: 15px 10px;
  width: 32%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #eee;
  text-align: center;
  font-size: 16px;
  height: 50px;
  -webkit-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
  aside #search_bar input#search_posts_keywords:hover {
    background: rgba(255, 255, 255, 0.8); }

.switch {
  display: none; }

  article header {
    border-top: 1px dotted #ddd; }
    article header h2 {
      font-size: 2em;
      font-weight: normal;
      margin: 10px 0 3px;
      line-height: 1.4em; }
      article header h2 a {
        border-left: 3px solid #e9302a;
        padding: 0 18px 1px 15px;
        display: block;
        background-image: linear-gradient(to right, #e9302a, #e9302a 50%, transparent 50%, transparent);
        background-position: 100% 0;
        background-size: 200% 100%; }
        article header h2 a:hover {
          background-position: 0 0;
          color: #fff;
          text-shadow: none; }
    article header h2.post {
      border-left: 3px solid #e9302a;
      padding: 0 18px 1px 15px; }
  article .info {
    font-size: 0.9em;
    color: #aaa;
    margin: 0 0 8px 20px; }
    article .info span {
      border-left: 1px dotted #ddd;
      padding: 0 4px 0 8px; }
      article .info time {
        padding-right: 3px; }
        article .info a {
          color: #aaa; }
          article .info a:hover {
            color: #333; }

.paginator_container {
  display: -webkit-flex;
  display: flex;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  padding: 10px 0;
  margin-bottom: 20px; }
  .paginator_container a {
    padding: 10px 5px;
    color: #e9302a;
    -webkit-flex-grow: 1;
    flex-grow: 1; }
    .paginator_container a:hover {
      background: #e9302a;
      color: #fff;
      text-shadow: none; }
  .paginator_container a.next, .paginator_container span.next {
    text-align: right; }
    .paginator_container span {
      -webkit-flex-grow: 1;
      flex-grow: 1;
      padding: 10px 5px;
      color: #aaa; }

.markdown {
  margin-bottom: 50px;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word; }

  .markdown a {
    color: #e9302a;
    padding: 2px; }
    .markdown a:hover {
      text-shadow: none;
      background: #e9302a;
      color: #fff;
      text-decoration: none; }

.markdown .toc {
  background: transparent;
  border-radius: 0;
  border: 1px dotted #ddd;
  margin: 30px 0;
  padding: 0; }
  .markdown .toc ul {
    list-style: circle;
    color: #aaa; }
    .markdown .toc ul li a {
      color: #aaa; }
      .markdown .toc ul li a:hover {
        color: #fff; }

.markdown pre, .markdown code {
  border: 1px dotted #ddd;
  border-radius: 0;
  background: rgba(246, 246, 246, 0.9);
  font-size: 0.9em; }

  .markdown code {
    padding: 2px 4px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px; }

    .markdown hr {
      border-top: 1px dotted #ddd; }

      .markdown img {
        border: 1px dotted #ddd;
        box-sizing: border-box; }

        .markdown table {
          border-style: dotted;
          border-color: #ddd;
          word-break: break-all; }

          .markdown .todo_done_item {
            color: #aaa; }

            .markdown .todo_undone_item {
              color: inherit; }

              .markdown h2 {
                border-bottom: 1px dotted #ddd;
                padding-bottom: 10px; }

                .markdown blockquote {
                  border-left: 0.4em solid #eee;
                  color: #aaa; }

                  .doc_comments {
                    padding: 0 !important; }
                    .doc_comments .comments_block_title {
                      display: none; }

.doc_comments #new_comment_form {
  border: 1px dotted #ddd !important;
  background: inherit !important;
  margin: 30px 0 !important; }
  .doc_comments #new_comment_form .input_body {
    background: #f6f6f6 !important; }
    .doc_comments #new_comment_form .input_body ul {
      overflow: auto;
      margin-top: -4px !important; }
      .doc_comments #new_comment_form .input_body ul li input {
        padding-left: 0 !important; }
    .doc_comments #new_comment_form .input_body .comment_submit_button {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      border-radius: 0; }
      .doc_comments #new_comment_form .input_body .comment_submit_button:hover {
        cursor: pointer; }
    .doc_comments #new_comment_form .input_body input {
      -webkit-appearance: none;
      -moz-appearance: none; }

.doc_comments .comments .comment {
  background: inherit !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important; }
  .doc_comments .comments .comment .author {
    padding-bottom: 0 !important; }
    .doc_comments .comments .comment .author b {
      background: none !important; }
  .doc_comments .comments .comment .author .reply {
    color: #fff !important;
    background: #ccc;
    padding: 2px 5px; }
    .doc_comments .comments .comment .author .reply:hover {
      opacity: 0.5; }
  .doc_comments .comments .comment .author-date small {
    font-size: 0.7em;
    color: #aaa; }
    .doc_comments .comments .comment .p_part,
    .doc_comments .comments .comment .sub_comments {
      padding-left: 48px !important; }
      .doc_comments .comments .comment .comment_wrapper {
        border-top: 1px dotted #ddd;
        padding-top: 1em; }
        .doc_comments .comments .comment .sub_comments .sub_comments .sub_comments {
          padding-left: 0 !important; }

.four {
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  padding-bottom: 28px; }
  .four h2 {
    font-size: 2em;
    font-weight: normal;
    border-left: 3px solid #e9302a;
    padding: 0 0 1px 15px;
    line-height: 1.4em;
    margin: 30px 0 10px; }
    .four a {
      font-size: 0.9em;
      color: #aaa; }
      .four a:hover {
        color: #333; }

section.archive h2 {
  font-size: 2em;
  text-align: center; }
  section.archive h2 span {
    font-size: 0.5em;
    color: #aaa;
    font-weight: normal; }
section.archive ul {
  list-style: none;
  padding: 0;
  margin: 0; }
  section.archive ul li {
    line-height: 1.6em;
    border-top: 1px dotted #ddd;
    padding: 20px 0; }
    section.archive ul li a {
      border-left: 3px solid #e9302a;
      padding: 0 50px 1px 15px;
      display: block;
      background-image: linear-gradient(to right, #e9302a, #e9302a 50%, transparent 50%, transparent);
      background-position: 100% 0;
      background-size: 200% 100%;
      font-size: 1.5em;
      line-height: 1.6em;
      position: relative;
      z-index: 1; }
      section.archive ul li a:hover {
        background-position: 0 0;
        color: #fff;
        text-shadow: none; }
    section.archive ul li time {
      float: right;
      font-size: 0.9em;
      color: #aaa;
      margin-top: -33px; }

section.categories h2 {
  font-size: 2em;
  text-align: center;
  border-bottom: 1px dotted #ddd;
  padding-bottom: 25px; }
  section.categories h2 span {
    font-size: 0.5em;
    color: #aaa;
    font-weight: normal;
    margin-left: 10px; }
section.categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
  section.categories ul li {
    font-size: 1.5em;
    margin: 0 0.5em 1em;
    -webkit-flex-grow: 1;
    flex-grow: 1; }
    section.categories ul li a {
      background: #fff;
      border: 1px dotted #ddd;
      display: block;
      padding: 3em 2em;
      color: #e9302a; }
      section.categories ul li a:hover {
        border: 1px solid #ddd;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        color: #333; }
        section.categories ul li a span {
          display: block;
          font-size: 0.6em;
          color: #aaa;
          border-top: 1px dotted #ddd;
          padding-top: 5px;
          margin-top: 10px; }

section.tags h2 {
  font-size: 2em;
  text-align: center;
  border-bottom: 1px dotted #ddd;
  padding-bottom: 25px; }
  section.tags h2 span {
    font-size: 0.5em;
    color: #aaa;
    font-weight: normal;
    margin-left: 10px; }
section.tags ul {
  list-style: none;
  padding: 0;
  margin: 0; }
  section.tags ul li {
    display: inline-block;
    margin-right: 10px; }
    section.tags ul li a {
      color: #e9302a; }
      section.tags ul li a:hover {
        color: #333; }
    section.tags ul li span {
      font-size: 0.9em;
      color: #aaa;
      margin-left: 5px; }

.overlay .closebtn {
  display: none; }

  @media only screen and (max-width : 736px) {
    body {
      background-position: -200px -100px;   }
      aside {
        width: 100%;   }
        aside .my_socials {
          position: static;
          width: 100%;
          font-size: 20px;
          margin-top: 24px;   }
          aside #search_bar input#search_posts_keywords {
            position: static;
            width: 100%;
            margin-top: 2em;
            background: #f6f6f6;   }
            aside header .logo img {
              display: none;   }
              aside header h1 {
                margin-top: 90px;   }
    .switch {
      display: block;   }
      .switch .menu {
        display: block;
        float: right;
        margin: 22px 20px 18px;
        width: 50px;
        height: 50px;
        background: url(../template/img/menu.png) no-repeat center;
        background-size: 45px;   }
        .switch .menu span {
          display: none;   }
      .switch a img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        border: 5px solid #fff;
        background: #fff;
        -moz-box-shadow: 0 0 10px #999;
        -webkit-box-shadow: 0 0 10px #999;
        box-shadow: 0 0 10px #999;
        margin: 17px 17px 8px;
        -webkit-filter: grayscale(50%);
        filter: grayscale(50%);   }
    main {
      width: 100%;
      padding: 27px;
      border: none;
      border-top: 1px solid #eee;   }
      footer {
        width: 100%;   }
        article header h2 {
          font-size: 1.5em;
          margin: 20px 0 4px;   }
          article .info {
            margin-bottom: 15px;   }
    .four h2 {
      font-size: 1.5em;
      line-height: 1.1em;
      margin: 20px 0 4px;   }
      section.categories ul li {
        font-size: 1.2em;
        margin: 0 5px 10px;   }
        section.categories ul li a {
          padding: 1em;   }
          section.categories ul li a span {
            padding-top: 0;
            margin-top: 5px;
            font-size: 0.7em;   }
    section.archive ul li {
      padding: 15px 0;   }
      section.archive ul li a {
        font-size: 1.2em;   }
        section.archive ul li time {
          margin-top: -28px;   }
    .overlay {
      height: 0;
      width: 100%;
      position: fixed;
      z-index: 2;
      left: 0;
      top: 0;
      background-color: rgba(255, 255, 255, 0.9);
      overflow-x: hidden;
      -webkit-transition: 0.5s;
      -ms-transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;   }
      .overlay-content {
        position: relative;
        width: 100%;   }
        .overlay .closebtn {
          display: block;
          position: absolute;
          top: 30px;
          right: 28px;
          font-size: 60px;   }
}

.donate {
  text-align: center;
  margin: 0 auto;
  text-align: center; }