@charset "UTF-8";

/***************************************************************
****** Design Application for Mybb developed Kolobdur1974 ******
****************************************************************/

/*************************************************************
A - SETUP
**************************************************************/

/* M_A1 Основное, сброс настроек браузера
-------------------------------------------------------------*/

/* M_A1.1 */
html.mobile {box-sizing: border-box;} 
 
/* M_A1.2 */
html.mobile, html.mobile body {
  margin: 0; 
  padding: 0;
  overflow: auto;
  width: 100%;
}

/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

/* M_A1.3.1 */
html.mobile body {
  position: relative;
  font-size: 116.01%;
  -webkit-animation: bugfix infinite 1s;
}

/* M_A1.3.2 */
html.mobile @-webkit-keyframes bugfix {
  to {
    padding: 0;
  }
}

/* M_A1.4 */
html.mobile .punbb * {margin: 0}

/* M_A1.5 */
html.mobile table {
  table-layout: fixed;
  width: 100%;
}

/* M_A1.6 */
html.mobile ul, html.mobile dl, html.mobile li, html.mobile dd, html.mobile dt {
  padding: 0;
  list-style: none;
}

/* M_A1.7 */
html.mobile img {
  border:none;
  max-width:100%;
  height:auto;
}

/* M_A1.8 */
html.mobile br {line-height: 2em;}

/* M_A1.9 */
html.mobile #pun:after,
html.mobile .punbb .container:after,
html.mobile .punbb .post-links ul:after,
html.mobile .punbb .main div.inline:after,
html.mobile .punbb .post-box:after,
html.mobile .punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
}

/* M_A1.10 */
html.mobile .acchide,
html.mobile #pun-index #pun-main h1,
html.mobile #pun-pagelinks h2,
html.mobile #pun-status h2,
html.mobile .punbb .forum h2,
html.mobile .punbb .multipage .topic h2,
html.mobile .punbb dl.post-sig dt span,
html.mobile .punbb p.crumbs strong,
html.mobile .punbb .divider hr,
html.mobile .punbb .required label em,
html.mobile .punbb .formsubmit label,
html.mobile .punbb .submitfield label,
html.mobile .punbb .modmenu label,
html.mobile #pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden;
  }
  
/* M_A1.11 */
html.mobile #pun-status, html.mobile #BookmCntToggle.default-style, html.mobile #pun-break1, html.mobile #pun-index #pun-crumbs1, html.mobile #pun-crumbs2, html.mobile #pun-break2, html.mobile #pun-break3, html.mobile #pun-break4, html.mobile .category th, html.mobile .category .tc2, html.mobile .category .tc3, html.mobile .forum th, html.mobile .forum .tc2, html.mobile .forum .tc3, html.mobile #post-form legend , html.mobile .punbb:not(#pun-messages) .main table thead, html.mobile .punbb:not(#pun-index) #pun-announcement, .mask-content:after, .mask-content2:after {
  display: none;
  width: 0;
}

/* M_A1.12
 * Удаляем рекламу (в случае возмущения партнера удалить этот код) */
html.mobile #pun-break2 + .section,
html.mobile .section[style="border:0 !important; max-width:100%; text-align:center"],
html.mobile .punbb .section[style="border:0 !important; max-width:100%; text-align:center"] div iframe {
  display: none !important;
}
 
/* M_A2 Общие настройки формы, кнопок, и select
-------------------------------------------------------------*/
 
/* M_A2.1 */
html.mobile .punbb form {
  width: 99%;
  margin: 0 auto 4vw auto; 
}
 
/* M_A2.2 */
html.mobile button, html.mobile input[type="reset"], html.mobile input[type="submit"], html.mobile input[type="button"] {
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0.8vw;
  -moz-border-radius: 0.8vw;
  -ms-border-radius: 0.8vw;
  -o-border-radius: 0.8vw;
  border-radius: 0.8vw;
  background: #dfdfdf;
  background: -moz-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  background: -webkit-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  border: 0.2vw solid #ccc;
  cursor: pointer;
  overflow: visible;
  padding: 0.4vw 2vw;
  width: auto;
  font-size: 3.6vw;
}
 
/* M_A2.3 */
html.mobile .punbb select {
  background: #fff;
  border: 0.4vw solid #eee;
  border-radius: 0.6vw;
  padding: 0.6vw 4vw 0.6vw 0.6vw;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'%3E%3C/path%3E%3C/svg%3E");
  background-position: calc(100% - 1vw) 50%;
  background-repeat: no-repeat;
  background-size: 5vw;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 4vw;
}

/* M_A2.4 */
html.mobile .punbb select option:checked {
  background: olive linear-gradient(olive, olive);
  color: blue;
}

/* M_A2.5 */
html.mobile .punbb select option:hover {
  background: olive linear-gradient(olive, olive);
  color: blue;
}

/* M_A2.6 */
html.mobile select::-ms-expand {
  display: none;
}
 
/* M_A3 Общие настройки шрифта, заголовков и ссылок
-------------------------------------------------------------*/
 
/* M_A3.1 */
html.mobile .punbb {
  font: normal 4vw tahoma, verdana, arial, helvetica, sans-serif;
  width: 100%;
  height: auto;
  margin-top: 16vw;
}

