/* CSS для страницы просмотра комикса */

header.serial { font-family: 'yanone_kaffeesatzregular', sans-serif; text-align:center; overflow:hidden; background:#edebe9; position:relative; line-height: 1; }
header.serial a, header.serial a:visited, header.serial a:hover { text-decoration: none; display:block; color: #5a002d; }
header.serial h2 { margin:20px 0 20px; padding:0; background:none; border:0px; color: #5a002d; font-size:26pt; text-shadow: 2px 2px 2px rgba(0,0,0,0.15); }

div.contentSerialSideAndMargin { 
  display: grid; 
  column-gap: 20px; 
  grid-template-columns: 638px 300px; 
  grid-template-areas: "margin side"; 
}

div.contentSerialSide { min-height:0; grid-area: side; }
div.contentSerialSide div.inner { position: sticky; top: 20px; }
div.contentSerialMargin { min-height:0; grid-area: margin; }

/* 
 * Главное меню комикса
 */
nav.serial { background: #f3eee7; height:40px; padding: 0 0 0 10px; position:relative; }
nav.serial table { height:40px; }
nav.serial table td { vertical-align: middle; }
nav.serial table a, nav.serial table:visited,
nav.serial table a:hover { display:inline-block; padding: 0 10px; color: #4a6cbc; }
nav.serial table a.read1 { padding-right:0px; }
nav.serial table a.read2 { padding-right:0px; padding-left:0px; }
nav.serial table a.read3 { padding-left:0px; }
nav.serial table a.rss { position:relative; padding: 0 10px 0 32px; }
nav.serial table a.rss span.icon { position:absolute; top:-10px; bottom:-10px; left:10px; margin:auto 0; }
nav.serial td.selected { background:#fff; }
nav.serial td.selected a, nav.serial td.selected a:visited,
nav.serial td.selected a:hover { color:#111; }
nav.serial a.subscribe, nav.serial a.unsubscribe { position:absolute; top:0; right:0; }

/* 
 * Отображение выпуска комикса
 */
div.serial-nomargin { margin:-20px -20px 0; }

h3.serial { text-align:center; padding: 0; margin:18px 0; border:0px; color:#303030; font-size:18px; text-shadow:1px 1px 1px rgba(0,0,0,0.2); background:none; }
h3.serial span.issueNumber { color:#a3a3a3; text-shadow:0 0 0 rgba(0,0,0,0); }
h3.serial a, h3.serial a:visited, h3.serial a:hover { text-decoration: none; }

section.issue { position:relative; text-align:center; }
section.issue img { max-width:998px; }
section.issue a.prev, section.issue a.prev:visited, section.issue a.prev:hover
{ 
	display:block; position:absolute;
	width:25%; height:100%; left:0; top:0; bottom:0;
}
section.issue a.next, section.issue a.next:visited, section.issue a.next:hover 
{ display:block; position:relative; }

section.issue span.arrow
{ position:absolute; left:60px; top:1px; bottom:1px; margin:auto 0; display:block; width:25px; height:49px; background: url('/design/common/pic/elements.png') 0 -515px no-repeat; }
section.issue a.next span.arrow { left:auto; right:60px; background-position:-25px -515px; }
section.issue a span.arrow, section.issue a:visited  span.arrow
{ opacity:0; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease;  }
section.issue a:hover  span.arrow{ opacity:0.6; }

/* 
 * Навигация между выпусками
 */
nav.issue { padding:0 10px; margin:20px 0; text-align:center; }
nav.issue table { width:978px; }
nav.issue span.button.side a { position:relative; display:inline-block; padding-left:20px; }
nav.issue span.button.side span.icon { position:absolute; left:0px; top:3px; }
nav.issue span.button, nav.issue a.button { margin: 0 10px; }
nav.issue span.large, nav.issue a.large { padding-left: 32px; padding-right:32px; }
nav.issue span.center { padding-left:6px; padding-right:6px; }
nav.issue span.center a, nav.issue span.center a:hover, nav.issue span.center a:visited 
{ font-weight:bold; color:#333; padding:0 8px; text-decoration: none; }

/* 
 * Краткое описание комикса
 */
div.serial-description { border:1px solid #ccc; padding:20px 20px 0; text-align:left; background-color: #ffffff;
	overflow-wrap: break-word; word-wrap: break-word; }
div.serial-description div.s-gap { height:15px; }
div.serial-description table { width:298px; background:#f3eee7; margin:-5px -20px 0; }
div.serial-description table tr td { text-align:center; vertical-align:middle; height:75px; width:50%; }
div.serial-description table a { display:block; }
div.serial-description span.nameShort { display:inline-block; border:1px solid #111; color:#111; padding: 1px 4px; font-size:25px; line-height:1; font-family: Georgia, 'Times New Roman', Times, serif; }
div.serial-description div.goUp { background:#fff; margin: 0 -20px 0; }
div.serial-description div.goUp a, div.serial-description div.goUp a:visited,
div.serial-description div.goUp a:hover { display:block; padding:10px; color:#ccc; text-align:center; text-decoration:none; }
div.serial-description div.goUp a:hover { color:#111; }

/* 
 * Авторское описание
 */
article.authors { border:1px solid #ccc; padding:20px 14px 20px 20px; margin-bottom:20px; }
article.authors a.avatar, article.authors a.avatar:visited,
article.authors a.avatar:hover { display:block; width:40px; height:40px; float:left; }
article.authors a.avatar img { width:40px; height:40px; }
article.authors div.info { padding: 0 0 0 60px; vertical-align: baseline; margin:-1px 0 5px 0; }
article.authors div.info a.username, article.authors div.info a.username:visited,
article.authors div.info a.username:hover { display:inline-block; white-space:nowrap; font-size:14px; margin-right:10px; }
article.authors div.info span.title { font-weight:bold; }
article.authors div.info span.time { display:inline-block; color:#999; white-space:nowrap; }
article.authors div.also { padding: 5px 7px 5px 60px; text-align:right; }
article.authors div.description { padding:0 0 0 60px; margin-bottom:-5px; }
article.authors div.description p { overflow-x: auto; }

/* 
 * Социальные кнопки под авторским описанием
 */
div.social { border-top:1px solid #ccc; margin:15px -14px -20px -20px; padding:12px 20px 12px; position:relative; }
div.social span.original { display:block; position:absolute; right:20px; top:0; bottom:0; margin:auto 0; height:18px; }
div.social a.topVote, div.social a.topVote:hover,
div.social a.topVote:visited { display:inline-block; width:112px; height:16px; vertical-align:middle; background:url('/design/common/pic/elements.png') no-repeat 0px -499px; margin: 0 15px 0 0; }
div.social div#vk_like { display:inline-block; vertical-align:middle; }

/*div.comment:nth-child(odd) div.inner { background:#ebe5dd; }
div.comment:nth-child(odd) div.tail { background:#ebe5dd; }*/

/* 
 * Форма комментирования
 */
form#comment { margin:20px 0 0; }
form#comment div.avatar { display:block; width:40px; height:40px; float:left; position:relative; }
form#comment div.avatar img { display:block; width:40px; height:40px; position:absolute; top:0; left:0; }
form#comment div.avatar span.circle { display:block; width:40px; height:40px; position:absolute; right:0; top:0; background: url('/design/common/pic/elements.png') 0 -216px no-repeat;  }
form#comment div.inner { margin:0 0 0 60px; position:relative; overflow:visible; border:1px solid #4a6cbc; box-shadow:inset 0 3px 1px rgba(74,108,188,0.1); }
form#comment div.tail { background:#4a6cbc; display:block; width:16px; height:16px; position:absolute; top:12px; left:-17px; }
form#comment div.tail span.icon { display:block; margin:0; padding:0; }
form#comment div.info { border-bottom:1px solid #ccc; line-height:1; padding:12px 20px; }
form#comment div.info .username { display:inline-block; white-space:nowrap; font-size:14px; margin-right:6px; vertical-align:baseline; }
form#comment textarea 
{
	display:block; width:576px; margin:0; padding:20px; border:0px; 
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
form#comment div.submit { float:right; padding:10px 0 0; }
form#comment div.submit button { background:#4a6cbc; border:1px solid #4a6cbc; box-shadow:0 2px 0 0 #26499b; }
form#comment div.submit button:active { box-shadow:0 0 0 0 #26499b; }
form#comment div.captcha { margin:10px 0 0 60px; min-height: 40px; }
form#comment div.captcha td.recaptcha_r1_c1 { height:6px; background-position: 0 -66px; }

div.commentFormDisabled { color: #a3a3a3; margin:20px 0 0; text-align:center; }

/* 
 * Отображение сообщений с форума
 */
div.forum { border:1px solid #ccc; margin:20px 0 0; }
div.forum a.title, div.forum a.title:hover, div.forum a.title:visited {
	display:block;
	background: #eee;
	text-align: center;
	font-weight:bold;
	color: #777;
	font-size:90%;
	text-decoration: none;
	padding: 4px;
}
div.forum .message {
  padding:6px 10px;
  border-bottom:1px solid #dddddd;
}
div.forum .quotetop {
  display:none;
  cursor: pointer;
  color: blue
}
div.forum .quotemain {
  display:none;
  border-left: 2px solid #f3eee7;
  padding: 2px 6px;
  margin-left: 5px;
}
div.forum .codetop {
  cursor: pointer;
  color: blue;
}
div.forum .codemain {
  display:none;
  border-left: 2px dashed #f3eee7;
  padding: 2px 6px;
  margin-left: 5px;
  font-family: monospace;
}

/*
 * Содержание
 */
div.chapters { padding: 10px 0 15px; /*пришлось из-за float-овости скроллящегося блока справа*/ float: left; width: 770px; }
div.chapters ul { margin:0; }
div.serial-content table { width:100%; }
div.serial-content table td { padding:10px 0; }

h2.serial-chapters-head { padding-top: 20px; clear: both; }
h3.serial-chapters-head { font-size: 130%; padding-left: 25px; clear: both; }
h3 a.serial-chapters-wrap-trigger { background: url(/design/common/icons/folder.png) no-repeat 100% 75%; padding: 5px 20px 1px 0; border-bottom: 1px dashed #0055FF; margin-bottom: 3px; text-decoration: none; }
div.serial-chapters-wrapping { display: none; }

/*
 * Подписчики
 */
div.subscribe-list { border-top:1px solid #ccc; margin-top:22px; padding:18px 0; }

/*
 * FAQ
 */
div.serial-faq table.faq { margin: 10px 0; table-layout: fixed; width: 100%; }
div.serial-faq table.faq td.icon { padding: 4px 10px 1px; width: 15px; }
div.serial-faq table.faq td.question { padding: 4px 0 0; }
div.serial-faq table.faq td.answer { padding: 0 0 10px; }
div.serial-faq table.faq td.answer div.answer-content { overflow-x: auto; }

/*
 * Персонажи
 */
div.serial-character div.charHolder { border: 1px solid #ccc; padding:20px; margin:20px 0; }
div.serial-character table.character { width: 100%; }
div.serial-character table.character td.thumb { width: 100px; }
div.serial-character table.character td.thumb a { display:block; }
div.serial-character table.character td.thumb img { max-width:100px; max-height:100px; }
div.serial-character table.character td { vertical-align: top; }
div.serial-character table.character td.name { padding-left:20px; font-size:16px; line-height: 1; }
div.serial-character table.character div.aboutHolder { font-size:13px; min-height: 65px; margin-top:18px; }

/*
 * Описание
 */
div.about-summary { margin:20px 0; }
div.about-summary a.license { display:block; float:right; padding-top:2px; }
div.about-summary a.button, div.about-summary a:visited.button,
div.about-summary a:hover.button { display:inline-block; margin:0 10px 10px 0; position:relative; padding:8px 18px 6px 33px; font-size:12px; }
div.about-summary a.button span.icon { position:absolute; top:10px; left:10px; }
table.about-issues { margin:20px 0; }