/**
 * 
 * Color Palette:
 * http://www.colourlovers.com/palette/1930/cheer_up_emo_kid
 * 
 */

@section-width:			60em;
@section-padding:		3em;
@section-margin:		4em;

@palette-a:		#556270;
@palette-b:		#4ECDC4;
@palette-c:		#C7F464;
@palette-d:		#FF6B6B;
@palette-e:		#C44D58;

@color-headlines:		@palette-d;
@color-highlight:		@palette-d;
@color-copy:			@palette-a;

@base-font-size:	1.6em;
@base-line-height:	1.6em;

body {
	margin:				0;
	padding:			0;
	background:			#E0E4CC url("../img/beige_paper.png") repeat;
	font-family:		ronnia-1, ronnia-2, sans-serif;
	font-size:			62.5%;
	color:				@color-copy;
}
body,
a {
	text-shadow:		0 1px 1px #fff;
}
a {
	color: @color-copy;
	text-decoration: none;
	font-weight: 500;
}


#main {
	width:				@section-width;
	margin:				6em auto;
}

section {
	background:			rgba(255,255,255,0.9);
	-webkit-box-shadow:	0px 1px 4px 0px rgba(85,98,112,0.5);
	-moz-box-shadow:	0px 1px 4px 0px rgba(85,98,112,0.5);
	box-shadow:			0px 1px 4px 0px rgba(85,98,112,0.5);
	padding:			@section-padding;
	margin:				@section-margin 0;
}
section.two.columns {
	width:				@section-width/2 - 2*@section-padding - @section-margin;
	display:			inline-block;
	
	&.a {
		float:			left;
	}
	&.b {
		float:			right;
	}
}





h1, h2, h3 {
	font-family:		ronnia-1,ronnia-2, sans-serif;
	font-weight:		700;
	line-height:		1em;
	margin:				0 0 0.5em 0;
	padding:			0;
}
h1 {
	color:				@color-headlines;
	font-size:			2.5*@base-font-size;
	text-align:			center;
	text-transform:		absolute;
	
	&:only-child {
		margin-bottom:	0;
	}
}
h2 {
	color:				@color-headlines;
	font-size:			2*@base-font-size;
	text-transform:		capitalize;
}
h3 {
	font-size:			@base-font-size;
	font-weight:		300;
	text-align:			center;
	text-transform:		capitalize;
	margin:				1.5em 0;
	padding:			1em 0;
	border-bottom:		1px dashed rgba(85,98,112,0.25);
}


h1 a {
	color:				@color-headlines;
}
h1 + p,
h2 + ul,
h2 + ol,
h2 + p,
h3 {
	border-top:			1px dashed rgba(85,98,112,0.25);
	padding-top:		1em;
}
p {
	font-size:			@base-font-size;
	font-weight:		300;
	margin:				0 0 -0.75em 0;
}
h1 + p {
	font-size:			@base-font-size;
	font-weight:		300;
	text-align:			center;
	margin:				0 0 -0.75em 0;
	
	a {
		color: @color-copy;
	}
}





ul,
ol {
	font-size:			@base-font-size;
	margin:				0;
	padding-left:		1em;
}
li {
	font-family:		ronnia-1,ronnia-2, sans-serif;
	font-weight:		500;
	padding:			0;
	margin:				0 0 1em 0;
	list-style:			none;
	display:			block;
	clear:				both;
	
	&:last-child {
		margin-bottom:		0;
	}
	a, label {
		position:		relative;
		display:		inline-block;
		cursor:			pointer;
	}
	input[type='checkbox'],
	input[type='radio'] {
		margin-right:	@base-font-size;
		
		&:checked + a,
		&:checked + label, {
			color:	@color-highlight;
		}
	}
	
	aside {
		/* reset font size */
		font-size:		1/@base-font-size;
		/* hide by default */
		display:		none;
		
		p {
			display:	block;
			font-size:			@base-font-size;
			font-weight:		300;
			text-align:			center;
			margin:				1.5em 0;
			padding:			1em 0;
			border-top:			1px dashed rgba(85,98,112,0.25);
			border-bottom:		1px dashed rgba(85,98,112,0.25);
			
			input[type='radio'] {
				margin-right:	@base-font-size/2;
				margin-left:	@base-font-size;
				
				&:first-of-type {
					margin-left:	0;
				}
				
				&+ label {
					cursor:		pointer;
				}
			}
		}
		
		ol {
			padding:		0 0 0 0;
		}
		
		legend {
			display:		none;
			width:			100%;
			text-align:		center;
			font-weight:	100;
			font-size:		@base-font-size;
			font-style:		italic;
		}
		ol:empty ~ legend {
			display:		block;
		}
		
		li {
			display:		block;
			text-align:		center;
		}
		
		input[type='text'] {
			display:	inline-block;
			width:		85%;
			
			&.error {
				background:	rgba(255,0,0,0.25);
			}
		}
		input[type='text'] + a {
			display:		inline-block;
			line-height:	@base-font-size;
			margin-left:	@base-font-size/2;
		}
		
		a.add {
			.sprite('../img/icon_sprite.png', 32px, 32px, 0, 2*32px, 32px, 2*32px);
		}
		a.remove {
			.sprite('../img/icon_sprite.png', 24px, 24px, 4px, 1*32px+4px, 32px+4px, 1*32px+4px);
			-webkit-transform: rotate(0deg) scale(1);
			-webkit-transition: -webkit-transform 400ms ease-out;
		}
		.hidden a.remove {
			-webkit-transform: rotate(360deg) scale(0);
			-webkit-transition: -webkit-transform 200ms ease-in-out;
		}
	}
	
	a.filters {
		padding-left:	1em;
		.sprite('../img/icon_sprite.png', 16px, 16px, 6px, 6px, 32px+6px, 6px);
	}
}

a:hover,
label:hover {
	/*-webkit-transition:	color 50ms ease-in-out;*/
	color: @color-highlight;
}

.feedback {
	display:	none;
	
	&.success {
		color:	@palette-c;
	}
	&.error {
		color:	@palette-e;
	}
}

.sprite( @url, @width, @height, @x, @y, @x-hover, @y-hover ){
	display:		inline-block;
	overflow:		hidden;
	background:		transparent url(@url) no-repeat -@x -@y;
	text-indent:	-999999px;
	width:			@width;
	height:			@height;
	
	&:hover {
		background-position:	-@x-hover -@y-hover;
	}
}