page control css

gistfile1.css

#pagewrapper {
	position:absolute;
	z-index:1;
	top: 15px; bottom:0;
	width:724px;
	overflow:hidden;
	height: 974px;
}

#pageflip {
	float:left;
/*	width:3072px;  */
	height:100%;
}

.scrollerwrapper {
	position:relative; z-index:2;
	display:block; float:left;
	width:724px; height:100%;
	overflow:hidden;
}

.scroller {
	-webkit-transform:translate3d(0,0,0);
	padding: 90px 115px 64px 100px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
	height: 969px;
	-webkit-column-width: 509px; 
	-webkit-column-gap: 215px;
	width: auto;
}


.resize1 p { font-size: 18px; }
.resize2 p { font-size: 22px; }
.resize3 p { font-size: 26px; }

.pg1 .scrollerwrapper { width:724px; }
.pg2 .scrollerwrapper { width:1448px; }
.pg3 .scrollerwrapper { width:2172px; }
.pg4 .scrollerwrapper { width:2896px; }
.pg5 .scrollerwrapper { width:3620px; }
.pg6 .scrollerwrapper { width:4344px; }
.pg7 .scrollerwrapper { width:5068px; }
.pg8 .scrollerwrapper { width:5792px; }
.pg9 .scrollerwrapper { width:6516px; }
.pg10 .scrollerwrapper { width:7240px; }
.pg11 .scrollerwrapper { width:7964px; }
.pg12 .scrollerwrapper { width:8688px; }
.pg13 .scrollerwrapper { width:9412px; }
.pg14 .scrollerwrapper { width:10136px; }
.pg15 .scrollerwrapper { width:10860px; }
.pg16 .scrollerwrapper { width:11584px; }
.pg17 .scrollerwrapper { width:12308px; }
.pg18 .scrollerwrapper { width:13032px; }
.pg19 .scrollerwrapper { width:13756px; }
.pg20 .scrollerwrapper { width:14480px; }
.pg21 .scrollerwrapper { width:15204px; }
.pg22 .scrollerwrapper { width:15928px; }
.pg23 .scrollerwrapper { width:16652px; }
.pg24 .scrollerwrapper { width:17376px; }
.pg25 .scrollerwrapper { width:18100px; }
.pg26 .scrollerwrapper { width:18824px; }
.pg27 .scrollerwrapper { width:19548px; }
.pg28 .scrollerwrapper { width:20272px; }
.pg29 .scrollerwrapper { width:20996px; }
.pg30 .scrollerwrapper { width:21720px; }

.pg1 .resize1 .scrollerwrapper { width:724px; }
.pg2 .resize1 .scrollerwrapper { width:1448px; }
.pg3 .resize1 .scrollerwrapper { width:2172px; }
.pg4 .resize1 .scrollerwrapper { width:2896px; }
.pg5 .resize1 .scrollerwrapper { width:3620px; }
.pg6 .resize1 .scrollerwrapper { width:4344px; }
.pg7 .resize1 .scrollerwrapper { width:5068px; }
.pg8 .resize1 .scrollerwrapper { width:5792px; }
.pg9 .resize1 .scrollerwrapper { width:6516px; }
.pg10 .resize1 .scrollerwrapper { width:7240px; }
.pg11 .resize1 .scrollerwrapper { width:7964px; }
.pg12 .resize1 .scrollerwrapper { width:8688px; }
.pg13 .resize1 .scrollerwrapper { width:9412px; }
.pg14 .resize1 .scrollerwrapper { width:10136px; }
.pg15 .resize1 .scrollerwrapper { width:10860px; }
.pg16 .resize1 .scrollerwrapper { width:11584px; }
.pg17 .resize1 .scrollerwrapper { width:12308px; }
.pg18 .resize1 .scrollerwrapper { width:13032px; }
.pg19 .resize1 .scrollerwrapper { width:13756px; }
.pg20 .resize1 .scrollerwrapper { width:14480px; }
.pg21 .resize1 .scrollerwrapper { width:15204px; }
.pg22 .resize1 .scrollerwrapper { width:15928px; }
.pg23 .resize1 .scrollerwrapper { width:16652px; }
.pg24 .resize1 .scrollerwrapper { width:17376px; }
.pg25 .resize1 .scrollerwrapper { width:18100px; }
.pg26 .resize1 .scrollerwrapper { width:18824px; }
.pg27 .resize1 .scrollerwrapper { width:19548px; }
.pg28 .resize1 .scrollerwrapper { width:20272px; }
.pg29 .resize1 .scrollerwrapper { width:20996px; }
.pg30 .resize1 .scrollerwrapper { width:21720px; }

