#container {

    width: 580px;

    padding: 10px;

    margin: 0 auto;

    position: relative;

    z-index: 0;

}



#example {

    width: 600px;

    height: 350px;

    position: relative;

}



#ribbon {

    position: absolute;

    top: -3px;

    left: -15px;

    z-index: 500;

}



#frame {

    position: absolute;

    z-index: 0;

    width: 739px;

    height: 341px;

    top: -3px;

    left: -80px;

}



#slides {

    position: absolute;

    top: 15px;

    left: 4px;

    z-index: 100;

}



#slides .next,
#slides .prev {

    position: absolute;

    top: 107px;

    left: -39px;

    width: 24px;

    height: 43px;

    display: block;

    z-index: 101;

}



.slides_container {

    width: 570px;

    height: 270px;

    overflow: hidden;

    position: relative;

}



#slides .next {

    left: 585px;

}



.pagination {

    margin: 26px auto 0;

    width: 100px;

}



.pagination li {

    float: left;

    margin: 0 1px;

}



.pagination li a {

    display: block;

    width: 12px;

    height: 0;

    padding-top: 12px;

    background-image: url(../img/pagination.png);

    background-position: 0 0;

    float: left;

    overflow: hidden;

}



.pagination li.current a {

    background-position: 0 -12px;

}



.caption {

    position: absolute;

    bottom: -35px;

    height: 30px;

    padding: 5px 20px 0 20px;

    background: #000;

    background: rgba(0, 0, 0, .5);

    width: 540px;

    font-size: 1.3em;

    line-height: 1.33;

    color: #fff;

    border-top: 1px solid #000;

    text-shadow: none;

}