@charset "UTF-8";
/* CSS Document */
/* -------------------------------------------- */
/*					G E N E R A L				*/
/* -------------------------------------------- */
html{
	overflow-y: scroll;
}
body, div, h1, h2, h3, h4, p, ul, ol, dl, dt, dd {
	margin: 0;
	padding: 0;
	/*font: normal 11px Verdana, Arial, Helvetica, sans-serif;*/
	font: normal 11px Arial, Helvetica, Verdana, sans-serif;
	/*line-height: 1;*/
	background-color: transparent;
	color: #68676c;
}
body {
	background-color: #fff;
}
ol, ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	border: 0;
}
.png {
	behavior: url(iepngfix.htc)
}
.fleft{
	float: left;
}
.fright{
	float: right;
}
.tleft{
	text-align: left;
}
.tright{
	text-align: right;
}
.tcenter{
	text-align: center;
}
.vAlignTB {
	vertical-align: text-bottom;
}
.clear {
	clear: both;
}
.spacer {
	margin:0;
	padding:0;
	height: 0;
	font-size: 1px;
	line-height: 1px;
	clear: both;
}
/* -------------------------------------------- */
/*					H E A D E R					*/
/* -------------------------------------------- */
#header {
	margin: 0 auto;
	width: 940px;
	height: 116px;
	background: transparent url(../pict/filet_rubrique.gif) repeat-x bottom left;
}
#header h1 {
	margin-top: 21px;
	float: right;
}
#header p#baseline {
	margin-top: 48px;
	float: left;
}
/* -------------------------------------------- */
/*		M A I N   C O N T E N T (General)		*/
/* -------------------------------------------- */
#portfolio, #apropos, #contact {
	margin: 0 auto;
	width: 940px;/* 919px */
	/*padding-top: 9px;*/
	/*border-top: 1px dotted #959498;*/
	background: transparent url(../pict/filet_rubrique.gif) repeat-x bottom left;
}
/* Navigation/Titres Principaux (Nav principale)*/
#main-content h2 {
	/*width:200px;*/
	/*height: 26px;*/
	padding: 8px 0px 8px 0px;
}
#main-content h2 a {
	height: 26px;
	display: block;
	text-indent: -9000px;
	outline: none;
}
#portfolio h2 a {
	background: transparent url(../pict/nav/tit_portfolio.gif) no-repeat top left;
}
#apropos h2 a {
	background: transparent url(../pict/nav/tit_apropos.gif) no-repeat top left;
}
#contact h2 a {
	background: transparent url(../pict/nav/tit_contact.gif) no-repeat top left;
}
#main-content h2 a:hover,
#main-content h2 a:focus,
#main-content h2 a.current {
	background-position: bottom left;
}
/* -------------------------------------------- */
/*					P O R T F O L I O			*/
/* -------------------------------------------- */
.rub_content {
	/*height: 411px;*/
	padding-bottom: 16px;
}
/* AJOUT pour bug accordion dans IE (affichait le contenu avant initialisation) */
.hasJS .rub_content { 
	display: none;
}

#portfolio #browse_and_infos {
	width: 303px;
	/* ----------------------------------------------------------------------------------------------------
	Tout ce qui suit est pour IE (sa race), evite un probleme de débordement avec l'accordion,
	à cause du contenu (#articles) en position relative (indispensable pour les panos coulissants) via js.
	Essayer d'appliquer ces styles :
	- Soit avec feuille de style conditionnele pour ie
	- Soit via javascript
	*/
	
	height: 100%;
	overflow: hidden;
	position: relative;
	
	/*z-index: 1;*/
}

#portfolio #articles {
	width: 303px;
}
/* Menus de navigation Porfolio niveau 1 */

#portfolio #nav-n1 li {
	margin-right: 4px;
	float: left;
}
#portfolio #nav-n1 li a {
	height: 14px;
	text-indent: -9000px;
	display: block;
	text-decoration: none;
	outline: none;
}

