/* CSS Document */
.uk-badge{display:inline-block;padding:0 5px;background:#00a8e6;font-size:10px;font-weight:700;line-height:14px;color:#fff;text-align:center;vertical-align:middle;text-transform:none;border:1px solid rgba(0,0,0,.06);border-radius:2px;text-shadow:0 1px 0 rgba(0,0,0,.1)}a.uk-badge:hover{color:#fff}.uk-badge-notification{-moz-box-sizing:border-box;box-sizing:border-box;min-width:18px;border-radius:500px;font-size:12px;line-height:18px}.uk-badge-success{background-color:#8cc14c}
.uk-badge-warning{background-color:#faa732}
.uk-badge-danger{background-color:#da314b}
.uk-alert{margin-bottom:15px;padding:10px;background:#ebf7fd;color:#2d7091;border:1px solid rgba(45,112,145,.3);border-radius:4px;text-shadow:0 1px 0 #fff}

table.tablesorter thead tr .header,
table.tablesorter thead tr .tablesorter-header {
background-image:url(tablesorter/bg.gif);
background-repeat:no-repeat;
background-position:center right;
cursor:pointer;
}

table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .tablesorter-headerAsc {
background-image:url(tablesorter/asc.gif);
}

table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .tablesorter-headerDesc {
background-image:url(tablesorter/desc.gif);
}

.tabs__caption {
padding:0;
line-height:20px;
list-style:none;
margin:auto 12px 0;
text-align:center;
flex-wrap: wrap;
display: flex;
justify-content: center;
}

.tabs__caption li {
float:none;
display:inline;
padding:4px 6px;
cursor:pointer;
border-radius:7px 7px 0 0;
position:relative;
}

.tabs__caption li:hover,.tabs__caption .active {
padding:4px 6px;
border-radius:7px 7px 0 0;
}

.tabs__content {
display:none;
border-width:0 1px 1px;
padding:0 12px;
}

.tabs__content.active {
display:block;
}

.cmn-toggle-switch {
display:block;
position:relative;
overflow:hidden;
margin:0;
padding:0;
width:85px;
height:75px;
font-size:0;
text-indent:-9999px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
box-shadow:none;
border-radius:none;
border:none;
cursor:pointer;
-webkit-transition:background .3s;
transition:background .3s;
}

.cmn-toggle-switch:focus {
outline:none;
}

.cmn-toggle-switch span {
display:block;
position:absolute;
top:36px;
left:16px;
right:16px;
height:6px;
background:white;
}

.cmn-toggle-switch span::before,.cmn-toggle-switch span::after {
position:absolute;
display:block;
left:0;
width:100%;
height:6px;
background-color:#fff;
content:"";
}

.cmn-toggle-switch span::before {
top:-20px;
}

.cmn-toggle-switch span::after {
bottom:-20px;
}

.cmn-toggle-switch__rot span {
-webkit-transition:0 .3s;
transition:transform .3s;
}

.cmn-toggle-switch__rot.active span {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}

#menu {
position:fixed;
top:50px;
left:15px;
z-index:10;
}
#block-menu_new {
margin-left:20px;
}
#block-menu_new li {
width:297px;
height:53px;
list-style-type:none;
background:url(/img/war_button.png) no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
#block-menu {
top:80px;
left:15px;
width:320px;
height:300px;
padding-top:1px;
background:url(img/menu_border3.png) no-repeat;
margin-left:20px;
}

#block-menu1 {
padding-bottom:7px;
background:url(img/menu_border5.png) no-repeat;
background-position:bottom;
}

#block-menu ul {
background:url(img/menu_border4.png);
padding:0 20px;
}

#block-menu li {
width:280px;
height:53px;
list-style-type:none;
background:url(img/button.png) no-repeat;
}

#block-menu a, #block-menu_new a  {
color:#FFFFFF;
text-decoration:none;
text-align:center;
}

#block-menu a:hover, #cssmenu a:hover {
color:yellow;
}
.ssl {
    padding-top: 18px;
}
.menu div {
margin:0;
list-style:none;
padding-left:0;
display:none;
}

.menu .title {
font-size:18px;
cursor:pointer;
}

