/* slideshow (see template horizontal)
******************************************/
.slideshow{
    display: inline-block;
    overflow:  hidden;
    width : 500px;/*what you want*/
    position: relative;
}
.slideshow img{
    vertical-align: middle;
}
.slideshow a:active, .slideshow a:focus { 
    border:none;
    outline:none;
}
.slideshow .loader{
    display : none;
    opacity : 0.5;
    width : 500px;
    height : 300px;
    z-index : 10;
    background: #fff url(../loading.gif) center no-repeat;
    position: absolute;
}
     /* slides 
    ******************************************/
     .slideshow > .fade{
        overflow:  hidden;
        position : relative;
        display : inline-block;
        width : 500px;
        height : 300px;
     }
     .slideshow > .fade > div{
        display: inline-table;
        position : absolute;
        table-layout: fixed;
        width : 500px;
        height : 300px;
        left : 0px;
        top : 0px;;
     }
    .slideshow > .fade > div > div{
        display: table-cell;
        height : 300px;
        width : 500px;
        text-align: center;
        vertical-align: middle;
        background-color: greenyellow;
    }
    .slideshow > .fade > div:nth-child(even) > div {
        background-color: green;
    }
        /* image button 
        ******************************************/
        .slideshow > .button{
            position: relative;
            width : 25px;
            height : 25px;
            margin : 5px;
            display : inline-block;
            background-image: url(../player_horizontal.png);
            background-repeat: no-repeat;
        }
        .slideshow > .button.disabled{
            display : none;
        }
        .slideshow > .button.first{
            background-position: 0 0;
        }
        .slideshow > .button.previous{
            background-position: -25px 0px;
        }
        .slideshow > .button.play{
            background-position: -50px 0px;
        }
        .slideshow > .button.pause{
            background-position: -75px 0px;
        }
        .slideshow > .button.resume{
            background-position: -50px 0px;
        }
        .slideshow > .button.stop{
            background-position: -100px 0px;
        }
        .slideshow > .button.next{
            background-position: -125px 0px;
        }
        .slideshow > .button.last{
            background-position: -150px 0px;
        }
        /* end image button
        ******************************************/
        
    /* end slides
    ******************************************/

    
    /* navigation 
    ******************************************/
    .slideshow > .navigation{
        display: inline-table;
        margin : 0;
    }
    .slideshow >.navigation > div {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .slideshow > .navigation > div > *{
        float:left;
    }
    .slideshow > .navigation > div > .scroller{
        max-width : 350px;/*what you want*/
        display: inline-block;
        overflow: hidden;
    }
    
        /* navigation button
        ******************************************/
        /*customisation*/
        .slideshow > .navigation > div > .button{
            width : 25px;
            height : 25px;
            margin : 5px;
            background-image: url(../player.png);
            background-repeat: no-repeat;
            background-position: center;
        }
        .slideshow > .navigation > div > .button.scroll_first{
            background-position: 0 -25px;
        }
        .slideshow > .navigation > div > .button.scroll_previous{
            background-position: 0 0px;
        }
        .slideshow > .navigation > div > .button.scroll_next{
            background-position: -50px 0px;
        }
        .slideshow > .navigation > div > .button.scroll_last{
            background-position: -50px -25px;
        }
        /* end navigation button
        ******************************************/
        
        
        /* navigation scroller & items
        ******************************************/
        .slideshow > .navigation > div > .scroller > div {
            display: table;
            table-layout: fixed;
            width : 0;/*disable auto width*/
        }
        .slideshow > .navigation > div > .scroller > div >  a{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width : 50px;/*what you want*/
            height : 38px;/*what you want*/
            /*customisation*/
            background-color: greenyellow;
        }
        /*customisation*/
        .slideshow > .navigation > div > .scroller > div >  a:nth-child(even) {
            background-color: green;
        }
        .slideshow > .navigation > div > .scroller > div >  a.selected{
            background-color: red;
        }
        .slideshow > .navigation > div > .scroller > div >  a.scrolled{
            background-color: gray;
        }
        /* end navigation scroller & items
        ******************************************/
        
    /* end navigation
    ******************************************/
    
/* end slideshow 
******************************************/