// these are the demos from the lessphp homepage

default {
	@base: 24px;
	@border-color: #B2B;

	.underline { border-bottom: 1px solid green }

	#header {
	  color: black;
	  border: 1px solid @border-color + #222222;

	  .navigation {
		font-size: @base / 2;
		a {
		.underline;
		}
	  }
	  .logo {
		width: 300px;
		&:hover { text-decoration: none }
	  }
	}
}

variables {
	@a: 2;
	@x: @a * @a;
	@y: @x + 1;
	@z: @x * 2 + @y;
	 
	@nice-blue: #5B83AD;
	@light-blue: @nice-blue + #111;
	 
	@b: @a * 10;
	@c: #888;
	@fonts: "Trebuchet MS", Verdana, sans-serif;
	 
	.variables {
	  width: @z + 1cm; // 14cm
	  height: @b + @x + 0px; // 24px
	  color: @c;
	  background: @light-blue;
	  font-family: @fonts;
	}
}

mixins {
	.bordered {
	  border-top: dotted 1px black;
	  border-bottom: solid 2px black;
	}
	#menu a {
	  color: #111;
	  .bordered;
	}

	.post a {
	  color: red;
	  .bordered;
	}
}

nested-rules {
	#header {
	  color: black;

	  .navigation {
		font-size: 12px;
	  }
	  .logo {
		width: 300px;
		&:hover { text-decoration: none }
	  }
	}
}

namespaces {
	#bundle {
	  .button {
		display: block;
		border: 1px solid black;
		background-color: grey;
		&:hover { background-color: white }
	  }
	}
	#header a {
	  color: orange;
	  #bundle > .button; // mixin the button class
	}	
}

mixin-functions {
	@outer: 10px;
	@class(@var:22px, @car: 400px + @outer) {
	  margin: @var;
	  height: @car;
	}

	@group { 
	  @f(@color) {
		color: @color;
	  }
	  .cool {
		border-bottom: 1px solid green;
	  }
	}

	.class(@width:200px) {
	  padding: @width;
	}

	body {
	  .class(2.0em);
	  @group > @f(red);
	  @class(10px, 10px + 2);
	  @group > .cool;
	}
}