/* style for rendered html*/

@import base

.post-html
  // font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif
  // Base
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  word-spacing: -1px
  -webkit-font-smoothing: antialiased

  // Margins
  > *
    &:first-child
      margin-top: 0!important
    &:last-child
      margin-bottom: 0!important

  // Links
  a
    &.absent
      color: #c00
    &.anchor
      display: block
      padding-left: 30px
      margin-left: -30px
      cursor: pointer
      position: absolute
      top: 0
      left: 0
      bottom: 0

  // Headings
  h1, h2, h3, h4, h5, h6
    margin: 20px 0 10px
    padding: 0
    font-weight: normal
    cursor: text
    position: relative
  h1
    font-size: 28px
    color: #000
  h2
    font-size: 24px
    padding-bottom: 5px
    border-bottom: 1px solid #ccc
    color: #000
  h3
    font-size: 18px
  h4
    font-size: 16px
  h5
    font-size: 14px
  h6
    color: #555
    font-size: 14px

  // Heading Icons
  h1 .mini-icon-link, h2 .mini-icon-link, h3 .mini-icon-link, h4 .mini-icon-link, h5 .mini-icon-link, h6 .mini-icon-link
    display: none
    color: #000
  h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor
    text-decoration: none
    line-height: 1
    padding-left: 0
    margin-left: -22px
    top: 15%
  h1:hover .mini-icon-link, h2:hover .mini-icon-link, h3:hover .mini-icon-link, h4:hover .mini-icon-link, h5:hover .mini-icon-link, h6:hover .mini-icon-link
    display: inline-block

  // Paragraphs, text-indent: 20px
  p, blockquote, ul, ol, dl, table, pre
    margin: 15px 0
  // HR
  hr
    border: 0 none
    border-bottom: 1px solid #ccc
    color: #ccc
    height: 4px
    padding: 0

  // Margins
  >
    h2:first-child
      margin-top: 0
      padding-top: 0
    h1:first-child
      margin-top: 0
      padding-top: 0
      + h2
        margin-top: 0
        padding-top: 0
    h3:first-child, h4:first-child, h5:first-child, h6:first-child
      margin-top: 0
      padding-top: 0
  a:first-child
    h1, h2, h3, h4, h5, h6
      margin-top: 0
      padding-top: 0
  h1 p, h2 p, h3 p, h4 p, h5 p, h6 p
    margin-top: 0

  // Lists
  li p.first
    display: inline-block
  ul
    list-style: disc
    padding-left: 30px
  ol
    list-style: decimal
    padding-left: 30px

  ul.no-list, ol.no-list
    list-style-type: none
    padding: 0
  ul :first-child, ol :first-child
    margin-top: 0

  ul ul, ol ul
    list-style-type: circle

  // Definition Lists
  dl
    padding: 0
    dt
      font-size: 14px
      font-weight: bold
      font-style: italic
      padding: 0
      margin: 15px 0 5px
      &:first-child
        padding: 0
      >
        \:first-child
          margin-top: 0
        \:last-child
          margin-bottom: 0
    dd
      margin: 0 0 15px
      padding: 0 15px
      >
        \:first-child
          margin-top: 0
        \:last-child
          margin-bottom: 0

  // Blockquotes
  blockquote
    border-left: 4px solid #DDD
    padding: 0 15px
    color: #777
    background-color: #fff
    >
      \:first-child
        margin-top: 0
      \:last-child
        margin-bottom: 0

  // Tables
  table
    padding: 0
    tr
      border-top: 1px solid #ccc
      background-color: #fff
      margin: 0
      padding: 0
      &:nth-child(2n)
        background-color: #f8f8f8
      th
        font-weight: bold
        border: 1px solid #ccc
        text-align: left
        margin: 0
        padding: 6px 13px
      td
        border: 1px solid #ccc
        text-align: left
        margin: 0
        padding: 6px 13px
      th :first-child, td :first-child
        margin-top: 0
      th :last-child, td :last-child
        margin-bottom: 0

  // Images
  img
    max-width: 100%


  // Use Cases?
  span
    &.frame
      display: block
      overflow: hidden
      > span
        border: 1px solid #ddd
        display: block
        float: left
        overflow: hidden
        margin: 13px 0 0
        padding: 7px
        width: auto
      span
        img
          display: block
          float: left
        span
          clear: both
          color: #333
          display: block
          padding: 5px 0 0
    &.align-center
      display: block
      overflow: hidden
      clear: both
      > span
        display: block
        overflow: hidden
        margin: 13px auto 0
        text-align: center
      span img
        margin: 0 auto
        text-align: center
    &.align-right
      display: block
      overflow: hidden
      clear: both
      > span
        display: block
        overflow: hidden
        margin: 13px 0 0
        text-align: right
      span img
        margin: 0
        text-align: right
    &.float-left
      display: block
      margin-right: 13px
      overflow: hidden
      float: left
      span
        margin: 13px 0 0
    &.float-right
      display: block
      margin-left: 13px
      overflow: hidden
      float: right
      > span
        display: block
        overflow: hidden
        margin: 13px auto 0
        text-align: right

  // Code & Pre
  h1, h2, h3, h4, h5, h6
    tt, code
      font-size: inherit
  code, tt
    margin: 0 2px
    padding: 0 5px
    white-space: normal
    word-wrap: break-word
    border: 1px solid #eaeaea
    background-color: #f8f8f8
    border-radius: 3px
    font-size: 14px
  pre code
    margin: 0
    padding: 0
    white-space: pre
    border: none
    background: transparent
  .highlight pre
    background-color: #eee
    font-size: 15px
    line-height: 19px
    overflow: auto
    padding: 6px 10px
  pre
    background-color: #eee
    overflow: auto
    padding: 6px 10px
    font: 15px/19px 'Consolas', 'Menlo', 'Deja Vu Sans Mono', 'Bitstream VeraSans Mono', monospace
    code, tt
      background-color: transparent
      border: none

  /* images margin to center*/
  p img
    width: 600px
    margin: 25px auto
    display: block

@import "pygments.css"
