#slider {
	width: 405px;
	/* important to be same as image width */
	height: 300px;
	/* important to be same as image height */
	position: relative;
	/* important */
	overflow: hidden;
	/* important */
}

#slider1 {
	width: 400px;
	/* important to be same as image width */
	height: 100px;
	/* important to be same as image height */
	position: relative;
	/* important */
	overflow: hidden;
	/* important */
}

#sliderContent {
	width: 405px;
	position: absolute;
	top: 0;
	margin-left: 0;
}

#slider1Content {
	width: 400px;
	position: absolute;
	top: 0;
	margin-left: 0;
}

.sliderImage, .slider1Image, .slider2Image {
	float: left;
	position: relative;
	display: none;
}

.sliderImage span {
	position: absolute;
	/* important */
	left: 3px;
	font-size: 1.5em;
	padding: 10px 14px 12px 24px;
	width: 405px;
	background-color: #000;
	filter: alpha(opacity=80);
	/* here you can set the opacity of box with text */
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	color: #fff;
	display: block;
	/* important */
	top: 0px;
	/*
       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
   */
   
}

.slider1Image span {
	background-color: transparent;
	display: none;
}

.sliderImage a span {
	text-decoration: none;
	background-image: url(images/icons/AMS-icon-43x39.png);
	background-repeat: no-repeat;
	background-position: 120px 3px;
}

.sliderImage a:hover, 
.sliderImage a:hover span { color: #086BFF; text-decoration: none; }

.sliderImage div.arrow {
	font-size: 1.3em;
	text-align: right;
	display: inline;
	position: absolute;
	left: 82%;
	bottom: 10px;
}

.clear { clear: both; }