.pg1 .resize2 .scrollerwrapper { width:724px; }
.pg2 .resize2 .scrollerwrapper { width:2172px; }
.pg3 .resize2 .scrollerwrapper { width:2896px; }
.pg4 .resize2 .scrollerwrapper { width:3620px; }
.pg5 .resize2 .scrollerwrapper { width:5068px; }
.pg6 .resize2 .scrollerwrapper { width:5792px; }
.pg7 .resize2 .scrollerwrapper { width:6516px; }
.pg8 .resize2 .scrollerwrapper { width:7964px; }
.pg9 .resize2 .scrollerwrapper { width:8688px; }
.pg10 .resize2 .scrollerwrapper { width:9412px; }
.pg11 .resize2 .scrollerwrapper { width:10860px; }
.pg12 .resize2 .scrollerwrapper { width:11584px; }
.pg13 .resize2 .scrollerwrapper { width:12308px; }
.pg14 .resize2 .scrollerwrapper { width:13756px; }
.pg15 .resize2 .scrollerwrapper { width:14480px; }
.pg16 .resize2 .scrollerwrapper { width:15204px; }
.pg17 .resize2 .scrollerwrapper { width:16652px; }
.pg18 .resize2 .scrollerwrapper { width:17376px; }
.pg19 .resize2 .scrollerwrapper { width:18100px; }
.pg20 .resize2 .scrollerwrapper { width:19548px; }
.pg21 .resize2 .scrollerwrapper { width:20272px; }
.pg22 .resize2 .scrollerwrapper { width:20996px; }
.pg23 .resize2 .scrollerwrapper { width:22444px; }
.pg24 .resize2 .scrollerwrapper { width:23168px; }
.pg25 .resize2 .scrollerwrapper { width:23892px; }
.pg26 .resize2 .scrollerwrapper { width:25340px; }
.pg27 .resize2 .scrollerwrapper { width:26064px; }
.pg28 .resize2 .scrollerwrapper { width:26788px; }
.pg29 .resize2 .scrollerwrapper { width:28236px; }
.pg30 .resize2 .scrollerwrapper { width:28960px; }

.pg1 .resize3 .scrollerwrapper { width:1448px; }
.pg2 .resize3 .scrollerwrapper { width:2896px; }
.pg3 .resize3 .scrollerwrapper { width:4344px; }
.pg4 .resize3 .scrollerwrapper { width:5068px; }
.pg5 .resize3 .scrollerwrapper { width:6516px; }
.pg6 .resize3 .scrollerwrapper { width:7964px; }
.pg7 .resize3 .scrollerwrapper { width:9412px; }
.pg8 .resize3 .scrollerwrapper { width:10860px; }
.pg9 .resize3 .scrollerwrapper { width:12308px; }
.pg10 .resize3 .scrollerwrapper { width:13756px; }
.pg11 .resize3 .scrollerwrapper { width:14480px; }
.pg12 .resize3 .scrollerwrapper { width:15928px; }
.pg13 .resize3 .scrollerwrapper { width:17376px; }
.pg14 .resize3 .scrollerwrapper { width:18824px; }
.pg15 .resize3 .scrollerwrapper { width:20272px; }
.pg16 .resize3 .scrollerwrapper { width:21720px; }
.pg17 .resize3 .scrollerwrapper { width:22444px; }
.pg18 .resize3 .scrollerwrapper { width:23892px; }
.pg19 .resize3 .scrollerwrapper { width:25340px; }
.pg20 .resize3 .scrollerwrapper { width:26788px; }
.pg21 .resize3 .scrollerwrapper { width:28236px; }
.pg22 .resize3 .scrollerwrapper { width:29684px; }
.pg23 .resize3 .scrollerwrapper { width:31132px; }
.pg24 .resize3 .scrollerwrapper { width:31856px; }
.pg25 .resize3 .scrollerwrapper { width:33304px; }
.pg26 .resize3 .scrollerwrapper { width:34752px; }
.pg27 .resize3 .scrollerwrapper { width:36200px; }
.pg28 .resize3 .scrollerwrapper { width:37648px; }
.pg29 .resize3 .scrollerwrapper { width:39096px; }
.pg30 .resize3 .scrollerwrapper { width:40544px; }

