@charset "utf-8";
.BasicSlideShowFS {
width: auto;
border: solid 1px #AAA;
background-color: #FFF;
position: relative;
margin-top: 24px;
padding-top: 10px;
}


.BasicSlideShowFS .ISSName {
position: absolute;
left: 0;
top: -24px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-transform: uppercase;
color: #AAA;
}

.BasicSlideShowFS .ISSSlideTitle {
position: absolute;
right: 0;
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
overflow: hidden;
text-transform: none;
color: #AAA;
}
.BasicSlideShowFS .ISSClip {
clear: both;
width: auto;
height: 432px;
margin: 0 10px 10px 10px;
overflow: hidden;
position: relative;
border: solid 1px #AAA;
background-color: #000
;
}
.BasicSlideShowFS .ISSView {
width: 100%;
height: 100%;
}
.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(../img/nav-left.png);
background-position:  center;
}

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

.BasicSlideShowFS .ISSNextButtonDown {
background-image: url(../img/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(../img/play.png);
background-position:  center;
}

.BasicSlideShowFS .ISSPlayButtonDown {
background-image: url(../img/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(../img/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(../img/pause.png);
}

.BasicSlideShowFS.ISSPlaying .ISSPlayButtonDown {
background-image: url(../img/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(../img/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(../img/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(../img/arrow-left-hover.png);
}

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

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

/* This rule swaps out the next button image when the user clicks on it.
*/
.BasicSlideShowFS .FilmStripNextButtonDown {
background-image: url(../img/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;
}


#ImageSlideShow {
width: 900px;
margin: 24px 0px 0px 0px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
padding-top: 10px;
}

#ImageSlideShow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
color: #AAAAAA;
}

#ImageSlideShow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
overflow: hidden;
color: #AAAAAA;
text-transform: none;
}

#ImageSlideShow .ISSClip {
height: 500px;
margin: 0 10px 10px 10px;
border: solid 1px #AAAAAA;
background-color: #000000;
}

#ImageSlideShow .ISSControls {
top: 11px;
height: 500px;
}

#ImageSlideShow .FilmStrip {
height: 80px;
background-color: #CCCCCC;
}

#ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {
width: 25px;
height: 80px;
}

#ImageSlideShow .FilmStripTrack {
height: 80px;
}

#ImageSlideShow .FilmStripContainer {
height: 80px;
}

#ImageSlideShow .FilmStripPanel {
height: 80px;
padding-left: 10px;
margin-right: 0px;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #AAAAAA;
width: 70px;
height: 47px;
margin: 4px 4px 4px 4px;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #FFFFFF;
border-color: #FF0000;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #AAAAAA;
}