@font-face {
    font-family: Basetica;
    src: url(/static/fonts/Basetica-Medium-205TF.woff2) format('woff2'),
        url(/static/fonts/Basetica-Medium-205TF.woff) format('woff');
}
@font-face {
    font-family: Basetica;
    font-style: italic;
    src: url(/static/fonts/Basetica-Medium-Italic-205TF.woff2) format('woff2'),
        url(/static/fonts/Basetica-Medium-Italic-205TF.woff) format('woff');
}

@font-face {
    font-family: BaseticaBlack;
    font-weight: 800;
    src: url(/static/fonts/Basetica-Black-205TF.woff2) format('woff2'),
        url(/static/fonts/Basetica-Black-205TF.woff) format('woff');
}
@font-face {
    font-family: BaseticaBlack;
    font-style: italic;
    font-weight: 800;
    src: url(/static/fonts/Basetica-Black-Italic-205TF.woff2) format('woff2'),
        url(/static/fonts/Basetica-Black-Italic-205TF.woff) format('woff');
}

@font-face {
    font-family: Fortescue;
    src: url(/static/fonts/fortescue-text-regular-pro.woff2) format('woff2'),
        url(/static/fonts/fortescue-text-regular-pro.woff) format('woff');
}
@font-face {
    font-family: Fortescue;
    font-style: italic;
    src: url(/static/fonts/fortescue-text-italic-pro.woff2) format('woff2'),
        url(/static/fonts/fortescue-text-italic-pro.woff) format('woff');
}

/* Hide the focus indicator if the element receives focus via the mouse.
    It will still show up on keyboard focus.
    (polyfill from https://github.com/WICG/focus-visible) */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}
.js-focus-visible .focus-visible {

    outline: 1px solid #407028;
}
.js-focus-visible header .focus-visible {
    outline: 2px solid #fff;
}
.js-focus-visible #secondary nav .focus-visible,
.js-focus-visible .action.focus-visible {
    outline: 3px solid orange;
}

/* header: main nav. links */
.js-focus-visible header nav > ul a.focus-visible {
    background-color: #f8eddd;
    color: black;
    outline: 2px solid #fff;
}
/* footer: focused links get lighter background */
.js-focus-visible footer .focus-visible {
    background-color: #fff;
}

