/****************************************************************************
	MAIN INFO
	
	@filename          : layout.css
	@description       : Main CSS file  
	@authors           : Alexandre Barfuhok <a@doublechee.se>
	
*****************************************************************************/


/****************************************************************************
	Properties		
*****************************************************************************/
/*--------------------------------------------------------------------------
 * General
 *--------------------------------------------------------------------------*/
@bgColor: #000;
@baseUrl: '../assets/img/';

/*--------------------------------------------------------------------------
 * Background color
 *--------------------------------------------------------------------------*/
@menuBgColor:#191916;
@projectHoverBgColor:#191916;
@creditsBgColor:#191916;

/*--------------------------------------------------------------------------
 * Font
 *--------------------------------------------------------------------------*/
@fontFamily: Helvetica, Arial;
@projectTitleColor: #f7f8e0;
@projectIdColor: #96967e;
@projectHoverColor: #f7f8e0;
@menuColor: #fff;
@introColor: #f7f8e0;
@projectFontSize: 48px;
@projectIdHoverFontSize: 18px;
@introFontSize: 66px;
@introFacebookSize: 22px;
@menuFontSize: 30px;
@creditsFontSize: 46px;

/****************************************************************************
	Kind-of-methods/functions
*****************************************************************************/
.setSize(@width, @height) {
	width:@width;
	height:@height;
}

.setOpacity(@value) {
	@valueExplorer : @value * 100;
	opacity:@value;
	filter : alpha(opacity=@valueExplorer);
}

/****************************************************************************
	Elements	
*****************************************************************************/
/*--------------------------------------------------------------------------
 * General
 *--------------------------------------------------------------------------*/
body {
	.setSize(100%,100%);
	font-family:@fontFamily;
	background-color:@bgColor;
	overflow:hidden;
}

a {
	text-decoration:none;
}

.overlay {
	.setSize(100%,100%);
	background-color:#000;
	position:absolute;
	z-index:5;
	display:none;
}

/*--------------------------------------------------------------------------
 * Accueil EN/FR
 *--------------------------------------------------------------------------*/

#accueil {
	.setSize(100%,10000px);
	background: url('../assets/img/tuile.jpg') repeat;
	#content{
		width:960px;
		position:relative;
		top:60px;
		left:20px;
		a{
			display:inline-block;
			vertical-align:top;
			color:black;
			text-decoration:none;
			opacity:1;
			-moz-transition: color 0.5s ease;
			-webkit-transition: color 0.5s ease;
			-o-transition: color 0.5s ease;
			transition: color 0.5s ease;
			.language{
				position:relative;
				font-size:160px;
				font-weight:bold;
				.fleche{
					position:absolute;
					top:0px;
					right:0px;
					opacity:0;
					-moz-transition: opacity 0.5s ease;
					-webkit-transition: opacity 0.5s ease;
					-o-transition: opacity 0.5s ease;
					transition: opacity 0.5s ease;
				}
			}
			.version{
				font-size:12px;
				font-weight:bold;
			}
			.description{
				font-size:24px;
				letter-spacing:1px;
				line-height:25px;
				font-weight:bold;
			}
			#fr{
				width:460px;
			}
			#en{
				width:460px;
				margin-left:35px;
			}
			&:hover{
				color:#e5dfd7;
				opacity:1;
				.fleche{
					opacity:1;
				}
			}
		}
	}
}

/*--------------------------------------------------------------------------
 * Menu
 *--------------------------------------------------------------------------*/
#menu {
	.setSize(100%,62px);
	background-color:@menuBgColor;
	position:fixed;
	top:auto;
	bottom:0;
	z-index:2;
	a {
		float:right;
	}
	.followus {
		.setSize(220px,62px);
		margin-right:136px;
		background-image:url('@{baseUrl}menu_followus.jpg');
	}
	.followus-en {
		.setSize(220px,62px);
		margin-right:136px;
		background-image:url('@{baseUrl}menu_followus_en.jpg');
	}
	.credits {
		.setSize(150px,62px);
		background-image:url('@{baseUrl}menu_credits.jpg');
	}
	.epopee {
		.setSize(210px,62px);
		background-image:url('@{baseUrl}menu_epopee.jpg');
	}
	.episodes {
		.setSize(180px,62px);
		background-image:url('@{baseUrl}menu_episodes.jpg');
		background-position:0 0px;
	}
	.episodes,en {
		.setSize(180px,62px);
		background-image:url('@{baseUrl}menu_episodes_en.jpg');
		background-position:0 0px;
	}
	.language-fr{
		.setSize(62px,62px);
		background-image: url('@{baseUrl}menu_languages_fr.png');
	}
	.language-en{
		.setSize(62px,62px);
		background-image: url('@{baseUrl}menu_languages_en.png');
	}
	.active {
		background-position:0 -62px;
	}
}

/*--------------------------------------------------------------------------
 * Intro 1 + Intro 2 
 *--------------------------------------------------------------------------*/
#intros {
	.setSize(100%,10000px);
	background-image:url('@{baseUrl}bgintro.jpg');
	div {
		width:100%;
		margin:auto;
		padding:0;
		color:@introColor;
		font-weight:bold;
		
		.introTag {
			font-size:@introFontSize;
			padding:5%;
		}
		a.introNext {
			.setSize(84px,67px);
			position:fixed;
			bottom:45%;
			right:5%;
			background-image:url('@{baseUrl}suivant.gif');
			display:none;
		}
		.introFade {
			display:none;
		}
		.introFollowFacebook {
			font-size:@introFacebookSize;
			margin:35px 0 0 0;
			width:470px;
			img {
				margin: 0 0 0 10px ;
				vertical-align:middle;
			}
		}
	}
}

