@font-face {
	font-family : CodeLight;
	src         : url('/assets/naturalCrit/sidebar/CODE Light.otf');
}
@font-face {
	font-family : CodeBold;
	src         : url('/assets/naturalCrit/sidebar/CODE Bold.otf');
}
.sidebar{
	.animateAll();
	float            : left;
	box-sizing       : border-box;
	height           : 100%;
	width            : @sidebarWidth;
	padding-bottom   : 20px;
	background-color : white;
	//border           : 1px solid @steel;
	&.hide{
		height : 50px;
		width  : 50px;
		.logo .name{
			left    : -200px;
			opacity : 0;
		}
		.contents{
			height  : 0px;
			opacity : 0;
		}
	}
	.logo{
		padding          : 10px 10px;
		background-color : @steel;
		font-family      : 'CodeLight', sans-serif;
		font-size        : 1.8em;
		color            : white;
		svg{
			vertical-align : middle;
			height         : 1em;
			margin-right   : 0.2em;
			cursor         : pointer;
			fill           : white;
		}

		span.name{
			.animateAll();
			position : absolute;
			top      : 15px;
			left     : 50px;
			opacity  : 1;
			font-size: 0.9em;
			line-height: 0.5em;
			span.crit{
				font-family : 'CodeBold';
			}
			small{
				font-size: 0.3em;
				font-family : 'Open Sans';
				font-weight: 800;
				text-transform: uppercase;
			}
		}
	}
	.contents{
		.animate(opacity);
		box-sizing : border-box;
		width      : 100%;
		&>*{
			width : 100%;
		}
		h3{
			padding        : 10px;
			font-size      : 0.8em;
			font-weight    : 800;
			text-transform : uppercase;
		}
		.addPlayers{
			h3{
				color : white;
				background-color: @purple;
			}
			textarea{
				height : 80px;
				width  : 100px;
				margin : 10px;
			}
		}

	}
}