/*  
 
 RoyalSlider
 
 */
.royalSlider {
    position: relative;
    /* set width and height of slider here, in px, % or em*/
    width: 600px;
    height: 300px;
    /* Used to prevent content "jumping" on page load. this property is removed when javascript is loaded and slider is instanciated */
    overflow: hidden
    }
/**
*  Slides area (set background here)
*/
.royalSlider .royalWrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
    }
.royalSlider .royalSlide, .royalSlider .royalWrapper {
    /* Bakground behind slides */
    }
/* slides holder, grabbing container */
.royalSlider .royalSlidesContainer {
    position: relative;
    left: 0;
    top: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important
    }
/* slide item */
.royalSlider .royalSlide {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    list-style: none !important;
    position: relative;
    float: left;
    overflow: hidden
    }
/* 

	Direction Navigation (arrows) 

*/
.royalSlider .arrow {
    /*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
    background-color: #C00;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* change arrows size here */
    width: 45px;
    height: 90px;
    top: 50%;
    margin-top: -45px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 25
    }
/* left arrow */
.royalSlider .arrow.left {
    background-position: top left;
    left: 0
    }
/* right arrow */
.royalSlider .arrow.right {
    background-position: top right;
    right: 0
    }
/* Control navigation container (bullets or thumbs) */
.royalSlider .royalControlNavOverflow {
    width: 100%;
    overflow: hidden;
    position: absolute;
    margin-top: -20px;
    z-index: 25
    }
/* This container is inside ".royalControlNavContainer"  
   and is used for auto horizontal centering */
.royalSlider .royalControlNavCenterer {
    float: left;
    position: relative;
    left: -50%
    }
/* Control navigation container*/
.royalSlider .royalControlNavContainer {
    float: left;
    position: relative;
    left: 50%
    }
/* Scrollable thumbnails containers */
.royalSlider .royalControlNavThumbsContainer {
    left: 0;
    position: relative
    }
.royalSlider .thumbsAndArrowsContainer {
    overflow: hidden;
    width: 100%;
    position: relative
    }
.royalSlider .royalControlNavOverflow.royalThumbs {
    width: auto;
    position: relative;
    overflow: hidden;
    margin-top: 4px
    }
/* 

	Control navigation (bullets, thumbnails)
	
*/
.royalSlider .royalControlNavOverflow a {
    background: #0C0 none no-repeat scroll 0 0;
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    position: relative;
    display: block;
    text-indent: -9999px
    }
/* Current control navigation item */
.royalSlider .royalControlNavOverflow a.current {
    background-color: #C00
    }
/* Hover state navigation item */
.royalSlider .royalControlNavOverflow a:hover {
    background-color: #00C
    }
/* Thumbnails */
.royalSlider .royalControlNavOverflow a.royalThumb {
    /*background: none no-repeat 0 0;*/
    /*background-color: ;*/
    width: 144px;
    height: 60px;
    /* thumbnails spacing, use margin-right only */
    margin-right: 4px
    }
.royalSlider .royalControlNavOverflow a.royalThumb.current {
    background-position: -3px -3px !important;
    border: 3px solid #C00 !important;
    width: 138px;
    height: 54px
    }
.royalSlider .royalControlNavOverflow a.royalThumb:hover {
    background-position: -3px -3px;
    border: 3px solid #00C;
    width: 138px;
    height: 54px
    }
/* 

	Thumbnails navigation arrows 
	
*/
.royalSlider .thumbsArrow {
    width: 38px;
    height: 68px;
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 25;
    background: #C99
    }
.royalSlider .thumbsArrow.left {
    float: left
    }
.royalSlider .thumbsArrow.right {
    float: right
    }
/* 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;		*/
    }
/* Caption item */
.royalSlider .royalCaptionItem {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 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 slide image preloader */
.royalSlider .royalPreloader {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    z-index: 0;
    background-image: url(../img/preloader.gif)
    }
.royalSlider .grab-cursor {
    cursor: move
    }
.royalSlider .grab-cursor {
    cursor: 8 8, -moz-grab
    }
/* ie8 hack */
.royalSlider .grabbing-cursor {
    cursor: move
    }
.royalSlider .grabbing-cursor {
    cursor: url(../img/cursors/grabbing.png) 8 8, -moz-grabbing
    }
/* Cursor used if mouse dragging is disabled */
.royalSlider .auto-cursor {
    cursor: auto
    }
.royalSlider .royalHtmlContent {
    position: absolute;
    top: 0;
    left: 0
    }
.royalSlider .non-draggable {
    cursor: auto
    }
.royalSlider .fade-container .royalSlide {
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 10
    }
.royalSlider .royalImage {
    max-width: none;
    margin: 0;
    padding: 0 !important;
    border: 0 !important
    }