/** SLIDESHOW **

 * This is an attempt to standardize basic aspects
 * of the slideshow found on Found Us In Your Car,
 * What Is SiriusXM, and Internet Radio pages.
 *
 * Each instance has its own unique styles to make
 * it fit within its page, but these styles provide
 * a solid backbone from which to work.
 *
 * Example:
 	
	<div id="slideshow-container" style="height:369px;width:292px;">
                        
		<!-- begin .slideshow -->
		<div class="slideshow inactive">
			<div class="slides clearfix">
				<div class="first">
					<img class="png" height="369" width="292" alt="" src="image1.png" />
					<div class="caption">
						<span>Program Title</span>
						<span class="time">Sirius ch. 1 | XM ch. 1</span>
					</div>
				</div>
				<div>
					<img class="png" height="369" width="292" alt="" src="image2.png" />
					<div class="caption">
						<span>Program Title</span>
						<span class="time">Sirius ch. 2 | XM ch. 2</span>
					</div>
				</div>
			</div>
			<br />
			<div class="navigation clearfix">
				<a class="prev arrow png" href="#">prev</a>
				<a class="next arrow png" href="#">next</a>
			</div>
		</div>
		<!-- end .slideshow -->
	
	</div>

 **/

#slideshow-container {
	position: absolute;
	bottom: 0;
	right: 0;
}
#slideshow-container .slideshow .slides div {
	display:none;
}
#slideshow-container .slideshow .slides div.first {
	display:block;
}
#slideshow-container .slideshow .slides div.caption {
	display:block;
}
#slideshow-container .slideshow .caption {
	background-color: #11AAFF;
	bottom: 0;
	color: #FFFFFF;
	height: 30px;
	padding: 10px;
	position: relative;
	text-align: center;
	bottom:50px;
}
#slideshow-container .slideshow .caption span {
	border-bottom:1px dotted #FFFFFF;
	font-size:11px;
	margin-bottom:5px;
	padding-bottom:3px;
}
#slideshow-container .slideshow .caption span.time {
	border:medium none;
	display:block;
	font-size:10px;
	margin-top:8px;
}
#slideshow-container .slideshow .navigation {
	margin: 0 auto;
	position:relative;
	bottom:97px;
	z-index:400;
	width: 90%;
}
#slideshow-container .slideshow .navigation a {
	background:url("/sxm/img/homepage/carousel/carousel-arrows-unrecognized.png") no-repeat scroll 0 0 transparent;
	display:block;
	height:16px;
	text-indent:-9999px;
	width:9px;
}
#slideshow-container .slideshow .navigation .prev {
	background-position:0 0;
	float:left;
}
#slideshow-container .slideshow .navigation .prev:hover {
	background-position:0 -17px;
}
#slideshow-container .slideshow .navigation .next {
	background-position:-9px 0;
	float:right;
}
#slideshow-container .slideshow .navigation .next:hover {
	background-position:-9px -17px;
}