body{ margin:0px; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:0.8em; color:#3a3a3a; background:url(images/body.gif); }
div#container{ text-align:left; }

div#header{ position:absolute; top:0px; z-index:2000; width:690px; height:95px; }
div#header div#logo{ width:170px; height:79px; float:left; }
div#header div#menu{ float:right; width:475px; padding:33px 0px 0px 0px; }
div#header div#menu ul{ margin:0px; padding:0px; list-style:none; }
div#header div#menu ul li{ display:inline-block; color:#FFF; font-size:1.2em; float:left; }
div#header div#menu ul li a:link, div#header div#menu ul li a:visited, div#header div#menu ul li a:active{ text-decoration:none; color:#000; outline:none; }
div#header div#menu ul li a:hover{ color:#FFF; }

div#canvas-mask{ overflow:hidden; background:url(images/body.gif); z-index:1000; }
#canvas-mask .handle{ background:url(images/bg.gif); }
#canvas-mask .handle .slide{ position:relative; float: left; }
#canvas-mask .handle .slide .bar{ position: absolute; bottom: 0px; left: 0px; padding: 12px; background: url('images/overlay.png') repeat 0 0; color: #FFF; }
#canvas-mask .handle .slide .bar h2{ margin: 0 0 6px 0; padding:0px; font-size: 26px; line-height: 26px; letter-spacing: -1px; }
#canvas-mask .handle .slide .bar .description{ display: block; color: #EEE; font-size: 12px; line-height: 12px; text-transform: uppercase; }

/************************************ bienvenue *****************************/
div#bienvenue div.conteneur{ padding:10px; background:#FFF; width:617px; margin:120px auto 0px auto; }
p.intro{ text-align:justify; font-size:0.9em; line-height:1.7em; }

/************************************ skills *****************************/
/*div#canvas-mask .handle div#skills .bar{ bottom:auto; top:590px; }*/
div#skills div.conteneur{ background:url(images/skills.png) top center no-repeat; width:848px; height:584px; margin:60px auto 0px auto; position:relative; }
div#skills div.conteneur div{ position:absolute; }
div#skills div.conteneur div a:link, div#skills div.conteneur div a:visited, div#skills div.conteneur div a:active{ background:#FFF url(images/lego.gif) 8px 8px no-repeat; padding:3px 10px 3px 30px; font-size:1.4em; font-weight:normal; display:block; text-decoration:none; outline:none; }
div#skills div.conteneur div#sk-design{ top:160px; left:420px; color:#9d33c5;}
div#skills div.conteneur div#sk-code{ top:100px; left:660px;color:#c53371; }
div#skills div.conteneur div#sk-phones{ top:460px; left:0px; color:#75a60c; }
div#skills div.conteneur div#sk-video{ top:460px; left:440px;color:#0c80a6; }
div#skills div.conteneur div#sk-scie{ top:350px; left:660px;color:#e93f19; }

div#skills div.conteneur div#sk-design a:link,div#skills div.conteneur div#sk-design a:visited{ color:#9d33c5; }
div#skills div.conteneur div#sk-code a:link,div#skills div.conteneur div#sk-code a:visited{ color:#c53371; }
div#skills div.conteneur div#sk-phones a:link,div#skills div.conteneur div#sk-phones a:visited{ color:#75a60c; }
div#skills div.conteneur div#sk-video a:link,div#skills div.conteneur div#sk-video a:visited{ color:#0c80a6; }
div#skills div.conteneur div#sk-scie a:link,div#skills div.conteneur div#sk-scie a:visited{ color:#e93f19; }

div#skills div.conteneur div p{ display:none; background:#FFF; padding:10px; margin:0px; text-transform:uppercase; font-size:0.8em; }

/************************************ etat d'esprit *****************************/
div#etatdesprit div.conteneur, div#mentions div.conteneur{ padding:10px; background:#FFF; width:820px; margin:120px auto 0px auto; }
div#mentions div.conteneur{ overflow:auto; }
div#mentions div.conteneur h2{ margin:20px 0px 0px 0px; padding:0px; font-size:1.2em; color:#91b93d; }
div#mentions div.conteneur p{ margin-top:0px; padding-top:0px; }

/************************************ etudes de cas *****************************/
div#etudedecas div.conteneur{ margin-top:120px; }
/*#canvas-mask div#etudedecas .bar{ bottom:120px; }*/
.pp_loading{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	margin:-35px 0px 0px -35px;
	background:#fff url(images/loader.gif) no-repeat center center;
	width:70px;
	height:70px;
	z-index:999;
	opacity:0.7;
	border-radius:10px;
}
.pp_next, .pp_prev{
	cursor:pointer;
	top:50%;
	margin-top:-16px;
	width:32px;
	height:32px;
	position:absolute;
	text-align:center;
	border:1px solid #111;
	color:#fff;
	-moz-box-shadow:0px 0px 3px #000;
	-webkit-box-shadow:0px 0px 3px #000;
	box-shadow:0px 0px 3px #000;
}
.pp_next{ right:-40px; background:#222 url(images/next.png) no-repeat center center; }
.pp_prev{ left:-40px; background:#222 url(images/prev.png) no-repeat center center; }
#pp_thumbContainer{ position:absolute; bottom:0px; right:0px; height:65px; width:100%; }
#pp_thumbContainer .album{
	position:absolute;
	width:200px;
	height:65px;
	bottom:-90px;
}
.album .descr, .pp_back{ position:absolute; bottom:0px; left:-25px; background: url('images/overlay.png') repeat 0 0; text-align:center; padding:5px; cursor:pointer; width:190px; color:#fff; }
.pp_back{ text-transform:uppercase; bottom:80px; left:-120px; width:100px; background: url('images/overlay.png') repeat 0 0; }
#pp_thumbContainer .content{
	position:absolute;
	top:0px;
	height:155px;
	cursor:pointer;
}
#pp_thumbContainer img{
	border:5px solid #fff;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;
}
#pp_thumbContainer .content span{
	display:none;
}
.pp_preview{
	position:absolute;
	top:150%;
	left:50%;
}
.pp_preview img{
	position:absolute;
	top:0px;
	left:0px;
	border:10px solid #fff;
	border-bottom:45px solid #fff;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;
}
.pp_descr{ height:45px; line-height:45px; font-size:0.9em; width:100%; bottom:0px; left:10px; position:absolute; color:#00021c; }
.pp_descr a:link, .pp_descr a:visited, .pp_descr a:active{ text-decoration:none; color:#FFF; background:#91b93d; outline:none; padding:1px 3px 1px 3px; }
.pp_descr a:hover{ background:#53a3d5; }


/*************** contact ******************/
div#contact div.conteneur{ width:715px; margin:120px auto 0px auto; }
div#contact div.conteneur .form{ padding:10px; background:#FFF; width:435px; float:right; }
div#contact div.conteneur .addon{ padding:10px; background:#FFF; width:230px; float:left; margin-top:80px; }
div.formulaire{ padding:0px 0px 5px 0px; clear:both; }
div.formulaire input, div.formulaire textarea{ background:#f5f5f5; color:#92ba3d; border:solid 1px #999; margin-bottom:3px; width:334px; padding:4px; font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; }
div.formulaire label{ display:block; width:90px; float:left; padding:2px 0px 0px 0px; }
div.formulaire input.bouton{ background:#999; color:#fff; border:solid 1px #666; margin-bottom:3px; width:164px; padding:2px; font-size:1.1em; font-weight:bold; border-bottom:solid 1px #444; border-right:solid 1px #444;  }
div.formulaire input.error, div.formulaire textarea.error{ background:url(images/error.png); color:#FFF; border:solid 1px #FFF; }
div#monCallback{ visibility:hidden; }
div#reponse{ display:none; }
span.obligatoire{ color:#a3360c; font-size:0.9em; }

/************************************ classes *******************************/
.bleu{ color:#53a3d5; font-size:1.2em; }
.vert-petit{ color:#9ed553; } 
.vert-grand{ color:#7ba841; font-size:1.2em; }
.gris{ color:#a4a4a4; font-size:1.4em; }

img.image-gauche{ float:left; margin:0px 20px 10px 0px; }