/* M_A3.2 */
html.mobile .punbb h1 {
  line-height: 1.3em;
  font-size: 5vw;
}

/* M_A3.3 */
html.mobile .punbb h2 {font-size: 5vw;}

/* M_A3.4 */
html.mobile .punbb h3 {font-size: 4vw;}

/* M_A3.5 */
html.mobile .punbb h1, html.mobile .punbb h2 {
  text-align: center;
  padding-bottom: 4vw;
  margin-bottom: 4vw;
}

/* M_A3.6 */
html.mobile .punbb h1.title-logo {border-bottom: none;width: 100%;}

/* M_A3.7 */
html.mobile .punbb a, html.mobile .punbb a:link, html.mobile .punbb a:visited {
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.27s ease, background-color 0.27s ease, margin 0s linear, padding 0s linear;
}

/* M_A4 Таблицы
-------------------------------------------------------------*/

/* M_A4.1 */
html.mobile .main table {
  width: 100%;
}

/* M_A4.2 */
html.mobile .punbb:not(#pun-profile) .main table tr {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  margin: 0 0 4vw 0;
  padding: 0;
}

/* M_A4.3 */
html.mobile .main .tcl {
  align-self: flex-start;
  flex: 1;
  margin-left: 2vw;
  padding-left: 2vw;
}

/* M_A4.4 */
html.mobile .main .tcr {
  align-self: flex-start;
  flex: 0 0 0.2vw;
  padding-left: 20vw;
  margin: 2vw 0 4vw 0;
}

/*************************************************************
M_B - Меню
**************************************************************/

/* M_B1 Общие настройки левого и правого меню
-------------------------------------------------------------*/

/* M_B1.1 Настраиваем общий блок для двух меню */
html.mobile .newheader {
  top: 0;
  width: 100%;
  height: 14vw;
  position: fixed;
  z-index:1000;
  color: #fff;
}

/* M_B1.2 */
html.mobile #pun-title {
  top: 0;
  margin-top: 3vw;
  position: absolute;
}

/* M_B1.3 */
html.mobile .title-logo-tdl {width: 100%;text-align: center;}

/* M_B1.4 */
html.mobile .title-logo-tdr {display: none;}

/* M_B1.5 */
html.mobile #pun-navlinks, html.mobile #pun-ulinks {
  width: 80vw;
  min-width: 80vw;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 15px 20px;
  z-index: 2000;
}

/* M_B1.6 */
html.mobile #pun-navlinks {
  /* сдвигаем (прячем) панель относительно левого края страницы */
  left: -80vw;
  /* плавный переход смещения панели */
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  transition: left 0.3s;
}

/* M_B1.7 */
html.mobile #pun-ulinks {
  /* сдвигаем (прячем) панель относительно правого края страницы */
  right: -450vw;
  /* плавный переход смещения панели */
  -webkit-transition: right 0.3s;
  -moz-transition: right 0.3s;
  transition: right 0.3s;
}

 /* M_B2 Кнопка переключения панели, тег <label>
-------------------------------------------------------------*/

/* M_B2.1 */
html.mobile .nav-toggle, html.mobile .nav-toggle2 {
  /* абсолютно позиционируем */
  position: absolute;
  /* отступ от верхнего края панели */
  top: 0;
  /* внутренние отступы */
  padding: 2vw 4vw;
  /* вид курсора */
  cursor: pointer;
  /* размер шрифта */
  font-size: 9vw;
  line-height: 1;
  /* всегда поверх других элементов страницы */
  z-index: 2001;
  /* анимируем цвет текста при наведении */
  -webkit-transition: color .25s ease-in-out;
  -moz-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
}

/* M_B2.2 */
html.mobile .nav-toggle {
  /* относительно левого края панели */
  left: 80vw;
}

/* M_B2.3 */
html.mobile .nav-toggle2 {
  /* относительно правого края панели */
  right: 450vw;
}

/* M_B3 Определяем текст кнопки, символ Unicode (TRIGRAM FOR HEAVEN)
 * цвет текста при наведении, чекбокс, переключатель
-------------------------------------------------------------*/

/* M_B3.1 */
html.mobile .nav-toggle:after {content: '\2261';}

/* M_B3.2 */
html.mobile .nav-toggle2:after {content: '\205E';}

/* M_B3.3 */
html.mobile .nav-toggle:after , html.mobile .nav-toggle2:after {color: #F5F5F5;text-decoration: none;}

/* M_B3.4 цвет текста при наведении */
html.mobile .nav-toggle:hover, html.mobile .nav-toggle2:hover {color: #f4f4f4;}

/* M_B3.5
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */
html.mobile [id='nav-toggle'], html.mobile [id='nav-toggle2'] {
    position: absolute;
    display: none;
}

/* M_B3.6
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks > .nav-toggle, 
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks > .nav-toggle2 {
  left: auto;
  right: 2px;
  top: 1em;
}

/* M_B4 Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
-------------------------------------------------------------*/

/* M_B4.1 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  overflow-y: auto;
}

/* M_B4.2 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  position: fixed;
}

/* M_B4.3 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks {
  left: 0;
  box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
  -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
  -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
}

/* M_B4.4 */
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  right: 0;
  box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
  -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
  -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
}

/* M_B5 Формируем стиль заголовка (логотип) панели 
-------------------------------------------------------------*/

/* M_B5.1 */
html.mobile #pun-navlinks h2, html.mobile #pun-ulinks h2 {
  width: 90%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
  font-size: 4vw;
  line-height: 1.3em;
  opacity: 0;
  transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transition: opacity 0.8s, transform 0.8s;
  -ms-transition: opacity 0.8s, -ms-transform 0.8s;
  -moz-transition: opacity 0.8s, -moz-transform 0.8s;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  border: none;
  color: #fff;
}

