// Use this mixin to rotate any element to certain angle.
.transform(@degree)
{
	-moz-transform: rotate(@degree);
	-webkit-transform: rotate(@degree);
	-o-transform: rotate(@degree);
	-ms-transform: rotate(@degree);
	transform: rotate(@degree);
}

.margin-left-right(@left, @right)
{
	margin-left: @left;
	margin-right: @right;
}

.padding-left-right(@left, @right)
{
	padding-left: @left;
	padding-right: @right;
}

.disable-text-selection()
{
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.hires(@url, @ext: "png", @backgroundSize: cover)
{
	background-image: url("@{url}.@{ext}");

	@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (min-resolution: 192dpi),
	only screen and (min-resolution: 2ppx),
	only screen and (min-device-pixel-ratio: 2)
	{
		background-image: url("@{url}-x2.@{ext}");
		background-size: @backgroundSize;
	}
}

.knoema-logo(@color /* should be encoded # -> %23, and no text constants - they will be changed to #rgb values on release*/, @width: 120, @height: 20)
{
	//mind IE9 issues: svg should have only ' not " no tested style tags, width and height set
	background-image: e(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='120' height='20' viewBox='0 0 120 20' style='fill:@{color}' %3E%3Cpath class='st0' d='M17.2,1.3h-5.7L6.9,8.4H6.8V1.3H2v15.5h4.8V9.1h0.1l5,7.7h5.8l-6-8.2L17.2,1.3z M29.4,0.9c-2.2,0-3.9,0.9-5,2.8 h-0.1V1.3h-4.8v15.5h4.8V7.9c0-1,0.3-1.8,0.8-2.4c0.5-0.6,1.2-0.9,2.1-0.9c1.7,0,2.6,1.2,2.6,3.6v8.6h4.8V7.3 C34.5,3,32.8,0.9,29.4,0.9z M45.4,0.9c-2.6,0-4.7,0.7-6.3,2.2c-1.5,1.4-2.3,3.4-2.3,6c0,2.5,0.7,4.4,2.2,5.9 c1.5,1.4,3.5,2.2,6.1,2.2c2.6,0,4.7-0.7,6.2-2.2c1.5-1.5,2.3-3.5,2.3-6.1c0-2.4-0.7-4.3-2.2-5.7C50,1.6,48,0.9,45.4,0.9z M45.3,13.5 c-2.4,0-3.6-1.5-3.6-4.5c0-1.4,0.3-2.5,0.9-3.3c0.6-0.8,1.5-1.2,2.7-1.2c2.3,0,3.5,1.4,3.5,4.3C48.8,11.9,47.6,13.5,45.3,13.5z M63.7,0.9c-2.2,0-4,0.7-5.6,2.2c-1.5,1.5-2.3,3.5-2.3,6.1c0,2.5,0.7,4.4,2.1,5.8c1.4,1.4,3.3,2.1,5.9,2.1c2.3,0,4.2-0.4,5.6-1.1 v-3.4c-1.3,0.8-2.8,1.2-4.5,1.2c-2.7,0-4.1-1.1-4.3-3.4h10.2v-2c0-2.3-0.6-4.1-1.9-5.4C67.7,1.6,66,0.9,63.7,0.9z M60.6,7.4 c0.1-0.9,0.5-1.7,1-2.4c0.6-0.6,1.2-0.9,2-0.9c1.8,0,2.7,1.1,2.7,3.3H60.6z M92.8,0.9c-2.3,0-4.1,1-5.2,2.9 c-0.8-1.9-2.3-2.9-4.5-2.9c-1.1,0-2.1,0.3-3,0.8c-0.9,0.5-1.6,1.2-2.1,2h-0.1V1.3H73v15.5h4.8V8.1c0-1.1,0.2-2,0.7-2.6 c0.5-0.6,1.2-1,2-1c1.6,0,2.5,1.1,2.5,3.3v8.9h4.8V8.1c0-1,0.3-1.8,0.7-2.5c0.5-0.7,1.1-1,1.9-1c1.7,0,2.5,1.1,2.5,3.4v8.8h4.8V7.1 C97.8,3,96.1,0.9,92.8,0.9z M107.3,0.9c-1,0-2,0.1-3.2,0.4c-1.2,0.3-2.1,0.6-2.8,0.9v3.6c1.7-1.1,3.4-1.6,5.3-1.6 c1.9,0,2.8,0.8,2.8,2.5l-4.2,0.6c-3.6,0.5-5.4,2.2-5.4,5.2c0,1.4,0.4,2.6,1.3,3.4c0.9,0.9,2.1,1.3,3.6,1.3c2.1,0,3.6-0.9,4.7-2.6 h0.1v2.2h4.6V7.5C114,3.1,111.8,0.9,107.3,0.9z M109.5,10.4c0,0.9-0.3,1.7-0.9,2.3c-0.6,0.6-1.3,0.9-2.2,0.9c-0.7,0-1.2-0.2-1.5-0.5 c-0.4-0.3-0.6-0.8-0.6-1.3c0-1.2,0.8-1.9,2.3-2.1l2.8-0.4V10.4z'/%3E%3C/svg%3E"));
	background-size: @width*1px @height*1px;
	width: @width*1px;
	height: @height*1px;
}

.hires2(@url, @ext: "png", @size: cover, @repeat: no-repeat, @position: top left)
{
	background: url("@{url}.@{ext}");
	background-size: @size;
	background-repeat: @repeat;
	background-position: @position;

	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2ppx), only screen and (min-device-pixel-ratio: 2)
	{
		background: url("@{url}-x2.@{ext}");
		background-size: @size;
		background-repeat: @repeat;
		background-position: @position;
	}
}


@yodatai-green-btn: #12A811;
@yodatai-font-family: 'Pt Sans', sans-serif;
@yodatai-link-color: #457544;

//here is place for constants that shouldn't be overridden in themes
@warning-color: #fff1a8;
@error-color: #c13a3f;