/* Portadown Photos - phone and small tablet layout.
   Everything is inside the media query below, so desktop browsers
   (wider than 700px) see the site exactly as before.
   To switch this off, delete this file or empty it. */

@media screen and (max-width: 700px) {

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0 !important;
    padding: 10px !important;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: break-word;
  }

  /* Layout tables: stack the columns one under another
     instead of squeezing them side by side. */
  table, thead, tbody, tfoot, tr, td, th, caption {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }
  table {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
  }
  td, th {
    padding: 6px !important;
  }

  /* Photos shrink to fit the screen and keep their shape. */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Old <font size> text is far too small on a phone. */
  font[size="1"], font[size="2"] { font-size: 15px !important; }
  font[size="3"] { font-size: 16px !important; }
  font[size="4"] { font-size: 18px !important; }
  font[size="5"] { font-size: 20px !important; }
  font[size="6"], font[size="7"] { font-size: 22px !important; }
  h1 { font-size: 24px; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }

  /* Bigger gaps between links so they are easier to tap. */
  a { padding-top: 2px; padding-bottom: 2px; }
}