/* basic reset 
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,select,option { margin: 0; padding: 0; } fieldset, img { border: 0; } img { display: block; } ol,ul,dl { list-style: none; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }

/* site styles
 */

body {
  font-size: 16px;
  line-height: 26px;
  color: white;
  background: #215b82;
}

a {
  color: white;
  text-decoration: underline;
}
  a:hover {
    text-decoration: none;
  }

/* the grid */
/* for a web browser:
 *
 *   h1
 *   .spacer
 *   h2  .subheader .detail
 *       .subheader .detail
 *       .subheader .detail
 *   .spacer
 *   h2  .subheader .detail
 *       .subheader .detail
 *
 * for a phone:
 *
 *   h1
 *   .spacer
 *   h2
 *   .subheader
 *   .detail
 *   .subheader
 *   .detail
 *   ...
 */

#container {
  padding: 20px;
  display: grid;
}

@media (min-width: 500px) {
  #container {
    margin: 30px auto;
    max-width: 800px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 15px;
  }

    #container h1         { grid-column: 1 / span 6; }
    #container .spacer    { grid-column: 1 / span 6; height: 0px; margin: 5px 0; border-bottom: 1px solid white; }

    #container h2         { grid-column: 1 / span 1; }
    #container .subheader { grid-column: 2 / span 1; }
    #container .detail    { grid-column: 3 / span 4; }
}
@media (max-width: 499px) {
  #container {
    grid-template-columns: 1fr 1f4;
    grid-gap: 10px;
  }
    #container > * { grid-column: auto / span 1 }
    #container h1,
    #container h2,
    #container .hyphenate,
    #container .spacer { grid-column: 1 / span 2 }

    #container .spacer { height: 0px; margin: 5px 0; border-bottom: 1px solid white; }

    h2 {
      font-size: 24px;
      font-weight: 300;
    }

    #container .detail.hyphenate { padding-bottom: 20px; }
}

/* styles */
#container {
}

  h1 {
    font-size: 24px;
    font-weight: bold;
  }

  h2 {
  }

  .subheader { }
    h3 {
      font-weight: bold;
    }
    .subheader .date {
      font-weight: 300;
    }

  .detail { }
    .detail.hyphenate {
      text-align: justify;
    }