/*
 * Royal Slider  v2.0
 *
 * Copyright 2011, Dmitry Semenov
 * 
 * August 2011
 */
 
 /* Royal Slider styles */
.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 crop 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;	
	
	/* slide image config */
	background-repeat:no-repeat;
	background-position:center center;


}

/* Direction Navigation (arrows) */
.royalSlider .arrow
{	
	background:url(../img/controlsSprite.png) no-repeat 0 0;
	width: 45px;
	height: 90px;
	top:155px;
	
	cursor: pointer;
	display: block;
	position: absolute;		
	z-index: 25;
	/*text-align:center;*/
	
	opacity: .75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	-khtml-opacity: .75;
	-moz-opacity: .75;
}
.royalSlider .arrow:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-khtml-opacity: 1;
	-moz-opacity: 1;
}
/* left arrow */
.royalSlider .arrow.left
{
	background-position: top left;
	left: 0px;	
}
/* right arrow */
.royalSlider .arrow.right
{
	background-position: top right;
	right: 0px;
}


/* Control navigation, bullets, thumbs (1,2,3...)*/ 
.royalControlNavContainer {
	float: left;
	position: relative;
	left: 50%;
	
}
/* This container is inside ".royalControlNavContainer"  
   and is used for auto horizontal centering */
.royalControlNavCenterer {	
	float: left;
	position: relative;
	left: -50%;
}
/* used for horizontal centering */
.royalSlider .royalControlNavOverflow {
	width:100%;
	overflow:hidden;
	position:absolute;
	margin-top:-20px;
}
/* Control navigation Item */
.royalControlNavContainer a{	
	background: url('../img/controlsSprite.png') no-repeat 0 -149px transparent;
	width:17px;
	height:17px;
	
	
	float:left;	
	cursor:pointer;	
	
	position:relative;
	display:block;

	
	opacity: .8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-khtml-opacity: .8;
	-moz-opacity: .8;
	
}
/* Control nav container, with thumbs */
.royalControlNavOverflow.royalThumbs {	
	margin-top:4px !important;
}
/* Current(active) control navigation item */
.royalControlNavContainer a.current {	
	background-position: 0 -183px !important;
}

/* Control nav thumb style */
.royalControlNavContainer a.royalThumb{	
	background: none no-repeat 0 0;
	width:128px;
	height:60px;	
	background-position: 0 0 !important;
	margin:0 2px;
}
/* Control nav current thumb style */
.royalControlNavContainer a.royalThumb.current {	
	background-position: -3px -3px  !important;
	border:3px solid #779f4f;
	width:122px;
	height:54px;
	
	-ms-filter: "alpha(opacity=100)";
	-khtml-opacity: 1;
	-moz-opacity: 1;	
}


.royalControlNavContainer a:hover {	
	background-position: 0 -166px;	
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-khtml-opacity: 1;
	-moz-opacity: 1;
}






/* Captions container */
.royalSlider .royalCaption {
	z-index:20;
	display:block;
	position:absolute;	
	font: normal normal normal 1em/1.5em Georgia, serif;
	color:white;	
	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;
}