/* CSS Document */ * { padding:0; margin:0; } html { background:#4D6AA2 url('../images/bg.jpg') repeat-x;} body { background:transparent url('../images/fond.jpg') no-repeat center 0; font:normal 12px Verdana, Arial, Helvetica, sans-serif; color: #fff; text-align:justify } #page { width:1150px; height:857px; margin:0 auto;} a { color:#fff;} h1 { font:bold 12px Verdana, Arial, Helvetica, sans-serif;} h2 { font:bold 12px Verdana, Arial, Helvetica, sans-serif; display:none;} h3 { font:bold 12px Verdana, Arial, Helvetica, sans-serif;} #contenu {float:left; background:transparent url('') no-repeat; padding:0 0 0 0; text-align:justify; width:909px; height:799px; font-size:11px;} #left {float:left; padding:0 0 0 0; margin:5px; text-align:justify; width:283px;} #left-head {float:left; background:transparent url('../images/head-contenu.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:105px;} #left-bg {float:left; background:transparent url('../images/bg-contenu.png'); padding:0 0 0 0; width:283px;} #left-contenu {float:left; background:transparent url('../images/fd-contenu.png') no-repeat; padding:0 7px; text-align:justify; width:267px; min-height:382px;} #left-pied {float:left; background:transparent url('../images/pd-contenu.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:61px;} #center {float:left; padding:0 0 0 0; margin:5px; text-align:justify; width:283px;} #center-head {float:left; background:transparent url('../images/head-contenu2.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:105px;} #center-bg {float:left; background:transparent url('../images/bg-contenu.png'); padding:0 0 0 0; width:283px;} #center-contenu {float:left; background:transparent url('../images/fd-contenu2.png') no-repeat; padding:0 7px; text-align:justify; width:267px; min-height:382px;} #center-pied {float:left; background:transparent url('../images/pd-contenu2.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:61px;} #right {float:left; padding:0 0 0 0; margin:5px; text-align:justify; width:283px;} #right-head {float:left; background:transparent url('../images/head-contenu3.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:105px;} #right-bg {float:left; background:transparent url('../images/bg-contenu.png'); padding:0 0 0 0; width:283px;} #right-contenu {float:left; background:transparent url('../images/fd-contenu3.png') no-repeat; padding:0 7px; text-align:justify; width:267px; min-height:382px;} #right-pied {float:left; background:transparent url('../images/pd-contenu3.png') no-repeat; padding:0 0 0 0; text-align:justify; width:283px; height:61px;} .head-rubrique {float:left; background:transparent url('../images/head-rubrique.png') no-repeat; padding:0 0 0 0; text-align:justify; width:269px; height:21px;} .contenu-rubrique {float:left; background:transparent url('../images/contenu-rubrique.png'); padding:0 7px 0 7px; width:255px; text-align:justify;} .pied-rubrique {float:left; background:transparent url('../images/pied-rubrique.png') no-repeat; padding:0 0 0 0; text-align:justify; width:269px; height:5px;} #titre {background:transparent url('../images/titre-ocre.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre2 {background:transparent url('../images/titre-bleu.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre3 {background:transparent url('../images/titre-violet.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre4 {background:transparent url('../images/titre-rose.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre5 {background:transparent url('../images/titre-vert.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre6 {background:transparent url('../images/titre-orange.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre7 {background:transparent url('../images/titre-orangade.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre8 {background:transparent url('../images/titre-rouge.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #titre9 {background:transparent url('../images/titre-marron.png') no-repeat; width:265px; height:36px; margin:2px; padding-left:4px;} #block-menu { width:222px; height:799px; float:left; padding: 0 0 0 19px; } #pied{clear:both; padding:0 0 0 0; text-align:justify; width:1150px; height:58px;} #menubas { text-align:center; font: normal 10px Verdana, Arial, Helvetica, sans-serif; padding:0 0 10px 0; clear:both; width:100%;} .separation {width:100%; height:3px; clear:both} .clearb { clear:both; } .center { text-align:center; } /*/////////////////////////////////////////////// menu //////////////////////////////////////////////////////////////////*/ #menu { clear:both; width:202px;} #menu li { clear:both; list-style: none outside; padding:0; margin:0} #menu li, #menu a { display:block; height:30px; width:202px} #menu li, #menu a:hover, #menu a.hover { background-color: transparent; background-image: url('../images/menu.png'); background-repeat: no-repeat; background-position: 0 0;} #menu a span { display:none;} #menu #menu_li_1, #menu #menu_a_1 { background-position: 0 0;} #menu #menu_a_1:hover, #menu #menu_a_1.hover { background-position: -202px 0;} #menu #menu_li_1.current { background-position: -404px 0;} #menu #menu_li_2, #menu #menu_a_2 { background-position: 0 -30px;} #menu #menu_a_2:hover, #menu #menu_a_2.hover { background-position: -202px -30px;} #menu #menu_li_2.current { background-position: -404px -30px;} #menu #menu_li_3, #menu #menu_a_3 { background-position: 0 -60px;} #menu #menu_a_3:hover, #menu #menu_a_3.hover { background-position: -202px -60px;} #menu #menu_li_3.current { background-position: -404px -60px;} #menu #menu_li_4, #menu #menu_a_4 { background-position: 0 -90px;} #menu #menu_a_4:hover, #menu #menu_a_4.hover { background-position: -202px -90px;} #menu #menu_li_4.current { background-position: -404px -90px;} #menu #menu_li_5, #menu #menu_a_5 { background-position: 0 -120px;} #menu #menu_a_5:hover, #menu #menu_a_5.hover { background-position: -202px -120px;} #menu #menu_li_5.current { background-position: -404px -120px;} #menu #menu_li_6, #menu #menu_a_6 { background-position: 0 -150px;} #menu #menu_a_6:hover, #menu #menu_a_6.hover { background-position: -202px -150px;} #menu #menu_li_6.current { background-position: -404px -150px;} #menu #menu_li_7, #menu #menu_a_7 { background-position: 0 -180px;} #menu #menu_a_7:hover, #menu #menu_a_7.hover { background-position: -202px -180px;} #menu #menu_li_7.current { background-position: -404px -180px;} /*/////////////////////////////////////////////// fin du menu //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////// bouton details /////////////////////////////////////////////////////////////////*/ #bouton { clear:both; width:272px;} #bouton li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton li, #bouton a { display:block; height:36px; width:272px} #bouton li, #bouton a:hover, #bouton a.hover { background-color: transparent; background-image: url('../images/site-vitrine.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton a span { display:none;} #bouton #bouton_li_1, #bouton #bouton_a_1 { background-position: 0 0;} #bouton #bouton_a_1:hover, #bouton #bouton_a_1.hover { background-position: -272px 0;} #bouton #bouton_li_1.current { background-position: -544px 0;} #bouton2 { clear:both; width:272px;} #bouton2 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton2 li, #bouton2 a { display:block; height:36px; width:272px} #bouton2 li, #bouton2 a:hover, #bouton2 a.hover { background-color: transparent; background-image: url('../images/site-catalogue.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton2 a span { display:none;} #bouton2 #bouton2_li_1, #bouton2 #bouton2_a_1 { background-position: 0 0;} #bouton2 #bouton2_a_1:hover, #bouton2 #bouton2_a_1.hover { background-position: -272px 0;} #bouton2 #bouton2_li_1.current { background-position: -544px 0;} #bouton3 { clear:both; width:272px;} #bouton3 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton3 li, #bouton3 a { display:block; height:36px; width:272px} #bouton3 li, #bouton3 a:hover, #bouton3 a.hover { background-color: transparent; background-image: url('../images/site-e-commerce.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton3 a span { display:none;} #bouton3 #bouton3_li_1, #bouton3 #bouton3_a_1 { background-position: 0 0;} #bouton3 #bouton3_a_1:hover, #bouton3 #bouton3_a_1.hover { background-position: -272px 0;} #bouton3 #bouton3_li_1.current { background-position: -544px 0;} #bouton4 { clear:both; width:272px;} #bouton4 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton4 li, #bouton4 a { display:block; height:36px; width:272px} #bouton4 li, #bouton4 a:hover, #bouton4 a.hover { background-color: transparent; background-image: url('../images/referencement-naturel.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton4 a span { display:none;} #bouton4 #bouton4_li_1, #bouton4 #bouton4_a_1 { background-position: 0 0;} #bouton4 #bouton4_a_1:hover, #bouton4 #bouton4_a_1.hover { background-position: -272px 0;} #bouton4 #bouton4_li_1.current { background-position: -544px 0;} #bouton5 { clear:both; width:272px;} #bouton5 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton5 li, #bouton5 a { display:block; height:36px; width:272px} #bouton5 li, #bouton5 a:hover, #bouton5 a.hover { background-color: transparent; background-image: url('../images/referencement-google-adwords.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton5 a span { display:none;} #bouton5 #bouton5_li_1, #bouton5 #bouton5_a_1 { background-position: 0 0;} #bouton5 #bouton5_a_1:hover, #bouton5 #bouton5_a_1.hover { background-position: -272px 0;} #bouton5 #bouton5_li_1.current { background-position: -544px 0;} #bouton6 { clear:both; width:272px;} #bouton6 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton6 li, #bouton6 a { display:block; height:36px; width:272px} #bouton6 li, #bouton6 a:hover, #bouton6 a.hover { background-color: transparent; background-image: url('../images/inscriptions-annuaires.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton6 a span { display:none;} #bouton6 #bouton6_li_1, #bouton6 #bouton6_a_1 { background-position: 0 0;} #bouton6 #bouton6_a_1:hover, #bouton6 #bouton6_a_1.hover { background-position: -272px 0;} #bouton6 #bouton6_li_1.current { background-position: -544px 0;} #bouton7 { clear:both; width:272px;} #bouton7 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton7 li, #bouton7 a { display:block; height:36px; width:272px} #bouton7 li, #bouton7 a:hover, #bouton7 a.hover { background-color: transparent; background-image: url('../images/graphisme-myspace.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton7 a span { display:none;} #bouton7 #bouton7_li_1, #bouton7 #bouton7_a_1 { background-position: 0 0;} #bouton7 #bouton7_a_1:hover, #bouton7 #bouton7_a_1.hover { background-position: -272px 0;} #bouton7 #bouton7_li_1.current { background-position: -544px 0;} #bouton8 { clear:both; width:272px;} #bouton8 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton8 li, #bouton8 a { display:block; height:36px; width:272px} #bouton8 li, #bouton8 a:hover, #bouton8 a.hover { background-color: transparent; background-image: url('../images/graphisme-print.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton8 a span { display:none;} #bouton8 #bouton8_li_1, #bouton8 #bouton8_a_1 { background-position: 0 0;} #bouton8 #bouton8_a_1:hover, #bouton8 #bouton8_a_1.hover { background-position: -272px 0;} #bouton8 #bouton8_li_1.current { background-position: -544px 0;} #bouton9 { clear:both; width:272px;} #bouton9 li { clear:both; list-style: none outside; padding:0; margin:0 0 0 -9px} #bouton9 li, #bouton9 a { display:block; height:36px; width:272px} #bouton9 li, #bouton9 a:hover, #bouton9 a.hover { background-color: transparent; background-image: url('../images/logo-2d-3d.png'); background-repeat: no-repeat; background-position: 0 0;} #bouton9 a span { display:none;} #bouton9 #bouton9_li_1, #bouton9 #bouton9_a_1 { background-position: 0 0;} #bouton9 #bouton9_a_1:hover, #bouton9 #bouton9_a_1.hover { background-position: -272px 0;} #bouton9 #bouton9_li_1.current { background-position: -544px 0;} /*/////////////////////////////////////////////// fin des boutons //////////////////////////////////////////////////////////////////*/ /*/////////////////////////////////////////////// slide //////////////////////////////////////////////////////////////////*/ .taille-carousel {background:transparent url(../images/fond-slide.png) no-repeat; width:802px;height:205px; clear:both; padding:0 27px 0 28px} .carousel { width:100%; height:205px; margin:2px; clear:both; padding-top:5px; text-align:center; } .slide-vignette { margin:5px 0 7px 0; border-right:1px solid #fff;} .titre-slide{ font:bold 16px Arial;} .contenu-slide{} .lien-slide{} /*/////////////////////////////////////////////// fin des boutons //////////////////////////////////////////////////////////////////*/ /*/////////////////////////////////////////////// contenu pages //////////////////////////////////////////////////////////////////*/ #contenant-contenu{margin:20px 15px 0 15px; width:860px; } #contenant-contenu2{margin:20px 15px 0 15px; width:860px;} #titre-contenu{background:transparent url(../images/titre-formulaire.png) no-repeat; width:860px; height:43px;} #bg-contenu{background:transparent url(../images/bg-contenu-site.png) repeat-y; width:860px;} #contenu-contenu{background:transparent url(../images/texte-contenu.png) no-repeat; width:860px; height:540px; font-size:11px;} #contenu-contenu2{background:transparent url(../images/texte-contenu.png) no-repeat; width:840px; padding:10px;} #pied-contenu{background:transparent url(../images/fin-contenu.png) no-repeat; width:860px; height:12px;} #titre-contenu-site{background:transparent url(../images/titre-contenu-site.png) no-repeat; width:860px; height:43px;} #titre-contenu-site2{background:transparent url(../images/titre-contenu-site2.png) no-repeat; width:860px; height:43px;} #titre-contenu-site3{background:transparent url(../images/titre-contenu-site3.png) no-repeat; width:860px; height:43px;} #titre-contenu-paiement{background:transparent url(../images/paiements.png) no-repeat; width:860px; height:43px;} /*/////////////////////////////////////////////// fin contenu pages //////////////////////////////////////////////////////////////////*/ /*/////////////////////////////////////////////// formulaire de contact //////////////////////////////////////////////////////////////////*/ #formulaire{ text-align:center; width:840px; padding: 0 5px 0 10px; float:left; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color:#fff;} /* carateristique du formulaire */ #formulaire * { margin:0 0 2px 0; padding:0; } /* caracteristique de toutes les balises qui se trouvent dans le formulaire */ .labelform { width: 203px; float: left; text-align: right; margin: 2px 5px; -moz-border-radius: 3px;} /* carateristique des label, width minimum 203px; */ .pform {padding:0; text-align:left; clear:both; -moz-border-radius: 3px;} /* carateristique des p */ .inputform {width:340px; height:13px; float:left; margin: 2px 5px; -moz-border-radius: 2px;} /* carateristique des input */ .labelform2 { width: 337px; float: left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des label, width minimum 203px; */ .labelform3 { width: 337px; float: left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des label, width minimum 203px; */ .labelform4 { width: 834px; float: left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des label, width minimum 203px; */ .labelform5 { width: 477px; float: left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des label, width minimum 203px; */ .pform2 {padding:0; text-align:left; float:left; width:197px; -moz-border-radius: 3px;} /* carateristique des p */ .inputform2 {width:340px; height:13px; float:left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des input */ .inputform3 {width:480px; height:13px; float:left; background-color:#131926; margin: 2px 5px; clear:both; -moz-border-radius: 3px;} /* carateristique des input */ .textareaform { width:480px; height:150px; overflow: auto; -moz-border-radius: 3px;} /* carateristique du textarea */ .selectform { height:18px; float:left; margin: 0 5px 0 2px; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color:#131926; width:840px; padding:0; -moz-border-radius: 3px;} /* carateristique des select */ .labelmessage { width:95px;} /* carateristique du label contenant "Votre message" */ #labelenvoyer { width:125px;} /* carateristique du label avant l'input envoyer, sert a centrer le bouton envoyer */ .inputenvoyer { width:150px; font: normal 10px Verdana, Arial, Helvetica, sans-serif;} /* carateristique de l'input "envoyer mon message" */ .divtexte { margin: 5px 0 0 0; } /* carateristique de la div contenant le texte du captchat*/ #formulaire div { margin: 5px auto; } /* centrer dans le formulaire des div */ .divimagecaptchat { border:1px solid black; padding: 0 0 0 100px; } /* carateristique de la div entourant l'image captchat */ .transp, .inputtexte { background: #c4cad7; border: 1px solid #fff; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color:#131926; } /* pour rendre les input et textarea transparent avec une bordure */ #coordonnees { display:block; width:250px; background: #0895C2 ; color:#8E056D; height:14px; font: bold 12px Verdana, Arial, Helvetica, sans-serif;padding:2px 15px; margin:0 0 5px 0 } #informations { width:350px; float:left; border-right:1px solid #fff;} #message { width:443px; float:left; padding-left:7px;} #background-spam { background: #131926; padding:10px 5px; width:472px; -moz-border-radius: 3px;} /*/////////////////////////////////////////////// fin du formulaire //////////////////////////////////////////////////////////////////*/ #wrapper { width: 800px; margin-left: auto; margin-right: auto; } .accordionButton { width: 800px; float: left; background: #003366; border-bottom: 1px solid #FFFFFF; cursor: pointer; } .accordionContent { width: 800px; float: left; background: #95B1CE; display: none; } .right { text-align:right} .left { text-align:left} .center { text-align:center} #rappel-auto { width:190px; height:45px; background:transparent url(../images/rappelle-auto.png) no-repeat; float:left; padding:120px 0 0 80px; margin-left:13px;} #demande-devis { width:270px; height:165px; background:transparent url(../images/demande-devis.png) no-repeat; float:left; margin-left:25px;} #voir-references { width:270px; height:165px; background:transparent url(../images/demande-devis.png) no-repeat; float:left; margin-left:25px;} /*---------------------------------------------------- Plan de site -----------------------------------------*/ #menubas { padding: 10px 15px 10px 0; text-align:center; color:#fff; font-size:10px; } #menubas a { color:#fff; } #menubas p { color:#FFC74F; } #plandusite { color: #fff; clear:both; margin:0 auto; width:1200px; text-align:left } #plandusite p { line-height:8px; } #plan1 { width:218px; min-height:215px; _height:215px; float:left; border-right:1px solid #fff; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; border-right: 1px dashed #fff; padding-bottom:10px; padding-top:5px; } #plan2 { width:218px; min-height:215px; _height:215px; float:left; border-right:1px solid #fff; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; border-right: 1px dashed #fff; padding-bottom:10px; padding-top:5px; } #plan3 { width:218px; min-height:215px; _height:215px; float:left; border-right:1px solid #fff; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; border-right: 1px dashed #fff; padding-bottom:10px; padding-top:5px; } #plan4 { width:218px; min-height:215px; _height:215px; float:left; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; padding-bottom:10px; border-right: 1px dashed #fff; padding-top:5px; } #plan5 { width:218px; min-height:215px; _height:215px; float:left; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; border-right: 1px dashed #fff; padding-bottom:10px; padding-top:5px; } #plan6 { width:218px; min-height:215px; _height:215px; float:left; padding:0 5px 0 15px; list-style-image: url(../images/puce.gif); list-style-position:outside; border-bottom: 1px dashed #fff; padding-bottom:10px; padding-top:5px; } .tailleplan { font-size:0.9em; color:#96A6CA; font-family:Arial, Helvetica, sans-serif } #ss-li { font-size:0.9em;} #ss-li a { color:#555;} /*---------------------------------------------------- fait par Liondefeu -----------------------------------------*/