/* basic_fs.css - "BasicSlideShowFS" skin for the Spry Image Slide Show
 *
 * NOTE: this stylesheet was never captured by the Wayback Machine for
 * hinduwa.org.uk. It is a reconstruction that supplies only the structural
 * rules the widget needs (positioning contexts, clipping, stacking). All of
 * the sizes, colours and spacing continue to come from the per-page inline
 * CSS that the archived gallery pages already carry, so the pages keep their
 * original look.
 */

/* ---- widget root (3-sliced: FS / FSLeft > FSRight > FSCenter) ---- */
.BasicSlideShowFS,
.BasicSlideShowFSLeft {
	position: relative;
	margin: 0 auto;
}

.BasicSlideShowFSRight,
.BasicSlideShowFSCenter {
	position: relative;
}

/* ---- slide show name + per-slide title ---- */
.BasicSlideShowFS .ISSName {
	position: absolute;
	left: 10px;
	white-space: nowrap;
	z-index: 3;
}

.BasicSlideShowFS .ISSSlideTitle {
	position: absolute;
	right: 10px;
	white-space: nowrap;
	z-index: 3;
}

/* ---- the clipped viewing area ---- */
.BasicSlideShowFS .ISSClip {
	position: relative;
	overflow: hidden;
}

.BasicSlideShowFS .ISSView {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Each slide stacks in the same place; SpryFadingPanels cross-fades them and
   SpryPanAndZoomPlugin sizes/positions the <img> inside, so do not constrain
   the image here. */
.BasicSlideShowFS .ISSSlide {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.BasicSlideShowFS .ISSSlide img {
	position: absolute;
	border: 0;
}

.BasicSlideShowFS .ISSSlideHidden {
	visibility: hidden;
}

.BasicSlideShowFS .ISSSlideVisible {
	visibility: visible;
}

/* ---- playback controls, overlaid on the clip ---- */
.BasicSlideShowFS .ISSControls {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 4;
	pointer-events: none;
}

.BasicSlideShowFS .ISSControls > * {
	pointer-events: auto;
}

.BasicSlideShowFS .ISSFirstButton,
.BasicSlideShowFS .ISSPreviousButton,
.BasicSlideShowFS .ISSPlayButton,
.BasicSlideShowFS .ISSNextButton,
.BasicSlideShowFS .ISSLastButton {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #000000;
	opacity: 0.35;
	filter: alpha(opacity=35);
	cursor: pointer;
	overflow: hidden;
	text-decoration: none;
}

.BasicSlideShowFS .ISSFirstButton    { left: 8px;  }
.BasicSlideShowFS .ISSPreviousButton { left: 46px; }
.BasicSlideShowFS .ISSNextButton     { right: 46px; }
.BasicSlideShowFS .ISSLastButton     { right: 8px;  }

.BasicSlideShowFS .ISSPlayButton {
	left: 50%;
	margin-left: -16px;
	bottom: 8px;
	top: auto;
	margin-top: 0;
}

.BasicSlideShowFS .ISSFirstButtonHover,
.BasicSlideShowFS .ISSPreviousButtonHover,
.BasicSlideShowFS .ISSPlayButtonHover,
.BasicSlideShowFS .ISSNextButtonHover,
.BasicSlideShowFS .ISSLastButtonHover {
	opacity: 0.75;
	filter: alpha(opacity=75);
}

/* Only one of the play/pause labels shows at a time. */
.BasicSlideShowFS .ISSPauseLabel { display: none; }
.BasicSlideShowFS .ISSPlayLabel  { display: inline; }
.BasicSlideShowFS.ISSPlaying .ISSPauseLabel { display: inline; }
.BasicSlideShowFS.ISSPlaying .ISSPlayLabel  { display: none; }

/* ---- thumbnail film strip (built by SpryThumbnailFilmStripPlugin) ---- */
.BasicSlideShowFS .ISSSlideLinks {
	position: relative;
	clear: both;
}

.BasicSlideShowFS .FilmStrip {
	position: relative;
	overflow: hidden;
}

.BasicSlideShowFS .FilmStripPreviousButton,
.BasicSlideShowFS .FilmStripNextButton {
	position: absolute;
	top: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 2;
}

.BasicSlideShowFS .FilmStripPreviousButton { left: 0; }
.BasicSlideShowFS .FilmStripNextButton     { right: 0; }

/* Simple CSS triangles so the strip is usable without the original arrow art. */
.BasicSlideShowFS .FilmStripPreviousButton:after,
.BasicSlideShowFS .FilmStripNextButton:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -4px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.BasicSlideShowFS .FilmStripPreviousButton:after { border-right: 8px solid #ffffff; }
.BasicSlideShowFS .FilmStripNextButton:after     { border-left: 8px solid #ffffff; }

.BasicSlideShowFS .FilmStripContainer {
	position: relative;
	overflow: hidden;
	margin: 0 25px;
}

.BasicSlideShowFS .FilmStripTrack {
	position: relative;
	left: 0;
	white-space: nowrap;
	font-size: 0;
}

.BasicSlideShowFS .FilmStripPanel {
	display: -moz-inline-box;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;   /* IE7 */
}

.BasicSlideShowFS .FilmStripPanel .ISSSlideLink,
.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkLeft {
	display: block;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
}

.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkRight {
	display: block;
	overflow: hidden;
}

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

/* The page CSS fixes the thumbnail box at a different aspect ratio to the
   thumbnail files themselves, so crop rather than stretch them. */
.BasicSlideShowFS .FilmStripPanel img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	object-position: center;
}

.BasicSlideShowFS .ISSSlideLinkDisabled {
	opacity: 0.45;
	filter: alpha(opacity=45);
}