/* 
jFlow Plus v2 Demo CSS 
Description: Demonstation CSS for jFlow Plus
Creator: Devin Walker
Date: July 29, 2010
*/

#sliderContainer { width: 700px; height: 340px; position:relative; float:left; background-color:#333; margin-bottom:10px; }
.slides{ position:relative; top:0; left:0; background-color:#FFFF00;}
.slideContent { background-color:#000; position: absolute; bottom:0px; right:0px; padding: 20px; width: 660px; zoom: 1; filter: alpha(opacity=80);	opacity: 0.8; }
.slide h3 {  font: 26px/1em 'Rokkitt', serif; color: #FFF;  margin: 0 0 5px 0; }
.slide p { font-size: 14px; color: #FFF; margin: 0; }

.jFlowSlideContainer { overflow: hidden; }
.jFlowSlideContainer a { color: #F90; text-decoration: none; }
.jFlowSlideContainer a:hover { text-decoration: none; }
.jFlowSlideContainer a:focus { position: relative; top: 1px; }

.jFlowNext,
.jFlowPrev { clear: both; cursor: pointer; display: block; height: 60px; margin: 0; overflow: hidden; position: absolute; top:100px; width: 30px; z-index: 9; }
.jFlowNext, .jFlowNext:hover { background: url(img/slider-next.png); right: 0; }
.jFlowPrev, .jFlowPrev:hover { background: url(img/slider-previous.png); left: 0; }
.jFlowNext:hover, .jFlowPrev:hover { background-position: -30px 0; }

/* controller pagination */
#myController {position: absolute; top: 5px; right: 5px; }
.jFlowControl { background:url("img/bullet.png") no-repeat scroll 0px 0px transparent;  float: left; width: 15px; height: 15px;}
.jFlowControl:hover { background-position: -32px 0px; cursor: pointer; }
.jFlowSelected, .jFlowSelected:hover {background-position: -15px 0px;   }