/**
* Стилевой файл, в котором описаны стили универсальных блоков, используемых в разных частях сайта
**/

/* Стили ссылки-аватарки */
.g-avatar-link,
.g-avatar-link:hover {
    display: block;
    text-decoration: underline;
}

.g-avatar-link_float_left {
    float: left;
}

.g-avatar-link_margin-right_20 {
    margin-right: 20px;
}

.g-avatar-link__user-avatar_size_48 {
    width: 48px;
    height: 48px;
}

/* Статус/рейтинг пользователя */
.g-user-rating {
    display: inline-block;
}

.g-user-rating__dot {
    background: url(../i/circles.png) no-repeat 0 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 2px;
}

.g-user-rating__dot_color_blue {
    background-position: 0 0;
}

.g-user-rating__dot_color_gray {
    background-position: -8px 0;
}

/* Серый фон попапа */

/* класс для body(убираем скрол) */
.g-modal-open {
    overflow: hidden;
}

.g-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
    box-sizing: border-box;
}

.g-modal-open .g-modal-backdrop-fade {
    display: block;
    opacity: 0.5;
}

.g-modal-backdrop-fade {
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
    opacity: 0;
}

/**
 * Стили для попапа
 **/
.b-modal {
    display: none;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.b-modal_fade {
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
    opacity: 0;
}

.b-modal.b-modal_state_show {
    display: block;
    opacity: 1;
}

.b-modal__dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -ms-transition: -ms-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;

    webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);

    text-align: center;
    position: relative;
    margin: 30px auto;
    box-sizing: border-box;
}

.b-modal__content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    line-height: 0;

    display: inline-block;
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    background-clip: padding-box;
    outline: 0;

    box-sizing: border-box;
}

.b-modal__close-button {
    background: url(../status/close_button.png) no-repeat left center;
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    position: absolute;

    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.b-modal__close-button_color_gray {
    background-position: right center;
}

.b-modal__close-button:hover{
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.b-modal__close-button:active{
    top: 11px;
}