* { font-family:Arial, Helvetica, sans-serif; }
body, div, ul, ol, li, a, h1, h2, h3, form, p, span, dl, dd, dt, hr {padding:0; margin:0;}

a:active, a:focus {outline:none; }
a img { border :none; }
object {outline:none;}


#conteneur { position:relative; width:855px; height:1020px; margin:0 auto; text-align:center; background:url(../images/bg-corps.gif) no-repeat 0 137px; text-align:left; }

#header { position:relative;height:137px; background:url(../images/bg-header.jpg) no-repeat bottom left; text-align:left; }
#mascotte {position:absolute; top:0; left:0; width:170px; height:90px; }
#backHome { position:absolute; top:0; left:175px; display:block; width:140px; height:118px; background:url(../images/home-pickabee.gif) 0 0 no-repeat; line-height:110px; font-size:30px; text-align:center; text-indent:-5000px; color:#333; }

/* menu */
#menu { position:absolute; top:128px; left:62px; text-align:left; z-index:5; height:35px; width:855px; }

#rubriques { position:relative; list-style-type:none; }
#rub1 { position:absolute; top:0; left:0; width:126px; }
#rub2 { position:absolute; top:0; left:126px; width:126px; }
#rub3 { position:absolute; top:0; left:252px; width:126px; }
#rub4 { position:absolute; top:0; left:378px; width:126px; }
#rub5 { position:absolute; top:0; left:504px; width:126px; }
#rub6 { position:absolute; top:0; left:630px; width:133px; }