#portfolio #nav-n1 li a.btnprint {
	width: 50px;
	background: transparent url(../pict/nav/menu_print.gif) no-repeat top left;
}

#portfolio #nav-n1 li a.btnweb {
	width: 39px;
	background: transparent url(../pict/nav/menu_web.gif) no-repeat top left;
}
#portfolio #nav-n1 li a.btncd-rom {
	width: 71px;
	background: transparent url(../pict/nav/menu_cd-rom.gif) no-repeat top left;
}
#portfolio #nav-n1 li a.btntv {
	width: 22px;
	background: transparent url(../pict/nav/menu_tv.gif) no-repeat top left;
}
/* Rollover des menus - !!! ORDRE TRES IMPORTANT - à mettre apres */

#portfolio #nav-n1 li a:hover,
#portfolio #nav-n1 li a:focus,
#portfolio #nav-n1 li a.current {
	background-position: bottom left;
}

/* Menus de navigation Porfolio niveau 2 */
#portfolio ul#nav-n2,
#apropos ul#nav-apropos {
	margin:0;
	padding:0;
	margin-top: 20px;
	list-style: none;
}
#apropos ul#nav-apropos {
	margin-top: 12px;
}
#portfolio ul#nav-n2 li,
#apropos ul#nav-apropos li {
	margin: 0;
	padding: 0;
	/*line-height: 13px;*/
	margin-right: 12px;
	display: inline;
}

#portfolio ul#nav-n2 li a,
#apropos ul#nav-apropos a {
	padding-left: 13px;
	font-size: 11px;
	/*line-height: 11px;*/
	text-decoration: none;
	color: #8f8e8e;
	background: transparent url(../pict/nav/puce_nav_n2.gif) no-repeat left 1px;
	/*background: transparent url(../pict/nav/puce_nav_n2.gif) no-repeat top left;*/
	outline: none;
}

#portfolio ul#nav-n2 li a:hover,
#portfolio ul#nav-n2 li a:focus,
#portfolio ul#nav-n2 li a.current,
#apropos ul#nav-apropos a:hover,
#apropos ul#nav-apropos a:focus,
#apropos ul#nav-apropos a.current {
	background-position: 0px -309px;
	color: #545358;
}
p.voirsite {
	margin-top: 16px;
	/*text-align: right;*/
}
a.lien-site {
	padding-left: 13px;
	font-size: 11px;
	/*line-height: 11px;*/
	text-decoration: none;
	color: #e8640d;
	background: transparent url(../pict/nav/puce_lien-site.gif) no-repeat left 1px;
	outline: none;
}
a.lien-site:hover,
a.lien-site:focus {
	background-position: 0px -309px;
	color: #545358;
}
/* ----------------- Liste des Articles (Projets) ------------- */
#articles-list {
	/*margin: 23px 0px 0px 23px;*/
	width: 289px; /* en dur pour test javascript - Essayer de le virer d'ici */
	margin-top: 23px;
	padding-left: 14px; /* ancienne valeur 23px */
}
ul.articles-list {
	width: 134px; /* 144px */
	padding-right: 10px;
}
ul.articles-list li {
	margin-bottom: 4px;
}
ul.articles-list li a {
	display: inline-block;
	width: 100%;
	color: #68676c;
	text-decoration: none;
	line-height: 13px;
	outline: none;
}
ul.articles-list li a:hover ,
ul.articles-list li a:active,
ul.articles-list li a:focus,
ul.articles-list li a.current {
	color: #e8640d;
}
/* JS tooltip */
ul.articles-list .projListTip {
	display:none; 
    background: url(../pict/tipbox.png) no-repeat;
	/* tipbox avec ombre */
    /*width:107px;*/ /* 121 - 14 */ 
    /*height:69px;*/ /* 83 - 14 */
	/*padding: 7px;*/
	/* tipbox avec cadre */
	width: 107px;
	height: 69px;
	padding: 3px;
}

