/* Screen is bigger than a phone but not big enough to show the left nav. */
@media (min-width:840px) { /* 800 + 20 for body margin + 20 for scroll bar */
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  #sections {
    vertical-align: top;
    width: 800px;
    max-width: 100%;
  }

  #hero-section {
    display: block;
  }

  .content {
    width: 800px;
  }
}

/* On tiny screens, thumbnails fill the screen width. Make them smaller on bigger screens. */
/* Fullsize thumbnails should not be smaller, even on non-tiny screens. */
@media (min-width:500px) {

  .tutorial-link-box:not(.fullsize) {
    width: 200px;
  }

  .thumbnail-image:not(.fullsize) {
    width:200px;
    max-width:100%;
  }
}