/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
 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:0px;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;

}
body {
}
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:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/


#container {
	width:580px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:0;
}

#example {
	width:645px;
	height:275px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:500;
	width:646px;
	height:298px;
	top:0px;
	left:0px;
}

/*
	Slideshow
*/

#slides {
	/*position:absolute;
	top:0px;
	left:4px;*/
	z-index:100;
             border:0px solid red;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:690px;
	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 a {
	width:570px;
	height:270px;
	display:block;
}

.slides_container a img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:585px;
}

/*
	Pagination
*/

.pagination {
	margin:-20px auto 0px;
	margin-left:600px;
	width:100px; border:0px solid red;
	position:absolute;
	z-index:1000;
             
}

.pagination ul {
	list-style:none;
             

}
.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
         width:12px;
             

}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url('../../images/pagination.png');
	background-position: 0 0;
	float:left;
         border:0px solid red;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
       Caption
*/

.caption {
       z-index:500;
       position:absolute;
       bottom:0px;
       left:0;
       height:49px;
       padding:5px 20px 0 20px;
       width:690px;
       font-size:13px;
       line-height:1.33;
       font-family:Tahoma;
       color:#fff;
       border:0px solid red;
background: url(../../images/caption-bg.png) transparent repeat 0 0;
              text-shadow:none;
}
.caption p{
              padding-left:10px;
}

.slide {
       width:690px;
       height:322px;
       display:block;
}
 