﻿    /* jssor slider bullet navigator skin 03 css */
    /*
        .jssorb03 div           (normal)
        .jssorb03 div:hover     (normal mouseover)
        .jssorb03 .av           (active)
        .jssorb03 .av:hover     (active mouseover)
        .jssorb03 .dn           (mousedown)
        */
    .jssorb03 {
        position: absolute;
    }

        .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
            position: absolute;
            /* size of bullet elment */
            width: 21px;
            height: 21px;
            text-align: center;
            line-height: 21px;
            color: white;
            font-size: 12px;
            background: url('img/b03.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }

        .jssorb03 div {
            background-position: -5px -4px;
        }

            .jssorb03 div:hover, .jssorb03 .av:hover {
                background-position: -35px -4px;
            }

        .jssorb03 .av {
            background-position: -65px -4px;
        }

        .jssorb03 .dn, .jssorb03 .dn:hover {
            background-position: -95px -4px;
        }

    /* jssor slider thumbnail navigator skin 16 css */
    /*
        .jssort16 .p            (normal)
        .jssort16 .p:hover      (normal mouseover)
        .jssort16 .pav          (active)
        .jssort16 .pav:hover    (active mouseover)
        .jssort16 .pdn          (mousedown)
        */
    .jssort16 .p {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
    }

    .jssort16 .t {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        border: none;
    }

    .jssort16 .p img {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        filter: alpha(opacity=55);
        opacity: .55;
        transition: opacity .6s;
        -moz-transition: opacity .6s;
        -webkit-transition: opacity .6s;
        -o-transition: opacity .6s;
    }

    .jssort16 .pav img, .jssort16 .pav:hover img, .jssort16 .p:hover img {
        filter: alpha(opacity=100);
        opacity: 1;
        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
    }

    .jssort16 .pav:hover img, .jssort16 .p:hover img {
        filter: alpha(opacity=70);
        opacity: .7;
    }

    .jssort16 .title, .jssort16 .title_back {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #000;
        font-size: 20px;
    }

    .jssort16 .title_back {
        background-color: #fff;
        filter: alpha(opacity=50);
        opacity: .5;
    }

    .jssort16 .pav .title_back {
        background-color: #000;
        filter: alpha(opacity=50);
        opacity: .5;
    }

    .jssort16 .pav .title {
        color: #fff;
    }

    .jssort16 .p.pav:hover .title_back, .jssort16 .p:hover .title_back {
        filter: alpha(opacity=40);
        opacity: .4;
    }

    .jssort16 .p.pdn img {
        filter: alpha(opacity=100);
        opacity: 1;
    }
