@import url(https://fonts.googleapis.com/css?family=Lora:400,700,700italic,400italic);
body {
  /* Background */
  background-image: url("/assets/images/body-background.jpg");
  background-color: #282822;
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  /* Typography: body copy */
  font-family: Lora, Georgia, serif;
  color: #333;
}

header, div, section, nav {
  display: block flow-root;
}

a {
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
  color: #006cba; /* Light blue */
}

h1, h2, h3, h4, h5, h6 {
  font-style: italic;
  color: white;
}

p {
  line-height: 1.4;
}

dl {
  display: grid;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: 10em auto;
}
dl div {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 10em auto;
}
dl dt {
  grid-column: 1;
  font-weight: bold;
}
dl dd {
  grid-column: 2;
  margin-left: 0;
}

article {
  background-color: #e5e2dc;
}
article > :first-child {
  margin-top: 0;
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  color: #006CBA;
  margin-bottom: 0;
}
article h1 {
  font-size: 38px;
}
article h2 {
  font-size: 28px;
  font-weight: normal;
}
article h3 {
  font-size: 24px;
  font-weight: normal;
}
article > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* On occasion, it's necessary to tell the browser to break the current item
 * anywhere rather than breaking the layout, e.g. long email addresses.
 */
.break-anywhere {
  line-break: anywhere;
}

/* Clearfix, just for good measure. */
.clearfix {
  clear: both;
  display: table;
  content: "";
}

#page-container > footer {
  color: #e5e2dc;
}
#page-container > footer a {
  color: #b4ac9c;
}

nav {
  background-color: #382916;
  /* Highlight the current menu item (regardless of nesting level */
  /* Targets the submenu header, which is the link on the li.a,
   * but deliberately excludes further nested anchors.
   */
  /* Targets submenu items; the submenu header will not match due to the ul. */
}
nav ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
nav a {
  text-decoration: none;
  color: #cbc6bb;
  font-weight: normal;
  font-style: italic;
  font-size: 21px;
  line-height: 42px;
}
nav li.current > a {
  color: #E5E2DC;
  font-style: normal;
  font-weight: bold;
  background-color: #006CBA;
}
nav .submenu {
  margin-top: 20px;
  margin-bottom: 20px;
}
nav .submenu:last-child {
  margin-bottom: 0;
}
nav .submenu > a {
  font-weight: bold;
  font-style: normal;
}
nav .submenu ul a {
  font-size: 20px;
  line-height: 42px;
  font-style: normal;
}

#masthead {
  background-color: #382916;
  box-shadow: 0 0 20px black;
  padding: 20px;
}
#masthead a img {
  width: 200px;
  height: 200px;
}
#masthead h2 {
  margin-top: 30px;
  margin-bottom: 0;
  max-width: 240px;
}
#masthead p {
  color: white;
  margin: 0;
  max-width: 240px;
}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  column-gap: 0.5em;
}
.flex-row > * {
  margin-top: 0;
  margin-bottom: 0;
}
.flex-row .fill,
.flex-row input {
  flex-grow: 1;
}

/* These styles form the basis for other styles, as all other styles have minimum viewport sizes.
 * Other styles may override what appears here, and what's here serves as the default. Add styles
 * to this section with care.
 */
.announcement h2 {
  background-color: rgba(0, 108, 186, 0.5);
  font-size: 25px;
  text-align: center;
  margin: 0;
  padding: 20px 10px;
}
.announcement .content-area {
  background-color: #e5e2dc;
  padding: 20px 20px 0;
}

body {
  margin: 0;
}

/* When the mobile nav JS initializes successfully, move the page-container down to make room for
 * the mobile nav menu.
 */
#page-container.js {
  margin-top: 112px;
}

#page-container > * {
  margin-bottom: 40px;
}

article {
  padding: 20px;
}

#page-container > footer {
  text-align: center;
}

#masthead {
  padding: 20px;
  padding-bottom: 40px;
  text-align: center;
}
#masthead .logo {
  margin-bottom: 20px;
}
#masthead .logo img {
  height: 200px;
}
#masthead .find-us h2 {
  font-size: 28px;
  margin-left: auto;
  margin-right: auto;
}
#masthead .find-us p {
  padding-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

/* These are the mobile nav styles, specifically. For rules that are common to both mobile and
 * desktop nav, see the non-responsive nav.scss file.
 */
nav {
  box-shadow: 0 0 20px black;
  margin-bottom: 40px;
}
nav a {
  padding-left: 10%;
  width: 90%;
  display: block;
}
nav .submenu ul a {
  padding-left: 20%;
}
nav h2 {
  font-style: normal;
  margin: 0;
  padding: 0.8em 0;
  text-align: center;
}
nav .submenu ul a {
  padding-left: 20%;
  width: 80%;
}

