/******
Custom LESS functions
******/

.marpad (@width: 0) {
    padding: @width;
    margin: @width;
}

.wh (@width: 100%) {
    width: @width;
    height: @width;
}

.ul {
	.marpad;
	list-style:none;
	list-style-type:none;
}

.absolute (@zindex: 10) {
	position:absolute;
	display:block;
	z-index: @zindex;
}

.fixed (@zindex: 10) {
	position:fixed;
	display:block;
	z-index: @zindex;
}

.fright {
	display:block;
	float:right;
}

.fleft {
	display:block;
	float:left;
}

.border-radius (@radius: 4px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @raidus;
}

.hand {
	cursor: pointer;
	cursor: hand;
}

.sq(@side) {
	width:@side;
	height:@side;
}

.opacity(@val: 0.5) {
	@ie-val: @val * 100;
	opacity:@val;
	-moz-opacity:@val;
	filter: ~"alpha(opacity=@{ie-val})";
}

@bg-color: #f5f3f4;

/* HTML5 */
nav, section, footer {
	display:block;
}

/* CSS */
html {
    .marpad;
    .wh;
    overflow:hidden;
}

body {
    .marpad;
    .wh;
    background-color:@bg-color;
    overflow:hidden;

    font-family: Palatino Linotype, Book Antiqua3, Palatino, serif;
    font-size: 15px;
    font-style: italic;
	color:#000;
}

.no-outline {
	outline:none;
    border:none;
    -moz-outline:none;
    -webkit-outline:none;
}

a, a:hover, a:visited, a:active { 
    color:#000;
    text-decoration:none;
    .no-outline;
}

a:focus {
   -moz-outline-style: none;
}

*, *:focus {
	.no-outline;
}

p {
	padding:0;
	margin:10px 0;
}

#site {
    .marpad;
    .wh;
	position:relative;
	overflow:hidden;
    z-index: 10;
}

#bg, #bg-trame, #bg-fade, #main-img, #lg-img {
	top:0;
	left:0;
	overflow:hidden;
}

#bg {
	.absolute(1);
	height:100%;
}

#bg-fade {
	.absolute(3);
	height:100%;
}

#bg-trame {
	.absolute(5);
	width:100%;
	
	background-image: url(../images/bg/trame.gif);
	background-position: top left;
	background-repeat: repeat;
}

#slider {
	.marpad;
	.wh;
	position:relative;
	overflow:visible;
}


#abs-fader {
	.absolute(10000); /* on top of everything */
	top:0;
	left:0;
	width:100%;
	height:100%;
	.marpad;
	background-color: @bg-color;
}

#abs-fader-img {
	.absolute(10001); /* on top of everything */
	top:0;
	left:0;
	width:100%;
	height:100%;
	.marpad;
	background-position: 50% 45%;
	background-repeat: no-repeat;
}
#abs-fader-load {
	.absolute(10002); /* on top of everything */
	top:0;
	left:0;
	width:100%;
	height:100%;
	.marpad;
	background-position: 50% 60%;
	background-repeat: no-repeat;
}

/* *********

LANGUES

********* */
#lg {
	.fleft;
	
	a {
		.absolute(1100);
		display:block;
		font-size: 50px;
		color:white;
		left:5px;
		
		span {
			display:none;
		}
	}
}

#lg-img {
	.absolute(2);
}

#lg-pad-w, #lg-pad-h {
	.absolute(2);
	background-color:@bg-color;
}

#lg-fr, #lg-en  {
	/*background-color:#666;
	opacity:0.4;*/
}

/* *********

MAIN

********* */

