@charset "UTF-8";
/* CSS Document */

/* General */

*{margin:0; padding: 0; font-family:'UbuntuRegular',Arial,sans-serif;}
a{color:#000; text-decoration:none; font-size: 15px; font-family:'UbuntuRegular',Arial,sans-serif;}
a:hover, a:focus{color: #999;}
a img{border:none;}
body{overflow-y:scroll; min-width:960px;  font-family: 'UbuntuRegular', Helvetica, sans-serif;}
li{list-style: none; }
 
/* Text General */

h3{  font-family:UbuntuRegular, "Helvetica light", sans-serif; font-size:20px; color:#000000;line-height:30px; }
h4{  font-family:UbuntuRegular, "Helvetica light", sans-serif; font-size:22px; color:#000000;line-height:34px; }
p, li,span{font-family:UbuntuRegular, "Helvetica light", sans-serif; font-size:15px; color: #383838; line-height: 25px;text-align: left;} 
.fine  { font-size: 30%; }

/* STRUCTURE GENERALE */

#wrapper{background-color:#f2f2f2;}
#test{background-color:#f2f2f2;}
#leitmotiv, #Defi-graphique, #apropos, #competence, #contact, #menu-portfolio, #header-container,.widt960{  width:960px; margin-left:auto; margin-right:auto;overflow:hidden; }
#portfolio-contenu{  width:100%; margin-left:auto; margin-right:auto;overflow:hidden; }


#bandeau-jaune{ width:100%; background-color:#ffff00; height:8px; }
#header-bandeau-blanc {width:100%; background-color:#FFF;margin-bottom:10px;}
#leitmotiv-bandeau-jaune{width:100%; background-color:#ffff00; margin-top:10px;}
#contact-jaune{width:100%; background-color:#ffff00; min-height:800px;}


/* header */
#header-titre{float:left;overflow:hidden; margin-left:10px;margin-top:10px;}

#menu { display: block;  overflow:hidden; margin-left:135px;float:left;}
#menu li { float:left; overflow:hidden; padding-top:27px;padding-bottom:36px;}
#menu li a {display: block;margin:0; color:#333333; border-right: 1px solid #ffff00; font-size:12px; width:100px; text-align:center;}
#menu li:hover {background-color:#FF0;}

#logo-citation{ float:right; overflow:hidden; margin-bottom:7px;}
#logo-citation img{ display: block; margin-left:130px;}
#logo-citation p{ font-size:11px; color:#000000;display: block; }

/* awards */
#awards{position:absolute;margin-left:1000px;}

/*.shadow {box-shadow: #999 0px 1px 1px 1px; -moz-box-shadow: #999 0px 1px 1px 1px;  -webkit-box-shadow: #999 0px 1px 1px 1px;filter: progid:DXImageTransform.Microsoft.Shadow(strength=50, direction=150, color='#999');-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=0, Direction=150, Color='#999')";} */
#bloc-menu {margin-top:40px; overflow:hidden;}

#header-menu-portfolio{display: block; float:left;margin-left:10px; overflow:hidden;}
#header-menu-portfolio li {float:left;display: block; color: #666;overflow:hidden;padding:27px 0px 36px 0px;}
#header-menu-portfolio li:hover{background-color:#FF0;}
#header-menu-portfolio li a{ display: block; color:#333333;font-size:12px;border-right: 1px solid #ffff00;text-align:center;padding-right:10px;padding-left:10px;}

#header-menu-projet {display: block; overflow:hidden; float:left;margin-left:10px;margin-top:15px; }
#header-menu-projet li { float:left; margin-left:1px; overflow:hidden; padding-top:10px;}
#header-menu-projet li a {background-image:url(../images/graphisme/bouton-portfolio-jaune.jpg);width:34px;height:34px; display:block;}
#header-menu-projet li a:hover {background-image:url(../images/graphisme/bouton-portfolio-gris.jpg);}

/*menu-portfolio */

#menu-portfolio-nav{ list-style: none;}
#menu-portfolio-nav li{float:left;width:300px; height:200px;display: block; padding:10px 10px 10px 10px; position:relative;overflow:hidden;cursor:pointer;}
#menu-portfolio-nav li a{cursor:pointer;}
#menu-portfolio-nav li a span{ position:absolute; top:10px; padding-top:90px; color:#000;display:block;background-color:#FF0; width:300px; height:110px; cursor:pointer;text-align:center; font-size:35px; }

/* leitmotiv */

#leitmotiv div{float:left;width:280px;display: block; background-color:#f2f2f2; padding:10px 10px 10px 10px; margin:0px 10px 0px 10px; min-height:269px; text-align:center;}
#leitmotiv  p {padding:10px 10px 10px 10px;}
#leitmotiv  h3 {margin-top:20px;padding:10px 10px 10px 10px;}
#prospection, #conception, #realisation{  min-height:269px; }

/* ACCROCHE */

#Defi-graphique-text{width:540px; float:left; margin:0px 10px 0px 10px; padding:10px 10px 30px 10px;position:relative; }
#Defi-graphique-text h3{margin-top:12px;padding:10px 10px 0px 10px; line-height:30px; }
#Defi-graphique-text p span{ border-bottom:solid 0px #ffff00 ; }
#Defi-graphique-text p{ font-size:17px; line-height: 25px; padding:10px 10px 10px 10px;   }
#cible{ margin-left: 670px; position: absolute; z-index:2; margin-top: 20px;}

/* APROPOS */

#apropos-blanc{ width:100%; background-color:#fff; overflow:hidden;}
#apropos{margin-top:60px; margin-bottom: 60px;}

#pic{float:left;  width:300px;padding-top:30px;}
.pdf { float:left; margin-top:30px; margin-left:50px; margin-right:0px; width:55px; overflow:visible; text-align:center;}
.pdf a span{ text-decoration: underline; }
.pdf a:hover span{color: #999;}

#text-apropos{overflow:hidden; width:630px;}
#text-apropos p{width:470px;font-size:17px; padding-top:30px; margin-bottom:25px; }
#text-apropos h4 {line-height:34px;padding-top:20px;}
#text-apropos h4 span{background:#ffff00;}
#text-apropos a{text-decoration: underline;}

#parenthese-apropos{  }
#parenthese-left{float:left;}
#parenthese-left h3{padding-top:90px;}
#parenthese{ float:left;}
#parenthese-right {padding-top:30px; overflow:hidden; }
#parenthese-right li{list-style:outside;font-size:15px; margin-left:20px;}

/* Competence */

#competence, #competence div{  height:290px;}
#competence div{float:left;width:280px;display: block; background-color:#ffffff;padding:10px 10px 10px 10px; margin:0px 10px 0px 10px; min-height:200px; text-align:center;}
#competence{background-color: #ffff00;}
#competence h3{ margin-top: 10px; margin-bottom:10px;}
.list-competence li{ line-height:30px;font-size:17px;  line-height: 28px;text-align: center; }

/* Contact */

#formulaire h4{margin-top:15px; line-height:28px; width:250px;margin-bottom:5px;margin-left:0px;font-size:26px; }
#formulaire a img{vertical-align:middle;}
#bouteille{ margin-left: 210px; margin-top:-60px; position:absolute; }
#formulaire span{margin-top:0px; width:250px; color: #383838; }
#formulaire p{padding:20px 0px 10px 0px; width:250px; font-weight:bold; }
#formulaire{float:left;margin-right: 10px;margin-left: 10px; margin-top: 30px;position:relative;}

#reference1{ background: #ffff00 url(../images/graphisme/ref1.png) no-repeat left; width:433px; height: 308px; overflow:hidden; margin-top:70px;  margin-left:325px; position:absolute; }
#reference1 p{ font-size:12px; padding: 30px 60px 0px 30px;   }
#reference1-nom p { font-size:12px; margin-top:170px;  margin-left:765px; position:absolute; line-height:20px; }

#reference2{ background: #ffff00 url(../images/graphisme/ref2.png) no-repeat left top ;width:433px; height: 308px;overflow:hidden;position:absolute;margin-left:530px;margin-top: 400px;}
#reference2 p{padding: 30px 30px 0px 70px;  font-size:12px; }
#reference2-nom p { font-size:12px; margin-top:530px;  margin-left:460px; position:absolute; line-height:20px; text-align:right;}

/* footer */

#footer{ margin: 0 auto; max-width: 960px;padding-top: 30px; width: 960px; clear:both;}
#footer p {text-align:center; padding-bottom:30px;}

/* portfolio*/

#portfolio-contenu{margin-top:20px;overflow: hidden;}

.portfolio-box{float:left;width: 620px; overflow: hidden;padding-bottom:30px;}
.portfolio-box-blanc{min-height:626px; background-color: #FFF;overflow: hidden; }
.portfolio-img{position:relative; text-align:center;margin-top:10px; outline:none;}

.portfolio-text{ float:right;  width:300px; margin-left:40px;overflow: hidden;height: 626px; }

.portfolio-bloc-title{background-color: #FFF;overflow: hidden; padding-left:10px; padding-top:15px;height: 88px;}
.portfolio-bloc-title h2{font-size:28px;line-height:30px;margin-bottom:4px;}
.portfolio-bloc-title p{line-height: 19px;margin-bottom:5px; font-size:10px;text-transform: uppercase;}

.portfolio-bloc-main{background-color: #FFF;overflow: hidden; margin-top: 5px;padding-left:10px; padding-top:10px;  height:455px;}
.portfolio-main {height:340px;}
.portfolio-main h3{font-size:13px;line-height:20px;margin-bottom:2px;}
.portfolio-main p{line-height: 23px;margin-bottom:2px; font-size:12px;padding-right:10px;}

.text-slide{margin-bottom:10px;}
.text-slide h4{font-size:12px; margin-bottom:-8px;}
.text-slide p{line-height: 19px;margin-bottom:0px; font-size:12px;padding-right:10px;}

.portfolio-src{background-color: #FFF;overflow: hidden; margin-top: 5px;padding-left:10px; padding-top:5px;height: 15px;}
.portfolio-src h4{line-height: 15px;margin-bottom:2px; font-size:10px;padding-right:10px;}

.portfolio-lieu{background-color: #FFF;overflow: hidden; margin-top: 5px;padding-left:10px;padding-top:5px;height: 15px;}
.portfolio-lieu h4{line-height: 12px;margin-bottom:2px; font-size:10px;padding-right:10px; }

.portfolio-jaune{background-color: #FF0; min-height:80px; clear:both; margin-bottom:30px;}
.portfolio-gris{width: 595px; height: 555px; background-color:#f2f2f2; margin-left:12px;}

.itemDiapo{float:left; width:595px;}

/* buttons*/
.carousel-previous {	left:220px;		position: absolute;border:none;height:32px; background: #FFF url(../images/graphisme/precedent.png) no-repeat left; padding-left:30px; padding-right:12px;cursor:pointer;border-right: 1px solid #ffff00;}
.carousel-next {		right:220px; 	position: absolute;border:none;height:32px; background: #FFF url(../images/graphisme/next.png) no-repeat right;		padding-right:30px;cursor:pointer;}

/* Fornmulaire */
#formulaire p { }
.textareasize {width: 120%; height:150px;}
.messageformulaire{width:270px; font-size:11px;line-height:15px;}