/* body { background:white url(/images/rivet-faded.jpg) no-repeat 45% 45% fixed; } */

@media{

  html, body {
      background:white;
      font-family: Gill Sans, Verdana, sans-serif;
      font-size: larger;
      color: #444;
      margin-left: 0;
  }

  #navbar {
      background-color: #333;
      position: fixed; /* Make it stick/fixed */
      top: 0; /* Stay on top */
      width: 100%; /* Full width */
      transition: top 0.3s; /* Transition effect when sliding down (and up) */
  }

  /* Style the navbar links */
  #navbar a:not(:last-child) {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 15px;
      padding-left: 30px;
      text-decoration: none;
  }

  #navbar a:not(:last-child):hover {
      background-color: #ddd;
      color: black;
  }

  #navbar img {
      margin: 15px;
      vertical-align: middle;
      float: right;
  }

  /*
  header {
      padding-top: 3em;
      padding-left: 2em;
  }
  */

  main {
      padding-top: 3em;
      padding-left: 2em;
  }

  main img:first-child {
      margin-left: -20px;
  }

  main p {
      max-width: 50em;
  }

  main a {
      color: #486a91;
      text-decoration: none;
  }
  main a:hover {
      color: #967a91;
  }

  li {
      padding-top: 0.5ex;
      padding-bottom: 0.5ex;
  }

  aside {
      float: right;
      margin-top: 4em;
      margin-left: 2em;
      margin-bottom: 2em;
      width:28%;
  }

  aside .box {
      color: #2e4e72;
      background: #e3ecf5;
      border: 3px solid #486a91;
      border-radius: 0.5em;
      margin-bottom: 1em;
      padding: 0.8em;
  }

  aside nav.box {
      margin-top: 3em;
  }

  aside .box h3 {
      color: #2e4e72;
  }

  aside .box a {
      color: #2e4ec2;
      text-decoration: none;
  }
  aside .box a:hover {
      color: #8e4ec2;
  }

  /*
  section {
      width: 60%;
  }
  */

  aside nav ul {
      font-weight: bold;
  }

  aside nav ul li ul {
      margin-top: 1ex;
      font-weight: normal;
  }

  .download {
      font-weight: bold;
      padding: 1em;
      background: #ac9;
      border: #695 solid 2px;
      text-align: center;
      border-radius: 0.2em;
      width: 60%;
  }
  /*
  .download:hover {
      background: #bda;
  }

  .releasebox {
      margin:2em 1em;
      padding:0.8em;
      width:90%;
      border-radius:0.5em;
      background:#ada;
      border:2px solid #696;
  }
  */

  .shadow {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .display {
      text-align: center;
      margin-top: 1ex;
      margin-bottom: 1ex;
  }

  footer {
      margin-left: 1.5em;
      margin-top: 2em;
      font-size: smaller;
  }

}



/* Adaptations for mobile screens */
@media (max-width:600px) {
    /* TODO: dynamically specify distance from the bottom of the nav bar, wherever that is */
    main {
        padding-top: 8em;
        padding-left: 20px;
    }
    #navbar a:not(:last-child) {
        padding-left: 20px;
    }
    /* TODO: we need the nav asides... move elsewhere, or a super-compact, links-only version at the top */
    aside {
        display: none;
    }
    #logo {
        max-width: 100%;
    }
    .download {
        width: 80%;
    }
}