@disabledColor: #FFDDA0;
@sizeWidth: 100px;
@border: 1px;
@sizeHeight: @sizeWidth/sqrt(3);
@color: #efefef;

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body{
	background-color: #333;
}
#control{
	position: fixed;
	top: 0px;
	right: 0;
	width: 100px;
	height: 100px;
}
.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;
	}

	&.disabled{
		.top:extend(.hex .top){
			border-bottom-color: @disabledColor; 

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

	
}