/* ----------------- Bloc INFOS d'un article ------------------ */
/* Contient le titre de l'article + compteur + fleches défil	*/
#article-infos {
	width: 303px; /* en dur pour test javascript - Essayer de le virer d'ici */
	margin-top: 33px;
}
#article-infos h3 {
	width: 240px;
	color: #e8640d;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 7px;
	float: left;
}
#nav_defil {
	width: 59px;
	margin-top: 1px;
	float: right;
}
#counter {
	width: 33px;
	font-size: 11px;
	text-align: center;
}
#nav_defil p {
	float: left;
}
#nav_defil a {
	width: 13px;
	height: 13px;
	text-decoration: none;
	text-indent: -9000px;
	outline: none;
	display: block;
}
#nav_defil a.precedent {
	background: transparent url(../pict/nav/btn-projet-previous.gif) no-repeat 0px 0px;
}
#nav_defil a.suivant {
	background: transparent url(../pict/nav/btn-projet-next.gif) no-repeat 0px 0px;
}
#nav_defil a:hover {
	background-position: 0px -100px;
}

/* ----------------- Bloc INFOS d'un article ----------------- */
/* Test Liste de Definition 2 colonnes */
#article-infos dl {
	display: block;
	/*background-color:#FF9900;*/
}
#article-infos dt {
	width: 83px;
	font-size: 11px;
	line-height: 13px;
	text-align: left;
	color: #8f8e8e;
	float: left;
}
#article-infos dd {
	width: 220px;
	font-size: 11px;
	line-height: 13px;
	text-align: right;
	color: #8f8e8e;
	/*letter-spacing: 0em;*/
	margin-bottom: 5px;
	float: left;
}
#article-infos dd p {
	font-size: 11px;
	line-height: 13px;
	text-align: right;
	color: #8f8e8e;
}

.hseparator {
	margin:0;
	padding:0;
	height: 1px;
	font-size: 1px;
	line-height: 1px;
	background: transparent url(../pict/filet_infosprojet.gif) repeat-x bottom;
	clear: both;
}

.margin_t1 {
	padding-top: 3px;
}

#specifications {
	/*background-color:#FF9900;*/
	color: #545358;
	padding-top: 7px;
}
#description {
	font-size: 12px;
	/*line-height: 15px;*/
	/*text-align: justify;*/
	margin-top: 7px;
}
#description p { /* Ajout à cause de spip et son ajout de paragraphe */
	font-size: 12px;
	line-height: 15px;
}

/* ----------------- Bloc Gallery Images ----------------------------- */
#gallery_images {
	/* ----------------------------------------------------------------------------------------------------
	Tout ce qui suit est pour IE (sa race), evite un probleme de débordement avec l'accordion,
	à cause du contenu (#articles) en position relative (indispensable pour les panos coulissants) via js.
	Essayer d'appliquer ces styles :
	- Soit avec feuille de style conditionnele pour ie
	- Soit via javascript
	*/
	height: 100%;
	overflow: hidden;
	position: relative;
}
#gallery_images #bloc_photo {
	width: 577px; /*587px -10*/
	height: 311px; /*321px -10*/
	padding: 5px;
	background: transparent url(../pict/photo_cadre.png) no-repeat top left;
}
#gallery_images #bloc_photo p#loader {
	/*width: 573px;*/
	height: 311px;
	background-color: #FFFFFF;
}
#gallery_images #bloc_photo p#loader.loading {
  background: #FFFFFF url(../pict/spinner.gif) no-repeat center center;
}
#gallery_images #bloc_photo p#loader img {
	display: block;
	padding: 2px;
}
#thumbnails_main {
	/*float: right;
	margin-right: 5px;*/
	margin: 5px 0px 0px 5px;
	/*background-color: #00CC00;*/
}

/* -------------------------------------------- */
/*			A   P R O P O S	 /  C O N T A C T	*/
/* -------------------------------------------- */

