/**
 * Itemslider
 */



/* Necessary styles
-------------------------------------------------------------- */
.itemslider {margin: 0; padding: 0;}
.itemslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.itemslider .slides img {max-width: 100%; display: block;}
.pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.itemslider .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .itemslider .slides {display: block;}
* html .itemslider .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .itemslider .slides > li:first-child {display: block;}


/* Item slider styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Style: default
-------------------------------------------------------------- */
.itemslider { margin:0 auto; position:relative; zoom:1; }
.itemslider .slides { zoom:1; }
.itemslider .slides > li { position:relative; }
.itemslider .slides img { margin:0 auto; /* To center image which has "display:block" */ }

/* Style: horizontal
-------------------------------------------------------------- */
.itemslider-horizontal { margin:0 auto 20px; }
.itemslider-horizontal .slides > li { padding-left:10px; padding-right:10px; }

/* Style: vertical
-------------------------------------------------------------- */
.itemslider-vertical { padding-top:20px; }


/* Item slider mode
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Quantized number of visible items
-------------------------------------------------------------- */

/* Default size slider */
.itemslider-q { max-width:940px; } /* Default width: space for max 5 items */

	/* Narrow slider - override default width */
	.narrow-slider .itemslider-q { max-width:564px; } /* Space for max 3 items */

/* Width of the slider depends on the number of items */
.itemslider-q.count-1 { max-width:188px; } /*1*/
.itemslider-q.count-2 { max-width:376px; } /*2*/
.itemslider-q.count-3 { max-width:564px; } /*3*/
.itemslider-q.count-4 { max-width:752px; } /*4*/

/* Narrow slider - override width if 4 items */
.narrow-slider .itemslider-q.count-4 { max-width:564px; } /*3*/

/* Narrow slider - full definition */
/*.narrow-slider .itemslider-q { max-width:564px; }
.narrow-slider .itemslider-q.count-1 { max-width:188px; }
.narrow-slider .itemslider-q.count-2 { max-width:376px; }*/

/* NEW slider
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.itemslider-x			{ max-width:940px; }
.itemslider-x.count-1	{ max-width:188px; } /*1*/
.itemslider-x.count-2	{ max-width:376px; } /*2*/
.itemslider-x.count-3	{ max-width:564px; } /*3*/
.itemslider-x.count-4	{ max-width:752px; } /*4*/
.itemslider-x.count-5	{ max-width:940px; } /*5*/
.itemslider-x.count-6	{ max-width:1128px; } /*6*/
.itemslider-x.count-7	{ max-width:1316px; } /*7*/
.itemslider-x.count-8	{ max-width:1504px; } /*8*/

/* Inside column 3/4 */
/* TODO: needed?
.in-col2-main .itemslider-x			{ max-width:752px; }
.in-col2-main .itemslider-x.count-1	{ max-width:188px; }
.in-col2-main .itemslider-x.count-2	{ max-width:376px; } 
.in-col2-main .itemslider-x.count-3	{ max-width:564px; }
.in-col2-main .itemslider-x.count-4	{ max-width:752px; }
.in-col2-main .itemslider-x.count-5	{ max-width:940px; }
.in-col2-main .itemslider-x.count-6	{ max-width:1128px; }
.in-col2-main .itemslider-x.count-7	{ max-width:1316px; } 
.in-col2-main .itemslider-x.count-8	{ max-width:1504px; }
*/



/* Direction navigation
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.itemslider .direction-nav { height:0; text-align:center; }


/* Utility classes
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.more-views {
    position: relative;
}
.more-views .next ,.more-views .prev, .nav-pre, .nav-next  {
    transition:			background-color 100ms ease-in-out, background-position 100ms ease-in-out;
	-moz-transition:	background-color 100ms ease-in-out, background-position 100ms ease-in-out;
	-webkit-transition:	background-color 100ms ease-in-out, background-position 100ms ease-in-out;
	-o-transition:		background-color 100ms ease-in-out, background-position 100ms ease-in-out;
    text-indent: -9999px;
    width: 20px;
    height: 40px;
    border: none;
    position: absolute;
    top: 45px;
}
.more-views .next, .nav-next { 
    background: url("../../../images/cmsmart/colorproduct/colorbox/slider-arrows.png") no-repeat scroll -62px -5px ;    
    right: -20px;
}
.more-views .next:hover , .nav-next:hover{ 
    cursor: pointer;
    background-position:-62px -52px; background-color:#666666;  
    
}
.more-views .prev , .nav-pre { 
    background: url("../../../images/cmsmart/colorproduct/colorbox/slider-arrows.png") no-repeat scroll -16px -5px ;    
    left: -20px;
}
.more-views .prev:hover , .nav-pre:hover{ 
    cursor: pointer;
    background-position:-16px -52px; background-color:#666666;
   
}

.more-views .prev.disabled, .more-views .next.disabled, .nav-pre.disable, .nav-next.disable {
    cursor: default;
}

.more-views .prev.disabled, .nav-pre.disable {
    background-position:-16px -100px !important;
}

.more-views .prev.disabled:hover, .nav-pre.disable:hover {
    background-position:-16px -100px !important;
    background-color:#fff;
}

.more-views .next.disabled, .nav-next.disable {
    background-position:-60px -100px !important;
}

.more-views .next.disabled:hover, .nav-next.disable:hover {
    background-position:-60px -100px !important;
    background-color:#fff;
}

.nav-pre, .nav-next 
{
    top: 202px !important;
    z-index: 9;   
}

.nav-pre
{
    left: -21px !important;    
}

.nav-next
{
    right: -21px !important;  
}