

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }


.cycle-slideshow { width:550px; margin:10px auto; padding:0; position:relative;
    background:url(/images/spinner.gif) 50% 50% no-repeat;
	margin:10px 0 0 16px;
	border:2px solid #9adaed;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    position:absolute; top:0; left:0; z-index:1;
    width:100%; padding:0; display:block;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position:static; z-index:100;
}

/* pager */
.cycle-pager { 
    text-align:center; width:100%; 
	overflow:hidden; 
	padding:5px 4px;
	margin-bottom:10px;
}
.cycle-pager span { 
    font-family:arial; color:#ccc; font-size:40px; width:15px; height:15px; line-height:16px;
    display:inline-block;*display:inline;zoom:1;
	cursor:pointer; 
}
.cycle-pager span.cycle-pager-active { color:#61bc0e;}
.cycle-pager > * { cursor:pointer;}


/* caption */
.cycle-caption { position:absolute; color:white; bottom:15px; right:15px; z-index:700; text-align:center; }


/* overlay */
.cycle-overlay { 
    font-family:tahoma, arial;
    position:absolute; bottom:0; width:100%; z-index:600;
    background:black; color:white; padding:8px 5px; opacity:.5;
}
.cycle-overlay div{text-align:center;}


/* prev / next links */
.cycle-prev, .cycle-next { position:absolute; top:0; width:32px; z-index:999; height:100%; cursor:pointer; 
	opacity:.5;-moz-opacity:.5;-webkit-opacity:.5; filter:alpha(opacity=50)}
.cycle-prev { left:5px;  background:url(/images/ban-arrow-prev.png) 50% 50% no-repeat;}
.cycle-next { right:5px; background:url(/images/ban-arrow-next.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover {opacity:1;-moz-opacity:1;-webkit-opacity:1; filter:alpha(opacity=100) }

.disabled { opacity:.5; filter:alpha(opacity=50); }


/* pager */


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content:'Paused'; color:white; background:black; padding:10px;
    z-index:500; position:absolute; top:10px; right:10px;
    border-radius:10px;
    opacity:.5; filter:alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width:480px), only screen and (max-device-width:480px) {
    .cycle-slideshow { width:200px;}
    .cycle-overlay { padding:4px }
    .cycle-caption { bottom:4px; right:4px }
}