body {
    background: #fff;
    color: #000;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

a:link {
    color: #31561f; /* passes WCAG AA contrast req.: white, blue bkgds. */
    text-decoration: underline;
}
a:visited {
    color: #551a8b;
        /* passes WCAG AA contrast req.: white, blue, light green bkgds. */
}
a:active {
    color: #e00;
}
a.action,
nav a:link,
footer a:link {
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
/*
section a:link:not(.action) {
    text-decoration: underline;
}*/

/* for highlighting words passed in query string (using mark.js) */
.highlight {
    background-color: yellow;
    color: black;
}

header {
    background-color: #21555c;
    color: #fff;
    font-size: 75%;
    height: 130px;
}

header form {
    display: inline;
}
header input[type="search"] {
    width: 14rem;
}
header .id {
    float: left;
    padding: 0 0 0 2rem;
}
header .id img {
    height: 60px;
    width: 250px;
}
header .satellite {
    font-family: BaseticaBlack, sans-serif;
    line-height: 2.5em;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0px;
    top: 10px;
    text-align: center;
    width: 24em;
}
header .satellite li {
    padding: 0 0 0.25rem;
}
header .satellite li.join {
    padding-right: 1rem;
}
header .satellite a {
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
}
header button {
    background: transparent;
    background-image: url(/static/images/search.png);
    background-repeat: no-repeat;
    background-size: 18px;
    border: 0;
    display: inline-block;
    height: 18px;
    overflow: hidden;
    text-indent: 600%;
    white-space: nowrap;
    width: 18px;
}

header li {
    display: inline-block;
    list-style-type: none;
    margin-right: 0.5rem;
    padding: 0;
}


header nav > ul {
    background: #028676;
    clear: both;
    color: #fff;
    font-family: BaseticaBlack, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
header nav > ul li {
    margin: 0;
    padding: 0.8rem 0 0.95rem;
    position: relative;   /* for hover menu positioning */
}
header nav > ul a:link,
header nav > ul a:visited {
    color: #fff;
}
@media (hover: hover) {
    header nav > ul a:hover {
        text-decoration: none;
    }
}
header nav > ul a {
    padding: 0.75rem 0.8rem;
}
header nav > ul > li.current {
    background: #fff;
}
header nav > ul > li.current a {
    color: #000;
    font-weight: bold;
}

header nav > ul,
header nav > ul.sub {
    top: 0.2rem;
}

header nav > ul.sub {   /* sub-navigation */
    background: rgba(212, 212, 201, 0.8); /* #d4d4c9 w/slight transparency */
    color: #000;
    font-family: Basetica, sans-serif;
    font-size: 0.75rem;
    left: 0;
    margin: 0;
    padding: 0;
    text-transform: none;
    top: 0.2rem;
    width: 100%;
}
header nav > ul.sub li {
    box-sizing: border-box; /* puts "You are here" line inside box */
    margin: 0;
    padding: 0.75rem 0 0.85rem;
    width: auto;
}
header nav > ul.sub a {
    color: #000;
}
header nav > ul.sub li.current {   /* subnav current page */
    background: none;
    border-bottom: 3px solid #000;
}
header nav > ul.sub li.current a {
    font-weight: normal;
}


/* hover menus */
header nav > ul li ul {
    display: none;
}
@media (hover: hover) {
    header nav > ul li:hover {
        background: #ededed;
    }
    header nav > ul li:hover a {
        color: #000;
    }
    header nav > ul li:hover ul {
        background: #eee;
        display: block;
        font-family: Basetica, sans-serif;
        padding: 0;
        position: absolute;
        top: 39px;
        z-index: 1;
    }
    header nav > ul li:hover ul li {
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        display: block;
        margin: 0;
        min-width: 185px;
        padding: 0.3rem 0;
        text-align: left;
        text-transform: none;
        white-space: nowrap;
    }
    header nav > ul li:hover ul li a {
        color: #000;
        display: inline-block;
        font-weight: normal;
        width: 80%;
    }
}


h1 {
    background-color: #666;
    background-position: center;
    background-repeat: no-repeat; /* solid bars alongside too-narrow images */
    background-size: auto 100%;
    box-sizing: border-box;
    color: #fff;
    font-family: Fortescue, serif;
    font-size: 2.2rem;
    font-weight: bold;
    height: 400px;
    margin: -8px 0 0;
    overflow: hidden;
    padding: 6rem 4rem 0 5%;
    text-shadow: 4px 4px 4px #000;
}
h1 span {
    display: block;
    line-height: 110%;
    margin: 0;
}

/* Title alignment classes 'bottom' and 'right' can be set in the CMS. */
h1.bottom {
    padding-top: 18rem;
}
h1.right {
    margin-left: -12%;
    text-align: right;
}

body.home h1 {
    font-size: 3rem; /* main heading larger on home page (large screens) */
    height: 600px;
}
body.home h1 span {
    margin-top: 100px;
}
body.home .subtitle {
    color: #fff;
    font-family: BaseticaBlack, sans-serif;
    font-size: 1.2rem;
    margin: 0;
    padding: 0 0 0 5%;
    position: relative;
    text-shadow: 2px 2px 2px #000;
    text-transform: uppercase;
    top: -340px;
    width: 600px;
}
body.home h1 a,
body.home .subtitle a {
    color: #fff;
    text-decoration: none;
}
body.home main ul {
    margin: 0;
}

body.subpage h1 {
    height: 200px;
    padding-top: 4rem; /* no top- or bottom-alignment on these short images */
}
body.subpage.event h1 {
    height: auto;
    padding: 2rem 2rem 1rem;
}

/* Some pages don't have a big header image area. */
body.no-image-header h1 {
    background-color: inherit;
    color: inherit;
    height: inherit;
    line-height: 110%;
    padding: 3rem 2rem 0.5rem;
    text-transform: inherit;
    text-shadow: none;
}


h2,
h3,
h4,
h5,
main p,
main ul {
    padding: 0 2rem;
}
hr {
    margin: 2rem;
}
h2,
h3,
h4,
h5 {
    margin: 0.5rem 0 0;
}
h2 {
    font-size: 1.6rem;
    font-weight: 300;
}
h3 {
    font-size: 1.3rem;
    font-weight: 400;
}
h4 {
    font-size: 1.1rem;
    font-weight: 700;
}
h5 {
    font-size: 1rem;
    font-weight: 700;
}
main p {
    font-size: 0.95rem;
    line-height: 140%;
}
main ul {
    margin: 0 0 0 1.2rem;
}
main li {
    font-size: 0.95rem;
    margin: 1rem 0;
}
main a {
    font-weight: bold;
}

ul.actions {
    margin-top: 1.5rem;
}
ul.actions.plain {
    list-style-type: none;
    margin-left: 0;
}
ul.actions li {
    clear: both;
    padding-bottom: 0.25rem;
    min-height: 40px;
    line-height: 120%;
}
ul.actions li .text {
    display: inline-block;
    vertical-align: top;
    width: 350px;
}
ul.actions li .button {
    float: right;
}
ul.actions .action {
    display: inline-block;
    width: 260px;
}

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
body.event #container {
    margin-top: 1rem;
}

#primary,
#secondary {
    padding: 1em 0 2em;
}
#primary {
    width: 700px;
}


