/* CSS Document */

#slider {
	width: 625px; /* important to be same as image width */
	height: 275px; /* important to be same as image height */
	position: relative; /* important */
	overflow: hidden; /* important */
	color: #E3E5E4;
}
#slider img {
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#sliderContent {
	width: 625px; /* important to be same as image width or wider */
	position: absolute; /* important */
	top: 0; /* important */
	margin: 0;
	padding: 0px;
	left: 0px;
}

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

.sliderImage span {
	position: absolute;
	width: 599px;
	filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
	opacity: 0.7; /* here you can set the opacity of box with text */
	color: #fff;
	display: none;
	background-color: #000000;
	padding-top: 10px;
	padding-right: 13px;
	padding-bottom: 10px;
	padding-left: 13px;

   /*
       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
   */
}
.sliderImage span.t {
	left: 0px;
	top: 0px;
}
.sliderImage span.b {
	left: 0px;
	bottom: 0px;
}
.sliderImage span.l {
	left: 0px;
	height: 275px;
	width: 120px;
	top: 0px;
}
.sliderImage span.r {
	right: 0px;
	height: 275px;
	width: 120px;
	top: 0px;
}
.clear {
   clear: both;
}
span p {
	font-size: 90%;
	line-height: 115%;
	font-family: "Myriad Pro", Myriad, Arial, Helvetica, sans-serif;
	padding-bottom: 3px;
	margin: 0px;
	padding-top: 3px;
}
span a:link, a:visited {
	color: #00ADEF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #00ADEF;
}