/* Slider itself */
.royalSlider.default {  
    
}
/* Slider with thumbs (used to add padding based on thumbnails size)*/
.royalSlider.default.with-thumbs {
    padding-bottom: 68px;
}

/* 
    Left and right navigation arrows    
*/
.royalSlider.default .arrow
{   
    background: rgb(50, 50, 50);
    background: rgba(0, 0, 0, 0.5);
    
    background-image:url(controls-sprite.png);

    /* change arrows size here */
    width: 30px;
    height: 30px;
    margin-top:-15px;   
    
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;   
}
/* arrow position in slider with thumbs */
.royalSlider.default.with-thumbs .arrow {
    margin-top:-49px;
}
/* Arrow down state */
.royalSlider.default .arrow:active {    
    background-color: rgba(0,0,0,0.6);
}
/* Arrow hover state */
.royalSlider.default .arrow:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1; 
}
/* Arrow disabled state */
.royalSlider.default .arrow.disabled {  
    background-color: rgba(0,0,0,0.5) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
    filter: alpha(opacity=20) !important;
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;   
}
/* left arrow */
.royalSlider.default .arrow.left {
    background-position: top left;
    left: 5px;  
}
/* right arrow */
.royalSlider.default .arrow.right {
    background-position: top right;
    right: 5px;
}





/* 
    Bullets and thumbnails navigation   
*/
.royalSlider.default .royalControlNavOverflow a {   
    background-color: transparent;
    background-image: url(controls-sprite.png);
    background-position: 0 -164px;
    
    width:18px;
    height:18px;            
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
/* Current bullet */
.royalSlider.default .royalControlNavOverflow a.current {   
    background-position: 0 -182px !important;
}
/* Bullet hover state */
.royalSlider.default .royalControlNavOverflow a:hover {     
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

/* Bullets nav sub-container */
.royalSlider.default .royalControlNavCenterer { 
    padding:3px 5px;
}
/* Bullets nav or thumbnails main container */
.royalSlider.default .royalControlNavOverflow {
    margin-top:0px;
}
/* Thumbnails main container */
.royalSlider.default .royalControlNavOverflow.royalThumbs { 
    margin-top:4px; 
}

/* Thumbnails */
.royalSlider.default .royalControlNavOverflow a.royalThumb{ 
    background-color: transparent;  
    background-position: 0 0;
    
    width:60px;
    height:60px;    
    /* thumbnails spacing, use margin-right only */ 
    margin-right:4px;
        
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1; 
}
/* Current thumbnail */
.royalSlider.default .royalControlNavOverflow a.royalThumb.current {    
    background-position: -3px -3px  !important;
    border:3px solid #666 !important;
    width:54px;
    height:54px;
}
/* Thumbnail hover state*/
.royalSlider.default .royalControlNavOverflow a.royalThumb:hover {  
    background-position: -3px -3px; 
    border: 3px solid #AAA;
    width: 54px;
    height: 54px;
}



/* 
    Thumbnails navigation arrows    
*/
.royalSlider.default .thumbsArrow {
    background:url(controls-sprite.png) no-repeat 0 0;
    width: 28px;
    height: 68px;   
    
    
    -moz-opacity: 0.8;  
    opacity: 0.8;   
}
.royalSlider.default .thumbsArrow.left {
    background-position: -116px -132px;
    left: 0;    
}
.royalSlider.default .thumbsArrow.right {
    background-position: -156px -132px;
    right: 0
}
.royalSlider.default .thumbsArrow:hover  {  
    -moz-opacity: 1;    
    opacity: 1; 
}
.royalSlider.default .thumbsArrow.disabled {    
    -moz-opacity: 1;    
    opacity: 1; 
}
.royalSlider.default .thumbsArrow.left.disabled {   
    background-position: -36px -132px;
}
.royalSlider.default .thumbsArrow.right.disabled {  
    background-position: -76px -132px;
}