﻿.gallery { font-family: Arial; font-size: 12px; margin: 0; padding: 0; min-width: 196px; }

    .gallery .clearfix:before,
    .gallery .clearfix:after { display: table; content: ""; }
    .gallery .clearfix:after { clear: both; }

    /*NAVIGATION
---------------------------------------------------------------------------------*/

    .gallery .navigation { width: 220px; margin: 0 auto; text-align:center; }

        .gallery .navigation a, .gallery .navigation ul, .gallery .navigation li { display: inline-block; margin: 0; padding: 0; }

        .gallery .navigation a, .gallery .navigation ul { float: left; }

        .gallery .navigation a, .gallery .navigation li { cursor: pointer; }

        .gallery .navigation a { margin: 0 3px; }

        .gallery .navigation ul { list-style-type: none; margin: 0 10px; }

            .gallery .navigation ul li { margin: 0 1px; width: 19px; text-align: center; }

        .gallery .navigation li.current { font-weight: bold; text-decoration: underline; }

        .gallery .navigation .firstPicture:after,
        .gallery .navigation .lastPicture:before { content: " | "; }

    /* Slideshow
-----------------------------------------------------------------------------------*/

    .gallery #pictureContainer { display: block; width: 100%; }

        .gallery #pictureContainer .title, .gallery #pictureContainer .description { min-height: 15px; }

    .gallery .slideshow { min-height: 100px; width: 100%; display: block; position: relative; vertical-align:middle; text-align:center; }

        .gallery .slideshow > div { background-position: 50% 25%; background-size: cover; background-repeat: no-repeat; min-width: 100px; min-height: 100px; position: absolute; top: 50%; left: 50%; opacity: 0; }

   /* Text
-----------------------------------------------------------------------------------*/
    .gallery .title, .gallery .description { position: relative; height: 15px; margin: 3px 0; }
        .gallery .title > span, .gallery .description > span { position: absolute; left: 0; top: 0; }

/* Controls
    */
    .gallery .controls { height: 15px; margin: 3px 0; position: relative; }
        .gallery .controls .photo-index { position: absolute; right: 0;  }
        .gallery .controls .ss-controls { position: absolute; left: 0;  }
            .gallery .controls .ss-controls a { text-decoration: none; color: black; }