nav.js {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: top 0.4s;
  z-index: 2;
  /* Since the JS loaded, we don't need to separate nav from article. */
  margin-bottom: 0;
}

/* 520px at 16px font size and standard zoom */
@media screen and (min-width: 32.5em) {
  .announcement h2 {
    text-align: left;
    padding-left: 20px;
    padding-right: 10px; /* Leave a little wiggle room to prevent unnecessary wrapping */
  }
}
@media screen and (min-width: 32.5em) {
  body {
    margin: 0 20px;
  }
}
@media screen and (min-width: 32.5em) {
  #masthead {
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  #masthead .logo {
    grid-column: 1/3;
    grid-row: 1;
    margin-bottom: 0;
  }
  #masthead .find-us {
    grid-column: 1;
    grid-row: 2;
  }
  #masthead .find-us h2 {
    font-size: 21px;
    margin-top: 20px;
    line-height: 18px;
    margin-bottom: 2px;
    margin-right: 0;
    margin-left: auto;
  }
  #masthead .find-us h2:first-child {
    margin-top: 0;
  }
  #masthead .find-us p:last-child {
    margin-bottom: 0;
  }
  #masthead .find-us p {
    font-size: 13px;
    line-height: 1.4;
    max-width: 240px;
    margin-right: 0;
    margin-left: auto;
  }
  #masthead .map {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}
/* 760px at 16px font size and standard zoom */
@media screen and (min-width: 47.5em) {
  body {
    margin: 0;
  }
  #page-container > * {
    margin: 0 20px 60px;
  }
  /* We use a basic, 2-column, 3-row grid for nav and article.
   *
   * The left column simply holds nav.
   * The right column simply holds the article.
   *
   * The top row is the space above nav.
   * The center row holds nav.
   * The bottom row holds the rest of the article below nav (if any).
   */
  #main-grid {
    display: grid;
    grid-template-columns: 260px auto;
    grid-template-rows: 40px auto auto;
  }
  article {
    min-height: 600px;
    padding: 40px;
    grid-column: 2;
    grid-row: 1/4;
  }
  #page-container > footer {
    text-align: right;
  }
}
@media screen and (min-width: 47.5em) {
  #masthead {
    margin: 0 0 60px;
    grid-template-columns: min-content 1fr min-content;
  }
  #masthead .logo {
    grid-column: 1;
    grid-row: 1;
  }
  #masthead .find-us {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  #masthead .map {
    grid-column: 3;
    grid-row: 1;
  }
}
@media screen and (min-width: 47.5em) {
  /* At medium, we change the nav menu from mobile to desktop. This file requires a bit of special
   * handling due to the complex rules. Mind the comments and be careful where you insert new code.
   */
  /* Revert basic styles from mobile nav that we don't want for desktop nav. */
  nav {
    box-shadow: none;
  }
  nav a {
    width: initial;
  }
  nav .submenu ul a {
    /* This is already specified in the non-responsive nav.scss, and it might be safe/wise to
     * delete the entry over there. This entry is required to overrule the mobile nav menu style
     * from xsmall.
     */
    padding-left: 40px;
  }
  nav h2 {
    display: none;
  }
  #page-container.js {
    margin-top: 0;
  }
  /* Change nav's positioning from mobile to our desktop grid.
   *
   * We would really only need the nav selector, but because nav.js has higher precedence, we need
   * to specify nav.js as well. For progressive enhancement, we do indeed need both selectors.
   */
  nav,
  nav.js {
    position: static;
    grid-column: 1;
    grid-row: 2/3;
  }
  /* Set the background image identically for both nav and nav li.current>a, since nav's background
   * will draw behind li.current>a.
   */
  nav {
    background-image: url("/assets/images/shadow-right.png");
    background-position: right top;
    background-repeat: repeat-y;
  }
  nav li.current > a {
    background-image: url("/assets/images/shadow-right.png");
    background-position: right top;
    background-repeat: repeat-y;
  }
  /* Now the main body of styles for the desktop version of the menu. */
  nav {
    padding: 40px 0 40px 40px;
  }
  nav a {
    padding-left: 20px;
  }
  nav .submenu ul a {
    padding-left: 40px;
  }
}
/* 980px at 16px font size and standard zoom */
@media screen and (min-width: 61.25em) {
  body {
    margin-left: 0;
    margin-right: 0;
  }
  #page-container {
    width: 960px;
    margin: 0 auto;
  }
  #page-container > * {
    margin: 0 0 60px;
  }
}
@media screen and (min-width: 61.25em) {
  #masthead {
    width: 840px;
    padding: 60px;
  }
}

/*# sourceMappingURL=public.css.map */