/* Embedding videos in a rich text field results in a huge amount of padding.
This is due to an inline padding-bottom style applied to the iframe.

Recommended fix from the docs is pasted below
http://docs.wagtail.io/en/latest/topics/writing_templates.html?highlight=responsive-object#responsive-embeds

Relevant Github issue
https://github.com/wagtail/wagtail/issues/1495 */

.rich-text img {
    max-width: 100%;
    height: auto;
}

.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* end paste block */


.richtext-image.full-width {
    height: auto;
    margin: 1rem 0;
    width: 100%;
}
.richtext-image.left {
    margin: 1rem 1rem 1rem 0;
}
.richtext-image.right {
    float: right;
    margin: 1rem;
}

#introduction h2 + p {
    font-size: 1.1rem;
    font-weight: bold;
}


/* Arrow icon links on feature and accordion sections */
.expand,
.collapse {
    background-color: transparent;
    background-image: url(/static/images/arrows.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 25px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    overflow: hidden;
    position: absolute;
    right: 32px;
    text-indent: 600%;
    top: 14px;
    white-space: nowrap;
    width: 25px;
}
.expand {
    background-position: 0px -25px;
    display: inline-block;
}
.collapse {
    display: none;
}


.feature {
    background-color: #dae2ec;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 636px 209px;
    margin: 3rem 2rem;
    padding: 14em 0 1em;
    position: relative;
}
.feature h3 {
    display: inline-block;
    width: 500px;
}
.feature .expand,
.feature .collapse {
    float: right;
    top: 235px;
}
.feature .read-more {
    margin-bottom: 0;
    padding: 0;
    text-align: right;
}
.feature li {
    margin-right: 1rem;
}
.feature .action {
    display: inline-block;
    width: 200px;
}


.accordion {
    background-color: #666;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto 150px;
    margin: 2rem;
    padding: 150px 0 0;
}
.accordion > header,
.accordion > ul {
    background-color: #dae2ec;
}
.accordion > header {
    color: black;
    border-bottom: 4px solid #fff;
    height: auto;
}
.accordion > header > h3 {
    padding: 1rem 2rem 0.5rem;

}
.accordion > header > #description {
    font-size: 1rem;
    padding: 0 2rem 0.5rem;
}
.accordion > header > #description p {
    line-height: 140%;
    margin: 0.5rem 0;
    padding: 0;
}
.accordion > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.accordion > ul > li {
    align-items: center;
    border-bottom: 4px solid #fff;
    margin: 0;
    min-height: 52px;
    padding: 0;
    position: relative;
}
.accordion h4 {
    display: flex;
    margin: 0;
    padding: 0.1rem 1rem;
}
.accordion h4 span {
    display: inline-block;
    font-size: 1.1rem;
    padding: 0.8rem 1rem 0.5rem;
}
.accordion h4 span a {
    font-weight: bold;
}
.accordion h4 span.divider {
    position: absolute;
    top: -9999px;
}
.accordion h4 span:first-child {
    width: 47%;
}
.accordion h4 span:nth-child(2) {
    width: 17%;
}
.accordion h4 span:nth-child(3) {
    width: 15%;
}
.accordion .contents {
    display: block;
    padding: 0 2rem 0.5rem;
}
.accordion .contents h2,
.accordion .contents h3,
.accordion .contents h4,
.accordion .contents h5 {
    margin: 1rem 0;
    padding: 0;
}
.accordion .contents ul {
    line-height: 140%;
    list-style-type: disc;
    margin: 0.5rem 1rem;
    padding: 0;
}
.accordion .contents li {
    margin: 0;
}
.accordion .contents p {
    padding: 0;
}
.accordion footer {
    background-color: #fff;
    font-size: 0.8em;
    line-height: 150%;
    padding: 0.5rem 0 0;
}


