*
  margin 0
  padding 0

body, html
  color #2e2f30
  letter-spacing 0.5px
  font-family 'Source Sans Pro', 'Playfair Display', PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, Arial, sans-serif
  height 100%
  width 100%
  background-color #fff

#__nuxt, .content
  width 100%
  height 100%
  max-width 1040px
  margin 0 auto
  position relative
  box-sizing border-box

a, a:visited
  color #333333

a:focus, a:hover
  color #cd0216

a, a:focus, a:hover, a:visited
  text-decoration none

/* Opera Fix */
body:before
  content ''
  height 100%
  float left
  width 0
  margin-top -32767px

footer
  text-align center
  position relative
  margin-top -35px
  height 35px
  clear both
  font-size 9px
  margin-bottom 5px

  .footer
    padding-top 10px

.page-enter-active, .page-leave-active
  transition opacity 0.5s

.page-enter, .page-leave-active
  opacity 0

.container
  min-height 100%
  margin 0 auto

.articelAbstractContent p, .articelAbstractContent h1, .articelAbstractContent h2, .articelAbstractContent h3, .articelAbstractContent h4, .articelAbstractContent h5, .articelAbstractContent h6, .articelContent p, .articelContent h1, .articelContent h2, .articelContent h3, .articelContent h4, .articelContent h5, .articelContent h6
  margin-top 1em

.articelAbstractContent, .articelContent
  word-wrap break-word

  img
    max-width 100%
    display block
    vertical-align middle
    margin auto
    width auto
    height auto

  ul, ol
    margin-left 60px

// 点击滑动到顶部那个按钮的样式
.scroll-top
  transition all 0.4s ease-in-out
  width 25px
  height 25px
  line-height 25px
  text-align center
  opacity 0.6
  background-color #000000
  color #ffffff
  position fixed
  right 8px
  bottom 8px
  z-index 999
  padding 4px

  i
    color #fff

.articleImgs
  overflow hidden

  position relative
    img
      width 100%
      cursor pointer

.Info
  background-color #fff
  box-shadow 0 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.1)
  margin-bottom 50px
  text-align center
  padding 40px
  font-size responsive
  font-weight 300

.btn-footer
  margin-top 50px
  font-size 12px
  color #333
  float left

  i
    margin 10px

.btn-next
  float right

.btn-disable
  color #dfdede !important
  user-select none
  cursor not-allowed

footer .footer
  color #a2a2a2
  text-align left
  line-height 1.5
  margin 20px 0

.page-container
  width 100%
  height 100%

.page-container::after
  content ' '
  display block
  height 0
  visibility hidden
  clear both

#LeftMenu
  overflow-y auto
  overflow-x hidden
  display block
  background-color #fff
  height 100%
  width 295px
  float left
  box-shadow 8px 0px 11px 0px #fff

#rightContent
  margin-left 300px
  padding 0 50px
  height 100%

.header
  display none

.articleList
  border-bottom 1px solid #F0F0F0
  margin-bottom 30px

::-webkit-input-placeholder
  font-weight 300

::-moz-placeholder /* firefox 19+ */
  font-weight 300

/* firefox 19+ */
:-ms-input-placeholder /* ie */
  font-weight 300

/* ie */
input:-moz-placeholder
  font-weight 300

#leftcontent
  color #777777
  opacity 1
  height 100%
  padding 0 40px
  box-sizing border-box
  width 295px
  visibility visible
  -webkit-transition opacity 0.24s ease-in-out
  -moz-transition opacity 0.24s ease-in-out
  transition opacity 0.24s ease-in-out

#wrap
  min-height 100%

