/* CSS Document */ /* Gabarit 2 colonnes du Front */ *{ margin:0; padding:0; border: none; } body { padding: 0; font-family: comic sans MS; font-size: 12px; text-align: left; color: #646464; background:url(../images/fond/bgtop.gif) top left repeat-x; background-color: #801c8f; overflow-x: hidden } h1{ margin-right:40px} h5 { margin: 15px 0 10px 0px; font: normal 16px "Trebuchet MS"; color: #806b3c } p{ font: normal 11px/15px comic sans MS; margin: 0 0 5px 0; text-align:left } input { padding: 0 0 0 3px; font: normal 11px comic sans MS } textarea { padding: 4px; font: normal 11px comic sans MS } ul li { list-style: none; font: normal 11px/15px comic sans MS; margin: 10px 15px 10px 24px } ul.puced li { list-style: none; margin: 10px 15px 10px 24px; padding: 0 0 0 13px; background: url(../images/puce/puce.gif) left 2px no-repeat } ul.radio li { float: left } ul.radio li input { margin: 0 4px 0 0; position:relative; top: 2px; left: 0 } a img { border: none; text-decoration: none } a { color:#000; text-decoration: underline; font: normal 11px comic sans MS } a:hover{ color: #b55ec2; text-decoration: underline } abbr{ cursor: help; } /* Conteneurs generaux */ #main {width: 100%; padding-bottom:11px; text-align:left; background: url(../images/fond/bgbottom.gif) left bottom repeat-x; } #conteneur{ background-color:#f6eff6; margin:3px auto 7px auto} #intro { width:967px; height:54px; margin:0 auto; padding-top:10px; text-align:center; position:relative} #intro ul{ margin-left:200px;} #intro ul ul{ margin-left:0; z-index:15000} #menu-top3{position:absolute; top:0px; left:0px; width: 910px; z-index:100000000 } /* Menu-top */ #intro li{ margin:0;float:left;} #intro li li{ float:none; text-align:left} #intro a{ float:left; margin:1px 0px auto 0px;} #intro li li a{ float:none; text-decoration:none;color:#000; font-size:11px; font-weight:bold; font-family:arial} #ssmenusociete{position:absolute; top:75px; left:200px; width:130px } #ssmenusociete li{ background:url(../images/menu/fd-societe.gif) left bottom repeat-x; background-color:#95b7f1; border:1px solid #fff} #ssmenusociete li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff; border:1px solid #444} #ssmenumarques{position:absolute; top:75px; left:345px; width:130px } #ssmenumarques li{ background:url(../images/menu/fd-marques.gif) left bottom repeat-x; background-color:#ff8c8f;border:1px solid #fff} #ssmenumarques li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff; border:1px solid #444} #ssmenuteinture{position:absolute; top:75px; left:460px; width:130px } #ssmenuteinture li{ background:url(../images/menu/fd-teinture.gif) left bottom repeat-x; background-color:#cfeb3f;border:1px solid #fff} #ssmenuteinture li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff; border:1px solid #444} #ssmenusoin{position:absolute; top:75px; left:595px; width:130px } #ssmenusoin li{ background:url(../images/menu/fd-soin.gif) left bottom repeat-x; background-color:#9befff;border:1px solid #fff} #ssmenusoin li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff; border:1px solid #444} #ssmenumode{position:absolute; top:75px; left:700px; width:130px } #ssmenumode li{ background:url(../images/menu/fd-mode.gif) left bottom repeat-x; background-color:#f794c2;border:1px solid #fff} #ssmenumode li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff;border:1px solid #444} #ssmenucontact{position:absolute; top:75px; left:815px; width:130px } #ssmenucontact li{ background:url(../images/menu/fd-contact.gif) left bottom repeat-x; background-color:#bd94eb;border:1px solid #fff} #ssmenucontact li:hover{ background:url(../images/menu/fd-on.gif) left bottom repeat-x; background-color:#fff; border:1px solid #444} /* content-home */ #content-home{ width:966px; margin:0 auto} #content-home #hometop{ background:url(../images/fond/home-top.jpg) top left no-repeat; height:20px} #content-home #homeleft{ background:url(../images/fond/home-left.gif) top left repeat-y; width:503px} #content-home #homeright{ background:url(../images/fond/home-right.jpg) top left repeat-y; width:463px} /* content-cms */ #cmscontent{ width:972px; margin:0 auto;} #cmscontent #cmstop{ background:url(../images/fond/cmstop.gif) top left no-repeat; height:10px} #cmscontent #cmsleft{ background:url(../images/fond/cmsleft.gif) top left no-repeat; width:22px} /*Mode et deco*/ /*#cmscontent .bgcolormenu-15{ background:url(../images/fond/back-15.gif) top left repeat-y; width:227px; padding-bottom:480px}*/ #cmscontent .bgcolormenu-15{ background:url(../images/fond/back-15.gif) top left repeat-y; width:227px; } #cmscontent .bgcolormenu-15 li{ margin:6px 0px 5px 0px; position:relative; left:5px;background:url(../images/puce/li_15.gif) left 7px no-repeat; padding-left:14px} #cmscontent .bgcolormenu-15 li li {background:url(../images/puce/ssli15.gif) left 8px no-repeat; padding-left:10px; width:200px;margin-bottom:0px;margin-top:0px;} #cmscontent .bgcolormenu-15 li .sousdynamic{ text-decoration:none; font-family:comic sans MS; color: #f8dfea; font-weight:bold; font-size:13px;line-height:12px} /*Societe*/ #cmscontent .bgcolormenu-16{ background:url(../images/fond/back-16.gif) top left repeat-y; width:227px;} #cmscontent .bgcolormenu-16 li{ margin:6px 0px 5px 0px; position:relative; left:5px;background:url(../images/puce/li_16.gif) left 7px no-repeat; padding-left:14px} #cmscontent .bgcolormenu-16 li li {background:url(../images/puce/ssli16.gif) left 8px no-repeat; padding-left:10px; width:200px;margin-bottom:0px;margin-top:0px;} #cmscontent .bgcolormenu-16 li .sousdynamic{ text-decoration:none; font-family:comic sans MS; color: #d5ddf2; font-weight:bold; font-size:13px;line-height:12px} /*Marques et produits*/ #cmscontent .bgcolormenu-13{ background:url(../images/fond/back-13.gif) top left repeat-y; width:227px;} #cmscontent .bgcolormenu-13 li{ margin:6px 0px 5px 0px;position:relative; left:5px;background:url(../images/puce/li_13.gif) left 7px no-repeat; padding-left:14px} #cmscontent .bgcolormenu-13 li li {background:url(../images/puce/ssli13.gif) left 8px no-repeat; padding-left:10px; width:200px;margin-bottom:0px;margin-top:0px;} #cmscontent .bgcolormenu-13 li .sousdynamic{ text-decoration:none; font-family:comic sans MS; color: #fae7e7; font-weight:bold; font-size:13px; line-height:12px} /*Espace teinture*/ #cmscontent .bgcolormenu-11{ background:url(../images/fond/back-11.gif) top left repeat-y; width:227px;} #cmscontent .bgcolormenu-11 li{ margin:6px 0px 5px 0px; position:relative; left:5px;background:url(../images/puce/li_11.gif) left 7px no-repeat; padding-left:14px} #cmscontent .bgcolormenu-11 li li {background:url(../images/puce/ssli11.gif) left 8px no-repeat; padding-left:10px; width:200px;margin-bottom:0px;margin-top:0px;} #cmscontent .bgcolormenu-11 li .sousdynamic{ text-decoration:none; font-family:comic sans MS; color: #f8f1e3; font-weight:bold; font-size:13px;line-height:12px} /*Soin du linge*/ #cmscontent .bgcolormenu-14{ background:url(../images/fond/back-14.gif) top left repeat-y; width:227px;} #cmscontent .bgcolormenu-14 li{ margin:6px 0px 5px 0px; position:relative; left:5px; background:url(../images/puce/li_14.gif) left 7px no-repeat; padding-left:14px;} #cmscontent .bgcolormenu-14 li li {background:url(../images/puce/ssli14.gif) left 8px no-repeat; padding-left:10px; width:200px;margin-bottom:0px;margin-top:0px;} #cmscontent .bgcolormenu-14 li .sousdynamic{ text-decoration:none; font-family:comic sans MS; color: #d7f4fa; font-weight:bold; font-size:13px;line-height:12px} /*Contact*/ #cmscontent .bgcolormenu-6{ background:url(../images/fond/back-6.gif) top left repeat-y; width:227px;} #cmscontent .bgcolormenu-6 li{ margin:6px 0px 5px 0px; position:relative; left:5px;background:url(../images/puce/li_6.gif) left 7px no-repeat; padding-left:14px} #cmscontent .bgcolormenu-15 li .sousdynamic:hover, #cmscontent .bgcolormenu-16 li .sousdynamic:hover, #cmscontent .bgcolormenu-13 li .sousdynamic:hover, #cmscontent .bgcolormenu-11 li .sousdynamic:hover,#cmscontent .bgcolormenu-14 li .sousdynamic:hover{ color: #fff; } #cmscontent #cmsmiddle{ background:url(../images/fond/cmsmiddle.jpg) top left repeat-y;background-color:#fff; width:687px} #cmscontent #cmsright{ background:url(../images/fond/cmsright.gif) top left repeat-y; width:24px} #cmscontent #nocms{ background-color:#fff; padding:15px} #cmscontent #cmsmenu h2{ margin: 0} #cmscontent #nocms h2{ text-align:center} #cmscontenu{ width:90%; margin-left:56px;} #cmscontenu h2{ text-align:center; margin: 15px 0; padding: 0 } #search h2 span{background:url(../images/puce/11h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-6 h2 span{background:url(../images/puce/11h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-11 h2 span{background:url(../images/puce/11h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-13 h2 span{background:url(../images/puce/13h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-14 h2 span{background:url(../images/puce/14h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-15 h2 span{background:url(../images/puce/15h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } .contenu-16 h2 span{background:url(../images/puce/16h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } #contenthome h2 span{background:url(../images/puce/11h2.gif) left top no-repeat; padding-left:35px; padding-top:21px; } /* content */ #content{ width:966px; margin:0 auto} #content #contenttop{ background:url(../images/fond/content-top.jpg) top left no-repeat; height:31px} #content #contentbottom{ background:url(../images/fond/content-bottom.gif) top left repeat-y; padding-bottom:25px} /* CMS */ .chapeau{ font-size:13px; font-weight:bold; margin-bottom:10px; padding-bottom:22px } .descri p{ font-family:comic sans MS} h3{ font-size:13px; font-weight:bold; color:#000; margin:10px 0 0 0} h4{ font-weight:bold; font-size:13px; color:#3bc0dd; margin:0 0 10px 0} /* Actus */ .cadre{ background:url(../images/fond/actus.jpg) left bottom repeat-x; background-color:#831e92; padding:11px; color:#fff;} /* Plan du site */ .plansite td{ width:30%; height:100px; vertical-align:top; padding:0px} .plansite .plan_societe{ border:2px solid #093490; background:url(../images/illustr/plan_societe.jpg) bottom right no-repeat;} .plansite .plan_societe .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#093490; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} .plansite .plan_marques{ border:2px solid #e0091b; background:url(../images/illustr/plan_marques.jpg) bottom right no-repeat;} .plansite .plan_marques .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#e0091b; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} .plansite .plan_teinture{ border:2px solid #a0bb0d; background:url(../images/illustr/plan_teinture.jpg) bottom right no-repeat;} .plansite .plan_teinture .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#a0bb0d; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} .plansite .plan_soin{ border:2px solid #0ab0d4; background:url(../images/illustr/plan_soin.jpg) bottom right no-repeat;} .plansite .plan_soin .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#0ab0d4; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} .plansite .plan_mode{ border:2px solid #de1770; background:url(../images/illustr/plan_mode.jpg) bottom right no-repeat;} .plansite .plan_mode .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#de1770; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} .plansite .plan_contact{ border:2px solid #7917de; background:url(../images/illustr/plan_contact.jpg) bottom right no-repeat;} .plansite .plan_contact .plantitre{ font-size:16px; text-align:center; font-weight:bold; color:#7917de; background:url(../images/fond/plantitre.gif) left top repeat-x; height:35px; padding-top:8px} /* Module TAO */ .taotitle{ font-size:14px; font-weight:bold; color:#1b3373} .sstitletao{ font-size:12px; font-weight:bold; color:#660099} form.taoform { background:url(../images/illustr/tao.jpg) top right no-repeat;} form.taoform li { list-style-type:none} form.taoform label{ font-weight:bold;} form.taoform p{ margin-top:25px } form.taoform .radio{border:none; margin-right:7px} form.taoform select{ font-size:10px; color:#333; border:1px solid #ccc; width:420px} form.taoform input.valid{ border:1px solid #842a8c; background:url(../images/fond/input.gif) left top repeat-x; color:#fff; height:18px; margin-bottom:21px; font-family:comic sans ms; font-size:11px; } .resulttao td{ border:1px solid #9933CC; width:30%; text-align:center} .titletable{ height:50px; color: #993399; text-align:center; font-weight:bold; font-size:13px} .tourbi li{ background:url(../images/puce/tourbi.gif) left 4px no-repeat; padding-left:10px} .recap{ width:597; height:175px; background:url(../images/fond/recap.jpg) left top no-repeat; padding:25px 23px 23px 8px} .recap td{ border-bottom:1px solid #e7e7e7; padding:4px} .recap .un{ font-weight:bold; color:#444343; text-align:left; width:200px} .recap .deux{ font-weight:bold; color:#7e7d7d;text-align:left} #contenu{ width:90%; margin:0 auto} /* Footer */ #outro { width:100%; height: 0px; position:relative; z-index: 250} #outro p { color:#ecc8ee; text-align: center; padding:0 } #outro p a { color:#ecc8ee; text-decoration: none } #outro p a:hover { text-decoration: underline } /* Home */ .teinture-home div{ margin-bottom:0px; position:relative} .teinture-home{ width:92%; left:30px} .teindre-off ul, .teindre-on ul{ position:absolute; top:61px; z-index:1000; position:absolute} .raviver-off ul, .raviver-on ul{ position:absolute; z-index:1000; position:absolute; right:0px; top:72px} .creer-off ul, .creer-on ul{ position:absolute; top:53px; z-index:1000; position:absolute} .creer2-off ul, .creer2-on ul{ position:absolute; top:53px; z-index:1000; position:absolute} .teinturehome .ulleft li{ list-style-type:none; background:url(../images/puce/ulhome.gif) left 4px no-repeat; padding-left:15px; text-align:left; margin:2px 32px;} .teinturehome .ulright li{ list-style-type:none; background:url(../images/puce/ulhome.gif) right 4px no-repeat; padding-right:15px; text-align:right;margin:2px 34px} .teinturehome a{ color:#6b6b6b; text-decoration:none} .teinturehome a:hover{ color:#444; } .teindre-off{ position:relative;width:409px; height:148px; background:url(../images/fond/teindre-off.jpg) top left no-repeat;} .teindre-on{ position:relative;width:409px; height:148px; background:url(../images/fond/teindre-on.jpg) top left no-repeat;} .raviver-off{ position:relative;width:408px; height:152px; background:url(../images/fond/raviver-off.jpg) top left no-repeat;} .raviver-on{ position:relative;width:408px; height:152px; background:url(../images/fond/raviver-on.jpg) top left no-repeat;} .creer-off{position:relative; width:457px; height:137px; background:url(../images/fond/creer-off.jpg) top left no-repeat;} .creer2-off{position:relative; width:457px; height:137px; background:url(../images/fond/creer2-off.jpg) top left no-repeat;} .creer-on{ position:relative;width:457px; height:137px; background:url(../images/fond/creer-on.jpg) top left no-repeat;} .totala{ display:block; position:absolute; width:100%; height:100%; z-index:2} #homeright div{width:88%; margin-left:18px;} .img-edito{ float:left; margin:auto 9px;} .edito{ margin-top:-5px} .preserver h5{ margin-top:0px} #quotidien{ margin-left:24px; margin-top:-10px} .marques{ position:relative; height:197px} .marques .img-marques{ position:absolute; z-index:100; bottom:-10px} .marques h5{ z-index:101; position:absolute} /* Formu recherche */ #search{ position:absolute; top:150px; left:95px;z-index:100000; width:700px; border:1px solid #333; padding:12px;background:url(../images/illustr/search.jpg) right center no-repeat;background-color:#fff; zoom:1} .search{ width:80%; margin:0; padding:10px; } .search input{ border: 1px solid #cfcfcf; padding: 0 0 0 2px } .search input.valid{border:1px solid #842a8c; background:url(../images/fond/input.gif) left top repeat-x; color:#fff; height:18px; font-family:comic sans ms; font-size:11px;} p.links{ text-align:center; border-bottom:1px solid #ccc; border-top:1px solid #ccc;} p.links a{ float:none; color:#660099; font-weight:bold; text-decoration:none} p.links span{ color:#777} .result a{ float:none; font-weight:bold; font-size:14px; color:#660099} .result{ border-left:1px solid #ccc; padding-left:10px} .resultsearch{ background:url(../images/fond/search.jpg) right bottom no-repeat;} /* Page Mentions */ .adr { margin: 20px 0 15px 145px } .adr2 { margin: 20px 0 15px 45px } .adr, .adr2 { float: left; min-height: 155px; padding: 16px; width: 235px; background: url(../images/fond/mentions.jpg) left top no-repeat;} .adr-Bot, .adr2-Bot { padding: 10px 0 0 0; text-align:center} .adr-Bot p, .adr2-Bot p{ text-align:center; color:#fff} /* Page Contact */ ul.listecontact { margin: 15px 0 10px 0; padding: 0 } ul.listecontact li { float: left; margin: 0 5px 15px 5px; padding: 4px; border: 1px dotted #8adad9 } form.contactform { width: 95%; } form.contact{background: url(../images/illustr/contact.jpg) left top no-repeat;margin: -22px auto 9px auto; padding: 1px 10px 108px 25px; } form.newsletter{background: url(../images/illustr/newsletter.jpg) left top no-repeat;margin: -41px auto 10px auto; padding: 92px 10px 133px 58px; } form.contactform p { } form.contactform input { border: 1px solid #cfcfcf; padding: 0 0 0 2px } form.contactform label, form.formatform label { width: 196px; font: normal 13px comic sans ms} form.contact label { width:149px } form.contactform textarea { width: 94%; margin: 6px auto 0 auto; border: 1px solid #cfcfcf; display: block; height:112px } .conformement { margin: 0 auto; font: normal 10px comic sans MS; width: 100%; text-align:center } a.question_boule { cursor: help; width: 19px; height: 20px; margin: 0 0 0 5px; position:relative; top: 4px; left: 0 } .centerbut { text-align: center; margin: 13px 0 5px 0 } #content .centerbut input { border:none } form.contactform input.valid{ border:1px solid #842a8c; background:url(../images/fond/input.gif) left top repeat-x; color:#fff; height:18px; margin-bottom:21px; font-family:comic sans ms; font-size:11px; } /* Quiz */ .highlight-quiz {margin:10px 0; position:relative; width:100%;} #btn_quiz {position:absolute; bottom:11px; right:14px;} #formQuizz {padding:10px;} .questions h3 {margin:0 0 5px; color:#DD1C21;} .questions p {margin:10px 0 15px;} .questions .reponse-block {margin:0 0 10px;} .questions .reponse-block span {width:10px; margin:0 5px 0 0; display:inline-block;} .questions .valid {background:url("../images/fond/input.gif") repeat-x scroll left top transparent; border:1px solid #842A8C; color:#FFFFFF; font-family:comic sans ms; font-size:11px; height:18px; margin-bottom:21px; padding:0;} .quizform {border:1px solid #F2F2F2; padding:10px; width:35% !important; margin:0 auto; } /* General styles */ .lbleft { float: left; width: 140px } .input { border: 1px solid black } .bordered { border: 1px solid black } .noborder { border:none } .clear { clear:both; display: none } .kill { display: none } .fleft { float: left; margin-right:10px } .fright { float: right } .center { text-align: center } .noborder { border: none } .bita { margin: 15px auto 12px auto; text-align: center; font: bold 12px comic sans MS; color: #0fa2be } .center { text-align: center } .left { text-align: left } .right { text-align: right } .full { width: 100% } .button { text-align: center; margin: 15px 0 10px 0; clear: both } .centerbut { text-align: center; margin: 15px 0 10px 0; clear: both } /* Messages d erreurs */ .denied { margin: 10px 20px 20px 30px; color: red; font: normal 12px comic sans MS; } .denied ul li { margin: 0 0 7px 0; padding: 0 25px 0 16px; background: url(../images/puce/message.jpg) left 1px no-repeat; } .rose{ color: #de1770} .bleu{ color: #0c3498} .violet{ color: #7917de} .mauve{ color: #7d1a8c} .rouge{ color: #e45959} .turquoise{ color: #3bc0dd }