/*
ШРИФТЫ ГУГЛ
    font-family: 'Russo One', sans-serif; (Regular)
    font-family: 'Stalinist One', cursive; (Regular)
    font-family: 'Comfortaa', cursive; (Light, Regular, Bold)
*/
/*ОСНОВНАЯ РАЗМЕТКА СОДЕРЖИМОГО*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
        min-width: 1000px;
        min-height: 600px;
    }
    html, body {
        height: 100%;
    }
    body {
        /*ЦВЕТ ТЕКСТА*/color: #bcb8ac;
        /*ФОНОВЫЙ ЦВЕТ*/background: #C4C4C4;
        /*БАННЕР*/background-image: url(/image/banner.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        font-family: 'Comfortaa', cursive;
    }
    #main {
        min-height: 100%;
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    header {
        /*ВЫСОТА ШАПКИ = ВЕРХНЕЕ МЕНЮ + ГЛАВНОЕ МЕНЮ + БАННЕР (50+50+190)*/height: 290px;
    }
    main {
        padding-bottom: 100px; /* Отступ, равный размеру подвала + дополнительное расстояние от подвала*/
    }
    #content {
        /*ШИРИНА ПОДВАЛА*/width: 91%;
        max-width: 1520px;
        min-width: 800px;
        margin: 0 auto;
        /*ФОНОВЫЙ ЦВЕТ background: #FFFFFF;*/
        min-height: calc(100vh - 390px); /* Из высоты экрана вычетаем суммму высот шапки и подвала (290+100) */
        overflow: hidden;
    }
    footer {
        /*ВЫСОТА ПОДВАЛА*/height: 100px;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        /*ФОНОВЫЙ ЦВЕТ*/background: #E5AC2A;
    }
    #footer {
        position: relative;
        /*ШИРИНА ПОДВАЛА*/width: 91%;
        height: 100%;
        max-width: 1520px;
        min-width: 800px;
        margin: 0 auto;
        padding: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #banner {
        display: block;
        height: 190px;
        background-image: url(/image/logo.svg);
        background-position: center center;
        background-size: 180px;
        background-repeat: no-repeat;
    }
/*ОСНОВНАЯ РАЗМЕТКА СОДЕРЖИМОГО*/
/*ВЕРХНЕЕ МЕНЮ*/
    /*ТАК ЖЕ И К ГЛАВНОМУ*/nav {
        width: 100%;
        height: 50px;
    }
    #topMenu {
        /*ФОНОВЫЙ ЦВЕТ*/background: #E5AC2A;
    }
    #references {
        height: 50px;
        display: inline-block;
        list-style-type: none;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        -webkit-padding-start: 0;
    }
    #references a, .authentication {
        text-decoration: none;
        display: inline-block;
        width: 100px;
        height: 50px;
    }
    .references {
        display: inline-block;
        width: 100px;
        height: 50px;
    }
    .references:hover {
        background-color: #F3CF31;
    }
    #authentication {
        display: inline-block;
        position: absolute;
        right: 0;
        width: 400px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        -webkit-padding-start: 0;
    }
    .authentication {
        right: 0;
        display: inline-block;
        position: absolute;
    }
    .authentication:hover {
        background-color: #F3CF31;
    }
    .userNickname {
        display: inline-block;
        position: absolute;
        right: 100px;
        width: 300px;
        height: 50px;
        text-align: right;
    }
    .userNickname a {
        display: inline-block;
        text-decoration: none;
    }
    .atopmenubut {
        font-family: Arial, sans-serif;
        font-weight: bolder;
        font-size: xx-large;
        position: absolute;
        left: 0;
        width: 30px;
        text-align: center;
    }
    .aplayer {
        max-width: 300px;
        padding-right: 10px;
        padding-left: 10px;
        overflow: hidden;
        font-family: 'Comfortaa', cursive;
        font-weight: bold;
    }
    .aplayeradm {
        max-width: calc(300px - 30px);
        padding-right: 10px;
        padding-left: 10px;
        overflow: hidden;
        font-family: 'Comfortaa', cursive;
        font-weight: bold;
    }
    .userNickname a:link {
        color: #FFFFFF;
        text-decoration: none;
    }
    .userNickname a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }
    .userNickname a:hover {
        color: #1C89B7;
        background-color: #F3CF31;
    }