#apropos_main-content {
	height: 100%;
	overflow: hidden;
	position: relative;
	
	/*margin-bottom: 33px;*/
}
#apropos_bloc {
	margin-top: 33px;
}
#apropos_formation, #apropos_competences {
	width: 940px;
}
#formation {
	width: 606px;
	float:left;
}
#cv-bloc {
	float: left;
	padding: 0 0 0 136px;
}
.column-style_1 {
	width: 273px;
	padding-right: 30px;
	float: left;
}
.column-style_2 {
	width: 303px;
	float: left;
}
.column-style_3 {
	width: 384px;
	margin-left: 35px;
	float: left;
}
#apropos .bloc_description,
#modes_contact .bloc_description {
	margin-bottom: 14px;
}
#apropos .bloc_description p,
#modes_contact .bloc_description p {
	line-height: 16px;
}
#apropos h3,
#modes_contact h3 {
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 7px;
	margin-bottom: 7px;
	background: transparent url(../pict/filet_infosprojet.gif) repeat-x bottom;
}
#apropos h4,
#modes_contact h4 {
	line-height: 16px;
	color: #e8640d;
}
#apropos h4 span.date {
	color: #8f8e8e;
}
.liste_activites {
	width: 160px;
	margin-right: 26px;
	float: left;
}
.liste_activites ul {
	line-height: 16px;
}
a.download-pdf {
	display: block;
	width: 137px;
	height: 30px;
	padding-left: 40px;
	background: transparent url(../pict/picto-pdf.gif) no-repeat 10px 0;
	font-size: 11px;
	color: #8f8e8e;
	text-decoration: none;
	outline: none;
}
a.download-pdf:hover {
	color: #e8640d;
}
/* -------------------------------------------- */
/*					C O N T A C T				*/
/* -------------------------------------------- */
#modes_contact {
	width: 740px;
	margin-top: 25px;
}
a.social {
	color: #68676c;
	text-decoration: none;
	outline: none;
}
a.social:hover ,
a.social:active,
a.social:focus {
	color: #e8640d;
}
#formulaire{
	width:430px;
	/*margin-left:25px;*/
	margin-top:16px;
}
.column-form {
	width: 430px;
	float: left;
}
#formulaire p {
	margin: 0px 0px 8px 0px;
	padding:0;
}
#formulaire p.comment {
 	width:346px;
	margin-left:75px;
	clear:both;
}
#formulaire p.comment span{
	font-size: 10px;
	color: #e8640d;
}
#formulaire label{
	float: left;	/*** Trés important, ne pas suprimer ! ***/
	width: 65px;
	font-size:12px;
	text-align: left;
	margin: 0;
	padding: 0px 10px 0px 0px;
	line-height: 22px;	/*** ... et centrés verticalement. ***/
}

#formulaire label span {
	color: #e8640d;
}
#formulaire input.type1 {
	width:230px;
	/*margin:0 0 2px 0;*/
	/*border: 1px solid #443121;*/
}
#formulaire input.type2 {
	width:346px;
	/*margin:0 0 2px 0;*/
	/*border: 1px solid #443121;*/
}
#formulaire input.checkbox {
	margin:0px 8px 10px 90px;
	/*padding:0;*/
}
#formulaire input.saisie_verif {
	width: 70px;
	float:left;
}
#formulaire textarea {
	width:346px;
	/*margin:0 0 2px 0;*/
	/*border: 1px solid #443121;*/
	
}
/*
#formulaire input.submit{
	background-color:#443121;
	color:#FFFFFF;
}
*/
#captcha p#code_img {
	margin:0;
	padding:0;
	width:55px;
	height:35px;
	float:left;
}

#piedForm {
	/*text-align:right;*/
	margin:15px 0px 0px 75px;
	clear: both;
}

p.message {
	margin: 0px 0px 16px 15px;
	color:#e8640d;
}


/* ---------------------------------------------------------------------------------------------------- */
/* TEST pour IE - Utilisation du z-index pour empecher de voir le texte de APROPOS derriere le titre de CONTACT */

#contact {
	position: relative;
	z-index: 30;
}
#apropos {
	position: relative;
	z-index: 20;
}