/*
 * 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: 68px;
	height: 34px;
}
/* right arrow */
.royalSlider .arrow.right
{
	background: url(../images/slider-next-h.png) no-repeat;
	right: 0;
	width: 68px;
	height: 34px;
}




/* 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%;		
}