//
// Docs
// --------------------------------------------------

$docs-font-size: 15px;

body.layout-inner{
  // h2, h3, h4, h5 {
  //   font-family: $font-family-open-sans;
  //   text-transform: none;
  // }
}

body.layout-docs,
body.layout-inner,
body.layout-downloads,
body.layout-intro{
  >.container{
    .col-md-8[role=main]{
      min-height: 800px;
      background-color: white;

      >div{
        position: relative;
        z-index: 10;
      }
    }
  }

  *:focus {
    outline: none;
  }

  h1 > code,
  h2 > code,
  h3 > code,
  h4 > code,
  h5 > code
  h6 > code,
  li > code,
  table code,
  p code,
  tt,
  .alert code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 90%;
    background-color: transparent;
    color: inherit;
    padding: 0;
  }
}

.docs-sidebar{
  position: relative;
  z-index: 20;
  margin-bottom: 30px;
  margin-top: 50px;
  @include open();

  .nav.docs-sidenav{
    padding-bottom: 15px;

    :last-child{
      border-bottom: none;
    }

    //all li
    li{
      position: relative;

      > a{
        padding: 10px 8px;
        font-size: 13px;
        color: $blue-dark;

        &:hover{
          background-color: transparent !important;
        }
      }
    }

    $parent-active-state: -14px;
    $parent-default-state: -14px;
    $child-active-state: -4px;
    $child-default-state: -4px;

    //first teir li
    li {
      margin: 0 0 0 10px;

      > a {
        -webkit-font-smoothing: antialiased;

        &:hover{
          color: #000;

          &:before{
            opacity: 1;
          }
        }

        &:focus {
          background-color: inherit;
        }

        &:before{
          content: '';
          position: absolute;
          width: 8px;
          height: 12px;
          top: 15px;
          left: $parent-default-state;
          overflow: hidden;
          background: image-url("caret-light.png") 0 0 no-repeat;
          opacity: .3;
          @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px);
        }
      }

      &.active {
        >a{
          color: $green-dark;

          &:before{
            opacity: 1;
          }
        }

        > .nav {
          display: block;
        }
      }
    }

    //nested ul.nav
    .nav {
      display: none;
      padding-top: 10px;
      padding-bottom: 10px;

      > li{
        margin-left: 10px;

        > a {
          &:before{
            content: '';
            position: absolute;
            width: 8px;
            height: 12px;
            top: 10px;
            left: $child-default-state;
            overflow: hidden;
            background: image-url("caret-light.png") 0 0 no-repeat;
            opacity: .3;
            @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px);
          }

          &:focus {
            background-color: inherit;
          }

          &:hover {
            color: #000;

            &:before {
              opacity: 1;
            }
          }
        }

        &.active{
          > a{
            color: $green-dark;

            &:before{
              opacity: 1;
            }
          }
        }

        > a{
          -webkit-font-smoothing: antialiased;
          padding: 6px 15px;
        }
      }
    }

    .nav-visible {
      display: block;
    }
  }
}


.bs-docs-section{
  padding-top: 10px;
  padding-left: 3%;
  padding-bottom: 160px;

  .lead{
    margin-bottom: 48px
  }

  .doc-sectional{
    margin-bottom: 48px;
  }

  p, li, .alert {
    color: $blue-dark;
    font-size: $docs-font-size;
    font-family: $font-family-open-sans;
    font-weight: $font-weight-reg;
    line-height: 1.84em;
    margin: 0 0 $docs-font-size;
    -webkit-font-smoothing: antialiased;
  }

  pre {
    font-size: ($docs-font-size - 3);
    margin: 0 0 $docs-font-size;

    // This will force the code to scroll horizontally on small screens
    // instead of wrapping.
    code {
      overflow-wrap: normal;
      white-space: pre;
    }
  }

  a{
    color: $green-dark;
    text-decoration: none;

    &:hover{
      text-decoration: underline;
    }

    code {
      background: inherit;
      color: $green-dark;
    }
  }

  img{
    max-width: 650px;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  h1, h2, .h2, h3, .h3, h4, .h4{
    color: $gray-dark;
    margin-top: 54px;
    margin-bottom: $docs-font-size;
    line-height: 1.3;
    @include open-sb();
    text-transform: none;
  }

  h2 {
    padding-bottom: 3px;
    border-bottom: 1px solid $gray-light;
  }

  #graph {
    margin-top: 30px;
  }
}

@media (max-width: 992px) {

  .bs-docs-section{
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .bs-docs-section{
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .bs-docs-section{
    img{
      max-width: 450px;
    }
  }
}