﻿/*** set the width and height to match your images **/
.ssCont { position: relative; width: 260px; padding: 10px 10px 110px 10px; overflow: visible; }
/* home page ss */ .clientBoxContainer .ssCont { width: 215px; border: none; }

/* THIS IS THE IMAGE AREA */
.ss { position: relative; top: 24px; width: 250px; float: left; overflow: hidden; padding: 4px; text-align: center;}
/* home page ss */ .clientBoxContainer .ss { width: 215px; border: none; }
.ss DIV { position:absolute; z-index:8; opacity:0.0; background-color: #fff; left: 4px;}
.ss DIV.active { z-index:10; opacity:1.0;}
.ss DIV.last-active { z-index:9; }
.ss DIV.hidden { display: none; }
.ss DIV IMG { display: block; border: 0; }

/* THIS IS THE CAPTION AREA */
.ssc { position: relative; width: 380px; clear: both; top: 30px; display:none; }
/* home page ss */ .clientBoxContainer .ssc { width: 215px; }
.ssc DIV { position: absolute; color: #000; z-index: 8; opacity:0.0; }
.ssc DIV.active { z-index:10; opacity:1.0; padding: 5px; font-size: 13px; font-weight: 400; line-height: 1.4em; }
.ssc DIV.last-active { z-index:9; }
.ssc DIV.active span { padding: 5px 5px 5px 0; display: inline-block; padding-top: 0; } 

/* THIS IS PAGING */
.ssn span { color: #77787b; cursor: pointer; margin: 1px; height: 20px; width: 20px; 
            display: inline-block; text-align: center; font-size: 11px; 
            vertical-align: middle; font-weight: 400; background-color: #ECECEC; border: solid 1px #ECECEC;}
.ssn span:hover, .ssn span.active { border: solid 1px #ACB0BA; }
div.ssn { clear: both; top: 5px; position: absolute; z-index: 100; margin: 0 auto; }

/* THIS IS THE BUTTON CONTAINER -> 1, 2, 3, play pause etc...*/
.ssns { vertical-align: middle; line-height: 1.6em; margin-left: 24px;}
.ssns span { margin-right: 5px; }

/* THESE ARE THE BUTTONS */
.ssn span.ssnPlay { background: url(../images/play.png) 2px 1px no-repeat; }
.ssn span.ssnPause { background: 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; }
.ssn span.ssnNext { background: url(../images/next.png) 2px 1px no-repeat; border: none;  margin-left: 0; }
.ssn span.ssnPrev { background: url(../images/prev.png) 2px 1px no-repeat; border: none; position: absolute; top: 0; left: 0;}
.ssn span.ssnNext:hover { background: url(../images/next.png) 2px 1px no-repeat; }
.ssn span.ssnPrev:hover { background: url(../images/prev.png) 2px 1px no-repeat; }

