/*
 * Mobile/narrow-viewport overrides.
 * Below 970px (the original fixed page width) layout stacks so the site
 * is usable on phones/tablets. Desktop is untouched and renders identically
 * to the original default.css/index.css layout.
 */
@media (max-width: 969px) {
  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  #page { width: 100%; }

  #firstLevel { height: auto; }
  #mainLogo, #header { float: none; height: auto; text-align: center; }
  #mainLogo img, #header img { display: inline-block; max-width: 100%; height: auto; }

  #navBar { width: 100%; float: none; text-align: center; padding: 6px 0; }
  #navBar > div { display: inline-block; padding: 4px 8px; }
  #navBar a { padding-left: 0; }

  #content { width: 100%; float: none; padding: 8px; }

  /* Home page elements */
  #leadershipImg, #indexSecondLogo { float: none; display: block; margin: 0 auto; max-width: 100%; height: auto; }
  #indexHeaderText { float: none; width: auto; padding: 8px; }
  .indexTopic {
    float: none;
    width: 100%;
    /* cancel the equal-height columns trick so stacked columns size correctly */
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  #indexNewsContent { border-left: 0; border-right: 0; }

  /* Pogroms / chamber page floats — let the text wrap reasonably */
  #content img[style*="float: right"],
  #content img[style*="float: left"],
  #premierPhoto {
    max-width: 40%;
    height: auto;
  }
}

@media (max-width: 480px) {
  #content img[style*="float: right"],
  #content img[style*="float: left"],
  #premierPhoto {
    float: none !important;
    display: block;
    max-width: 100%;
    margin: 8px auto;
  }
}