@font-face {
  font-family: 'Slabo 27px';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/Slabo27px-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/Domine-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Slabo 27px';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/Slabo27px.woff2') format('woff2'),
       url('/static/fonts/Slabo27px-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/Domine.woff2') format('woff2'),
       url('/static/fonts/Domine-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, html, header {
    margin: 0;
    padding: 0;
    background-color: #000;
}

div#outer {
    margin: 0 auto;
    max-width: 1500px;
}

.wide-only-block { display: none; }
.narrow-only-block { display: block; }
.wide-only-inline { display: none; }
.narrow-only-iinline { display: inline; }

header {
    color: #ff9;
    background-image: url('/static/images/header-550.jpg');
    background-repeat: no-repeat;
    background-position: left 0;
    background-size: 100%;
}

header h1 {
    margin: 0;
    padding: 0.5em 0 0.5em 2.5em;
    background-image: url('/static/images/lcc-logo.png');
    background-repeat: no-repeat;
    background-position: 0.5em 50%;
    background-size: 1.5em;
}

header nav {
    color: #000;
    margin: 0;
    padding: 0;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

header nav ul li {
    float: left;
}

header nav ul li a {
    background-color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: block;
    padding: 0.6em 1em;
    color: #000;
    font-family: 'Slabo 27px', sans-serif;
    font-weight: bold;
    border-right: solid 1px #999;
    border-bottom: solid 1px #999;
}

header nav a:hover {
    background-color: #eee;
    color: #333;
}

body.home nav li#nav_home a,
body.staff nav li#nav_staff a,
body.membership nav li#nav_membership a,
body.patronage nav li#nav_patronage a,
body.pieces nav li#nav_pieces a,
body.concerts nav li#nav_concerts a {
    background-color: #fff;
    border-bottom: solid 1px #fff;
}

div#main_container {
    width: 100%;
    background-color: #fff;
    padding-top: 0.1em;
    padding-bottom: 1em;
    clear: both;
    line-height: 1.5;
}

div#main_container::after {
    content: "";
    display: table;
    clear: both;
}

div#main_container a:hover {
    background-color: #ddf;
}

details {
  padding: 0.25em;
}

summary {
  cursor: pointer;
}

details[open] > summary {
    background-color: #ddd;
}

.scrollable {
    overflow-x: auto;
}

.hidden {
    display: none;
}

.button {
    border-radius: 4px;
    text-align: center;
    width: auto;
    border: solid 2px #333;
    padding: 12px;
    margin: 6px auto;
    background-color: #66c;
    box-shadow: 3px 3px 5px #bbb;
    font-weight: bold;
    color: white;
    display: block;
    max-width: 600px;
}

a.button, a.button:visited {
    color: white;
    text-decoration: none;
}

div#main_container a.button:hover {
    background-color: blue;
}

/* abbr used for hCalendar... */
abbr.value, abbr.summary {
    border-bottom: none;
    text-decoration: none;
    cursor: inherit;
}

sup {
    vertical-align: top;
    font-size: 70%;
}

em.piece {
    color: #266;
    padding-right: 0.15em;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

td, th {
    padding: 3px;
    border: solid 1px #555;
}

td.ctr, th.ctr {
    text-align: center;
}

.rehnote { color: #777; }

dt {
    margin-top: 1em;
    font-weight: bold;
}

body.pieces div#main_container li {
    margin-bottom: 0.5em;
}

.smallyears { font-size: 80%; }

.staffimg {
    display: block;
    margin: 1em auto;
}

body.contact dd a {
    font-size: 70%;
}

div#main_container img {
	max-width: 100%;
	height: auto;
    border: solid 1px #555;
    vertical-align: middle;
}

div.poster {
    float: right;
    border: solid 1px #555;
    border-radius: 3px;
    box-shadow: 2px 2px #888;
    margin: 1em;
    clear: both;
}

div.poster a, div.poster img {
    margin: 0;
    padding: 0;
    border: none 0 #000;
}

div#main_container section {
    margin: 0;
    padding: 0.5em 1em;
    font-family: 'Domine', serif;
}

p.prevnext {
    clear: both;
}

a.idxltr {
    border: solid 1px #aaa;
    border-radius: 2px;
    padding: 0.2em;
    margin: 0 0.1em;
    text-decoration: none;
}

footer {
    padding: 0.25em;
    margin: 0;
    text-align: center;
    color: #aaa;
    line-height: 1.6;
    font-family: 'Domine', serif;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
}

footer > section {
    float: left;
    margin: 0 1em;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer h2 {
    font-variant: small-caps;
    font-size: 1.2em;
}

footer a {
    color: #ffc;
    width: 100%;
    display: inline-block;
    padding: 0.25em;
}

footer a:visited {
    color: #ff9;
}

footer a:hover {
    background-color: #333;
}

footer a svg {
    margin-right: 6px;
}

footer a img {
    margin-right: 6px;
}

h1, h2, h3 {
    font-family: 'Slabo 27px', sans-serif;
}

table, td, th {
    border: solid 1px #888;
}

.external {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 13px;
}

@media screen and (min-width: 420px) {
    header nav ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 550px) {

    .wide-only-block { display: block; }
    .narrow-only-block { display: none; }
    .wide-only-inline { display: inline; }
    .narrow-only-inline { display: none; }

    header nav ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    header nav ul li#nav_home {
        grid-column: 1 / 3;
    }
    header nav ul li#nav_concerts {
        grid-column: 3 / 5;
    }
    body.contact dd a {
        font-size: 100%;
    }
    footer {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .staffimg {
        float: left;
        margin: 1em;
        box-shadow: 2px 2px 5px #888;
    }
}

@media screen and (min-width: 800px) {
    header {
        background-image: url('/static/images/header.jpg');
    }
    header nav ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    header nav ul li a {
        border-radius: 4px 4px 0 0;
        padding: 0.4em 1em;
    }
    header nav ul li#nav_home {
        grid-column: 1;
    }
    header nav ul li#nav_concerts {
        grid-column: 2;
    }
    div#main_container {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    body.home div#main_container {
        display: grid;
        grid-template-columns: 38% 62%;
    }
    body.home-equal div#main_container {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    body.staff div#main_container {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    body.staff section#others {
        grid-column: 1 / 3;
    }
    section#about, body.staff section#conductor {
        border-right: dashed 1px #ddd;
    }
}

.timehideearly { display: none; }
.timehidelate { display: block; }