@charset "utf-8";

#MCASlideShow {
	margin-left: 22px;
}

/* basic_fs.css - version 0.1 - Spry Pre-Release 1.7 */

/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */


/* This is the rule for the top-level slide show element. By default, the width of this element is set to auto
 * so that the widget expands horizontally to fit its parent container. If you want to manuall y set the width of the * widget, set it on this element and all of its child elements, including the view port will adjust to fit the
 * specified width.
 *
 * In this particular design, the top-level element has a single pixel border around the entire widget. The
 * background color of this element will only show if the view port (aka ISSClip) has non-zero margins.
 */
.BasicSlideShowFS {
	width: auto;
	position: relative;
}

/* This rule controls the size of the clip view (aka view port). The margins within this rule are used to push the
 * clip view away from the top, left and right edges of the widget and provide some spacing between it and the
 * film strip widget below it. If a background color is specified on the widget's top-level element, the margins
 * specified here will make it look like there is a frame around the clip view.
 *
 * The widget is position "relative" so that the slides inside it can be absolutely positioned relative to its upper
 * left corner for pan and zoom support.
 */
.BasicSlideShowFS .ISSClip {
	clear: both;
	width: auto;
	height: 939px;
	overflow: hidden;
	margin-top: 124px;
}

/* This rule controls the size of the view that is inside the clip view. It should be exactly the same
 * size as the clip view for fading transitions.
 */
.BasicSlideShowFS .ISSView {
	width: 100%;
	height: 100%;
}

/* This rule controls the size of each slide. Note that the image that is displayed is *inside* of a
 * slide so they are not the same thing. For this particular design, a slide is the same size as the
 * clip and view.
 */
.BasicSlideShowFS .ISSSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* The slide show controls element is positioned over and sized to exactly match the height of the slide show's
 * clip view. Ideally, we would like the width of the controls element to be exactly the width of the clip view,
 * but since the clip view's width is determined by the widget's overall width, that number isn't available to us.
 * Since the controls element uses absolute positioning to accomplish the overlay, a width of 100% is specified
 * to prevent the element from collapsing horizontally. This means that the width of this element is exactly the
 * width of the content area of the widget's top-level elemtnt.
 *
 * The back, forward and play buttons are positioned relative to the slide show controls element so that the
 * size and position of the controls only needs to be changed in one place (this rule).
 */
.BasicSlideShowFS .ISSControls {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 900px;
}

/* We don't expose the first or last navigation buttons for this particular design,
 * so hide them with display none.
 */
.BasicSlideShowFS .ISSFirstButton, .BasicSlideShowFS .ISSLastButton {
	display: none;
}

/* The prev, next, and play buttons span the entire height of the controls element.
 * The width of each button will be set in rules that follow this one. By default,
 * we make each button entirely transparent, they will become visible as the user
 * hovers over them.
 *
 * A negative text indent is used to hide, off-screen, any text inside the buttons.
 */
