/************************************************************************* _____ _____ _ __ _ _____ _ __ _____ _____ | _ \ / _ \ | | | \ | | |_ _| | | / / | ____| | _ \ | |_| | | | | | | | | \| | | | | | __ / / | |__ | |_| | | ___/ | | | | | | | |\ | | | | | / | / / | __| | _ { | | | |_| | | | | | \ | | | | |/ |/ / | |___ | |_| | |_| \_____/ |_| |_| \_| |_| |___/|___/ |_____| |_____/ ************************************************************************** Copyright 2010 POINT WEB type : screen categorie : structure site Auteur : delphine site : **************************************************************************/ *{ margin:0; padding:0; outline:none} /*fix bug navigateur*/ .myhr{ clear:both; height:0; overflow:hidden; visibility:hidden; } a img{ border:none} .centre{ text-align:center} /************* DETECTION JS **************/ #jserror{ background:#FFFFCC; border:#FF0000 solid 1px; color:#FF0000; padding: 10px; margin: 0 0 10px 0; float:left; } #jserror dt{ font-weight:bold; } /************************** class ***************************/ .savoir{ padding:5px 0 0 82px} .image{ border:1px solid #d4b7a9; height:104px; width:155px; overflow:hidden} .photo{ border: 1px solid #d4b7a9; width:155px; height:104px; background:#FFF} .fleche{ background:url(../images/fleche.png) no-repeat left top; padding:0 0 0 15px} .vert{ color:#bdff1d} .beige{ color:#d4b7a9} .treize{ font-size:13px;} .img1{ float:right; margin-left:20px} .img2{ float:left; margin-right:20px} .marge_bas{ margin-bottom:8px} .dix{ font-size:10px} .large{ width:250px;} .centre{ text-align:center} .important_vert{ text-transform:uppercase; border-bottom:1px solid #70871b; border-top:1px solid #70871b; padding:8px 0 8px 0;} /*-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------< STRUCTURE >------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------*/ body{ background:url(../images/bg_body.jpg) repeat-x left top; font-family:Verdana, Geneva, sans-serif} hr{ border-bottom:none; border-right:none; border-left:none; color:#957666} #global{ margin:0 auto; width:955px} /*-------------------------------------------------< HEADER >------------------------------------------------*/ #header{ width:995px; height:198px;} /*----------< LOGO >----------*/ h1 a{ display: block; text-indent:-9999px; font-size:0px; background:url(../images/logo.jpg) no-repeat left top; width:295px; height:198px; float:left} /*----------< HEADER RIGHT >----------*/ #header_right{ float:left; width:660px; height:198px;} /*contact*/ #contact{ background: url(../images/bg_contact.jpg) no-repeat left top; width:212px; height:19px; padding:52px 0 0 448px} #contact a{ display:block; text-indent:-9999px; background:url(../images/btn_contact.jpg) no-repeat left top; width:113px; height:19px;} #contact a:hover{background:url(../images/btn_contact.jpg) no-repeat left bottom;} /*newsletter*/ #newsletter{ width:555px; height:54px; padding:20px 105px 0 0} #newsletter span{ font-size:12px; color:#F00 } #newsletter p{ color:#f3ebdc; font-size:12px; text-align:right; margin-bottom:5px} #newsletter p strong{ color:#8b6e5d; } #newsletter fieldset{ border:none; float:right} .moninput{ width:150px;color:#4a362b} .monsubmit{ width:28px; color:#4a362b; border:1px solid #cbf364; background:#c0ff20; font-size:12px; font-weight:bold; cursor:pointer } /*accroche*/ #accroche2{ background:url(../images/bg_accorche.jpg) no-repeat left top; width:660px; height:53px; text-indent:-9999px;} /*----------< MENU >----------*/ #menu{ background: url(../images/bg_menu.jpg) no-repeat left top; height:101px; width:825px; float:left; padding:0 0 0 130px} #menu li{ list-style-type:none; float:left} #menu a{ display: block; height:65px; text-indent:-9999px;} #btn_institut{ width:60px; background:url(../images/btn_institut.jpg) no-repeat left top;} #btn_institut:hover{ background:url(../images/btn_institut.jpg) no-repeat left bottom;} #btn_epilation{ width:77px; background:url(../images/btn_epilation.jpg) no-repeat left top;} #btn_epilation:hover{ background:url(../images/btn_epilation.jpg) no-repeat left bottom;} #btn_soins_visage{ width:124px; background:url(../images/btn_soin_visage.jpg) no-repeat left top;} #btn_soins_visage:hover{ background:url(../images/btn_soin_visage.jpg) no-repeat left bottom;} #btn_soins_beaute{ width:129px; background:url(../images/btn_beaute.jpg) no-repeat left top;} #btn_soins_beaute:hover{ background:url(../images/btn_beaute.jpg) no-repeat left bottom;} #btn_soins_corps{ width:117px; background:url(../images/btn_corps.jpg) no-repeat left top;} #btn_soins_corps:hover{ background:url(../images/btn_corps.jpg) no-repeat left bottom;} #btn_homme{ width:125px; background:url(../images/btn_homme.jpg) no-repeat left top;} #btn_homme:hover{ background:url(../images/btn_homme.jpg) no-repeat left bottom;} #btn_produits{ width:92px; background:url(../images/btn_produits.jpg) no-repeat left top;} #btn_produits:hover{ background:url(../images/btn_produits.jpg) no-repeat left bottom;} /*-------------------------------------------------< WRAPPER >------------------------------------------------*/ #wrapper{ background:url(../images/bg_wrapper.png) repeat-y left top; width:955px; float:left} #wrapper2{ background:url(../images/bg_wrapper2.jpg) no-repeat left top; min-height:654px; width:955px; float:left} /*----------< BLOCKLEFT >----------*/ #blockLeft{ float:left; width:350px; padding:0 0 0 0} /*btn_cadeaux*/ #btn_cadeaux{ background:url(../images/btn_offrir.png) no-repeat left top; width:196px; height:65px; display:block; margin-left:115px; margin-bottom:15px; text-indent:-9999px;} #btn_cadeaux:hover{ background:url(../images/btn_offrir.png) no-repeat left bottom; } /*nouveautés*/ #mdm{ background:url(../images/bg_nouveaute.jpg) no-repeat left top; width:155px; height:177px; padding:40px 60px 0 135px} #mdm dt{ font-size:12px; color:#FFF; font-weight:bold; margin-bottom:5px; height:12px; overflow:hidden} /*offres*/ #offres{ background:url(../images/bg_offre.jpg) no-repeat left top; width:155px; height:203px; padding: 55px 60px 0 135px} #offres dt{ font-size:12px; font-weight:bold; color:#fff; margin-bottom:5px; height:12px; overflow:hidden} /*----------< CONTENT >----------*/ #content{ float:left; width:455px; padding:0 150px 0 0} #content p{ font-size:12px; color:#FFF; text-align:justify; line-height:18px;} #content a{ color:#FFF; text-decoration:none} #content a:hover{ text-decoration:underline} #content ul { margin-top:8px} #content li{ font-size:12px; color:#FFF; list-style-type:none; margin-left:0px; line-height:18px } h2{ text-indent:-9999px; font-size:0px; margin-bottom:20px} #titre_institut{ background:url(../images/titre_institut.png) no-repeat left top; width:74px ; height:20px} #titre_mentions{ background:url(../images/titre_mentions.png) no-repeat left top; width:176px; height:23px} #titre_contact{ background:url(../images/titre_contact.png) no-repeat left top; width:86px; height:20px;} #titre_visage{ background:url(../images/titre_visage.png) no-repeat left top; width:175px; height:23px;} #titre_beaute{ background:url(../images/titre_beaute.png) no-repeat left top; width:173px; height:20px} #titre_corps{ background:url(../images/titre_corps.png) no-repeat left top; width:155px; height:24px;} #titre_homme{ background:url(../images/titre_homme.png) no-repeat left top; width:167px; height:20px} #titre_merci{ background:url(../images/titre_merci.png) no-repeat left top; width:301px; height:20px;} #titre_actualite{ background:url(../images/titer_actualites.png) no-repeat left top; width:123px; height:20px} #titre_epilation{ background:url(../images/titre_epilation.png) no-repeat left top; width:88px; height:24px;} #titre_offresspeciales{ background:url(../images/titre_offrespeciales.png) no-repeat left top; width:166px; height:24px} #titre_produits{ background:url(../images/titre_produits.png) no-repeat left top; width:124px; height:23px;} #titre_cadeaux{ background:url(../images/titre_offrir.png) no-repeat left top; width:251px; height:23px;} table td{ color:#FFF; font-size:12px;} table td.points{ border-bottom:#fff dotted 1px; padding:0 10px 0x 0} /*actu*/ #block_actu{ border-bottom:1px solid #ac836d; float:left; padding:15px 0 15px 0} #block_actu_gauche{ float:left; width:154px;} #block_actu_gauche img{ border:1px solid #ac836d; margin-bottom:5px} #block_actu_droit{ float:left; width:250px; padding:0 0 0 15px} .titre_actu{ float:left; margin-bottom:10px} .date_actu{ float:left} .description{ clear:both; } /*offre spéciales*/ #block_offrespeciales{ float:left; padding:10px 0 10px 0; border-bottom:1px solid #ac836d; } #block_offrespeciales_gauche{ float:left; width:154px;} #block_offrespeciales_gauche img{border:1px solid #ac836d; margin-bottom:5px} #block_offrespeciales_droit{ float:left;float:left; width:250px; padding:0 0 0 15px} /*tableau prix*/ .prix { text-align:center} .prix th{ background:#70871b; color:#2f211a; border:1px solid #a99185; font-size:12px; text-transform:uppercase; padding:10px} .prix td{padding:5px 10px 5px 10px; border:1px solid #a99185;} .prix .bg_clair{ background:#795f51;} .prix .bg_fonce{ background:#654c3f} .bg_tableau{ background:url(../images/bg_tableau.jpg) no-repeat left top; width:454px; padding:44px 0 0 0 } /*block_produit*/ .block_produit{ border-bottom:1px solid #574439; padding:10px 0 10px 0; clear:both} .block_produit dt{ text-transform:uppercase; color:#70871b; background:#2f211a; padding:5px; font-weight:bold; font-size:12px; margin-bottom:10px; border:1px solid #584033} .block_produit dt a{ color:#97c81b;} .block_produit .description{ font-size:12px; line-height:18px; color:#fff; min-height:120px} .block_produit .description img{ float:left; margin-right:20px; border:1px solid #2f211a} .block_produit .prix{background:#97c81b; width:140px; height:20px; border:1px solid #c0ff20; color:#4a362b; font-weight:bold; font-size:14px; padding:5px;} /*pagination*/ .pagination{ margin:10px 10px 10px 0; text-align:center} .pagination ul{ list-style-type:none} .pagination li{ display:inline; color:#ccc; font-size:11px} .pagination li a{ color:#ccc; font-size:11px} .pagination li a.activ{ font-weight:bold; color:#97c81b} /*-------------------------------------------------< FOOTER >------------------------------------------------*/ #footer{ clear:both; background:url(../images/bg_footer_06.png) no-repeat left top; width:955px; height:70px; padding:60px 0 0 0} #footer p { font-size:10px; color:#9e7f6f; text-align:center} #footer p a{ color:#9e7f6f; text-decoration:none} #footer p a:hover{ text-decoration:underline}