* {
	margin:0;
	padding:0;
}
div {
	width:500px;
	margin:0 auto;
	height:1000px;
	font-size:50px;
	text-align:center;
	line-height:1000px;
}
#section1 {
	background:#6fc27a;
}
#section2 {
	background:#185941;
}
#section3 {
	background:#4a2c41;
}
#section4 {
	background:#681541;
	height:500px;
	line-height:500px;
}
#section5 {
	background:#0998d2;
}
#section6 {
	background:#003c77;
}
#side {
	list-style:none;
	position:fixed;
	top:50%;
	margin-top:-90px;
	left:20px;
	display:none;
	cursor:pointer;
}
#side li {
	width:30px;
	height:30px;
	border:1px solid #ccc;
	border-bottom:none;
	line-height:30px;
	text-align:center;
	position:relative;
	background:#d0d1d5;
}
#side li span {
	position:absolute;
	left:0;
	width:30px;
	height:30px;
	border:1px solid #ccc;
	border-left:none;
	/* display:none;
	*/
            z-index:-10;
}
#side li:first-child span,#side li:nth-child(2) span,#side li:nth-child(3) span,#side li:nth-child(4) span,#side li:nth-child(5) span,#side li:nth-child(6) span {
	top:-1px;
}
#side li:last-child {
	border-bottom:1px solid #ccc;
}