/* =========================================================== */
/* == Автор: Загиров Александр (lordofnight@mail.ru)        == */
/* == Компания: SmartSoft (http://smartsoft.ru/)            == */
/* == Описание: CSS-шаблон для браузерного просмотра сайта  == */
/* == Дата создания: 18 апреля 2018 года.                   == */
/* == Дата последнего обновления: 00 месяц 2018 года.       == */
/* =========================================================== */
/* ================ ФУНДАМЕНТАЛЬНАЯ СТИЛИСТИКА =============== */
/* =========================================================== */

/* Импорт Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic,cyrillic-ext);

/* Универсальный селектор убирает у всех тэгов границы, отступы, поля и кучу другого мусора */
* {
 background-color: transparent;
 border: none;
 margin: 0px;
 padding: 0px;
 vertical-align: top;
}
/* Представление HTML */
HTML {
 height: 100%;
 min-width: 1170px;
 overflow: auto;
}
/* Представление BODY */
BODY {
 background-color: #ffffff;
 color: #333230;
 font-family: 'Roboto', 'Arial', sans-serif;
 font-size: 15px;
 font-weight: normal;
 line-height: 20px;
 min-height: 100%;
 min-width: 1170px;
 overflow: hidden;
 position: relative;
 text-align: left;
}
/* Представление блочных элементов */
H1, H2, H3, H4, H5, H6 {
 font-family: 'Roboto', 'Arial', sans-serif;
 font-style: normal;
 font-weight: bold;
 position: relative;
}
H1 {
 font-size: 40px;
 letter-spacing: -0.025em;
 line-height: 40px;
 padding: 0px 0px 40px 0px;
}
H2 {
 font-size: 30px;
 letter-spacing: -0.025em;
 line-height: 30px;
 padding: 0px 0px 30px 0px;
}
H3 {
 font-size: 25px;
 line-height: 30px;
 padding: 0px 0px 30px 0px;
}
H4 {
 font-size: 20px;
 line-height: 25px;
 padding: 0px 0px 25px 0px;
}
H5 {
 color: #999791;
 font-size: 15px;
 line-height: 20px;
 padding: 0px 0px 20px 0px;
}
H6 {
 color: #999791;
 font-size: 13px;
 line-height: 15px;
 padding: 0px 0px 15px 0px;
}
P {
 text-indent: 0px;
 padding-bottom: 20px;
}
SPAN {
 text-indent: 0px;
}
OL {
 line-height: 20px;
 list-style: decimal outside none;
 padding: 0px 0px 14px 34px;
}
    OL LI {
     padding: 0px 0px 5px 0px;
    }
UL {
 line-height: 20px;
 list-style: disc outside none;
 padding: 0px 0px 14px 34px;
}
    UL LI {
     padding: 0px 0px 5px 0px;
    }
/* Представление гиперссылок */
A {
 color: #333230;
 text-decoration: underline;
 @include transition(color .2s ease);
}
A:hover {
 color: #c4434e;
 text-decoration: none;
}

/* Представление дополнительных классов */
.bold {font-weight: bold;}
.italic {font-style: italic;}
.clear {clear: both;}
.hidden {display: none;}

/* Представление элементов получения данных от пользователя */
INPUT[type='text'], INPUT[type='password'], TEXTAREA, SELECT {
 background-color: #ffffff;
 border: 2px solid #ebeae6;
 color: #999791;
 outline: none;
 position: relative;
 width: -moz-calc(100% - 32px);
 width: -webkit-calc(100% - 32px);
 width: calc(100% - 32px);
}
INPUT[type='text']:focus, INPUT[type='password']:focus, TEXTAREA:focus, SELECT:focus {
 border-color: #bf303c;
 color: #333230;
}
INPUT[type='text']:disabled, INPUT[type='password']:disabled, TEXTAREA:disabled, SELECT:disabled {
 background-color: #f0efeb;
 color: #b0afaa;
 
}
INPUT[type='text'], INPUT[type='password'] {
 font: 15px/38px 'Roboto', 'Arial', sans-serif;
 height: 36px;
 padding: 0px 14px 0px 14px;
}
INPUT[type='checkbox'], INPUT[type='radio'] {
 background-color: #ffffff;
 border: 2px solid #ebeae6;
 height: 25px;
 width: 25px;
}
TEXTAREA {
 font: 15px/20px 'Roboto', 'Arial', sans-serif;
 overflow: auto;
 max-height: 370px;
 padding: 14px;
 resize: vertical;
}
SELECT {
 font: 15px/40px 'Roboto', 'Arial', sans-serif;
 height: 40px;
 padding: 0px 20px 0px 10px;
 width: 100%;
}
    SELECT OPTION {
     font: 15px/20px 'Roboto', 'Arial', sans-serif;
     padding: 0px 0px 0px 10px;
    }

