#slider {
	width: 970px; /* important to be same as image width */
	height: 350px; /* important to be same as image height */
	position: relative; /* important */
	overflow: hidden; /* important */
	border: 1px solid #a4a4a4;
}

#sliderContent {
	width: 970px; /* important to be same as image width or wider */
	position: absolute; /* important */
	top: 0; /* important */
	margin-left: 0; /* important */
	margin-top: 0;
	padding: 0px;
   font-size:26px;
   font-family: 'Asap', Arial, Helvetica, sans-serif;
   color: #58585a;
}

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

.sliderImage span {
   position: absolute; /* important */
   padding: 20px;
   width: 610px;
   background-color: #fff;
   filter: alpha(opacity=100); /* here you can set the opacity of box with text */
   -moz-opacity: 1.0; /* here you can set the opacity of box with text */
   -khtml-opacity: 1.0; /* here you can set the opacity of box with text */
   opacity: 1.0; /* here you can set the opacity of box with text */
   display: none; /* important */
}

.clear {
  clear: both;
} 
.sliderImage span strong {
  font-size: 26px;
  font-weight: bold;
}

.sliderImage span.top {
	top: 0;
	left: 0;
}
.sliderImage span.bottom {
	bottom: 0;
  left: 0;
}
.sliderImage span.leftup {
	bottom: 0;
  left: 0;
	height: 305px;
	width: 265px;
}
.sliderImage span.leftdown {
	top: 0;
  left: 0;
	height: 300px;
	width: 265px;
}
html>body .sliderImage span.leftdown {
  height: 260px;
  width: 225px;
}
html>body .sliderImage span.leftup {
  height: 265px;
  width: 225px;
}
.sliderImage span.rightup {
	right: 0;
	bottom: 0;
	height: 305px;
	width: 265px;
}
html>body .sliderImage span.rightup {
  height: 265px;
  width: 225px;
}
.sliderImage span.rightdown {
	right: 0;
	top: 0;
	height: 300px;
	width: 265px;
}
html>body .sliderImage span.rightdown {
  height: 260px;
  width: 225px;
}