/*ВЕРХНЕЕ МЕНЮ*/
/*ГЛАВНОЕ МЕНЮ*/
    #mainMenu {
        /*ФОНОВЫЙ ЦВЕТ*/background: #F3CF31;
    }
    menu {
        height: 50px;
        width: calc(5*200px);
        display: block;
        list-style-type: none;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        -webkit-padding-start: 0;
        margin: 0 auto;
    }
    .mainMenu {
        display: inline-block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-family: 'Russo One', sans-serif;
        font-size: large;
    }
    .mainMenu a {
        display: block;
        width: 200px;
        height: 50px;
    }
    .mainMenu a:link {
        color: #772919;
        text-decoration: none;
    }
    .mainMenu a:visited {
        color: #772919;
        text-decoration: none;
    }
    .mainMenu a:hover {
        color: #C12B1B;
    }
    .mainMenu:hover {
        background: #E5AC2A;
        border-bottom: 5px solid #C12B1B;
        transition: .3s;
    } 
/*ГЛАВНОЕ МЕНЮ*/
/*ГЛАВНАЯ СТРАНИЦА*/
    h2 {
        font-family: 'Russo One', sans-serif;
        color: #452B18;
        margin-left: 10px;
        /*
        #C12B1B
        #772919
        #452B18
        */
    }
    .tile {
            float: left;
            margin: 10px; /*Отступы между плиток*/
            padding: 0;
            position: relative;
            width: 360px; /*Ширина плитки*/
            height: 300px; /*Высота плитки*/
            overflow: hidden;
            z-index: 1;
            background-size: 360px; /*Ширина фона = ширине плитки*/
            background-position: top center;
            background-repeat: no-repeat;
    }
    .h {
            position: relative;
            top: 200px; /*Отступ от верхнего края плитки*/
            height: 100px; /*Высота заголовка*/
            z-index: 5;
            box-sizing: border-box;
            padding: 10px 5px; /*Поля*/
    }
    .h h3 {
        font-size: medium;
    }
    .h a:link {
        text-decoration: none;
    }
    .h a:visited {
        text-decoration: none;
    }
    
    .desc {
        position: relative;
        top: 300px; /*Отступ от верха плитки = Высота заголовка + Отступ заголовка от верха плитки*/
        height: 200px; /*Высота новости = Высота плитки - Высота заголовка*/
        z-index: 4;
        box-sizing: border-box;
        padding: 10px 5px; /*Поля*/
    }
    .fon {
        background-color: #772919; /*Цвет подложки*/
        position: relative;
        height: 200px; /*Высота подложки = Высота новости*/
        top: -100px; /*Отступ подложки = Высота новости - Высота подложки - Высота заголовка*/
        z-index: 3;
    }
    .tile:hover {
        background-size: 450px; /*Эффект увеличения фоновой картинки*/
        transition: .5s;
    }
    .tile:hover .h {
        top: 0px; /*Подъём заголовка в самый верх*/
        transition: .5s;
        background: rgba(20, 20, 20, 0.3); /*Затемнение фона заголовка*/
    }
    .tile:hover .desc {
        top: 0px; /*Подъём новости под заголовок*/
        transition: .5s;
    }
    .tile:hover .fon {
        top: -200px; /*Подъём подложки в самый верх = Высота заголовка*/
        transition: .5s;
    }
    .tile h3 {
        margin: 0;
        color: #FFFFFF; /*Цвет заголовка*/
    }
    .category, .date {
        margin: 0;
        font-size: small;
        padding-top: 5px;
        color: #C4C4C4;
    }
    .desc {
        color: #C4C4C4;
    }
    .desc a {
        margin-top: 20px;
        text-decoration: none;
        font-size: smaller;
    }
    .desc a:link {
        color: #1C89B7;
    }
    .desc a:visited {
        color: #176482;
    }
    .gameNews {
        position: absolute;
        width: 50px;
        right: 5px;
        bottom: 10px;
    }
    /*Постраничная навигация*/
    #paging {
        clear: left;
        text-align: center;
        padding: 5px 0 10px 0;
    }
    .nn {
        display: inline-block;
        min-width: 30px;
        max-width: 40px;
        height: 30px;
        padding: 5px;
        background-color: #1C89B7;
        font-family: 'Russo One', sans-serif;
        color: #FFFFFF;
        margin-right: 10px;
    }
    #paging .nn:last-child {
        margin-right: 0;
    }
    span.nn {
        background-color: #C12B1B;
    }
    a.nn:link {
        color: #FFFFFF;
        text-decoration: none;
    }
    a.nn:hover {
        color: #FFFFFF;
        text-decoration: none;
        background-color: #176482;
    }
    a.nn:visited {
        color: #FFFFFF;
        text-decoration: none;
    }
    /*Постраничная навигация*/
