/*
    Load CSS before JavaScript
*/

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/
.slides_container {
    width:900px;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/
.slides_container div.slide {
    width: 900px;
    height: 375px;
    display:block;
}

/*
    Set the size of your carousel items
*/
.item {
    float:left;
    width:100%;
    height:100%;
}

/*
    Optional:
    Reset list default style
*/
.pagination {
    list-style:none;
    margin:0;
    padding:0;
}

/*
    Optional:
    Show the current slide in the pagination
*/
.pagination .current a {}

a.prev {
    position: relative;
    float: left;
    bottom: 163px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('./images/banner-arrow-left.png');
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    z-index: 100;
    margin-bottom: -40px;
}

a.prev:hover {
    background-image: url('./images/banner-arrow-left-2.png');
}

a.next {
    position: relative;
    float: right;
    bottom: 163px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('./images/banner-arrow-right.png');
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    z-index: 100;
    margin-bottom: -40px;
}

a.next:hover {
    background-image: url('./images/banner-arrow-right-2.png');
}

.banner-content ul.pagination {
    display: block;
    position: relative;
    bottom: 310px;
    text-align: right;
}

.banner-content ul.pagination li {
    display: inline-block;
    width: 12px;
    height: 13px;
    background-image: url('./images/grey-ball.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.banner-content ul.pagination li.current {
    background-image: url('./images/red-ball.png');
}

.banner-content ul.pagination li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: transparent;
}