﻿/*** set the width and height to match your images **/
.ssCont { position: relative; width: 913px; height: 205px; border-left: solid 1px #fff; border-right: solid 1px #fff; }

.ss, .ss DIV, .ssc { height: 205px; }

/* THIS IS THE IMAGE AREA */
.ss { position: relative; width: 513px; float: left; }
.ss DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 205px; background-color: #FFF; }
.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: 205px; display: block; border: 0; margin-bottom: 10px; }

/* THIS IS THE CAPTION AREA */
.ssc { position: relative; width: 399px; float: left; border-left: 1px solid #fff; 
         background: #cf9a00 url(../images/goldGradient.gif) repeat-x; }
.ssc DIV { position: absolute; top:0; left:0; z-index: 8; opacity:0.0; background: #cf9a00 url(../images/goldGradient.gif) repeat-x;}
.ssc DIV.active { z-index:10; opacity:1.0; padding: 15px; font-size: 20px; font-weight: 400; color: #fff; line-height: 1.4em; }
.ssc DIV.last-active { z-index:9; }
.ssc DIV.active span { padding: 10px; display: inline-block; padding-top: 0; } 

/* THIS IS THE SLIDE # AREA */
.ssn span { color: #fff; cursor: pointer; margin: 1px; height: 20px; width: 20px; 
            display: inline-block; text-align: center; font-size: 11px; 
            vertical-align: middle; font-weight: 700; }
.ssn span:hover { background-color: #a0872a;  }
.ssn span.active { color: #fff; font-weight: 700; background-color: #a0872a; }
div.ssn { clear: both; margin-top: 5px; right: 15px; bottom: 10px;position: absolute; z-index: 100; }

/* THIS IS THE BUTTON CONTAINER -> 1, 2, 3, play pause etc...*/
.ssns { float: right; vertical-align: middle; line-height: 1.6em; }
.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; }   