/* M_B5.2 */
html.mobile #pun-navlinks h2 a, html.mobile #pun-ulinks h2 a {
  color: #dadada;
  text-decoration: none;
  text-transform: uppercase;
}


/* M_B5.3 плавное появление заголовка (логотипа) при раскрытии панели */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks h2,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks h2 {
  opacity: 1;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/* M_B6 формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
-------------------------------------------------------------*/

/* M_B6.1 */
html.mobile #pun-navlinks > ul, html.mobile #pun-ulinks > ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* M_B6.2 */
html.mobile #pun-navlinks > ul > li, html.mobile #pun-ulinks > ul > li {
  line-height: 2.5;
  opacity: 0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
  -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
  -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
  transition: opacity .5s .1s, transform .5s .1s;
}

/* M_B6.3 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks > ul > li,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks > ul > li {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/* M_B7 определяем интервалы появления пунктов меню
-------------------------------------------------------------*/

/* M_B7.1 */
html.mobile #pun-navlinks > ul > li:nth-child(2),
html.mobile #pun-ulinks > ul > li:nth-child(2) {
  -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
  transition: opacity .5s .2s, transform .5s .2s;
}

/* M_B7.2 */
html.mobile #pun-navlinks > ul > li:nth-child(3),
html.mobile #pun-ulinks > ul > li:nth-child(3) {
  -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
  transition: opacity .5s .3s, transform .5s .3s;
}

/* M_B7.3 */
html.mobile #pun-navlinks > ul > li:nth-child(4),
html.mobile #pun-ulinks > ul > li:nth-child(4) {
  -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
  transition: opacity .5s .4s, transform .5s .4s;
}

/* M_B7.4 */
html.mobile #pun-navlinks > ul > li:nth-child(5),
html.mobile #pun-ulinks > ul > li:nth-child(5) {
  -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
  transition: opacity .5s .5s, transform .5s .5s;
}

/* M_B7.5 */
html.mobile #pun-navlinks > ul > li:nth-child(6),
html.mobile #pun-ulinks > ul > li:nth-child(6) {
  -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
  transition: opacity .5s .6s, transform .5s .6s;
}

/* M_B7.6 */
html.mobile #pun-navlinks > ul > li:nth-child(7),
html.mobile #pun-ulinks > ul > li:nth-child(7) {
  -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
  transition: opacity .5s .7s, transform .5s .7s;
}

/* M_B8 оформление ссылок пунктов меню
-------------------------------------------------------------*/

/* M_B8.1 */
html.mobile #pun-navlinks > ul > li > a ,
html.mobile #pun-ulinks > ul > li > a {
  display: inline-block;
  position: relative;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 6vw;
  color: #dadada;
  width: 100%;
  text-decoration: none;
  /* плавный переход */
  -webkit-transition: color .5s ease, padding .5s ease;
  -moz-transition: color .5s ease, padding .5s ease;
  transition: color .5s ease, padding .5s ease;
}

/* M_B8.2 состояние ссылок меню при наведении */
html.mobile #pun-navlinks > ul > li > a:hover,
html.mobile #pun-navlinks > ul > li > a:focus,
html.mobile #pun-ulinks > ul > li > a:hover,
html.mobile #pun-ulinks > ul > li > a:focus {
  color: white;
  padding-left: 15px;
}

/* M_B8.3 before, линия подчеркивания ссылок меню */
html.mobile #pun-navlinks > ul > li > a:before,
html.mobile #pun-ulinks > ul > li > a:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: width 0s ease;
  transition: width 0s ease;
}

/* M_B8.4 after, линия подчеркивания ссылок меню */
html.mobile #pun-navlinks > ul > li > a:after,
html.mobile #pun-ulinks > ul > li > a:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: width .5s ease;
  transition: width .5s ease;
}

/* M_B8.5 before
 * анимируем линию подчеркивания ссылок при наведении */
html.mobile #pun-navlinks > ul > li > a:hover:before,
html.mobile #pun-ulinks > ul > li > a:hover:before {
  width: 0%;
  background: #3bc1a0;
  -webkit-transition: width .5s ease;
  transition: width .5s ease;
}

/* M_B8.6 after
 * анимируем линию подчеркивания ссылок при наведении */
html.mobile #pun-navlinks > ul > li > a:hover:after,
html.mobile #pun-ulinks > ul > li > a:hover:after {
  width: 0%;
  background: transparent;
  -webkit-transition: width 0s ease;
  transition: width 0s ease;
}

