/* arrow character (or whatever character you say in the htm file) for forward and backward */

.slider-buttonl {position:absolute; left: 0px; top:150px; width:20px; cursor:pointer; font-size:16px; height:20px; line-height:16px; text-align:center; color:#ccc; background:#000; z-index: 5; background:rgba(0,0,0,.3); border-radius:6px; }
.slider-buttonl:hover {color:#f5e9b1; background:#610b0b;}
.slider-buttonr {position:absolute; left: 420px; top: 150px; width:20px; cursor:pointer; font-size:16px; height:20px; line-height:16px; text-align:center; color:#fff; background:#000; z-index: 5; background:rgba(0,0,0,.3); border-radius:6px; }
.slider-buttonr:hover {color:#f5e9b1; background:#610b0b;}

/* this is for the dots that change the slides */

.pagination {position:absolute; top: 2px; left: 2px; height:23px; z-index: 3;}
.pagination li {float:left; margin: 2px 2px 2px 2px; cursor:pointer; height:12px; width:12px; background:#888; border-radius:6px; list-style:none;}
.pagination li:hover {background:#610b0b;}
li.current {background:#610b0b;}

/* TinyFader */

#slideshow {position:relative; width: 440px; border:0px solid #610b0b; background:#fff; }
#slides {position:relative; width: 440px; border:0px solid #610b0b; border-radius: 15px; box-shadow: 5px 5px 5px #888888;
height:293px; margin:0 0 0px 0; padding: 0px 0px 0px 0px; list-style:none; overflow:auto; }
#slides li {width:440px;}
.fader-slide {opacity:0; position:absolute;}
.fader-fade {opacity:1; -webkit-transition:opacity .9s; -moz-transition:opacity .9s; transition:opacity .9s}

/* Slide Styling */

#caption {background:#fff; position:relative}
#caption div {position:absolute; bottom:5px; left:0; width:424px; padding:3px 8px 3px 8px; background:rgba(64,0,0,.5)}
#caption h2 {font:16px Arial,Verdana; margin: 0px 0px 4px 0px; color:#ffff80}
#caption p {font:12px Arial,Verdana; margin: 0px; line-height:1.1; color:#ffff80}