/** SECRET PRO CASCADE STYLE SHEET **/ /** GENERAL **/ body { margin:0 auto; font: 11px Arial, Helvetica, sans-serif; color:#9b9b9b;} * html body {margin:0 auto; font: 11px Arial, Helvetica, sans-serif; color:#9b9b9b;z-index: -1} a, a:link { font: 11px Arial, Helvetica, sans-serif; color: #69c2c3; text-decoration:underline } a:hover, a:visited { color:#9b9b9b } h1 { color: #b4230B; text-transform:uppercase; font: 11px/14px Arial; font-weight: bold; margin:0;} h1.second { margin-top:10px} h2 { font:12px/20px Arial, Helvetica, sans-serif ; font-weight:bold; color: #b4230B; line-height:15px; margin:5px 0 } ul, li { margin:0; padding:0; list-style:none} img { border:none } img a { border:none } .cG { color: #9b9b9b !important} .cB { color: #b4230b !important } .cBc { color: #69c2c3 !important } .cRb { color: #b4230b !important} .bg1 { background-color: #69c2c3} .bg2 { background-color: #b4230b} .bg3 { background-color: #f39500} .bg4 { background-color: #268bd9} .bg5 { background-color: #f5c230} .lh20 { line-height:20px} .sublimer:hover {background-color: #f5c230} /** marges **/ .mT3 { margin-top:3px} .mB3 { margin-bottom:3px} .mB5 { margin-bottom:5px} .mTB3 { margin-top:3px; margin-bottom:3px; } .mL3 { margin-left:3px} .mR3 { margin-right:3px } .mLR3 { margin-left:3px; margin-right:3px} .mR8 { margin-right: 8px } .mL8 { margin-left: 8px } /** gabari **/ .mT3R3B3L20 { margin:3px 3px 3px 20px} .mT3R0B3L3 { margin:3px 0px 3px 3px } .mT3R3B3L0 { margin:3px 3px 3px 0px } .mT3R0B3L0 { margin:3px 0px 3px 0px } /** CONTENEUR **/ #conteneur { width:771px; height:640px; margin: 0 auto} * html #conteneur {width:771px; height:640px; margin: 0 auto;z-index: 0} #menu { visibility:hidden; display:none; } /** gabari background color **/ .chartebleue .logo {background: url(../imgs/logo_bleue.jpg) top left no-repeat} .charterouge .logo {background: url(../imgs/logo_rouge.jpg) top left no-repeat} .charterouange .logo {background: url(../imgs/logo_orange.jpg) top left no-repeat} .charteorange .logo {background: url(../imgs/logo_jaune.jpg) top left no-repeat} .chartesun .logo {background: url(../imgs/logo_sun.gif) top left no-repeat} /** charte bleue **/ .chartebleue .logo, .chartebleue .menu_topgb1, .chartebleue .choix_cheveux, .chartebleue .choix_produit_menu, .chartebleue .menu_bas_gauche1,.chartebleue #choix_cheveux_sous_menu, .chartebleue #menu_bas , .chartebleue #menu_bas ul { background-color: #69c2c3} /** charte rouge **/ .charterouge .logo, .charterouge .menu_topgb1,.charterouge .choix_cheveux, .charterouge .choix_produit_menu,.charterouge .menu_bas_gauche1, .charterouge #choix_cheveux_sous_menu,.charterouge #menu_bas , .charterouge #menu_bas ul { background-color: #b4230b} /** charte orange **/ .charterouange .logo, .charterouange .menu_topgb1, .charterouange .choix_cheveux, .charterouange .choix_produit_menu, .charterouange .menu_bas_gauche1, .charterouange #choix_cheveux_sous_menu, .charterouange #menu_bas , .charterouange #menu_bas ul { background-color: #f39500 } /** charte jaune **/ .charteorange .logo, .charteorange .menu_topgb1, .charteorange .choix_cheveux, .charteorange .choix_produit_menu, .charteorange .menu_bas_gauche1, .charteorange #choix_cheveux_sous_menu, .charteorange #menu_bas, .charteorange #menu_bas ul { background-color: #f5c230 } /** charte sun **/ .chartesun .logo, .chartesun .menu_topgb1, .chartesun .choix_cheveux, .chartesun .choix_produit_menu, .chartesun .menu_bas_gauche1, .chartesun #choix_cheveux_sous_menu, .chartesun #menu_bas , .chartesun #menu_bas ul { background-color: #268bd9 } /** HEADER **/ #header { position:relative; height:192px; width:771px; } #header .logo { position:absolute; top:0; left:0; width:192px; height:192px;} #header .menu_cheveux { position:absolute; top:0; left:195px; width:190px; height:162px; background-color:#FFFFFF; } #header .menu_cheveux .choix_cheveux { position:relative; height:22px; width:190px; color:#FFFFFF; padding-top:5px; } .chartebleue .choix_cheveux { background-color: #69c2c3 } #header .menu_cheveux .choix_cheveux span { margin-left:5px; color:#FFFFFF;} #header .menu_cheveux .choix_cheveux a { padding-left:5px; font: 11px/16px Arial; color:#FFFFFF; text-decoration:none; } #header .menu_cheveux .choix_cheveux a:hover { text-decoration:underline } #header .menu_cheveux .choix_cheveux img {} #choix_cheveux_sous_menu a {padding:0px 5px; display:block; line-height:15px; background-color:none; font: 11px/14px Arial; color:#FFFFFF; text-decoration:none} #choix_cheveux_sous_menu a:hover { text-decoration:underline } #header .menu_cheveux #choix_cheveux_sous_menu { position:absolute; top:30px; left:0; width:190px; visibility:hidden; display:none; z-index:10 } #header .menu_cheveux .choix_cheveux ul, #header .menu_cheveux .choix_cheveux li { z-index:10000; padding:0; margin:0; list-style:none } #header .menu_cheveux .choix_cheveux li { font: 11px/16px Arial;color:#FFFFFF;background-color:#69c2c3 } #header .menu_cheveux .choix_cheveux form { padding:0; margin:0; height:27px;} select.choixcheveuxbg1 { font: 11px/27px Arial; color:#FFFFFF; border:none; width:190px; background-color:#69c2c3} select.choixcheveuxbg2 { font: 11px/27px Arial; color:#FFFFFF; border:none; width:190px; background-color:#b4230b} select.choixcheveuxbg3 { font: 11px/27px Arial; color:#FFFFFF; border:none; width:190px; background-color:#f39500} #header .menu_cheveux .choix_produit { height:132px; width:190px; background-color:#FFFFFF } #header .menu_cheveux .choix_produit .choix_produit_menu { height:27px; width:185px; font: 11px/27px Arial; color:#FFFFFF; padding-left:5px; } * html .choix_produit_menu { height:27px; width:185px; font: 11px/27px Arial; color:#FFFFFF; padding-left:5px;} #header .menu_cheveux .choix_produit .list_produit { margin-left:10px; height:102px; font:10px Verdana} #header .menu_cheveux .choix_produit .list_produit a { text-decoration:none; color:#9b9b9b;} #header .menu_cheveux .choix_produit .list_produit a:hover { text-decoration:underline; color:#9b9b9b;} /* lien sélectionné menu choix_cheveu */ .chartebleue #header .menu_cheveux .choix_produit .list_produit a.selected { color:#69c2c3 } .charterouge #header .menu_cheveux .choix_produit .list_produit a.selected { color:#b4230b } .charterouange #header .menu_cheveux .choix_produit .list_produit a.selected { color:#f39500 } .charteorange #header .menu_cheveux .choix_produit .list_produit a.selected { color:#f5c230 } .chartesun #header .menu_cheveux .choix_produit .list_produit a.selected { color:#268bd9 } /*------------ MENU -----------------*/ /* cf menu-bar.css et menu-item.css */ #menu_horizontal { width:100%; height:27px; } #header #menu_top { position:absolute; top:165px; left:195px; width:576px; height:27px; color:#FFFFFF; text-transform:uppercase; font:11px/27px Arial; } #menu_horizontal span { display:none } /** menu bleu FR **/ .chartebleue #DHTMLSuite_menuItem000 { background: url(../imgs/menu_top_concept.fr.gif) top left no-repeat; width:90px; height:27px} .chartebleue #DHTMLSuite_menuItem001 { background: url(../imgs/menu_top_gamme.fr.gif) top left no-repeat; width:75px; height:27px} .chartebleue #DHTMLSuite_menuItem002 { background: url(../imgs/menu_top_actu.fr.gif) top left no-repeat; width:80px; height:27px} .chartebleue #DHTMLSuite_menuItem003 { background: url(../imgs/menu_top_secret.fr.gif) top left no-repeat; width:109px; height:27px} .chartebleue #DHTMLSuite_menuItem004 { background: url(../imgs/menu_top_newsletter.fr.gif) top left no-repeat; width:91px; height:27px} .chartebleue #DHTMLSuite_menuItem005 { background: url(../imgs/menu_top_trouver.fr.gif) top left no-repeat; width:131px; height:27px} /** menu bleu EN **/ .chartebleue.lang_en #DHTMLSuite_menuItem000 { background: url(../imgs/menu_top_concept.en.gif) top left no-repeat; width:89px; height:27px} .chartebleue.lang_en #DHTMLSuite_menuItem001 { background: url(../imgs/menu_top_gamme.en.gif) top left no-repeat; width:79px; height:27px} .chartebleue.lang_en #DHTMLSuite_menuItem002 { background: url(../imgs/menu_top_actu.en.gif) top left no-repeat; width:49px; height:27px} .chartebleue.lang_en #DHTMLSuite_menuItem003 { background: url(../imgs/menu_top_secret.en.gif) top left no-repeat; width:144px; height:27px} .chartebleue.lang_en #DHTMLSuite_menuItem004 { background: url(../imgs/menu_top_newsletter.en.gif) top left no-repeat; width:90px; height:27px} .chartebleue.lang_en #DHTMLSuite_menuItem005 { background: url(../imgs/menu_top_trouver.en.gif) top left no-repeat; width:125px; height:27px} /** menu jaune **/ .charteorange #DHTMLSuite_menuItem000 { background: url(../imgs/orange_menu_concept.gif) top left no-repeat; width:90px; height:27px} .charteorange #DHTMLSuite_menuItem001 { background: url(../imgs/orange_menu_gamme.gif) top left no-repeat; width:75px; height:27px} .charteorange #DHTMLSuite_menuItem002 { background: url(../imgs/orange_menu_actu.gif) top left no-repeat; width:80px; height:27px} .charteorange #DHTMLSuite_menuItem003 { background: url(../imgs/orange_menu_secret.gif) top left no-repeat; width:109px; height:27px} .charteorange #DHTMLSuite_menuItem004 { background: url(../imgs/orange_menu_newsletter.gif) top left no-repeat; width:91px; height:27px} .charteorange #DHTMLSuite_menuItem005 { background: url(../imgs/orange_menu_trouver.gif) top left no-repeat; width:131px; height:27px} .chartesun #DHTMLSuite_menuItem000 { background: url(../imgs/bleue_menu_concept.gif) top left no-repeat; width:90px; height:27px} .chartesun #DHTMLSuite_menuItem001 { background: url(../imgs/bleue_menu_gamme.gif) top left no-repeat; width:75px; height:27px} .chartesun #DHTMLSuite_menuItem002 { background: url(../imgs/bleue_menu_actu.gif) top left no-repeat; width:80px; height:27px} .chartesun #DHTMLSuite_menuItem003 { background: url(../imgs/bleue_menu_secret.gif) top left no-repeat; width:109px; height:27px} .chartesun #DHTMLSuite_menuItem004 { background: url(../imgs/bleue_menu_newsletter.gif) top left no-repeat; width:91px; height:27px} .chartesun #DHTMLSuite_menuItem005 { background: url(../imgs/bleue_menu_trouver.gif) top left no-repeat; width:131px; height:27px} /** menu orange **/ .charterouange #DHTMLSuite_menuItem000 { background: url(../imgs/rouange_menu_concept.gif) top left no-repeat; width:90px; height:27px} .charterouange #DHTMLSuite_menuItem001 { background: url(../imgs/rouange_menu_gamme.gif) top left no-repeat; width:75px; height:27px} .charterouange #DHTMLSuite_menuItem002 { background: url(../imgs/rouange_menu_actu.gif) top left no-repeat; width:80px; height:27px} .charterouange #DHTMLSuite_menuItem003 { background: url(../imgs/rouange_menu_secret.gif) top left no-repeat; width:109px; height:27px} .charterouange #DHTMLSuite_menuItem004 { background: url(../imgs/rouange_menu_newsletter.gif) top left no-repeat; width:91px; height:27px} .charterouange #DHTMLSuite_menuItem005 { background: url(../imgs/rouange_menu_trouver.gif) top left no-repeat; width:131px; height:27px} /** menu rouge **/ .charterouge #DHTMLSuite_menuItem000 { background: url(../imgs/rouge_menu_concept.gif) top left no-repeat; width:90px; height:27px} .charterouge #DHTMLSuite_menuItem001 { background: url(../imgs/rouge_menu_gamme.gif) top left no-repeat; width:75px; height:27px} .charterouge #DHTMLSuite_menuItem002 { background: url(../imgs/rouge_menu_actu.gif) top left no-repeat; width:80px; height:27px} .charterouge #DHTMLSuite_menuItem003 { background: url(../imgs/rouge_menu_secret.gif) top left no-repeat; width:109px; height:27px} .charterouge #DHTMLSuite_menuItem004 { background: url(../imgs/rouge_menu_newsletter.gif) top left no-repeat; width:91px; height:27px} .charterouge #DHTMLSuite_menuItem005 { background: url(../imgs/rouge_menu_trouver.gif) top left no-repeat; width:131px; height:27px} /*----------- FIN MENU ------------*/ #header .banner { position:absolute; top:0; left:388px; width:383px; height:162px; z-index:2} #header .banner a { display:block; position:absolute; top:0; left:0; width:383px; height:162px; z-index:3; } /** contenu **/ #contenu { width:771px; height:393px} #contenu_abo { width:773px; height:513px } table.gab1 { width:100%; height:393px} /*gabari1*/ table.gab1 td { width:384px ; } /*gabari1*/ table.gab2 { width:100%; height:393px } /*gabari2*/ table.gab2_abo { width:100%; height:513px } /*gabari2*/ table.gab2 td.td1gab2 { width:578px; } /*gabari2*/ table.gab2 td.td2gab2 { width:190px; } /*gabari2*/ table.gab3 { width:100%; height:393px } /*gabari3*/ table.gab3 td.td1gab3 { width:192px} /*gabari3*/ table.gab3 td.td1gab3 a, table.gab3 td.td2gab3 a, table.gab3 td.td3gab3 a, table.gab3 td.td3gab3 a, table.gab3 td.td4gab3 a { display:block } /*gabari3*/ table.gab3 td.td2gab3 { width:190px } /*gabari3*/ table.gab3 td.td3gab3 { width:190px } /*gabari3*/ table.gab3 td.td4gab3 { width:190px; height:387px } /*gabari3*/ #contenu .titre1l { position:relative; height:80px; width:365px; } #contenu .titre2l { height:80px; width:365px; } #contenu .titre3l { } /** gabari 1 **/ #contenu .divgauche1 { height:357px; width:365px; } #contenu .divgauche1 .texte { height:277px; font-size:11px; } #contenu .divgauche1 .textegamme { height:277px; font-size:11px; } #contenu #menu_bas { height:27px; width:385px ; text-align:center; font:11px/27px Arial; font-weight:bold; color:#FFFFFF; text-transform:uppercase; position:relative; margin-top:3px; text-transform:uppercase; z-index:1000; } #contenu #menu_bas a { color:#FFFFFF; text-decoration:none; font-weight:bold; z-index:1000;} #contenu #menu_bas ul { position:absolute; left:388px; font:11px/17px Arial; color:#FFFFFF; bottom:0; display:none;z-index:1000;text-align:left; padding-left:10px; padding-bottom:9px; padding-top:9px; white-space:nowrap; padding-right:9px; } #contenu .divdroit1 { height:387px; width:383px; z-index:1000; } #contenu #menu_bas ul a {color:#FFFFFF; text-decoration:none; font-weight:normal; text-align:left; z-index:1000; } #contenu #menu_bas ul a:hover {color:#FFFFFF; text-decoration:underline; z-index:1000; } /** gabari 2 **/ #contenu .divgauche2 { height:357px; width:558px;} #contenu .divgauche_abo { height:467px; width:558px; } #contenu .menu_bas_gauche2 { height:27px; width:578px ;display:inline; font:11px/27px Arial; font-weight:bold; color:#FFFFFF; text-transform:uppercase} #contenu .menu_bas_gauche2 a { display:block; height:27px; width:190px; display:inline; float: left} #contenu .menu_bas_gauche2 a.rub15 { background:url(../imgs/sub_titre_contact_off.gif) bottom left no-repeat; margin-right:3px; width:192px} #contenu .menu_bas_gauche2 a.rub16 { background:url(../imgs/sub_titre_npvente_off.gif) bottom left no-repeat; } #contenu .menu_bas_gauche2 a.rub17 { background:url(../imgs/sub_titre_service_off.gif) bottom left no-repeat; margin:0 0px 0 3px; } #contenu .menu_bas_gauche2 a.rub15:hover, #contenu .menu_bas_gauche2 a.rub15_on { background:url(../imgs/sub_titre_contact_on.gif) bottom left no-repeat;margin-right:3px; width:192px} #contenu .menu_bas_gauche2 a.rub16:hover, #contenu .menu_bas_gauche2 a.rub16_on { background:url(../imgs/sub_titre_npvente_on.gif) bottom left no-repeat; } #contenu .menu_bas_gauche2 a.rub17:hover, #contenu .menu_bas_gauche2 a.rub17_on { background:url(../imgs/sub_titre_service_on.gif) bottom left no-repeat; margin:0 0px 0 3px;} /** version anglaise **/ #contenu .menu_bas_gauche2 a { display:block; height:27px; width:190px; display:inline; float: left} #contenu .menu_bas_gauche2 a.rub33 { background:url(../imgs/sub_titre_contact_off.en.gif) bottom left no-repeat; margin-right:3px; width:192px} #contenu .menu_bas_gauche2 a.rub35 { background:url(../imgs/sub_titre_npdvente_off.en.gif) bottom left no-repeat; } #contenu .menu_bas_gauche2 a.rub34 { background:url(../imgs/sub_titre_service_off.en.gif) bottom left no-repeat; margin:0 0px 0 3px; } #contenu .menu_bas_gauche2 a.rub33:hover, #contenu .menu_bas_gauche2 a.rub33_on { background:url(../imgs/sub_titre_contact_on.en.gif) bottom left no-repeat; margin-right:3px; width:192px} #contenu .menu_bas_gauche2 a.rub35:hover, #contenu .menu_bas_gauche2 a.rub35_on { background:url(../imgs/sub_titre_npdvente_on.en.gif) bottom left no-repeat; } #contenu .menu_bas_gauche2 a.rub34:hover, #contenu .menu_bas_gauche2 a.rub34_on { background:url(../imgs/sub_titre_service_on.en.gif) bottom left no-repeat; margin:0 0px 0 3px;} /**/ #contenu .divdroit2 { height:387px; width:190px; } #contenu .divdroit_abo { height:497px; width:190px; } /** gabari 3 **/ #contenu .divcol1 { height:318px;} #contenu .divcol2 { height:318px;} #contenu .divcol3 { height:318px;} #contenu .divcol4 { height:357px;} #contenu .texte_col { height:158px; width:190px; overflow:hidden; margin-top:10px;} /** top colonne **/ #contenu #roll_it_top_1 { width:192px; height:36px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; margin-top:3px; margin-bottom:3px;} #contenu #roll_it_top_2 { width:190px; height:36px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; margin-top:3px; margin-bottom:3px;} #contenu #roll_it_top_3 { width:190px; height:36px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; margin-top:3px; margin-bottom:3px;} /** bottom colonne **/ #contenu #roll_it_bot_1 { width:192px; height:27px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; } #contenu #roll_it_bot_2 { width:190px; height:27px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; } #contenu #roll_it_bot_3 { width:190px; height:27px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; } #contenu #roll_it_bot_4 { width:190px; height:27px; text-transform:uppercase; color:#FFFFFF; margin-right:3px; } /********** pour divcoltop1 et divcolbot1 etc les backgrounds sont générés dans le ****/ #contenu .imagecol2 { height:153px; width:190px;} #contenu .imagecol3 { height:153px; width:190px;} #contenu .imagecol1 { height:153px; width:192px;} /** FOOTER **/ #footer { width:771px; height:55px; margin:0 auto; text-align:center; text-decoration:none; color:#9b9b9b; font:9px/15px Verdana; } #footer a { text-decoration:none; color:#9b9b9b; font:9px/15px Verdana; margin:0 auto; text-align:center; } #footer a:hover { text-decoration:underline; text-align:center; } #footer ul { padding:0 0 0 175px; width:700px; height:30px; margin:0 auto; margin-top:5px; } #footer li {margin:0;float:left; list-style:none;height:30px; font:9px/15px Verdana;margin-right:40px;} #footer li.mentions { width:100px; margin:0px 10px} #footer span{text-align: center; /* text-transform:uppercase; */} span.pied { padding-bottom:10px } .icon_arrow { display:block; background:url(../imgs/dv_cursor_down_top.gif) no-repeat 170px 2px; } #roll_it_all_1, #roll_it_all_2, #roll_it_all_3, #roll_it_all_4 { cursor:pointer } /*----------------------------------------------*/ /** RECHERCHE **/ .hr { display:block; font-size:1px; height:1px; border-top:1px solid #9b9b9b; line-height:1px; white-space:nowrap; } .search input { width:80px ; border:1px solid #9b9b9b; color:#b4230b} .search input.boutton { background-color: #69c2c3; color: #FFFFFF } *+html input.boutton { height:20px} * html .search input { height:20px } * html .search input.boutton { height:24px } .search label { font-weight:bold } .recherche { margin-bottom:10px; margin-top:15px } .adresse { margin-top:10px; margin-bottom:10px; border:1px solid #9b9b9b; padding:5px } /*----------------------------------------------*/ .liens_fiches { margin:0; padding:0; }