/*
 * Royal Slider  v5.0
 *
 * Copyright 2011, Dmitry Semenov
 * 
 * August 2011
*/

/*  

RoyalSlider

*/
.royalSlider {	
    position:relative;
    /* set width and height of slider here, in px, % or em*/
    width:670px;
    height:275px;
    /* Used to prevent content "jumping" on page load. this property is removed when javascript is loaded and slider is instanciated */
    overflow:hidden; 
}



/* 

Slides croped area

*/
.royalSlider .royalWrapper {
    overflow:hidden;	
    position:relative;

    background: #2D2D2D url(../img/sliderBG.png) repeat-x top left;

    width:100%; 
    height:100%;
}

/* slides holder, grabbing container */
.royalSlider .royalSlidesContainer {
    position: relative;
    left: 0;
    top: 0;	
    list-style:none;
    margin:0;
    padding:0;
}


/* slide item */
.royalSlider .royalSlide{
    padding:0;
    margin:0;	

    position:relative;
    float:left;	

    overflow:hidden;	
}

/* 

        Direction Navigation (arrows) 

*/
.royalSlider .arrow
{	
    background:url(../img/controlsSprite.png) no-repeat 0 0;

    /* change arrows size here */
    width: 45px;
    height: 90px;

    top:44%;	

    cursor: pointer;
    display: block;
    position: absolute;		

    z-index:25;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;	
}
.royalSlider .arrow:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;	
}
.royalSlider .arrow.disabled
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;	
}
/* left arrow */
.royalSlider .arrow.left
{
    background: url(../images/slider-prev-h.png) no-repeat;
    width: 50px;
    height: 50px;
}
/* right arrow */
.royalSlider .arrow.right
{
    background: url(../images/slider-next-h.png) no-repeat;
    right: 0;
    width: 50px;
    height: 50px;
}




/* Control navigation container (bullets or thumbs) */
.royalSlider .royalControlNavOverflow {
    width:100%;
    overflow:hidden;
    position:absolute;
    margin-top:-20px;
}
/* This container is inside ".royalControlNavContainer"  
   and is used for auto horizontal centering */
.royalControlNavCenterer {	
    float: left;
    position: relative;
    left: -50%;
}
/* Control navigation container*/ 
.royalControlNavContainer {
    float: left;
    position: relative;
    left: 50%;	
}

/* Scrollable thumbnails containers */
.royalSlider .royalControlNavOverflow.royalThumbs {	
    margin-top:4px;
    height:80px;
}
.royalSlider .royalControlNavThumbsContainer {		
    left:0;
    position:relative;
}






/* 

        Control navigation (bullets, thumbnails)
        
*/
.royalControlNavOverflow a{	
    background: url('../img/controlsSprite.png') no-repeat 0 -149px transparent;
    width:17px;
    height:17px;	

    float:left;	
    cursor:pointer;	

    position:relative;
    display:block;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
/* Current control navigation item */
.royalControlNavOverflow a.current {	
    background-position: 0 -183px !important;
}
/* Hover state navigation item */
.royalControlNavOverflow a:hover {	
    background-position: 0 -166px;	
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;	
}

/* Thumbnails */
.royalControlNavOverflow a.royalThumb{	
    background: none no-repeat 0 0;
    background-color:#CCC;
    width:144px; /* best is 144 + spacing(margin-right) 4*/
    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;	
}
.royalControlNavOverflow a.royalThumb.current {	
    background-position: -3px -3px  !important;
    border:3px solid #779f4f !important;
    width:138px;
    height:54px;
}
.royalControlNavOverflow a.royalThumb:hover {	
    background-position: -3px -3px;	
    border:3px solid #777;
    width:138px;
    height:54px;
}



/* 

        Thumbnails navigation arrows 
        
*/
.royalSlider .thumbsArrow {
    background:url(../img/controlsSprite.png) no-repeat 0 0;
    width: 38px;
    height: 68px;


    cursor: pointer;
    display: block;
    position: absolute;		
    z-index: 25;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;	
}
.royalSlider .thumbsArrow.left {
    background-position: -116px -132px;
    left: 0;	
}
.royalSlider .thumbsArrow.right {
    background-position: -156px -132px;
    right: 0
}
.royalSlider .thumbsArrow:hover  {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;	
}
.royalSlider .thumbsArrow.disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;	
}






/* Captions container */
.royalSlider .royalCaption {
    z-index:20;
    display:block;
    position:absolute;	
    left:0;
    top:0;
    font: normal normal normal 1em/1.5em Georgia, serif;
    color:#FFF;	
    white-space: nowrap;	 
}
/* Caption item */
.royalSlider .royalCaptionItem {
    clear:both;
    font-size:2em;	
    line-height:1.5em;
    position:relative;	
    margin:0;
}



/* Loading (welcome) screen */
.royalSlider .royalLoadingScreen {
    background:#FFF;
    width:100%;
    height:100%;
    position:absolute;
    z-index:99;	
}
/* Loading screen text ("Loading...") */
.royalSlider .royalLoadingScreen p {		
    width:100%;
    position:absolute;	
    margin:0 auto;
    top: 45%;
    text-align:center;
}

/* single image preloader ("Loading image...") text can be changed in JS file*/
.royalSlider .royalPreloader {
    font: normal normal normal 0.8em/1.5em Georgia, serif;
    color:#DDD;	
    position:absolute;
    width:100%;
    text-align:center;
    top:46%;		
}