/******************************************************************
  Cтиль к скрипту: 
 "Всплываюшая таблица с вкладками, в топике, с инфой о персонаже"
******************************************************************/

@import url('https://forumstatic.ru/files/0017/ac/82/40909.css');

:root {
--midgreen: #105b34;
--darkgreen: #064826;
--sandy: #eacfa0;
--darksand: #8e764a;
--lightsand: #f7edd6;
}

/*Стиль иконки в мини-профиле*/
img.a-info {
  padding:2px;
  display:block!important;
  cursor:pointer;
  position:absolute;
  text-align:left!important;
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;
  display: none!important;
}


/* Затемняющий фон */
#pre-wrap {
 margin:0;
 top:0;bottom:0;
 left:0;right:0;
 width:100%;
 height:100%;
 position:fixed;
 z-index:20000;
 background: rgba(0,0,0,.65);
}

/*Подвижка иконки закрытия таблички*/
.my-tabs > img.close {
  position: absolute;
  width: 27px;
  right: 0;
  cursor: pointer;
  z-index: 102;
  display: block;
  margin: 6px 8px;
}

/* Корневой таб(UL) */
.my-tabs {
 display: block;
 z-index: 30000;
 position: absolute;
 max-height: 700px;  /*максимальная высота таблички*/
 width: auto !important;
}

/* Стиль "Ушка" вкладок */
.my-tabs > span {display: none;}

/* Стиль вкладки(LI)*/
.my-tabs > .tab-a {
  position: relative;
  display:none;
  overflow-y: hidden;
  overflow-x: hidden;  
  z-index: 101;
  width: 800px;
  height: auto;
  padding: 15px !important;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,.5), inset 0 0 10px 2px rgba(255,255,255,.2);
  background: var(--midgreen);
}

/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -1px!important;
  margin-left: -6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}

/*сдвиг таблицы*/
.my-tabs{
  margin-top: 0;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left: 100px;  /*сдвиг таблицы вправо от положения иконки*/
}

.my-tabs .post-content .html-post-box {padding: 0 !important;}


/* тут меню со вкладками
-------------------------------------------------------------*/


.character {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 360px;
  background: var(--lightsand);
  border-radius: 15px;
  box-shadow: 0 0 10px 2px #000, inset 0 0 25px var(--darksand), inset 0 0 100px 20px var(--sandy);
  box-sizing: border-box;
  padding: 15px 20px;
  margin: 15px;
}

.charabout {width: 150px;}

.punbb .charpic {
  display: block;
  margin: 10px auto 20px;
  border: 2px solid var(--midgreen);
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

.tabs {
  position: relative;
  width: 550px;
  display: flex;
  justify-content: space-evenly;
}

.tabs p {padding:0 !important;}

.tab, .tab-title {display: inline-block;}

.tab input[type="radio"] { display: none; }

.tab-title {
  padding: 5px 16px;
  border: 2px solid #FF8C00;
  background: linear-gradient(#FFA500, #FF8C00);
  border-radius: 20px;
  font: 500 12px/12px 'Oswald', sans-serif;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--darkgreen);
  transition: all .3s linear 0s;
  cursor: pointer;
  box-shadow: 0 2px var(--darkgreen);
  margin: 0 5px;
  display: flex;
  text-align: center;
}

.tab-content {
  position: absolute;
  padding: 10px;
  left: 0;
  display: none;
  background: url(https://forumstatic.ru/files/0017/ac/82/48432.png) no-repeat top center/cover;
  height: 295px;
  margin-top: 10px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 15px;
  text-align: left;
}

.tab-title:hover, .tab :checked + .tab-title {
  position: relative;
  transition: all .3s linear 0s;
  background: linear-gradient(#FF8C00, #FFA500);
  transform: translateY(2px);
  box-shadow: none;
  z-index: 1;
}

.tab :checked ~ .tab-content {display: block;}

.tab-content img {margin: 3px !important;}