/* CSS de Louis Légassé */ 

/* - Reset - */
@import url("reset.css");

/* - Fontface - */
@import url("fontface.css");

/* - Colorbox - */
@import url("colorbox.css");

/* -- Classes utiles -- */


/* -- Clearfix -- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix { display: block; }
html[xmlns] .clearfix { display: block;}
* html .clearfix {height: 1%;}

/* -- Règles générales -- */
body{
	background: url(../images/texture_bg.jpg) repeat;
	margin: 0;
	position: relative;
	z-index: 0;
}
.wrapper{
	width: 1280px;
	margin: 0 auto;
	height: 100%;
	background: url(../images/ligne-background.png) repeat-y left;
}
header, #content, footer{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.separateur{
	width: 100%;
	height: 2px;
	background: url(../images/separateur.png) repeat-x;
	margin: 5px 0 15px;
}
p{
	text-align:justify;
}


/* Header */
header{
	height: 300px;
	padding-top: 34px;
	margin-bottom: 30px;
}
header .imagePerso{
	float: left;
	width: 289px;
	height: 251px;
	background: url(../images/photo.png) no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 19px;
}
header h1{
	float: left;
	font: 45px 'EdmondSansBold';
	font-style: italic;
	color: white;
	margin: 35px 0 0 225px;
}
header p{
	float: left;
	font: 14px 'EdmondSansBold';
	font-style: italic;
	color: white;
	margin: 85px 0 0 -90px;
}
#sticky-header{
	width: 100%;
	height: 25px;
	background: #1a1a1a;
	margin-top: 225px;
	position: absolute;
	z-index: 1;
}
#sticky-header .sticky-content{
	width: 960px;
	margin: 0 auto;
}
#sticky-header .sticky-title{
	float: left;
	font: 14px 'EdmondSansMedium';
	
	padding-top: 8px;
	display: none;
}
#sticky-header .sticky-title a{
	text-decoration: none;
	color: #aeaeae;
}
#sticky-header .sticky-title a:hover{
	color: white;
}
#sticky-header nav{
	float: right;
	padding-top: 4px;
}
#sticky-header nav a{
	font: 13px 'EdmondSansBold';
	text-transform: uppercase;
	color: #aeaeae;
	text-decoration: none;
	margin-left: 5px;
}
#sticky-header nav a:hover{
	color: white;
}
#sticky-header nav .active{
	color: white;
}
#medias-sociaux{
	width: 100%;
	height: 49px;
	background: #1a1a1a;
	margin-top: 255px;
	position: absolute;
	z-index: 1;
	text-align: right;
}
#medias-sociaux .icones{
	width: 960px;
	margin: 0 auto;
	text-align: right;
	padding: 5px 0;
}
#medias-sociaux .facebook, #medias-sociaux .twitter, #medias-sociaux .linkedin, #medias-sociaux .flickr, #medias-sociaux .youtube{
	width: 29px;
	height: 29px;
	background: url(../images/icones-medias-sociaux.png) 0px 0px no-repeat;
	text-indent: 9999px;
	display: inline-block;
	overflow: hidden;
	margin-left: 5px;
	margin: 5px 0;
}
#medias-sociaux .facebook:hover{
	background-position: -29px 0px;
}
#medias-sociaux .twitter{
	background-position: 0px -29px;
}
#medias-sociaux .twitter:hover{
	background-position: -29px -29px;
}
#medias-sociaux .linkedin{
	background-position: 0px -58px;
}
#medias-sociaux .linkedin:hover{
	background-position: -29px -58px;
}
#medias-sociaux .flickr{
	background-position: 0px -87px;
}
#medias-sociaux .flickr:hover{
	background-position: -29px -87px;
}
#medias-sociaux .youtube{
	background-position: 0px -116px;
}
#medias-sociaux .youtube:hover{
	background-position: -29px -116px;
}

/* Content */
.content-left{
	float: left;
	width: 808px;
	margin-right: 30px;
}
.content-left p{
	margin-bottom: 15px;
}
#biographie, #carriere, #engagements, #videos, #photos{
	clear: both;
	float: left;
	margin-bottom: 30px;
	width: 100%;
}
#biographie h2, #carriere h2, #engagements h2, #videos h2, #photos h2{
	font: 14px 'EdmondSansBold';
	text-transform: uppercase;
	color: white;
}
#biographie p, #carriere p, #engagements p, #videos p, #photos p{
	font: 14px 'EdmondSansRegular';
	color: white;
	line-height: 22px;
}
#engagements ul{
	list-style: url(../images/puces.png);
	padding-left: 20px;
}
#engagements ul li{
	padding-left: 10px;
	margin-bottom: 20px;
	font: 14px 'EdmondSansRegular';
	color: white;
}
#videos .prev, #videos .next{
	display: block;
	float: left;
	background:url(../images/boutons-videos.png) no-repeat 0px 0px;
	width: 37px;
	height: 37px;
	text-indent: -9999px;
	overflow: hidden;
	margin-top: 175px;
}
#videos .prev:hover{
	background-position: 0px -37px;
}
#videos .next{
	background-position: -37px 0px;
}
#videos .next:hover{
	background-position: -37px -37px;
}
#videos #slideshow-youtube{
	 height: 390px; 
	 width: 640px; 
	 padding: 0; 
	 margin: 0 45px; 
	 overflow: hidden;
	 float: left;
}
#photos ul li{
	float: left;
	margin: 0 5px 5px 0;
}
.timeline{
	float: left;
	width: 122px;
	margin-top: 15px;
}
.timeline div{
	clear: both;
	float: left;
}
.timeline .year{
	float: left;
	width: 48px;
	height: 31px;
	padding-top: 17px;
	background: url(../images/cercle-bio.png) no-repeat;
	text-align: center;
	font: 14px 'EdmondSansBold';
	color: white;
	margin-right: 8px;
}
.timeline .fact{
	float: left;
	font: 12px 'EdmondSansMedium';
	font-style: italic;
	color: white;
	width: 65px;
	padding-top: 19px;
}
.timeline .fact.deuxLignes{
	padding-top: 9px;
}
.timeline .fact.troisLignes{
	padding-top: 4px;
}
.timeline .dotted{
	width: 3px;
	height: 26px;
	background: url(../images/dotted.png) no-repeat;
	margin: 5px 0 5px 22px;
}


/* Footer */
footer{
	clear: both;
	width: 960px;
	margin: 0 auto;
	height: 15px;
}
.btnRetourTop{
	float: left;
	background: url(../images/fleche-top.png) no-repeat left;
	padding-left: 15px;
	font: 13px 'EdmondSansMedium';
	text-decoration: none;
	font-style: italic;
	color: #7d7c7c;
	margin-top: -5px;
	padding-top: 3px;
}
.copyright{
	float: right;
	font: 12px 'EdmondSansMedium';
	color: #7d7c7c;
	font-style: italic;
}

.quatrecentquatre{width: 940px;margin: 50px auto;}
.quatrecentquatre .nombre{font: 284px Arial, Helvetica, sans-serif;color: #afafaf;font-weight: bold;float: left;margin-right: 60px;}
.quatrecentquatre .oops{font: 100px Arial, Helvetica, sans-serif;color: #272727;text-transform: uppercase;padding-top: 40px;}
.quatrecentquatre p{ font: 14px Arial, Helvetica, sans-serif;color: #272727;line-height: 18px;margin-bottom: 10px;}
.quatrecentquatre a{text-decoration: none;color: #@TODO;}
.quatrecentquatre a:hover{color: #272727;}