.menu .title::before {
content:url(img/menu1.png);
font-size:80%;
color:green;
}

.menu.open .title::before {
content:url(img/menu2.png);
}

.menu.open div {
display:block;
}

#message a {
display:none;
z-index: 999;
position: fixed;
top: 100%;
margin-top: -50px;
left: 50%;
margin-left: -120px;
border-radius: 30px;
width: 200px;
padding: 10px 20px;
background-color: rgba(0, 0, 0, 0.4);
font-size: 26px;
text-align: center;
color: #fff;
text-decoration: none;
}

#resultstats {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height:10px;
}

.textNotification {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:200px;
min-height:10px;
}

.b-close {
background:#2B91AF;
border-radius:7px;
box-shadow:none;
color:#FFFFFF;
column-gap:21px;
cursor:pointer;
display:block;
font:normal normal 700 20.96px/normal Arial;
height:24px;
margin:0;
padding:0 6px 2px;
position:absolute;
resize:none;
right:-7px;
text-align:center;
text-decoration:none;
top:-7px;
vertical-align:baseline;
width:12px;
}

.lingtheme {
text-decoration:none;
font-size:18px;
}

.themeanime,.themeanime2 {
color:#9432FF;
}

.themeanime3 {
color:#8e8e8e;
}

.themeanime4 {
color:#b1a7ff;
}

.themexp {
color:#5cbd5c;
}

.themewarcraft {
color:#2258D6;
}
.themewarcraft2 {
color: #699492;
}
.gzhel {
color: #024db2;
}
.themenature {
color:#2635ff;
}
.themenature2, .themenature3 {
color:#8e8e8e;
}
.themesakura {
color:#cb26ff;
}

div.captable {
cursor:pointer;
font-size: 20;
margin: 2px 0px;
padding: 1px 0px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0, 0.5)
}

.Areyouknowblock {
width:275px;
text-align:center;
margin:1px;
border-radius:2px;
padding:3px 2px;
}

.Areyouknowblock > span {
font-size:15pt;
}

#Areyouknow {
border:3px double black;
width:400px;
display:none;
text-align:center;
}

.blok-theme {
font-size:14pt;
font-weight:600;
cursor:pointer;
}

.blok-auth {
font-size:14pt;
font-weight:600;
top:0;
position:fixed;
z-index:9000;
right:15px;
}

.divbutton {
font-size:16pt;
width:100%;
margin:3px 0;
padding:3px;
text-align:center;
}

.blok-auth > a {
cursor:pointer;
}

#slideout {
position:fixed;
top:45%;
right:0;
}

#ico_panel {
position:fixed;
top:0;
right:0;
display:flex;
height:100%;
}

.tool-item {
display:inline-block;
cursor:pointer;
}

.tooltip-block {
position:absolute;
background:white;
border:1px solid rgb(230,230,230);
padding:5px 8px;
font-size:14px;
line-height:13px;
color:rgb(82,82,82);
z-index:400;
display:none;
}

.chat {
display:none;
position:fixed;
top:30px;
right:42px;
z-index:10001;
}

.notice_indicator {
position:absolute;
left:-1px;
top:-5px;
background-color:rgba(220,220,220,0.89);
text-align:center;
border-radius:10px;
padding:1px 3px;
}

#news {
width:90%!important;
height:90%!important;
display:none;
}

#view_money {
max-width:95%!important;
height:100%!important;
display:none;
}
@media screen{
 .blok-center {
  border-radius: 10px;
  margin: 32px auto;
 /* display: inline-table;*/
  padding: 20px;
	display: flex;
  flex-flow: column;
	width: fit-content;
	width: -moz-fit-content;
 }
}

@media screen and (max-width: 700px){
	.blok-center {
	display: inline-table;
	padding: 0px; 
  margin: 42px 0px 0px 0px;
	min-width: fit-content;
/* padding-top: 45px;*/
	}
	html {
	height: fit-content;
	width: fit-content;
	}


	body {
	/*display: flex;
	flex-direction: column;*/
	font-size: 13pt;
	margin: 0px;
	width: fit-content !important;
	}
}

