body { position:relative; margin:0; padding:0; font-size:12px; font-family:Arial; color:#333333; }

ul, li, h1, h2, h3, h4, h5, p { margin:0; padding: 0; }

.clear { clear: both; }

h1 { text-indent: -9999em; height: 0;}

span.ref { display: none; }

a.suite { display: block; background: url(../images/img-lire-la-suite.png) no-repeat; width: 66px; height: 14px; color:#EA690B; padding:5px 17px; text-decoration: none; } 
a.suite:hover { display: block; background: url(../images/img-lire-la-suite.png) no-repeat; width: 66px; height: 14px; color:#EA690B; padding:5px 17px; text-decoration: underline; } 

#container { position: relative; width: 990px; margin:0 auto; z-index: 5; }
#container-reference { width: 990px; margin:0 auto; z-index: 1; background: url(../images/img-back-ligne-orange.png) repeat-y;  }
#container-book { width: 990px; margin:0 auto; z-index: 1; }

/* HEADER */
#header { position: relative; width: 990px; height: 130px; margin:0 auto; }
#header h2 a { position: absolute; top:20px; left:75px; background: url(../images/cargoplume.png) no-repeat; text-indent: -9999em; width:143px; height: 73px; display: block; }
#header ul { position: absolute; top:20px; right:0; overflow: hidden; }
#header ul li { list-style: none; float: left; margin:0 0 0 30px; font-size: 10px; height: 60px; line-height: 110px;  }
#header ul li a { color:black;  display: block; text-decoration: none; } 
#header ul li a:hover { background: url(../images/img-cube.png) no-repeat left top; text-decoration: none;}
#header ul li.on { background: url(../images/img-cube.png) no-repeat left top; text-decoration: none;}



/* PORTFOLIO */
#portfolio { position: relative;  height: 300px; margin:0 0 0 250px;  overflow: hidden; z-index: 10; }
.zone { position: relative; overflow: hidden; width:175px; height: 240px; float:left; margin:0 0 0 4px; overflow: hidden;}
.masque { position:absolute; top:0; left:0; background: url(../images/masque2.png) no-repeat left top; width:195px; height: 270px; z-index: 150; overflow: hidden;}
.image { position: absolute; top:5px; left:5px; width:187px; height: 262px; z-index: 100; overflow: hidden;}
#pixel1 a, #pixel2 a, #pixel3 a, #pixel4 a { position: absolute; top:30px; display: block; width:187px; height: 262px; z-index: 900; text-decoration: none; background: url(../images/pixel-blanc.gif) repeat; overflow: hidden;}
#slide1, #slide2, #slide3, #slide4 { position: absolute; z-index: 350; top:-15px; left:0px; background: url(../images/slide.png);  width:300px; height: 300px; overflow: hidden; }
#portfolio h2 { position: absolute; top:170px; left:20px; width:170px; color: white; z-index: 100;  overflow: hidden;;}
.orange { position: absolute; top:195px; left:8px; height: 20px; background-color: #EA690B; width: 177px; color: white; z-index: 100; line-height: 20px; padding-left:0px; text-indent: 15px; font-size: 12px; overflow: hidden;}


/* AGENCE  */
.zone-agence { position: relative; margin:0px 0 0 270px; width:705px; height: 300px; }
.masque-agence { position: absolute; top:0; left: 0; background: url(../images/masque-agence.png) no-repeat left top; width:705px; height: 240px; z-index: 150;  }
ul#menu-agence { margin:-3px 0 0 -23px; }
ul#menu-agence li { margin: 8px 0; }
ul#menu-agence li a { color:white; text-decoration: none; padding:0 0 0 15px; }
ul#menu-agence li a:hover { color: white; background: url(../images/img-carre-blanc.png) no-repeat left 3px; }
ul#menu-agence li.on { color: white; background: url(../images/img-carre-blanc.png) no-repeat left 3px; }

#slide_content2 { position: relative; overflow: hidden; width:440px; height:150px; left:0; top:0; }

#slide_content2_content { position: absolute; width: 12000px; }
.slide_content2_item { position: relative; width:440px; float: left; padding:0; line-height: 1.3em; font-size: 11px; }

#navigation { background-color: white; float: right; margin:0 -15px 10px 0; padding:0 10px; }
#navigation li { float: left;  text-decoration: none; color: #CD591B; }
#navigation li a { margin:0 10px; text-decoration: none; color: #CD591B;  text-align: left;}
#navigation li a:hover { margin:0 10px; text-decoration: underline; color: #CD591B; }
#navigation li a:active, #navigation li a:focus { margin:0 10px; text-decoration: underline; color: #CD591B; }

#slide_content1 { position: relative; overflow: hidden;  width:705px; height: 300px; left:0; top:0; }
#slide_content1_content { position: absolute; width: 12000px; }
.slide_content1_item { position: relative; width:705px; float: left; padding:0; line-height: 1.3em; font-size: 11px; }

/* REFERENCES */
#liste-clients { float: left; width:194px; margin:0 0 0 243px; text-align: right; padding:0; z-index: 1; }
#liste-clients h3 { color: #CD591B; font-size: 22px; padding:0 15px 10px 0;}
#liste-clients ul { overflow: hidden; margin:0; padding:0;  }
#liste-clients li { list-style: none; margin:5px 0; padding:0; z-index: 10; }
#liste-clients li.off { list-style: none; padding:0 15px 0 0;  }
#liste-clients li a { color: black; text-decoration: none; padding:0 15px 0 0; text-decoration: none; display:block;   }
#liste-clients li a:hover { color: #CD591B; text-decoration: none; background: url(../images/img-carre-orange.png) no-repeat right 3px; text-decoration: none;  }
#liste-clients li.on a { color: #CD591B; text-decoration: none; background: url(../images/img-carre-orange.png) no-repeat right 3px; text-decoration: none;  padding:0 15px 0 0;  }

#all-references { position: relative; width:700px; margin:0 0 0 280px; padding:0 0 20px 0; }
#all-references ul { margin-top:20px;}
li.all-references { list-style: none; float: left; width:350px; margin:5px 0; }


.zone-reference { position:relative; float:right; margin:0px 0 0 87px; width:460px; height:300px; }
.masque-reference { position: absolute; top:0; left: 0; background: url(../images/masque-reference.png) no-repeat left top; width:455px; height: 240px; z-index: 150; overflow: hidden; }

#toutes-realisations { margin:0 0 0 300px; color:#CD591B;}
#toutes-realisations a { color: #CD591B; text-decoration: none; font-weight: bold;}
#toutes-realisations a { color: #CD591B; text-decoration: underline; font-weight: bold;}
.zone-book { position:relative; float:right; margin:0px 0 0 87px; width:705px; height:300px; }
.masque-book { position: absolute; top:0; left: 0; background: url(../images/masque-panoramique.png) no-repeat left top; width:705px; height: 240px; z-index: 150; overflow: hidden; }
h2.book-titre { position: relative; margin:20px 0 0 460px; color: #CD591B; width: 210px; }
h2.book-client { position: relative; margin:20px 0 0 460px; color: #333333; font-size: 12px; width: 210px; }
h2.book-secteur { position: relative; margin:10px 0 0 460px; color: #333333; font-size: 12px; width: 210px; }
h2.book-prestation { position: relative; margin:10px 0 0 460px; color: #333333; font-size: 12px; width: 210px; }
h2.book-annee { position: relative; margin:10px 0 0 460px; color: #333333; font-size: 12px; width: 210px; }


#my_slideshow { position: relative; }

div.slideshow ul { position: absolute; width: 450px; top: 240px; left: 0px; overflow: hidden; z-index: 200; }
div.slideshow ul a {opacity: 0.8;cursor: pointer;display: block;background-position: 50% 50%;width: 38px;height: 37px;}
div.slideshow ul a.active,div.slideshow ul a:hover { opacity: 1; }
div.slideshow ul li { float: right; list-style: none;background: url(../images/img-vignette.png) no-repeat; margin:0 0px; width: 48px; height: 48px; padding: 4px 3px 3px 4px;}

div.book ul { position: absolute; width: 700px; top: 240px; left: 00px; overflow: hidden; z-index: 200; }
div.book ul a {opacity: 0.8;cursor: pointer;display: block;background-position: 50% 50%;width: 38px;height: 37px;}
div.book ul a.active,div.book ul a:hover { opacity: 1; }
div.book ul li { float: right; list-style: none;background: url(../images/img-vignette.png) no-repeat; margin:0 0px; width: 48px; height: 48px; padding: 4px 3px 3px 4px;}


/* ACTUS */
.actu-top { position: relative; margin-left:285px; width:705px; height: 25px; background: url(../images/img-actu-top.png) no-repeat left bottom; }
.date { padding-left:10px; color: #CD591B; font-weight: bold; }
.actu-bottom { position: relative; margin:0 0 40px 285px; width:705px; background: url(../images/img-actu-bottom.png) no-repeat left bottom; min-height: 237px; }
.actu { width:705px; overflow: hidden; }
.actu li { float: left; list-style: none; }
.actu li.image { position: relative; float: left; width:173px; height: 207px; overflow: hidden; margin-left:15px; text-align: center; }
.actu li.intro { position: relative; float: left; width:440px; margin-left:25px; padding:0 0 30px 0;}
.actu li.intro p { padding-bottom:20px; line-height: 22px; }
a.suite-orange { background-color: #CD591B; padding:5px; color:white; text-align: center; text-decoration: none;}
a.suite-orange:hover { background-color: #E6AC8D; padding:5px; color:white; text-align: center; text-decoration: none;}
#nav_actus { width: 320px; margin-left:455px; height:45px;  }
#nav_actus li { list-style: none; width: 150px; float: left; margin-left:10px; } 



/* CONTACT */
fieldset.contact { border:0; width:550px; margin-left: 285px;}
fieldset.contact label { width: 150px; float: left; padding-right: 10px; line-height: 25px; text-align: right; }
fieldset.contact p { margin:15px 0; }
fieldset.contact input[type=text] { width:350px; border: 1px solid #CD591B; height: 21px; padding:4px 2px 0 2px; }
fieldset.contact textarea { width:350px; border: 1px solid #CD591B; height: 120px; padding:4px 2px 0 2px; }
fieldset.contact input[type=submit] { border: 1px solid #CD591B; background-color: #E6AC8D; height: 30px; padding:0px 5px; color: white; cursor: pointer; margin-left:290px; }
fieldset.contact input[type=submit]:hover { border: 1px solid #CD591B; background-color: #CD591B; height: 30px; padding:0px 5px; color: white;cursor: pointer; }
.obligatoire { padding-left:5px; color: #CD591B; font-size: 20px;}

/* MENTIONS */
.mentions-legales { height: 290px; padding-left: 270px; }
.mentions-legales p { margin:10px 0; clear: both; line-height: 18px; }
.mentions-legales a { color:#CD591B; }
.mentions-legales a:hover { color:#CD591B; text-decoration: none; }
.mentions-legales label { float: left; width: 150px; text-align: right; padding-right: 5px; font-weight: bold; min-height: 40px;  }

/* FOOTER */
#footer { position: relative;  background-color: #CD591B; width: 100%;  }
#footer-container { position: relative; width: 990px; margin:0 0 0 0px; padding:40px 0 0px 0; margin:0 auto; }
#footer-contain { position: relative; width: 650px; margin:0px 0 0 300px; color: white; background: url(../images/img-back-footer.png) repeat-y; min-height: 140px; padding:0 0 20px 0; min-height: 180px; }
#footer-contain p a { color: white; text-decoration: underline; }
#footer-contain-reference { position: relative; width: 650px; margin:0px 0 0 300px; color: white; min-height: 140px; padding:0 0 20px 0; }
#footer-contain-reference h2 { margin:0 0 10px 0; }

#footer-contain li { list-style: none; }

#footer-contain li.left { position: relative; float: left; width:450px; padding-right:15px; line-height: 18px; }
#footer-contain li.left p a { color: white; }
#footer-contain li.left p a:hover { text-decoration: none; }
#footer-contain li.right { float: right; width:160px; }
#footer-contain li.right h2 { margin:0 0 10px 0; font-size: 18px; }
#footer-contain li.right h3 { margin:10px 0; font-size: 12px; font-weight: normal; }

#olivia { position: absolute; top:-231px; left:0; background: url(../images/olivia.gif) no-repeat; width: 330px; height: 350px; z-index: 2; }
#olivia h2 { text-indent: -9999em; }

#footer-left { position: absolute; bottom:0; left:0; background: url(../images/img-bottom-left.png) no-repeat white; width:28px; height: 28px;  }
#footer-right { position: absolute; bottom:0; right:0; background: url(../images/img-bottom-right.png) no-repeat white; width:28px; height: 28px; }

#footer-info { position: relative; width: 990px; margin:10px auto 0 auto; padding:0 0 20px 0; }
#footer-info li { list-style: none; font-size: 12px; color: #A2A2A2; }
#footer-info li.left { float: left; width:490px; margin-left:70px; }
#footer-info li.right { float: right; }
#footer-info a { color: #A2A2A2; text-decoration: none; }
#footer-info a:hover { color: #666666; text-decoration: none; }