/* apie.org theme, content area and page-specific styles.
   Palette (shared with header.css and nav.css):
   navy #002B66, grey-green #CCD5CC, brown #662B00. */

body {
  margin: 0; /* header bands run edge to edge */
  /* Softened rock: a lightened copy of the original Rock.jpg texture (72% white),
     saved as an image so it looks the same in every browser. The colour behind
     it is the image's average, shown while it loads. */
  background: #F3F3F3 url(../images/rock-soft.jpg);
  font-family: "Times New Roman", Times, serif;
  color: #000000;
}

/* Content area: the same white panel on every page, directly after the header.
   936px wide like the header's inner column; its 2em (36px) padding plus 1px
   border lines the text up with the brand above (37px header padding). max-width plus auto margins
   keeps lines readable and lets the panel shrink; no flexbox or grid, for
   old-browser support. */
.content {
  box-sizing: border-box;
  max-width: 52em; /* 936px at this panel's 18px font size */
  margin: 1.5em auto 2em;
  padding: 0.5em 2em 1.5em;
  background: #FFFFFF;
  border: 1px solid #D3DCD4;
  font-size: 1.125em;
  line-height: 1.5;
}

.content h1 {
  margin: 0.5em 0;
  font-size: 1.75em;
  line-height: 1.2;
  color: #002B66;
}

/* Section headings: navy text flush with the body text, grey-green rule underneath */
.content h2 {
  margin: 1.5em 0 0.5em;
  padding-bottom: 0.2em;
  border-bottom: 2px solid #CCD5CC;
  font-size: 1.25em;
  line-height: 1.3;
  color: #002B66;
}

.content p,
.content ul,
.content ol,
.content dl,
.content address {
  margin: 0 0 1em;
}

.content address {
  font-style: normal; /* <address> is italic by default */
}

.content a,
.content a:visited {
  color: #002B66;
}

/* Term + description lists (Services page) */
.content dt {
  font-weight: bold;
}

.content dd {
  margin: 0 0 1em 1.5em;
}

.content dd p {
  margin: 0 0 0.5em;
}

/* Narrow screens (the site's one breakpoint, shared with header.css and nav.css):
   the panel runs edge to edge with 18px side padding, matching the header.
   Old browsers without media queries just keep the desktop layout. */
@media (max-width: 960px) {
  .content {
    margin-top: 0;
    padding: 0.25em 1em 1em;
    border-width: 0 0 1px; /* the header already draws the top rule */
  }
}

/* Application page: numbered instruction steps */
.steps li {
  margin-bottom: 1em;
}

.steps p {
  margin: 0 0 0.5em;
}

.step {
  color: red;
  font-weight: bold;
  font-style: italic;
}

/* Indented block (download link, mailing address) */
.indent {
  padding-left: 2em;
}