#leftMain
  overflow auto

  .title
    text-align center
    font-weight 300
    color #000000
    margin-top 40px

  .widget
    margin-bottom 10px

    .links
      margin-bottom 20px

  .widgetTitle
    font-size 18px
    line-height 100%
    text-align center
    padding 10px 0 6px 0
    margin 0 0 30px 0
    position relative
    border 0
    outline 0
    vertical-align baseline
    box-sizing border-box

    label
      color #333333
      font-weight 300
      background-color #fff
      display inline-block
      padding 5px 10px
      position relative
      z-index 1
      margin 0
      font-size 100%
      font-family inherit
      vertical-align baseline
      box-sizing border-box

  .widgetTitle:after
    height 1px
    content ''
    margin-top 2px
    border-top 1px solid #aaa
    position absolute
    top 50%
    left 0
    right 0
    border-top 1px solid #aaaaaa

  .avatar
    margin-bottom 40px

    > img
      width 100%

    .aboutMe
      font-size 9px
      line-height 1.5
      margin-top 10px

    .social
      margin 15px 5px
      height 20px
      font-size 12px
      font-weight 300

      .social-info-box
        border 1px solid #d0d0d0
        width 100%
        height 30px
        line-height 30px
        text-align center
        font-size 14px
        margin-bottom 20px

      ul
        height 30px
        list-style none

        > li:first-child
          font-size 14px
          margin-top -1px
          margin-left 0

        > li
          a
            color #948d8d

          a:hover
            color #cd0216

          color #948d8d
          float left
          height 30px
          margin-left 11px
          cursor pointer

        > li:hover
          color #cd0216

  .navication
    margin-bottom 40px
    font-size 15px
    font-weight 300
    top 25px
    width 215px

    ul
      margin-left 20px
      list-style circle

      > li
        margin-left 11px
        line-height 1.8

  .search-box
    border 1px solid #cccccc
    margin-top 30px
    padding 8px
    position relative
    color #cccccc

    .search
      border none
      border-right solid 1px #ccc
      width 160px

    .fa-search
      position absolute
      top 11px
      right 13px
      cursor pointer

    .fa-search:hover
      color #cd0216

  .comment
    font-size 12px
    font-weight 300
    margin-bottom 40px
    overflow hidden

    ul > li
      width 100%
      line-height 140%
      margin-bottom 15px
      padding-bottom 15px
      border-bottom 1px solid #f0f0f0

    ul > li:last-child
      margin-bottom 0
      padding-bottom 0
      border-bottom none

    .meta
      margin-top 10px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis

  .posts
    margin-bottom 40px

    ul > li
      width 100%
      line-height 140%
      margin-bottom 15px
      padding-bottom 15px
      border-bottom 1px solid #f0f0f0

    ul > li:last-child
      margin-bottom 0
      padding-bottom 0
      border-bottom none

    .thumbnail
      width 60px
      float left
      padding-top 3px

      > img
        max-width 100%
        height auto

    .detail
      margin-left 70px
      font-weight 300
      font-size 12px

  .tags
    margin-bottom 500px

    .tagcloud
      width 100%

      a
        display inline-block
        font-size 12px !important
        font-weight 400
        line-height 1
        text-transform uppercase
        margin 0 5px 10px 0
        padding 5px
        border 1px solid #c0c0c0
        color #666666

        &:hover
          color #00897b

// 文章列表
.pageList
  .articleList
    background-color #fff
    margin-top 30px

    .articleImgs
      width 100%

      img
        width 100%

    .articleAbstract
      padding 50px 10px

      pre
        text-align 0.16rem
        overflow-x auto
        line-height 1

        code
          padding 16px

      code
        color #24292e
        background-color rgba(27, 31, 35, 0.05)
        border-radius 3px
        font-size 85%
        padding 2px 5px

      .articleTitle
        text-align center
        font-size 24px

      .articalMeta
        text-align center
        padding 20px 0
        font-size 12px
        color #a1887f

        ul
          list-style none
          padding-right 20px

          > li
            display inline-block
            margin-left 20px
            line-height 2

            > i
              margin-right 8px

            > span a
              color #a1887f
              margin-left 10px

            a span
              color #a1887f

            > span a:first-child
              margin-left 0

          > li :first-child
            margin-left 0

      .articelAbstractContent
        margin-top 20px
        line-height 2
        font-weight 300
        font-size responsive

      .readMore
        text-align center
        margin 50px auto 20px auto

        .readMoreBtn
          padding 10px
          border 1px solid #795548
          color #795548

          &:hover
            color #cd0216
            border 1px solid #cd0216

.mobileToc
  transition all 0.4s ease-in-out
  width 25px
  height 25px
  line-height 25px
  text-align center
  font-size 9px
  opacity 0.6
  background-color #000000
  color #ffffff
  position fixed
  right 8px
  bottom 42px
  z-index 999
  padding 4px

@media (max-width 768px)
  .header
    position fixed
    z-index 999999
    width 100%
    display block
    box-sizing border-box
    top 0
    height 70px
    background-color #fff
    padding 5px 20px

    .title
      text-align right
      color #505153
      font-weight 300
      line-height 60px
      font-size 35px
      margin 0

    .svg
      display block
      float left
      line-height 60px
      padding-top 6px
      cursor pointer

  #LeftMenu
    display none

  #rightContent
    margin-left 0
    padding 0 20px

  .pageList
    .articleList
      margin-top 50px

      .articleAbstract
        padding 20px

blockquote
  margin-top 10px
  margin-bottom 10px
  padding-left 10px
  padding-right 10px
  border-left 3px solid #ccc
  background-color #f1f1f1

.articelContent
  a
    color #de8787