/* CSS для общих элементов сайта */

body { font-family: Arial, Geneva, Tahoma, sans-serif; font-size:10pt; background: #fff url('/design/common/pic/background.png') top repeat; }
a { color: #4a6cbc; text-decoration: underline; }
a:hover { color: #4a6cbc; text-decoration: none; }
a:visited { color: #660099; text-decoration: underline; }
div#container {	
	width: 998px; margin: 0 auto; padding: 0 0 1px; 
	background-color: #fff; box-shadow: 0 3px 6px 1px rgba(0,0,0,0.05);
	min-height: calc(100vh - 64px); box-sizing: border-box;
	display: flex; flex-direction: column; }
div#background { margin-top: 54px; padding-top: 10px; min-height: calc(100vh - 54px); box-sizing: border-box; }
section#content { padding:20px 20px 19px; flex-grow: 1; }
section#content div.clear { height:1px; clear:both; }

div#contentMargin { width:778px; min-height:0; }
div#contentSide { position: sticky; top: 20px; float:right; text-align:center; width: 160px; min-height:0; }
div#contentSide div.gap { height:20px; width:100%; }

/* 
 * Общие элементы
 */
h2 { padding: 0 20px 9px; margin: 0 0 20px; border-bottom: 1px solid #ebe5dd; font-family: 'yanone_kaffeesatzregular', sans-serif; font-size: 28px; line-height: 28px; color: #d00026; clear:left; }
h2 a, h2 a:visited, h2 a:hover { vertical-align:middle; display:inline-block; margin:-10px 0; padding:13px 13px 10px; font-family: Arial, Geneva, Tahoma, sans-serif; font-size:13px; line-height:13px; color:#111; text-decoration: none; border-bottom:3px solid #fff; }
h2 a:hover { color:#111; border-bottom:3px solid #d00026; }
h2 span { display:inline-block; margin-right:17px; max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h2 a.selected, h2 a.selected:visited, h2 a.selected:hover { border-bottom:3px solid #efa821; }

h3 { font-size: 19px; margin:18px 0 18px; color: #111; }
h4 { font-size: 130%; color: #111; }
h5 { font-size: 115%; color: #111; }

p { margin:10px 0 10px; line-height: 1.4; }
img { vertical-align: middle; }

ol { margin: 15px 0 15px 0; line-height: 1.4; }
ul { margin: 15px 0 15px 0; line-height: 1.4; }
ol li { list-style: decimal; margin: 3px 0 3px 30px; overflow:visible; }
ul li { list-style: disc; margin: 3px 0 3px 30px; overflow:visible; }

.new {color: white; background-color: red; border-radius: 3px; padding: 0px 3px 1px;} 

/* 
 * Формы
 */
form input, form button { vertical-align:middle; margin:0; padding:0; }
form input.text, select { 
	width:250px; height:30px; border:1px solid #aaa; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); padding: 0 4px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
form input[readonly] { background-color: #e0e0e0; color:#555; }
form td { padding: 2px 5px; vertical-align:middle; }
form textarea { width: 250px; height: 120px; font-family: Arial, sans-serif; font-size:10pt; }
form fieldset { padding: 5px 20px 10px; border: 1px solid #333; margin: 0 0 10px; background-color:#ffffff; }
form fieldset legend { padding: 0 5px 3px; background: #fff; }
form label { display:inline-block; line-height:16px; margin:7px 0 7px 0; }

/* 
 * Кнопки
 */
form input.submit, form button, a.button, a.button:visited, a.button:hover
{ display:inline-block; font-size:13px; line-height:16px; background:#efa821; border:1px solid #efa821; border-radius:4px; box-shadow: 0 2px 0 #ec9005; padding:11px 19px 9px;
  font-weight:bold; text-transform: uppercase; text-decoration:none; color:#fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.2); vertical-align: baseline; }
form input.submit:active, form button:active, a.button:active 
{ position:relative; top:2px; box-shadow: inset 0 0 0 #ec9005; }
form input.submit:focus, form button:focus, a.button:focus
{ border:0px; outline:0px; border:1px solid #a5c7fe; }
span.button
{ display:inline-block; font-size:13px; line-height:16px; background:#f3eee7; border:1px solid #f3eee7; border-radius:4px; box-shadow: 0 2px 0 #ebe5dd; padding:11px 19px 9px; }
span.button a, span.button a:visited, span.button a:hover
{ color: #4a6cbc; }
form button span.icon { display:none; }

/* 
 * Навигатор: блок вверху каждой страницы
 */
header.common { 
	z-index: 999; height:54px; background: url('/design/common/pic/elements.png') top repeat-x; box-shadow:0 0 3px 1px rgba(0,0,0,0.2);  
	min-width: 998px; max-width: 100%; position: absolute; top: 0; left: 0; right: 0;
	overflow-x: hidden; overflow-y: hidden; /* horizontal scroll fix */ }
header.common a:visited { color: #4a6cbc; }
header.common div.inner { width:998px; height:54px; margin: 0 auto; position:relative; background-color: #fff; }
header.common div.left { width:45px; height:54px; background: url('/design/common/pic/elements.png') 0px -54px no-repeat; position:absolute; top:0; left:-45px; }
header.common div.right { width:45px; height:54px; background: url('/design/common/pic/elements.png') -83px -108px no-repeat; position:absolute; top:0; right:-45px; }
header.common div.right a.pin { display:block; width:9px; height:13px; margin:18px 0 0 10px; background: url('/design/common/pic/elements.png') -110px -276px no-repeat; }
header.common table { width:998px; height:54px; margin: 0 auto 0; }
header.common table td { vertical-align: middle; padding:0; }
header.common table td.logo { width:192px; }
header.common table td.usermenu { text-align: right; padding-bottom:2px; }
header.common table td.usermenu b a, header.common table td.usermenu b a:visited,
header.common table td.usermenu b a:hover { color:#111; }
header.common table td.usermenu a.logout { display:inline-block; width:9px; height:10px; background: url('/design/common/pic/elements.png') -105px -246px no-repeat; margin:0 0 2px 3px; vertical-align: middle; }
header.common table td.avatar { width:52px; }
header.common table td.avatar a.avatar { display:block; position:relative; width:52px; height:54px; text-align:right; }
header.common table td.avatar img { width:40px; height:40px; margin-top:7px; }
header.common table td.avatar div.circle { width:40px; height:40px; position:absolute; right:0; top:7px; background: url('/design/common/pic/elements.png') 0 -216px no-repeat; }
header.common nav { font-size: 18px; font-family: 'yanone_kaffeesatzregular', sans-serif; text-transform: uppercase; }
header.common nav a { display:block; float:left; padding:0 0 0 20px; height:26px; text-decoration:none; position: relative; }
header.common nav a span { position:absolute; height:21px; border-bottom:1px solid #4a6cbc; left:20px; right:0; top:0; }
header.common nav a.ext { padding:0 0 0 27px; background: url('/design/common/pic/elements.png') 5px -176px no-repeat; }
header.common nav a.ext span { left:27px; }
header.common nav a:hover span { border-color:#fff; }
header.common nav a.selected, header.common nav a.selected:visited, 
header.common nav a.selected:hover { color:#111; }
header.common nav a.selected span, header.common nav a.selected:visited span, 
header.common nav a.selected:hover span { border-color:#111; }

/* 
 * Форма авторизации
 */
section#auth { display:none; position: fixed; z-index: 997; width:100%; height:100%; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.9); }
section#auth div.inner { position:relative; width:998px; margin:54px auto 0; }
section#auth form { position:absolute; top:0; right:0; width:290px; background:#fff; padding:15px 0 20px; }
section#auth form label { display:block; margin: 5px 20px; }
section#auth form input.text { display:block; margin: 0 20px 0; height:40px; }
section#auth form span.forget { display:block; padding: 10px 20px 0 0; float:right; }
section#auth form button { margin:10px 0 0 20px; }

/* 
 * Подвал внизу каждой страницы
 */
footer.common { height:76px; }
footer.common div.inner { position:relative; }
footer.common a.logo { opacity:0.8; display:block; width:40px; height:40px; position:absolute; left:20px; top:15px; background: url('/design/common/pic/elements.png') -40px -216px no-repeat; }
footer.common a.logo:hover { opacity:1; }
footer.common div.copyright { padding:18px 0 0 70px; }

footer.common form.quickSearch { display:block; width:240px; height:30px; position:absolute; top:20px; right:20px; }
footer.common form.quickSearch input { width:240px; height:30px; padding-left:30px; position:absolute; top:0px; left:0px; }
footer.common form.quickSearch button { display:block; width:28px; height:28px; padding:0; margin:0; position:absolute; top:1px; left:1px; border:0px; background:rgba(255,255,255,0); box-shadow:0 0 0 #fff; }
footer.common form.quickSearch button span { display:block; width:15px; height:15px; background: url('/design/common/pic/elements.png') -90px -241px no-repeat; position:absolute; top:7px; left:7px; }

section.footer-sponsor { 
	background: #f3eee7; height: 80px; position: relative; border-bottom:1px solid #ebe5dd; 
	display: flex; align-items: center; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.1);
}
section.footer-sponsor div.sponsor-aks { 
	background: url('/design/common/pic/sponsor-aks3.png') 0px 0px no-repeat; width:167px; height:93px; 
	position: absolute; right: 180px; bottom: -31px;
}
section.footer-sponsor p.support { font-size: 26px; font-family: 'yanone_kaffeesatzregular', sans-serif; color: #d3202a; }
section.footer-sponsor p.support a,
section.footer-sponsor p.support a:hover,
section.footer-sponsor p.support a:visited { color: #d3202a; }
section.footer-sponsor a.support-highlight { 
	font-family: 'yanone_kaffeesatzregular', sans-serif; text-decoration: none;
	display: block; text-transform: uppercase; margin: 0 10px 0 30px; font-size: 22px; 
	background: #d3202a; color: #f3eee7; padding: 4px 15px; border-radius: 3px; }

/* 
 * Подсказка (как на главной странице)
 */
div#hint { margin:-20px -40px 0; position:relative; padding: 0 0 20px; }
div#hint div.text { padding: 15px 80px 15px 40px; background:#fff; font-size: 22px; font-family: 'yanone_kaffeesatzlight', sans-serif; color:#5a002d; }
div#hint div.shadow { width:998px; height: 20px; background: url('/design/common/pic/elements.png') 0px -256px repeat-x; position:absolute; left:20px; right:20px; bottom:0; }
div#hint div.left-angle { width:20px; height: 20px; background: url('/design/common/pic/elements.png') -108px -216px no-repeat; position:absolute; left:0; bottom:0; }
div#hint div.right-angle { width:20px; height: 20px; background: url('/design/common/pic/elements.png') -88px -216px no-repeat; position:absolute; right:0; bottom:0; }
div#hint a.close { display:block; width:30px; height:30px; border:1px solid #ddd; border-radius:15px; position:absolute; margin:auto; top:0; bottom:20px; right:35px; background: #fff; }
div#hint a.close:hover { box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.2); }
div#hint a.close span { display:block; width:14px; height:14px; background: url('/design/common/pic/elements.png') -114px -242px no-repeat; margin: 8px; }

/*
 * Постраничная навигация
 */
div.pageNav { text-align: center; margin: 20px 0 20px; font-weight:bold; }
div.pageNav span.button { margin:0 4px; }
div.pageNav a, div.pageNav a:visited, div.pageNav a:hover { display:inline-block; margin:-12px; padding:12px; }

/*
 * Яркое сообщение о том, что сериал не активен (используется на страницах комикса и "Мои комиксы")
 */
div.serialIsUnactive { padding:3px; background:#f44; color:#fff; text-align:center; }
div.serialIsUnactive a, div.serialIsUnactive a:visited, div.serialIsUnactive a:hover { color:#fff; font-weight:bold; }

/* 
 * Лента комментариев 
 * (как на страницах чтения комикса, так и на общих страницах)
 */
div.comment { margin:10px 0 0; position: relative; }
div.comment div.anchor { display: block; position: relative; top: 0; visibility: hidden; }
div.comment a.avatar, div.comment a.avatar:visited,
div.comment a.avatar:hover { display:block; width:40px; height:40px; float:left; }
div.comment a.avatar img { display:block; width:40px; height:40px; }
div.comment.giant a.avatar, div.comment.giant a.avatar:visited,
div.comment.giant a.avatar:hover, div.comment.giant a.avatar img { width:100px; height:100px; }
div.comment div.inner { background:#f3eee7; border:1px solid #f3eee7; margin:0 0 0 60px; position:relative; overflow:visible; padding:18px; }
div.comment.giant div.inner { margin-left: 120px; }
div.comment div.tail { background:#f3eee7; display:block; width:16px; height:16px; position:absolute; top:12px; left:44px; }
div.comment.giant div.tail { left:104px; }
div.comment div.tail span.icon { display:block; margin:0; padding:0; vertical-align: inherit; }
div.comment div.info { margin:-1px 0 10px;}
div.comment div.info a.id, div.comment div.info a.id:visited,
div.comment div.info a.id:hover { display:block; color:#a3a3a3; float:right; margin:1px 0 0 5px; text-decoration: none; }
div.comment div.info .username { display:inline-block; white-space:nowrap; font-size:14px; margin-right:6px; }
div.comment div.info span.username { color:#999; }
div.comment div.info span.time { display:inline-block; color:#a3a3a3; white-space:nowrap; }
div.comment div.info span.ip { display:inline-block; color:#a3a3a3; white-space:nowrap; }
div.comment div.info span.role { display:inline; color:#ec9005; }
div.comment div.edited { width:100%; margin-top:10px; text-align:right; color:#a3a3a3; }
div.comment span.edit { display:block; position:absolute; left:20px; bottom:20px; }
div.comment-issue { margin:10px 0 10px 60px; }
div.comment.authorsComment div.inner { border:1px solid #efa821; }
div.comment.authorsComment div.tail { background:#efa821; }
div.comment.adminComment div.inner { border:1px solid #d00026; }
div.comment.adminComment div.tail { background:#d00026; }
div.comment div.inner { overflow-x: auto; }
div.comment div.inner.comment-limited { max-height: 310px; overflow-y: hidden; }
div.comment div.inner div.comment-overlay { background-image: linear-gradient(to bottom, rgba(243, 238, 231, 0) 0px, rgba(243, 238, 231, 0.5) 10px, #f3eee7 25px); 
    position: absolute; bottom: 0px; top: 250px; left: 18px; right: 18px; }
div.comment div.inner div.comment-overlay.comment-overlay-shorter { top: 270px !important; }
div.comment div.inner div.comment-length { position: absolute; bottom: 44px; width: 680px; }
div.contentSerial div.comment div.inner div.comment-length { width: 540px !important; }
div.comment div.inner div.comment-length.comment-length-shorter { bottom: 20px !important; }

/*
 * Закрепление менюшки (на разрешениях больше 1024 пикселов)
 */
@media screen and (min-width: 1024px) {
	header.common { position: fixed; }
	body.unpinned header.common { position: absolute; }
	body.unpinned header.common div.right a.pin { background: url('/design/common/pic/elements.png') -119px -276px no-repeat; }
	div.comment div.anchor { top: -56px; }
	body.unpinned div.comment div.anchor { top: 0px; }
}

/* 
 * Полоса загрузки
 */
div#loading-pages { background: url('/design/common/pic/wide_loader.gif') no-repeat center center; height: 20px;  }

/*
 * Горизонтальное меню
 */
ul.hor-menu { list-style: none; display: flex; padding: 0 13px; margin: 20px 0px 20px; background:#f3eee7;  }
ul.hor-menu li { list-style: none; display: block; padding: 12px 9px; margin:0px; line-height:13px; }
ul.hor-menu li a, ul.hor-menu li a:visited, ul.hor-menu li a:hover { display:block; padding: 7px; margin:-7px; color: #4a6cbc; }
ul.hor-menu li.selected { background:#fff; }
ul.hor-menu li.selected a, ul.hor-menu li.selected a:visited,
ul.hor-menu li.selected a:hover { color:#111; }

/*
 * Цвета рейтингов
 */
a.rating1, a.rating1:hover, a.rating1:visited { text-decoration:none; font-weight:bold; color:#aaa; }
a.rating2, a.rating2:hover, a.rating2:visited { text-decoration:none; font-weight:bold; color:#4a6cbc; }
a.rating3, a.rating3:hover, a.rating3:visited { text-decoration:none; font-weight:bold; color:#39b54a; }
a.rating4, a.rating4:hover, a.rating4:visited { text-decoration:none; font-weight:bold; color:#efa821; }
a.rating5, a.rating5:hover, a.rating5:visited { text-decoration:none; font-weight:bold; color:#d00026; }
a.rating6, a.rating6:hover, a.rating6:visited { text-decoration:none; font-weight:bold; color:#111; }

/* 
 * Кнопки отписаться-подписаться (большие, базовые)
 */
a.subscribe, a.unsubscribe 
{ 
	display:block; width:142px; height:40px; background: url('/design/common/pic/elements.png') 0 -331px repeat-x; 
	-o-transition: 0.2s background-position-y cubic-bezier(.3,.73,.3,.74);
	-moz-transition: 0.2s background-position-y cubic-bezier(.3,.73,.3,.74);
	-webkit-transition: 0.2s background-position-y cubic-bezier(.3,.73,.3,.74);
	transition: 0.2s background-position-y cubic-bezier(.3,.73,.3,.74);
}
a.unsubscribe, a.unsubscribe.just-subscribed:hover { background: url('/design/common/pic/elements.png') 0 -411px repeat-x; }
a.unsubscribe:hover { background: url('/design/common/pic/elements.png') 0 -371px repeat-x; }

/*
 * Отображение выпуска сериала в виде ленты.
 * Используется на таких страницах, как: Комикс-лента, Лента комикса и Прямой эфир
 */
div.list-issue { border:1px solid #aaa; margin:20px 0; }
div.list-issue div.header { padding:20px; position:relative; }
div.list-issue div.header div.links { position:absolute; right:0; top:0; bottom:0; height:19px; margin:auto 10px; }
div.list-issue div.header div.links a { display:inline-block; padding:0 10px 0 26px; position:relative; }
div.list-issue div.header div.links a span.icon { position:absolute; left:4px; top:4px; }
div.list-issue div.header div.title { font-size: 19px; line-height:19px; margin-right:210px; }
div.list-issue div.header div.title a, div.list-issue div.header div.title a:visited,
div.list-issue div.header div.title a:hover { color:#111; text-decoration:none; }
div.list-issue div.issue { text-align:center; position: relative; }
div.list-issue div.issue a { display:inline-block; }
div.list-issue div.issue img { max-width:776px; }
div.list-issue div.authors { padding:20px 20px 10px; }
div.list-issue div.authors a.avatar { display:block; float:left; }
div.list-issue div.authors a.avatar img { width:40px; height:40px; }
div.list-issue div.authors div.info { font-weight:bold; line-height:1; padding:0 20px 0 60px; margin-bottom:17px; }
div.list-issue div.authors div.inner { padding:0 20px 0 60px; }
div.list-issue div.also { background:#f3eee7; position:relative; height:40px; clear:left; }
div.list-issue div.also a.subscribe, div.list-issue div.also a.unsubscribe { position:absolute; top:0; right:0; }
div.list-issue div.also div.inner { height:16px; line-height:16px; position:absolute; top:0; bottom:0; left:0; margin:auto 20px; color:#999; }
div.list-issue div.also a.comment { position:relative; display:inline-block; padding:0 9px 0 24px; }
div.list-issue div.also a.comment span.icon { position:absolute; top:4px; left:0; }
div.list-issue div.also span.time, div.list-issue div.also span.rating { display:inline-block; padding:0 9px; }
div.list-issue div.also a.original { display:inline-block; background: url('/design/common/pic/elements.png') -2px -180px no-repeat; padding-left:20px; }

/*
 * proof
 */
div.issue img.blank-img, section.issue img.blank-img { position:absolute; top: 0; left: 0; width:100%; height: 100%; opacity: 0; filter:alpha(opacity=0);-moz-opacity:0; }

/*
 * Отображение выпуска сериала в виде превьюшки с номером и датой публикации.
 * Используется на таких страницах, как: Комикс-лента (по комиксам), Содержание и "О комиксе"
 */
a.thumb-issue { display:block; position:relative; opacity:1; width:180px; height:135px; overflow:hidden; }
a.thumb-issue img { width:180px; height:135px; position:absolute; top:0; left:0; }
a.thumb-issue div.info { width:180px; height:135px; position:absolute; top:0px; left:0px; background: rgba(0,0,0,0.8); color:#fff; }
a.thumb-issue span.number { padding:20px 20px 10px; display:block; font-size:22px; line-height:19px; font-family: 'yanone_kaffeesatzregular', sans-serif; color:#efa821; }
a.thumb-issue span.time { display:block; color:#ccc; padding-left:20px; }
a.thumb-issue span.name { display:block; color:#fff; padding:10px 10px 0 20px; }
a.thumb-issue div.info, a.thumb-issue:visited div.info { 
	top:135px; 
    -moz-transition: top 0.3s cubic-bezier(.3,.73,.3,.74);
    -o-transition: top 0.3s cubic-bezier(.3,.73,.3,.74);
    -webkit-transition: top 0.3s cubic-bezier(.3,.73,.3,.74);
    transition: top 0.3s cubic-bezier(.3,.73,.3,.74);
}
a.thumb-issue:hover div.info { top:0px; }

/*
 * Иконки в CSS-спрайте
 */
span.icon { 
	display:inline-block; width:16px; height:16px;
	background-image:url('/design/common/pic/elements.png?23-10-2019');
	background-repeat: no-repeat;
	background-position: 0px -451px;
	vertical-align: middle;
	margin:-2px 0 -2px;
}
span.icon.icon-accept { background-position: 0px -451px; }
span.icon.icon-add { background-position: -16px -451px }
span.icon.icon-delete { background-position: -32px -451px; }
span.icon.icon-edit { background-position: -48px -451px; }
span.icon.icon-images { background-position: -64px -451px; }
span.icon.icon-user { background-position: -80px -451px; }
span.icon.icon-comment { background-position: -96px -451px; }
span.icon.icon-info { background-position: -112px -451px; }
span.icon.icon-content { background-position: 0px -467px; }
span.icon.icon-cancel { background-position: -16px -467px; }
span.icon.icon-lock { background-position: -32px -467px; }
span.icon.icon-translate { background-position: -48px -467px; }
span.icon.icon-featured { background-position: -64px -467px; }
span.icon.icon-random { background-position: -80px -467px; }
span.icon.icon-rss { background-position: -96px -467px; }
span.icon.icon-tail { background-position: -112px -467px; }
span.icon.icon-next { background-position: 0px -483px; }
span.icon.icon-prev { background-position: -16px -483px; }
span.icon.icon-last { background-position: -32px -483px; }
span.icon.icon-first { background-position: -48px -483px; }
span.icon.icon-options { background-position: -64px -483px; }
span.icon.icon-cross { background-position: -96px -483px; }
span.icon.icon-plus { background-position: -112px -483px; }
span.icon.icon-top { background-position: 0px -499px; }
span.icon.icon-postapocalypse { background-position: -112px -499px; }
span.icon.icon-animal { background-position: -64px -515px; }
span.icon.icon-drama { background-position: -80px -515px; }
span.icon.icon-fantasy { background-position: -96px -515px; }
span.icon.icon-gaming { background-position: -112px -515px; }
span.icon.icon-humor { background-position: -64px -531px; }
span.icon.icon-journal { background-position: -80px -531px; }
span.icon.icon-paranormal { background-position: -96px -531px; }
span.icon.icon-romance { background-position: -112px -531px; }
span.icon.icon-superheroes { background-position: -63px -547px; width:17px; }
span.icon.icon-scifi { background-position: -80px -547px; }
span.icon.icon-life { background-position: -96px -547px; }
span.icon.icon-steampunk { background-position: -112px -547px; }
span.icon.icon-detective { background-position: -96px -579px; }
span.icon.icon-history { background-position: -112px -579px; }
span.icon.icon-catalog-translate { background-position: -48px -563px; width:32px; }
span.icon.icon-catalog-top { background-position: -80px -563px; }
span.icon.icon-catalog-featured { background-position: -96px -563px; }