/* Phone and tablet layout for myponypartyatl.com.
   The pages are built with fixed-width tables (900-1100px). These rules only
   apply on screens narrower than the desktop layout, so desktop is unchanged. */

/* ---------- Tablets and phones (up to 960px wide) ---------- */
@media (max-width: 960px) {
  html {
    overflow-x: hidden;
  }
  body {
    background-position: center top !important;
  }

  /* Let every fixed-width table shrink to the screen */
  table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Images scale down instead of pushing the page wider */
  img {
    max-width: 100%;
    height: auto;
  }
  iframe {
    max-width: 100%;
  }

  /* 300px-wide invisible spacer images only exist to force the desktop width */
  img[src*="_300_spacer"] {
    display: none;
  }

  /* Menu tabs wrap neatly onto more lines */
  .mattblacktabs ul {
    padding-left: 0;
  }
  .mattblacktabs li {
    display: inline-block;
    margin: 3px 1px;
  }
  .mattblacktabs li a {
    display: inline-block;
  }

  /* Home page "Please Select Your City" buttons */
  #home-nav {
    padding: 0 8px;
  }
  #home-nav li {
    margin: 4px 3px;
  }
}

/* ---------- Phones (up to 640px wide) ---------- */
@media (max-width: 640px) {
  /* Stack table columns on top of each other */
  td {
    display: block;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
  }
  /* Keep cell contents centred and away from the screen edges */
  td > p,
  td > div > p {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Empty filler cells left over from the desktop grid */
  td:empty {
    display: none;
  }

  /* Header: show the full logo and the Book button centred */
  td div[align="right"] {
    text-align: center !important;
  }

  /* Large hero row: on phones the header stacks taller, so the hero photos
     are drawn inside this row instead of behind the header
     (each page sets the picture in its own <style> block) */
  body {
    background-image: none !important;
  }
  td[height="340"] {
    display: block;
    height: 220px !important;
    background-repeat: no-repeat;
    background-size: auto 155%;
    background-position: center bottom;
  }

  /* Tap-friendly menu */
  .mattblacktabs li a {
    font-size: 11pt;
    padding: 10px 12px;
  }
  #home-nav li {
    display: block;
    margin: 6px 0;
  }

  /* Big headings shrink to fit */
  h1, h2 {
    font-size: 26pt !important;
    padding: 0 10px;
  }

  /* Floated quote images don't squeeze the text into a sliver */
  img[align="left"],
  img[align="right"] {
    max-width: 35%;
  }
}

/* Main page headings added for search engines on pages whose headline was
   plain table text: keep them looking exactly like the surrounding text */
.seo-h1 {
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}