/* M_B9 фон затемнения на основной контент, при этом элементы блокируются
-------------------------------------------------------------*/

/* M_B9.1 */
html.mobile .mask-content, html.mobile .mask-content2 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  padding: 0;
}

/* M_B9.2 */
html.mobile [id='nav-toggle']:checked ~ .mask-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
}

/* M_B9.3 */
html.mobile [id='nav-toggle2']:checked ~ .mask-content2 {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
}

/* M_B10 Добавляем картинку перед ссылкой меню, символ Unicode (TRIGRAM FOR HEAVEN)
 * Левое меню
-------------------------------------------------------------*/

/* M_B10.1 */
html.mobile #pun-navlinks, html.mobile #pun-ulinks {
  box-sizing: border-box;
}

/* M_B10.2 */
html.mobile #navindex span:before,
html.mobile #navuserlist span:before,
html.mobile #navrules span:before,
html.mobile #navsearch span:before,
html.mobile #navprofile span:before,
html.mobile #navpm span:before,
html.mobile #navadmin span:before,
html.mobile #navlogout span:before,
html.mobile #navlogin span:before,
html.mobile #navregister span:before {
  text-decoration: none;
  padding-right: 3vw;
}

/* M_B10.3 */
html.mobile #navindex span:before {content: '\1F3E0';}

/* M_B10.4 */
html.mobile #navuserlist span:before {content: '\1F46B';}

/* M_B10.5 */
html.mobile #navrules span:before {content: '\1F4D2';}

/* M_B10.6 */
html.mobile #navsearch span:before {content: '\1F50D';}

/* M_B10.7 */
html.mobile #navprofile span:before {content: '\1F464';}

/* M_B10.8 */
html.mobile #navpm span:before {content: '\1F582';}

/* M_B10.9 */
html.mobile #navadmin span:before {content: '\1F4BB';}

/* M_B10.10 */
html.mobile #navlogout span:before, html.mobile #navlogin span:before {content: '\1F510';}

/* M_B10.11 */
html.mobile #navregister span:before {content: '\2386';}

/* M_B11 Правки для ЛС
-------------------------------------------------------------*/

/* M_B11.1 */
html.mobile #pun-navlinks li#navpm span.num_msg {margin: -2vw 0 0 -24vw !important;z-index: 1;}

/* M_B11.2 */
html.mobile #navpm span.num_msg:before {z-index: -1;}

/*************************************************************
M_C - Общие настройки главной страницы, аватарки для форума 
***   и unicode для страницы форума
**************************************************************/

/* M_С1 Общие настройки главной страницы
-------------------------------------------------------------*/

/* M_C1.1 */
html.mobile #pun-stats ul, html.mobile #pun-about .container  {padding: 0 4vw 4vw 4vw;}

/* M_C1.2 */
html.mobile #pun-stats ul li:not(:nth-child(1)) {padding: 3vw 0;}

/* M_C1.3 */
html.mobile #pun-stats ul li:nth-child(1) {padding-bottom: 3vw;}

/* M_C1.4 */
html.mobile #pun-about .container span  {float: right;}

/* M_C1.5 */
html.mobile .forum .tclcon span {font-size:0;}

/* M_С2 Аватарка для форума
-------------------------------------------------------------*/

/* M_C2.1 */
html.mobile #pun .punbb .user-avatar img.ava {
  border-width: 0.6vw !important;
  height: 8vw;
  width: 8vw;
  margin: 0.2vw 2.6vw 0.4vw 0px;
}

/* M_C2.2 */
html.mobile #pun .punbb .user-avatar {height: 8vw;}

/* M_C2.3 */
html.mobile #pun .punbb .user-avatar img.on_ {
  width: 1.8vw;
  height: 1.8vw;
  margin: 1vw 3vw 0 -8vw;
}

/* M_С3 Unicode для страницы форума
-------------------------------------------------------------*/

/* M_C3.1 */
html.mobile .stickytext:before,
html.mobile .closedatafield:before {
  text-decoration: none;
  padding-right: 1vw;
}

/* M_C3.2 */
html.mobile .stickytext:before {content: '\A71D';font-size: 8vw;}

/* M_C3.3 */
html.mobile .closedatafield:before {content: '\1F512';font-size: 3vw;}

/*************************************************************
M_D Хлебные крошки
**************************************************************/

/* M_D.1 */
html.mobile .crumbs, html.mobile .linkst, html.mobile .linksb {
  border-top: 1vw double #DADADA;
  border-bottom: 1vw double #DADADA;
  margin-bottom: 2vw;
  font-size: 0;
  text-align: center;
}

/* M_D.2 */
html.mobile .crumbs a {font-size: 4vw;margin-right: 1vw;}

/* M_D.3 */
html.mobile .crumbs a:before {
    content: "";
    display: inline-block;
    width: 2.8vw;
    height: 2.8vw;
    border-radius: 50%;
    background: rgba(190, 190, 190, 0.7);
    margin-right: 1vw;
}

/*************************************************************
M_E - Страница темы, Посты
**************************************************************/

