/*
    Resets defualt browser settings
    reset.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }
*/

/*
    Page style
*/

/*
#container {
    padding:0px;
    margin:0 auto;
    position:relative;
    z-index:0;
    width: 963px;
    height: 448px;
}*/

#example {
    width:963px;
    height:305px;
    position:relative;
}
/*
#ribbon {
    position:absolute;
    top:-8px;
    left:-10px;
    z-index:500;
}*/

#frame {
    position:absolute;
    z-index:0;
    width:963px;
    height:305px;
    top:0px;
    left:0px;
}

/*
    Slideshow
*/

#slides {
    position:absolute;
    top:0px;
    left:0px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:963px;
    overflow:hidden;
    position:relative;
    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:659px;
    height:305px;
    display:block;
}


/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:140px;
    left:-14px;
    width:40px;
    height:40px;
    display:block;
    z-index:101;
}

#slides .next {
    left:938px;
}

/*
    Pagination
*/

.pagination {
    margin:0;
    width:340px;
    text-align: right;
    position: absolute;
    top: 270px;
    left: 0px;
    z-index: 120;
    height:30px;
}
.pagination ul {
    margin: 0;
    padding: 0;
}


.pagination li {
    float:left;
    margin:0 7px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:14px;
    height:0;
    padding-top:14px;
    background-image:url(../images/slides/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -14px;
}

/*
    Caption
*/

.caption {
    z-index:100;
    position:absolute;
    left:656px;
    padding:12px;
    font-size:12px;
    text-align: left;
    top: 352px;
    top:20px;
    color: #FFFFFF;
    border-left: solid 1px #007d9b;
}
.caption_info {
    width: 276px;

}
.caption_text {
    float: left;
    width: 290px;
}

.caption h2 {
    color: #014b6f;
    font-size: 45px;
    margin: 0;
    padding: 0;
    font-weight: 300;
    line-height: 38px;
    padding-bottom: 16px;
}
.caption h3 {
    color: #8bdfe4;
    font-size: 14px;
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
}
.caption  p, .caption li {
    color: #FFFFFF;
    font-size: 14px;
}
.caption li {
    background-image: url(../images/slides/slider-list-item.png);
    background-repeat: no-repeat;
    padding-left: 22px;
    background-position: 0 2px;
    margin-bottom: 4px;
}

.bestof_title {
    position: absolute;
    z-index: 102;
    left: 510px;
    top: 380px;
    width: 450px;
    background-color: #FFFFFF;
}
.bestof_title h2 {
    background-image: url(../images/pic-bestof.gif);
    color: #96aad3;
    text-transform: uppercase;
    font-size: 19px;
    padding: 18px 10px;
    padding-left: 0px;
    background-position: 28px 6px;
    margin: 0;
    padding-bottom: 26px;
}



/* =============================== */
/* =============================== */
/* =============================== */
/* ============== Media queries == */
/* =============================== */
/* =============================== */
/* =============================== */
/*


/*  480px < tablettes < 1000px */

@media only screen and (min-width: 480px) and (max-width:960px) {

#example, #frame {
    width:96%;
    height:305px;

}

/*
    Slides container
*/

.slides_container {
    width:96%;

}

/*
    Each slide

*/

.slides_container div.slide {
    height:305px;
    display:block;


}

#slides .next {
	left:700px;


}

.slides_container div.slide img {
	width:60%;
	height:60%;
}

/*
    Caption
*/

.caption {
    z-index:100;
    position:absolute;
    left:62%;
}

}