body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none outside none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: "";
}
abbr, acronym {
border: 0 none;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
p {
margin: 0 0 15px;
}
body {
font: 16px/20px Arial, Tahoma, Verdana, sans-serif;
height: 100%;
width: 100%;
color: #666;
}
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
border: 3px solid #000000;
border-radius: 5px;
}
#slider ul.slider-list {
position: absolute;
left: 0;
}
#slider .slider-list li {
float: left;
width: 600px;
height: 400px;
}
#slider .prev, #slider .next {
width: 39px;
height: 50px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("img/slide-arrow.png") no-repeat 0 0;
margin: auto;
text-indent: -9999px;
}
#slider .next {
left: auto;
right: 0;
background-position: 100% 0;
}
.pagination {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
}
.pagination li {
background: #000;
display: inline-block;
height: 15px;
margin: 0 3px;
width: 15px;
border-radius: 50%;
text-indent: -9999px;
box-shadow: 0 0 3px 1px #FFF;
opacity: 0.9;
cursor: pointer;
}
.pagination li.current {
opacity: 1;
box-shadow: 0 0 1px 2px #ff0000;
}