html {
  font: 16px/1.25 Lato, sans-serif;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, p, ol, ul, li, th, td {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  text-decoration: none;
}



/* HEADER */

header {
  background: #444;
}

header div {
  overflow: auto;
  max-width: 500px;
  margin: auto;
  padding: 1em 5%;
}

header h1 {
  float: left;
  font-size: 1.5em; /* Match header button. */
}

header h1 a {
  display: block;
  color: white;
}

header button {
  float: right;
  width: 1em;
  background: url(../img/menu-closed.svg) center / contain no-repeat;
  font-size: 1.5em; /* Match h1. */
  border: none;
  cursor: pointer;
}

header button[aria-expanded="true"] {
  background-image: url(../img/menu-open.svg);
}

@media screen and (min-width: 540px) {
  header {
    padding-top: 2.5em;
  }
  header h1 {
    font-size: 2em;
  }
  header button {
    display: none;
  }
}



/* MENU */

nav {
  display: none;
  background: #eee;
}

nav ul {
  list-style: none;
  text-transform: uppercase;
}

nav li a {
  display: block;
  padding: 1em 5%;
  border-bottom: 1px solid #ccc;
  color: black;
}

@media screen and (min-width: 540px) {
  nav {
    display: block;
  }
  nav ul {
    max-width: 500px;
    margin: auto;
    padding: 0 5%;
  }
  nav li {
    display: inline-block;
    margin-right: 2em;
  }
  nav li a {
    padding: 0.75rem 0;
    border-top: 3px solid #eee;
    border-bottom: 3px solid #eee;
  }
  nav li a:hover {
    border-bottom-color: #666;
  }
}



/* CONTENT */

main {
  max-width: 500px;
  margin: auto;
  padding: 1em 5%;
}

main a {
  border-bottom: 1px solid #faa;
  color: #c00;
}

main a:hover {
  color: #f00;
}

main h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
  font-size: 1.5em;
}

main h3 {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
  font-size: 1.25em;
}

main p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
  line-height: 1.5;
}

main ol, main ul {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
  margin-left: 2.25em; /* If changed, also change div.note ul left margin accordingly. */
}

main ol li, main ul li {
  margin-bottom: 0.5em;
  line-height: 1.5;
}



/* HOME PAGE */

ul#actions {
  margin: 1.5em 0 0 0;
  list-style: none;
}

ul#actions a {
  display: block;
  padding: 0.6em 0 0.4em;
  border: 1px solid #eee;
  background: #eee;
  transition: background 0.5s;
}

ul#actions a:hover {
  border-color: #ccc;
  background: white;
}

ul#actions img {
  display: inline-block;
  width: 15%;
  margin: 0 5% 0 2.5%;
  vertical-align: middle;
}

@media screen and (max-width: 499px) {
  ul#actions br {
    display: none;
  }
}

@media screen and (min-width: 500px) {
  ul#actions {
    display: flex;
    justify-content: space-between;
  }
  ul#actions li {
    width: 31%;
    text-align: center;
    line-height: 1.2em;
  }
  ul#actions a {
    padding: 1em 0;
  }
  ul#actions img {
    display: block;
    width: 50%;
    margin: 0 auto 0.5em;
  }
}



/* CONTRIBUTE PAGE */

div#deadline-warning {
  background: #d5eaf9;
}

div#error-message {
  background: #c00;
  color: white;
}

form#article-submission h3 {
  margin-top: 1.5em;
}

form#article-submission p {
  color: #999;
}

form#article-submission label {
  display: block;
  margin-bottom: 0.5em;
}

form#article-submission input.field {
  border: 1px solid #aaa;
  display: block;
  font: 1rem Lato, sans-serif;
  margin-bottom: 1em;
  padding: 0.5em 1%;
  width: 98%;
  border-radius: 3px;
  -webkit-appearance: none; /* Fix for iOS. */
}

form#article-submission textarea {
  border: 1px solid #aaa;
  display: block;
  font: 1rem Lato, sans-serif;
  margin-bottom: 1em;
  padding: 0.5em 1%;
  width: 98%;
  border-radius: 3px;
  -webkit-appearance: none; /* Fix for iOS. */
}

form#article-submission div#consent {
  margin-top: 0.5em;
}

form#article-submission div#consent label {
  display: inline-block;
  width: 85%;
  cursor: pointer;
}

form#article-submission input#consent-checkbox {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.4em;
  margin-right: 0.5em;
}

form#article-submission input#submit-button {
  margin: 1.5em 0;
  padding: 0.6em 2.25em;
  border: none;
  border-top: 3px solid #ddd;
  border-bottom: 3px solid #ddd;
  background: #ddd;
  font: 1em Lato, sans-serif;
  -webkit-appearance: none; /* Fix for iOS. */
  text-transform: uppercase;
}

form#article-submission input#submit-button:enabled {
  color: black;
  cursor: pointer;
}

form#article-submission input#submit-button:enabled:hover {
  border-bottom-color: #666;
}

form#article-submission .invalid {
  background: #fdd;
}

form#article-submission input#trap {
  display: none;
}



/* ADVERTISE PAGE */

table#charges {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  background: #eee;
}

table#charges th, table#charges td {
  padding: 0.4em 0.6em;
}

table#charges th {
  text-align: left;
}

table#charges td {
  text-align: center;
}

table#charges tr:first-child th, table#charges tr:first-child td {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  background: #444;
  color: #fff;
}

table#charges tr:last-child {
  border-bottom: 3px solid #ccc;
}

img#advert-dimensions {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 2em auto 1.5em;
}

@media screen and (max-width: 499px) {
  table#charges span {
    display: none;
  }
}

@media screen and (min-width: 500px) {
  table#charges br {
    display: none;
  }
}



/* MISCELLANEOUS */

div#deadline {
  margin-bottom: 1em;
  font-weight: bold;
}

ol.archive {
  margin-left: 0;
  margin-bottom: 1.5em;
  list-style: none;
}

div.note {
  margin: 1em 0;
  padding: 1px 1em; /* Token 1px vertical padding to prevent margin collapse. */
  background: #eee;
}

div.note ul {
  margin-left: 1.25em; /* If changed, also change main ul left margin accordingly. */
}