/* ================================================================================
  Система: Impera CMS                                                             |
  Сайт системы: https://imperacms.ru/                                              |
                                                                                  |
  Модуль: фото галерея JAK LightBox (https://jak.seznam.cz/)                       |
  Версия модуля: 1.0                                                              |
                                                                                  |
  Тип файла: стили модуля                                                         |
  Расположение: https://ваш.сайт/design/ваш_шаблон/html/JAK-lightbox/styles.css    |
                                                                                  |
================================================================================ */



    /* размеры */

    [id^="JAK-lightBox-"] {
        background: #eee;
        width: 800px;
        /* height: 547px; */
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    [id^="JAK-lightBox-"] .image-browser-image {
        width: 800px;
        height: 450px;
        border: 1px solid #ccc;
        overflow: hidden;
        padding: 0px;
        float: left;
        position: relative;
    }



    /* миниатюры */

    [id^="JAK-lightBox-"] .image-browser-thumbs {
        width: 800px;
        height: 81px;
        overflow-x: scroll;
        clear: both;
    }

    [id^="JAK-lightBox-"] .image-browser-thumbs table {
        border-collapse: separate;
        border-spacing: 3px 3px;
    }

    [id^="JAK-lightBox-"] .image-browser-thumbs td {
        padding: 0px;
        border: 1px solid #78a305;
    }

    [id^="JAK-lightBox-"] .image-browser-thumbs .image-browser-thumb-box {
        height: 55px;
        width: 100px;
        padding: 0px;
        margin: 3px;
        border: 1px solid #ccc;
    }



    /* контур активного */

    [id^="JAK-lightBox-"] .image-browser-active {
        border: 3px solid #78a305;
    }



    /* фон */

    div.image-browser-root {
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
    }

    div[class~="image-browser-root"] {
        background: url('bg.png');
    }



    /* кнопки */

    [id^="JAK-lightBox-"] .image-browser-prev {
        position: absolute;
        top: 20px;
        left: 20px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-previous-active.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-previous-active.png');
    }

    [id^="JAK-lightBox-"] .image-browser-prev:hover {
        background: url('lb-previous-hover.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-previous-hover.png');
    }

    [id^="JAK-lightBox-"] .image-browser-next {
        position: absolute;
        top: 20px;
        left: 66px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-next-active.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-next-active.png');
    }

    [id^="JAK-lightBox-"] .image-browser-next:hover {
        background: url('lb-next-hover.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-next-hover.png');
    }

    [id^="JAK-lightBox-"] .image-browser-prev-disabled {
        position: absolute;
        top: 20px;
        left: 20px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-previous-inactive.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-previous-inactive.png');
    }

    [id^="JAK-lightBox-"] .image-browser-next-disabled {
        position: absolute;
        top: 20px;
        left: 66px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-next-inactive.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-next-inactive.png');
    }

    [id^="JAK-lightBox-"] .image-browser-close {
        position: absolute;
        top: 20px;
        left: 760px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-close-active.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-close-active.png');
    }

    [id^="JAK-lightBox-"] .image-browser-close:hover {
        background: url('lb-close-hover.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-close-hover.png');
    }

    .JAK-lightBox-image-browser-slideshow-pause {
        position: absolute;
        top: 414px;
        left: 20px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-slideshow-pause.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-slideshow-pause.png');
    }

    .JAK-lightBox-image-browser-slideshow-play {
        position: absolute;
        top: 414px;
        left: 20px;
        display: block;
        width: 42px;
        height: 36px;
        cursor: pointer;
        background: url('lb-slideshow-active.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-slideshow-active.png');
    }

    .JAK-lightBox-image-browser-slideshow-play:hover {
        background: url('lb-slideshow-hover.png');
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lb-slideshow-hover.png');
    }