/* Kobo layout: blocks, floats and simple media queries. No scripts or remote fonts. */
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: #191919; background: #fff; font: 18px/1.55 Arial, Helvetica, sans-serif; word-wrap: break-word; overflow-wrap: break-word; }
header, main, footer { max-width: 960px; margin: 0 auto; padding: 24px 20px; }
header { border-bottom: 1px solid #bcbcbc; }
main { padding-top: 32px; padding-bottom: 40px; }
a { color: #191919; text-decoration: underline; }
p { margin: 0 0 18px; }
h1, h2, .brand-name, .book-title { font-family: Georgia, 'Times New Roman', serif; }
h1 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; font-weight: normal; }
h2 { margin: 0 0 20px; font-size: 26px; line-height: 1.3; font-weight: normal; }
.eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.intro { max-width: 640px; color: #3d3d3d; }
.muted { color: #444; font-size: 16px; }

.brand { display: inline-block; min-height: 48px; text-decoration: none; }
.brand-mark { float: left; width: 36px; height: 44px; margin: 3px 13px 0 0; border: 2px solid #191919; border-left-width: 5px; font: 25px/40px Georgia, 'Times New Roman', serif; text-align: center; }
.brand-copy { display: block; margin-left: 49px; }
.brand-name { display: block; font-size: 28px; line-height: 1.15; font-weight: bold; white-space: nowrap; }
.brand-caption { display: block; margin-top: 5px; font-size: 14px; color: #444; }
.header-nav { margin-top: 20px; }
.header-nav a, .header-nav form { display: inline-block; margin: 0 10px 0 0; vertical-align: middle; }
.header-nav a { min-height: 48px; padding: 11px 12px; font-size: 16px; text-decoration: none; border: 1px solid #bcbcbc; }
.header-nav .quiet { min-height: 48px; padding: 11px 12px; font-size: 16px; }
.skip-link { position: absolute; left: 20px; top: -100px; padding: 12px; background: #fff; border: 2px solid #191919; }
/* Kobo can focus the first link on navigation. Keep it hidden in legacy WebKit;
   browsers supporting keyboard focus indicators can still reveal the shortcut. */
.skip-link:focus-visible { top: 12px; z-index: 1; }

label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: bold; }
input, select, button, .button { font: inherit; border: 2px solid #767676; border-radius: 2px; background: #fff; color: #191919; padding: 13px 16px; min-height: 54px; }
input { display: block; width: 100%; max-width: 560px; margin-bottom: 20px; }
button, .button { display: inline-block; max-width: 100%; margin: 0; cursor: pointer; text-align: center; text-decoration: none; font-weight: bold; border-color: #191919; }
button:focus, input:focus, select:focus, a:focus { outline: 3px solid #191919; outline-offset: 3px; }
.primary { color: #fff; background: #191919; }
.quiet { border: 0; background: #fff; padding: 0; font-weight: normal; text-decoration: underline; }
.wide { width: 100%; }
.help { margin: -8px 0 22px; font-size: 16px; color: #444; }

.gate { max-width: 560px; margin: 8px auto 0; border: 1px solid #bcbcbc; border-top: 4px solid #191919; padding: 26px 22px; }
.gate h1 { font-size: 30px; }
.gate .intro { margin-bottom: 28px; }
.gate input { max-width: none; }
.access-input { font: 24px/1.4 'Courier New', monospace; text-align: center; letter-spacing: 2px; text-transform: uppercase; }
.notice { border: 1px solid #767676; border-left: 4px solid #191919; background: #f2f2f2; padding: 18px; margin: 22px 0; }
.notice p:last-child { margin-bottom: 0; }
.access-code { margin: 16px 0 0; padding: 12px; border: 1px dashed #444; background: #fff; font: bold 28px/1.5 'Courier New', monospace; text-align: center; letter-spacing: 2px; }

.search { margin: 26px 0 32px; padding: 20px; border: 1px solid #bcbcbc; background: #f2f2f2; }
.search input { max-width: none; margin-bottom: 12px; }
.search button { width: 100%; }
.search-controls:after, .detail-body:after, .book-facts:after { content: ''; display: table; clear: both; }
.results-heading { margin-bottom: 8px; }
.results-heading h2 { margin-bottom: 8px; }
.results-count { color: #444; font-size: 16px; }
.books { list-style: none; padding: 0; margin: 0; }
.books li { border-bottom: 1px solid #bcbcbc; padding: 22px 0; }
.book-number { float: left; width: 34px; padding-top: 8px; color: #444; font: 22px/1.3 Georgia, 'Times New Roman', serif; }
.book-summary { margin-left: 46px; }
.book-title { display: block; min-height: 48px; padding: 5px 0; font-size: 24px; line-height: 1.3; text-decoration: none; }
.book-title:focus, .book-title:hover { text-decoration: underline; }
.books .book-author { margin: 6px 0 3px; font-size: 17px; }
.books .book-language { margin: 0; color: #444; font-size: 15px; }
.pagination { margin-top: 28px; }
.page-indicator { margin-bottom: 12px; color: #444; font-size: 16px; }
.pagination .button { min-width: 128px; margin: 0 8px 8px 0; }
.empty-state { padding: 26px 22px; border: 1px solid #bcbcbc; }
.empty-state p:last-child { margin-bottom: 0; }

.back-link { display: inline-block; min-height: 48px; padding: 10px 0; margin-bottom: 22px; font-size: 16px; }
.detail-header { margin-bottom: 28px; }
.detail-header h1 { font-size: 34px; }
.detail-author { color: #3d3d3d; font-size: 20px; }
.cover { width: 160px; max-width: 100%; padding: 6px; margin: 0 auto 26px; border: 1px solid #767676; background: #f2f2f2; text-align: center; }
.cover img { width: 100%; max-width: 100%; height: auto; display: block; }
.cover p { margin: 0; padding: 56px 10px; font: 20px/1.4 Georgia, 'Times New Roman', serif; }
.book-facts { margin: 0 0 26px; overflow: hidden; }
.book-facts dt { float: left; clear: left; width: 42%; margin: 0; padding: 13px 12px 13px 0; font-size: 15px; font-weight: normal; color: #444; }
.book-facts dd { margin: 0 0 0 42%; padding: 13px 0; border-bottom: 1px solid #bcbcbc; font-size: 17px; }
.download-note { margin: 16px 0 0; color: #444; font-size: 16px; }

.admin-panel { margin: 28px 0; padding: 22px; border: 1px solid #bcbcbc; }
.table-scroll { overflow-x: auto; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; border-bottom: 1px solid #bcbcbc; padding: 16px 12px; vertical-align: top; }
th { background: #f2f2f2; font-size: 14px; }
td input { min-width: 140px; margin-bottom: 10px; }
td form { margin-bottom: 14px; }
td form:last-child { margin-bottom: 0; }
td button { font-size: 16px; }
.access-state { display: inline-block; padding: 3px 8px; border: 1px solid #767676; font-size: 14px; white-space: nowrap; }
.revoke { border-style: dashed; }
.error-panel { max-width: 620px; margin: 8px auto; padding: 26px 22px; border: 1px solid #bcbcbc; border-top: 4px solid #191919; }
.error-panel .button { margin-bottom: 18px; }
.error-panel .back-link { margin-bottom: 0; }
footer { border-top: 1px solid #bcbcbc; color: #444; font-size: 14px; }
.footer-title { margin: 0 0 4px; color: #191919; font: 18px/1.4 Georgia, 'Times New Roman', serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (min-width: 540px) {
  header, main, footer { padding-left: 32px; padding-right: 32px; }
  .gate, .error-panel { padding: 34px; }
  .detail .cover { float: left; margin-right: 26px; margin-left: 0; }
  .detail-info { margin-left: 186px; }
}
@media (min-width: 720px) {
  header { position: relative; padding-top: 28px; padding-bottom: 28px; }
  .header-nav { position: absolute; right: 32px; top: 32px; margin: 0; }
  main { padding-top: 42px; padding-bottom: 52px; }
  h1 { font-size: 38px; }
  .gate { margin-top: 18px; margin-bottom: 18px; }
  .search-controls input { float: left; width: 74%; margin: 0; }
  .search-controls button { float: right; width: 24%; }
  .detail-header h1 { font-size: 40px; }
  .detail .cover { width: 200px; margin-right: 36px; }
  .detail-info { margin-left: 236px; }
}

/* The reader is a single screen. Only the desktop administration scrolls.
   Top/bottom positioning works on the older Kobo WebKit without vh or scripts. */
html { height: 100%; }
.reader-shell { height: 100%; overflow: hidden; }
.reader-shell .site-header { position: absolute; top: 0; left: 0; right: 0; height: 64px; padding: 8px 18px; }
.reader-shell .brand-mark { width: 30px; height: 38px; margin: 5px 10px 0 0; font-size: 23px; line-height: 34px; }
.reader-shell .brand-copy { margin-left: 40px; }
.reader-shell .brand-name { font-size: 26px; line-height: 48px; }
.reader-shell .brand-caption { display: none; }
.reader-shell .header-nav { position: absolute; top: 8px; right: 18px; margin: 0; }
.reader-shell .header-nav a { display: none; }
.reader-shell .header-nav form { margin: 0; }
.reader-shell .header-nav .quiet { padding: 10px 0; font-size: 14px; }
.reader-shell main { position: absolute; top: 64px; bottom: 64px; left: 0; right: 0; padding: 8px 18px; }
.reader-shell .screen-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; padding: 8px 18px; background: #fff; z-index: 2; text-align: center; line-height: 46px; }
.reader-shell .footer-title { display: none; }
.reader-shell .pagination, .reader-shell .book-actions { position: relative; height: 48px; margin: 0; }
.reader-shell .page-arrow { position: absolute; top: 0; width: 64px; min-width: 64px; height: 48px; min-height: 48px; padding: 0; margin: 0; font: 32px/44px Georgia, 'Times New Roman', serif; }
.previous { left: 0; }
.next { right: 0; }
.disabled { color: #999; border-color: #bcbcbc; cursor: default; }
.reader-shell .page-indicator { margin: 0 76px; font-size: 16px; line-height: 48px; }
.reader-shell .download-action { display: block; height: 48px; min-height: 48px; margin-left: 76px; padding: 10px 6px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.reader-shell .book-actions form { margin: 0; }
.reader-shell .book-actions form .download-action { width: calc(100% - 76px); }

.reader-shell.search-page h1 { margin: 0 0 4px; font-size: 26px; line-height: 30px; }
.reader-shell .search { margin: 0; padding: 0; border: 0; background: #fff; }
.reader-shell .search label { margin-bottom: 4px; line-height: 20px; }
.reader-shell .search-labels { position: relative; padding-right: 216px; }
.reader-shell .search-labels label[for="lang"] { position: absolute; top: 0; right: 128px; width: 80px; }
.reader-shell .search-controls { position: relative; height: 48px; padding-right: 216px; }
.reader-shell .search select { position: absolute; top: 0; right: 128px; width: 80px; height: 48px; min-height: 48px; padding: 8px; font-size: 16px; }
.reader-shell .search input { float: none; width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 10px; font-size: 16px; line-height: 24px; }
.reader-shell .search button { position: absolute; top: 0; right: 0; float: none; width: 120px; height: 48px; min-height: 48px; padding: 10px 4px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.reader-shell .results-heading { margin: 4px 0 0; }
.reader-shell .results-count { margin: 0; font-size: 14px; line-height: 20px; }
.reader-shell .books { position: absolute; top: 144px; bottom: 0; left: 18px; right: 18px; margin: 0; }
.reader-shell .books li { position: relative; height: 25%; padding: 0; }
.book-entry { display: table; table-layout: fixed; width: 100%; height: 100%; min-height: 48px; padding: 0; text-decoration: none; }
.book-entry:focus { outline-offset: -3px; }
.book-entry:hover .book-title { text-decoration: underline; }
.reader-shell .book-number { display: table-cell; float: none; vertical-align: middle; width: 38px; padding: 0 8px 0 0; font-size: 20px; }
.reader-shell .book-summary { display: table-cell; vertical-align: middle; margin-left: 0; }
.reader-shell .book-title { min-height: 0; padding: 0; font-size: 24px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-shell .books .book-author { display: block; margin: 4px 0 0; font-size: 16px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-shell .empty-state { margin-top: 20px; padding: 18px; }
.reader-shell .empty-state h2 { font-size: 24px; }

.reader-shell .detail-header { margin: 0; }
.reader-shell .detail-header .eyebrow { margin-bottom: 8px; line-height: 20px; }
.reader-shell .detail-header h1 { max-height: 108px; margin: 0 0 6px; overflow: hidden; font-size: 30px; line-height: 36px; }
.reader-shell .detail-author { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 24px; }
.reader-shell .detail-body { position: absolute; top: 180px; bottom: 8px; left: 18px; right: 18px; }
.reader-shell .detail .cover { float: left; width: 160px; margin: 0; padding: 4px; }
.reader-shell .cover p { padding: 50px 8px; font-size: 16px; }
.reader-shell .detail-info { margin-left: 180px; }
.reader-shell .book-facts { margin: 0; }
.reader-shell .book-facts dt { float: none; clear: none; width: auto; padding: 0; font-size: 14px; line-height: 20px; }
.reader-shell .book-facts dd { margin: 0 0 10px; padding: 0 0 8px; font-size: 18px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-shell .download-note { margin: 8px 0 0; font-size: 15px; line-height: 20px; }

.reader-shell .gate { margin-top: 20px; padding: 22px; }
.reader-shell .gate .intro { margin-bottom: 18px; font-size: 16px; line-height: 23px; }
.reader-shell .error-panel { margin-top: 20px; padding: 22px; }
.reader-shell .error-panel h1 { font-size: 28px; }

@media (max-height: 650px) {
  .reader-shell .book-title { font-size: 21px; line-height: 26px; }
  .reader-shell .books .book-author { margin-top: 0; font-size: 14px; line-height: 18px; }
  .reader-shell .detail-header .eyebrow { display: none; }
  .reader-shell .detail-header h1 { max-height: 90px; font-size: 26px; line-height: 30px; }
  .reader-shell .detail-author { font-size: 16px; line-height: 22px; }
  .reader-shell .detail-body { top: 144px; }
  .reader-shell .detail .cover { width: 104px; }
  .reader-shell .cover p { padding: 28px 4px; font-size: 14px; }
  .reader-shell .detail-info { margin-left: 120px; }
  .reader-shell .book-facts dt { font-size: 12px; line-height: 15px; }
  .reader-shell .book-facts dd { margin-bottom: 3px; padding-bottom: 4px; font-size: 15px; line-height: 20px; }
  .reader-shell .gate, .reader-shell .error-panel { margin-top: 0; padding: 12px; }
  .reader-shell .gate .eyebrow, .reader-shell .gate .intro { display: none; }
  .reader-shell .gate h1 { margin-bottom: 8px; font-size: 24px; line-height: 29px; }
  .reader-shell .gate label { margin-bottom: 4px; line-height: 20px; }
  .reader-shell .gate input { height: 54px; margin-bottom: 8px; padding: 10px; line-height: 28px; }
  .reader-shell .gate .help { margin: 0 0 8px; font-size: 14px; line-height: 18px; }
  .reader-shell .gate button { min-height: 48px; padding: 8px; line-height: 28px; }
  .reader-shell .gate .notice { margin: 8px 0; padding: 8px; font-size: 16px; line-height: 22px; }
}
@media (min-height: 850px) {
  .reader-shell .book-title { max-height: 64px; font-size: 26px; line-height: 32px; white-space: normal; }
}
@media (max-width: 399px) {
  .reader-shell .download-action { font-size: 14px; }
  .reader-shell .search label { font-size: 14px; white-space: nowrap; }
  .reader-shell .search-labels, .reader-shell .search-controls { padding-right: 182px; }
  .reader-shell .search-labels label[for="lang"], .reader-shell .search select { right: 112px; width: 62px; }
  .reader-shell .search button { width: 104px; font-size: 14px; }
}
@media (max-width: 339px) {
  .reader-shell .search label { font-size: 12px; }
}
button:disabled { cursor: default; background: #e5e5e5; color: #555; border-color: #999; }