div.blok-center-ads {
  margin:auto;
  text-align: center;
  max-width: 100%;
	background: rgba(255, 255, 255, 0.7);
}
.tablegames, .tableother {
	font-size: inherit;
	
}

/**
 * Переключаемая боковая панель навигации
 * выдвигающаяся по клику слева
 */
 
.nav {
    /*  ширна произвольная, не стесняйтесь экспериментировать */
  /*  width: 320px;
    min-width: 320px;*/
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно левого края страницы */
    left: -297px;
    /* внутренние отступы */
   /* padding: 15px 20px;*/
    /* плавный переход смещения панели */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* поверх других элементов */
    z-index: 2000;
		box-sizing: border-box;
		display: flex;
}
 
/**
 * Кнопка переключения панели
 * тег <label>
 */
 
.nav-toggle {
    /* абсолютно позиционируем */
   /* position: absolute;*/
    /* относительно левого края панели */
 /*   left: 320px;*/
    /* отступ от верхнего края панели */
  /*  top: 30px;*/
    /* внутренние отступы */
  /*  padding: 15px;*/
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    /* цвет текста */
    color: #dadada;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 30pt;
    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;
		display: flex;
		margin: auto;
}
 
/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/
 
.nav-toggle div {
   /* content: 'Меню';
    text-decoration: none;
		writing-mode: tb-rl;
    transform: rotate(-180deg);
		background: url(/img/bnet-tab-up.png) no-repeat;*/
		writing-mode: tb-rl;
    background: url(/img/button2.png) no-repeat;
		background-size: 32px 128px;
    height: 128px; 
		width: 32px;
		text-align: center;
}
 
/* цвет текста при наведении */
 
.nav-toggle:hover {
    color: #f4f4f4;
}
 
/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */
 
[id='nav-toggle'] {
    position: absolute;
    display: none;
}
 
/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/
 
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
  left: -50px;
  top: 30px;
	opacity: 0;
	/*	background: #16a085;*/
	transition: opacity 0.20s ease-in-out;
}
 
/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */
 
[id='nav-toggle']:checked ~ .nav {
    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);
    overflow-y: auto;
		-webkit-box-shadow: 4px 0px 20px 0px rgb(63 39 14);
    overflow-x: hidden;
		/* определяем цвет фона панели */
   /* background: #16a085;*/
	 background-color: rgba(2,2,56,0.2);
}
 
/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/
 
[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
}
 
/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/
 /*
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}
 */
/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */
 
body {
    -webkit-animation: bugfix infinite 1s;
}
 
@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}
 
/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */
 

 
@media screen and (max-width: 320px) {
    .nav {
      width: 100%;
      box-shadow: none
    }
}
 
/**
 * Формируем стиль заголовка (логотип) панели 
*/
 
.nav 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: 1.3em;
    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;
}
 
.nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
}
 
 
/*плавное появление заголовка (логотипа) при раскрытии панели */
 
[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}
 
/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */
 
.nav > ul {
    display: block;
    margin: auto;
    padding: 0;
    list-style: none;
	/*	margin-top: 0px;
    margin-left: 60px;*/
		box-sizing: border-box;
    display: flex;
    flex-direction: column;
		
}
 
.nav > ul > li {
    line-height: 2.7;
    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;
	/*	background: url(img/button.png) no-repeat;*/
		background: url(img/war_button.png) no-repeat;
    width: 297px;
}
 
[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
 
/* определяем интервалы появления пунктов меню */
 

 
 
/**
 * оформление ссылок пунктов меню
 */
 
.nav > ul > li > a, .nav > ul > li > a:visited {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    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;
		text-align: center;
}
 
/**
 * состояние ссылок меню при наведении
 */
 
.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}
 
/**
 * линия подчеркивания ссылок меню
 */
 
.nav > 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;
}
 
.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    /*background: #3bc1a0;*/
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
/**
 * анимируем линию подчеркивания 
 * ссылок при наведении
 */
 
.nav > ul > li > a:hover:before {
    width: 0%;
   /* background: #3bc1a0;*/
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
.nav > ul > li > a:hover:after {
    width: 0%;
  /*  background: transparent;*/
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}