@-webkit-keyframes orbit {
  from   { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes orbit {
  from   { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-o-keyframes orbit {
  from   { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@-ms-keyframes orbit {
  from   { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}

/*@keyframes orbit {
  from   { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}*/

.rotator(@duration) {
	-webkit-animation: orbit @duration infinite linear; /* Safari 4+ */
	-moz-animation:    orbit @duration infinite linear; /* Fx 5+ */
	-o-animation:      orbit @duration infinite linear; /* Opera 12+ */
	-ms-animation:      orbit @duration infinite linear; /* Opera 12+ */
	animation:         orbit @duration infinite linear; /* IE 10+, Fx 29+ */
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

@m: 3;

.orbits {
}

.orbit {
	position: absolute!important;
	left: 0!important;
	top: 0!important;
	right: 0!important;
	bottom: 0!important;
	margin: auto!important;
	border: 1px dashed #ffffff;
	.border-radius;

	
	.planet {
		position: absolute;
		background-repeat: no-repeat;
		position: center;
		left: 50%;
		top: 0;
		
		&.mercury {
			width: 15px;
			height: 15px;
			background-image: url(../images/planets/mercury.png);
		}
		
		&.venus {
			width: 32px;
			height: 32px;
			background-image: url(../images/planets/venus.png);
		}
		
		&.earth {
			width: 32px;
			height: 32px;
			background-image: url(../images/planets/earth.png);
		}
		
		&.mars {
			width: 25px;
			height: 25px;
			background-image: url(../images/planets/mars.png);
		}
		
		&.jupiter {
			width: 80px;
			height: 80px;
			background-image: url(../images/planets/jupiter.png);
		}
		
		&.saturn {
			width: 131px;
			height: 89px;
			background-image: url(../images/planets/saturn.png);
			margin: -45px 0 0 -65px!important;
		}
		
		&.uranus {
			width: 44px;
			height: 44px;
			background-image: url(../images/planets/uranus.png);
		}
		
		&.neptune {
			width: 44px;
			height: 44px;
			background-image: url(../images/planets/neptune.png);
		}
	}
	
	&.r1 {
		.rotator(2s*@m);
	}
	
	&.r2 {
		.rotator(3s*@m);
	}
	
	&.r3 {
		.rotator(5s*@m);
	}
	
	&.r4 {
		.rotator(8s*@m);
	}
	
	&.r5 {
		.rotator(11s*@m);
	}
	
	&.r6 {
		.rotator(14s*@m);
	}
	
	&.r7 {
		.rotator(16s*@m);
	}
	
	&.r8 {
		.rotator(18s*@m);
	}
}