#secondary {
    margin-left: 2rem;
    width: 200px;
}
#secondary nav p {
    background: #21555c;
    background-repeat: no-repeat;
    background-size: 200px 85px;
    border: 1px solid #21555c;
    box-sizing: border-box;
    font-family: Fortescue, serif;
    font-size: 1.5rem;
    height: 10rem;
    line-height: 120%;
    margin: 0.5rem 0;
    padding: 0.2rem 0;
}
#secondary nav p,
#secondary nav a {
    color: #fff;
}
#secondary nav p:first-child {
    background-image: url(/static/images/why-native-plants-matter.jpg);
}
#secondary nav p:nth-child(2) {
    background-image: url(/static/images/what-you-can-do.jpg);
}
#secondary nav p:nth-child(3) {
    background-image: url(/static/images/what-we-are-doing.jpg);
}
#secondary nav a {
    box-sizing: border-box;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 90px 24px 6px 12px;
    width: 200px;
}
@media (hover: hover) {
    #secondary nav a:hover {
        text-decoration: none;
    }
}

.home #primary {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
}
.home-piece {
    background-color: #dae2ec;
    color: #000;
    margin: 0 1.5rem 2.5rem;
    position: relative;
    width: 300px;
}
.home-piece h2 {
    font-family: Basetica, sans-serif;
    font-size: 1.5rem;
    line-height: 110%;
    margin: 0.8rem 0 0.4rem;
    padding: 0 0.8rem;
}
.home-piece p {
    margin: 0;
    padding: 0.3rem 0.8rem 0.7rem;
}
.home-piece p.action {
    font-family: BaseticaBlack, sans-serif;
    font-size: 0.8rem;
}
.home-piece .action a {
    text-transform: uppercase;
}
.home-piece .rich-text p + p:last-child {   /* photo credit */
    font-size: 0.75rem;
}

.piece,
blockquote {
    margin: 3rem 0 2rem;
}
.piece:first-child,
blockquote:first-child {
    margin-top: 1rem;
}

.piece {
    border: 1px solid #368f36;
}
.piece img {
    display: block;
}
.piece h3 {
    font-family: Basetica, sans-serif;
    font-size: 1.5rem;
    padding: 0.8rem 1rem 0;
}
.piece p {
    font-size: 0.8rem;
    padding: 0 1rem;
}
.piece ul {
    margin: 0;
    padding: 0 0 0 2rem;
}
.piece li {
    font-size: 0.8rem;
    margin: 0.5rem 0;
}

.image-link {
    margin-bottom: 1rem;
    text-align: center;
}
.image-link img {
    height: auto;
    max-width: 100%;
}

.site {
    border: 1px solid #368f36;
}
.site h3 {
    font-size: 1.4rem;
    font-weight: 300;
    margin: 1rem 0;
    padding: 0 0.7rem;
}
.site h4 {
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0 0.7rem;
}
.site p {
    font-size: 0.8rem;
    padding: 0 0.7rem;
}

a.action {
    background-color: #028676;
    color: #fff;
    display: block;
    font-family: BaseticaBlack, serif;
    font-size: 0.8rem;
    padding: 0.7rem 0.5rem;
    text-align: center;
    text-transform: uppercase;
}
@media (hover: hover) {
    a.action:hover {
        text-decoration: none;
    }
}

blockquote {
    padding: 0.5em;
}
blockquote p {
    font-size: 1rem;
    line-height: 160%;
    margin: 0;
    padding: 0;
}
blockquote footer {
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
    padding: 0;
}

body.classes-list #container {
    width: 95%; /* wide content area because the page is mostly a table */
}
body.classes-list #introduction {
    width: 960px;
}
body.classes-list #primary {
    width: 100%;
}
body.subpage.classes-list h1 {
    height: auto;
    margin: 0 0 0.5rem;
}
#classes table {
    border-collapse: collapse;
    line-height: 120%;
    margin: 1rem 1rem 2rem;
}
@media (hover: hover) {
    #classes tr:hover {
        background-color: #f1fae8;
    }
}
#classes th,
#classes td {
    border-top: 1px solid #eee;
    padding: 0.25rem 0.5rem;
}
#classes th {
    background-color: #c8e8aa;
}
#classes .date,
#classes .subject {
    white-space: nowrap;
}