/* M_E1 Общие настройки Поста, минипрофиля и кнопок в посту
-------------------------------------------------------------*/

/* M_E1.1 */
html.mobile .punbb .fs-box p, html.mobile .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
}

/* M_E1.2 */
html.mobile .punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
}

/* M_E1.3 */
html.mobile .post-content p {
  clear: both;
}

/* M_E1.4 */
html.mobile .post>.container, html.mobile .post-author ul, html.mobile .post-links ul, html.mobile #profilenav ul {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 0 0 4vw 0;
  padding: 0; 
}

/* M_E1.5 */
html.mobile .post-author ul, html.mobile .post-links ul {position: relative;margin: 0;}

/* M_E1.6 */
html.mobile .post h3 span {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border-top: 0.4vw solid #e5e5e5;
  margin-bottom: 0.3vw;  
}

/* M_E1.7 */
html.mobile .post-author, html.mobile .post-links, html.mobile .post h3 {background-color: #f5f5f5;}

/* M_E1.8 */
html.mobile .post-author, html.mobile .post-body, html.mobile .post-links {
  width: 100%; 
  padding: 0;
}

/* M_E1.9 */
html.mobile .post-author {order: 2;}

/* M_E1.10 */
html.mobile .post-links {
  order: 1;
  margin-bottom: 1vw; 
  padding: 1vw 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.20);
}

/* M_E1.11 */
html.mobile .post-body {order: 3;}

/* M_E2 Настройки минипрофиля
-------------------------------------------------------------*/

/* M_E2.1 */
html.mobile .post-author ul li {
  display: none;
  padding: 1.6vw;
}

/* M_E2.2 */
html.mobile .post-author ul li.pa-author,
html.mobile .post-author ul li.pa-avatar,
html.mobile .post-author ul li.pa-title,
html.mobile .post-author ul li.pa-posts,
html.mobile .post-author ul li.pa-respect,
html.mobile #pun-searchposts .post-author ul li.pa-replies {
  display: block;
}

/* M_E2.3 */
html.mobile .pa-avatar, html.mobile .pa-author, html.mobile .pa-title, html.mobile .topic a.sharelink, html.mobile .punbb a.permalink, html.mobile .post h3 strong {
  align-self: center;
}

/* M_E2.4 */
html.mobile .pa-avatar {
  order: -1;
  position: absolute;
  top: -1vw;
}

/* M_E2.5 */
html.mobile .pa-title, html.mobile .pa-respect {margin: 0 0 0 auto;}

/* M_E2.6 */
html.mobile .pa-author {margin-left: 14vw;}

/* M_E2.7 */
html.mobile .pa-author, html.mobile .pa-title {margin-top: 1.3vw;}

/* M_E2.7.1 Правка для поиска постов */
html.mobile #pun-searchposts .pa-author {margin: 0 auto 0 0;}

/* M_E2.8 */
html.mobile .pa-posts, html.mobile .pa-respect {
  font-size: 3vw;
  width: 40%;
  margin-top: 1vw;
}

/* M_E2.9 */
html.mobile .pa-respect {text-align: right;}

/* M_E2.10 */
html.mobile .pa-avatar img {
    max-height: 10vw;
    width: auto;
    border-radius: 1vw;
}

/* M_E2.11 */
html.mobile .pa-author img {display: none;}

/* M_E2.12 */
html.mobile .punbb li.pa-author a {
  color: #557fae;
  font-weight: 600;
}

/* M_E2.13 */
html.mobile .pa-author:before {
  content: "";
  display: inline-block;
  width: 2.8vw;
  height: 2.8vw;
  border-radius: 50%;
  background: rgba(190, 190, 190, 0.7);
  margin-right: 0.6vw;
}

/* M_E2.14 */
html.mobile .online .pa-author:before {
  background: rgba(56, 155, 34, 0.7);
}

/* M_E3 Кнопки и unicode для кнопок
-------------------------------------------------------------*/

/* M_E3.1 */
html.mobile .post-links a:before, html.mobile .topic a.sharelink:before  {
  font-size: 6vw;    
  padding: 0 3vw;
  color: #557fae;
}

/* M_E3.2 */
html.mobile .pl-email:nth-child(1) a:before {content: '\1F464';}

