/* 
    Document   : s3Slider
    Created on : 15.8.2010, 19:19:49
    Author     : MOWODO
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

#slider {
    width: 190px; /* important to be same as image width */
    height: 120px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 0 0 0 20px;
}


#slider1 {
    width: 242px; /* important to be same as image width */
    height: 90px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 0 0 0 0px;
}

#slider2 {
    width: 242px; /* important to be same as image width */
    height: 90px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 0 0 0 0px;
}

#slider3 {
    width: 242px; /* important to be same as image width */
    height: 90px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 0 0 0 0px;
}

#slider4 {
    width: 290px; /* important to be same as image width */
    height: 100px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 0 0 0 0px;
}

#sliderContent {
    width: 190px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
}

#slider1Content {
    width: 242px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
}

#slider2Content {
    width: 242px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
}


#slider3Content {
    width: 242px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
}

#slider4Content {
    width: 290px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
}

.sliderImage {
    float: left;
    position: relative;
    display: none;
}

.slider1Image {
    float: left;
    position: relative;
    display: none;
}
.slider2Image {
    float: left;
    position: relative;
    display: none;
}
.slider3Image {
    float: left;
    position: relative;
    display: none;
}
.slider4Image {
    float: left;
    position: relative;
    display: none;
}

.sliderImage span {
    position: absolute;
    font: 12px/16px "Trebuchet MS", Verdana, sans-serif;
    padding: 10px 13px;
    width: 190px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.slider1Image span {
    position: absolute;
    font: 12px/16px "Trebuchet MS", Verdana, sans-serif;
    padding: 10px 13px;
    width: 242px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.slider2Image span {
    position: absolute;
    font: 12px/16px "Trebuchet MS", Verdana, sans-serif;
    padding: 10px 13px;
    width: 242px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.slider3Image span {
    position: absolute;
    font: 12px/16px "Trebuchet MS", Verdana, sans-serif;
    padding: 10px 13px;
    width: 242px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.slider4Image span {
    position: absolute;
    font: 12px/16px "Trebuchet MS", Verdana, sans-serif;
    padding: 10px 13px;
    width: 290px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.slider_clear {
    clear: both;
}

.sliderImage span strong {
    font-size: 14px;
}

.slider_top {
    top: 0;
    left: 0;
}

.slider_bottom {
    bottom: 0;
    left: 0;
}

slider#ul { 
    list-style-type: none;
}

slider1#ul { 
    list-style-type: none;
}
slider2#ul { 
    list-style-type: none;
}
slider3#ul { 
    list-style-type: none;
}
slider4#ul { 
    list-style-type: none;
}