/* 
    Document   : slider.css
    Author     : jackh
    Description:
        Gallery with thumbnails.
*/

/* Import base css*/
@import url("./js/slider_base.css");

/**
--------------------------------------
Slider css
--------------------------------------
*/

.xpro-slider {    
    float:left;
    border:#000000 1px solid;
    margin-bottom:5px;
}

.xpro-slider-item {    
    background-color: #282828;
    text-align:center;
}

.xpro-slider-info {
    color:#ffffff;    
}

/**
--------------------------------------
Video Item
--------------------------------------
*/

.xpro-video-item {
    position:relative;
    height:100%;
}

.xpro-video-play {
    width: 48px;
    height: 48px;
}
/**
--------------------------------
Thumbnail style
--------------------------------
*/

.xpro-thumbnails {    
    width:100%;
    height:100px;
    position: relative;
    border:#000000 1px solid;
    padding:0px;
    overflow:hidden;
    background-color: #000000;
    clear:both; /*needed to force thumbnails down below slider*/
    text-align: left;
}

.xpro-thumb-content {
    white-space: nowrap;
    position:absolute;
}

.xpro-thumb-item {
    position: relative;
    display: inline-block;
    overflow:hidden;
    opacity:0.4;
    width:118px; height:98px;
    cursor: pointer;
    border-right:#000000 1px solid;
    padding: 0px;
    background-image: none;
    margin: 0px;
    
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
    -o-transition: all 0.6s;
}

.xpro-thumb-selected {
    opacity: 1;
    /*background-color: #00ff00;*/
    border: #ffffff 1px solid;
}

.xpro-thumb-item img {
    width:100%;
    height:100%;
}

/*Vertical Thumbnails*/
.xpro-vert-thumbnails {
    width:320px;
    height:370px;
    float:right;
    border-right:none;
    line-height: 15px;
    margin-top: 0px;
    clear:none; /*needed to make thumbnails side by side with slider*/
}

.xpro-vert-thumbnails .xpro-thumb-content {
    white-space: normal;
    width:100%;
    height: auto;
}
.xpro-vert-thumbnails .xpro-thumb-item {
    display:block;
    border: none;
    width:100%;
    padding: 5px;
    color: #ffffff;
    font-size: 12px;
    height:100px;
    background-color:#282828;
}

.xpro-vert-thumbnails .xpro-thumb-item img {
    width:120px;
    float:left;
    margin-right:10px;
}

.xpro-vert-thumbnails .xpro-thumb-selected {
    background-color:#ffffff;
    color: #000000;
    border: none;
}
/*---------------------*/

.xpro-thumb-nav {
    width:25px;
    height:100%;
    background-repeat:no-repeat;
    background-position: center center;
    z-index:999999;
    position:absolute;
    cursor: pointer;
    opacity: 0;
    background-color:#383838;
    
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
    -o-transition: all 0.6s;
}

.xpro-thumb-nav-selected {
    opacity: 1;
    background-color:rgba(56,56,56,0.4);
}

/**
--------------------------------
Navigation
--------------------------------
*/

.xpro-slider-nav {
    background-color: transparent;
}

.xpro-vertical-slider .xpro-slider-nav {
    width:80px;
    height:40px;
}

/* nav show when hover over slider */
.xpro-slider-nav-selected {
    opacity:1;
}

/* nav style when hover over the nav itself */
.xpro-slider-nav-hover {    
    background-color: rgba(200,0,0,0.5);
}