@skill-color: rgb(20,30,25);
@link-color: lighten(spin(@skill-color,180),40%);
@normal-color: #999;
@angle-increment: 4deg;


.link-style (@stepno) {
	color: lighten(@link-color, 5%*(@stepno - 1));
}
.fadein (@anim-time: 500ms) {
	-webkit-animation: fadein @anim-time;
	-moz-animation: fadein @anim-time;
	-o-animation: fadein @anim-time;
	animation: fadein @anim-time;
}
.font () { font: 52px/70px Helvetica, Arial, sans-serif; }
.skill-style (@stepno: 1) {
	color:  lighten(@skill-color, 8%*@stepno);
	.skill-rotation(@stepno);
	font-size: 52px-5px*@stepno;
}
.skill-rotation (@stepno) {
	top: -56px*(@stepno - 1)+2.4px*(@stepno - 1)*(@stepno - 1);
	right:  12px+1.2px*(@stepno - 1)*(@stepno - 1);
	-webkit-transform: perspective(500) rotateZ(-@angle-increment*(@stepno - 1));
	-moz-transform: rotate(-@angle-increment*(@stepno - 1));
	-o-transform: rotate(-@angle-increment*(@stepno - 1));
	-ms-transform: rotate(-@angle-increment*(@stepno - 1));
	transform: rotate(-@angle-increment*(@stepno - 1));
}

.no-margin () { margin: 0; padding: 0; }
.center-both(@width: 960px, @height: 200px) {
	position: absolute;
	width: @width;
	height: @height;
	top: 50%;
	left: 50%;
	margin-left: -@width/2;
	margin-top: -@height*4
}

body { font-size: 65%; .font; .no-margin; color: @normal-color; text-shadow: 1px 1px 2px #fff; background: rgb(240, 238, 228) }
em { font-style: normal; font-weight: bold; color: darken(@normal-color, 20%); }
a {
	text-decoration: none;
	font-weight: bold;
	color: @link-color;
	border-bottom: 3px solid #fff;
	padding-bottom: 0;
	
	&.step1 { .link-style(1); }
	&.step2 { .link-style(2); }
	&.step3 { .link-style(3); }
	&.step4 { .link-style(4); }
	&.step5 { .link-style(5); }
	&.step6 { .link-style(6); }
}
#container { .center-both(960px, 50px); }

#skills {
	* {
		//.fadein;
		display:  none;
	}
}

.skill {
	float: right;
	position: absolute;
	margin-top: 125px;
	width:  165px;
	font-weight: bold;
	&.step1 { .skill-style(1); }
	&.step2 { .skill-style(2); }
	&.step3 { .skill-style(3); }
	&.step4 { .skill-style(4); }
	&.step5 { .skill-style(5); }
	&.step6 { .skill-style(6); }
	&.step7 { .skill-style(7); }
	&.step8 { .skill-style(8); }
	&.step9 { .skill-style(9); }
	&.step10 { .skill-style(10); }
}