.indicator {
	width: 100%;
	text-align: center;
	position: relative;
	top: 0;
}

.indicator > span {
	text-indent:-9999em;
	width: 4px; height: 4px;
	-webkit-border-radius:4px;
	background: #b2b4b4;
	overflow:hidden;
	margin-right: 16px;
	display: none;
}

.indicator > span.active {
	background: #757676;
}

.indicator > span:last-child {
	margin:0;
}

.pg1 .indicator span:nth-child(-n+1) { display: inline-block; }
.pg2 .indicator span:nth-child(-n+2) { display: inline-block; }
.pg3 .indicator span:nth-child(-n+3) { display: inline-block; }
.pg4 .indicator span:nth-child(-n+4) { display: inline-block; }
.pg5 .indicator span:nth-child(-n+5) { display: inline-block; }
.pg6 .indicator span:nth-child(-n+6) { display: inline-block; }
.pg7 .indicator span:nth-child(-n+7) { display: inline-block; }
.pg8 .indicator span:nth-child(-n+8) { display: inline-block; }
.pg9 .indicator span:nth-child(-n+9) { display: inline-block; }
.pg10 .indicator span:nth-child(-n+10) { display: inline-block; }
.pg11 .indicator span:nth-child(-n+11) { display: inline-block; }
.pg12 .indicator span:nth-child(-n+12) { display: inline-block; }
.pg13 .indicator span:nth-child(-n+13) { display: inline-block; }
.pg14 .indicator span:nth-child(-n+14) { display: inline-block; }
.pg15 .indicator span:nth-child(-n+15) { display: inline-block; }
.pg16 .indicator span:nth-child(-n+16) { display: inline-block; }
.pg17 .indicator span:nth-child(-n+17) { display: inline-block; }
.pg18 .indicator span:nth-child(-n+18) { display: inline-block; }
.pg19 .indicator span:nth-child(-n+19) { display: inline-block; }
.pg20 .indicator span:nth-child(-n+20) { display: inline-block; }
.pg21 .indicator span:nth-child(-n+21) { display: inline-block; }
.pg22 .indicator span:nth-child(-n+22) { display: inline-block; }
.pg23 .indicator span:nth-child(-n+23) { display: inline-block; }
.pg24 .indicator span:nth-child(-n+24) { display: inline-block; }
.pg25 .indicator span:nth-child(-n+25) { display: inline-block; }
.pg26 .indicator span:nth-child(-n+26) { display: inline-block; }
.pg27 .indicator span:nth-child(-n+27) { display: inline-block; }
.pg28 .indicator span:nth-child(-n+28) { display: inline-block; }
.pg29 .indicator span:nth-child(-n+29) { display: inline-block; }
.pg30 .indicator span:nth-child(-n+30) { display: inline-block; }

