@activeColor: #FFDDA0;
@touchColor: #F7D7D7;
@unitColor: #C2F19D;
@sizeWidth: 100px;
@border: 1px;
@sizeHeight: @sizeWidth/sqrt(3);
@color: #efefef;


html, body{
	margin: 0;
	padding: 0;
	height: auto;
	width: 100%;
}
body{
	background-color: #333;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;

}
audio{
	display: none;
}
.transition{
	-webkit-transition: all .5s ease-in-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all .5s ease-in-out;
}
.bottomRight{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	background: #666;
	padding: 10px;
	button{
		margin-left: 10px;
		margin-right: 10px;
	}
	input{
		min-width: 200px;
	}

}
#controlBar{
	position: fixed;
	top: 0;
	width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 999;	
    // display: none;
    &.visible{
    	display: block;
    }		
    .lefting{
    	background: rgba(20,20,20, .5);
    	color: white;
    	float: left;
    	padding: 10px;

    }
}
#honeyComb{
	canvas{
    	position: absolute;
    	display: none;
    	height: 100%;
    	&.visible, &:first-child{
			display: block;
		}
	}

}
#leaderBoard:extend(.transition)	{
	position: fixed;
	top: 0px;
	right: 0;
	width: 500px;
	height: 100%;
	overflow: hidden;
	background-color: rgba(255,255,255,1);
	right: -400px;
	color: #333;
	opacity: .2;
	z-index: 999;	

	h1, h2, p{
		padding-left: 10px;
	}
	&:hover{
		opacity: 1;
	}


	button{
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		color: white;
		border-color: transparent;
		float: left;
		width: 100px;
		opacity: .4;

	}
	#listBoard{
		float: left;
		overflow: auto;
		height: 100%;
		width: 400px;

		table, tr{
			width: 100%;

			td{
				width: 100%/3;
				text-align: center;
			}
		}
		tr:nth-child(even){
			background-color: #dedede;
		}
	}
	&.open:extend(.transition){
		right: 0;
		opacity: 1;
	}
}
.honeycombIndex{
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(185, 5, 198, 0.29);
	padding: 20px;
	z-index: 999;
	font-size: 50px;


}
.honeycombScore:extend(.honeycombIndex){
	top: 120px;
	background-color: rgba(175, 0, 198, 0.29);

}
.canvasRendered{
	background-color: #333;
}
.hex {
	float: left;
	margin-left: @border;
	margin-bottom: -@sizeWidth/4;
	
	.top {
		width: 0;
		border-bottom: @sizeHeight/2  solid @color;
		border-left: @sizeWidth/2  solid transparent;
		border-right: @sizeWidth/2  solid transparent;
	}
	.middle {
		width: @sizeWidth;
		height: @sizeHeight;
		background: @color;
	}
	.bottom {
		width: 0;
		border-top: @sizeHeight/2 solid @color;
		border-left: @sizeWidth/2 solid transparent;
		border-right: @sizeWidth/2 solid transparent;
	}

	&.active{
		.top:extend(.hex .top){
			border-bottom-color: @activeColor; 

		}
		.middle:extend(.hex .middle){
			background: @activeColor; 
		}
		.bottom:extend(.hex .bottom){
			border-top-color: @activeColor; 
		}
	}
	&.touched{
		.top:extend(.hex .top){
			border-bottom-color: @touchColor; 

		}
		.middle:extend(.hex .middle){
			background: @touchColor; 
		}
		.bottom:extend(.hex .bottom){
			border-top-color: @touchColor; 
		}
	}	
	&.unitMember{
		
		.middle:extend(.hex .middle){
			background-color: @unitColor; 
			// background-image: 
		}
		
	}
	&-row{
		clear: left;
		&.even {
			margin-left: (@sizeWidth/2);
		}
	}

	
}