/* http://www.menucool.com */
#thumbnail-slider {
-webkit-transform: scale(0.7);
transform:scale(0.7);
transition:transform 0.25s;
opacity:0.8;
margin:4px auto; /*center-aligned*/
width:100%;
max-width:780px;
padding:0px 40px;/*Gives room for arrow buttons*/
box-sizing:border-box;
position:relative;
-webkit-user-select: none;
user-select:none;
}
#thumbnail-slider:hover {
-webkit-transform: scale(1);
transform:scale(1);
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 {
opacity:1;
overflow:visible;
display:inline-block;
*display:inline!important; /*IE7 hack*/
border:2px solid #222;
margin:0 4px;/* Spacing between thumbs*/
box-sizing:content-box;
text-align:center;
vertical-align:middle;
padding:0;
position:relative;
list-style:none;
backface-visibility:hidden;
transition:all 0.2s;
-webkit-transform:scale(1);
transform:scale(1);
}
#thumbnail-slider ul li.active {
border-color:white;
}
#thumbnail-slider li:hover {
border-color:rgba(255,255,255,0.7);
}
#thumbnail-slider .thumb {
width:100%;
height: 100%;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
display:block;
position:absolute;
font-size:0;
}
/* --------- Captions ------- */
#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
{
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*/
}
#thumbnail-slider-prev {
left:0px; right:auto;
}
#thumbnail-slider-next {
left:auto; right: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*/
@media only screen and (max-width:736px){
#thumbnail-slider {
padding:0;
}
#thumbnail-slider-prev, #thumbnail-slider-next {
display:none;
}
}