/* slideshow images */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* custom pager */
.custom-cycle-pager { 
    text-align: center; width: 100%; position: relative; top: 5px; overflow: hidden;
}
.custom-cycle-pager span { 
    font-family: arial; font-size: 25px; width: 12px; height: 8px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.custom-cycle-pager span.cycle-pager-active { color: #630d0d;}
.custom-cycle-pager > * { cursor: pointer;}

/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    font-size: 1.5em;
    font-weight: bold;
    position: absolute; top: 25px; width: 30%; z-index: 600;
    background: url(/assets/transpBlack50.png); color: white; padding: 15px;
}

/* Next from composite example */
/* anchors */
.cycle-slideshow > a { 
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0;
}

/* images */
.cycle-slideshow > a > img { 
    width: 100%;
    position: static;
    display: block;
}

/* divs */
.cycle-slideshow > div { 
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0;
}

.composite-example > div > img { display: block; }

.cycle-slide p { margin: 0; padding: 5px 0px }
/* end composite example */

/* stuff for special template for overlays */
.btop {
	font-size: 25px;
	color: #a34d4d;
	font-style: oblique;
	margin-bottom: 2px;
}
.btitle {
	color: white;
}

/* 
    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; width: 250px; }
    .cycle-caption { bottom: 4px; right: 4px; }
    #feature_image img { width: 860px; }
}