*{
	margin: 0;
	padding: 0;
}
body{
	text-align: left;
	font: .9em/1.3em "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: #1f1f1f /*url(../im/bg.jpg)*/ repeat;
	color: #fff;
	height:800px;
	width:12000px;
	overflow:hidden;
}
textarea{
	font: 1em/1.2em Verdana, "Trebuchet MS",  Arial, Helvetica, sans-serif;
}
ul{
	list-style: none;
}
a{
	outline: none;
	color: #fff;
	text-decoration:none;
}
a:hover{
	text-decoration: none;
}
a img{
	border: 0;
}
hr{
	clear: both;
	visibility: hidden;
}
dl dt{
	margin-bottom: 3px;
	font-weight: bold;
	color: #e3281f;
}
dl dd{
	margin-bottom: 10px;
	margin-left: 10px;
	line-height: 1.5em;
}
h1 {
	display:inline;
	font-size:20px;
}
h2 {
	position:absolute;
	top:28px;
	left:100px;
	font-size:3em;
	color: #fff;
}
.black {
	color:#000;
}
.blue {
	color:#40aacf;
}
.yellow {
	color:#ffb22b;
}
.red {
	color:#df2929;
}
.green {
	color:#91ee3e;
}
.center {
	text-align:center;
}
.strike {
	text-decoration:line-through;
}
.bold {
	font-weight:bold;
}
.underline {
	text-decoration:underline;
}
.margintop {
	margin-top:20px;
}
.marginbottom {
	margin-bottom:20px;
}
.marginbottom10 {
	margin-bottom:10px;
}
.marginright {
	margin-right:20px;
}
.marginleft {
	margin-left:20px;
}
.marginleft150 {
	margin-left:150px;
}

div.contenu {
	width:650px;
	height:450px;
	position:absolute;
	top:0;
	left:100px;
	background-repeat:no-repeat;
}

div.nav {
	position:absolute;
	bottom:-25px;
	right:50px;
	text-align:right;
}
div.nav a {
	font-size:30px;
	font-weight:bold;
	color:#fff;
	width:25px;
	height:21px;
	padding-top:4px;
	text-align:center;
	display:block;
	float:right;
}
div.nav a.home {
	background-color:#d1d1d1;
	text-indent:-50000px;
	background:url(../im/home.png) no-repeat;
}

/* menu */
ul#menu {
	position:absolute;
	top:550px;
/* 	background:url(../im/line.png) no-repeat; */
	width:12000px;
	height:150px;
}
ul#menu li {
	font-size:1.5em;
	font-weight:bold;
	height:20px;
	padding-left:20px;
}
li#lien-bio {
	width:2508px;
	background:#40aacf;
}
li#lien-portfolio {
	width:4508px;
	margin-top:15px;
	background:#ffb22b;
}
li#lien-competences {
	width:6508px;
	margin-top:15px;
	background:#df2929;
}
li#lien-contact {
	width:8508px;
	margin-top:15px;
	background:#91ee3e;
}
li#lien-home {
	width:100%;
	margin-top:15px;
	background:#d1d1d1;
}





/* bloc 1 : presentation */
div#presentation {
	height:100%;
	width:2000px;
	float:left;
	position:relative;
}
div#contentpresentation {
	background-image:url(../im/bg-contenu-presentation.png);
}
div#contentpresentation img.avatar {
	float:right;
	margin:0 0 5px 15px;
}

div.texte {
	color:#000;
	font-size:16px;
	margin-top:70px;
	margin-left:20px;
	width:550px;
}
p#i18n {
	position:absolute;
	bottom:2px;
	right:78px;
}
p#i18n a#en {
	padding-left:32px;
	line-height:20px;
	background:url(../im/USA.png) 0 50% no-repeat;
}
p#i18n a#fr {
	padding-left:32px;
	line-height:20px;
	background:url(../im/France.png) 0 50% no-repeat;
}

/* galerie photo */
div#pictures { 
	position: absolute; 
	height: 200px; 
	left:-50px;
	bottom:-50px;
}
div#pictures img { 
	position: absolute; 
	top: 0; 
	left: 0; 
}
div#presentation div.nav a.next{
	background-color:#40aacf;
}





