/*	===================== ===================== ===================== ===================== ===================== 
	STUDIO X PHOTO SLIDER
	===================== ===================== ===================== ===================== ===================== */
/*
_________________________________________________________________________________________________________________
0.	THE SLIDER:						Relative position; WIDTH is set by the site design; 
									Default HIGHT is defined automaticall and changed by jQuery.
		_____________________________________________________________
		SLIDER WRAPPER (ul):		#sxslSliderBG
_________________________________________________________________________________________________________________
1-2.THE CONTAINER OF PHOTOS:		Absolut position: TOP, LEFT and RIGHT. WIDTH AND HEIGHT are defined 
									automatically on the basis of HEIGHT/WIDTH ratio defined in the Slider Initialization
		_____________________________________________________________
		PHOTO WRAPPER:	 			#sxslPhotosBG
			PHOTO CONTAINER:		#sxslPhotosBG li
			PHOTO NOTES:			#sxslPhotosBG li div
				PHOTO NOTES H1:		#sxslPhotosBG li h1
					PHOTO NOTES a:	#sxslPhotosBG li a
				PHOTO NOTES H2:		#sxslPhotosBG li h2
_________________________________________________________________________________________________________________
3.	THE CONTAINER OF THUMPS:		From the Slider Initialization it can be absolutely positioned on the BOTTOM and RIGHT
									of the slider or anywhere OVER (Vertical/Horizontal) the Container of Photos.
									- The Basic design here (in CSS) is on the BOTTOM:
										- Define here in CSS the absolute position for BOTTOM, LEFT and RIGHT
										- HEIGHT is always defined in the Slider Initialization
										- The HEIGHT defined in the Slider Initialization has priority to that defined in the CSS
		_____________________________________________________________
		THUMPS WRAPPER (ul):		#sxslThumpsBG
			THUMPS (IMAGES): 		#sxslImages li
			THUMPS (NUMBERS):		#sxslNumbers li
_________________________________________________________________________________________________________________
4. TWO PLAYER CONTROLS:				Can be absolutelly positioned with CSS ANYWHERE within the slider.
									- Define here (in CSS) the absolute position with three of four attributes (TOP, BOTTOM, LEFT and RIGHT)
									- Define than the HEIGHT of the controllers and the two background images
									- Alternatively you can define two absolute positions (e.g. RIGHT and BOTTOM)
									  and than define both WIDTH and HEIGHT
		_____________________________________________________________
		PLAYER WRAPPER (UL):		#sxslPlayBG
			PLAYER (START/STOP):	#sxslPlayBG li				For common stules
				PLAYER (START):		#sxslPlayBG li.sxslStart	For background image
				PLAYER (STOP):		#sxslPlayBG li.sxslStop		For background image
_________________________________________________________________________________________________________________
5. THREE CONTROL ELLEMENTS:			Can be absolutelly positioned with CSS ANYWHERE within the slider
									- The same possibilities as with PLAYER CONTROLS (in point 4. above)
		_____________________________________________________________
		SHOW/HIDE NOTES:	 		#sxslToggleNotes
		NEXT SLIDE:					#sxslNext
		PREVIOUS SLIDE:				#sxslPrevious
=*/

/*	===================== ===================== ===================== ===================== 	
	0. SLIDER WRAPPER AND GENERAL STYLES
	===================== ===================== ===================== ===================== */
#sxslSliderBG { 				/* DIV - The height is initial - it is changed by jQuery */
	position: relative;
	clear:both;
	height: 340px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: #000;
	border: 1px solid #666;
/*
	box-shadow: 4px 4px 4px #000;
*/
}

#sxslSliderBG a {text-decoration: none}

#sxslSliderBG ul,
#sxslSliderBG li {				/* Styles for All ULs and LIs in the Slider */
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 100%;
}

/*	===================== ===================== ===================== ===================== 	
	1. THE PHOTO SLIDER ELEMENTS
	===================== ===================== ===================== ===================== */
#sxslPhotosBG {					/* UL - The height is defined automatically by jQuery */
    position:absolute;
    top: 2px;
    left: 2px;
    right: 2px; 
	background: #999 url('../imgPG/loading.gif') no-repeat center;
}

#sxslPhotosBG li {				/* The containers of Photos */
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-size: cover; /* contain, cover*/
	background-repeat: no-repeat;
	background-position: top center;
}

/*	===================== ===================== ===================== ===================== 
	2. THE PHOTO NOTE ELEMENTS - CONTAINS h1, h2 AND a
	===================== ===================== ===================== ===================== */