/* M_E3.3 */
html.mobile .pl-email:nth-child(2) a:before {content: '\1F582'; color: #000000;}

/* M_E3.4 */
html.mobile .pl-email:nth-child(3) a:before, html.mobile #pun-messages .pl-email:nth-child(1) a:before {content: '\0040';}

/* M_E3.5 */
html.mobile .pl-website a:before {content: '\1F310';}

/* M_E3.6 */
html.mobile .pl-delete a:before {content: '\2718';color :red;}

/* M_E3.7 */
html.mobile .pl-edit a:before {content: '\270E';color: #000000;}

/* M_E3.8 */
html.mobile .pl-quote a:before {content: '\1F677';}

/* M_E3.9 */
html.mobile .topic a.sharelink:before {content: '\003C';}

/* M_E3.10 */
html.mobile .pl-email:nth-child(3), html.mobile .pl-website {margin: 0 auto 0 0;}

/* M_E4 Настройки заголовка поста и тела поста
-------------------------------------------------------------*/

/* M_E4.1 */
html.mobile .topic a.sharelink {
  order: 3;
  font-size: 0;
  margin: 0 0 0 auto;
}

/* M_E4.2 */
html.mobile .punbb .post a.permalink {
  margin: 0 0 0 auto;
  color: #8B8989;
}

/* M_E4.3 */
html.mobile .post h3 strong {padding-left: 4.6vw;}

/* M_E4.4 Правка для поиска постов*/
html.mobile #pun-searchposts .post h3 strong {
 padding: 0;
 text-align: center;
 width: 100%;
 }
 
 /* M_E4.5 */
html.mobile .post h3 strong:before {
 content: 'Пост \2116';
 display: inline-block;
 }

/* M_E4.6 */
html.mobile .post-box {
  padding: 2vw 4vw;
  word-wrap: break-word;
}

/* M_E5 Настройки цитаты, кода и спойлера
-------------------------------------------------------------*/

/* M_E5.1 */
html.mobile .quote-box, html.mobile .code-box {
  margin: 3vw 1vw;
  padding: 2vw;
  color: #333;
  border-style: solid;
  border-width: 0 0 0 1.6vw;
  border-radius: 1.6vw;
  background-color: #F8F9Fb;
}

/* M_E5.2 */
html.mobile .quote-box cite, html.mobile .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
}

/* M_E5.3 */
html.mobile .punbb .code-box {
  background-color: #f7f7f7;
  color: #333;
  border-radius: 1.6vw;
  border: 0.4vw solid #ccc;
}

/* M_E5.4 */
html.mobile .punbb pre {font: 1.1em/140% Courier New, monospace;}

/* M_E5.5 */
html.mobile .scrollbox {
  width: 100%;
  overflow: auto;
}

/* M_E5.6 */
html.mobile .quote-box .quote-box {
  background: #ECF0F5;
}

/* M_E6 Настройки подписи, кода и спойлера
-------------------------------------------------------------*/

/* M_E6.1 */
html.mobile .post-sig {
  width: 90%;
  margin: 0 auto;
}

/* M_E6.2 */
html.mobile .post-sig dt {
  display: block;
  border-top: 1vw double #DADADA;
  width: 50%;
  margin: 2vw auto;
}

/* M_E6.3 */
html.mobile .post div.post-rating p.container, html.mobile .post-vote .container {
  border: solid 0.4vw #e9e9e9 !important;
  background-color: #f4f4f4;
  border-radius: 1vw;
}

/* M_E6.4 */
html.mobile .post-rating a {
  display: inline-block; 
  margin: 0 auto;
}

/* M_E7 Modmenu, нумерация страниц
-------------------------------------------------------------*/

/* M_E7.1 */
html.mobile #pun-viewforum .modmenu strong a, html.mobile .post-links a {font-size: 0;}

/* M_E7.1.1 Правка для поиска постов */
html.mobile #pun-searchposts .post-links a {
  font-size: 4vw;
  color: #FF0000;
  font-weight: 600;
  opacity: 0.8;
}

/* M_E7.1.2 Правка для поиска постов */
html.mobile #pun-searchposts .post-links ul li {width: 100%;text-align: center;}

/* M_E7.2 */
html.mobile #topic-modmenu strong, html.mobile #topic-modmenu span {
  padding: 0.5em 0;
  vertical-align: top;
  display: inline-block;
}

/* M_E7.3 */
html.mobile .modmenu:not(#topic-users-in) span {float: right;}

/* M_E7.4 */
html.mobile #topic-users-in span {display: block;}

/* M_E7.5 */
html.mobile #topic-modmenu {border-top: solid 0.4vw #eee;}

/* M_E7.6 */
html.mobile .modmenu {border-bottom: solid 0.4vw #eee;padding: 0.5em 1em;}

/* M_E7.7 */
html.mobile #pun-viewforum .modmenu strong {float: left;margin-top: -3.1vw;}

/* M_E7.8 */
html.mobile #pun-viewforum .modmenu strong a:before {
  content: '\1F6E0';
  font-size: 8vw;
  padding: 1vw;
  color: #20B2AA;
  border: 1vw solid #eee;
  border-radius: 2vw;
}

/* M_E7.9 */
html.mobile .linkst, html.mobile .linksb {
  text-align: right;
  padding: 0.4em 1em 1.5em 1em;
  font-size: 1.1em;
}

/* M_E7.13 */
html.mobile .linkst:after, html.mobile .linksb:after {
  content: " ";
  display: table;
  clear: both;
}

/* M_E7.11 */
html.mobile #pun-viewforum .linkst {padding-bottom: 4em;}
  
/* M_E7.12 */
html.mobile .postlink {
  float: right;
  width: 25.8vw;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
  color: #FF0000;
}

html.mobile .postlink a {display: block;font-size: 4vw;}

/* M_E7.14 */
html.mobile .pagelink {
  float: left;
  width: 70%;
  text-align: left;
}

/* M_E7.15 */
html.mobile .subscribelink {
  clear: both;
  padding-top: 6vw;
  padding-bottom: 0.5em;
  font-size: 3.8vw;
}

/* M_E8 Форма, вв-коды, кнопки
-------------------------------------------------------------*/

/* M_E8.1 */
html.mobile .formal:not(#similar-topics) h2 {display: none;}

/* M_E8.2 */
html.mobile .areafield {width: 100%;}

/* M_E8.3 */
html.mobile .punbb #main-reply {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

/* M_E8.4 */
html.mobile .punbb .main #form-buttons table tr {
  flex-flow: row wrap;
  justify-content: center;
  border-bottom: none;
}

/* M_E8.5 */
html.mobile #form-buttons td {
  margin: 0 0.2vw;
  padding: 0 2vw;
  line-height: 0;
  width: 5vw;
  border-bottom: solid 0.4vw #eee;
}