/* bloc 2 : bio */
div#bio {
	height:100%;
	width:2000px;
	float:left;
	position:relative;
}
div#contentbio {
	background-image:url(../im/bg-contenu-bio.png);
}
div.texte ul.accordeon li {
	height:330px;
	width:50px;
	float:left;
	overflow:hidden;
}
div.texte ul.accordeon li#bioperso {
	background: url(../im/bio-perso.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#bioexp {
	background: url(../im/bio-exp.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#biostage {
	background: url(../im/bio-stage.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#bioloisir {
	background: url(../im/bio-loisir.png) 0 0 no-repeat;
}
div.texte ul.accordeon li p {
	margin:15px 15px 15px 65px;
	width:240px;
	height:300px;
	color:#000;
}
div.texte ul.accordeon li p a {
	text-decoration:underline;
	color:#000;
}

div#bio div.nav a.next{
	background-color:#ffb22b;
}
div#bio div.nav a.prev{
	background-color:#d1d1d1;
}





/* bloc 3 : portfolio */
div#portfolio {
	height:100%;
	width:2000px;
	float:left;
	position:relative;
}
div#contentportfolio {
	background-image:url(../im/bg-contenu-portfolio.png);
}
div#contentportfolio div#masque {
	width:550px;
	height:305px;
	margin-top:80px;
	margin-left:20px;
	overflow:hidden;
	position:relative;
}
div#contentportfolio ul {
	width:100%;
	height:100%;
}
div#contentportfolio ul li {
	float:left;
	margin-bottom:15px;
	width:170px;
	height:145px;
	position:relative;
	cursor:pointer;
}
div#contentportfolio ul li.right {
	margin-right:20px;
}
div#contentportfolio ul li span {
	background-color:#d1d1d1;
	color:#1f1f1f;
	bottom:0;
	display:block;
	font-weight:bold;
	left:0;
	opacity:0.8;
	position:absolute;
	text-align:center;
	width:100%;
	z-index:999;
}
p.scroll {
	width:52px;
	margin-left:275px;
	margin-top:15px;
	position:relative;
}
a#scrollDown {
	display:block;
	width:26px;
	height:26px;
	background:url(../im/down.png) no-repeat;
	float:left;
}
a#scrollUp {
	display:block;
	width:26px;
	height:26px;
	background:url(../im/up.png) no-repeat;
	float:left;
}
a#displayList {
	display:block;
	width:26px;
	height:26px;
	background:url(../im/list.png) no-repeat;
	position:absolute;
	left:-65px;
	visibility:hidden;
}
div#contentportfolio div#masque div.detail {
	color:#1f1f1f;
	font-size:1em;
	left:190px;
	position:absolute;
	top:0;
	width:360px;
	display:none;
}
div#contentportfolio div#masque div.detail p.done {
	font-weight:bold;
}
div#contentportfolio div#masque div.detail p a {
	color:#40aacf;
	font-weight:bold;
}

div#portfolio div.nav a.next{
	background-color:#df2929;
}
div#portfolio div.nav a.prev{
	background-color:#40aacf;
}





/* bloc 4 : competences */
div#competences {
	height:100%;
	width:2000px;
	float:left;
	position:relative;
}
div#contentcompetences {
	background-image:url(../im/bg-contenu-competences.png);
}
div.texte ul.accordeon li#competenceswebdev {
	background:url(../im/competences-webdev.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#competenceswebdesign {
	background:url(../im/competences-webdesign.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#competencesapicms {
	background:url(../im/competences-apicms.png) 0 0 no-repeat;
}
div.texte ul.accordeon li#competenceslogiciel {
	background:url(../im/competences-logiciel.png) 0 0 no-repeat;
}

div#competences div.nav a.next{
	background-color:#91ee3e;
}
div#competences div.nav a.prev{
	background-color:#ffb22b;
}





/* bloc 5 : contact */
div#contact {
	height:100%;
	width:2000px;
	float:left;
	position:relative;
}
div#contact div.texte form fieldset {
	border:none;
	background:#f0f0f0;
}
div#contact div.texte form fieldset legend {
	font-weight:bold;
	background-color:#91ee3e;
	color:#fff;
	margin-left:25px;
	padding:5px;
}
div#contact div.texte form fieldset p label {
	width:200px;
	display:block;
	float:left;
	padding-left:5px;
}
div#contact div.texte form fieldset input, div#contact div.texte form fieldset textarea {
	width:300px;
	border:none;
	background-color:#d1d1d1;
	padding:2px;
}
div#contact div.texte form fieldset textarea {
	height:100px;
}
div#contact div.texte form fieldset input#bouton {
	width:150px;
	background-color:#df2929;
	color:#fff;
	font-weight:bold;
	padding:2px;
}
div#contact div.texte div#ajaxloader {
	display:none;
}
div#contentcontact {
	background-image:url(../im/bg-contenu-contact.png);
}
div#contact div.nav a.prev{
	background-color:#df2929;
}