@charset "utf-8";

/* basic_fs.css - version 0.1 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */

/* 110915 cc - i am adjusting this file for use with uc irvine health affairs web sites.
	the default gallery image is 700x467 and the parent div has no class assigned.
	the gallery embedded in home pages has an image size of 228x152 and a parent div of class "gallery".
*/

/* 120224 cc - implemented global look and feel changes approved my marketing web team sometime prior to 111219. */

/* 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 manually 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;
	background-color: #FFF;
	position: relative;
/*	110915 cc */
	border: none; margin: 0; padding: 0;
/*	border: solid 1px #AAA;
	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.
 */
/* 120224 cc - created greater specificity to overcome some legacy page-embedded styles */
.BasicSlideShowFS .BasicSlideShowFSCenter .ISSSlideTitle {
	position: absolute;
/* 110915 cc */
	right:0px; /* 120224 cc - reversed - reduced from 4px */
        top:1px; 
        color:#fff; 
	min-height:0; 
        width:684px; /* 120224 cc - reduced from 686px */
	z-index:100; 
        padding:8px; 
        text-align:left;
/*	right: 0;
	top: -18px;
	color: #AAA; */
/* 120224 cc */
/*	filter:alpha(opacity=75); -moz-opacity:0.75; opacity:.75;*/
	filter:alpha(opacity=0); -moz-opacity:0; opacity:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: hidden;
	text-transform: none;
/* 120224 cc */
	background-color:#000000;
}
/* 120224 cc */
.BasicSlideShowFS .ISSSlideTitle:hover {filter:alpha(opacity=75); -moz-opacity:0.75; opacity:.75;}

/* 110915 cc - this is to override a position:relative setting on #col_center_expanded */
#col_center_expanded .ISSSlideTitle {position: absolute;}


/* 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;
/*	110915 cc */
	height: 467px; 
	margin: 0;
/*	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; 
/* 120224 cc */
/*	border: solid 1px #AAA; */
	border: 1px solid #000000;
	background-color: #000;
}

.gallery .BasicSlideShowFS .ISSClip {height: 152px; border:0px;}


/* 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;
}
/* 110915 cc - this is to override a position:relative setting on #col_center_expanded */
#col_center_expanded .ISSSlide {position: absolute;}

/* 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;
}
/* 110915 cc - this is to override a position:relative setting on #col_center_expanded */
#col_center_expanded .ISSControls {position: absolute;}

/* 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;
/* 120224 cc */
/*	background-color: #CCC;*/
	background-color:#000000;

}

/* 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: 7px;  /* Spacing on the left of the thumbs */
                            /* 120224 cc - reduced from 10px; */
	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;
/* 110915 cc */
	border: 2px solid #1773C0;
/*	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;
/* 110915 cc */
	height: 53px;	/* 120224 cc - increased from 52px; */
        width: 79px; 	/* 120224 cc - increased from 77px; */
        margin: 0; 
        text-indent: 0;
/*	height: 47px;
	width: 56px;
	margin: 4px;
	text-indent: -1000em; */
	background-position: center;
}
.BasicSlideShowFS .FilmStripPanel a span span img {width:77px; height:52px;}

.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;
}