/*ГЛАВНАЯ СТРАНИЦА*/
/*СЕРВЕРА*/
    #servers {
        width: 100%;
        font-family: 'Russo One', sans-serif;
        /*border-collapse: collapse;*/
        border-spacing: 10px 5px;
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
    }
    #servers>thead>th, #servers>tr>td {
        width: 20%;
    }
    #wotServers, #discordMember {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
    }
    #discord img {
        width: 166px;
    }
    .countPl {
        height: 40px;
        padding: 5px 0;
        font-size: x-large;
        font-weight: bold;
        color: #FFFFFF;
    }
    #servers th {
        padding: 10px 0;
    }
    #discord {
        background-color: #7289da;
    }
    #swot {
        background-color: #F25322;
    }
    #swows {
        background-color: #00CBCD;
    }
    #swowp {
        background-color: #00A2E3;
    }
    #swotb {
        background-color: #F49511;
    }
    .countPl, .etcServers {
        background-color: #772919;
    }
    #wotServers {
        color: #FFFFFF;
    }
    #wotServers td {
        padding: 3px;
    }
    .serverNum {
        font-size: smaller;
        color: #C4C4C4;
    }
    .etcServers {
        padding: 5px 0;
    }
    #discordMembers td {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .discordAvatar {
        position: relative;
        width: 32px;
        height: 32px;
    }
    .discordAvatar img {
        width: 32px;
        height: 32px;
        border-radius: 16px;
    }
    .discordOnline, .discordIdle, .discordDnd {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        position: absolute;
        bottom: 10px;
        right: 0;
    }
    .discordOnline {
        background-color: #43b581;
    }
    .discordIdle {
        background-color: #faa61a;
    }
    .discordDnd {
        background-color: #F04747;
    }
    .discordNick {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 10px;
    }
    .disGame {
        color: #C4C4C4;
        font-size: smaller;
    }
    #etcDiscord {
        color: #FFFFFF;
    }
/*СЕРВЕРА*/
/*О КЛАНЕ*/
    /*Оформление вкладок*/
    #clans {
        margin: 0 auto;
    }
    #clans label {
        margin-left: 10px;
        width: 100px;
        height: 50px;
        display: inline-block;
        position: relative;
        background: #1C89B7;
        cursor: pointer;
    }
    #clans > div, #clans > input {
        display: none;
    }
    #clans label:hover {
        background: #176482;
    }
    /*Оформление отмеченого таба*/
    #clans input[type="radio"]:checked + label {
        background: #C12B1B;
        border: 1px outset #bcb8ac;
        border-radius: 2px;
    }
    .icwot, .icwows {
        fill: #FFFFFF;
    }
    /*Отображение и оформление выбранной вкладки*/
    #clans > input:nth-of-type(1):checked ~ div:nth-of-type(1),
    #clans > input:nth-of-type(2):checked ~ div:nth-of-type(2) {
        display: block;
    }
    .clanName a:link, .clanName a:visited {
        text-decoration: none;
        color: #1C89B7;
    }
    .clanName a:hover {
        text-decoration: underline;
        color: #176482;
    }
    .clanInfo {
        width: 100%;
        border-spacing: 10px 5px;
        text-align: center;
        vertical-align: middle;
        color: #FFFFFF;
    }
    .clanInfo td {
        background-color: #772919;
        padding: 10px 10px;
    }
    .clanMotto {
        color: #C4C4C4;
    }
    .clanValue, .clanValueEtc {
        font-family: 'Russo One', sans-serif;
    }
    .clanValue {
        font-size: x-large;
    }
    .clanValueEtc {
        font-size: medium;
    }
    .clanDesc {
        font-size: medium;
        color: #C4C4C4;
    }
    .clanDescription a:link {
        color: #1C89B7;
    }
    .clanDescription a:visited {
        color: #1C89B7;
    }
    .clanDescription a:hover {
        color: #176482;
    }
    cite {
        display: inline-block;
        margin: 10px 10px;
        color: #452B18;
    }
    #hiddenStat {
        font-family: 'Russo One', sans-serif;
    }
    .panelReserves {
        vertical-align: middle;
        text-align: center;
    }
    .reserv {
        float: left;
        margin: 2%; /*Отступы между столбцами*/
        padding: 0;
        position: relative;
        width: 20%; /*Ширина столбца*/
        /*height: 30px; /*Высота плитки*/
        overflow: hidden;
        z-index: 1;
        background-size: 100%; /*Ширина фона = ширине столбца*/
        background-position: top center;
        background-repeat: no-repeat;
        /*font-size: 80%;*/
    }
    .rName {
        margin-bottom: 15px;
    }
    .rLevel {
        margin-bottom: 5px;
    }
    .rAmount {
        margin-bottom: 5px;
    }
    .rBV, .rBT {
        margin-bottom: 5px;
    }
    .rBatT {
        margin-bottom: 5px;
    }
    .rTill {
        margin-bottom: 5px;
        color: greenyellow;
    }
    .rAct {
        margin-bottom: 10px;
    }
    .rAct a:link {
        color: #1C89B7;
    }
    .rAct a:visited {
        color: #1C89B7;
    }
    .rAct a:hover {
        color: #176482;
    }
