html { /* position:fixed; */ }
body { opacity:0; }
html, body { margin:0; padding:0; width:100%; overflow-x:hidden; background:#eee; /* z-index:100; */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-ms-user-select: none;
}

h1 {height:80px; text-align:center; max-width:1200px; width:100%; letter-spacing:1px; color:#2687DC; padding:20px 0 0 0; margin:0 auto 35px auto; border-bottom:4px solid darkred; background:#225; text-shadow:-1px -1px 0 #57BBFF,1px 1px 0 #2852FF; font:bold 40px Comic Sans MS; }

/* hr { clear:both; margin:40px auto; width:500px; padding:0; border:0; height:1px; background:silver; } */
hr { margin:26px auto; width:98%; border:0; height:0.8px; background:silver;
	background-image: -webkit-linear-gradient(left, silver, #999, #eee);
	background-image:    -moz-linear-gradient(left, silver, #999, #eee);
	background-image:     -ms-linear-gradient(left, silver, #999, #eee);
	background-image:      -o-linear-gradient(left, silver, #999, #eee);
}

.hr { height:0.8px;background:#ccc;position:relative;margin:20px auto;width:90%;
	background-image: -webkit-linear-gradient(left, #eee, #c8c8c8, #c8c8c8, #eee);
	background-image:    -moz-linear-gradient(left, #eee, #c8c8c8, #c8c8c8, #eee);
	background-image:     -ms-linear-gradient(left, #eee, #c8c8c8, #c8c8c8, #eee);
	background-image:      -o-linear-gradient(left, #eee, #c8c8c8, #c8c8c8, #eee);
 }
 
#refresh { height:28px; width:28px; display:block; float:right; margin:12px 20px 0 0; }
#refresh img { width:100%; }

.starthold, .finishhold, .hold { position:absolute; overflow:hidden; width:3px; height:3px;
-webkit-border-radius:2.5px;
-moz-border-radius:2.5px;
border-radius:2.5px;
}
.starthold { background:#ffaf0a; border-top:1px solid #ffcd28; border-left:1px solid #ffcd28; border-right:1px solid #e18700; border-bottom:1px solid #e18700; }
.finishhold { background:#cc0000; border-top:1px solid #ff5555; border-left:1px solid #ff5555; border-right:1px solid #880000; border-bottom:1px solid #880000; }
.hold { background:#00BB00; border-top:1px solid #10FF10; border-left:1px solid #10FF10; border-right:1px solid #007700; border-bottom:1px solid #007700; }

.num { position:absolute; top:-2px; left:-2.5px; color:#2486DC; font:normal 11px 'arial narrow',arial; 
	display:inline-block; border:0.7px solid #444; background:#eee; height:11px; width:6px; padding:1px 3px 2px 3px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}

.lf {display:inline-block;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:7px solid darkred;height:0;width:0; margin:0 4px 2px 0;}

#container {
	-ms-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	transform:scale(1.05);
	height:170px;
	width:210px;
	position:relative;
	margin:30px auto 80px;
	-webkit-perspective:1100px;
	-moz-perspective:1100px;
	-o-perspective:1100px;
	perspective:1100px;
}

.ins { position:absolute; bottom:-40px; left:0; color:#000; font:italic normal 14px sans-serif,arial; text-decoration:none; width:100%; line-height:13px; }

@media (max-width:500px) {
	#container {-ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); height:160px;}
}
@media (max-width:465px) {
	#container {-ms-transform: scale(.95); -webkit-transform: scale(.95); transform: scale(.95); height:150px;}
}
@media (max-width:430px) {
	#container {-ms-transform: scale(.9); -webkit-transform: scale(.9); transform: scale(.9); height:140px;}
}
@media (max-width:398px) {
	#container {-ms-transform: scale(.85); -webkit-transform: scale(.85); transform: scale(.85); height:130px;}
}
@media (max-width:367px) {
	#container {-ms-transform: scale(.8); -webkit-transform: scale(.8); transform: scale(.8); height:120px;}
}
@media (max-width:330px) {
	#container {-ms-transform: scale(.75); -webkit-transform: scale(.75); transform: scale(.75); height:110px; }
}

#options, #links { max-width:500px; margin:0px auto; }
#links { margin-bottom:20px; }

#options a, #links a  { display:block; max-width:500px; margin:0; padding:0; height:40px; line-height:40px; font:20px arial; text-decoration:none; margin-bottom:15px; color:#999; text-shadow:0.7px 0.7px 0px #666; letter-spacing:1px; margin-left:5px; }

#links img { height:20px; width:20px; padding:5px; display:inline-block; border:4px solid #2687DC; margin:0 15px 0 24%; vertical-align:middle; -webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#options #V0select span,
#options #V1select span,
#options #V2select span,
#options #V3select span, 
#options #V4select span, 
#options #V5select span,
#options #V6select span { height:32px; width:32px; display:inline-block; border:4px solid #2687DC; margin:0 20px 0 24%; vertical-align:middle; background-repeat:no-repeat;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}

#options #V0select span { background:#F4DA94 url(images/BGcolor.png); } /* the circle icons */
#options #V1select span { background:#96F494 url(images/BGcolor2.png); }
#options #V2select span { background:#8ECEF8 url(images/BGcolor3.png); }
#options #V3select span,
#options #V4select span,
#options #V5select span,
#options #V6select span { background:#fff url(images/cyberclimber.png); }

#options #V3select span { background-position:-54px -203px; }
#options #V4select span { background-position:-730px -203px; }
#options #V5select span { background-position:-154px -203px; }
#options #V6select span { background-position:-830px -205px; }

#carousel {
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-transform: rotateX( -8.5deg ) translateZ( -288px );
	 -moz-transform: rotateX( -8.5deg ) translateZ( -288px );
	   -o-transform: rotateX( -8.5deg ) translateZ( -288px );
		  transform: rotateX( -8.5deg ) translateZ( -288px );
	-webkit-transform-style: preserve-3d;
	 -moz-transform-style: preserve-3d;
	   -o-transform-style: preserve-3d;
		  transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	 -moz-transition: -moz-transform 1s;
	   -o-transition: -o-transform 1s;
		  transition: transform 1s;
}

#carousel a {
	margin:0;
	padding:0;
	display:block;
	position:absolute;
	width:186px;
	height:140px;
	left:10px;
	top:0px;
	-webkit-box-shadow: box-shadow: 0 0 1px 1px #666;
	-moz-box-shadow: box-shadow: 0 0 1px 1px #666;
	box-shadow: 0 0 1px 1px #666;
	text-decoration:none;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; /* IE 8 */
	filter: alpha(opacity=95); /* IE 5-7 */
	-moz-opacity: 0.95; /* Netscape */
	-khtml-opacity: 0.95; /* Safari 1.x */
	opacity: 0.95; /* Good browsers */
}

#V-0 {
	-webkit-transform: rotateY(   0deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY(   0deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY(   0deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY(   0deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-1 {
	-webkit-transform: rotateY(  40deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY(  40deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY(  40deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY(  40deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-2 {
	-webkit-transform: rotateY(  80deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY(  80deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY(  80deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY(  80deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-3 {
	-webkit-transform: rotateY( 120deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 120deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 120deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 120deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-4 {
	-webkit-transform: rotateY( 160deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 160deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 160deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 160deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-5 {
	-webkit-transform: rotateY( 200deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 200deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 200deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 200deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-6 {
	-webkit-transform: rotateY( 240deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 240deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 240deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 240deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-7 {
	-webkit-transform: rotateY( 280deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 280deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 280deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 280deg ) rotateX( -8.5deg ) translateZ( 288px );
}
#V-8 {
	-webkit-transform: rotateY( 320deg ) rotateX( -8.5deg ) translateZ( 288px );
	 -moz-transform: rotateY( 320deg ) rotateX( -8.5deg ) translateZ( 288px );
	   -o-transform: rotateY( 320deg ) rotateX( -8.5deg ) translateZ( 288px );
		  transform: rotateY( 320deg ) rotateX( -8.5deg ) translateZ( 288px );
}

@media (max-height:780px) {
	h1 { height:50px; padding:0; border-bottom:3px solid darkred; font:bold 30px Comic Sans MS; line-height:50px; }
}

@media (max-height:715px) {
	#container { margin-top:20px; }
	h1 { margin-bottom:20px; }
}

@media (max-height:670px) {
	#options a { height:34px; line-height:34px; font:20px arial; margin-bottom:18px; }
}

@media (max-width:590px) {
	#options a, #links a { height:32px; line-height:32px; font:18px arial; margin:10px 10px 18px 0; }
	#options #V0select span,
	#options #V1select span,
	#options #V2select span,
	#options #V3select span, 
	#options #V4select span, 
	#options #V5select span,
	#options #V6select span, { border:3px solid #2687DC; margin:0 10px 0 15%; }
}