* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
	color:#fff;
}
#content {
	width:500px;
	height:300px;
	overflow:hidden;
	position:relative;
	margin:50px auto;
}
#list {
	width:3500px;
	height:300px;
	position:absolute;
	z-index:-999;
}
#list img {
	float:left;
}
#buttons {
	position:absolute;
	z-index:2;
	width:150px;
	left:50%;
	margin-left:-75px;
	bottom:20px;
}
#buttons li {
	list-style:none;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#ddd;
	float:left;
	margin:0 5px;
}
#buttons li.on {
	background:red;
}
.arrow {
	position:absolute;
	width:36px;
	height:50px;
	display:none;
	text-align:center;
	line-height:50px;
	background:rgba(0,0,0,0.3);
	top:50%;
	margin-top:-25px;
}
.arrow:hover {
	background:rgba(0,0,0,0.7);
}
#content:hover .arrow {
	display:block;
}
#prev {
	left:20px;
}
#next {
	right:20px;
}