/*** set the width and height to match your images **/
.ssCont { position: relative; width: 424px; height: 181px; overflow: hidden;  background-color: #0066cc; }
.ss { position: relative; height: 181px; width: 424px; float: left; z-index: 0; }
.ss DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 181px; }
.ss DIV.active { z-index:10; opacity:1.0; }
.ss DIV.last-active { z-index:9; }
.ss DIV.hidden { display: none; }
.ss DIV IMG { height: 181px; display: block; border: 0; margin-bottom: 10px; }

.ssc { position: absolute; height: 181px; width: 200px; left: 200px; z-index: 2; }
.ssc DIV.ssCaptions { position: absolute; top:0; left:0; z-index: 8; opacity:0.0; padding: 20px; color: #fff; }
.ssc DIV.active { z-index:10; opacity:1.0; height: 100%; width: 100%; }
.ssc DIV.last-active { z-index:9; }
.ssc DIV.active span { padding: 10px; display: inline-block; padding-top: 0; } 
.ssc span { background-color: Transparent; }

div.ssn { position: absolute; right: 12px; top: 264px; z-index: 3; }

.ssn span { cursor: pointer; margin: 1px; background: #f0f0f0; height: 20px; width: 20px; display: inline-block; text-align: center; font-size: 11px; vertical-align: middle; }
.ssn span:hover { background-color: #CCC; color: #fff; }
.ssn span.active { background-color: #CCC; color: #fff; }

.ssn span.ssnPlay { background: #f0f0f0 url(../images/play.png) 2px 1px no-repeat; }
.ssn span.ssnPause { background: #f0f0f0 url(../images/pause.png) 2px 1px no-repeat; }
.ssn span.ssnPlay:hover { background: #ccc url(../images/play.png) 2px 1px no-repeat; }
.ssn span.ssnPause:hover { background: #ccc url(../images/pause.png) 2px 1px no-repeat; }   
.ssns { vertical-align: middle; line-height: 1.6em; }

.captionBg { z-index: 1; background: #000; border: solid 10px #fff; position: absolute; top: 0px; left: 200px; height: 280px; width: 180px;  }