/*
 * Нотабеноид поверх Bootstrap 5.
 * Цвета как на старом сайте: ссылки #005580 / #08c, акценты #c00, серые линии #e0e0e0.
 */
:root {
	--nb-link: #005580;
	--nb-link-hover: #08c;
	--nb-line: #e0e0e0;
	--nb-muted: #777;
	/* Метрики старого сайта (Bootstrap 2): Helvetica 13px на сетке 18px, чёрный текст,
	   светлые заголовки. Высота строки абсолютная, чтобы и мелкий текст держал сетку. */
	--bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bs-body-font-size: 13px;
	--bs-body-line-height: 18px;
	--bs-body-color: #000;
	--bs-body-color-rgb: 0, 0, 0;
	--bs-heading-color: #000;
	--bs-link-color-rgb: 0, 85, 128;
	--bs-link-hover-color-rgb: 0, 136, 204;
	--bs-link-color: #005580;
	--bs-link-hover-color: #08c;
}
/* Старая вёрстка не была резиновой: уже этого страница прокручивается, а не сжимает шапку.
   Bootstrap задаёт размер .container медиазапросами, отсюда второе правило. */
body { min-width: 1000px; }
.container { min-width: 960px; }
/* Ширины старого сайта: 1170px контента на широких экранах, поля 20px на резиновой
   странице главы. */
@media (min-width: 1200px) {
	.container, .row { --bs-gutter-x: 30px; }
	.container { max-width: 1200px; }
}
.container-fluid { padding-left: 20px; padding-right: 20px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 30px; line-height: 36px; font-weight: normal; letter-spacing: -1px; margin: 0 0 20px -2px; }
h2 { font-size: 24px; line-height: 36px; font-weight: normal; letter-spacing: -1px; margin-bottom: 10px; }
h3 { font-size: 18px; line-height: 27px; font-weight: normal; border-bottom: 1px solid var(--nb-line); margin-bottom: 5px; }
h4 { font-size: 14px; }
small, .small { font-size: 11px; }

