@import syntax
@import code

$light-highlight = #f4f4f4
$med-highlight =  #2980b9
$dark-highlight = #2980b9

//
// Custom markdown code that shouldn't affect the rest of page.
//
.markdown
  color: #444
  font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
  font-size: 15px
  line-height: 1.7
  position: relative

  .icon
    color: $dark-highlight
    display: block
    margin-top: 24px

    s
      font-size: 48px

    h3
      display: inline-block

  a
    color: #4183C4
    text-decoration: none

    &:hover
      text-decoration: underline

  h1,
  h2,
  h3,
  h3,
  h4,
  h5,
  h6
    margin: 1em 0 15px
    padding: 0
    font-weight: bold
    line-height: 1.7
    cursor: text
    position: relative

  h1
    border-bottom: 1px solid #666
    font-size: 2.5em

  h2
    font-size: 2em
    border-bottom: 1px solid #EEE

  h3
    font-size: 1.5em

  h3[id]
    color: #444

  h4
    font-size: 1.2em

  h5
    font-size: 1em

  h6
    font-size: 1em
    color: #777

  ul,
  ol
    margin: 0
    padding: 0 0 0 30px

  p,
  ul,
  ol,
  dl,
  table,
  blockquote
    margin: 15px 0

  ul ul,
  ul ol,
  ol ol,
  ol ul
    margin-top: 0
    margin-bottom: 0

  code
  pre
  kbd
  samp
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace

  code
    background-color: #FAFAFA
    border-radius: 3px
    border: 1px solid #DDD
    display: inline-block
    line-height: 1.3
    margin: 0
    font-size: 12px
    max-width: 100%
    overflow: auto
    padding: 0
    vertical-align: middle

    &:before
    &:after
      content: "\00a0"  // Extra spacing

  table:not(.rendermetable)
    border-collapse: collapse
    border-spacing: 0

    tr
      background-color: #FFF
      border-top: 1px solid #CCC

      &:nth-child(2n)
        background-color: #F8F8F8

    td,
    th
      border: 1px solid #DDD
      padding: 6px 13px

  dl
    padding: 0

    dt
      font-size: 14px
      font-style: italic
      font-weight: bold
      margin-top: 15px
      padding: 0

    dd
      margin-bottom: 15px
      margin-left: 0
      padding: 0 15px

  blockquote
    border-left: 4px solid #DDD
    padding: 0 15px
    color: #777

    &>:last-child
      margin-bottom: 0px

    &>:first-child
      margin-top: 0px

  pre code
    width: 100%
    background: #FFF
    border-radius: 0
    padding: 12px
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;

    &:before
    &:after
      content: ''

  img
    max-width: 100%