/* M_E8.6 */
html.mobile .formsubmit {margin: 1em 0;}

/* M_E8.7 */
html.mobile .formsubmit input[name="submit"] {float: left;margin-left: 2vw;}

/* M_E8.8 */
html.mobile .formsubmit input[name="preview"] {float: right;margin-right: 2vw;}

/* M_E9 ВВ-коды
-------------------------------------------------------------*/

/* M_E9.1 */
html.mobile .fs-box {position: relative;}

/* M_E9.2 */
html.mobile div[id$="-area"] {
    border-radius: 1vw;
    background: #fcfcfc;
    border: 0.4vw solid #ccc;
}

/* M_E9.3 */
html.mobile div[id$="-area"] div {padding: 1vw 0; text-align: center; border-bottom: solid 0.4vw #eee;}

/* M_E9.4 */
html.mobile #font-area {
  margin: 0 25vw 0 0;
  left: 3.5vw;
  top: 7.6vw;
}

/* M_E9.5 */
html.mobile #size-area {
  margin: 0 50vw 0 0;
  left: 13vw;
  top: 7.6vw;
}

/* M_E9.6 */
html.mobile #size-area div {margin-top: 4vw;}

/* M_E9.7 */
html.mobile #image-area, html.mobile #video-area, html.mobile #smilies-area, html.mobile #keyboard-area {left: 0vw;}

/* M_E9.8 */
html.mobile #image-area, html.mobile #video-area, html.mobile #color-area, html.mobile #smilies-area, html.mobile #keyboard-area {width: 91vw;}

/* M_E9.9 */
html.mobile .punbb div#color-area {left: 3.6vw;border: none;}

/* M_E9.10 */
html.mobile .punbb .main div#color-area table tr {margin: 0;}

/* M_E9.11 */
html.mobile #image-area, html.mobile #video-area, html.mobile #color-area {top: 15.4vw;}

/* M_E9.12 */
html.mobile .punbb .main #image-area-tcon-computer table tr, html.mobile .punbb .main #color-area table tr, html.mobile .punbb .main #table-area table tr {flex-flow: row wrap;}

/* M_E9.13 */
html.mobile textarea#video-area-tinp, html.mobile textarea#image-area-tinp, html.mobile div[id$="-area"] div#load-image-container {padding: 0;}

/* M_E9.14 */
html.mobile .punbb #imageupload-right {max-width: 52%;}

/* M_E9.15 */
html.mobile .punbb .main #table-area table tr {margin: 0;}

/* M_E9.16 */
html.mobile #table-area {right: 4vw;top: 15.4vw;}

/* M_E9.17 */
html.mobile #smilies-area, html.mobile #keyboard-area, html.mobile #addition-area {top: 22.8vw;}

/* M_E9.18 */
html.mobile #addition-area {right: 0vw;}

/* M_E9.19 */
html.mobile #pun-messages #post-form div[id$="-area"].container {padding-left: 0;}

/* M_E9.20 */
html.mobile .punbb #color-area td img, html.mobile .punbb #table-area td img {
  width: 10vw;
  height: 10vw;
  outline: solid 0.8vw #191970;
  margin: 0.5vw;
}

/* M_E10 Похожие темы
-------------------------------------------------------------*/

/* M_E10.1 */
html.mobile #similar-topics div.container {padding: 1em !important;}

/* M_E10.2 */
html.mobile #similar-topics table tr {display: table-row;}

/* M_E10.3 */
html.mobile #similar-topics td.st-tc2 {display: none;width: 0;}

/* M_E10.4 */
html.mobile .punbb #similar-topics td.st-tcr {
  padding-right: 0;
  width: auto;
}

/*************************************************************
M_F - Профиль
**************************************************************/

/* M_F1.1 */
html.mobile #profilenav ul li {width: 50%;text-align: center;}

/* M_F1.2 */
html.mobile #profilenav ul li:nth-child(2n) {margin: 0 auto 0 0;}

/* M_F1.3 */
html.mobile #profilenav ul li a {
  padding: 1vw 2vw;
  margin-bottom: 1vw;
  display: inline-block;
  width: 80%;
  font-weight: 600;
  border-radius: 0.8vw;
  background: #dfdfdf;
  background: -moz-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  background: -webkit-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  border: 0.2vw solid #ccc;
  overflow: visible;
}

/*************************************************************
M_G -  Статистика форума, Участники, Поиск, ЛС
**************************************************************/

