/* 
    Document   : slideshow
    Created on : 6 Apr, 2009, 3:00:38 PM
    Author     : shikeb
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
#viewContainer {
    position: relative;
    margin-bottom: 17px;
}

#viewContainer h2{
    text-align: center;
    font-size: 15px;
    line-height: 2;
}

#viewContainer .controls{
    height: 28px;
    padding-left: 356px;
    position: relative;
}

#viewContainer .controls li{
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin-right: 9px;
    float: left;
    list-style-type: none;
    font-size: 0px;
    background-position: 0 0;
    text-indent: -9999em;
    overflow: hidden;
}

#previous{
    background-image: url('../img/player1.jpg');
}

#play{
    background-image: url('../img/player2.jpg');
}

#pause{
    background-image: url('../img/player3.jpg');
}

#next{
    background-image: url('../img/player4.jpg');
}

#viewContainer .controls li:hover{
    background-position: 0 -28px ;
}

#content .controls li img{
    position: absolute;
    top: 0;
    left: 0;
    border: none;

}

#content .controls li:hover img, #content .controls li.hover img{
      margin-top: -14px;
}

#content .controls li.clicked img{
    margin-top: -14px;
}

#view {
    clear: both;
    text-align: center;
    width: 541px;
    height: 351px;
    border: 1px solid #2f2f2f;
    margin: 0 auto 17px;
    padding: 10px;
}

#view p{
	text-align: center;
	padding: 10px 150px;
}

#view.waiting {
    background: url('../img/ajax-loader.gif') no-repeat 1% 50%;
}

#view.waiting ul, #view.waiting li {
    background: none;
}

#slideShowContent img {
    position: absolute;
    top: 0;
    left: -6666em;
}

#view li{
    list-style-type: none;
    display: none;
    width: 541px;
    height: 351px;
}

#viewContainer #bigBuy{
    width: 136px;
    position: absolute;
    right: 136px;
    text-align: right;
    background-image: url('../img/addtocart.jpg');
}

#viewContainer #description{
    position: absolute;
    left: 145px;
    width: 136px;
    background-image: url('../img/text.jpg');
}

#mainDiv.slideshow{
    width: 563px;
    margin: 0 auto;
}

#bigBuy a{
    display: block;
    width: 100%;
    height: 100%;
    background: none;
}

#view ul{
    position: relative;
}
#view .imgDesc{
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 541px;
    /*
    opacity: .6;
    filter:alpha(opacity=60);
    */
    background: url(../img/transparency25.png);
    display: block;
    overflow: hidden;
    min-height: 0;
    height: 0;
}


#view .imgDesc *{
    background: transparent;
    padding: 0;
    margin: 0;
}

#viewInner{
    background: none;
    position: relative;
}