#about {
	.setSize(100%,10000px);
	background-color:#191916;
	display:none;
	div {
		width:85%;
		margin:auto;
		padding:10% 6% 6% 8%;
		color:@introColor;
		font-weight:bold;
		p {
			font-size:@projectFontSize;
		}
	}
}
/*--------------------------------------------------------------------------
 * Follow us
 *--------------------------------------------------------------------------*/
#followUs {
	.setSize(100%,10000px);
	background-color:#191916;
	div {
		width:100%;
		margin:auto;
		padding:15%;
		color:@introColor;
		font-weight:bold;
		
		.followUsTag {
			font-size:@introFontSize;
			display:none;
		}
		.followUsFollowFacebook {
			font-size:@introFacebookSize;
			margin:35px 0 0 0;
			width:470px;
			img {
				margin: 0 0 0 10px ;
				vertical-align:middle;
			}
		}
	}
}
/*--------------------------------------------------------------------------
 * Credits
 *--------------------------------------------------------------------------*/
#credits {
	.setSize(100%,10000px);
	background-color:@creditsBgColor;
	#creditsOverlay {
		.setSize(100%,100%);
		position:absolute;
		background-color:#000;
		z-index:1;
		display:none;
	}
	#creditsWrapper {
		position:relative;
		.creditsItem {
			.setSize(100%,90px);
			font-size:@projectFontSize;
			padding:75px 0 0 0;
			.creditsTextWrapper{
				.setSize(2000px,90px);
				float:right;
				margin:8px 0 0 0;
				font-weight:bold;
				color:@introColor;
				font-size:@creditsFontSize;
				.creditsName {
					.setSize(480px,70px);
					float:right;
					vertical-align:middle;
					margin:0 115px 0 0;
				}
				.creditsTitle {
					float:right;
					vertical-align:middle;
					margin:0 55px 0 0;
					p{
						text-align:right;
					}
				}
			}
		}
		.spacer {
			.setSize(810px,8px);
			background-image:url('@{baseUrl}spacer.jpg');
			float:right;
			margin:60px 230px 40px 0;
		}
	}
}

/*--------------------------------------------------------------------------
 * Project elements
 *--------------------------------------------------------------------------*/
#episodes {
	#projectsWrapper {
		cursor:pointer;
		position:relative;
		/*Project normal state*/
		
		.projectItem {
			.setSize(100%,90px);
			font-size:@projectFontSize;
			padding:12px 0 0 0;
			
			.projectBg {
				.setSize(100%,90px);
				.setOpacity(0);
				background-color:@projectHoverBgColor;
				position:absolute;
				z-index:-1;
			}
			
			.projectHover {
				.setSize(100%,90px);
				.setOpacity(0);
				background-color:@projectHoverBgColor;
				position:absolute;
				z-index:3;
			}
			
			.projectTextWrapper{
				.setSize(2000px,90px);
				pointer-events: none;
				float:right;
				margin:8px 0 0 0;
				font-weight:bold;
				
				.projectId {
					.setSize(480px,70px);
					float:right;
					vertical-align:middle;
					margin:10px 20px 0 0;
					
					p.normalState{
						
						color:@projectIdColor;
					}
					
					p.hoverState{
						.setOpacity(0);
						width:500px;
						color:@projectHoverColor;
						font-size:@projectIdHoverFontSize;
						position:absolute;
						margin:8px 0 0 0;
					}
				}
				
				.projectTitle {
					float:right;
					position:relative;
					vertical-align:middle;
					margin:10px 28px 0 0;
					
					p.normalState{
						text-align:right;
						color:@projectTitleColor;
						height:95px;
					}
					
					p.hoverState{						
						text-align:right;
						color:#fff;
						position:absolute;
						right:0;
						display:none;
						height:95px;
						width:550px;
					}
				}
			}
		}
	}
}

/*--------------------------------------------------------------------------
 * Background elements
 *--------------------------------------------------------------------------*/
#bgWrapper {
	.setSize(100%,100%);
	background-color:#191916;
	overflow:hidden;
	position:absolute;
	z-index:-1;
	
	#bgItemHolder {
		.setSize(100%,100%);
		position:relative;
		
		.bgItem {
			.setSize(100%,100%);
			img{
				width:100%;
				min-height:100%;
			}
		}
	}
}

/*--------------------------------------------------------------------------
 * Player
 *--------------------------------------------------------------------------*/
#player {
	margin:0 17px 30px 17px;
	.playerClose {
		.setSize(17px,16px);
		background-image:url('@{baseUrl}close.png');
		float:right;
		margin: 10px 0 20px 0;
	}
	.playerEmbed {
		.setSize(100%,900px);
		margin-top:30px;
		position:absolute;
		z-index:15;
	}
	
}


#awwwards{
width: 69px;
height: 105px;
text-indent: -8000px;
display: block;
background: url(/assets/img/awwwards_siteoftheday_b_right.png) no-repeat;
overflow: hidden;
position : absolute;
right : 0;
top:100px;
z-index:999999; 	
}