/* Places map, legend */
#tertiary {
    clear: both;
}
#places {
    background-color: #21555c;
    color: #fff;
    height: 510px; /* Height for the static non-JS map, enlarged by JS */
    margin: 0 0 2rem 0;
    padding: 1rem 4rem;
}
#places h2 {
    font-family: Basetica, sans-serif;
    font-size: 1.6rem;
}
#places p {
    font-weight: normal;
}
#places-map {
    /* Here, height and width are for the static (non-JS) map. When the
        JS version loads, it overrides these styles to make the map larger. */
    float: left;
    height: 480px;
    margin: 0.85rem 2rem;
    width: 640px;
}
#legend {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
    display: none;   /* Don't show for the static map. JS map shows it. */
    height: 200px;
    left: 105px;
    margin-bottom: -220px;
    position: relative;
    top: -810px;
    width: 180px;
}
#legend ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#legend h3,
#legend li {
    font-size: 0.8em;
    margin: 0.5rem;
    padding: 0;
}
#legend h3 {
    font-weight: bold;
    padding: 0 0 0.2rem 0.2rem;
}
#legend img {
    vertical-align: middle;
}

/* Map marker pop-ups */
.placeInfo {
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    width: 300px;
}
.placeInfo img {
    float: right;
    margin: 0 0 8px 8px;
}
.placeInfo p {
    margin: 0.5rem 0;
    padding: 0;
}
.placeInfo .type {
    font-size: 0.9em;
    text-transform: uppercase;
}
.placeInfo .title {
    font-size: 1.2rem;
    font-weight: bold;
}
.placeInfo .location {
    font-style: italic;
}


/* Places list styles for static (non-JS) version of map */
ul.places {
    list-style-type: none;
    margin: 0 4rem;
}
ul.places li {
    min-height: 100px;
    margin: 0 0 1.5rem;
    padding: 0;
}
ul.places li p {
    font-size: 0.8em;
    margin: 0 0 0.5rem 120px;
    padding: 0;
}
ul.places .label {
    background-color: #ddd;
    border: 1px solid #ccc;
    color: #000;
    float: left;
    margin: 0 0.5rem 0 1rem;
    padding: 0 0.3rem;
}
ul.places .label.yellow {
    background-color: #eac157;
}
ul.places .label.red {
    background-color: #f78882;
}
ul.places .label.blue {
    background-color: #95bafc;
}
ul.places .label.green {
    background-color: #a4c13a;
}
ul.places .label.purple {
    background-color: #b49bc2;
}
ul.places .type {
    font-size: 12px;
    line-height: 150%;
    text-transform: uppercase;
}
ul.places .title {
    font-size: 1rem;
    font-weight: bold;
}
ul.places .location {
    font-style: italic;
}
ul.places .image {
    float: left;
    height: 100px;
    width: 100px;
}


/* Events lists: common styles */
#events ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#events li.event p {
    margin: 0;
    padding: 0;
}
#events li.event .type {
    font-size: 12px;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
}


/* Events list: full view (Visit section) */
body.visit #introduction {
    margin-bottom: 2rem;
}
body.visit #primary #events h2,
body.visit #primary #events h3 {
    margin: 0.5rem 0 2rem 2rem;
    padding: 0;
}
body.visit #primary #events form {
    margin: 1rem 0 2rem;
    text-align: center;
}
body.visit #primary #events input,
body.visit #primary #events select {
    font-size: 1em;
    margin: 0 0.2rem;
}
body.visit #primary #events li {
    margin: 1rem 0 2rem 2rem;
}
body.visit #primary #events li.event .title {
    font-size: 1.1rem;
    line-height: 120%;
}
body.visit #primary #events li.event .title a {
    font-weight: normal;
}
body.visit #primary #events li.event .date {
    font-weight: bold;
    margin: 0.2rem 0;
}
body.visit #primary #events li.event .short-description {
    margin: 0.4rem 0 0;
}
body.visit #primary #events .empty-list {
    margin: 3rem 0 0;
}
body.visit.events:not(.event) #secondary {
    margin-top: 3.1rem;
}


/* Events list: compact view */
#secondary #events {
    margin: 0 0 2rem 0;
}
#secondary #events h2,
#secondary #events h3,
#secondary #events li,
#secondary #events > p {
    padding: 0 0.5rem;
}
#secondary #events p:not(.type) {
    font-size: 0.9rem;
}
#secondary #events li {
    margin: 1.5rem 0;
}
#secondary #events a.all {
    font-weight: normal;
}


/* Events list and event pages */
body.events #primary,
body.events #secondary {
    margin-top: 1rem;
}


