/*===================================================== // Version : 2.0 // Projet : Rose des champs //=====================================================*/ /* ----- HTML TAG RESET & CLEARFIX ----- */ body,div,dl,dt,dd,ul,ol,li,h1, h2,h3,h4,h4,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; vertical-align: bottom; } a,h1 { overflow: hidden; } body,html { width: 100%; height: 100%; } caption,th { text-align: left; } h1,h2,h3,h4,h4,h6 { font-size: 100%; font-weight: normal; overflow: hidden; } q:before,q:after { content: ''; } abbr,acronym { border: 0;} .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } /* ---------- GENERAL */ body { font-family: arial,sans-serif; font-size: 12px; background: #a2d89b url(../images/bg.jpg) repeat-x top left; color: #4f4f4f; text-align: center; } #wrapper { width: 100%; background: transparent url(../images/roses-bg.png) no-repeat bottom left; } #container { width: 940px; margin: 0 auto; position: relative; text-align: left; } #langue-en { text-indent: -9999px; z-index: 2000; display: block; background: transparent url(../images/en.png) no-repeat; width: 46px; height: 19px; position: absolute; top: 585px; right: 20px; } #langue-fr { text-indent: -9999px; z-index: 2000; display: block; background: transparent url(../images/fr.png) no-repeat; width: 57px; height: 19px; position: absolute; top: 585px; right: 20px; } #langue-en:hover, #langue-fr:hover { background-position: bottom !important } /* ---------- HEADER */ #header { width: 940px; height: 570px } #adresse { display: none} #contact-link { position: absolute; top: 20px; right: 0; text-indent: -9999px; display: block; width: 260px; height: 90px } #header h1 { display: none; } #rose { background: transparent url(../images/rose.png) no-repeat; width: 1050px; height: 192px; position: absolute; top: 470px; right: 0; z-index: 200; } /* ---------- CONTENU */ #content { background: transparent url(../images/content-bg.png) repeat-y; width: 940px; min-height: 350px; padding: 40px 0 20px 0} #content a { color: #000; } /* ---------- MENU */ #menu { position: absolute; top: 620px; left: 50px; border-right: 1px solid #be4b52; width: 180px; height: 325px; z-index: 250; } #menu li { background: transparent url(../images/l-separator.png) no-repeat 40px 30px; width: 160px; height: 60px; list-style: none } #menu .last { background: none; } #l-accueil { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-accueil.png) no-repeat; width: 75px; height: 16px } #l-activites { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-activites.png) no-repeat; width: 80px; height: 16px } #l-boutique { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-boutique.png) no-repeat; width: 88px; height: 21px } #l-historique { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-historique.png) no-repeat; width: 96px; height: 21px } #l-liens { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-liens.png) no-repeat; width: 48px; height: 16px } #l-joindre { display: block; margin: 0 auto; text-indent: -9999px; background: transparent url(../images/l-joindre.png) no-repeat; width: 126px; height: 21px } #menu a:hover { background-position: bottom !important } /* ----- Accueil */ #accueil { margin: 0 0 0 290px } #accueil h2 { text-indent: -9999px; background: transparent url(../images/h-bienvenue.png) no-repeat; width: 347px; height: 22px } #admirer { width: 550px; text-align: justify; margin: 20px 0 0 0; line-height: 18px } #admirer img { float: right; width: 201px; height: 133px; margin: 0 0 0 20px; border: 1px solid #5e5e5e; padding: 1px; } #visiter { width: 550px; text-align: justify; margin: 50px 0 0 0; line-height: 18px } #visiter img { float: left; width: 201px; height: 133px; margin: 0 20px 0 0; border: 1px solid #5e5e5e; padding: 1px; } /* ----- Activites */ #activites { margin: 0 0 0 290px; width: 540px; position:relative } #activites h2 { text-indent: -9999px; background: transparent url(../images/h-activites.png) no-repeat; width: 83px; height: 19px; margin: 0 0 20px 0 } #activites p { margin: 5px 0 5px 0 ; } #activites ul { margin: 0 0 0 15px; } #activites-liens { position: absolute; top: 215px; right: 10px; list-style: none; } #activites-liens li { margin: 0 0 10px 0 } #activites-liens a { font-weight: bold; text-decoration: none; display: block; padding: 7px 15px 0 15px; height: 20px; text-align: center; background: #c04b53; color: #fff; border: 1px solid #ab464d } #activites-liens a:hover { text-decoration: underline; } /* ----- Forfaits */ #forfaits { margin: 0 0 0 290px; } #forfaits h2 { text-indent: -9999px; background: transparent url(../images/h-forfaits.png) no-repeat; width: 71px; height: 19px } /* ----- Boutique */ #boutique { margin: 0 0 0 290px; } #boutique h2 { text-indent: -9999px; background: transparent url(../images/h-boutique.png) no-repeat; width: 92px; height: 23px; margin: 0 0 15px 0 } #top-store { width: 550px } #top-store p { margin: 0 0 10px 0; } #boutique #categories { width: 550px; list-style: none; } #boutique #categories li { float: left; margin: 0 15px 20px 0 } #boutique #categories a { font-weight: bold; text-decoration: none; width: 150px; display: block; padding: 7px 0 0 0; height: 20px; text-align: center; background: #c04b53; color: #fff; border: 1px solid #ab464d } #boutique #categories a:hover { text-decoration: underline; } #boutique #products { clear:both; float: left; width: 160px; list-style: none } #boutique #products li { margin: 0 0 10px 0 } #boutique #products li span { padding: 0 5px 0 0 } #boutique #products a { font-weight: bold; text-decoration: none; } #boutique .active { text-decoration: underline !important } #boutique #products a:hover { text-decoration: underline; } #boutique #the-product { float: left; width: 480px } .img-product { float: left; border: 1px solid #5e5e5e; padding: 1px; margin: 0 18px 0 0; width: 150px; height: 150px } #boutique #the-product ul { float: left; list-style: none; width: 160px; } #boutique #the-product ul img { border: 0; margin: 0 4px 0 0 } #boutique #the-product ul li div { margin: 10px 0 0 0 } #boutique #the-product h3 { color: #a3384c; font-size: 14px; font-weight: bold; margin: 0 0 10px 0 } .buy-it { text-decoration: none; display: block; width: 60px; margin: 10px 0 0 110px; font-weight: bold } /* ----- Historique */ #historique { margin: 0 0 0 290px } #historique h2 { text-indent: -9999px; background: transparent url(../images/h-historique.png) no-repeat; width: 99px; height: 23px } #historique p { margin: 10px 0 10px 0; width: 600px; text-align: justify } /* ----- Liens */ #liens { margin: 0 0 0 290px } #liens h2 { text-indent: -9999px; background: transparent url(../images/h-liens.png) no-repeat; width: 50px; height: 18px } #liens-top { width: 550px; margin: 20px 0 30px 0; text-align: justify; line-height: 18px } #liens h3 { font-size: 16px; font-weight: bold; margin: 0 0 5px 0; color: #c04b53; } .entreprise { width: 550px; position: relative; margin: 0 0 20px 0; } .entreprise h4 { font-size: 14px; font-weight: bold; margin: 0 0 5px 0 } .entreprise h4 a { text-decoration: none } .entreprise h4 a:hover { text-decoration: underline } .entreprise div { width: 400px } .open-site { position: absolute; top: 15px; right: 0; font-weight: bold; text-decoration: none; display: block; padding: 7px 15px 0 15px; height: 20px; text-align: center; background: #c04b53; color: #fff !important; border: 1px solid #ab464d } .open-site:hover { text-decoration: underline; } /* ----- Dimanches */ #dimanche { margin: 0 0 0 290px } #dimanche h2 { text-indent: -9999px; background: transparent url(../images/h-dimanches.png) no-repeat; width: 203px; height: 24px; margin: 0 0 20px 0; } #dimanche p { margin: 10px 0 0 0; width: 600px; text-align: justify } /* ----- Contact */ #contact { margin: 0 0 0 290px } #contact h2 { text-indent: -9999px; background: transparent url(../images/h-nous-joindre.png) no-repeat; width: 129px; height: 23px } #left-contact { float: left; width: 300px } #contact #infos p { margin: 10px 0 10px 0; width: 280px; } #contact h3 { font-weight: bold; font-size: 14px; } #contact form { width: 300px; margin: 15px 0 0 0 } #contact form #success { margin: 0 0 10px 0; color: #85c17e; font-weight: bold } #contact form #error { margin: 0 0 10px 0; color: #c04b53; font-weight: bold } #contact form div { clear: both; margin: 0 0 10px 0 } #contact form label { display: block; margin: 0 0 5px 0; font-weight: bold } #contact-email { width: 230px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #contact-tel,#contact-nom { width: 110px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #nom-tel { height: 40px } #nom-tel p { float: left; padding: 0 4px 0 0; } #capt { height: 60px } #capt img { float: left; border: 1px solid #000; } #capt p { float: left; padding: 3px 0 0 10px; } #captcha_response { width: 110px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #contact-message { width: 230px; height: 120px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #contact-submit { clear: both } #right-contact { float: left; width: 305px; margin: 5px 0 0 10px } #map { margin: 10px 0 0 0; width: 300px } #map img { border: 1px solid #000; } #map p { margin: 5px 0 0 0 } /* ----- Forfaits */ #forfaits { width: 700px } #forfaits .small { font-size: 11px; width: 300px; text-align: justify } #forfaits h3 { margin: 0 0 10px 0; font-weight: bold; font-size: 14px } #tarifs { float: left; width: 340px; padding: 20px 0 0 0 } #formulaires { float: left; width: 350px; padding: 20px 0 0 0; } #formulaires-infos { width: 300px; } #formulaires form { width: 300px; margin: 15px 0 0 0 } #formulaires form #success { margin: 0 0 10px 0; color: #85c17e; font-weight: bold } #formulaires form #error { margin: 0 0 10px 0; color: #c04b53; font-weight: bold } #formulaires form div { clear: both; margin: 0 0 10px 0 } #formulaires form label { display: block; margin: 0 0 5px 0; font-weight: bold } #form_type { width: 230px; border: 1px solid #000 } #form_email,#form_tel,#form_nom, #form_ville,#form_postal,#form_adresse, #form_courriel,#form_compagnie, #form_text_25,#form_text_20 { width: 225px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #form_25,#form_20 { width: 60px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #capt { height: 60px } #capt img { float: left; border: 1px solid #000; } #capt p { float: left; padding: 3px 0 0 10px; } #captcha_response { width: 110px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #contact_message { width: 230px; height: 120px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #000 } #contact_submit { clear: both } #form-note { clear: both; font-size: 10px; width: 600px !important; padding: 20px 0 10px 0; } /* ---------- FOOTER */ #footer { clear: both; position: relative; background: transparent url(../images/footer.png) no-repeat top left; width: 940px; height: 130px; } #footer p { color: #000; width: 930px; text-align: right; padding: 25px 10px 0 0; } #footer p a { color: #000; text-decoration: none } #footer p a:hover { text-decoration: underline }