---
---

$nav-width: 250px;

html {
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
}

nav {
  width: $nav-width;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 100%;

  h1, h2, ul, ol {
    padding-left: 28px;
    width: 100%;
    display: block;
    clear: both;
  }

  h2 {
    hr {
      margin-bottom: 0;
      margin-top: 32px;
    }
  }

  ul.inline li, ol.inline li {
    display: inline;
  }

  .fa {
    padding: 0 8px 0 8px;
    margin-left: -8px;
    margin-bottom: 20px;
  }
}

.scroll {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

section {
  margin-left: $nav-width + 1;
  width:auto;
  float: none;
  min-height: 100%;
  text-align: justify;

  h1, h2, h3, ul, ol, & > p, blockquote, pre, hr {
    max-width: 800px;
    margin-left: 40px;
    margin-right: 40px;
  }

  #contribute {
    padding: 40px 40px 0px 40px;
    text-align: right;
    a {
       max-width: 800px;
       display: block;
    }
  }
}

footer {
  margin: 40px 0 0 $nav-width;
  padding: 40px 0 40px 40px;
  p {
    margin: 0;
  }
}

@media print, screen and(max-width: 650px) {
  
  nav {
    float: none;
    position: static;
    width: auto;
    margin-left: 0;
    width: 100%;
    
    h1 {
      padding-top: 15px;
    }

    hr {
      max-width: none !important;
    } 
  }
  
  section {
    float: none;
    position: static;
    width: auto;
    margin-left: 0;
    border-width: 1px 0;
    margin: 0 0 20px;
    padding: 0;
  }
  
  footer {
    float: none;
    position: static;
    width: auto;
    margin-left: 0;
    padding: 0 0 15px 15px;
  }
  
  div.wrapper {
    width: auto;
    margin: 0;
  }
}