@font-face {
    font-family: Symbola;
    src: url(../fonts/Symbola-26xx.woff) format("woff");
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Regular.woff) format("woff");
}

@font-face {
    font-family: Lato;
    font-weight: bold;
    src: url(../fonts/Lato-Bold.woff) format("woff");
}

@font-face {
    font-family: Lato;
    font-style: italic;
    font-weight: normal;
    src: url(../fonts/Lato-Italic.woff) format("woff");
}

@font-face {
    font-family: Lato;
    font-style: italic;
    font-weight: bold;
    src: url(../fonts/Lato-BoldItalic.woff) format("woff");
}

@font-face {
    font-family: Junicode;
    src: url(../fonts/Junicode.woff) format("woff");
}

body {
    font: 10px/1.3 Lato, Symbole, Verdana, sans-serif;
    background: url(../images/body_bg.jpg) center/cover no-repeat fixed;
    background-color: #bbbcc7;
    color: #634e42;
}

small {
    font-size: smaller;
}

strong {
    font-weight: bold;
}

.banner {
    background-image: url(../images/banner_bg.jpg);
    background-size: 100% auto;
    height: 120px;
    color: #634e42;
    width: 100%;
    margin-bottom: 4em;
}

.banner h1 {
    font-size: 3em;
    text-transform: uppercase;
    margin: 0;
}

.banner h2 {
    font-size: 2em;
    font-style: italic;
    margin: 0 0 0 2em;
}

.banner h3 {
    display: block;
    font-size: small;
    font-weight: normal;
}

.banner > img.brand {
    position: absolute;
    top: 0;
    left: 40px;
    margin: 0;
}

.banner-logo {
    float: right;
    margin: 20px;
}

.banner input {
    width: 100%;
    background-color: #bbbcc7;
}

.banner-slogan {
    margin-left: 220px;
    padding-top: 2em;
}

.symbol {
    font-family: "Symbola";
}

h1 {
    font-size: xx-large;
}

h2 {
    font-size: x-large;
}

h1, h2, h3 {
    margin: .5em 0;
}

h3 {
    font-size: large;
    font-weight: bold;
}

h3 + div, h3 + ul {
    margin-left: 1em;
}

blockquote {
    margin-left: 1em; padding: 1em; border-left: 3px solid #ccc;
}

p {
    margin-top: 1em;
}

p + * {
    margin-top: 1em;
}

a {
    color: #3b5b7e;
    text-decoration: underline;
}

*[lang] {
    border-bottom: thin dotted;
}

sub, sup {
    font-size: .83em
}

sub {
    vertical-align: sub
}

sup {
    vertical-align: super
}

i {
    font-style: italic;
}

/**
 * DYI Grid: https://css-tricks.com/dont-overthink-it-grids/
 */

.content {
    line-height: 1.8em;
    font-size: 1.5em;
    float: left;
    min-width: 110em;
}

.content h1, .content h2, .content h3 {
    line-height: 1.8em;
}

.content:after {
    content: "";
    display: table;
    clear: both;
}

/* .content h2 { */
/*     border-bottom: thin solid; */
/* } */

.navigation {
    float: left;
    width: 12.5em;
    padding: 1em 2em;
}

.navigation:first-child {
    margin-top: 3em;
}

.navigation-collapse ul {
    display: none;
}

.navigation ul {
    text-transform: uppercase;
    color: black;
}

.navigation ul ul {
    margin-top: 0;
    margin-left: 1em;
    font-size: small;
}

.navigation li {
    line-height: 1.0em;
    margin: 1.1em 0;
}

.navigation .active {
    font-weight: bold;
}

.navigation a {
    color: inherit;
    text-decoration: none;
}

.mainpage {
    float: left;
    width: 50em;
    padding: 1em 2em;
}

.infopanel {
    float: left;
    min-width: 30em;
    padding: 1em 2em;
}

.infopanel h1 {
    font-size: larger;
    margin: 1em 0;
    border-bottom: thin solid;
}

.teaser {
    position: absolute;
    left: 75em;
    width: 500px;
}

.teaser li {
    float: left;
    max-width: 200px;
    width: 15em;
    height: 400px;
}

.teaser li + li {
    margin-left: 1em;
}

.teaser > img {
    padding: 1em;
    margin-left: 40%;
}

.bg-blue {
    background-color: #364759;
}

.bg-lgrey {
    background-color: #888d96;
}

.bg-mgrey {
    background-color: #a19ea0;
}

.list-styled {
    list-style: disc outside;
}

.ref-place, .ref-person {
    color: #3b5b7e;
    text-decoration: none;
}