/* niv1 */
.rubTitle { position:relative;text-indent:-5000px; display:block; width:100%; height:100%; text-align:center; line-height:35px; color:#fff; text-decoration:none; font-weight:bold; background-image:url(../images/menu.gif); background-repeat:no-repeat; }

#rub1 .rubTitle {background-position:-62px 0; }
#rub1 .rubTitle:hover {background-position:-62px -35px; }
#rub1 .rubTitle.actif {background-position:-62px -70px;}

#rub2 .rubTitle {background-position:-188px 0; }
#rub2 .rubTitle:hover {background-position:-188px -35px; }
#rub2 .rubTitle.actif {background-position:-188px -70px; }

#rub3 .rubTitle {background-position:-314px 0; }
#rub3 .rubTitle:hover {background-position:-314px -35px; }
#rub3 .rubTitle.actif {background-position:-314px -70px; }

#rub4 .rubTitle {background-position:-440px 0; }
#rub4 .rubTitle:hover {background-position:-440px -35px; }
#rub4 .rubTitle.actif {background-position:-440px -70px; }

#rub5 .rubTitle {background-position:-566px 0; }
#rub5 .rubTitle:hover {background-position:-566px -35px; }
#rub5 .rubTitle.actif {background-position:-566px -70px; }

#rub6 .rubTitle {background-position:-692px 0; }
#rub6 .rubTitle:hover {background-position:-692px -35px; }
#rub6 .rubTitle.actif {background-position:-692px -70px; }

/* niv2 */
#rubriques li ul {position:relative;border-width:0 1px 1px 1px;border-style:solid;border-color:#e68e00;width:100%;background:url(../images/bg-sous-menu.gif) top right repeat-y;list-style-type:none;}
#rubriques li ul li {position:relative;margin:0;background:url(../images/bg-sous-menu.gif) top right repeat-y; font-size:11px; width:100%;}
#rubriques li ul li a {text-indent:0; color:#666; text-decoration:none; display:block;height:100%;padding:4px; }
#rubriques li ul li a:hover { background:#fff;color:#000; }
#rubriques li ul li a.actif { background:#f2b806;color:#000; }


#voeux {position:absolute; margin-top:60px; margin-left:60px; z-index:200;}

#contenu {position:absolute; top:235px;left:80px; width:460px; height:620px; text-align:justify; color:#333; font-size:12px; overflow:visible; }
#contenu p {padding:0 0 8px 30px; }
#contenu ul {padding:0 0 0 30px; list-style-position:inside; }
#contenu ul li {padding:0 0 5px 0;}
#contenu a {color:#333;}
#contenu a:hover {text-decoration:none;}

#colonne { position:absolute; top:180px; left:600px; height:600px; width:200px; }

h1 {color:#f5ab00; font-size:18px; line-height:40px; letter-spacing:-1px;margin-bottom:20px;}
h2 {color:#f5ab00; font-size:16px; padding:15px 0 0 30px; letter-spacing:-1px; }
h2 a {color:#f5ab00;text-decoration:none;}
h2 a:hover {text-decoration:underline;}

/* Bloc competences avec image en remplacement texte li */
#comp {position:absolute; top:0; width:200px;}
#comp h3 {text-indent:-5000px; font-size:8px;}
#comp ul {list-style-type:none;}
#comp li {height:35px; width:200px; text-indent:-5000px; background-position:top right; background-repeat:no-repeat;}
.c1 {background:url(../images/comp/webdesign.gif);}
.c2 {background:url(../images/comp/mise-en-page-css.gif);}
.c3 {background:url(../images/comp/creation-de-sites-internet.gif);}
.c4 {background:url(../images/comp/developpement-web.gif);}
.c5 {background:url(../images/comp/back-offices-de-gestion.gif); padding-bottom:12px; line-height:47px;} /* line-height pour IE */
.c6 {background:url(../images/comp/refonte-graphique.gif);}
.c7 {background:url(../images/comp/animation-flash.gif); padding-bottom:3px; line-height:38px;}
.c8 {background:url(../images/comp/audit-conseil.gif);}

/* Bloc de news */
#news {position:absolute; top:350px; width:220px; height:240px;  background:url(../images/bg-news.gif) top left no-repeat; padding:0 0 0 0; color:#996; font-size:11px;}
#news p { margin:0 0 5px 60px; }
#news a {text-decoration:none; color:#996;}
#news a:hover {color:#9c3;}

/* Coordonnées */
#coord {position:absolute;top:860px;left:670px;width:140px;font-size:11px;color:#fff;line-height:11px;}
#coord p {text-align:right;}
#coord h3 {text-indent:-5000px; background:url(../images/agence-pickabee.gif) top right no-repeat; padding-bottom:8px; }

/* Pied de page */
#footer {position:absolute; width:100%; top:990px; font-size:10px; color:#996; text-align:center;}
#footer a {text-decoration:none; color:#996;}
#footer a:hover {color:#9c3;}

.fleft {float:left;}
.ifright {float:right; padding:0 0 5px 20px;}
.ifleft {float:left; padding:0 20px 5px 0;}
.nof {visibility:hidden; clear:both;}

/* Validation des formulaires */
#erreurs { font-weight:bold; color:red;}
.fieldWithErrors input, .fieldWithErrors textarea { border:1px solid red; }

/* pages références*/
.extraitRef { text-align:left; font-size:11px; padding:10px 0 0 34px; }
a.iref { display:block; background-color:#fff; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; width:62px; height:62px; padding:5px; float:left; }
a.irefVert { display:block; background-color:#fff; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3; /*width:62px; height:62px; padding:5px 0 0 5px; float:left;*/ }
a.iref:hover, a.irefVert:hover, a.irefVert.active {filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; }

#contenu h3 {clear:both; display:inline; font-size:13px; float:left; margin-left:60px; padding:0 5px 0 0; height:13px; }

/* images des ref et des pages de detail */
.iref, .idref {border:0; margin-bottom:10px;}
.iref {position:relative; float:left; display:inline; margin-right:10px; }
.nosrefs {margin:20px 0 20px 60px; width:420px; }

/* Page références/voir */

/* carousel references */
#liste_references { position:absolute; width:75px; height:500px; left:-30px; top:50px; padding:0; font-size:9px; }
#carouselRef {  position:absolute; top:0; left:0; }
#carouselRef .carouselRefContent { position:absolute;width:75px;height:455px;top:25px;overflow:hidden; }
#carouselRef ul { margin:0; padding:0; height:100000px; position:relative; top:0; left:0; }
#carouselRef ul li { margin: 0; padding:0; width:75px; height:65px; text-align:center; list-style:none; float:left;}                         
#carouselRef .refs_prev { height:25px; width:75px; background: url(../images/flecheHaut.gif) 0 0 no-repeat; position:absolute;cursor:pointer;top:0;left:0;}
#carouselRef .previous_button_over { }
#carouselRef .previous_button_disabled { background:none; cursor:default; }
#carouselRef .refs_next { height:25px; width:75px; background: url(../images/flecheBas.gif) 0 0 no-repeat; position:absolute;cursor:pointer;top:500px;left:0;}
#carouselRef .next_button_over { }
#carouselRef .next_button_disabled { background:none; cursor:default; }

#ficheRef { position:absolute; left:50px; top:50px; width:415px; background:url(../images/bg-top-fiche-ref.gif) 0 0 no-repeat; padding:20px 0; }
#ficheRef p { padding:0 15px 8px 25px; }
#ficheRef a { color:#333; }

#detailRef { position:relative; width:100%; clear:right; margin:20px 0 0 0; padding:0 0 20px 0;  background:url(../images/bg-bottom-fiche-ref.gif) bottom right no-repeat; }

#prestations { position:relative; font-size:11px; width:180px; margin:0 0 0 25px; }
#prestations strong {font-size:12px;}

/* vignettes illustration de la fiche */
#illRefSmall { position:relative; float:right; width:180px; }
#illRefSmall a { position:relative; display:block; width:40px; height:40px; border:1px solid #999; float:left; display:inline; margin:5px; text-decoration:none; } 



#contenu #illRefBig { position:relative;width:380px;margin:10px 0 0 25px;padding-bottom:5px;text-align:center;overflow:hidden;  }
#contenu #illRefBig ul { position:relative;list-style-type:none;padding:0;margin:0;list-style-position:outside; }
#contenu #illRefBig li { position:relative;padding:0;margin:0;}
#contenu #illRefBig li img {position:relative;padding:0;margin:0;border:1px solid #999; }

/* Lien vers les sites projets */
.ext, .ext:visited {float:right; padding:0 15px 0 25px; background:url(../images/ext.gif) 0 50% no-repeat; color:#f90; text-decoration:none; font-size:10px; }
.encours, .encours:visited {float:right; padding:0 15px 0 20px; background:url(../images/encours.gif) 0 50% no-repeat; color:#693; text-decoration:none; font-size:10px; }
.off {float:right; padding:0 15px 0 0; color:#ccc; text-decoration:none; font-size:10px; }
.ext:hover, .encours:hover { text-decoration:underline; }

/* formulaire de contact */
#formcontact p, #formcontact div {padding:0; margin-left:60px;}
.lab {width:100px; float:left; margin:2px 0 2px 0; }
.ville {width:30px; float:left; margin:2px 6px 2px 10px;}
#formcontact input {margin:2px 0 2px 0;}
#formcontact textarea {width:260px; height:80px; margin-bottom:10px; }
input#contact_ville, input#contact_codepostal, input#contact_message {float:left;}
div#casesg {width:200px; float:left; display:inline; text-align:right; margin-top:10px; margin-left: 0; }
div#casesg input, #casesg label, #casesd input, #casesd label {padding:0; margin:0;}
div#casesd {margin-left:5px; width:230px; float:left; margin-top:10px; }
#envoyer {position:relative; width:92px; height:55px; left:220px; top:10px;}
#repform {height:180px; margin-top:60px; background:url(../images/enveloppe.gif) 40px 0 no-repeat; }
#repform p {padding:0; margin-left:200px; padding-top:5px; width:240px; font-size:11px;}

/* carnet web : extraits */
#carnet .post {position:relative; margin:5px 0; border-bottom:1px dotted #ccc; padding:10px;}
#carnet .post a {color:#f5ab00;}
#carnet .post a:hover {color:#f5ab00;}
#carnet .post a.suite {font-style:italic; font-size:11px; color:#333;display:block;text-align:right;}

#contenu #carnet h2 {padding:0;color:#f5ab00; font-size:16px; padding:5px 0 0 0; letter-spacing:-1px;}
#contenu #carnet p {padding:0 0 8px 0px; }
#contenu #carnet ul {padding:0 0 0 0px; list-style-position:inside; }
#contenu #carnet ul li {padding:0 0 2px 0;}

/* nuage de tags */
#tags {position:absolute; top:200px; right:50px; width:200px; }
#tags ul {list-style-type:none;}
#tags li {width:100%; border-bottom:1px dotted #ccc;}
#tags li a {display:block;width:100%;padding:5px 0;color:#b3d968;text-decoration:none;}
#tags li a.tagsize1 {font-size:1em}
#tags li a.tagsize2 {font-size:1.1em}
#tags li a.tagsize3 {font-size:1.2em}
#tags li a.tagsize4 {font-size:1.4em}
#tags li a:hover {background:url(../images/bg-sous-menu.gif) top right repeat-y; color:#333;}