/**
Stylesheet: Slideshow.css
        CSS for Slideshow.

License:
        MIT-style license.

Copyright:
        Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

HTML:
        <div class="slideshow">
                <div class="slideshow-images" />
                <div class="slideshow-captions" />
                <div class="slideshow-controller" />
                <div class="slideshow-loader" />
                <div class="slideshow-thumbnails" />
        </div>

Notes:
        These next four rules are set by the Slideshow script.
        You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
        display: block;
        position: relative;
        z-index: 0;
}
.slideshow-images {
        display: block;
        overflow: hidden;
        position: relative;
}
.slideshow-images img {
        display: block;
        position: absolute;
        z-index: 1;
}
.slideshow-thumbnails {
        overflow: hidden;
}

/**
Notes:
        These are examples of user-defined styles.
        Customize these classes to your usage of Slideshow.
*/

.slideshow {
        width: 670px;
        height: 510px;
        margin: 0 auto;
        background: url("../images/back.png") no-repeat scroll 0 0 transparent;
}
}
.slideshow a img {
        border: 0;
}

/**

HTML:

        <div class="slideshow-images">

                <img />

                <img />

        </div>



Notes:

        The images div is where the slides are shown.

        Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.

*/



.slideshow-images {
        width: 640px;
        height: 480px;
        left: 15px;
        top: 15px;
        right: 15px;
        bottom: 15px;
}
.slideshow-images-visible {
        opacity: 1;
}
.slideshow-images-prev {
        opacity: 0;
}
.slideshow-images-next {
        opacity: 0;
}
.slideshow-images img {
        float: left;
        left: 0;
        top: 0;
        position: static;
}

/**

HTML:

        <div class="slideshow-thumbnails">

                <ul>

                        <li><a class="slideshow-thumbnails-active" /></li>

                        <li><a class="slideshow-thumbnails-inactive" /></li>

                        ...

                        <li><a class="slideshow-thumbnails-inactive" /></li>

                </ul>

        </div>



Notes:

        Customize the active / inactive classes to affect the thumbnails animation.

        Use the !important keyword to override FX without affecting performance.

*/



.slideshow-thumbnails * {

        margin: 0;

        padding: 0;

}

.slideshow-thumbnails li {

        float: left;

        list-style: none;

        margin: 5px 5px 5px 0;

        position: relative;

}

.slideshow-thumbnails a {

        display: block;

        float: left;

        padding: 5px;

        position: relative;

}

.slideshow-thumbnails a:hover {

        background-color: #CCC !important;

        opacity: 1 !important;

}

.slideshow-thumbnails img {

        display: block;

}

.slideshow-thumbnails-active {

        background-color: #7A7A7A;

        opacity: 1;

}

.slideshow-thumbnails-inactive {

        background-color: #FFF;

        opacity: .5;

}

.slideshow-thumbnails {

        top: -92px;

        height: 92px;

        left: 0;

        position: absolute;

        width: 100%;

        overflow: auto;

}

.slideshow-thumbnails ul {

        height: 100px;

        left: 0;

        position: absolute;

        top: 0;

        width: 5994px;

}

.slideshow {

        margin-top: 120px;

}

/**

HTML:

        <div class="slideshow-captions">

                ...

        </div>



Notes:

        Customize the hidden / visible classes to affect the captions animation.

*/



.slideshow-captions {

        background: #58676e;

        bottom: 19px;

        color: #F1F1C5;

        font: normal 12px/22px Arial, sans-serif;

        left: 20px;

        overflow: hidden;

        position: absolute;

        text-indent: 10px;

        width: 630px;        /* 100% */

        z-index: 10000;

}

.slideshow-captions-hidden {

        height: 0;

        opacity: 0;

}

.slideshow-captions-visible {

        height: 22px;

        opacity: .7;

}

/**

HTML:

        <div class="slideshow-controller">

                <ul>

                        <li class="first"><a /></li>

                        <li class="prev"><a /></li>

                        <li class="pause play"><a /></li>

                        <li class="next"><a /></li>

                        <li class="last"><a /></li>

                </ul>

        </div>



Notes:

        Customize the hidden / visible classes to affect the controller animation.

*/



.slideshow-controller {

        background: url(../images/controller1.png) no-repeat;

        height: 42px;

        left: 50%;

        margin: -21px 0 0 -119px;

        overflow: hidden;

        position: absolute;

        bottom: 50px;

        width: 238px;

        z-index: 10000;

}

.slideshow-controller * {

        margin: 0;

        padding: 0;

}

.slideshow-controller-hidden {

        opacity: 0;

}

.slideshow-controller-visible {

        opacity: 1;

}

.slideshow-controller a {

        cursor: pointer;

        display: block;

        height: 18px;

        overflow: hidden;

        position: absolute;

        top: 12px;

}

.slideshow-controller a.active {

        background-position: 0 18px;

}

.slideshow-controller li {

        list-style: none;

}

.slideshow-controller li.first a {

        background-image: url(../images/controller-first1.gif);

        left: 33px;

        width: 19px;

}

.slideshow-controller li.last a {

        background-image: url(../images/controller-last1.gif);

        left: 186px;

        width: 19px;

}

.slideshow-controller li.next a {

        background-image: url(../images/controller-next1.gif);

        left: 145px;

        width: 28px;

}

.slideshow-controller li.pause a {

        background-image: url(../images/controller-pause1.gif);

        left: 109px;

        width: 20px;

}

.slideshow-controller li.play a {

        background-position: 20px 0;

}

.slideshow-controller li.play a.active {

        background-position: 20px 18px;

}

.slideshow-controller li.prev a {

        background-image: url(../images/controller-prev1.gif);

        left: 65px;

        width: 28px;

}

/**

HTML:

        <div class="slideshow-loader" />



Notes:

        Customize the hidden / visible classes to affect the loader animation.

*/



.slideshow-loader {

        height: 28px;

        right: 0;

        position: absolute;

        top: 0;

        width: 28px;

        z-index: 10001;

}

.slideshow-loader-hidden {

        opacity: 0;

}

.slideshow-loader-visible {

        opacity: 1;

}