1<style>
2  html { box-sizing: border-box; }
3  *, *::before, *::after { box-sizing: inherit; }
4
5  /* keep outer tables from overflowing on small screens */
6  body > form > table {
7    width: min(100% - 24px, 560px);
8    margin: 12px auto;
9  }
10
11  /* let inputs/selects ignore the inline 300px width */
12  input[type="password"],
13  input[type="text"],
14  select {
15    width: 100% !important;
16    max-width: 100%;
17    padding: 10px 12px;
18  }
19
20  /* nicer touch targets for buttons */
21  input[type="submit"],
22  input[type="reset"] {
23    padding: .6rem 1rem;
24  }
25
26  /* mobile stuff */
27  @media (max-width: 640px) {
28    /* stack each row of the INNER tables (label above field) */
29    /* structure is: form > table(outer) > td > table(inner) */
30    form table table tr {
31      display: block;
32      margin-bottom: .75rem;
33    }
34    form table table tr td {
35      display: block;
36      width: 100% !important;
37    }
38
39    /* hide the tiny spacer column */
40    form table table tr > td:nth-child(2),
41    form table table td[width="20"] {
42      display: none !important;
43    }
44
45    /* make labels bolder when stacked */
46    form table table tr td:first-child {
47      font-weight: 600;
48      margin-bottom: .25rem;
49      font-size: 0.95rem;
50    }
51
52    /* header row */
53    form table table tr:first-child td[colspan="3"] {
54      text-align: center !important;
55    }
56    form table table tr:first-child td[colspan="3"] img {
57      float: none !important;
58      display: block;
59      margin: 0 auto .5rem;
60    }
61
62    /* button rows
63    form table table tr td[colspan="3"] input[type="submit"],
64    form table table tr td[colspan="3"] input[type="reset"] {
65      width: 48%;
66      margin: 0 1% .25rem 1%;
67    }
68  }
69</style>