body
  background: $section-background-color
  max-width: 100%
  padding: 0
  margin: 0
#wrap
  +outer-container
  padding: 0 $gutter
nav.wy-docs-nav
  padding: $gutter * 2 0
  background: none
  box-shadow: none
  +span-columns(3)
  .logo-area
    +clearfix
    padding-bottom: $base-line-height
    border-bottom: solid 1px rgba(0,0,0,.1)
    margin-bottom: $base-line-height / 2
  img
    width: 125px
    float: right
  h3
    font-family: $base-font-family
    margin-top: $base-line-height
    margin-bottom: $base-font-size / 2
  p
    font-size: 80%
    margin-bottom: 0
    line-height: 1.5
section.content, article.content
  padding: $gutter * 2 0
  +span-columns(9)

.wy-menu
  a:hover
    text-decoration: none

.wy-menu-horiz
  +clearfix
  ul, li
    display: inline-block
  li:hover
    background: rgba(255,255,255,.1)
  li
    &.divide-left
      border-left: solid 1px hsl(0, 0%, 25%)
    &.divide-right
      border-right: solid 1px hsl(0, 0%, 25%)
  a
    height: $base-font-size * 2
    display: inline-block
    line-height: $base-font-size * 2
    padding: 0 $base-font-size

.wy-menu-vertical
  header
    height: $base-font-size * 2
    display: inline-block
    line-height: $base-font-size * 2
    padding: 0 $gutter
    display: block


    font-weight: bold
    text-transform: uppercase
    font-size: 80%
    color: $text-light
    white-space: nowrap

  dl
    margin-bottom: $base-line-height
  dt
    border-bottom: solid 1px rgba(0,0,0,.05)
    font-weight: bold
    padding: $gutter / 4 0
    margin-top: $base-line-height / 2
  dt:first-child
    margin-top: 0
  dd
    &.divide-top
      border-top: solid 1px hsl(0, 0%, 25%)
    &.divide-bottom
      border-bottom: solid 1px hsl(0, 0%, 25%)
    &.current
      background: darken($section-background-color, 10%)
      a
        color: $text-medium
        border-right: solid 1px darken($section-background-color, 20%)
        padding: $gutter / 4 $gutter * 1.5
        &:hover
          background: darken($section-background-color, 15%)
  // On state for the first level
  a.active, dd.active a
    color: $section-background-color
    padding: $gutter / 8 $gutter / 2
    font-weight: bold
    position: relative
    background: $gray-dark
    border-right: solid 10px $gray-darker
    +font-smooth
    &:hover
      background: $gray-dark
  dd.active
    a.sub-one, a.sub-two
      padding: 0 $gutter / 2
      list-style: disc
      color: $link-color
      background: none
      font-size: 80%
      border: none
      font-weight: normal
      line-height: 1.5
      background: darken($section-background-color, 5%)
      text-transform: none
      &:hover
        text-decoration: underline
      &.active
        color: $text-color
      &:nth-child(2)
        padding-top: $gutter / 4
      &:last-child
        padding-bottom: $gutter / 4
    a.sub-two
      color: $text-color
      padding-left: $gutter * 1

  a
    display: inline-block
    line-height: $base-line-height
    padding: $gutter / 8 $gutter / 2
    display: block
    position: relative
    font-size: 90%
    text-transform: capitalize
    color: $text-color
    &:hover
      background-color: rgba(0,0,0,.05)
      cursor: pointer
    &:active
      background-color: $gray-darker
      color: $white
      cursor: pointer

.examples
  > li
    border-top: solid 1px rgba(0,0,0,.1)
    padding: $base-line-height / 2 0
    position: relative
    list-style: none
    margin-left: 0
    +clearfix
  .desc
    display: inline-block
    margin-bottom: $base-line-height / 2
    font-weight: bold
  .name
    color: $text-lighter
    font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace
    background: #2d2d2d
    display: inline-block
    padding: 0 $base-line-height / 4
    float: right
    font-size: 10px
  .markup
    display: block

.prettyprint
  font-size: 12px
  line-height: 1.5

pre
  margin: 0 0 $base-line-height 0

.markdown ul
  @extend %wy-plain-list-disc
.markdown ol
  @extend %wy-plain-list-decimal

.grid-example
  background: $gray-lighter
  padding: $gutter
  +outer-container
  section,aside
    background: $gray-light
    padding: $gutter
  section
    +span-columns(8)
    +omega-type
  aside
    +span-columns(4)

+media($tablet)
  article.content
    +span-columns(8)
  nav.wy-docs-nav
    +span-columns(8)


