#pic
{
position: absolute;
   background-image: url(../images/SiteImages/pic.png);
   width: 258px;
   height: 258px;
   padding-top: 2px;
   padding-left: 2px;
}

#slider {
float: left;
margin-right: 10px;
margin-bottom: 10px;
   width: 470px; /* important to be same as image width */
   height: 90px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#slider ul, li, img {
list-style: none;
margin: 0; padding: 0;
}


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

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

.sliderImage span {/*contains info*/
   position: absolute; /* important */
   padding: 10px 13px;
   width: 435px; /* width of image minus left and right padding. Needed for IE */
   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; /* important */
   left: 0;
   bottom: 0;
}

.clear {
   clear: both;
}