@tip-background: #fff;
@tip-color: #444;
@tip-radius: @r*2px;
@tip-arrow-size: @r*5px;
@tip-offset: @r*12px;

.tip-box{
	position: relative;
	background: 	@tip-background;
	color: 			@tip-color;
	padding: 		8px 18px;//@tip-padding;
	//height: 		@tip-height;
	line-height:  	1.5em;
	border-radius: 	@tip-radius;

	&:before{
		position: absolute;
	    content: " ";
	    width: 0px;
	    height: 0px;
	    border-width: @tip-arrow-size;
	    border-style: solid;
	    border-color: @tip-background;
	}
}

.tip-comfort{
	background: #66CC33;
	&:before{
	    border-color: #66CC33;
	}
}




.tip-left{
	&:before{
	    left: 100%;
	    top: @tip-offset;
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-right-color: transparent;

	}
}

.tip-top{
	&:before{
	    right: @tip-offset;
	    bottom: -0.5*@tip-arrow-size;
	}
}

.tip-bottom{
	&:before{
		left: @tip-offset;
		top: -0.5*@tip-arrow-size;
	}
}

.tip-right{
	&:before{
		right: 100%;
		top: @tip-offset;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
		//margin-top: -@tip-arrow-size;
	}
}