/*О КЛАНЕ*/
/*СОСТАВ*/
    .sort {
        margin: 10px 10px;
        width: 100%;
        border-spacing: 0 5px;
        text-align: center;
        vertical-align: middle;
        color: #FFFFFF;
    }
    .sort > thead > tr > td {
        background-color: #452B18;
        cursor: pointer;
        cursor: hand;
        font-weight: bold;
        height: 50px;
    }
    .sort > thead td.curcol {
        background-color: #C12B1B;
    }
    .sort > tbody > tr > td {
        background-color: #772919;
        height: 50px;
    }
    .sort > tbody > tr > td:nth-child(n+3) {
        text-align: right;
        padding-right: 30px;
        font-family: 'Russo One', sans-serif;
    }
    .sort > tbody > tr > td:first-child {
        background-color: #452B18;
    }
    .sort > tbody > tr {
        cursor:pointer;
        cursor:hand;
    }
    .sort > tbody > tr:hover td {
        background-color: #176482;
    }
    .sortRank {
        display: none;
    }
    .namePL {
        text-align: left;
    }
    .namePL > p {
        display: inline-block;
        padding-left: 10px;
    }
    .epaulettesTC {
        width: 48px;
        height: 39px;
        background-image: url(https://lesta.ru/clans/static/1.24.0-1.47.0/clansassets/images/components/icons/epaulettes.png);
    }
    .onlinePL {
        display: inline-block;
        float: right;
        margin-left: 5px;
        margin-right: 5px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background-color: #43b581;
    }
    .commanderShip{
        background-image: url(/image/commander.png);
    }
    .exofficerShip {
        background-image: url(/image/executive_officer.png);
    }
    .recofficerShip {
        background-image: url(/image/recruitment_officer.png);
    }
    .privateShip {
        background-image: url(/image/private.png);
    }
    .epaulettesSC {
        width: 48px;
        height: 39px;
        background-repeat: no-repeat;
        background-image: url(/image/epaulettes_ships.png);
/*        width: 48px;
        background-repeat: no-repeat;
        background-position: center center;*/
    }
    .currentPlayer {
        background-color: #1C89B7 !important;
    }
/*СОСТАВ*/
/*ИГРОК*/
    
/*ИГРОК*/
/*СТАТЬЯ*/
    #guides {
        margin: 10px;
        background-color: #772919;
        padding: 20px;
        hyphens: auto;
    }
    #guides>p {
        text-align: justify;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    .dg + p {
        margin-top: 25px;
    }
    .dg>figcaption {
        margin-bottom: 5px;
        text-align: left;
    }
    .sh {
        color: #FFFFFF;
        margin: 25px 0 15px 0;
    }
    .sh:first-child {
        margin: 0 0 15px 0;
    }
    .dg {
        margin: 25px auto;
    }
    .sg {
        margin-bottom: 5px;
        outline: 0;
        text-decoration: underline;
    }
    .fg {
        
    }
    .fcg {
        
    }
    #guides img {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }
    #guides figure {
        text-align: center;
    }
    .bnco {
        display: none;
    }
    
/*СТАТЬЯ*/
/*ПОДВАЛ*/
    #copyright {
        position: absolute;
        right: 10px;
        bottom: 15px;
        font-size: small;
        color: #FFFFFF;
    }
/*ПОДВАЛ*/
    .commingSoon {
        margin: 10px 10px;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        color: #C12B1B;
        font-weight: bold;
    }

/*
ПАЛИТРА
    белый
        #FFFFFF (255, 255, 255)
    серый
        #C4C4C4 (196, 196, 196)
    жёлтый
        #F3CF31 (243, 207, 49)
    оранжевый
        #E5AC2A (229, 172, 42)
    голубой
        #1C89B7 (28, 137, 183)
    синий
        #176482 (23, 100, 130)
    красный
        #C12B1B (193, 43, 27)
    тёмно-красный
        #772919 (119, 41, 25)
    бордовый
        #452B18 (69 , 43, 24)
*/