/* Кустомные кнопки */
*.btn {
 border: 2px solid transparent;
 color: #ffffff;
 cursor: pointer; cursor: hand;
 display: block;
 font: bold 15px/20px 'Roboto', 'Arial', sans-serif;
 height: 34px;
 padding-top: 12px;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
}
*.btn.small {
 font-size: 13px;
 height: 25px;
 line-height: 15px;
 padding-top: 11px;
}
INPUT.btn {
 height: 50px;
 padding-top: 0px;
}
INPUT.btn.small {
 height: 40px;
 padding-top: 0px;
}

.btn.s01 {
 background-color: #bf303c;
 border-color: #bf303c;
}
.btn.s01:hover {
 background-color: transparent;
 color: #bf303c;
}
.btn.s02 {
 background-color: #333230;
 border-color: #333230;
}
.btn.s02:hover {
 background-color: transparent;
 color: #333230;
}
.btn.s03, .btn.s03:hover {
 background-color: #f5f4f0;
 border-color: #f5f4f0;
 color: #999791;
}

/* =========================================================== */
/* ================= СТРУКТУРА КАРКАСА САЙТА ================= */
/* =========================================================== */
FORM.loadsave {
 border: 2px solid #ebeae6;
 margin: 20px auto;
 overflow: hidden;
 padding: 18px 18px 16px 18px;
 width: 580px;
}
    FORM.loadsave INPUT[type='text'] {
     float: left;
     width: 268px;
    }
    FORM.loadsave INPUT[type='button'] {
     float: left;
     margin-left: 20px;
     width: 120px;
    }
    FORM.loadsave P {
     clear: both;
     color: #999791;
     font-size: 13px;
     line-height: 17px;
     padding: 14px 0px 0px 0px;
    }
        FORM.loadsave P B {
         color: #bf303c;
         font-weight: normal;
        }
OL#pawns {
 border: 2px solid #ebeae6;
 list-style: decimal-leading-zero outside none;
 margin: 0px auto 20px auto;
 overflow: hidden;
 padding: 1px 18px 0px 0px;
 width: 598px;
}
    OL#pawns > LI {
     margin-left: 40px;
     padding: 11px 0px 13px 0px;
     position: relative;
    }
    OL#pawns > LI + LI {
     border-top: 2px solid #ebeae6;
    }
        OL#pawns > LI::marker {
         color: #bf303c;
         font-size: 13px;
         left: 0px;
         line-height: 17px;
         position: absolute;
         top: 0px;
        }
        OL#pawns > LI B {
         display: block;
        }
        OL#pawns > LI P {
         color: #999791;
         font-size: 13px;
         line-height: 17px;
         padding: 0px 0px 0px 0px;
        }
            OL#pawns > LI P I {
             color: #bf303c;
             font-style: normal;
            }
        OL#pawns > LI A.btn {
         display: block;
         position: absolute;
         right: 0px;
         top: 19px;
         width: 116px;
        }
FORM#controls {
 border: 2px solid #ebeae6;
 margin: 0px auto 20px auto;
 overflow: hidden;
 padding: 18px 18px 18px 18px;
 width: 580px;
}
    FORM#controls INPUT.btn.s01 {
     float: right;
     margin-left: 20px;
     width: 120px;
    }
    FORM#controls A.btn.s02 {
     float: left;
     width: 436px;
    }