@import '~tippy.js/dist/tippy.css'

*
  box-sizing: border-box
html, body
  background: #fff
  padding: 0
  margin: 0
  height: 100%
  width: 100%
  font-family: arial

a
  text-decoration: none

em
  display: block
  clear: both

#draw
  position: fixed
  z-index: -1
  left: -9999px
  top: -9999px

strong.r
  color: rgb(255,0,0)

strong.h
  background: rgb(255,255,0)

main
  padding-left: 200px
  padding-top: 92px
  padding-bottom: 31px
  height: 100%

main.ppreview 
  padding: 0
  padding-top: 51px
  background: rgb(248,248,248)
  article
    height: auto
  header
    padding: 0

.publisher_preview
  width: 880px
  border-radius: 4px
  border: solid 1px rgb(210,210,210)
  background: #fff
  padding: 24px 77px
  margin: 0px auto
  margin-top: 24px
  box-shadow: 1px 1px 0px #c2c2c2

.pane
  height: 100%
  padding: 24px
  overflow: auto

article
  height: 100%
  &.split
    .panes
      .pane
        float: left
        width: 50%
      textarea.editor
        border-right: solid 1px rgb(200,200,200)
    section.sub
      div
        float: left
        width: 50%
        &:first-child
          border-right: solid 1px rgb(200,200,200)

.container
  height: 100%
  width: 100%

.panes
  height: 100%

textarea.editor
  font-size: 14px
  border: none
  resize: none
  outline: none
  width: 100%
  font-family: Menlo, Verdana
  &.line_wrap
    white-space: nowrap

header 
  width: 100%
  padding-left: 200px
  position: fixed
  z-index: 100
  left: 0
  top: 0
  section.main 
    background: rgb(245,245,245)
    border-bottom: solid 1px rgb(220,220,220)
    .title
      float: left
    .btn
      margin-top: 10px
      margin-right: 8px
  section.sub 
    background: rgb(245,245,245)
    border-bottom: solid 1px rgb(200,200,200)
    div
      padding: 8px 16px
  section
    top: 0
    left: 0
    .lbl
      font-size: 16px
      font-weight: 600
      padding-top: 4px
      display: inline-block
    .title
      padding: 16px
      outline: none
      font-weight: 600

.nav_heading
  background: #131415
  border-bottom: solid 1px rgba(255,255,255,0.05)
  padding: 8px 16px
  z-index: 201
  position: fixed
  width: 200px
  top: 0
  left: 0
  .btn
    background: rgb(23,24,31)
    color: rgba(255,255,255,0.3)
    border: solid 1px rgba(255,255,255,0.05)
    &:hover
      color: #fff
      border: solid 1px rgba(255,255,255,0.4)
    &.new
      float: left
      margin-left: 0

nav
  background: rgb(23,24,31)
  width: 200px
  height: 100%
  position: fixed
  top: 0
  left: 0
  overflow: auto
  padding-top: 51px
  z-index: 200
  a
    span.n
      white-space: nowrap
      overflow: hidden
      padding: 6px 16px
      display: inline-block
      max-width: 200px
    color: rgb(169,169,169)
    width: 100%
    font-size: 12px
    display: block
    &.active
      background: rgb(51,55,70)
    &:hover
      color: #fff
  .title 
    font-size: 10px
    text-transform: uppercase
    color: rgba(255,255,255,0.3)
    font-weight: 600
    padding: 8px 16px
    padding-top: 24px
    .n
      float: left
    .far
      float: right
      color: rgba(255,255,255,0.3)
      cursor: pointer
      &:hover
        color: #fff

  .icon
    margin-right: 4px
  a.asset
    span.n
      padding: 6px 16px
    position: relative
    &:hover .img
      display: block
    .img
      display: none
      background-size: contain
      position: absolute
      top: 0
      z-index: 500
      border: solid 1px rgba(51,55,70,0.5)
      border-left: none
      background: #fff
      background-repeat: no-repeat
    .size
      background: rgba(51,55,70,0.7)
      font-size: 12px
      padding: 4px
      position: absolute
      top: 0
      left: 0
    img
      max-width: 200px

.markdown
  h1, h2, h3, h4, h5, h6
    margin: 0px
    margin-bottom: 12px
  h1
    font-size: 32px
  h2
    font-size: 24px
  h3
    font-size: 20px
  h4
    font-size: 16px

  p
    margin-top: 0px

  img
    margin: 0
    display: block
    border: solid 1px rgb(255,255,255)
  code
    background: #d6dbe6
    border-radius: 4px
    font-family: Menlo, Verdana
    padding: 1px 4px
    font-size: 14px
  pre code
    padding: 16px
    overflow: auto
    display: block
  blockquote
    margin-left: 0
    border-left: solid 8px #ffb885
    p
      margin-left: 24px
  table
    border-collapse: collapse
    margin-bottom: 16px
    th, td
      border: solid 1px rgb(200,200,200)
      padding: 8px

.b
  font-weight: 600

.infobar
  text-align: right
  background: rgb(245,245,245)
  border-top: solid 1px rgb(220,220,220)
  width: 100%
  padding: 8px
  padding-left: 216px
  position: fixed
  z-index: 100
  left: 0
  bottom: 0
  font-size: 12px
  font-weight: 500
  color: rgb(100,100,100)

.btn
  margin-left: 4px
  float: right
  border-radius: 4px
  background: rgb(250,250,250)
  border: solid 1px rgb(220,220,220)
  border-bottom: solid 1px rgb(180,180,180)
  padding: 3px 12px
  cursor: pointer
  &.bold
    font-weight: 600
  &.red
    color: rgb(255,0,0)
  &.underline
    text-decoration: underline
  &.highlight
    background: rgb(255,255,0)
  &:hover
    border: solid 1px rgb(120,120,120)

.preview
  img
    &:hover
      border: dashed 1px rgb(180,180,180)
    &.selected
      border: dashed 1px rgba(0,0,255,0.8)

