/* http://www.menucool.com */

#thumbnail-slider {                 /* the main thumbnail slider that contains the thumbnail images */
    -webkit-transform: scale(-0.8, 0.8);  /*  the size of the thumbnail container when not mouse-over */
    transform:scale(-0.8, 0.8);           /* -webkit-transform: default value is "0.7" for moving from RIGHT to LEFT */
    transition:transform 0.25s;     /* -webkit-transform: default value is "0.7" for moving from RIGHT to LEFT */
    opacity:1;                      /* this can be set 0.8 or other value to make the thumbnails less prominent */

    margin:140px auto 0px auto;                /* center-aligned */
    top: 30px;
    width:660px;
    /*  max-width:660px;  max-height:440px; */  /* change this width accordingly to the same width of code "line 49" in the "ninja-slider.css" */
    padding:0px 30px;               /* Gives room for arrow buttons.  Default is "40px". Changes to this value need cooresponding minus values to lines 136 and 140 */
    box-sizing:border-box;
    position:relative;      
    /* position:absolute;  top:10%;  */
    -webkit-user-select: none;
    user-select: none;              /* this is for user to select the text in the element. So understandablty set to "none" */
    z-index: 100;                    /* this needs to be set to be higher so the thumbnail div is above the image div  */
    /* display: none ;  */
}

#thumbnail-slider:hover {           /*  the size and opacity of the thumbnail silder container when mouse-over */
    -webkit-transform: scale(-1.0. 1.0);    /* For moving from RIGHT to LEFT, put back to default value "scale(0.9)"  */
    transform:scale(-1.0, 1.0);             /* For moving from RIGHT to LEFT, put back to default value "scale(0.9)"  */
    opacity:1;
}


#ninja-slider.fullscreen #thumbnail-slider {
    width:90%;
    max-width:1120px;
}

#thumbnail-slider div.inner {
    /*the followings should not be changed */
    position:relative;
    overflow:hidden;
    padding:2px 0;
    margin:0;
}

 
#thumbnail-slider div.inner ul {

    /*the followings should not be changed */
    white-space:nowrap;
    position:relative;
    left:0; top:0;
    list-style:none;
    font-size:0;
    padding:0;
    margin:0;
    float:left!important;
    width:auto!important;
    height:auto!important;
}

#thumbnail-slider ul li {  /*  the specs of the thumbnail images when NOT mouse-over */
    opacity:1;
    overflow:visible;
    display:inline-block;
    *display:inline!important;  /* IE7 hack */
    border:2px solid grey;      /* Border color of all the thumbanil images on the slider is to be assigned here */
    margin:7px 4px 0 4px;       /* Spacing between thumbs. The 7px here should be in the same 1:1.2 ratio to the 6px of margin on line 80 below to avoid bumpy sliding of the thumbnail image slider */
    box-sizing:content-box;
    
    text-align:center;
    vertical-align:bottom;      /* middle, top or bottom */
    padding:0;
    position:relative;
    list-style:none;
    backface-visibility:hidden;

    transition:all 0.2s;
    -webkit-transform:scale(1);     /* -webkit-transform: scaleX(-1) should be used if thumbnail images to slide from LEFT to RIGHT */
    transform:scale(1);             /* -webkit-transform: scaleX(-1) should be used if thumbnail images to slide from LEFT to RIGHT */
}

/*  The section below is for the thumbnail images highlighted with white border around of the image on show  */
#thumbnail-slider ul li.active {
    border-color:white;             /* border color of the thumbanil images on show can be changed here */
    -webkit-transform:scale(1.3);   /* -webkit-transform: scaleX(-1.2) should be used if thumbnail images to slide from LEFT to RIGHT */
    transform:scale(1.3);           /* -webkit-transform: scaleX(-1.2) should be used if thumbnail images to slide from LEFT to RIGHT */
    margin: 6px 12px 6px 12px;      /* the margin applies to the thumbnail container, not the thumbnail image */
    padding:0px 0px 0px 0px;        /* the padding applies to the thumbnail image itself, not the container */
}

#thumbnail-slider li:hover {        /* change of border color of the thumbnail image on the slider being mouse-over-ed  */
    border-color:rgba(255,255,255,0.7);
}


#thumbnail-slider .thumb {
    width:100%;
    height: 100%;
    -webkit-transform:scaleX(-1);   /* Disable this line for thumbnail images rotating from RIGHT to LEFT set above in lines 4 & 5 */
    transform:scaleX(-1);           /* Disable this line for thumbnail images rotating from RIGHT to LEFT set above in lines 4 & 5 */
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    display:block;
    position:absolute;
    font-size:0;
}


/* --------- Captions ------- */  /*  the text on top of the thumbnail images */
#thumbnail-slider li > span {
    position:absolute;
    color:rgba(255,255,255,0.7);
    font-size:22px;
    bottom:2px;
}


/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */

#thumbnail-slider-pause-play {display:none;}    /*.pause*/

#thumbnail-slider-prev, #thumbnail-slider-next  /* the 2 x arrows on both sides of the thumbnail slider for "previous" and "next" */
{
    position: absolute;
    background-color:none;
    width:40px;
    height:50px;
    line-height:50px;
    top: 50%;
    margin:0;
    margin-top:-25px;
    color:white;
    z-index:10;
    cursor:pointer;
    opacity:1;
    *background-color:#ccc;     /* IE7 hack */
    /*  display: none;  */      /* set to NONE if "Prev" & Next" are not desired */
}

#thumbnail-slider-prev {
    left:-14px; right:auto;     /* Minus value moves the Prev arrow further to left, default value is "0px" */
}

#thumbnail-slider-next {
    left:auto; right:-10px;     /* Minus value moves the Next arrow further to right, default value is "0px"  */
}
#thumbnail-slider-next.disabled, #thumbnail-slider-prev.disabled {
    opacity:0.3;
    cursor:default;
}

/* arrows */
#thumbnail-slider-prev::before, #thumbnail-slider-next::before {
    position: absolute;
    top: 15px;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-left: 3px solid #DDD;
    border-top: 3px solid #DDD;
}

#thumbnail-slider-prev::before {
    left:14px;
    -ms-transform:rotate(-45deg);/*IE9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
}

#thumbnail-slider-next::before {
    right:14px;
    -ms-transform:rotate(135deg);/*IE9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
}

/* Responsive settings -- for mobile devices etc */
@media only screen and (max-width:736px){
    
    #thumbnail-slider {
        padding:0;
    }

    #thumbnail-slider-prev, #thumbnail-slider-next {
        display:none;
    }
}