@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: #FFF;

	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. */

}



/* 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: -24px;

	margin: 0;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 18px;

	text-transform: uppercase;

	color: #AAA;

}



/* 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 {

	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: 432px;

	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: #000

	;

}



/* 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: 432px;

}



/* 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: 432px; /* 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.75;

	filter: alpha(opacity=75);

}



/* 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 {

	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: block;

	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 {

	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 {

	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 {

	background-image: url(images/arrow-left-hover.png);

}



/* This rule swaps out the next button image when the user hovers over it.

 */

.BasicSlideShowFS .FilmStripNextButtonHover {

	background-image: url(images/arrow-right-hover.png);

}



/* This rule swaps out the previous button image when the user clicks on it.

 */

.BasicSlideShowFS .FilmStripPreviousButtonDown {

	background-image: url(images/arrow-left-active.png);

}



/* This rule swaps out the next button image when the user clicks on it.

 */

.BasicSlideShowFS .FilmStripNextButtonDown {

	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 {

	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 {

	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 {

	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: block;

	border: solid 1px #AAA;

	width: 56px;

	height: 47px;

	margin: 4px;

	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 {

	background-color: #FFF;

	border: solid 1px #F00;

}