$color-bg ?= #ffffff
$color-text ?= #34495e
$color-border ?= #ededed

$sidebar-width ?= 300px

@import "util.styl"

html
body
  height 100%
  background-color $color-bg
body
  -moz-osx-font-smoothing grayscale
  -webkit-font-smoothing antialiased
  color $color-text
  font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
  font-size 15px
  letter-spacing 0
  margin 0
  overflow-x hidden

.d-sidebar
  position fixed
  top 0
  left 0
  bottom 0
  width $sidebar-width
  overflow-y auto
  border-right 1px solid $color-border

.d-sidebar__nav
  line-height 2em

.d-sidebar__nav ul
  margin 0
  padding 0

.d-sidebar__nav ul
.d-sidebar__nav ul li
  list-style none

.d-sidebar__nav li
  margin 6px 0 6px 15px

.d-sidebar__nav ul li a
  font-size 14px
  font-weight 400
  text-decoration none
  ellipsis()

  &:hover
    text-decoration underline

.d-sidebar__nav li > p
  font-weight 700

.d-content
  padding-top 60px
  top 0
  right 0
  bottom 0
  left 300px
  position absolute
  transition left .25s ease

.d-markdown
  margin 0 auto
  max-width 800px
  padding 10px 15px 40px
  position relative

.d-demo__code
  display none

.d-demo__description
  position relative
  padding-right 30px

.d-demo__toggle
  position absolute
  cursor pointer
  right 0
  top 0