/* M_G1 Общее для стaтистики форума, Участники, Поиск, ЛС
-------------------------------------------------------------*/

/* M_G1.1 */
html.mobile #pun-statistic.punbb .main table tr, html.mobile #pun-userlist.punbb .main table tr, html.mobile #pun-messages.punbb .main table tr {flex-flow: row wrap;}

/* M_G1.2 */
html.mobile #pun-statistic tr .tcl {border: none;font-weight: 600;}

/* M_G1.3 */
html.mobile #pun-statistic tr .tcl, html.mobile #pun-statistic tr .tc2, html.mobile #pun-userlist tr .tcl, html.mobile #pun-userlist tr .tc2 {
  width: 50% !important;
  flex-basis: auto;
  padding: 0;
  margin-left: 0;
  margin-bottom: 4vw;
  text-align: center !important;
}

/* M_G1.4 */
html.mobile #pun-statistic tr .tc3 {
  width: 32.7% !important; 
  text-align: center;
  border-top: 0.8vw dotted #F5F5F5;
  padding: 3vw 0;
}

/* M_G1.5 */
html.mobile #pun-statistic tr td:before, html.mobile #pun-userlist tr td:before {
  display: block;
  text-align:center;
  font-size: 3vw;
  color: rgba(139, 137, 137, 0.9);
  padding-bottom: 1vw;
}

/* M_G1.6 */
html.mobile #pun-statistic tr td:nth-child(3):before, html.mobile #pun-userlist tr td:nth-child(5):before {content: 'Зарегистрирован:';}

/* M_G1.7 */
html.mobile #pun-statistic tr td:nth-child(4):before, html.mobile #pun-userlist tr td:nth-child(4):before {content: 'Сообщений:';}

/* M_G2 Администрация, Приглашающие, Участники
-------------------------------------------------------------*/

/* M_G2.1 */
html.mobile #administration tr td:nth-child(5):before, html.mobile #most_invitations tr td:nth-child(5):before, html.mobile #pun-userlist tr td:nth-child(6):before {content: 'Был:';}

/* M_G2.2 */
html.mobile #pun-statistic #most_invitations tr td:nth-child(4):before {content: 'Приглашений:';}

/* M_G3 Самые активные, Самые неотлучные
-------------------------------------------------------------*/

/* M_G3.1 */
html.mobile #most_active tr td:nth-child(5):before {content: '% Сообщений форума:';}

/* M_G3.2 */
html.mobile #most_connected tr td:nth-child(5):before {content: 'Провел на форуме:';}

/* M_G4 Самые читаемые темы, Самые комментируемые темы
-------------------------------------------------------------*/

/* M_G4.1 */
html.mobile #pun-statistic #most_viewed_topics tr .tc3, html.mobile #pun-statistic #most_replied_topics tr .tc3 {width: 50% !important;}

/* M_G4.2 */
html.mobile #pun-statistic #most_viewed_topics tr td:nth-child(3):before, html.mobile #pun-statistic #most_replied_topics tr td:nth-child(3):before {content: 'Ответов:';}

/* M_G4.3 */
html.mobile #pun-statistic #most_viewed_topics tr td:nth-child(4):before, html.mobile #pun-statistic #most_replied_topics tr td:nth-child(4):before {content: 'Просмотров:';}

/* M_G5 Участники
-------------------------------------------------------------*/

/* M_G5.1 */
html.mobile #pun-userlist tr, html.mobile #pun-messages tr {justify-content: space-between;align-items: center;}

/* M_G5.2 */
html.mobile #pun-userlist tr .tcl {border: none;font-weight: 600;}

/* M_G5.3 */
html.mobile #pun-userlist tr span>a, html.mobile #pun-messages tr a {display: inline-block;margin-top: 1.6vw;}

/* M_G5.4 */
html.mobile #pun-userlist tr .tc3 {border-top: 0.8vw dotted #F5F5F5;text-align: center;}

/* M_G5.5 */
html.mobile #pun-userlist tr td:nth-child(3):before {content: 'Уважение:';}

/* M_G6 ЛС и Поиск
-------------------------------------------------------------*/

/* M_G6.1 */
html.mobile #pun-messages.punbb .main table .tcl, html.mobile #pun-messages.punbb .main table .tc3 {width: 62% !important;}

/* M_G6.2 */
html.mobile #pun-messages.punbb .main table .tc2 {width: 35% !important;}

/* M_G6.3 */
html.mobile #pun-messages .tc2 {text-align: right;}

/* M_G6.4 */
html.mobile #pun-messages .user-avatar {margin-top: -5vw;padding: 3vw 0;}

/* M_G6.5 */
html.mobile #pun-messages .pmtc33 {text-align: center;}

/* M_G6.6 */
html.mobile #pun-messages th {display: none;}

/* M_G6.7 */
html.mobile #pun-messages.punbb .main table th.pmtc24 {width: 100% !important;display: block;}

/* M_G6.8 */
html.mobile #pun-messages .pl-quote a:before {content: 'Ответить';}

/* M_G6.9 */
html.mobile #pun-searchposts .post h3 span {text-align: center;}