.BasicSlideShowFS .ISSPreviousButton, .BasicSlideShowFS .ISSNextButton, .BasicSlideShowFS .ISSPlayButton {
	display: block;
	position: absolute;
	top: 0;
	height: 100%; /* We can't use 100% here because of IE6, so we set the height to be the same as SlideShowControls. */
	opacity: 0;
	filter: alpha(opacity=0);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

/* The previous button is anchored to the left of the controls element and is about
 * 40% of the width of the controls element.
 */
.BasicSlideShowFS .ISSPreviousButton {
	left: 0;
	margin-left: 25px;
	width: 40%;
	background-image: url(../images/nav/nav-left.png);
	background-position: left 278px;
}

.BasicSlideShowFS .ISSPreviousButtonDown {
	background-image: url(../images/nav/nav-left-active.png);
}

/* The next button is anchored to the right of the controls element and is about
 * 30% of the width of the controls element.
 */
.BasicSlideShowFS .ISSNextButton {
	right: 0;
	margin-right: 25px;
	width: 40%;
	background-image: url(../images/nav/nav-right.png);
	background-position: right 278px;
}

.BasicSlideShowFS .ISSNextButtonDown {
	background-image: url(../images/nav/nav-right-active.png);
}

/* If the user hovers over the prev, next or play button, change
 * its opacity so that it becomes visible.
 */
.BasicSlideShowFS .ISSPreviousButtonHover, .BasicSlideShowFS .ISSNextButtonHover, .BasicSlideShowFS .ISSPlayButtonHover {
	opacity: 0.60;
	filter: alpha(opacity=60);
}

/* If the slide show is busy, show the busy icon in the view.
 */
.BasicSlideShowFS.ISSBusy .ISSView {
	background-image: url(../images/nav/busy.gif);
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	filter: alpha(opacity=100);
}

/* Don't show the player controls if the slide show is busy!
*/
.BasicSlideShowFS.ISSBusy .ISSPreviousButton,
.BasicSlideShowFS.ISSBusy .ISSNextButton,
{
	display: none;
}

/* This rule controls the top-level film strip element that contains the thumbnails.
 */
.BasicSlideShowFS .FilmStrip {
	height: 80px;
	width: 100%;
	position: absolute;
	top: -80px;
}

/* This rule controls the height and width of the previous and next buttons of the thumbnail filmstrip.
 */
.BasicSlideShowFS .FilmStripPreviousButton, .BasicSlideShowFS .FilmStripNextButton {
	display: block;
	width: 30px;
	height: 60px;
	background-position: left;
	background-repeat: no-repeat;
}

/* This rule positions the previous button on the left side of the film strip. The directional arrow
 * for the button is actually a centered bacground-image on the previous button element.
 */
.BasicSlideShowFS .FilmStripPreviousButton {
	float: left;
	background-image: url(../images/nav/arrow-left.png);
	background-position: left center;
}

/* This rule positions the next button on the right side of the film strip. The directional arrow
 * for the button is actually a centered bacground-image on the previous button element.
 */
.BasicSlideShowFS .FilmStripNextButton {
	float: right;
	background-image: url(../images/nav/arrow-right.png);
	background-position: right center;
}

/* This rule swaps out the previous button image when the user hovers over it.
 */
.BasicSlideShowFS .FilmStripPreviousButtonHover {
	background-image: url(../images/nav/arrow-left-hover.png);
}

/* This rule swaps out the next button image when the user hovers over it.
 */
.BasicSlideShowFS .FilmStripNextButtonHover {
	background-image: url(../images/nav/arrow-right-hover.png);
}

/* This rule swaps out the previous button image when the user clicks on it.
 */
.BasicSlideShowFS .FilmStripPreviousButtonDown {
	background-image: url(../images/nav/arrow-left-active.png);
}

/* This rule swaps out the next button image when the user clicks on it.
 */
.BasicSlideShowFS .FilmStripNextButtonDown {
	background-image: url(../images/nav/arrow-right-active.png);
}

/* This rule hides the previous and next buttons if they are marked as disabled.
 */
.BasicSlideShowFS .FilmStripPreviousButtonDisabled,
.BasicSlideShowFS .FilmStripNextButtonDisabled {
	visibility: hidden;
}

/* The FimStripTrack acts as a clip for the film strip. This rule simply gives it
 * dimensions and sets the overflow:hidden so it actually clips the content inside it.
 */
.BasicSlideShowFS .FilmStripTrack {
	overflow: hidden;
	width: auto;
	height: 80px;
	position: relative;
	top: 0;
}

/* The FilmStripContainer holds all of the thumbnails. It is what gets positioned to give the
 * illusion that things are sliding around. It is initially set to a very wide width so that
 * thumbnails inside it don't wrap vertically.
 */
.BasicSlideShowFS .FilmStripContainer {
	width: 10000em;
	height: 80px;
	overflow: hidden;
	position: relative;
}

/* Each film strip panel acts as a container for the thumbnail and its frame.
 * The panel's height is exactly the height of the film strip track, and its
 * width is automatically adjusted/determined by the size of the thumbnail and
 * its frame.
 *
 * A left padding is used to set the spacing between the first thumbnail frame
 * and the left edge of the film strip view, as well as the spacing between
 * the thumbnail frames. The spacing *BETWEEN* the thumbnail frames can be adjusted
 * by setting the right margin of the panel. To bring the thumbs closer, use a
 * negative margin, to space them out more, use a positive margin.
 */
.BasicSlideShowFS .FilmStripPanel {
	float: left;
	height: 80px;
	padding-left: 16px;
	margin-right: 2px;     /* Adjusted spacing *between* thumbs */
}

/* The slide show link that is inside each film strip panel needs to be 2 or 3 sliced.
 * The link itself serves as the frame for the thumbnail. The border for the link is the
 * outer border, the border around the frame, and the background color serves as the color
 * of the frame. A top margin is used to center the thumbnail frame veritcally within the
 * film strip track/view.
 */
.BasicSlideShowFS .FilmStripPanel .ISSSlideLink {
	float: left;
	display: block;
	border: solid 3px #cccac8;
	background-color: #FFF;
}

/* The span inside the link provides the inner border of the thumbnail frame. The inner border
 * is used to provide some definition of where the thumbnail image ends, and the thumbnail frame
 * begins.
 *
 * The margin for this span provides the frame thickness.
 */
.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkRight {
	display: block;
	width: 54px;
	height: 54px;
	text-indent: -1000em;
	background-position: center;
}

.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkCenter {
	display: block;
	width: 100%;
	height: 100%;
}

/* This rule adjusts the color of the thumbnail frame's outer border and frame for
 * the currently selected thumbnail.
 */
 
.BasicSlideShowFS .FilmStripCurrentPanel .ISSSlideLink {
	border: solid 3px #ff5f58;
}