/**
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.
*/

#show, #show_1, #show_2, #show_3, #show_4 {
    position: absolute;
}

/** Customizable Element */
.slideshow-thumbnails a:hover {

    opacity: 1 !important;
}

/** Customizable Element */
.slideshow-thumbnails-active {
    background-color: black;
    opacity: 1;
}

/** SLIDESHOW ELEMENTS */

.slideshow {
    display: block;
    z-index: 1;
    position: static !important;
}
.slideshow-images {
    display: block;
    overflow: hidden;
    position: relative;
    height: 300px;
    width: 400px;
    top: 0px;
    left: 0px;
}
.slideshow-images img {
    display: block;
    position: absolute;
    z-index: 1;
    background: #BBBBBB;
}

.screen_frame {
    overflow: hidden;
}

.slideshow-thumbnails {
    display: none;
    margin-top: 3px;
    height: 136px;
    position: absolute;
    top: 385px;
    width: 500px;
    /*border: 1px solid red;*/
    z-index: 100;
    overflow: hidden;
}

.slideshow-thumbnails img {
    /*height: 80px;*/
    width: 160px;
}



.slideshow-thumbnails img:hover {
    /*height: 80px;*/
    width: 143px;
}

/**
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-visible {
    opacity: 1;
}
.slideshow-images-prev {
    opacity: 0;
}
.slideshow-images-next {
    opacity: 0;
}
.slideshow-images img {
    float: left;
    left: 0;
    top: 0;
}

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

.slideshow {
    height: 300px;
    margin: 0 auto;
    width: 400px;
}
.slideshow a img {
    border: 10px;
}

/**
HTML:
    <div class="slideshow-captions">
        ...
    </div>

Notes:
    Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
    background: #000;
    bottom: 0;
    color: #FFF;
    font: normal 12px/22px Arial, sans-serif;
    left: 0;
    overflow: hidden;
    position: absolute;
    /*text-indent: 10px;*/
    width: 367px;
    z-index: 10000;
    height: 282px;
    opacity: 0.9;
    /* Internet Explorer :( */
    filter: alpha(opacity = 90);
    display: none;
}
.slideshow-captions-hidden {
    height: 0;
    opacity: 0;
}
.slideshow-captions-visible {
    height: 20px;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

/**
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(controller.png) no-repeat;
    height: 42px;
    left: 180px;
    margin: -21px 0 0 -119px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    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;
}

/**
HTML:
    <div class="slideshow-loader" />

Notes:
    Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
    height: 28px;
    right: 80px;
    position: relative;
    top: 40px;
    width: 28px;
    z-index: 10001;
}
.slideshow-loader-hidden {
    opacity: 0;
}
.slideshow-loader-visible {
    opacity: 1;
}

/**
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 ul {
    white-space: nowrap;
    /*padding: 0px;*/
    /*margin: 0px;*/
    vertical-align: bottom;
    display: table;
    /*height: 65px;*/
    /*left: 0;*/
    /*position: relative;*/
    top: auto !important;
    bottom: 5px !important;
    width: 800px !important;
}
/**
Note: Below
(.slideshow-thumbnails li)
Float:determines whether the thumbnail images are positioned
from left to right or from right to left. Also determines whether they progress from left to right or
vice-versa.
Margin: 2nd value determines space between thumbnail images.
*/
.slideshow-thumbnails li {
    background-repeat: no-repeat;
    display: inline-block;
    padding: 0px !important;
    background-size: contain;
    background-image: url('/static/common/images/backgrounds/film_slot_3.png');
    width: 113px !important;
    height: 126px !important;
    margin: 0px !important;
    /*vertical-align: bottom;*/
    /*display: table-cell;*/
    padding-right: 4px;
    list-style: none;
    /*margin: 0px 0px 0px 0;*/
    position: relative;
    /*width: auto !important;*/
    /*height: auto !important;*/
    /*vertical-align: middle;*/
}
/**
Note: Below (.slideshow-thumbnails a)
Padding = blank space added to border around outside of thumbnails
*/
.slideshow-thumbnails a {
    width: 100% !important;
    height: 82px !important;
    margin: 0px !important;
    padding: 22px 0 0 2px !important;
    background-color: transparent !important;
    vertical-align: middle;
    float: left;
    padding: 2px;
    position: relative;
}

.slideshow-thumbnails img {
    width: 109px !important;
    height: 82px !important;
    margin: 0px !important;
    padding: 0px !important;
    border: none;
    display: block;
    width: 143px;
}

.slideshow-thumbnails-inactive {
    background-color: #ffffff;
    opacity: .5;
}

div#ad-container p {
    color: #FFFFFF;
    margin: 0;
}

div#ad-container div {
    width: 100% !important;
}