/* characters
-------------------------------------------------------------------------------*/

.character {
	.ignore-pointer;
	.parallaxable;
	.characterforeground;
	max-width: 50%;
}

/* ui
-------------------------------------------------------------------------------*/

#navbarPlanets {
		position: relative;
		width: 7%;
		min-width: 40px;
		max-width: 200px;
		height: 100%;
		box-sizing: border-box;
		padding: 0 @uiPanePaddingRight 0 @uiPanePaddingLeft;
		top: 0;
		bottom: 0;
		
		.nav-planets {
			position: absolute;
			list-style: none;
			width: 100%;
			height: 100%;
			top: 0;
			bottom: 0;
			margin: auto 0;
			padding: 0;
			
			a {
				display: block;
			}
			
			[class^="nav-planet-"] {
				position: relative;
				width: 100%;
				height: 11%;
				
				.aspect-shape {
					text-indent: -9999px;
					overflow: hidden;
					border-radius: 50%;
					background-color: lighten( @logoDark, 40% );
					background-color: rgba( 255, 255, 255, 0.4 );
					.box-shadow( 0 0 10px rgba( 0, 0, 0, 0.4 ) );
				}
				
				h2 {
					height: 20px;
					font-size: 125%;
					letter-spacing: 0.1em;
					position: absolute;
					left: 100%;
					top: 0;
					bottom: 0;
					margin: auto 0;
					line-height: 100%;
					padding: 0 10px 0 20px;
					color: lighten( @logoDark, 30% );
					color: rgba( 255, 255, 255, 0.3 );
					opacity: 0;
				}
				
				&:hover {
					
					.aspect-shape {
						background-color: lighten( @logoDark, 80% );
						background-color: rgba( 255, 255, 255, 0.8 );
					}
					
					h2 {
						opacity: 1;
						color: lighten( @logoDark, 60% );
						color: rgba( 255, 255, 255, 0.6 );
					}
					
				}
				
			}
			
		}
		
		.nav-planet-mercury {
			.aspect-shape {
				width: 30%;
				height: 30%;
			}
		}
		
		.nav-planet-venus {
			.aspect-shape {
				width: 38%;
				height: 38%;
			}
		}
		
		.nav-planet-earth {
			.aspect-shape {
				width: 42%;
				height: 42%;
			}
		}
		
		.nav-planet-mars {
			.aspect-shape {
				width: 34%;
				height: 34%;
			}
		}
		
		.nav-planet-jupiter {
			.aspect-shape {
				width: 70%;
				height: 70%;
			}
		}
		
		.nav-planet-saturn {
			.aspect-shape {
				width: 55%;
				height: 55%;
			}
		}
		
		.nav-planet-uranus {
			.aspect-shape {
				width: 50%;
				height: 50%;
			}
		}
		
		.nav-planet-neptune {
			.aspect-shape {
				width: 50%;
				height: 50%;
			}
		}
		
}

#userToggleSound {
		display: inline-block;
		margin-left: @uiPanePaddingLeft;
		width: auto;
		
		.state-on, .state-off {
			position: relative;
		}
		
		.slider-volume {
			margin: 0;
		}
}

#userPlaySound {
		display: inline-block;
		margin-left: @uiPanePaddingLeft;
		cursor: pointer;
}

#userLowPerformance {
		display: inline-block;
		float: right;
		margin-right: @uiPanePaddingRight;
		margin-top: @baseLineHeight * 0.5;
		cursor: pointer;
}

#userScroll {
		display: inline-block;
		float: right;
		margin-right: @uiPanePaddingRight;
		
		.scroll-button-up, .scroll-button-down {
				cursor: pointer;
		}
}