#main {
	.fleft;
	position:relative;

    #main-back {
        .absolute(1020);
        right:-34px;
        bottom:10px;
        width:68px;
        height:18px;
        .hand;
        
        text-decoration:none;

        /*background-color:pink;*/

        .main-back-l {
            .fleft;
            width:34px;
            height:18px;
			
			background-image: url(../images/fleche.png);
			background-position:4px 5px;
			background-repeat:no-repeat;
        }

        .main-back-r {
            .fright;
            width:34px;
            height:18px;
            background-color:#fff;

            background-image: url(../images/fleche_droite.png);
			background-position: 24px 5px;
			background-repeat:no-repeat;
        }
    }
	
	#main-img {
		.absolute(2);
		top:0;
        .hand;
	}
	
	#main-pad-w, #main-pad-h, #main-pad-x {
		.absolute(2);
		background-color:@bg-color;
	}
	
	#main-pad-x {
		min-height:452px;
        height:100%;
	}
}

#main.inverted {
	
	#main-pad-x {
		/*.opacity(0);*/
	}
	
	#main-top,
	#main-top a {
		color: #fff;	
	}
	
	.main-lg.selected {
		background-color:#fff;
		color:#000 !important;	
	}

    #contact, #bio {
        background-color:transparent;
    }
}

#main-top {
	.absolute(1011);
	top:0;
	left:0;
	width:auto;
	height:28px;
}

#main-top.open {
	height:48px;
}

.main-top-pad {
	margin-top:4px;
	position:relative;
}

.main-lg {
	.absolute(1012);
    padding:2px 5px;
    text-decoration:none;
}

.main-lg.fr {
	left:60px;
}

.main-lg.en {
	left:30px;
}

.main-lg.selected {
	background-color:#000;
	color:#fff;	
}

.main-inv {
	.absolute(1012);
    padding:2px 5px 2px 90px;
	right:170px;
    text-transform:uppercase;
	font-weight:bold;
	height:15px;
    line-height: 15px;
	background-image: url(../images/invert.gif);
	background-position: 0px 2px;
	background-repeat:no-repeat;
    vertical-align: middle;
	.hand;
}

.main-sprite(@pos) {
	background-image: url(../images/social.png);
	background-position:0px @pos*16px;
	/*background-repeat:no-repeat;*/
	width:16px;
	height:16px;
	top:2px;
}

.main-fb {
	.absolute(1012);
	right:60px;
	.main-sprite(0);
}

.main-tw {
	.absolute(1012);
	right:40px;
	.main-sprite(2);
}

.main-rss {
	.absolute(1012);
	right:20px;
	.main-sprite(1);
}

#menu {
	.marpad;
	.absolute(1012);
	
	top:0;
	right:0;
	
	letter-spacing:1px;

	width:300px;
	
	display:none;
	
	ul {
		.ul;
		
		li {
			display:block;
            margin:5px 0;
            text-align:right;
			
			a, span {
				display:inline-block;
				padding-right:28px;
			}
		}
	}

    ul.real {
        display:none;

        li.real {
            font-size:13px;
			font-weight:bold;
            a { 
				display: inline-block;
			  color:#8a8a8a;
			}
        }
    }
	
	span.real {
		.hand;
	}
}

#main.inverted #menu {
    a, span {
        color: @bg-color;
    }
}

#main-btn-prev {
	.absolute(1012);
	left:0;
	bottom:20px;
	
	width:33px;
	height:97px;
	
	.hand;
    display:none;

	background-color:transparent;
    background-image: url(../images/btn/prev-real.png);
    background-position:bottom left;
    background-repeat: repeat-x;
}

#main-btn-next {
	.absolute(1012);
	right:0;
	bottom:20px;
	
	width:33px;
	height:97px;
	
	.hand;
    display:none;
	
	background-color:transparent;
    background-image: url(../images/btn/next-real.png);
    background-position:bottom left;
    background-repeat: repeat-x;
}

#main-btn-close {
    .absolute(1012);
	top:0;
	left:50%;

    .a() {
        width:97px;
	    height:33px;
        display:block;
    }

    .a();

    a {
        .a();
    }
	
	.hand;
	
	background-color:transparent;
    background-image: url(../images/btn/close.png);
    background-position:top left;
    background-repeat: repeat-x;
}

/* *********

REAL

********* */

#real {
	.fleft;
	
	z-index: 10; /* set on top of #main-img which is zindex=2 */
	
	position:relative;
	
	ul {
		.ul;

        li {
            position:absolute;
            
        }
	}
	
}

