/*
    Photo Slideshow with Captions 

    @author:    Kien Tran (kientran@kientran.com)
    @version:   1.2
    @date:      5 August 2009 

    This project aims to create a XHTML compliant slideshow
    that supports text captioning that will failover
    correctly on disabled javascript, images, or CSS.

*/


#slidecontainer {
    width: 258px;
	margin-top: -25px;
}

/* the actual container for the slideshow */
#slideshow-box {
    width: 258px;
    min-height: 343px;
    position: relative;
}

#slides {
    width: 258px;
    height: 343px;
	position: relative;
}

/* Individual slide */
.slide {
    width: 258px;
    height: 343px;
    overflow: hidden;
	position: relative;
	top: -20px;
}

.slide a {
    text-decoration: none;
}
.slide a img {
    border: none;
}

/* slide text */
.slide a .title {
    color: white;
    height:  343px;  /* Height of caption box */
    display:  block;
    font-size: 15px;
    text-indent: 8px;
    width:  258px;
    position: relative;
    line-height: 1.7em;
}

.slide a .subtitle {
    display: block;
    font-size: 12px;  /* relative to .title */
    line-height: 1em;
}

/* I use a sprite map to handle the gradient bars */
/* Since the whole slide is under the anchor tag
    a:hover works to change the copy bar */

.spots {
	z-index: 10000;
	position: relative;
	top: 300px;
	left: 100px;
	float: left;
	margin: 0px;
	padding: 0px;
}

.spots a {
    background: url('../i/components/pagination/dots2.png') no-repeat 0 0;
	height: 25px;
	width: 21px;
	display: block;
}

/*Spot On */
.spots a.active {
    background-position: 0px -42px;
}
.spots a:hover  {
    background-position: 0px -21px;
}

.rightarrow {
	position: absolute;
	float: right;
	top: 141px;
	right: 8px;
}
.leftarrow {
	position: absolute;
	float: left;
	top: 141px;
	left: 8px;
}