.pg1 .resize1 .indicator span:nth-child(-n+1) { display: inline-block; }
.pg2 .resize1 .indicator span:nth-child(-n+2) { display: inline-block; }
.pg3 .resize1 .indicator span:nth-child(-n+3) { display: inline-block; }
.pg4 .resize1 .indicator span:nth-child(-n+4) { display: inline-block; }
.pg5 .resize1 .indicator span:nth-child(-n+5) { display: inline-block; }
.pg6 .resize1 .indicator span:nth-child(-n+6) { display: inline-block; }
.pg7 .resize1 .indicator span:nth-child(-n+7) { display: inline-block; }
.pg8 .resize1 .indicator span:nth-child(-n+8) { display: inline-block; }
.pg9 .resize1 .indicator span:nth-child(-n+9) { display: inline-block; }
.pg10 .resize1 .indicator span:nth-child(-n+10) { display: inline-block; }
.pg11 .resize1 .indicator span:nth-child(-n+11) { display: inline-block; }
.pg12 .resize1 .indicator span:nth-child(-n+12) { display: inline-block; }
.pg13 .resize1 .indicator span:nth-child(-n+13) { display: inline-block; }
.pg14 .resize1 .indicator span:nth-child(-n+14) { display: inline-block; }
.pg15 .resize1 .indicator span:nth-child(-n+15) { display: inline-block; }
.pg16 .resize1 .indicator span:nth-child(-n+16) { display: inline-block; }
.pg17 .resize1 .indicator span:nth-child(-n+17) { display: inline-block; }
.pg18 .resize1 .indicator span:nth-child(-n+18) { display: inline-block; }
.pg19 .resize1 .indicator span:nth-child(-n+19) { display: inline-block; }
.pg20 .resize1 .indicator span:nth-child(-n+20) { display: inline-block; }
.pg21 .resize1 .indicator span:nth-child(-n+21) { display: inline-block; }
.pg22 .resize1 .indicator span:nth-child(-n+22) { display: inline-block; }
.pg23 .resize1 .indicator span:nth-child(-n+23) { display: inline-block; }
.pg24 .resize1 .indicator span:nth-child(-n+24) { display: inline-block; }
.pg25 .resize1 .indicator span:nth-child(-n+25) { display: inline-block; }
.pg26 .resize1 .indicator span:nth-child(-n+26) { display: inline-block; }
.pg27 .resize1 .indicator span:nth-child(-n+27) { display: inline-block; }
.pg28 .resize1 .indicator span:nth-child(-n+28) { display: inline-block; }
.pg29 .resize1 .indicator span:nth-child(-n+29) { display: inline-block; }
.pg30 .resize1 .indicator span:nth-child(-n+30) { display: inline-block; }

.pg1 .resize2 .indicator span:nth-child(-n+1) { display: inline-block; }
.pg2 .resize2 .indicator span:nth-child(-n+3) { display: inline-block; }
.pg3 .resize2 .indicator span:nth-child(-n+4) { display: inline-block; }
.pg4 .resize2 .indicator span:nth-child(-n+5) { display: inline-block; }
.pg5 .resize2 .indicator span:nth-child(-n+7) { display: inline-block; }
.pg6 .resize2 .indicator span:nth-child(-n+8) { display: inline-block; }
.pg7 .resize2 .indicator span:nth-child(-n+9) { display: inline-block; }
.pg8 .resize2 .indicator span:nth-child(-n+11) { display: inline-block; }
.pg9 .resize2 .indicator span:nth-child(-n+12) { display: inline-block; }
.pg10 .resize2 .indicator span:nth-child(-n+13) { display: inline-block; }
.pg11 .resize2 .indicator span:nth-child(-n+15) { display: inline-block; }
.pg12 .resize2 .indicator span:nth-child(-n+16) { display: inline-block; }
.pg13 .resize2 .indicator span:nth-child(-n+17) { display: inline-block; }
.pg14 .resize2 .indicator span:nth-child(-n+19) { display: inline-block; }
.pg15 .resize2 .indicator span:nth-child(-n+20) { display: inline-block; }
.pg16 .resize2 .indicator span:nth-child(-n+21) { display: inline-block; }
.pg17 .resize2 .indicator span:nth-child(-n+23) { display: inline-block; }
.pg18 .resize2 .indicator span:nth-child(-n+24) { display: inline-block; }
.pg19 .resize2 .indicator span:nth-child(-n+25) { display: inline-block; }
.pg20 .resize2 .indicator span:nth-child(-n+27) { display: inline-block; }
.pg21 .resize2 .indicator span:nth-child(-n+28) { display: inline-block; }
.pg22 .resize2 .indicator span:nth-child(-n+29) { display: inline-block; }
.pg23 .resize2 .indicator span:nth-child(-n+31) { display: inline-block; }
.pg24 .resize2 .indicator span:nth-child(-n+32) { display: inline-block; }
.pg25 .resize2 .indicator span:nth-child(-n+33) { display: inline-block; }
.pg26 .resize2 .indicator span:nth-child(-n+35) { display: inline-block; }
.pg27 .resize2 .indicator span:nth-child(-n+36) { display: inline-block; }
.pg28 .resize2 .indicator span:nth-child(-n+37) { display: inline-block; }
.pg29 .resize2 .indicator span:nth-child(-n+39) { display: inline-block; }
.pg30 .resize2 .indicator span:nth-child(-n+40) { display: inline-block; }