/* Event page */
body.event .type {
    font-weight: bold;
    margin: 0.6rem 0;
    text-transform: uppercase;
}
body.event .date-time-details {
    font-weight: bold;
    margin: 1.5rem 0 0;
}
body.event table {
    margin: 1.5rem 0;
}
body.event td,
body.event th {
    line-height: 120%;
    margin: 0;
    padding: 0 0 1rem;
    vertical-align: top;
}
body.event th {
    padding-left: 2rem;
    text-align: left;
    width: 25%;
}
body.event td {
    padding-left: 3rem;
}
body.event .about {
    font-size: 90%;
}
body.event .register {
    margin-bottom: 3rem;
}
body.event .register a {
    background: rgba(108, 19, 24, 0.07);
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    margin-right: 1rem;
    padding: 0.25rem 1rem;
}

body.search main {
    min-height: 490px;
    padding: 0 12rem;
}
body.search main h1 {
    margin: 1rem 0;
    padding: 0;
}
body.search main h2 {
    font-size: 1.5rem;
    margin: 2rem 0;
    padding-left: 0;
}
body.search main h3 {
    font-size: 1.2rem;
    font-weight: normal;
    padding-left: 0;
}
body.search main h3 a {
    font-weight: normal;
}
body.search main p {
    margin-top: 0.2rem;
    padding: 0;
}
body.search main ul {
    list-style-type: none;
    margin: 0 0 2em;
    padding: 0;
}
body.search main li {
    margin: 1.5rem 0;
}
body.search main form {
    margin: 2rem 0;
}
body.search main form input[type="text"] {
    font-family: monospace;
    font-size: 1.45rem;
    padding: 0.35rem;
    width: 60%;
}
body.search main form input[type="submit"] {
    background: #407828;
    background-image: url(/static/images/search.png);
    background-position: 12px 10px;
    background-repeat: no-repeat;
    background-size: 20px;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    padding: 0.6rem 0.6rem 0.6rem 1.8rem;
    width: 100px;
}
body.search .results p > a {
    color: #009a16;
    font-weight: normal;
}
body.search .pages li {
    display: inline-block;
    font-size: 1.2rem;
    text-align: right;
    width: 48%;
}
body.search .pages li:first-child {
    text-align: left;
}

#story {
    display: none;   /* JS will display the story iframe */
}
#story iframe {
    height: 80%;
    position: absolute;
    width: 100%;
}

.page-footer {
    background-color: #a7da7e;
    border-top: 8px solid #21555c;
    clear: both;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    width: 100%;
}
.page-footer__column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    padding: 1rem 2rem;
}
.page-footer__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.page-footer__list-item {
    line-height: 130%;
    margin: 1rem 0;
}
.page-footer__logo-link {
    display: inline-block;
    margin-left: -4px;
    padding: 4px 4px 0;
}
.page-footer__logo {
    filter: brightness(0.8);
    height: 90px;
    width: 176px;
}
.page-footer__address,
.page-footer__mission {
    font-style: normal;
    line-height: 140%;
}
.page-footer__mission {
    margin-bottom: 2rem;
    max-width: 20rem;
}
.page-footer__social-media-link {
    display: inline-block;
    margin: 0 0.5rem 0 -4px;
    padding: 4px 4px 0px;
}
.page-footer__social-media-icon {
    margin: 0;
    padding: 0;
    width: 40px;
}
.page-footer__partners {
    align-items: center;
    display: flex;
    margin-left: -4px;
    padding-top: 0.5rem;
}
.page-footer__partner-link {
    display: inline-block;
    margin: 0 0 0 0;
    padding: 4px 4px 0;
}
.page-footer__partner-link:first-child {
    margin-right: 1.9rem;
}
.page-footer__partner-logo {
    width: 75px;
}

