/*************** RESET ***************/
@import 'reset.css';

/*************** GENERAL ***************/
body {font:normal 62.5% Arial,Helvetica,sans-serif; background:#FFF url(../images/site-fond.gif) repeat-x}
a {outline:none; text-decoration:none}
a:hover {text-decoration:underline}
fieldset {position:relative}
input,
textarea {font-family:Arial, Helvetica, sans-serif;}




/*************** PREHOME ***************/
body#prehome {background-image:none; background-color:#aaa096;}
body#prehome .conteneur-principal-prehome {position:absolute; left:50%; top:50%; width:300px; height:200px; margin-top:-150px; margin-left:-150px; text-align:center;}
body#prehome .conteneur-principal-prehome p {margin-top:60px; padding:2px; background:#000; color:#FFF; font-size:1.1em}

/*************** STRUCTURE ***************/
.conteneur-principal {margin:10px auto; width:992px}
.header {height:80px}
.header .menu {float:left; padding-top:30px}
.header .menu ul li {position:relative; display:inline; padding-right:10px;}
.header .menu ul li a {padding:0 12px; font:bold 1.5em Arial, Helvetica, sans-serif; color:#000}
.header .menu ul li a.selected,
.header .menu ul li a:hover {background:#000; color:#aaa096; text-decoration:none}
.header .menu ul li .sous-menu {position:absolute; left:0; top:26px; width:330px; display:none}
.header .menu ul li div.selected {display:block}
.header .menu ul li .sous-menu a {font-size:1.2em}
.header .menu ul li .sous-menu a.selected {color:#FFF; background:url(../images/puce-fleche-blanche-small.png) left center no-repeat; padding-left:10px}
.header .menu ul li .sous-menu a:hover {color:#FFF; background-color:none}
.header .logo {float:right}
.header .logo span {text-indent:-9999px; position:absolute; display:none}

.conteneur-contenu {position:relative}
.conteneur-contenu .titre-page {position:relative; height:119px;}
.conteneur-contenu .titre-page h2 {position:absolute; left:15px; bottom:0px;}

.contenu {height:394px}

.footer {padding-left:14px; clear:both}
.footer ul li {display:inline; color:#5a504b}
.footer ul li a {color:#5a504b}


/* HOME */
.contenu .liste-actualites {padding-top:20px; min-height:286px; padding-left:15px; width:450px; height:374px; background:url(../images/fond-contenu-01.png) no-repeat}
.contenu .liste-actualites li {width:130px; display:block; float:left; margin-right:15px;}
.contenu .liste-actualites li h3 {background:url(../images/puce-fleche-marron-small.png) left 3px no-repeat; padding-left:12px; font-size:1.2em; color:#FFF; font-weight:normal; line-height:1.4em; width:112px;}
.contenu .liste-actualites li h3 strong {font-size:1em; display:block; color:#aaa096; text-transform:uppercase; padding-top:2px}
.contenu .liste-actualites li a {background:url(../images/vignette-ombre.png) no-repeat; margin-top:30px; padding:1px 9px 8px 0; display:block}

.conteneur-zoom {position:absolute; right:0; top:25px; background:#aaa096; width:525px; height:580px; text-align:center;}
.conteneur-zoom .haut {background:url(../images/modale-ombre-haut.png) no-repeat; width:525px; height:8px; overflow:hidden;}
.conteneur-zoom .milieu {height:563px; position:relative; overflow:hidden;}
.conteneur-zoom .milieu a {position:absolute; bottom:10px; left:75px; font-size:1.2em; color:#000}
.conteneur-zoom .bas {background:url(../images/modale-ombre-bas.png) no-repeat; width:525px; height:11px; overflow:hidden;}


/* ACTU - V2 16/06/2010*/
.conteneur-contenu .actu {position:relative; background:url(../images/fond-contenu-01.png) no-repeat}

.contenu .liste-actu {position:absolute; top:205px; right:0; width:486px;}
.contenu .liste-actu li {display:block; margin-bottom:14px;}
.contenu .liste-actu li h3 a {background:url(../images/over-projet.png) repeat; padding:2px 12px; font-weight:normal; font-size:1.5em; color:#aaa096; display:block; text-transform:uppercase;}
.contenu .liste-actu li h3 a:hover {background:#aaa096; color:#000; text-decoration:none;}



/* BY FOSTINE FERRO */
.contenu .prochainement {padding-top:108px; min-height:286px; padding-left:500px; background:url(../images/fond-contenu-01.png) no-repeat}
.contenu .prochainement h3 {padding-top:32px}
.contenu .prochainement p {font-size:1.2em; color:#FFF; font-weight:normal; line-height:1.4em; color:#FFF;}

.conteneur-contenu .titre-page h2.titre-byfostine {right:200px; left:auto; bottom:-9px}

.byfostine .conteneur-zoom {position:absolute; left:0; top:25px; background:#aaa096; width:525px; height:580px; text-align:center;}
.byfostine .conteneur-zoom .haut {background:url(../images/modale-ombre-haut.png) no-repeat; width:525px; height:8px; overflow:hidden;}
.byfostine .conteneur-zoom .milieu {height:563px; position:relative; overflow:hidden;}
.byfostine .conteneur-zoom .milieu a {position:absolute; bottom:10px; left:75px; font-size:1.2em; color:#000}
.byfostine .conteneur-zoom .bas {background:url(../images/modale-ombre-bas.png) no-repeat; width:525px; height:11px; overflow:hidden;}

.conteneur-carousel-verti {position:absolute; right:0; width:450px}
.conteneur-carousel-verti .texte {color:#FFF; width:250px; float:left;}
.conteneur-carousel-verti .texte p {font-size:1.2em; padding-bottom:6px; padding-top:12px;}
.conteneur-carousel-verti .jcarousel-vertical {float:right; width:120px}

.conteneur-contenu .footer-byfostine {position:absolute; left:530px }

/* AGENCE */
.conteneur-contenu .titre-page h3 strong,
.conteneur-contenu .titre-page h2 strong {padding:2px 6px; background:#000; color:#FFF; font-size:1.1em; text-transform:uppercase;}
.conteneur-contenu .titre-page .mot-cle-01 {position:absolute; left:14px; bottom:2px}
.conteneur-contenu .titre-page .mot-cle-02 {position:absolute; right:0; bottom:2px}
.conteneur-contenu .titre-page h2.titre-centre {position:absolute; left:192px; bottom:0px;}

.conteneur-contenu .interieur {background:url(../images/fond-contenu-02-interieur.png) no-repeat; }
.conteneur-contenu .interieur-gauche {
	padding-top:25px;
	float:left;
	width:434px;
}
.conteneur-contenu .interieur-gauche p {
	color:#FFF;
	font-size:1.2em;
	padding-left:14px;
	padding-top:25px;
	width:400px;
	line-height:1.4em
}
.conteneur-contenu .interieur-gauche p.fonce {color:#aaa096;}

.conteneur-contenu .interieur-droite {padding-top:25px; float:right; width:400px; text-align:justify}
.conteneur-contenu .interieur-droite p {color:#FFF; font-size:1.2em; padding-top:25px; line-height:1.4em}
.conteneur-contenu .interieur-droite p.fonce {color:#aaa096;}

.conteneur-contenu .interieur-gauche .honno {color:#FFF; padding-left:14px; padding-top:10px}
.conteneur-contenu .interieur-gauche .honno h3 {float:left; padding:2px 6px; background:#000; color:#FFF; font-size:1.1em}

.conteneur-contenu .interieur-droite .honno {color:#FFF; padding-left:14px; padding-top:10px}
.conteneur-contenu .interieur-droite .honno h3 {float:right; padding:2px 6px; background:#000; color:#FFF; font-size:1.1em}

/* EQUIPE */
.contenu .liste-equipe {padding-top:20px; min-height:286px; padding-left:15px; width:450px; height:374px; background:url(../images/fond-contenu-01.png) no-repeat}
.contenu .liste-equipe li {width:140px; display:block; float:left; margin-right:10px;}
.contenu .liste-equipe li h3 {
	padding-left:2px;
	font-size:1.2em;
	color:#ffffff;
	font-weight:normal;
	line-height:1.4em;
	width:130px;
}
.contenu .liste-equipe li h3 strong {font-size:1em; display:block; color:#aaa096; text-transform:uppercase; padding-top:2px}
.contenu .liste-equipe li a {background:url(../images/vignette-ombre.png) no-repeat; margin-top:30px; padding:1px 9px 8px 0; display:block}

/* PROJETS V2 16/06/2010*/
.conteneur-contenu .projets {position:relative; background:url(../images/fond-contenu-08.jpg) no-repeat}
.conteneur-contenu .menu-projet {position:relative; height:109px; padding:10px 0 0 14px;}
.conteneur-contenu .menu-projet .date {float:left;}
.conteneur-contenu .menu-projet .date a {font-size:1.6em;}
.conteneur-contenu .menu-projet .date ul {width:80px; padding-right:20px;}

.conteneur-contenu .menu-projet #liste-projet div.actif {display:block;}
.conteneur-contenu .menu-projet #liste-projet div {display:none;}

.conteneur-contenu .menu-projet ul {float:left; width:270px; padding-right:20px;}
.conteneur-contenu .menu-projet a {font-size:1.3em; color:#53504b; line-height:1.4em;}
.conteneur-contenu .menu-projet a.actif {color:#79d773; text-decoration:none;} 
.conteneur-contenu .menu-projet a:hover {color:#79d773; text-decoration:none;}

.contenu .liste-projets {position:absolute; bottom:20px; left:15px}
.contenu .liste-projets li {width:388px; display:block; margin-right:15px; margin-bottom:4px;}
.contenu .liste-projets li h3 a {background:url(../images/over-projet.png) repeat-x; padding:2px 12px; font-weight:normal; font-size:1.2em; color:#aaa096; display:block}
.contenu .liste-projets li h3 a:hover {background:#aaa096; color:#000; text-decoration:none;}

.conteneur-zoom-projets {position:absolute; right:0; top:110px; width:566px; height:397px;}
.conteneur-zoom-projets .haut {background:url(../images/modale-ombre-haut-large.png) no-repeat; width:566px; height:7px; overflow:hidden;}
.conteneur-zoom-projets .milieu {height:397px; position:relative; overflow:hidden}
.conteneur-zoom-projets .bas {background:url(../images/modale-ombre-bas-large.png) no-repeat; width:566px; height:12px; overflow:hidden;}
.conteneur-zoom-projets .droite {background:url(../images/modale-ombre-droite-large.png) no-repeat; width:11px; height:416px; position:absolute; right:-11px; top:0}

.conteneur-zoom-projets {width:568px}
.conteneur-zoom-projets .droite {right:-9px}

.lien-retour {float:right; color:#FFF; font-size:1.2em; text-decoration:none; width:52px; display:block; padding-top:2px;}
.lien-retour:hover {text-decoration:none;}

/* PROJETS - PAGE ZOOM V2 16/06/2010*/
.conteneur-contenu .projets-zoom {height:396px}
.conteneur-contenu .projets-zoom .description {float:left; width:156px; font-size:1.2em; color:#FFF; padding:20px 0 0 30px}
.conteneur-contenu .projets-zoom .fonce {color:#3c322d; padding-top:20px}
.conteneur-contenu .projets-zoom .visuel {float:left; padding-left:40px; padding-top:20px; position:relative; height:367px}
.conteneur-contenu .projets-zoom .visuel p {position:absolute; font-size:1.2em; bottom:0; right:0; color:#3c322d;}
.conteneur-contenu .projets-zoom .visuel p a {color:#3c322d; padding-left:5px; text-decoration:underline}

.conteneur-contenu .titre-projets-zoom {position:relative; height:117px;}


.conteneur-contenu .projets-zoom h2 {font:normal 1.6em Georgia, "Times New Roman", Times, serif; color:#FFF; text-transform:uppercase; padding:2px 0;}
.conteneur-contenu .projets-zoom .titre-avant {background:#010101; width:35px; float:left; height:371px; position:relative}
.conteneur-contenu .projets-zoom .titre-avant img {position:absolute; bottom:47px;}

.conteneur-contenu .projets-zoom .conteneur-zoom {position:relative; background:none; width:186px; height:257px; text-align:center; right:auto; top:auto; float:left; padding-top:12px;}
.conteneur-contenu .projets-zoom .conteneur-zoom .milieu {height:277px; position:relative; overflow:hidden; width:186px; zoom:1; }
.conteneur-contenu .projets-zoom .conteneur-zoom .milieu a {position:relative; bottom:auto; top:auto; left:auto; display:block; width:186px; height:257px; zoom:1;}

.conteneur-contenu .projets-zoom .conteneur-box-projets {background:#010101; float:left; height:371px; float:left; width:957px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-01 {background:#635a53;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-01 .visuel-zoom {float:left; width:569px; height:290px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-01 .texte-projets {float:left; width:170px; padding:10px 10px 0 10px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-01 .texte-projets h3 {color:#FFF; font-size:1.4em;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-01 .texte-projets p {font-size:1.2em; padding:10px 0;}

.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 {background:#635a53; position:relative; height:81px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 .box-avant {float:left; position:absolute; bottom:0;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 ul li {float:left; height:63px; line-height:0; font-size:0}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 .box-concept {width:448px; position:absolute; bottom:0; right:0; background:url(../images/fond-concept.png) repeat-x; height:72px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 .box-concept .titre-concept {float:left; width:51px; padding:35px 10px 0 18px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 .box-concept ul li {width:90px;}
.conteneur-contenu .projets-zoom .conteneur-box-projets .box-projets-ligne-02 .box-concept .vignette-concept {background:url(../images/concept-logo-ff.png) 395px 26px no-repeat; height:64px}

/* MEDIAS */
.contenu .liste-medias {overflow:auto; height:370px; width:330px; margin:10px 0; position:relative}
.contenu .liste-medias li {display:block; margin-right:15px; margin-bottom:20px; text-align:right; position:relative}
.contenu .liste-medias li h3 {position:absolute; right:90px; bottom:5px; width:230px; text-transform:uppercase; color:#e0dedc}
.contenu .liste-medias li h3 strong {text-transform:none; display:block;}
.contenu .liste-medias li a {background:url(../images/vignette-media-ombre.png) right bottom no-repeat; display:block; float:right; padding-bottom:3px}

.conteneur-contenu .medias-zoom {right:100px}
.medias {height:384px}


/* CONTACT */
.conteneur-contenu .contact {position:relative; background:url(../images/fond-contenu-03.jpg) no-repeat; height:396px; margin-top:-2px}
.conteneur-contenu .contact .interieur-gauche {
	padding:20px 0 0 20px
}
.conteneur-contenu .contact .interieur-gauche h3,
.conteneur-contenu .contact .interieur-gauche a {font-size:1.1em; color:#aaa096; text-decoration:underline; letter-spacing:.1em}
.conteneur-contenu .contact .interieur-gauche h3 {text-decoration:none; padding-top:15px}

.conteneur-contenu .contact .interieur-gauche p {padding:5px 0 0 0; line-height:normal}
.conteneur-contenu .contact .interieur-gauche p a {color:#FFF; letter-spacing:normal; font-size:1em}
.conteneur-contenu .contact .interieur-gauche p.mentions {color:#aaa096; padding-top:15px}

.conteneur-contenu .contact .interieur-droite {width:350px; padding-top:14px}
.conteneur-contenu .contact .interieur-droite p a {color:#FFF; letter-spacing:normal; font-size:1em}
form .champ-label {display:block; float:left; padding:2px 5px 0 0; width:70px; font-size:1.2em;}
form div {clear:both; margin-bottom:2px;}
form input,
form textarea {border:1px solid #8c8278; height:18px; width:230px; font-size:1.3em}
form textarea {height:180px}
form input.btn-submit {background:url(../images/puce-fleche-marron-fonce.png) left 5px no-repeat; position:absolute; border:none; bottom:0; left:0; width:70px; font-size:1.2em; text-decoration:underline; cursor:pointer}

.noir {color:#000000}
.gris {color:#CCCCCC;}

/* PARTENAIRES */
.conteneur-contenu .partenaires {background:url(../images/fond-contenu-04.jpg) no-repeat; height:396px; margin-top:-2px}
.conteneur-contenu .partenaires .conteneur-zoom {position:relative; width:992px; height:340px; background:none; left:0}


/* FOSTINE */
.fostine {background:url(../images/fond-contenu-06.jpg) 290px top no-repeat}
.fostine .contenu {width:380px; padding-left:15px}
.fostine .contenu p {font-size:1.2em; color:#aaa096; padding-top:15px; text-align:justify}
.fostine .contenu p strong {font-weight:normal; color:#FFF}

/* FFDESIGN */
.ffdesign {background:url(../images/fond-contenu-09.jpg) 290px top no-repeat}
.ffdesign .contenu {width:380px; padding-left:15px}

/*************** DIVERS ***************/
.cache {display:none}

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