.pg1 .resize3 .indicator span:nth-child(-n+2) { display: inline-block; }
.pg2 .resize3 .indicator span:nth-child(-n+4) { display: inline-block; }
.pg3 .resize3 .indicator span:nth-child(-n+6) { display: inline-block; }
.pg4 .resize3 .indicator span:nth-child(-n+7) { display: inline-block; }
.pg5 .resize3 .indicator span:nth-child(-n+9) { display: inline-block; }
.pg6 .resize3 .indicator span:nth-child(-n+11) { display: inline-block; }
.pg7 .resize3 .indicator span:nth-child(-n+13) { display: inline-block; }
.pg8 .resize3 .indicator span:nth-child(-n+15) { display: inline-block; }
.pg9 .resize3 .indicator span:nth-child(-n+17) { display: inline-block; }
.pg10 .resize3 .indicator span:nth-child(-n+19) { display: inline-block; }
.pg11 .resize3 .indicator span:nth-child(-n+20) { display: inline-block; }
.pg12 .resize3 .indicator span:nth-child(-n+22) { display: inline-block; }
.pg13 .resize3 .indicator span:nth-child(-n+24) { display: inline-block; }
.pg14 .resize3 .indicator span:nth-child(-n+26) { display: inline-block; }
.pg15 .resize3 .indicator span:nth-child(-n+28) { display: inline-block; }
.pg16 .resize3 .indicator span:nth-child(-n+30) { display: inline-block; }
.pg17 .resize3 .indicator span:nth-child(-n+31) { display: inline-block; }
.pg18 .resize3 .indicator span:nth-child(-n+33) { display: inline-block; }
.pg19 .resize3 .indicator span:nth-child(-n+35) { display: inline-block; }
.pg20 .resize3 .indicator span:nth-child(-n+37) { display: inline-block; }
.pg21 .resize3 .indicator span:nth-child(-n+39) { display: inline-block; }
.pg22 .resize3 .indicator span:nth-child(-n+41) { display: inline-block; }
.pg23 .resize3 .indicator span:nth-child(-n+43) { display: inline-block; }
.pg24 .resize3 .indicator span:nth-child(-n+44) { display: inline-block; }
.pg25 .resize3 .indicator span:nth-child(-n+46) { display: inline-block; }
.pg26 .resize3 .indicator span:nth-child(-n+48) { display: inline-block; }
.pg27 .resize3 .indicator span:nth-child(-n+50) { display: inline-block; }
.pg28 .resize3 .indicator span:nth-child(-n+52) { display: inline-block; }
.pg29 .resize3 .indicator span:nth-child(-n+54) { display: inline-block; }
.pg30 .resize3 .indicator span:nth-child(-n+56) { display: inline-block; }