/* Site map */
.site-map #primary {
    width: 850px;
}
.site-map-lists {
    display: flex;
    margin: 1.5rem 0;
}
.site-map-lists__list {
    list-style-type: none;
    margin: 0;
}
.site-map-lists__list--primary {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 60rem;
    width: 65%;
}
.site-map-lists__list--secondary {
    width: 25%;
}
.site-map-lists__sublist {
    line-height: 0.9rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.site-map-lists__item-level-1 {
    font-size:1.1rem;
    margin-bottom: 2rem;
    margin-right: 1.8rem;
}
.site-map-lists__item-level-2 {
    font-size: 0.9rem;
}

/* "New name" page */
body.new-name {
    background: #f9f0e2;
}
body.new-name .intro {
    color: #21555c;
    font-family: Basetica, sans-serif;
    font-size: 1.2rem;
    margin: 4rem 0 0;
    text-align: center;
}
body.new-name h1 {
    font-size: 0px;
    padding-top: 1;
}
body.new-name h1 img {
    display: block;
    margin: 0 auto;
}
body.new-name .note {
    font-family: Basetica, sans-serif;
    margin: -10rem 0 0 25%;
}
body.new-name h2 {
    color: #028676;
    font-family: BaseticaBlack, sans-serif;
    font-size: 1.2rem;
    padding: 0;
    text-transform: uppercase;
}
body.new-name h2 + p {
    color: #21555c;
    line-height: 140%;
    width: 18rem;
}
body.new-name p a {
    text-decoration: underline;
}


/* Style overrides for various screen sizes */

@media (min-width: 1120px) {
    /* Home page: switch to a wider layout at wide page widths. */
    .home #primary {
        width: 900px;
    }
    .home-piece {
        width: 400px;
    }
    .home-piece img {
        width: 100%;
    }
    .home #secondary {
        margin-left: 1rem;
    }
}

/*** max-width sizes ***/

@media (max-width: 1900px) {
    body.new-name .note {
        margin-left: 10%;
    }
}

@media (max-width: 1240px) {
    /* Make last nav. menu open leftward on all but very wide windows. */
    header > nav li:last-child ul {
        right: 0;
    }
}

@media (max-width: 1000px) {
    body.new-name .note {
        margin: 0 0 0 4rem;
        width: 100%;
    }
}

@media (max-width: 960px) {
    #primary {
        padding: 1rem 0;
        width: 615px;
    }
    #secondary {
        margin-left: 1rem;
    }
    .home-piece {
        margin: 0 0.5rem 2.5rem;
        width: 290px;
    }
    .home-piece img {
        width: 100%;
    }
}

@media (max-width: 930px) {
    #container {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    #primary {
        width: 552px;
    }
    #secondary {
        margin-left: 1rem;
    }
    .home-piece {
        width: 260px;
    }
}