#sxslPhotosBG li div {			/* Can by positioned anywhere within the photo container */
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: left;
	padding: 5px;
	background: #222;
	border: 1px solid #000;
	opacity: 0.6;
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	filter:alpha(opacity=60);
	border-radius: 0;
}
#sxslPhotosBG li div:hover {
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	filter:alpha(opacity=100);
}

#sxslPhotosBG li h1,
#sxslPhotosBG li a,
#sxslPhotosBG li h2 {
	font-family: "Lucida Sans Unicode", "Lucida Sans", tahoma; 
	color: #ccc; 
	font-size: 17px; 
	padding: 0; 
	margin: 0 0 10px 0;
}
#sxslPhotosBG li a:hover {color: #06d;}
#sxslPhotosBG li h2 {margin: 0; font-size: 14px;}


/*	===================== ===================== ===================== ===================== 
	3. THUMPS - SLIDER NAVIGATION
	===================== ===================== ===================== ===================== */
#sxslThumpsBG {					/* Div arround ULs - The THUMPS WRAPER */
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	background: #000;
	opacity: 0.6;
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	filter:alpha(opacity=60);
	text-align: center;
	padding: 0 auto;
	z-index: 200;
}
#sxslThumpsBG:hover {
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	filter:alpha(opacity=100);
}

#sxslThumpsBG div {
    float: left;
    position: relative;
    left: 50%;
}

#sxslThumpsBG ul {
    float: left;
    position: relative;
    left: -50%;
}

#sxslImages li {					/* THUMPS for images transformed to float for bottom thumps*/
	display: none;
	cursor: pointer;
	background-size: cover; /* contain, cover*/
	background-repeat: no-repeat;
	background-position: top center;
	border: 1px solid #444;
	border-top: 6px solid #444;
	margin: 1px 0;
} 
#sxslImages li.selected {
	border-top: 6px solid #03d;
	border-bottom: 3px solid #03d;
}

#sxslNumbers li {					/* THUMPS for numbers */
	display: none;
	font-family: verdana;
	line-height: 200%;
	cursor: pointer;
	background: url('../imgPG/grad60WT.png') left bottom repeat-x;
	border: 2px solid #666;
	color: #fff;
	border-radius: 50%;
	margin-top: 2px;
} 
#sxslNumbers li.selected {
	color: #000;
	background-color: #eee;
}


/*	===================== ===================== ===================== ===================== 
	4. THE PLAYER - TO START AND STOP THE SLIDER
	===================== ===================== ===================== ===================== */
#sxslPlayBG {					/* UL */
	position: absolute;
	right: 3px;
	bottom: 5px;
	text-align: center;
	z-index: 400;
}
#sxslPlayBG li {
	width: 30px;
	height: 22px;
	cursor: pointer;
}
#sxslPlayBG li.sxslStart {
	display: none;
	background-image: url('../imgPG/arrowsNav.png');
	background-position: left -42px;
	background-repeat: no-repeat;
}
#sxslPlayBG li.sxslStop {		/* STOP is displayed, as slider always starts automatically */
	display: block; 
	background-image: url('../imgPG/arrowsNav.png');
	background-position: right -42px;
	background-repeat: no-repeat;
}

/*	===================== ===================== ===================== ===================== 
	5. THREE CONTROLLERS - PREVIOUS and NEXT SLIDE - SHOW/HIDE NOTES; 
	===================== ===================== ===================== ===================== */
#sxslPrevious,
#sxslNext {
	position: absolute;
	display: none;
	top: 20px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	opacity: 0.6;
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	filter:alpha(opacity=60);
	z-index: 400;
}

#sxslPrevious {left: 10px; background: url('../imgPG/arrowsNav.png') no-repeat left top;}
#sxslNext {right: 10px; background: url('../imgPG/arrowsNav.png') no-repeat right top;}

#sxslPrevious:hover,
#sxslNext:hover {
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	filter:alpha(opacity=100);
}

#sxslToggleNotes {			/* SHOW/HIDE NOTES, initialized automatically, can be diselected from Slider Initializatio */
	position: absolute;
	display: none;
	width: 20px;
	text-align: center;
	font-family: "times new roman";
	font-weight: bold;
	font-size: 18px;
	font-style: italic;
	color: #999;
	background: #000;
	cursor: pointer;
	opacity: 0.6;
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	filter:alpha(opacity=60);
	z-index: 400;
}
#sxslToggleNotes:hover {
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	filter:alpha(opacity=100);
}

/*	end
******************************/