index.less

@import "lib/library.less";

* {
	box-sizing: border-box;
}
div{
	padding: 4px;
	margin: 2px;
}

.information{
	.function-information(#0C4C8A);
}

.title-container{
	background-color: #EF562D;
	text-align: center;
}

.window-container{
	color:white;
	font-size: 20px;
	text-transform: uppercase;
	float:left;
	@media screen{
		.function-window-container(400px,200px);
		@media (min-width:450px){
			.function-window-container(200px,130px,#D13076,black);
		}
	}
}

.lighted-circle{
	@b-color:#00C1E0;
	float: left;
	z-index: 1;
	width:150px;
	height:150px;
	background-color:@b-color;
	.function-box-shadow-4;
	.function-border-radius(@b-color,150px,150px);
	@colors:white,lightgray,#d3d3d3 - 5,@b-color - 2,@b-color - 3,@b-color - 4;
	.function-radial-gradient(circle,@colors);
	.function-trangle-top(@b-color);
}

#testDiv,#subDiv{
	@background-color : rgba(90, 129, 32, 1);
	float:left;
	width:200px;
	height: 130px;
	text-align: center;
	vertical-align: middle;
	padding: 40px;
	margin: 20px;
	color: contrast(@background-color);
	background-color: @background-color;
	&:hover{
		background-color: lighten(@background-color, 50%);
		.function-box-shadow-4;
		color:darken(@background-color, 80%);
		&:after{
			content: " >>";
			right: -10px;
		}
	}
}

.main-menu{
	float: left;
	height: 25px;
	background-color: black;
	color:white;
	&:hover{
		& .menu-item{
			.menu-item-0;display: inline;
		}
		
	}
	& .menu-item{
		.menu-item-0;display: none;
	}
}

.menu-item-0(){
	position: absolute;
	background-color: lightgray;
	color:contrast(lightgray);
}

// .mixin-if(@p)when(@p >= 20){
// 	background-color:black;
// 	color: white;
// }
// .mixin-if(@p,@1)when(@p < 20) and(@1 = 'test'){
// 	background-color: skyblue;
// 	color:black;
// }

// .xx{
// 	.mixin-if(10px,'test');
// }