/* Wide screens: the menu at the top, the page's sections and the footer share one column, so
   their edges line up. The homepage and the Apps pages load this file; the other pages keep the
   menu as it was. */

/* The footer sits outside the page's .container; give it the same box (970px, then 1170px,
   with 20px of padding, as Bootstrap and header.php give .container). */
@media (min-width: 992px) {
  footer {
    width: 970px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }
}

/* From here up the menu fits on one row. The buttons keep their own widths and the spare room
   goes between them, so the first and last sit on the column's edges. (Stretching the buttons
   themselves made "Open Source", already the longest, look oversized.)
   "clear" keeps the footer's copy below the floated blocks that come before it there. */
@media (min-width: 1200px) {
  footer {
    width: 1170px;
  }

  .sitemenu {
    display: flex;
    justify-content: space-between;
    padding: 1em 0;
    clear: both;
  }

  .sitemenu li.selected,
  .sitemenu li.unselected {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
}