/*** RESET *******************************************************************/

body { margin: 0; border: none; padding: 0; font-size: 100%; }
main, header, article, aside, section, nav, footer, figure, figcaption { display: block; width: auto; }
main, header, article, aside, section, nav, footer, figure, figcaption,
div, h1, h2, p, img, ul, ol, li, dl, dt, dd,
table, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend, input, label, select, option,
span, em, strong, i, b, address, cite, abbr, kbd, a, a:link, a:active, a:visited,
br { margin: 0; border: none; padding: 0; font: inherit; line-height: 1em; vertical-align: baseline; color: inherit; text-decoration: inherit; }
table { table-layout: auto; border-spacing: 0; border-collapse: collapse; empty-cells: show; }

/*** GENERIC TEXT ************************************************************/

body { font-family: sans-serif; font-weight: 400; }

h1 { font-size: 1.5em; line-height: 1em; margin-bottom: 1em; }
h2 { font-size: 1.25em; line-height: 1.2em; margin-bottom: 1.2em; }
h2 { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
section h1 { font-size: 1.25em; line-height: 1.2em; margin-bottom: 1.2em; }
section section h1 { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
section section section { margin-left: 1.5em; }
p, li, dt, dd { font-size: 1em; line-height: 1.5em; }

p, ul, ol, dl { margin-bottom: 1.5em; }
dd + dt { margin-top: 1.5em; }

ul p, ul ul, ul ol, ul dl,
ol p, ol ul, ol ol, ol dl { margin-bottom: 0em; }

h1, h2 { font-weight: 600; }

ul, ol, dd { padding-left: 1.5em; }
ul, ol { list-style-position: outside; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-latin; }
ol ol ol { list-style-type: lower-greek; }

a:link:hover { text-decoration: underline; }
cite, abbr, i { font-style: italic; }
strong, em, b, kbd { font-weight: 600; }

body { color: #444; background-color: #fff; }
a, a:link, a:active, a:visited { color: #26b; }

body { padding: 1em; }

article > img, section > img { display: block; margin: 0 auto 1.5em auto; }
img.floating { float: right; margin-left: 1em; }

/*** TABLE *******************************************************************/

table { margin: 0 auto 1.5em auto; min-width: 100%; }
th, td { border-width: 1px; border-style: solid; line-height: 1.5em; padding: 0.75em 0.75em 0.75em 0.75em; }
th, td { vertical-align: middle; } /* without vertical-align Firefox computes empty cell height wrong */
th { text-align: center; background-color: #eee; font-weight: bold; }
td { text-align: left; }
table { margin-top: -1px; } /* border compensation */
th, td { padding-top: calc(0.75em - 1px); } /* border compensation */

/*** HEADER & FOOTER *********************************************************/

body > header {	font-variant: small-caps; text-transform: lowercase; letter-spacing: 2px; }
body > header > nav > ul { padding-left: 0; }
body > header > nav > ul > li { list-style-type: none; }
body > header > nav.portal-menu { font-size: 0.9em; font-style: italic; }
body > header > nav.portal-menu > ul > li + li { display: none; }
body > header > nav.portal-menu a { color: #9bd; }
body > header > h1 > a, body > header > h1 > a:link, body > header > h1 > a:active, body > header > h1 > a:visited { text-decoration: none; color: inherit; }
body > header > nav.portal-menu ul { margin-bottom: 0em; }
body > header > h1 { margin-bottom: 0.125em; margin-top: 0.125em; }

body > footer { font-size: 0.75em; text-align: center; margin-top: 5em; color: #888; font-variant: small-caps; }
body > footer img.si-logo { padding-bottom: 0.5em; border-bottom: 1px solid #ddd; }
body > footer a, body > footer a:link, body > footer a:active, body > footer a:visited { color: inherit; }

nav.language-menu { position: absolute; right: 20px; top: 20px; font-variant: small-caps; letter-spacing: 2px; font-size: 0.75em; color: #9BD; }
nav.language-menu li { list-style-type: none; text-align: right; margin-bottom: 5px; }

@media all and (min-width: 820px) {
    
    body { padding: 0; margin-top: 50px; margin-bottom: 50px; text-align: center; }
    body > header { margin: 0 auto; margin-bottom: 3em; }
    body > header > nav.portal-menu { font-size: 1em; }
    body > header > nav.portal-menu > ul > li { display: inline; }
    body > header > nav.portal-menu > ul > li + li { display: inline; margin-left: 1em; }
    body > header > h1 { font-size: 2.5em; font-weight: normal; }
    body > header > nav.application-menu { font-size: 1.25em; }
    body > header > nav.application-menu > ul > li { display: inline; }
    body > header > nav.application-menu > ul > li + li { display: inline; margin-left: 1em; }
    body > main { max-width: 800px; margin: 0 auto; padding: 0; text-align: justify; }

}

body > footer p#status-message { color: #f00; position: fixed; bottom: 0; left:0; right: 0; margin: 0.25em; background-color: rgba(255, 127, 127, 0.5); padding: 0.1em 0.25em; }

/*** FORM ********************************************************************/

form { border: 1px solid #eee; padding: 0.5em; text-align: center; margin-bottom: 1.5em; }
form fieldset#expression-fieldset { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr; row-gap: 0.5em; column-gap: 0.5em; }
form input[type='text'] { border: 1px solid #bbb; padding: 0 0.5em; }
form fieldset#expression-fieldset #submit-button { width: 32px; height: 32px; border: none; background: url('/zejler/search-button.svg'); padding-left: 32px; font-size: 0px; }
form fieldset#expression-fieldset #submit-button { justify-self: end; }
@media all and (min-width: 820px) {
    form fieldset#expression-fieldset { display: grid; grid-template-rows: 1fr; grid-template-columns: 50% auto 96px 32px; column-gap: 0.5em; }
}
/*** QUERY RESULT ************************************************************/

article.query-result p.message { padding: 0.5em; background-color: #cde; text-align: center; }

/*** CATALOGUE ITEM **********************************************************/

a.external-link::before { content: url('/zejler/external-link-icon.svg'); margin-right: 0.25em; white-space: nowrap; display: inline-block; width: 0.75em; }

ul#catalogue-query-results { padding-left: 0; }
li.catalogue-item { list-style-type: none; }
.catalogue-item { border: 1px solid #aaa; margin-bottom: 0.5em; padding: 0.5em; min-height: 70px; }
.catalogue-item p { margin-bottom: 0em; text-align: left; }
.catalogue-item a.cover img { width: 50px; height: 70px; filter: drop-shadow(0px 0px 2px #888); }
.catalogue-item p.title { font-style: italic; color: #246; }
.catalogue-item p.title a { color: inherit; }
.catalogue-item p.authors a { color: #662; }
.catalogue-item p.edition a { color: #622; }
@media all and (min-width: 410px) {
	.catalogue-item { display: grid; grid-template-columns: 58px 1fr; }
	.catalogue-item a.cover { grid-column: 1; grid-row: 1/4; }
}

nav#related-items { font-size: .75em; margin-bottom: 0.66em; padding: 0.66em; display: flex;  gap: 1.33em 2em; flex-wrap: wrap; }
nav#related-items { text-align: center; justify-content: center; border-top: 1px dotted #aaa; padding-top: 1.33em; }
nav#related-items a.item-list::before,
nav#related-items a.preceding-item::before,
nav#related-items a.following-item::before { margin-right: 0.25em; white-space: nowrap; display: inline-block; width: 0.75em; }
nav#related-items a.preceding-item::before  { content: url('/zejler/backward-icon.svg'); }
nav#related-items a.following-item::before  { content: url('/zejler/forward-icon.svg'); }
nav#related-items a.item-list::before  { content: url('/zejler/up-icon.svg'); }

p#about-the-document { font-size: .75em; margin-bottom: 0.66em; padding: 0.66em; }
p#about-the-document a, p#about-the-document em { font-weight: bold; }

@media all and (min-width: 820px) {
	ul.catalogue-authors { columns: 2; }
}

/*** PRINT STYLE *************************************************************/

@media print {
	body > header, body > footer { display: none; }
	form { display: none; }
	nav { display: none !important; }
	body > main { max-width: none; }
	body, a, a:link, a:active, a:visited, .bible-fragment .footnote-reference, .bible-fragment .footnotes, .bible-fragment .end-mark, .bible-fragment .footnotes a { color: #000; }
	.print-media-notice { display: block; text-align: right; color: #888; margin-top: 1em; padding-bottom: 97px; background-image: url(/si-logo.png); background-repeat: no-repeat; background-position: bottom right; }
	p#status-message { display: none; }
}

/*** DOCUMENT *************************************************************/

/* fraktur typeface not ready yet
@font-face {
	font-family: fraktur;
	src: url('/media/zejler/xxx.ttf') format('truetype');
}
.fraktur { font-family: fraktur; }
section#document-content a.pb { font-family: sans-serif; }
*/

section#document-index { font-size: .75em; background-color: #eee; border: 1px dotted #888; padding: 1em; }
section#document-index > h1 { cursor: pointer; }
section#document-index.folded > h1 { margin-bottom: 0; color: #26b; }
section#document-index.folded > h1::after { content: ' …'; }
section#document-index.folded > ul { display: none; }
@media all and (min-width: 820px) {
    section#document-index > ul { column-count: 2; column-gap: 2em; }
}
section#document-index > ul { text-align: left; }

section#document-content hr { display: block; border: none; }
section#document-content hr.front-matter.beginning,
section#document-content hr.body-matter.beginning,
section#document-content hr.back-matter.beginning,
section#document-content hr.work-div.beginning,
section#document-content hr.part-div.beginning,
section#document-content hr.section-div.beginning,
section#document-content hr.article-div.beginning,
section#document-content hr.contents-div.beginning,
section#document-content hr.figures-div.beginning,
section#document-content hr.notes-div.beginning,
section#document-content hr.slogan-div.beginning,
section#document-content hr.advertisement-div.beginning { margin-top: 3em; }
section#document-content hr.beginning + hr.beginning { margin-top: 0; }
section#document-content hr.end { display: none; }
section#document-content hr.titlePage.end { display: block; }

section#document-content hr.titlePage.beginning,
section#document-content hr.titlePage.end { border-top: 1px dotted #888; margin: 3em 0; }
section#document-content p.titlePage { text-align: center; }

section#document-content p.main { font-weight: bold; font-size: 1.5em; }
section#document-content p.sub { font-weight: bold; font-size: 1.25em; }
section#document-content p.desc { }
section#document-content p.main + p.sub { margin-top: -1em; }
section#document-content p.main + p.desc { margin-top: -1em; }
section#document-content p.sub + p.desc { margin-top: -1em; }
section#document-content p.desc + p.main { margin-top: -.5em; }

section#document-content p.lg-part-head.main { font-size: 1.3em; }
section#document-content p.lg-part-head.sub { font-size: 1.15em; }
section#document-content p.lg-stanza-head.main { font-size: 1.15em; }
section#document-content p.lg-stanza-head.sub { font-size: 1em; }

section#document-content p.lg-poem { text-align: left; }
section#document-content p.l + p.l { margin-top: -1.5em; }

section#document-content p.epigraph { text-align: right; }
section#document-content p.quote { font-style: italic; }

section#document-content a.note-anchor { position: relative; top: -0.5em; font-size: .75em; }
section#document-content p.footnote-note,
section#document-content p.marginalia-note { font-size: .75em; color: #888; }

section#document-content p.footnote-note + p.footnote-note,
section#document-content p.marginalia-note + p.marginalia-note { margin-top: -.75em; }

section#document-content hr.figure.beginning::after,
section#document-content span.figure.without-caption::after { content: ' ▧ '; }
section#document-content hr.figure.beginning::after { display: block; margin-bottom: 1.5em; font-size: 1em; line-height: 1.5em; color: #444; }

section#document-content p.list-item span.label { display: inline-block; min-width: 1.15em; margin-left: -1.5em; }
section#document-content p.list-item.list-level-1 { margin-left: 1.5em; }
section#document-content p.list-item.list-level-2 { margin-left: 3.0em; }
section#document-content p.list-item.list-level-3 { margin-left: 4.5em; }
section#document-content p.list-item.list-level-4 { margin-left: 6.0em; }
section#document-content p.list-item.list-level-5 { margin-left: 7.5em; }
section#document-content p.list-item.list-level-6 { margin-left: 9.0em; }
section#document-content p.list-item.list-level-7 { margin-left: 10.5em; }

section#document-content a.pb { background-color: #999; color: #fff; padding: .1em .1em .1em .2em; text-decoration: none; font-style: normal; font-weight: normal;}
section#document-content a.pb::after { content: '↘'; }

/*****************************************************************************/