@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Roboto:wght@400..900&display=swap');

/* common.css (start) */

.left { text-align: left !important; }
.center { text-align: center !important; }
.right, input.number, input.small-number, input.year { text-align: right !important; }
.justify { text-align: justify !important; }
.top { vertical-align: top !important; }
.middle { vertical-align: middle !important; }
.bottom { vertical-align: bottom !important; }

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-clear { clear: both !important; }

.truncated { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.clearfix:before, .clearfix:after { content: ' '; display: table; clear: both; zoom: 1; }

.linethrough { text-decoration: line-through !important }

.icon { text-align: center; vertical-align: middle; }
.icon img { display: block; margin: auto; }

.nowrap { white-space: nowrap !important; }
.nomargin { margin: 0 !important; }
.nopad { padding: 0 !important; }
.noborder { border: 0 !important; }
.nobg { background: none !important; }

.inline { display: inline !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; vertical-align: top; }

.table, div.data { display: table; }
.table-row, div.data > div { display: table-row; }
.table-cell, div.data > div > div { display: table-cell; }

.lighter { opacity: .75; }
.light { opacity: .6; }
.superlight { opacity: .125; }

.superscript { position: relative; top: -0.3em; font-size: 90%; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

.monospace { font-family: monospace, monospace; }

.hidden { display: none; }
.invisible { visibility: hidden; }

.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.relative { position: relative !important; }

.hand { cursor: pointer; }
.noselect { user-select: none; }

.fullwidth { width: 100% !important; }
.fullheight { height: 100% !important; }
.autowidth { width: auto !important; }
.autoheight { height: auto !important; }

div { box-sizing: border-box; }

.curved { border-radius: 7px; }

.show-960, .show-640, .show-414, .show-320 { display: none; }

/* Form styles (start) */
form label { display: block; margin: 1em 0 .5em .2em; }
form .form-value { margin-bottom: 1em; }
form input.text, form textarea { font-size: 1em; color: #757575; width: 400px; border: 1px #757575 solid; padding: .5em; }
form select { font-family: 'Roboto', sans-serif; font-size: 1em; color: #333; border: 1px #ccc solid; padding: .5em; }
form textarea { font-family: 'Roboto', sans-serif; width: 400px; }
button, .button { font-size: 1em; font-family: 'Roboto', sans-serif; padding: .4em 1em; white-space: nowrap; }
.reset-button { background-color: #f3f3f3; color: #222; border: 1px #757575 solid; }
.action-button { background-color: #a45857; color: #fff; border: 1px #555 solid; }
form .invalid-input { background-color: #f1f1f1 !important; }
div.form-error-msg { font-weight: 700; font-size: .9em; color: #7a4338; margin: .5em 0 .5em .2em; }
/* Form styles (end) */

/* Operation result (start) */
div.op-result-success, div.op-result-error, div.op-result-warning, div.op-result-info { padding: .5em 1em; white-space: normal; }
div.op-result-success { color: black; background-color: #e3efd6; }
div.op-result-error { color: white; background-color: #a32e1c; }
div.op-result-warning, .warning { color: #bc79a1 !important; background-color: #f1dede !important; }
div.op-result-info { color: #333; background-color: #fcdf98; }
/* Operation result (end) */

@media only screen and (max-width: 960px) { .show-960 { display: block !important; } .hide-960 { display: none !important; } }
@media only screen and (max-width: 640px) { .show-640 { display: block !important; } .hide-640 { display: none !important; } }
@media only screen and (max-width: 414px) { .show-414 { display: block !important; } .hide-414 { display: none !important; } }
@media only screen and (max-width: 320px) { .show-320 { display: block !important; } .hide-320 { display: none !important; } }

@media print { .noprint { display: none; } }

/* common.css (end) */

body, html { width: 100%; margin: 0; padding: 0; background-color: #755138; position: relative; }
body { font-family: 'Roboto', sans-serif; text-size-adjust: 100%; }
body, p, div { font-size: 100%; }

body, p { color: #333; }
h1, h2, h3 { font-weight: 400; }
h1 { font-family: "Libre Baskerville", serif; }
a { text-decoration: none; }
hr { height: 1px; border: 0; border-bottom-width: 1px; border-bottom-style: solid; border-color: #ddd; box-sizing: content-box; -moz-box-sizing: content-box; }

.small { font-size: .8em !important; }
.smaller { font-size: .9em !important; }
.larger { font-size: 1.25em !important; }
.large { font-size: 1.5em !important; }

.normal { font-weight: 400 !important; }
.strong, strong, b { font-weight: 700 !important; }
.em { font-style: italic; }
.underline { border-bottom: 1pt inherit solid; }

/*
#app-header
	#app-header-main
	#app-header-menu -> #app-overlay-menu
#app-main
#app-footer
( .app-content-area defines content boundaries )
*/

/* Main area definition (start) */
div#app-header { width: 100%; }
div#top-blank { height: 0; background-color: #b7c6e2; }
/* div#app-main { width: 100%; } */
/* div#app-footer { padding: 1em 1em 3em 1em; } */
div.app-content-area { width: 1200px; padding: 1em 2em; margin: 0 auto; background-color: #b7c6e2; } /* #d6dfef */
/* Main area definition (end) */

/* App header (start) */

div#app-header { z-index: 10; }
div#app-header-main { text-align: center; vertical-align: middle; width: 100%; position: relative; }
div#app-header-main span#app-header-overlay-switch { position: absolute; right: 0; top: 15%; }

div#app-header-main div.app-header-identity { font-family: "Libre Baskerville", serif; font-weight: 400; display: inline-block; text-align: left; vertical-align: middle; padding: 1em; white-space: nowrap; }
div#app-header-main div#app-header-main-title a { font-size: 2.25em; text-transform: uppercase; color: #f0ffff; }

div#app-header-main div#app-header-main-subtitle { font-size: 1.20em; color: #444; }
div#app-header-main div#app-header-main-subtitle > div:not(.bullet) { display: block; font-style: italic; }

div#app-header-menu { text-align: center; }
div#app-header-menu a.menu-item { font-family: "Libre Baskerville", serif; font-size: .95em; font-weight: 700; color: #af4513; }
div#app-header-menu a.menu-item.active { font-weight: 700; color: #333; }
div#app-header-menu span.sep { padding: 0 .5em; }

div#app-overlay-menu { display: none; position: fixed; top: 50px; width: 100%; background-color: #b7c6e2; padding: 2.5em 1em 5em 1em; z-index: 1000; }
div#app-overlay-menu a.menu-item { font-family: "Libre Baskerville", serif; display: block; font-weight: 600; color: #af4513; padding: .5em; border-bottom: 1px #ddd solid; }
div#app-overlay-menu a.menu-item.active { font-weight: 700; color: #333; }
div#app-overlay-menu span.sep { display: none; }

div.bullet, span.bullet { color: #a45857; padding: 0 .15em; }

.baskerville { font-family: "Libre Baskerville", serif; }

.poem { font-family: "Libre Baskerville", serif; font-weight: 400; font-size: .95em; }
img.book-preview { height: 225px; width: auto; margin: 0 3px 3px 0; }

/* App header (end) */

/* App main (start) */

div#app-main div.app-content-area { padding-top: 2em; }
div#app-main p { line-height: 1.5em; }
div#app-main a { font-weight: 700; color: #af4513; }
div#app-main a.active { color: #333; }

/* App main (end) */

div#left-column { display: table-cell; vertical-align: top; width: 125px; padding: 7.5em 2em 2em 0; }
div#left-column img { width: 100px; height: auto; display: block; margin-bottom: 1em;}
div#main-column { display: table-cell; vertical-align: top; }

figure { display: table; }
figure.left { margin: 1em 0; }
figure.center { margin: 0 auto; }
figure figcaption { display: table-caption; caption-side: bottom; font-weight: 500; font-size: .9em; text-align: center; padding: .5em 1em; }

div.edition-box { display: inline-block; min-width: 350px; vertical-align: top; text-align: center; padding: 1em 1em;
/* 	border: 1px #ccc solid; border-radius: 7px; */
/* 	background-color: #BFCCE3; */
	margin: .5em;
}
div.edition-box .title1 { font-weight: 700; font-size: 1.25em; color: #333; }
div.edition-box .title2 { font-size: 1.25em; margin: .25em 0 }
div.edition-box .title3 { font-weight: 500; font-size: 1.1em; font-style: italic; }

p#summary { font-style: italic; }
p#summary.normal { font-style: normal !important; }

/* App footer (start) */

div#app-footer { font-weight: 500; font-size: .9em; color: #333; text-align: center; }

/* App footer (end) */

@media only screen and (max-width: 1200px) {
	body, html { background-color: #b7c6e2; }
	div.app-content-area { width: 100%; }
}

@media only screen and (max-width: 960px) {
	div.app-content-area { padding: 1em 1em !important; }
	div#app-header-main div.app-header-identity { display: block; text-align: center; padding: .25em 0; }
	div#app-header-main div#app-header-main-subtitle { font-size: 1.1em; }
	div#app-header-main div#app-header-main-subtitle > div { display: inline-block !important; }
	div.edition-box { display: block;}
}

@media only screen and (max-width: 640px) {
	div#app-header { position: fixed; overflow: hidden; top: 0; left: 0; z-index: 9999; }
	div#app-header div.app-content-area { padding: .25em 1em 1em 1em !important; }
	div#app-header-main div#app-header-main-title a { font-size: 1.75em; }
	div#top-blank { height: 60px; }
	input.text { width: 96%; }
	div#left-column { display: none; }
 	div#main-column { display: block; }
}

@media only screen and (max-width: 414px) {
	div#app-header-main div#app-header-main-title a { font-size: 1.5em; }
	form input.text, form textarea { width: 90%; }
}