.ref-person:before, .ref-place:before {
    content: " ⌘ ";
}

.facet { display: table; font-size: small; line-height: 1.4em; }
.facet a { text-decoration: none; }
.facet-label { display: table-header-group; }
.facet-label > span { display: table-cell; }
.facet-value { display: table-row; margin: 0; }
.facet-value-label, .facet-value-count { display: table-cell; }
.facet-value-label { width: 12em; }
.facet-value .active:before { content: "✓"; margin-left: -1em; }
.facet + .facet { margin-top: 1em; }
.facet ul { margin-left: 1em; }

.search-result dt { float: left; width: 12em; margin-left: 2em; }
.search-result dd { margin-left: 14em; }

.repertorium table {
    display: block;
    width: 100%;
}

.repertorium table {
    display: block;
    background-image: url(../images/table.png);
    background-repeat: repeat;
}

.repertorium td, .repertorium th {
    padding: .5em 1em;
}

.repertorium td {
    color: #222;
}

.repertorium th {
    color: #644e43;
    text-align: right;
    width: 12em;
    border: none;
}

.repertorium table + table {
    margin-top: .5em;
}

.repertorium p {
    margin: 0;
}

.repertorium ul {
    list-style: disc outside;;
}

.pagination {
    text-align: center;
}

.pagination li {
    display: inline;
}

.content input[type=text] {
    width: 60%;
}

.content input, select {
    border: thin solid #222;
    background-color: white;
}

fieldset {
    text-align: center;
}

label {
    display: none;
}

.js-toggle-sibling {
    cursor: pointer;
}

.js-toggle {
    display: none;
}

table {
    border-collapse: collapse;
}

td, th {
    padding: 0.25em;
}

th {
    font-weight: bold;
    border-bottom: 1px solid;
}

.print-only { display: none; }

.error { color: crimson; font-size: 1rem !important; font-weight: normal; }

.diarium {
    font-family: "Junicode", "Symbola";
}

.diarium .pagination {
    margin-bottom: 1em;
    font-family: Lato;
    display: block;
    text-align: left;
}

.diarium .pagination a {
    text-decoration: none;
    color: inherit;
}

.diarium .pagination .prev:before {
    content: "▲";
    color: red;
}

.diarium .pagination .next:before {
    content: "▼";
    color: red;
}

.diarium .pagination h1 {
    font-size: xx-large;
    margin: 0;
    border: none;
}

.content .diarium h2 {
    font-size: large;
    font-weight: bold;
    display: inline;
    border-bottom: none;
}

.diarium * + p {
    display: inline;
}

.diarium p + p {
    display: block;
}


.diarium div + div {
    margin-top: 1em;
}

.diarium .margin-left {
    position: absolute;
    left: 1.5rem;
    max-width: 12rem;
    font-size: 1rem !important;
}

.diarium .unclear::after {
    content: "[?]";
}

.annotation {
    text-decoration: none;
    border-bottom: thin dashed;
    display: inline;
}

.annotation-reference {
    padding: 0 .25em;
    text-decoration: none;
    color: inherit;
}

.annotation-target + * {
    display: inline;
}

.annotation-target {
    background-color: #fff8dc;
    border: thin solid #ffe4b5;
    padding: .25em;
    position: absolute;
    left: 65em;
    width: 25rem;
    max-width: 25rem;
    font-size: 1rem !important;
    font-weight: normal !important;
    z-index: 100;
}

.active {
    font-weight: bold;
}

.diarium .active, .diarium .active * {
    font-weight: inherit;
    background-color: yellow;
}

.margin-left .annotation-target {
    margin-left: -1.5em;
}

.facsimile {
    background-color: black;
    border: thin solid grey;
    padding: .25em;
    position: fixed;
    left: 65em;
    width: 25rem;
    max-width: 25rem;
    font-size: 1rem !important;
    font-weight: normal !important;
    z-index: 100;
}

.facsimile a {
    padding: .25em;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.facsimile img {
    width: 100%;
}

#facsimile {
    display: block;
}

.controls a {
    text-decoration: none;
}

.controls {
    text-align: right;
    font-size: small;
}

.controls li {
    display: inline;
    padding: 0 1em;
}

.register dl { margin-left: 2em; }
.register dt { font-weight: bold; margin-left: -1em; margin-right: 1em; float: left; }
.register dt a { margin: 0 0.25em; text-decoration: inherit;  }

.cipher:before { content: "{:"; }
.cipher:after  { content: ":}"; }

.breadcrumbs li { display: inline; }
.breadcrumbs li + li:before { content: " / "; }

ol {
    list-style-type: roman;
}

ol em {
    background-color: yellow;
}