/* Формы: компактные поля, подписи у правого края своей колонки, серая полоса под кнопки. */
.form-control, .form-select { font-size: 13px; line-height: 18px; padding: 4px 6px; }
.form-select { width: auto; min-width: 220px; padding-right: 2rem; }
textarea.form-control { width: 100%; }
.form-text, .invalid-feedback, .form-check-label { font-size: 12px; }
.col-form-label { font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
@media (min-width: 576px) { label.col-form-label, div.col-form-label { text-align: right; } }
.nb-form-actions { margin: 18px 0; padding: 17px 0 18px; background: #f5f5f5; border-top: 1px solid #ddd; }
.nb-form-actions .btn { font-size: 13px; }
.badge { font-size: 10px; text-transform: uppercase; padding: 2px 4px; }
.nav-pills { --bs-nav-pills-link-active-bg: #08c; }

/* Кнопки как на старом сайте (Bootstrap 2): градиент, тёмный нижний край, рельефная надпись.
   Каждый цвет задаёт оба конца градиента; маленький размер — 24px старой панели инструментов. */
.btn {
	--bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px;
	--bs-btn-font-size: 13px; --bs-btn-line-height: 18px; --bs-btn-border-radius: 4px;
	--nb-btn-top: #fff; --nb-btn-bottom: #e6e6e6;
	background-image: linear-gradient(var(--nb-btn-top), var(--nb-btn-bottom));
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
	white-space: nowrap; /* иначе в тесном flex-ряду значок уезжает на свою строку */
}
.btn:hover { background-position: 0 -15px; transition: background-position .1s linear; }
.btn:active, .btn.active, .btn.show {
	background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}
.btn-sm, .btn-group-sm > .btn {
	--bs-btn-padding-x: 9px; --bs-btn-padding-y: 3px; --bs-btn-font-size: 12px; --bs-btn-line-height: 16px;
	--bs-btn-border-radius: 4px;
}
.btn:not(.btn-primary, .btn-success, .btn-danger, .btn-dark, .btn-outline-danger, .btn-link, .btn-close) {
	--bs-btn-color: #333; --bs-btn-bg: #f5f5f5;
	--bs-btn-hover-color: #333; --bs-btn-hover-bg: #e6e6e6;
	--bs-btn-active-color: #333; --bs-btn-active-bg: #e6e6e6;
	--bs-btn-border-color: #ccc; --bs-btn-hover-border-color: #ccc; --bs-btn-active-border-color: #ccc;
	border-color: #ccc #ccc #b3b3b3 !important;  /* поверх .border у кнопок .btn-light */
	text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
}
.btn-primary { --nb-btn-top: #08c; --nb-btn-bottom: #04c; --bs-btn-bg: #0055cc; --bs-btn-hover-bg: #04c; --bs-btn-active-bg: #039; }
.btn-success { --nb-btn-top: #62c462; --nb-btn-bottom: #51a351; --bs-btn-bg: #5bb75b; --bs-btn-hover-bg: #51a351; --bs-btn-active-bg: #408140; }
.btn-danger { --nb-btn-top: #ee5f5b; --nb-btn-bottom: #bd362f; --bs-btn-bg: #da4f49; --bs-btn-hover-bg: #bd362f; --bs-btn-active-bg: #942a25; }
.btn-dark { --nb-btn-top: #444; --nb-btn-bottom: #222; --bs-btn-bg: #363636; --bs-btn-hover-bg: #222; --bs-btn-active-bg: #080808; }
.btn-primary, .btn-success, .btn-danger, .btn-dark {
	--bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
}
.btn-outline-danger, .btn-link, .btn-close { background-image: none; box-shadow: none; text-shadow: none; }

/* Значки: Glyphicons Halflings старого сайта (Bootstrap 2.1), глифы 14px на сетке 24px в спрайте,
   перекрашенном для notabenoid: тёмно-серые, белые на цветных кнопках, золотые под мышью
   в переводчике и комментариях. В колонке на 480px — собственные глифы сайта. */
[class^="icon-"], [class*=" icon-"] {
	display: inline-block; width: 14px; height: 14px; margin-top: 1px; line-height: 14px; vertical-align: text-top;
	background: url("../img/glyphicons-halflings-nb.png") 14px 14px no-repeat;
}
:is(.btn-primary, .btn-success, .btn-danger, .btn-dark) :is([class^="icon-"], [class*=" icon-"]) {
	background-image: url("../img/glyphicons-halflings-white.png");
}
.translator a:hover :is([class^="icon-"], [class*=" icon-"]), .comments a:hover i.i {
	background-image: url("../img/glyphicons-halflings-nb-hl.png");
}
.btn-sm [class^="icon-"], .btn-group-sm > .btn [class^="icon-"] { margin-top: 0; }
.btn-lg [class^="icon-"] { margin-top: 2px; }
.icon-arrow-left { background-position: -240px -96px; }
.icon-arrow-right { background-position: -264px -96px; }
.icon-ban-circle { background-position: -216px -96px; }
.icon-book { background-position: -48px -48px; }
.icon-briefcase { background-position: -432px -144px; }
.icon-bullhorn { background-position: -24px -144px; }
.icon-chevron-down { background-position: -313px -119px; }
.icon-cog { background-position: -432px 0; }
.icon-comment { background-position: -240px -120px; }
.icon-download-alt { background-position: -96px -24px; }
.icon-edit { background-position: -96px -72px; }
.icon-envelope { background-position: -72px 0; }
.icon-eye-close { background-position: -120px -120px; }
.icon-eye-open { background-position: -96px -120px; }
.icon-filter { background-position: -408px -144px; }
.icon-fire { background-position: -72px -120px; }
.icon-flag { background-position: -312px -24px; }
.icon-leaf { background-position: -48px -120px; }
.icon-list { background-position: -360px -48px; }
.icon-minus { background-position: -433px -96px; }
.icon-ok { background-position: -288px 0; }
.icon-ok-circle { background-position: -192px -96px; }
.icon-pencil { background-position: 0 -72px; }
.icon-plus { background-position: -408px -96px; }
.icon-random { background-position: -216px -120px; }
.icon-remove { background-position: -312px 0; }
.icon-remove-circle { background-position: -168px -96px; }
.icon-remove-sign { background-position: -48px -96px; }
.icon-road { background-position: -72px -24px; }
.icon-search { background-position: -48px 0; }
.icon-share { background-position: -120px -72px; }
.icon-shopping-cart { background-position: -360px -120px; }
.icon-star { background-position: -120px 0; }
.icon-star-empty { background-position: -144px 0; }
.icon-text-height { background-position: -216px -48px; }
.icon-time { background-position: -48px -24px; }
.icon-trash { background-position: -456px 0; }
.icon-upload { background-position: -144px -24px; }
.icon-wrench { background-position: -360px -144px; }
.icon-comment-empty { background-position: -480px 0; }
.icon-comment-new { background-image: url("../img/glyphicons-halflings-nb-hl.png"); background-position: -240px -120px; }
.icon-xp { background-position: -479px -73px; }  /* ▶, а пока инструменты свёрнуты — ◀ */
.icon-up { background-position: -479px -120px; }  /* ▲ */
/* Счётчики комментариев у постов и анонсов: пара GIF, синий и оранжевый (новые комментарии). */
i.icon-nb-comment { width: 16px; background: url("../img/ic_cmt.gif") 0 0 no-repeat; }
i.icon-nb-comment.new { background-image: url("../img/ic_cmtn.gif"); }

/* Полосы прогресса как на старом сайте: бледная дорожка, полосатая зелёная полоса, надпись
   поверх обеих. */
.progress { position: relative; height: 18px; border-radius: 4px; background: linear-gradient(#f5f5f5, #f9f9f9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.progress-bar.bg-success {
	background-color: #62c462 !important; border-radius: 4px; background-size: 40px 40px;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress .text { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: bold; line-height: 18px; color: #000; }
.progress .text a { color: #000; }
.progress .text a:hover { color: #08c; }

/* Кнопка, похожая на ссылку, для POST-действий вроде выхода. */
button.as-link {
	background: none; border: 0; padding: 0; margin: 0;
	text-align: left; font: inherit; color: inherit; cursor: pointer;
}

/* Шапка: логотип, справа от него меню разделов и подменю пользователя в рамке из серых
   линий, которые начинаются от логотипа (как на старом сайте). */
.nb-header { margin: 10px 0 20px; }
.nb-header > div { position: relative; height: 130px; }
.nb-logo { display: block; float: left; }
.nb-logo img { display: block; }
.nb-nav { position: absolute; top: 32px; left: calc(var(--bs-gutter-x) * .5 + 123px); right: calc(var(--bs-gutter-x) * .5); border-left: 1px solid var(--nb-line); }
.container-fluid > .nb-nav { left: 144px; right: 0; }

.nb-menu { display: flex; align-items: center; border-bottom: 1px solid var(--nb-line); }
.nb-menu > a { display: block; padding: 10px; font-weight: bold; text-transform: uppercase; color: #000; white-space: nowrap; }
.nb-menu > a:hover { color: var(--nb-link-hover); background: #f0f0f0; text-decoration: none; border-radius: 10px 10px 0 0; }
.nb-menu > a:first-child:hover { border-top-left-radius: 0; }
.nb-search { flex: none; margin-left: auto; align-self: flex-start; }
.nb-search input { width: 286px; height: 28px; padding: 4px 14px; border-radius: 15px; font-size: 13px; line-height: 18px; }
.nb-search .btn { height: 28px; padding: 4px 14px; border-radius: 20px; }

.nb-submenu { display: flex; margin: 0; padding: 0; list-style: none; }
.nb-submenu > li {
	height: 57px; padding: 5px 10px; border-right: 1px solid var(--nb-line);
	font-size: 10px; color: var(--nb-muted); white-space: nowrap;
}
.nb-submenu > li.nb-hint { max-width: 300px; white-space: normal; line-height: 12px; }
.nb-submenu > li:hover { background: #f0f0f0; }
.nb-submenu a, .nb-submenu button.as-link { color: var(--nb-muted); }
.nb-submenu a:hover { text-decoration: none; }
.nb-submenu strong { display: block; font-size: 12px; color: var(--nb-link-hover); }
.nb-submenu strong b { color: #c00; }
.nb-submenu form { margin: 0; }
/* Форма входа в строке подменю: достаточно мелкая, чтобы влезть в свою ячейку. */
.nb-login form { display: flex; gap: 4px; padding-top: 10px; }
.nb-login .form-control { width: 6.5em; }
.nb-login .form-control, .nb-login .btn {
	height: 22px; padding: 0 6px; font-size: 11px; line-height: 20px; border-radius: 3px;
}

/* Чат: полупрозрачная тёмная полоса, прибитая к низу окна. */
#chat-box { position: fixed; bottom: 0; left: 0; width: 100%; height: 300px; background: #000; opacity: .85; z-index: 1040; color: #fff; }
#chat-box a { color: #ff8; text-decoration: underline; }
#chat-room { position: absolute; left: 0; top: 10px; bottom: 40px; right: 0; padding: 10px; overflow: auto; }
#chat-room p { margin: 0 0 2px; }
#chat-room .my a.user { color: #ffa365; }
#chat-say { position: absolute; left: 10px; bottom: 10px; right: 10px; height: 30px; margin: 0; display: flex; gap: 4px; }
#chat-say .msg { flex: 1; }
#chat-resizer { width: 100%; height: 5px; background: #333; cursor: n-resize; }

/* Подвал */
.nb-footer { min-height: 113px; margin-top: 20px; padding: 10px 0; border-top: 1px solid #f4e8e8; border-bottom: 4px solid #000; }
.nb-footer .donate { color: #5d7b02; }

/* Обложки книг: миниатюры 50x50. */
.nb-cover { width: 50px; height: 50px; border-radius: 3px; background: #f0f0f0 no-repeat center / cover; }

/* Ссылки "→ ещё" по правому краю, в том числе внутри заголовков. */
.nb-links { text-align: right; font-size: 11px; }
.nb-links a { color: #c00; }
h2 .nb-links { float: right; margin-top: .6em; }

/* Главная страница */
.nb-hot { list-style: none; margin: 0; padding: 0; }
.nb-hot li { display: grid; grid-template-columns: 50px 1fr; column-gap: 10px; margin: 10px 0; }
.nb-hot .nb-cover { grid-row: span 2; }
.nb-hot p { margin: 0; }
.nb-hot .title { font-size: 13px; font-weight: bold; }
.nb-hot .info { font-size: 11px; color: var(--nb-muted); }
h2 .cog { position: absolute; right: 0; bottom: 0; }
h2:has(.cog) { position: relative; }

/* Страница настроек */
.nb-settings fieldset { margin-bottom: 42px; }
.nb-settings #nc-demo .comment { margin: 6px 0 0; }

.nb-hero { border: 1px solid #ccc; border-radius: 20px; background: #f0f0f0; padding: 10px 30px 18px; box-shadow: rgba(0,0,0,.12) -5px 5px 30px; }
.nb-hero p, .nb-hero li { font-size: 11px; text-align: justify; }

.nb-cloud { margin: 40px 0; padding: 0 30px; background: #f0f0f0; border: solid #ccc; border-width: 1px 0; }
.nb-cloud .terms { line-height: 200%; text-align: center; }

.nb-blog { list-style: none; margin: 0; padding: 0; }
.nb-blog li { margin-bottom: 10px; }
.nb-blog p { font-size: 11px; color: var(--nb-muted); margin: 0; }

.nb-announce { display: flex; gap: 12px; margin-bottom: 30px; }
.nb-announce .side { flex: none; width: 50px; padding-top: 5px; text-align: center; }
.nb-announce .side .ready { font-size: 16px; font-weight: bold; }
.nb-announce .main { flex: 1; min-width: 0; }
.nb-announce h4 { font-size: 24px; line-height: 30px; font-weight: normal; letter-spacing: -1px; margin: 0; }
.nb-announce .info { font-size: 11px; margin: 0 0 10px; }
.nb-announce .msg { position: relative; background: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 10px; }
.nb-announce .msg::before {
	content: ""; position: absolute; top: -7px; left: 20px;
	border: 7px solid transparent; border-top: 0; border-bottom-color: #ccc;
}
.nb-announce .msg::after {
	content: ""; position: absolute; top: -6px; left: 20px;
	border: 7px solid transparent; border-top: 0; border-bottom-color: #f0f0f0;
}

/* Главная для гостей: дверь "секретного клуба". */
.nb-club { text-align: center; }
/* Строки по высоте шрифта: общие 18px у body рассчитаны на 13px, крупный заголовок слипается. */
.nb-club p, .nb-club form { line-height: 100%; }
.nb-club p { max-width: 800px; margin: 20px auto; font-family: Georgia, Times, serif; font-size: 20px; }
.nb-club .nb-club-name { margin-top: 80px; font-size: 40px; }
.nb-club-name em { display: block; margin: 20px 0; font-size: 60px; font-style: normal; font-weight: bold; }
.nb-club .nb-club-how { font-size: 14px; color: #888; font-style: italic; }
.nb-club form { display: flow-root; width: 200px; margin: 40px auto; }
.nb-club form input { margin: 5px 0 14px; }
.nb-club form a { display: block; margin-bottom: 10px; text-align: right; color: #777; text-decoration: underline; }
.nb-club form button { display: block; margin: 0 auto; }

/* Формы скачивания и готовый перевод для чтения */
.nb-download { max-width: 600px; }
.nb-ready-text p { margin: 0 0 1em; }

/* Формы книги */
.nb-type-choice { padding: 10px; border-radius: 10px; cursor: pointer; }
.nb-type-choice:hover { background: #f0f0f0; }
.nb-type-choice big { font-size: 24px; }
.nb-type-choice p { font-size: 12px; color: var(--nb-muted); margin: 5px 0 0; }
.nb-catalog { list-style: none; padding-left: 0; margin: 0; font-size: 13px; }
.nb-catalog .nb-catalog { padding-left: 1.5rem; }
.nb-catalog label { cursor: pointer; }
.nb-presets label { cursor: pointer; }
.nb-access { width: auto; }
.nb-access th, .nb-access td { padding: 3px 12px; }
.nb-access thead th { white-space: nowrap; }
[x-cloak] { display: none !important; }

.nb-descr { font-size: 13px; }
.nb-error { max-width: 600px; margin: 60px auto; text-align: center; background: whitesmoke; border: 1px solid #e5e5e5; border-radius: 10px; padding: 20px; }

/* Страница книги */
.nb-tabs { margin-bottom: 20px; }
.nb-tabs .nav-link { padding: 8px 12px; }
.nb-info img { float: left; margin: 0 20px 20px 0; }
.nb-info .cat span { display: none; }
.nb-info .cat:hover span { display: inline; }
.nb-chapters td, .nb-chapters th { white-space: nowrap; }
.nb-chapters td.t { white-space: normal; }
.nb-chapters td.r { text-align: right; }
.nb-chapters .disabled { text-decoration: line-through; color: #aaa; }
.nb-chapters tr.editing > td { border-top: 10px solid #000; border-bottom: 10px solid #000; background: #fff; padding: 10px; }
.nb-chapters .sortable-ghost { opacity: .4; }
.nb-chapter-form .form-select { min-width: 0; }
.nb-override { width: auto; }
.nb-override th, .nb-override td { text-align: center; padding: 3px 10px; }
.nb-override tbody th { text-align: left; }
a.act { color: #4c4b9b; }

/* Значки уровней доступа, спрайт из квадратов 11px: строки — действия, колонки — уровни. */
i.ac_read, i.ac_trread, i.ac_gen, i.ac_rate, i.ac_comment, i.ac_tr {
	display: inline-block; width: 11px; height: 11px; margin: 0 1px;
	background: url("../img/ac.png") no-repeat;
}
i.ac_trread { background-position-y: -11px; }
i.ac_gen { background-position-y: -22px; }
i.ac_rate { background-position-y: -33px; }
i.ac_comment { background-position-y: -44px; }
i.ac_tr { background-position-y: -55px; }
i.g { background-position-x: -11px; }
i.m { background-position-x: -22px; }
i.o { background-position-x: -33px; }

/* Правая колонка: блоки с заголовком в виде вкладки. */
.sr .tools {
	position: relative; margin: 19px 0 40px; padding: 15px;
	border: 1px solid #929292; border-radius: 0 0 10px 10px; background: #fff; font-size: 11px;
}
.sr .tools * { font-size: 11px; }
.sr h5 {
	position: absolute; top: -20px; margin: 0; height: 19px; padding: 3px 20px 0 10px;
	background: url("../img/tab_bg_on.2.gif") top right; color: #fff;
	font: bold 10px Tahoma, sans-serif; text-align: right;
}
.sr dl.info { margin: 0; }
.sr dl.info dt { color: gray; }
.sr dl.info dd { font-weight: bold; margin: 0 0 7px; padding: 0 0 7px 10px; border-bottom: 1px solid #e7e7e7; }
.sr dl.info dd:last-child { border-bottom: none; margin-bottom: 0; }
.sr dl.info .more_btn { font-weight: normal; color: gray; }
.sr dl.info .more { margin-top: 5px; font-weight: normal; }
.sr dl.info table.t td { padding: 2px; border-bottom: 1px dotted gray; vertical-align: bottom; }
.sr dl.info table.t td.d { text-align: right; font-weight: bold; }
.sr .tools ul { padding-left: 1.2em; margin: 0; }
.nb-progress { margin-bottom: 2px; }

/* Окно закладок */
.nb-bm-toolbar .btn { font-weight: bold; }
#bookmarks-list { list-style: none; margin: 0; padding: 0; }
#bookmarks-list > li { position: relative; padding-left: 16px; }
#bookmarks-list > li > div { padding: 3px 0; }
#bookmarks-list > li > div:hover { background: #eee; }
#bookmarks-list > li .r { float: right; }
#bookmarks-list > li i.ho { cursor: pointer; position: absolute; top: 4px; left: 0; }
#bookmarks-list .rm, #bookmarks-list .ed { cursor: pointer; display: none; }
#bookmarks-list.rm .rm { display: inline-block; }
#bookmarks-list.ed .ed { display: inline-block; }
#bookmarks-list .origs { list-style: disc; margin: 0 0 10px; font-size: 11px; }
#bookmarks-list .origs .rm { display: inline-block; }
.modal-title { font-size: 18px; }

/* Разбивка импортированного текста на фрагменты */
.nb-chopper { border: 1px solid #777; padding: 10px; margin-bottom: 10px; }
.nb-chopper p { border-bottom: 1px dashed #777; margin: 0; padding: 10px 0; }
.nb-chopper p:hover { background: #eee; }
.nb-chopper p.toobig { border-left: 20px solid red; padding-left: 20px; }
.nb-chopper p a.glue, .nb-chopper p a.rm { font-size: 10px; display: none; margin-left: 4px; }
.nb-chopper p:hover a.glue, .nb-chopper p:hover a.rm { display: inline; }
.nb-chopper span { cursor: pointer; }
.nb-chopper span:hover { background: #adff2f; border-left: 2px solid #000; padding-left: 5px; }

/* ---------- Интерфейс перевода (страница главы), по образцу translate-1.css ---------- */
/* Бледные значки, которые проявляются при наведении на их строку или ссылку. */
i.i { opacity: .2; cursor: pointer; }
a:hover i.i { opacity: 1; }
.translator a:hover i.i, .translator tr:hover .tools i.i, .translator tr:hover td.b i.i,
.translator tr:hover td.u i.i, .translator tr:hover td.c i.i { opacity: 1; }
.shl { background: #ff0; }

/* Панель инструментов */
#tb-chapter-list { max-height: 500px; overflow: auto; }
#tb-main.fixed { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 2px 2px #999; z-index: 100; padding: 5px 20px; }
#tb-main { padding: 10px 0; font-size: 12px; position: relative; }
#tb-main .group { display: inline-block; vertical-align: middle; }
#tb-main .btn-group { vertical-align: middle; }
#tb-main div.group { margin: 0 5px; }
#tb-main .tb-progress { width: 150px; }
#tb-main .chic-pages { float: right; }
#tb-filter {
	position: absolute; z-index: 20; top: 100%; left: 0; min-width: 320px;
	background: #fff; padding: 15px 15px 5px; box-shadow: rgba(0,0,0,.5) 0 3px 5px; font-size: 13px; text-align: left;
}
#tb-filter ul.options { list-style: none; margin: 0 0 10px; padding: 0; }
#tb-filter ul.options li { margin: 0 0 12px; }
#tb-filter input[type=radio] { vertical-align: middle; }
#tb-filter ul a { text-decoration: underline; }

/* Листалка: прокручиваемая лента номеров страниц, текущий можно отредактировать. */
.chic-pages { position: relative; }
.chic-pages a { color: #1386bf; text-decoration: underline; }
.chic-pages a.pseudo { text-decoration: none; }
.chic-pages input { width: 2.5em; border: 1px solid #ccc; border-radius: 2px; padding: 0 3px; font-size: 1em; height: 1.6em; }
.chic-pages ul { max-width: 250px; display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: middle; margin: 0; padding: 0; }
.chic-pages li { display: inline-block; margin-left: 1px; }
.chic-pages li a { display: inline-block; padding: 1px 6px 0; }
.chic-pages li a:hover { background: #f9f9f9; border-radius: 2px; box-shadow: 0 1px 2px #ddd inset; }

/* Таблица: .b закладка, .o оригинал, .u кнопка "перевести", .t переводы, .c комментарии */
.translator { margin: 5px 0; border-collapse: collapse; width: 100%; }
.translator tbody td { vertical-align: top; padding: 0; border-bottom: 1px solid #7f7f7f; }
.translator thead th { background: #a5a5a5; color: #fff; padding: 10px 3px; border-bottom: 2px solid #5e5e5e; text-align: left; }
.translator thead th:first-child { border-top-left-radius: 10px; }
.translator thead th:last-child { border-top-right-radius: 10px; }
.translator tr.hl { border-left: 5px solid #000; }
.translator .text { padding: 6px 8px 0; margin: 0; line-height: 130%; word-wrap: break-word; }
.translator .info { padding: 0 8px 6px; font-size: 11px; margin: 0; }
.translator .info, .translator .info a { color: #bbb; }
.translator .info a { text-decoration: underline; }
.translator tr:hover .info, .translator tr:hover .info a { color: #888; }
.translator .tools { background: #f8f8f8; position: absolute; top: 0; right: 0; bottom: 0; width: 96px; display: flex; align-items: flex-start; }
.translator .tools a.xp { padding: 0; align-self: stretch; background-color: #fcfcfc; }
.translator .tools .icon-xp { margin-top: 7px; }
.translator td.b a, .translator td.u a, .translator td.c a { padding: 6px 9px; display: inline-block; height: 100%; text-decoration: none; }
.translator .tools a { padding: 6px 9px; text-decoration: none; }
.translator td.b, .translator td.u, .translator td.c { background-color: #eee; }
.translator td.c { text-align: right; }
.translator td.c a { font-size: 11px; color: #ababab; line-height: 1em; }
.translator td.c .n { color: #d29a00; }
.translator td.o, .translator td.t { width: 50%; max-width: 500px; }
/* Ячейка — контейнер для .tools: она, в отличие от внутреннего div, тянется до высоты строки. */
.translator td.o { position: relative; }
.translator td.o .text, .translator td.o .info { margin-right: 110px; }
.translator td.o .tools { width: 110px; }
/* Кнопки правки оригинала, свёрнутые в ручку "ещё". */
.translator-oe-hide td.o .tools { width: 14px; }
.translator-oe-hide td.o .tools a { display: none; }
.translator-oe-hide td.o .tools a.xp { display: block; }
.translator-oe-hide td.o .tools .icon-xp { background-position: -479px -96px; }
.translator-oe-hide td.o .text, .translator-oe-hide td.o .info { margin-right: 14px; }
.translator td.t { background: url("../img/tr-faux2.gif") repeat-y top right; }
.translator td.t > div { border-bottom: 1px solid #d9d9d9; position: relative; }
.translator td.t > div:last-child { border-bottom: none; }
.translator td.t > div.highlighted { background: #ffffb2; }
/* Строка, на которую вела ссылка */
.translator tr.m td { background-color: #ffffb2; }
.translator tr.m td.b, .translator tr.m td.u, .translator tr.m td.c { background-color: #eeeea6; }
.translator tr.m .tools { background-color: #f8f8ad; }
.translator tr.m .tools a.xp { background-color: #fcfcb0; }
.translator tr.m .info, .translator tr.m .info a { color: #b5ab77; }
.translator tr.m .rating .current { background-color: #eeeea6; color: #c8c88e; }
.translator tr.m td.t > div { border-bottom-color: #d9d997; }
.translator td.t .text, .translator td.t .info { margin-right: 64px; padding-right: 37px; }
.translator td.t .info i.i { margin: 0 5px; }
.translator td.t .tools { width: 64px; }
.translator.has-best td.t .best .text { background: url("../img/corner-gray-t-r.png") no-repeat right top; }

/* Рейтинг версии */
.translator .rating { position: absolute; top: 6px; right: 71px; font-size: .85em; z-index: 1; }
/* Размеры как в Bootstrap 2, где высота не включала padding. */
.translator .rating, .translator .rating * { box-sizing: content-box; }
.translator .rating .current { border-radius: 2px; background: #eee; color: #ccc; text-decoration: none; box-shadow: 0 1px 2px #ccc inset; }
.translator .rating.x .current { background-color: #f3f3f3; color: #ddd; box-shadow: none; }
.translator .rating .base { display: block; height: 14px; padding: 2px 8px; font-weight: bold; line-height: 140%; position: relative; z-index: 2; }
.translator .rating .current.pos { color: #00991a !important; }
.translator .rating .current.neg { color: #ff4040 !important; }
.translator tr .rating:hover .current { border-radius: 0; background: #fff; box-shadow: 0 2px 2px #777; color: #000; }
.translator tr .rating a.current:hover { color: #fff !important; background: #d29a00; }
/* При наведении мыши на число над ним выезжает "+", а под ним "−". */
.translator .rating .pane { position: absolute; left: 0; width: 100%; box-shadow: 0 2px 2px #333; }
.translator .rating .pane.pos { bottom: 18px; border-radius: 2px 2px 0 0; z-index: 1; }
.translator .rating .pane.neg { top: 18px; border-radius: 0 0 2px 2px; z-index: 3; }
.translator tr td .rating .vote { display: none; height: 1.1em; padding: .25em 0; line-height: 120%; color: #000; background: #fff; text-align: center; text-decoration: none; box-shadow: 0 2px 2px #999; }
.translator .rating:hover .vote { display: block; }
.translator .rating .vote b { font-size: 1.5em; }
.translator tr .rating a.vote:hover { color: #fff; }
.translator .rating a.vote.pos:hover { background: #00991a; }
.translator .rating a.vote.neg:hover { background: #ff4040; }
/* Кто голосовал: блок слева от числа. */
.translator .rating .votes { position: absolute; left: -150px; top: 0; width: 140px; }
.translator .rating .votes .total { color: #000; padding-left: 1em; background: #fff; box-shadow: 0 2px 2px #777; }
.translator .rating .list { width: 100%; line-height: 120%; background: #eee; }
.translator .rating .list h3, .translator .rating .list ul { margin: .75em 0 .75em 1em; font-size: 1em; border: none; line-height: 13px; }
.translator .rating .list li { list-style: none; margin: 0; line-height: 16px; }
.translator .rating .votes .pos { box-shadow: 0 1px 2px #333; }
.translator .rating .votes .pos h3 { color: #00991a !important; }
.translator .rating .votes .neg h3 { color: #ff4040 !important; }
.translator .rating .list, .translator tr .rating .list a { color: #aaa; }
.translator tr .rating .list a:hover { color: #bbb; }
.translator .rating a.rmmy { font-size: 1.5em; line-height: 1px; font-weight: bold; text-decoration: none; margin: 0 .15em; position: relative; top: 2px; }

/* Редактор фрагмента оригинала */
.translator td.o div.editing { padding: 6px 9px; }
.translator td.o div.editing p { margin: 0 0 4px; }
.translator td.o div.editing .fields input { display: inline-block; width: auto; }
.translator td.o div.editing textarea { width: 90%; min-height: 50px; resize: none; overflow: hidden; font-size: inherit; }
.translator td.o div.editing .ccnt { float: right; font-size: 11px; color: #888; padding-top: 6px; }

/* Редактор версии */
.translator td.t > div.editing form { margin: 0; }
.translator td.t > div.editing .text, .translator td.t > div.editing .info { margin-right: 77px; padding-right: 0; }
.translator td.t > div.editing textarea { width: 100%; min-height: 50px; resize: none; overflow: hidden; font-size: inherit; }
.translator .info .ccnt { float: right; }
/* Пока htmx ждёт сервер: сохраняемый редактор, удаляемая версия. */
.translator .htmx-request { opacity: .7; background: #f0f0f0; }

/* Комментарии под фрагментом */
.translator tr.commented td { border-bottom-color: #fff; background-image: linear-gradient(to bottom, rgba(255,255,255,0), #fff); background-repeat: repeat-x; background-position: left bottom; padding-bottom: 20px; }
.translator tr.commented td.o .tools { bottom: 20px; }
.translator tr.comments-row td { padding: 1em 1em 1em 31px; background-color: #fff; }
.comments { margin-left: -33px; position: relative; }
.comments .thread { margin-left: 33px; position: relative; }
.comments > .thread { margin-top: 15px; }
.comments .comment { position: relative; margin: 15px 0; }
.comments .comment .text { padding: 10px 10px 2px; line-height: 17px; }
.comments .comment .text p:last-child { margin-bottom: 0; }
.comments .comment .text a { text-decoration: underline; }
.comments .comment .text blockquote { border-left: 3px solid #ddd; padding-left: 10px; }
.comments .comment .meta { position: relative; padding: 1px 10px 10px; font-size: 11px; }
.comments .comment .meta, .comments .comment .meta a { color: #bbb; }
.comments .comment:hover .meta, .comments .comment:hover .meta a { color: #888; }
.comments .comment:hover a i.i { opacity: 1; }
.comments .comment .meta a.b { padding: 0 10px; }
.comments .comment .meta a.dot { margin-left: 10px; }
.comments .meta .upic { width: 1.8em; height: 1.8em; border-radius: 2px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.comments .meta .upic:hover { box-shadow: 0 0 3px #6ad; }
.comments .meta .upic.bigger { width: 50px; height: 50px; box-shadow: 5px 5px 20px rgba(0, 0, 0, .5); margin-right: 15px; }
.comments .comment .meta .rating { float: right; position: relative; text-align: center; cursor: default; }
.comments .comment .meta .rating a { display: none; text-decoration: none; cursor: pointer; position: absolute; left: 0; right: 0; font-size: 14px; line-height: 1em; height: 16px; }
.comments .comment .meta .rating:hover a { display: block; }
.comments .comment .meta .rating a.p { top: -16px; }
.comments .comment .meta .rating a.n { bottom: -16px; }
.comments .comment .meta .rating span { display: block; min-width: 20px; }
.comments .comment.new { background: #aad7ee; border-radius: 5px; }
.comments .comment.new .meta, .comments .comment.new .meta a { color: #656b6a; }
.comments .comment.highlighted { border: 1px solid #7f7f7f; }
.comments .comment.highlighted .text { padding: 9px 9px 2px; }
.comments .comment.highlighted .meta { padding: 1px 9px 9px; }
.comments .comment.deleted { font-style: italic; opacity: .5; }
.comments .thread-form { padding: 10px 0; }
.comments .thread-form form { margin-bottom: 10px; }
.comments .thread-form textarea, .comments .comment .text textarea { width: 96%; height: 60px; }
.comments .cmt_0_btn { margin: 10px 0 0 33px; }
.comments .cmt_0_btn a { color: #777; }
.comments a.up, .comments a.thread-collapse { position: absolute; bottom: 11px; left: -20px; }
.comments .collapsed-msg { display: none; text-align: center; margin: 10px 0; color: #777; cursor: pointer; }
.comments .thread.collapsed > .thread { display: none; }
.comments .thread.collapsed > .collapsed-msg { display: block; }
.comments .thread.collapsed > .comment a.thread-collapse i { background-position: -408px -96px; }  /* icon-plus */

/* Словарь: закреплённая колонка справа на странице главы и отдельная страница. */
#tr-sidebar { display: none; }
.sidebar-on #tr-sidebar { display: block; position: fixed; width: 240px; top: 264px; right: 10px; bottom: 5px; }
.sidebar-on .translator, .sidebar-on #pages-bottom { width: calc(100% - 250px); }
#dict { position: relative; width: 100%; height: 100%; }
#dict > div { position: absolute; z-index: 1; width: 100%; }
#dict-search { top: 0; height: 50px; padding: 10px 0 0; }
#dict-search input { width: 190px; display: inline-block; }
#dict-search a { padding: 5px 0 0 8px; float: right; }
#dict-body { overflow: auto; top: 50px; bottom: 0; }
#dict.has-edit #dict-body { bottom: 20px; }
#dict .entry { position: relative; }
#dict .entry:hover a i.i { opacity: 1; }
#dict .entry a { float: right; padding: 0 0 0 9px; text-decoration: none; }
#dict .entry .o { display: block; }
#dict .entry .t { display: block; margin-bottom: 10px; font-style: italic; }
#dict .entry.editing input { margin-bottom: 4px; }
#dict-tools { height: 20px; bottom: 0; opacity: .5; }
#dict-tools:hover { opacity: 1; }
#dict-tools a { text-decoration: none; border-bottom: 1px dotted #000; color: #000; font-size: 1.1em; }
#dict-add { z-index: 20 !important; bottom: 20px; padding: 5px 0 0; background: #fff; }
#dict-add input { margin-bottom: 4px; }
#dict.page, #dict.page > div { position: static; width: auto; height: auto; }
#dict.page .entry { max-width: 500px; }

#pages-bottom { margin: 10px 0 0; }
#pages-bottom .p { float: left; }
#pages-bottom .n { float: right; }

/* Страницы пользователей */
a.user-inactive { color: #777; }
.negative { color: #f00; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background: #f5f5f5; border: 1px solid rgba(0, 0, 0, .05); border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); }
.nb-profile-head { display: flex; gap: 20px; }
.nb-profile-head .upic img { display: block; margin: 10px auto 5px; border-radius: 5px; }
.nb-profile-head h1 { margin-top: 10px; }
.nb-personal th, .nb-personal td { vertical-align: top; padding-bottom: 15px; }
.nb-personal th { width: 200px; }
.nb-user-books td { white-space: nowrap; }
.nb-user-books td.t { white-space: normal; }
.nb-sort .nav-link { padding: 4px 15px; }
.nb-user-verse { padding: 20px 0; border-bottom: 1px solid #777; }
.nb-user-verse:hover { background: #f0f0f0; }
.nb-user-verse .orig { padding-left: 24px; }
.nb-user-verse .x { float: right; font-size: 20px; font-weight: bold; color: #777; text-decoration: none; }
.nb-user-verse .rate { margin-right: 5px; color: #777; }
.nb-users th.r, .nb-users td.r { background: #eee; font-weight: bold; }
.nb-users th a { display: block; position: relative; }
.nb-users th .caret { position: absolute; top: 7px; right: 5px; border: 4px solid transparent; border-bottom: 0; border-top-color: #000; }
.nb-users th .caret.desc { border-top: 0; border-bottom: 4px solid #000; }
.sr .nb-figures { line-height: 24px; color: #555; }
.sr .nb-figures b { font-size: 20px; white-space: nowrap; color: #000; }
.nb-marks ul { margin: 0; padding: 0; list-style: none; }
.comments.nb-user-comments { margin-left: 0; }

/* Посты блога */
.post { margin: 0 0 40px; }
.post.topic-64 h2 a { color: #8b0000; font-weight: bold; }
.post.topic-70 h2 a { color: #556b2f; }
.post.topic-70 .body { margin-left: 0; border-left: 1px dashed #556b2f; padding-left: 10px; }
.post h2 { margin: 10px 0; line-height: 28px; }
.post .book { margin-top: -10px; }
.post .body { margin: 10px; }
.post .body a { text-decoration: underline; }
.post .info { background: #eee; border-bottom: 1px dashed #777; padding: 5px; font-size: 11px; }
.post .info .cmt { float: right; width: 170px; text-align: right; }
.nb-birthday .day { width: 70px; flex: none; }
.nb-birthday .year { width: 90px; flex: none; }
.nb-profile-head .upic { width: 70px; text-align: center; }
.nb-profile-head .upic .change { display: none; font-size: 11px; }
.nb-profile-head:hover .upic .change { display: inline; }
.nb-cutter { position: relative; overflow: hidden; background-repeat: no-repeat; user-select: none; touch-action: none; }
.nb-cutter .frame { position: absolute; cursor: move; outline: 1px dashed #fff; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .5); }
.nb-cutter .corner { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: #fff; border: 1px solid #333; cursor: nwse-resize; }
.nb-cutter-preview { width: 50px; height: 50px; margin: 0 0 15px; border-radius: 5px; background-repeat: no-repeat; }

/* "Мои обсуждения": фрагменты оригинала, за которыми следит пользователь */
.nb-talks .orig { margin: 0 0 15px; }
.nb-talks .orig .t { color: #777; font-size: 11px; }
.nb-talks .orig .meta { background: #e5e5e5; padding: 2px 8px; border-bottom: 1px solid gray; font-size: 11px; }
.nb-talks .orig .meta a.new, .post .info a.new, .nb-announce .info a.new { color: #c00; font-weight: bold; }
.nb-talks p.info { color: #777; }

/* Уведомления */
#Notices { margin: 0; padding: 0; list-style: none; }
#Notices li { position: relative; margin: 0 0 10px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
#Notices li.new { background: #eee; border-color: #777; }
#Notices li p.meta { border-top: 1px solid #ccc; margin: 5px 0 0; padding: 0; font-size: 11px; }
#Notices .u { display: none; position: absolute; right: 10px; top: 10px; }
#Notices li:hover .u { display: block; }

/* Почта */
#Mail td { white-space: nowrap; }
#Mail td.s { width: 100%; white-space: normal; }
#Mail tr.new td { font-weight: bold; }
.nb-letter { margin: 10px; }

/* Дерево каталога и результаты поиска */
#Tree ul { list-style: none; padding-left: 20px; }
#Tree > ul { padding-left: 0; }
#Tree div.n { padding: 1px 4px; }
ul.search-results { list-style: none; padding: 0; margin: 0; }
ul.search-results li { margin: 10px 0; padding: 5px; }
ul.search-results li:hover { background: #eee; }
ul.search-results li p { margin: 0; }
ul.search-results li .ready { float: right; }
ul.search-results li .meta { font-size: 11px; }
ul.search-results li .meta .cat { float: right; }

/* Помощь и другие статические страницы */
.nb-page span.note { border-bottom: 1px dotted #aaa; cursor: help; }
.nb-page img.illu { display: block; margin: 20px 0; padding: 10px; border: 1px dashed #aaa; max-width: 100%; height: auto; }
.nb-page ul.a li { margin: 10px 0; }
.nb-page p.thankyou { font-size: 16px; font-style: italic; }
#Tree div.current { background: #444; color: #fff; }
#Tree div.current a { color: #fff; }
#Tree.picking a { cursor: w-resize; }

/* Плашка у правого края, которая проходит по непрочитанным комментариям */
#comments-nav-box { position: fixed; right: 5px; top: 50%; width: 30px; user-select: none; z-index: 1030; }
#comments-nav-box div { margin: 5px 0; border: 1px solid #b0b0b0; background: #f0f0f0; cursor: pointer; text-align: center; line-height: 30px; font-size: 16px; opacity: .3; border-radius: 3px; }
#comments-nav-box div:hover { opacity: 1; }