/* responsive.css - loads after the main theme CSS */
img { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

@media (max-width: 900px) {
  /* let fixed-width wrappers shrink */
  #wrapper, #container, #main, #content, .container, .wrapper,
  table[width], div[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* wide tables (ban list, search, admin) scroll sideways inside themselves */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* bigger tap targets and readable text */
  body { font-size: 15px; }
  a, button, input[type=submit], select { min-height: 36px; }
  input[type=text], input[type=password], select, textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;      /* stops iOS zooming in on focus */
  }

  /* menu and header */
  #menu ul, .menu ul { display: flex; flex-wrap: wrap; padding: 0; }
  #menu li, .menu li { list-style: none; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  table td, table th { padding: 6px 4px; }
}