/* -------------------------------------------------------------------------- */
/* s3slider slideshow */
#s3slider {
	width: 300px;
	/* important to be same as image width */
	height: 430px;
	/* important to be same as image height */
	position: relative;
	/* important */
	overflow: hidden;
	/* important */
	
	padding-left: 50px;
}

#s3sliderContent {
	width: 300px;
	/* important to be same as image width or wider */
	position: absolute;
	/* important */
	top: 0;
	/* important */
	margin-left: 0;
	/* important */
}

.s3sliderImage {
	float: left;
	/* important */
	position: relative;
	/* important */
	display: none;
	/* important */
}

.s3sliderImage a span { text-decoration: none; }

.s3sliderImage a:hover, 
.s3sliderImage a:hover span {
	color: #fff;
	text-decoration: none;
}

.s3sliderImage span {
	position: absolute;
	/* important */
	left: 0;
	padding: 12px 14px 12px 24px;
	width: 300px;
	background-color: transparent;
	filter: alpha(opacity=70);
	/* here you can set the opacity of box with text */
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	color: #FFFFCC;
	display: none;
	/* important */
	top: 0;
	/*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage span { 
	font-size: 1.2em;
	line-height: 1.1em;
	font-weight: normal;
	letter-spacing: .06em; 
	text-transform: lowercase; 
}

.s3sliderImage span em { color: #999; padding: 0 0 0 2px; }

.s3sliderImage div.arrow {
	font-size: 1.3em;
	text-align: right;
	display: inline;
	position: absolute;
	left: 80%;
	bottom: 12px;
}