@charset "utf-8";

/* 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;
/*	border: solid 1px #AAA;*/
	background-color: #efefef;position: relative;margin-top: 24px;padding-top: 10px; /* This should be the margin-top of .ISSClip but it is here to work around an IE6/IE7 collapsed margin bug. */
	padding-bottom:2px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,.065);-moz-box-shadow: 5px 5px 8px rgba(0,0,0,.065);box-shadow: 5px 5px 8px rgba(0,0,0,.065);}

/* This rule controls the position of the slide show name. By default, it is anchored to the top left of the
 * slide show clip. The name actually renders outside of the widget so a margin-top on the widget's top-level
 * element (aka .BasicSlideShowFS) should be specified to give it space to render without overlapping any content
 * that comes before the widget.
 */
.BasicSlideShowFS .ISSName {position: absolute;left: 0;top: -30px;padding:top:20px;margin: 0;font-size: 24px;font-family: 'PT Sans Narrow', sans-serif;font-weight: bold;text-shadow: 0 1px 0 rgba(0,0,0,.15);color: #5DA190;}

/* This rule controls the position of the slide title. By default, it is anchored to the top right of the
 * slide show clip. The title actually renders outside of the widget so a margin-top on the widget's top-level
 * element (aka .BasicSlideShowFS) should be specified to give it space to render without overlapping any content
 * that comes before the widget.
 */
.BasicSlideShowFS .ISSSlideTitle {display:none;position: absolute;right: 0;top: -18px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;overflow: hidden;text-transform: none;color: #AAA;}

/* 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: 100px;margin: 0 10px 10px 10px; /* margin-top is specified as padding on .BasicSlideShowFS to avoid an IE6/IE7 collapsed margin bug. */
	overflow: hidden;position: relative;
/*	border: solid 1px #AAA;*/
	background-color: #fff
	;}

/* 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: 11px;left: 0;width: 100%;height: 100px;}

/* 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: 100px; /* 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
 * 30% of the width of the controls element.
 */
.BasicSlideShowFS .ISSPreviousButton {left: 0;width: 30%;background-image: url(images/nav-left.png);background-position:  center;}

.BasicSlideShowFS .ISSPreviousButtonDown {background-image: url(images/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;width: 30%;background-image: url(images/nav-right.png);background-position:  center;}

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

/* The play button spans the entire area of the controls element between
 * the prev and next buttons.
 */
.BasicSlideShowFS .ISSPlayButton {left: 30%;width: 40%;background-image: url(images/play.png);background-position:  center;}

.BasicSlideShowFS .ISSPlayButtonDown {background-image: url(images/play-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.25;filter: alpha(opacity=25);}

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

/* If the slide show is playing, change the play button image to "pause".
 */
.BasicSlideShowFS.ISSPlaying .ISSPlayButton {background-image: url(images/pause.png);}

.BasicSlideShowFS.ISSPlaying .ISSPlayButtonDown {background-image: url(images/pause-active.png);}

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

/* This rule controls the top-level film strip element that contains the thumbnails.
 */
.BasicSlideShowFS .FilmStrip {	display: none;height: 80px;background-color: #CCC;}

/* This rule controls the height and width of the previous and next buttons of the thumbnail filmstrip.
 */
.BasicSlideShowFS .FilmStripPreviousButton, .BasicSlideShowFS .FilmStripNextButton {display: none;width: 25px;height: 80px;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 {	display: none;float: left;background-image: url(images/arrow-left.png);background-position: right 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 {	display: none;float: right;background-image: url(images/arrow-right.png);background-position: left center;}

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

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

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

/* This rule swaps out the next button image when the user clicks on it.
 */
.BasicSlideShowFS .FilmStripNextButtonDown {	display: none;background-image: url(images/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 {	display: none;overflow: hidden;width: auto;height: 80px;position: relative;}

/* 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 {	display: none;width: 10000em;height: 80px;overflow: hidden;position: absolute;top: 0;left: 0;}

/* 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 {	display: none;float: left;height: 80px;padding-left: 10px;  /* Spacing on the left of the thumbs */
	margin-right: 0;     /* 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;margin-top: 10px;border: solid 1px #AAA;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: none;border: solid 1px #AAA;width: 56px;height: 47px;margin: 4px;text-indent: -1000em;background-position: center;}

.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkCenter {display: none;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 {background-color: #FFF;border: solid 1px #F00;}