@red1: #E61A1A;
@red2: #B4001E;

@gray1: #191919;
@gray2: #262626;
@gray3: #3F3F3F;

@black: #000000;
@white: #FFFFFF;

@width: 200px;
@height: 150px;

@cf_base: fadeout(@red1, 25%);
@cf_habiter: fadeout(@red1, 25%);
@cf_travailler: fadeout(@white, 15%);
@cf_batir: fadeout(@black, 35%);

a
{
	color: inherit;
	text-decoration: inherit;
}

.brick
{
	display: block;
	width: @width;
	height: @height;
}

.grid(@row, @col, @top: 0, @left: 0)
{
	position: absolute;
	top: @height * @row + @top;
	left: @width * @col + @left;
}

html
{
	min-height: 725px;
	min-width: 1000px;
	overflow: auto;
	
	body
	{
		position: absolute;
		background-color: @gray1;
		background-image: url("../background.gif");
		background-position: 200px 100px;
		background-repeat: no-repeat;
		color: @white;
		height: 100%;
		min-height: 725px;
		min-width: 1000px;
		overflow: hidden;
		width: 100%;
		padding: 0;
		
		header
		{
			.grid(0, 0, 25, 0);
			
			a
			{
				.brick;
				img
				{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		nav
		{
			> *
			{
				.brick;
			}
			
			a.selected
			{
				background-color: @red1;
			}
			
			a#home_
			{
				.grid(0, 1, 100, 100);
				background-color: @red2;
			}
			
			a#home_ + img
			{
				.grid(0, 2, 100, 100);
			}
			
			a#habiter_
			{
				.grid(1, 0, 100, 100);
				background-color: @red2;
				
				p.titlebox
				{
					background-color: @cf_habiter;
				}
			}
			
			a#travailler_
			{
				.grid(1, 0, 100, 100);
				background-color: @red2;
				
				p.titlebox
				{
					color: @black;
					background-color: @cf_travailler;
				}
			}
			
			a#batir_
			{
				.grid(1, 0, 100, 100);
				background-color: @red2;
				
				p.titlebox
				{
					background-color: @cf_batir;
				}
			}
			
			a#projects_
			{
				.grid(1, 1, 100, 100);
				background-color: @red1;
			}
			
			a#agency_
			{
				.grid(2, 2, 100, 100);
				background-color: @gray3;
			}
			
			a#agency_ + img
			{
				.grid(2, 3, 100, 100);
			}
			
			a#press_
			{
				.grid(3, 1, 100, 100);
				background-color: @gray3;
			}
			
			a#contact_
			{
				.grid(3, 3, 100, 100);
				background-color: @gray3;
			}
			
			a
			{
				cursor: pointer;
				overflow: hidden;
				z-index: 2;
				
				p
				{
					font-family: 'Futura Std Light', sans-serif;
					font-size: 26px;
					margin-top: @height / 2 - 13px;
					text-align: center;
					text-transform: uppercase;
				}
				
				p.titlebox
				{
					bottom: 0;
					display: none;
					font-family: 'Futura Std Medium', sans-serif;
					font-size: 16px;
					left: 0;
					overflow: hidden;
					padding: 5px 10px 0 10px;
					position: absolute;
					text-align: left;
					text-transform: none;
					width: 80%;
					
					span
					{
						display: block;
						height: 0px;
						font-size: 12px;
					}
				}
			}
		}
		
		section
		{
			width: 0;
			height: @height;
			
			div.ifrah-thumbbox
			{
				.brick;
				position: absolute;
				left: -@width;
				
				span
				{
					display: block;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					width: @width * 0.7;
				
					h1
					{
						font-family: 'Futura Std Medium', sans-serif;
						font-size: 15px;
						padding: 15px 10px 0px 10px;
					}
					
					p
					{
						font-family: Arial, sans-serif;
						font-size: 11px;
						padding: 0px 10px;
					}
				}
				
				ul
				{
					list-style: none;
					position: absolute;
					top: 0;
					left: 0;
					width: @width;
					height: @height;
					margin: 0;
					padding: 0;
					
					li
					{
						position: absolute;
						left: 0;
						top: 0;
						height: @height;
						width: @width;
						margin: 0;
						padding: 0;
						z-index: -1;
						
						img
						{
							width: 100%;
							height: 100%;
						}
					}
					
					li.ifrah-thumbbox-main
					{
						z-index: 0;
					}
				}
			}
			
			div.ifrah-thumbbox.grewup
			{
				z-index: 5;
			}
			
			div.ifrah-thumbbox.expanded
			{
				z-index: 6;
				
				ul
				{
					li
					{
						z-index: 7;
					}
				}
			}
		}
		
		section#habiter
		{
			.grid(1, 0, 100, 0);
			
			div.ifrah-thumbbox
			{
				span
				{
					background-color: @cf_habiter;
				}
			}
		}
		
		section#travailler
		{
			.grid(1.5, 0, 100, 0);
			color: @black;
			
			div.ifrah-thumbbox
			{
				span
				{
					background-color: @cf_travailler;
				}
			}
		}
		
		section#batir
		{
			.grid(2, 0, 100, 0);
			
			div.ifrah-thumbbox
			{
				span
				{
					background-color: @cf_batir;
				}
			}
		}
		
		section#press
		{
			.grid(2.5, 0, 100, 0);
			
			div.ifrah-thumbbox
			{
				span
				{
					background-color: @cf_base;
				}
			}
		}
		
		section#agency
		{
			.grid(3, 0, 100, -@width);
			width: 1 * @width;
			
			article:first-child
			{
				.brick;
				position: absolute;
				background-color: @gray3;
				
				h1
				{
					font-family: 'Futura Std Medium', sans-serif;
					font-size: 15px;
					padding: 15px 10px 0px 10px;
				}
				
				p
				{
					font-family: Arial, sans-serif;
					font-size: 11px;
					padding: 0px 10px;
				}
			}
			
			div.ifrah-thumbbox
			{
				span
				{
					background-color: @cf_base;
				}
			}
		}
		
		section#contact
		{
			.grid(3, 0, 100, -(4 * @width));
			width: 4 * @width;
			
			> *
			{
				.brick;
				float: left;
			}
			
			> address
			{
				height: @height / 2 + 30px;
				padding-top: @height / 2 - 30px;
				background-color: @gray3;
				
				font-family: Arial, sans-serif;
				font-size: 14px;
				font-style: normal;
				
				text-align: center;
			}
			
			> a > p
			{
				height: @height / 2 + 10px;
				padding-top: @height / 2 - 10px;
				margin: 0;
				background-color: @red2;
				
				font-family: 'Futura Std Medium', sans-serif;
				font-size: 17px;
				
				text-align: center;
			}
			
			> div
			{
				overflow: hidden;
				
				a.social
				{
					display: block;
					margin-bottom: 5px;
					width: 110px;
					background-color: @gray3;
					
					position: relative;
					left: -85px;
					
					font-family: 'Futura Std Medium', sans-serif;
					font-size: 17px;
					text-align: right;
				}
			}
		}
		
		div.jquery-mask
		{
			background-color: fadeout(@black, 50%);
			z-index: 5;
		}
		
		div.jquery-gallery
		{
			text-align: center;
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			margin: 0;
			z-index: 10;
			
			div
			{
				background: black;
				opacity: 0.9;
			}
			
			ul
			{
				display: block;
				width: 100%;
				padding: 0;
				list-style-type: none;
				position: absolute;
				bottom: 0;
				margin-top: 10px;
				text-align: center;
				
				li
				{
					display: inline-block;
					background: black;
					
					img
					{
						opacity: 0.5;
						max-width: 100px;
						max-height: 75px;
						cursor: pointer;
						display: block;
					}
					
					img:hover
					{
						opacity: 1;
					}
				}
				
				li.jquery-gallery-active
				{
					img
					{
						opacity: 1;
					}
				}
			}
			
			figure
			{
				position: relative;
				margin: 0;
				
				figcaption
				{
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					text-align: center;
					
					span
					{
						font-size: 0.8em;
					}
				}
				
				> span
				{
					position: absolute;
					display: block;
					width: 100px;
					height: 20px;
					z-index: 2;
					background-color: @cf_habiter;
					cursor: pointer;
					color: @black;
					font-family: 'Futura Std Medium', sans-serif;
					font-size: 15px;
				}
				
				span.jquery-gallery-next
				{
					top: 100px;
					right: 0;
				}
				
				span.jquery-gallery-previous
				{
					top: 100px;
					left: 0;
				}
				
				span.jquery-gallery-close
				{
					top: 0;
					right: 0;
				}
			}
		}
	}
}