.wy-affix
  position: fixed
  top: $gutter

.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: $menu-logo-color
    white-space: nowrap

  ul
    margin-bottom: 0
  li
    &.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-left: solid 5px darken($section-background-color, 20%)
        border-right: solid 1px darken($section-background-color, 20%)
        border-bottom: solid 1px darken($section-background-color, 20%)
        &:hover
          background: darken($section-background-color, 15%)
  li.on a, li.current > a
    color: $link-color
    font-weight: bold
    font-size: 100%
    position: relative
    background: $section-background-color
    border: none
    border-bottom: solid 1px darken($section-background-color, 20%)
    padding-left: $gutter -4px
    +font-smooth
    &:hover
      background: $section-background-color
  li.current ul
    display: block
  li ul
    margin-bottom: 0
    display: none
  li ul li a
    margin-bottom: 0
    color: $text-light
    font-weight: normal
  a
    display: inline-block
    line-height: 18px
    padding: $gutter / 4 $gutter
    display: block
    position: relative
    font-size: 90%
    color: $text-light
    &:hover
      background-color: lighten($menu-background-color, 10%)
      cursor: pointer
    &:active
      background-color: $menu-logo-color
      cursor: pointer
      color: $white

.wy-side-nav-search
  z-index: $z-index-popover
  background-color: $link-color
  text-align: center
  padding: $gutter / 2
  display: block
  color: $section-background-color
  margin-bottom: $gutter / 2
  input[type=text]
    width: 100%
    border-radius: 50px
    padding: 6px 12px
    border-color: darken($link-color, 5%)
  img
    display: block
    margin: auto auto $gutter / 2 auto
    height: 45px
    width: 45px
    background-color: $menu-logo-color
    padding: 5px
    border-radius: 100%
  > a, .wy-dropdown > a
    color: $section-background-color
    font-size: 100%
    font-weight: bold
    display: inline-block
    padding: $base-line-height / 6 $base-line-height / 4
    margin-bottom: $gutter / 2
    +font-smooth
    &:hover
      background: rgba(255,255,255,.1)

.wy-nav .wy-menu-vertical
  header
    color: $link-color
  a
    color: $text-light
    &:hover
      background-color: $link-color
      color: $white

[data-menu-wrap]
  +transition(all .2s ease-in)
  position: absolute
  opacity: 1
  width: 100%
  opacity: 0
  &.move-center
    left: 0
    right: auto
    opacity: 1
  &.move-left
    right: auto
    left: -100%
    opacity: 0
  &.move-right
    right: -100%
    left: auto
    opacity: 0


.wy-body-for-nav
  background: left repeat-y $section-background-color
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxOERBMTRGRDBFMUUxMUUzODUwMkJCOThDMEVFNURFMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxOERBMTRGRTBFMUUxMUUzODUwMkJCOThDMEVFNURFMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE4REExNEZCMEUxRTExRTM4NTAyQkI5OEMwRUU1REUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4REExNEZDMEUxRTExRTM4NTAyQkI5OEMwRUU1REUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EwrlwAAAAA5JREFUeNpiMDU0BAgwAAE2AJgB9BnaAAAAAElFTkSuQmCC)
  background-size: $nav-desktop-width 1px

.wy-grid-for-nav
  position: absolute
  width: 100%
  height: 100%

.wy-nav-side
  position: absolute
  top: 0
  left: 0
  width: $nav-desktop-width
  overflow: hidden
  min-height: 100%
  background: $menu-background-color
  z-index: $z-index-popover

.wy-nav-top
  display: none
  background: $link-color
  color: $white
  padding: $gutter / 4 $gutter / 2
  position: relative
  line-height: 50px
  text-align: center
  font-size: 100%
  +clearfix
  a
    color: $white
    font-weight: bold
    +font-smooth
  img
    margin-right: $base-line-height / 2
    height: 45px
    width: 45px
    background-color: $menu-logo-color
    padding: 5px
    border-radius: 100%
  i
    font-size: 30px
    float: left
    cursor: pointer

.wy-nav-content-wrap
  margin-left: $nav-desktop-width
  background: $section-background-color
  min-height: 100%

.wy-nav-content
  padding: $gutter $gutter * 2
  height: 100%
  max-width: 800px
  margin: auto

.wy-body-mask
  position: fixed
  width: 100%
  height: 100%
  background: rgba(0,0,0,.2)
  display: none
  z-index: $z-index-modal - 1
  &.on
    display: block

+media($tablet)
  .wy-body-for-nav
    background: $section-background-color
  .wy-nav-top
    display: block
  .wy-nav-side
    @if $nav-desktop-position == left
      left: -$nav-desktop-width
    @else
      right: -$nav-desktop-width
    &.shift
      width: 85%
      left: 0
  .wy-nav-content-wrap
    margin-left: 0
    .wy-nav-content
      padding: $gutter
    &.shift
      position: fixed
      min-width: 100%
      left: 85%
      top: 0
      height: 100%
      overflow: hidden

+media($desktop-wide)
  .wy-nav-content
    margin: 0