#rotator {
	background-image: url(images/rotator_bgd.gif);
	background-repeat: no-repeat;
	position: relative; /* important */
	overflow: hidden; /* important */
	float: left;
	padding: 14px 0px 0px 19px;
	width: 666px; /* important to be same as image width */
	height: 346px; /* important to be same as image height */
}

#rotator #rotatorContent {
   width: 645px; /* important to be same as image width or wider */
   position: relative; /* important */
   top: 0; /* important */
   margin: 0px;
   padding: 0px;
   text-indent: 0px;
}

#rotator #rotatorContent:after {
	content: "";
	display: block;
	clear: both;
	height: 0px;
}

#rotator #rotatorContent .rotatorImage {
   float: left; /* important */
   width: 645px; /* important to be same as image width */
   height: 320px; /* important to be same as image height */
   position: relative; /* important */
   display: none; /* important */
   overflow:hidden;
   margin: 0px;
   padding: 0px;
   text-indent: 0px;
}

#rotator #rotatorContent .rotatorImage span {
   position: absolute; /* important */
   top: 0;
   left: 0;
   font: 24px Arial, Helvetica, sans-serif;
   padding: 10px;
   font-weight: bold;
   width: auto;
   background-color: #000;
   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 */   
}

#rotator #rotatorContent .rotatorImage span a {
	color: #E4E4E4;
}

#rotator #rotatorContent .rotatorImage span a:hover {
	text-decoration: none;
	color: #FFF;
}

/*
old cycle code
#rotator { width: 685px; height: 320px; border: 1px solid #ccc; float: left; padding: 0px; }
#rotator > a { width: 685px; height: 320px; display:block; }
#rotator > a > img { width: 685px; height: 320px; display:block; }
*/