@font-face { font-family: 'QlassikMediumRegular'; font-weight: normal; font-style: normal; src: url('qlassik_tb-webfont.eot'); src: url('qlassik_tb-webfont.eot?#iefix') format('embedded-opentype'), url('qlassik_tb-webfont.woff') format('woff'), url('qlassik_tb-webfont.ttf') format('truetype'), url('qlassik_tb-webfont.svg#QlassikMediumRegular') format('svg'); } * { margin: 0; padding: 0; } html { margin:0; height: 100%; } body { margin: 0; height:100%; font-family: Arial, Helvetica, sans-serif; color: #666666; font-size:14px; } /* #669933 */ h1 { color: #ff6600; font-family: Calibri,sans-serif; font-size:20px; font-weight:normal; text-transform:uppercase; margin-bottom:20px; } h2 { color: #333333; font-family: Calibri,sans-serif; font-size:18px; font-weight:normal; margin-bottom:8px; word-spacing:3px; letter-spacing: 1px; } h3, h3 a { color: #ff6600; font-family: Calibri, sans-serif; font-size:19px; font-weight:normal; margin-bottom:5px; text-decoration:none; } p { color: #666666; font-size:14px; font-weight: normal; line-height:20px; margin-top:5px; } .info { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; line-height:20px; font-style:italic; margin-bottom:20px; } a { color: #669933; font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; line-height:20px; } .mise-en-avant { color:#669933; font-weight:bold; } #ribon { position:fixed; right:0; z-index:40; top:195px; } .centre { width:830px; display:block; margin:0 auto; } /************** HEADER **********************/ #header { background:#333333; height: 130px; } #header .logo { display:inline-block; height:130px; float:left; } #header img { border:0; } #header #img { float:left; } #header #infos { width:630px; text-align:right; position:relative; height:130px; display:inline-block; float:left; } #header #infos p { font-family: 'CenturyGothicBold', sans-serif; line-height:30px; } #header #infos img { vertical-align:middle; margin-right:4px; } /************** FOOTER **********************/ #footer { background:#333333; line-height: 25px; display:block; overflow:hidden; } #footer p { color:#cccccc; font-size:11px; } #footer img { border:0; margin-right: 9px; } #footer a { color: #cccccc; text-decoration: none; font-size:11px; font-weight:normal; } #footer a:hover { text-decoration: underline; } #footer .left { float:left; width:525px; border-right: 1px solid #fff; padding-right:20px; margin-right:20px; } #footer .right { float:right; width:214px; } #footer #icones ul { list-style: none; } #footer #icones ul li { float: left; width: 32px; height: 32px; position: relative; margin: 0 5px 0 0; } #footer #icones ul li a { position: absolute; } #footer #icones ul li img { position: absolute; height: 32px; top: 0; left: 0; padding: 0; margin: 0 8px 0 0; border: none; overflow: hidden; } /************** NAVIGATION *********************/ #menu { height:30px; float:right; bottom:0; right:0; position:absolute; } #menu li { float:left; height:25px; list-style:none; margin-left:2px; } #menu a { display:block; background:url('../img/navigation.png') no-repeat bottom right; } /* Sous-listes */ #menu li ul { background: #333333; position: absolute; list-style:none; padding: 0; margin:0; width: 145px; padding:10px; border-left: 1px solid #669933; border-right: 1px solid #669933; border-bottom:1px solid #669933; } #menu li ul li { float:none; height:auto; margin:0; } #menu li ul li a { background:none; text-align:left; display:block; color: #cccccc; text-decoration:none; line-height:normal; font-weight:normal; } #menu li ul li a:hover, #menu li ul li:hover { color: #ffffff; text-decoration: none; } #menu li ul ul { margin: -22px 0 0 144px; border-left: 1px solid #fff; } html>body #menu li ul ul { border-left: 1px solid transparent; } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { left: auto; min-height: 0; z-index:40; position:absolute; } /* Images en fond */ #menu .accueil a { height:30px; width:69px; background-position: 0 bottom; } #menu .accueil-on a, #menu .accueil a:hover { height:30px; width:69px; background-position: 0 top; } #menu .actualites a { height:30px; width:86px; background-position: -71px bottom; } #menu .actualites-on a, #menu .actualites a:hover { height:30px; width:86px; background-position: -71px top; } #menu .presentation a { height:30px; width:103px; background-position: -159px bottom; } #menu .presentation-on a, #menu .presentation a:hover { height:30px; width:103px; background-position: -159px top; } #menu .services a { height:30px; width:73px; background-position: -264px bottom; } #menu .services ul li a, #menu .services-on ul li a, #menu .services ul li a:hover, #menu .services-on ul li a:hover { width:150px; } #menu .services-on a, #menu .services a:hover { height:30px; width:73px; background-position: -264px top; } #menu .tarifs a { height:30px; width:50px; background-position: -339px bottom; } #menu .tarifs-on a, #menu .tarifs a:hover { height:30px; width:50px; background-position: -339px top; } #menu .contact a { height:30px; width:75px; background-position: -391px bottom; } #menu .contact-on a, #menu .contact a:hover { height:30px; width:75px; background-position: -391px top; } /************** SLIDESHOW **********************/ #bandeau_vert { height:274px; background:#669933; position: relative; z-index:30; } #diaporama { height:274px; display:block; overflow:hidden; position:relative; background:#669933; } #slide-nav { position:absolute; top:107px; width:830px; } #slide-nav #next { right:0; position:absolute; } #slideshow { width:710px !important; height:214px !important; margin:30px 60px 0 60px; } #slideshow div { width:690px; } #slideshow div img { float:left; width:375px; height:214px; border:none; } #slideshow div .text { float:left; width:285px !important; margin-left:30px; } #slideshow div .text p, #slideshow div .text ul { font-size:17px; color:#ffffff; } #slideshow div .text ul { margin-left:20px; line-height:30px; } #slideshow div .text h2 { font-family: 'QlassikMediumRegular', 'Calibri'; font-size:31px; color:#ffffff; text-shadow: 2px 0px 2px #242424; margin-bottom:16px; } #slideshow div .text #particuliers-h2 { letter-spacing:0; } #slideshow div .text h3 { font-family: 'Calibri', sans-serif; font-size:25px; color:#ffffff; line-height:35px; } #slideshow div .text .button { display:block; height:35px; line-height:35px; background:url('../img/slideshow/degrade.jpg') repeat-x; font-family:Calibri, sans-serif; color:#3D3D3D; font-size:20px; padding:0 10px; margin-top:10px; font-weight:normal; text-decoration:none; /* arrondis */ border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; } #slideshow #video .text .button { width:160px; } #slideshow .normal .text .button { width:206px; margin-top:20px !important; } #slideshow .securite .text .button { width:120px; margin-top:20px !important; } /****** CONTENU *****/ #contenu { background:#ffffff url('../img/contenu-ombres.png') repeat-y top center; display:block; overflow:hidden; padding:20px 0 70px 0; } #contenu_centre { width: 790px; margin: 0 auto; padding:0 20px; display:block; overflow:hidden; background:#f6f6f6 url('../img/contenu-bg.png') repeat-y top center; min-height:300px; } #contenu_centre .left { float: left; width:525px; padding-right:20px; margin-right:20px; } /********** FIL ARIANE ***************/ #contenu .ligne { display:block; overflow:hidden; margin-bottom:15px; padding-bottom:5px; border-bottom: 1px dashed #CCCCCC; } #contenu .ligne p, #contenu .ligne a { font-size:14px !important; } #contenu .ligne .fil-ariane { float:left; width:365px; color:#999999; } #contenu .ligne .fil-ariane a { color:#999999; font-weight:normal; margin:0; } #contenu .ligne .taille-texte { float:left; } #contenu .ligne .taille-texte a { color:#999999; font-weight:normal; margin:0; cursor: pointer; } /* Accueil */ #accueil { display:block; overflow:hidden; } #accueil a { text-decoration:none; color:#666666; } #accueil ul { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight: normal; line-height:20px; margin-left:20px; } #signature { background: url('../img/signature.jpg') no-repeat; width:90px; height:65px; float:right; } #siren { clear:both; display:block; overflow:hidden; float:right; } /* Actualités */ #actualites h2 { letter-spacing:0; margin:30px 0 10px 0; } #actualites .article { clear:both; overflow:hidden; padding-bottom:30px; } #actualites .article h2 { margin-top:0; } #actualites .article img { float:left; margin-right:10px; } #actualites .travaux img { border:5px solid #ffffff; } #actualites .temoignage .travaux { color:#669933; font-family:Calibri; font-size:17px; margin:10px 0; } #securite-personnes-agees h2 { margin-top:30px; } #securite-personnes-agees h3 { margin:0 0 15px 30px; font-size:17px; } #securite-personnes-agees ul { margin:0 0 30px 15px; line-height:20px; } #securite-personnes-agees img { margin:20px auto; display:block; } /* Présentation */ #presentation_entreprise { display:block; overflow:hidden; margin-top:10px; } #presentation_entreprise #texte { width:328px; float:left; } #presentation_entreprise #image { padding:5px; background:#ffffff; border:1px solid #CCCCCC; float:right; height:206px; /* arrondis */ border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; } /* Services */ #domaines ul { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal; line-height:15px; list-style:none; } #domaines ul li { float:left; border:1px solid #CCCCCC; padding:5px; width:150px; margin:5px; height:150px; background:#FFFFFF; /* arrondis */ border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:0 2px 2px #BCBCBC; } #domaines ul li:hover { color:#666666; text-decoration:none; } #domaines ul .normal p { overflow:hidden; height:20px; margin:0; width:150px; text-align:center; } #domaines ul .normal a { text-decoration:none; font-weight:normal; } #domaines ul .normal a span { width:100%; height:100%; display:block; background: url('../img/services/png24.png') no-repeat; } #domaines ul .normal #services_1 { background: url('../img/services/cuisine.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_2 { background: url('../img/services/entree.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_3 { background: url('../img/services/salon.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_4 { background: url('../img/services/chambre.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_5 { background: url('../img/services/salle-de-bain.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_6 { background: url('../img/services/voiture.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_7 { background: url('../img/services/jardin.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul .normal #services_8 { background: url('../img/services/aide.jpg') no-repeat; width:150px; height:130px; display:block; } #domaines ul #bloc_central { background-color:#669933; } #domaines ul #bloc_central p { color:#FFFFFF; font-weight:bold; height:150px; line-height:150px; width:150px; text-align:center; } #domaines ul #bloc_central span { display:inline-block; vertical-align:middle; line-height:2.5; } #services ul { font-weight: normal; line-height:20px; margin-left:30px; } #services ul li:hover { color:#666666; text-decoration:none; } #services #intro { margin-bottom:10px; line-height:20px; } .services-choix ul { margin:60px auto; list-style:none; display:block; overflow:hidden; } .services-choix li { float:left; margin:0 45px; text-align:center; } /* Tarifs */ #tbl-tarifs { margin:0 auto; } #tbl-tarifs thead { height:40px; font-weight:bold; } #tbl-tarifs thead span { margin-left:10px; } #tbl-tarifs tr { height:20px; } #tbl-tarifs td { width: 100px; } #tbl-tarifs tr td span { display:block;text-align:right; margin-right:30px; } /* Témoignages */ #temoignages #note_moyenne { font-weight:bold; color:#FF6600; } #temoignages .titre, #actualites .temoignage .titre { display:block; width:505px; overflow:hidden; background:#666666; padding:0 10px; -moz-border-radius:3px; } #temoignages .titre .left, #temoignages .titre .right { height:30px; } #temoignages .titre .left { float:left; width:360px; } #temoignages .titre .left h2 { margin-bottom:0 !important; letter-spacing:0 !important; word-spacing:2px !important; line-height:30px; color:#ffffff; } #temoignages .titre .right { float:right; width:90px; } #temoignages .titre .right .notation { float:right; line-height:33px; } #temoignages .travaux { font-size:17px; color:#669933; margin:10px 0; font-family:Calibri; } #temoignages .texte { text-align:justify; margin-bottom:34px; } #tem-lien { margin-bottom:20px; display:block; } /* Formulaires (commun) */ form label { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight: normal; } form .valid { border: 1px solid #cac9b9; } form .error { border: 1px solid #d44e4e; } form .error_label { color:#d44e4e !important; } form input[type=text], form select, form textarea { margin-bottom: 8px; padding:3px; border-radius: 4px; -moz-border-radius: 4px; color: #666666; font-size: 14px; font-family:Arial, sans-serif; } #form-coordonnees input[type=text] { width:355px; } #statut { display:block; overflow:hidden; } #statut span, #statut input { float:left; } #statut #entreprise { margin: 0 5px 0 30px; } #statut #particulier { margin-right: 5px; } #validationMessage { border: 1px solid red; margin-bottom: 10px; display: none; } .message { height:30px; margin: 25px 0 15px 0; padding:12px 0 0 40px; } .msg_error { background: url('../img/fond-msg-erreur.png') no-repeat; color: #994545; text-shadow:1px 1px 0 #ee8e8e; } .msg_valid { background: url('../img/fond-msg-valid.png') no-repeat; color: #759945; text-shadow:1px 1px 0 #d1f0a9; } #form-last { border:0; } #form-last #code-confirmation { margin: 20px 0 8px 0; } #form-last #div-radios { display:block; overflow:hidden; } #form-last #div-radios #gauche { float:left; width:170px; } #form-last #div-radios #droite { float:left; } #form-last #div-radios #droite #desc_autre { width:210px; } #form-last #img-code-confirmation { float:left; margin: 4px 15px 0 0; } #form-last #label-code-confirmation { float:left; margin-bottom:5px; } #form-last input[type=submit] { margin:25px 0 20px 153px; display:block; text-indent:-9999px; height:64px; width:221px; background: url('../img/btn-envoyer.png') no-repeat top; cursor:pointer; border:none; } #form-last input[type=submit]:hover { background: url('../img/btn-envoyer.png') no-repeat bottom; cursor:pointer; border:none; } #form-last input[type=radio], #form-last input[type=checkbox] { margin:0 5px 8px 0; } .titre { color:#669933; font-family: Calibri, sans-serif; font-size:16px; } .titre_error { color:#ff0000; } .moyen { margin: 10px 0 8px 0; } /* Formulaire Contact */ #form-contact { margin-top:25px; } #form-contact #form-coordonnees { border:0; } #form-contact #form-coordonnees label { width: 130px; float: left; } #form-contact textarea { width:355px; height:70px; } /* Formulaire Devis */ #form-devis #form-coordonnees, #form-devis #form-infos { border:1px grey dashed; padding:15px; margin-bottom:20px; } #form-devis fieldset legend { color: #333333; font-family: Calibri,sans-serif; font-size:18px; font-weight:normal; padding:0 6px; word-spacing:3px; letter-spacing: 1px; } #form-devis #form-infos input[type=radio] { margin:0 5px 8px 0; } #form-devis #form-coordonnees label { width: 130px; float: left; } #form-devis #form-infos #type-travaux { margin: 0 0 8px 0; } #form-devis #form-infos #frequence { margin: 10px 0 8px 0; } #form-devis #form-infos #debut_prestation { width:100px; margin-top:10px; } #form-devis #form-infos span { font-style:italic; font-size:12px; margin-left:20px; } #form-devis #form-infos #message { margin-top:4px; } #form-devis #form-infos textarea { width:483px; height:70px; } /* Faq */ .domaine { font-size: 15px; color: #669933; } .question { font-weight:bold; color: #3A3A3A; } .reponse { margin-left: 20px; margin-bottom:20px; text-align:justify; } /* Offres spéciales */ .intitule { font-weight:bold; color:#FF6600; font-size:14px; } .date { font-style:italic; font-size:14px; } .description { text-align:justify; font-size:14px; margin-bottom: 30px; } /* Plan du site */ #plan-du-site { list-style:circle; margin-left:25px; } /* BLOC-R */ #contenu_centre .right { float: right; width: 225px; } #contenu_centre .right .bloc { border-bottom: 1px solid #cccccc; padding-bottom:20px; margin-bottom:20px; display:block; } #contenu_centre .right .bloc p { margin:0; } #contenu_centre .right .bloc:last-child { border:none; } #contenu_centre .right .bloc .visuel { border:none; float:left; width:85px; height:85px; margin:0 10px 10px 0; } #contenu_centre .right .bloc .bouton { border:none; margin:10px auto; display:block; } #contenu_centre .right .bloc #temoignages { display:block; overflow:hidden; } #contenu_centre .right .bloc #temoignages img { float:left; margin-right:6px; } #contenu_centre .right .bloc #temoignages p { float:left; width:178px; } #contenu_centre .right .bloc .temoignage_nom { text-align:right; } /**** SLIDESHOW ****/ /* slide-holder */ #slide-holder { z-index : 40; width: 830px; height: 270px; display:block; overflow:hidden; position: absolute; } #slide-holder img { margin: 0; display: none; position: absolute; } #slide-runner { width:830px; height:270px; overflow:hidden; position:absolute; } /* slide-controls */ #slide-controls { width:180px; height:250px; padding:10px; position:absolute; background:url('../img/slideshow/noir.png') 0 0; font-family:Arial, sans-serif; display:none; } #slide-controls p.text { margin:0; padding:0; color:#FFFFFF; font-size:15px; } #slide-controls #slide-client p span { font-family:Arial, Helvetica,sans-serif; } #slide-controls #slide-desc { margin:15px 0; font-family:Arial, Helvetica,sans-serif; } #slide-controls p#slide-nav { margin: 10px auto; bottom:0; position:absolute; } #slide-controls p#slide-nav a { width : 20px; height : 21px; color:#FFFFFF; font-weight:normal; text-decoration:none; font-family:Arial, Helvetica,sans-serif; background:url('../img/slideshow/bulles.png') no-repeat 0 0; float: left; margin: 0 2px 0 0; line-height: 20px; text-align: center; font-size: 14px; } #slide-controls p#slide-nav a.on { background-position : 0 -21px; } #slide-controls p#slide-nav a:hover { background-position : 0 -21px; } /* COLOR BOX POPUP HONE */ /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#fff;} #colorbox{} #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;} #cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;} #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;} #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;} #cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;} #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;} #cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;} #cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;} #cboxContent{background:#fff; overflow:hidden;} .cboxIframe{background:#f6f6f6;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:20px;} #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;} #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;} #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* POPUP */ #popup { margin:30px auto 0 auto; width:90%; display:block; overflow:hidden; } #popup h1 { color:#ff6600; text-align:center; font-size:30px; } #popup h2 { color:#ff6600; text-align:right; letter-spacing:0; word-spacing:0; } #popup h3 { color:#ff6600; text-align:center; font-family: Calibri,sans-serif; font-size:18px; font-weight:normal; letter-spacing:0; word-spacing:0; } #popup p { line-height:25px; } #popup ul { margin-top:40px; margin-bottom:0; } #popup ul li { margin:0 55px; }