#real-anim {
	.absolute;
	
	.ul;
	
	top:10px;
	left:10px;
	
	.sq(110px);
	
	li, li img {
		display:block;
		.sq(110px);
	}
	
	li {
		top:0;
		left:0;
	}
}


#real-list {
	.absolute;
	
	top:40px;
	left:130px;

	min-width:400px;
	min-height:400px;
	
	li {
		display:none;
	}
}

.real-pad {
	height:0;
}

.real-wrap {
    position:relative;
}

.vimeo {
	width:auto;
	background-color: #fff;
	padding:10px;
}

.vimeo iframe {
	margin: 0 auto;
	padding: 0;
	border: none;
}

.real-desc {
	min-height:30px;
}

.real-desc:first-letter {
	font-size: 32px;
	text-transform:uppercase;
}

.real-cred {
	min-height:30px;
}

/* *********

BIO

********* */
#bio {
	.absolute(1000);
	top:100%;
	left:0;
	.wh;
	
	display:none;

    text-align: justify;
}

.bio-titre {
    left: -45px;
    position:relative;
    display:inline-block;
    text-transform: uppercase;
	background-color: @bg-color;
	padding: 2px 20px 2px 20px;

    font-size: 20px;
}

.bio-pad {
	.absolute(1110);
	/*bottom:80px;*/
	left:40px;
	width:57%;
	font-size:15px;
}

.bio-pad-arial {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.bio-pad-times:first-letter {
	font-size: 32px;
	text-transform:uppercase;
}

#bio-prix {
	.absolute(1110);
	width:230px;
	left:460px;
	bottom:80px;
	.bio-prix {
		margin: 10px 0 0 20px;
	}
}

.bio-prix-header {
	width:260px;
	background-color: @bg-color;
	padding: 2px 2px 2px 20px;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 4px;
	
	background-image: url(../images/fleche_droite.png);
	background-position: 7px 7px;
	background-repeat:no-repeat;
}

.bio-prix-t {
	position: relative;
	background-color: @bg-color;
	padding: 2px;
    font-size:11px;
}

.bio-prix-d {
	padding: 2px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
}

.cv, #bio .show-reel a {
	text-transform: uppercase;
	background-color: @bg-color;
	padding: 2px 2px 2px 20px;
	
	background-image: url(../images/fleche_droite.png);
	background-position: 6px 5px;
	background-repeat:no-repeat;

    color: #000;
}

/* *********

CONTACT

********* */
#contact {
	.absolute(1000);
	top:100%;
	left:0;
	.wh;
	
	display:none;
}

.contact-pad {
	padding:0;
	margin:0;
	left:45px;
	/*bottom:80px;*/
	.absolute(1110);
	
	a {
		background-color: @bg-color;
		padding: 2px 2px 2px 20px;
		margin: 0 0 5px 0;
		display:inline-block;
		
		background-image: url(../images/fleche_droite.png);
		background-position: 6px 5px;
		background-repeat:no-repeat;
		
		text-transform:uppercase;
	}
	
	a.email {
		background-position: 6px 9px;
		font-size:20px;
		margin: 0 0 10px 0;
		text-transform:lowercase;
	}
}

#contact-part {
	.absolute(1110);
	width:280px;
	left:390px;
	/*bottom:80px;*/
	.ul;
	
	@size: 74px;
	
	li {
		margin: 0 0 8px 0;
		height:@size;
		
		a {
		
			img {
				.sq(@size);
				.fleft;
			}
		
			width:auto;
			display:block;
			
			height:@size;
			
			span {
				padding:2px 2px 2px 8px;
				margin: @size*0.5-4px 0 0 0;
				background-color:@bg-color;
				.fleft;
			}
		}
	}
}

/* *********

FADER

********* */
#fade {
	.absolute(1000);
	
	background-position: bottom left;
	background-repeat: no-repeat;
	
	width:608px;
	height:690px;
	bottom:0;
	left:0;

    .hand;
}