@media (max-width: 758px) {
    body {
        font-size: 80%;
    }
    #container {
        width: auto;
    }
    #primary,
    #secondary {
        margin-bottom: 0;
    }
    #primary {
        padding-bottom: 0;
        width: 100%;
    }
    #secondary {
        margin-left: 1rem;
    }
    header {
        height: 100px;
    }
    header .id {
        padding-left: 1rem;
    }
    header .id img {
        height: 45px;
        width: 130px;
    }
    header nav > ul a {
        padding: 0.75rem 0.9em;
    }
    header nav > ul.sub li {   /* sub-navigation */
        font-size: 0.75rem;
        padding: 0.7rem 0rem;
    }

    /* Both main and sub-navigation scrolls horizontally on small screens. */
    header nav ul {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;   /* hide scrollbar in Firefox */
        white-space: nowrap;
    }
    header nav ul::-webkit-scrollbar {
        display: none;   /* hide scrollbars in Chrome, Safari, etc. */
    }

    /* hover menus: not seen on small screens */
    header nav > ul ul {
        display: none;
    }
    @media (hover: hover) {
        header nav > ul li:hover ul {
            top: 37px;
        }
    }

    header .satellite {
        right: 0;
        top: 4px;
        width: 10rem;
    }
    header .satellite li {
        margin-right: 0.5rem;
        margin-top: 0.1rem;
    }
    header .satellite li.join {
        padding-right: 0;
    }
    header .satellite li.search {
        margin-right: 0;
    }
    header input[type="search"] {
        width: 7rem;
    }
    h2,
    h3,
    h4,
    h5,
    main p,
    main ul {
        padding: 0 1rem;
    }
    main blockquote p {
        font-size: 0.9rem;
        padding: 0;
    }
    hr {
        margin: 1rem;
    }
    h1,
    body.home h1 {
        font-size: 1.3rem;
        height: 200px;
        padding: 4rem 1rem 0;
    }
    body.subpage h1 {
        height: 140px;
        padding-top: 4rem;
    }
    h1 span {
        width: 320px;
    }
    h1.bottom {
        padding-top: 8rem;
    }
    body.no-image-header #primary {
        margin-top: 2.5rem;
    }
    body.no-image-header h1 {
        height: auto;
        margin: 1rem 0;
        padding: 1.5rem 1rem 0;
    }
    body.subpage.event h1 {
        padding: 0 1rem;
    }
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 1rem;
    }
    h4 {
        font-size: 0.9rem;
    }
    h5 {
        font-size: 0.8rem;
    }
    main p {
        font-size: 0.8rem;
    }
    section a.action:link {
        text-decoration: none;
    }
    #places {
        height: 780px !important;   /* override what JS set at desktop size */
        margin: 0;
        padding: 1rem 0;
    }
    #places-map {
        float: none;
        height: 600px !important;   /* override what JS set at desktop size */
        margin: 1rem;
        width: 80% !important;   /* override what JS set at desktop size */
    }
    #legend {
        left: 26px;
        top: -730px;
    }
    ul.actions li .text {
        display: block;
        width: auto;
    }
    ul.actions li .button {
        display: block;
        float: none;
        margin-top: 0.5rem;
    }
    .home-piece {
        margin: 0.5rem;
        width: 290px;
    }
    .home-piece h2 {
        font-size: 1rem;
    }
    .home-piece img {
        width: 290px;
    }
    .collapse,
    .expand {
        right: 16px;
    }
    .feature {
        background-size: 427px 140px;   /* 1/2 of desktop-size height */
        margin: 2rem 1rem;
        padding: 11.5em 0 1em;
    }
    .feature h3 {
        width: 75%;
    }
    .feature .collapse,
    .feature .expand {
        top: 153px;
    }
    #introduction h2 + p {
        font-size: 0.9rem;
    }
    body.home h1 {
        height: 300px;
    }
    body.home h1 a {
        margin-top: -30px;
        position: absolute;
    }
    body.home h1 span {
        margin-top: 0;
        padding-left: 0;
    }
    body.home .subtitle {
        font-size: 0.75rem;
        left: 16px;
        margin-left: 0;
        padding-left: 0;
        top: -220px;
        width: 240px;
    }
    body.visit #primary #events h2,
    body.visit #primary #events h3 {
        margin: 0.5rem 0 1rem 1rem;
    }
    body.visit #primary #events li {
        margin: 1rem 0 1rem 1rem;
    }
    body.visit #primary #events li.event .title {
        font-size: 0.9rem;
    }
    #secondary #events h2,
    #secondary #events h3,
    #secondary #events li,
    #secondary #events > p {
        padding: 0;
    }
    #secondary #events p:not(.type) {
        font-size: 0.8rem;
    }
    body.events:not(.event) #primary {
        margin-top: 1rem;
    }
    body.event th {
        padding-left: 1rem;
        width: auto;
    }
    body.search main {
        padding: 0 1rem;
    }
    .placeInfo {
        width: 200px;
    }
    .placeInfo img {
        height: 75px;
        width: 75px;
    }
    .accordion {
        margin: 0 1rem 1rem;
    }
    .accordion > header > h3 {
        padding: 1rem 1rem 0.5rem;
    }
    .accordion > header > #description {
        font-size: 0.8rem;
        padding: 0 1rem 0.5rem;
    }
    .accordion .contents {
        font-size: 0.8rem;
        padding: 0 1rem 0.5rem;
    }
    .accordion h4 span {
        font-size: 0.8rem;
        font-weight: bold;
        padding: 0.75rem 0.5rem 0.75rem 0;
    }
    #classes {
        overflow-x: scroll;
    }
    .page-footer__id {
        margin: 0;
    }
    .page-footer__logo {
        height: 60px;
        width: 110px;
    }
    body.site-map #primary {
        margin-top: 0;
    }
    .site-map-lists,
    .site-map-lists__list--primary {
        display: block;
    }
    .site-map-lists__list {
        padding: 0 1rem;
    }
    .site-map-lists__list--primary {
        height: auto;
    }
    .site-map-lists__list--primary,
    .site-map-lists__list--secondary {
        width: auto;
    }
    .site-map-lists__item-level-1 {
        margin-right: 0;
    }
    body.new-name .intro {
        font-size: 120%;
        margin: 1rem 1rem 3rem;
    }
    body.new-name h1 {
        font-size: 0px;
    }
    body.new-name h1 img {
        width: 90%;
    }
}
@media (max-width: 571px) {
    h1 span {
        margin: 0;
    }
    .page-footer__column {
        flex: none;
        padding-bottom: 0;
    }
    .page-footer__mission {
        max-width: 15rem;
    }
    body.home .subtitle {
        margin: 0;
    }
    body.new-name .intro {
        font-size: 100%;
    }
    body.new-name h1 {
        padding-top: 0;
    }
    body.new-name .note {
        margin: 0 6%;
    }
    body.new-name h2 + p {
        width: 90%;
    }
}