/*******************************************************************************************/ /* A FAIRE: ---- */ /* Sommaire : - Reset des css - Classes générales > html, body > Liens > input formulaire > shadow > css slider > infobulle > HEADER > CONTENT > FOOTER - Classes spécifiques > ACCUEIL > NOTRE GROUPE > CONTACT > VEHICULES OCCASION > SAV > PIECES ET ACCESSOIRES > ESPACE PRIVILEGES - CSS additionnels > Twitter > Tipsy > Nivo slider */ /* couleur rouge : ce2e2e couleur grise */ /*******************************************************************************************/ /*-------RESET CSS-------*/ /*******************************************************************************************/ html,body,div,span,h1,h2,h3,h4,h5,h6,blockquote,object,iframe,ins,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,q,p,kbd,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,td,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th{font-weight:inherit;font-style:inherit;font-size:100%;border:0;text-decoration:none;text-align:inherit;vertical-align:baseline;margin:0;padding:0}ol,ul{list-style:none}table{border-collapse:collapse}blockquote:before,blockquote:after,q:before,q:after{content:""}hr{color:inherit;background-color:#000;border:1px;height:1px;margin:0;padding:0}strong,b{font-weight:700}acronym,abbr{cursor:help}.mask{position:absolute;top:-999em;left:-999em;display:block;height:0;width:0;overflow:hidden;text-indent:-999em} .hide{display:none}.clear{clear:both;height:0;display:block;overflow:hidden}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%} /*-------CLASSES GENERALES-------*/ /*******************************************************************************************/ html{ background: #f0f0f0; } body{ font-family: arial, verdana, sans-serif; font-size: 12px; width: 100%; height: 100%; } label{ color: #3a3a3a; } label a{ color: #444; text-shadow: 1px 1px 1px #333; } .label{ display: inline-block; width: 185px; height: 14px; font-size: 12px; margin: 2px 0 0 0; } .input, .select, .textarea, .input-date{ display: inline-block; width: 250px; height: 17px; border: 1px solid #b6b6b6; vertical-align: top; } .select{ width: 252px; height: 20px; } .textarea{ width: 250px; height: 100px; padding: 3px; font-family: inherit; font-size: 100%; } /*POUR DATEPICKER JQUERY UI*/ .input-date{ width: 229px; } .input-date+img{ vertical-align: -5px; padding: 0 0 0 5px; cursor: pointer; } .input-error{ border: 1px solid red; } .submit{ width: 88px; height: 17px; padding: 0 0 0 12px; background: url('../images/picto/puce-fleche.png') no-repeat left center; cursor: pointer; border: none; color: #000; font-size: 12px; font-weight: bold; display: block; font-weight: bold; } .flecheG{ vertical-align: -2px; } /*ETAT DE SURVOL DES LIENS*/ a{ color: #000; } a:hover{ color: #ce2e2e !important; } .shadow{ text-shadow: 1px 1px 2px #000; } .form_error{ font-size: 11px; font-weight: normal; color: #ce2e2e; } .form_valide{ font-size: 11px; font-weight: bold; color: #009800; } .reponse{ background: #ce2e2e; color: #fff; padding: 10px; font-size: 14px; font-weight: bold; } /*SHADOW SUR LES BLOCS*/ /*Comportement sous IE 7/8 reglé par jquery*/ .box-shadow{ -moz-box-shadow: 0px 0px 5px #bdbdbd; /* Firefox */ -webkit-box-shadow: 0px 0px 5px #bdbdbd; /* Safari and Chrome */ box-shadow: 0px 0px 5px #bdbdbd; /* Opera 10.5+ */ behavior: url(ie-css3.htc); zoom:1; position: relative; } /*CSS DES SLIDERS*/ .slider-block{ width: 193px; margin: 0 auto 5px auto; } .slider-block .libelle{ text-align: center; } .slider-block .libelle .inputSlider{ } .slider{ width: 193px; margin: 10px 0; } /*Infobulle*/ #infobulle{ position: absolute; width: 284px; min-height: 250px; color: #ebebeb; font-size: 10px; z-index: 100; } /*******************************************************************************************/ /*== HEADER*/ /*******************************************************************************************/ #header{ width: 100%; height: 146px; background: url('img/bg-menu.png') repeat-x left bottom; position: relative; z-index: 10; } #header-txt{ width: 960px; height: 146px; margin: 0 auto; position: relative; z-index: 10; } #header-txt #logo{ width:383px; height:80px; float: left; margin: 10px 0 0 0; } #header-txt #logo a { display: block; width:383px; height:80px; text-indent: -50000px; background: url('img/logo-dallard.jpg') no-repeat left top; } #header-txt #box-log { width:310px; height:80px; float: right; margin: 10px 0 0 0; } #header-txt #box-log div:first-child{ width: 110px; height: 80px; text-align: right; padding: 0 13px 0 0; float: left; margin: 0 13px 0 0; border-right: 4px solid #ce2e2e; font-size: 13px; line-height: 16px; } #header-txt #box-log div > span{ color: #ce2e2e; } #header-txt #box-log div+div{ width: 162px; text-align: left; float: left; line-height: 14px; } #header-txt #box-log div+div input[type=text], #header-txt #box-log div+div input[type=password]{ width: 156px; height: 15px; font-size: 11px; margin: 0 0 5px 0; border: 1px solid #444444; margin: 0 0 5px 0; padding: 0 2px } #header-txt #box-log div+div > p{ width: 130px; float: left; } #header-txt #box-log div+div > input[type=submit]{ width: 28px; height: 28px; border: none; background: #ce2e2e url('img/btn-ok.gif') no-repeat left top; cursor: pointer; float: right; } #header-txt #box-log #pass_pr{ display: none; } #header-txt #box-log a{ color: #000; font-size: 11px; } #header #menu{ clear: both; width: 100%; height: 30px; padding: 20px 0 0 0; } /*Menu principal*/ #header #menu > ul > li a{ color: #fff; } #header #menu > ul > li{ float: left; text-align: center; position: relative; height: 25px; margin: 7px 0; font-size: 12px; } #header #menu > ul > li.sep{ margin: 0 11px; } #header #menu > ul > li a{ color: #5b5a5d; } #header #menu > ul > li.actif > a{ color: #ce2e2e; } /*Sous menus*/ #header #menu .sub-menu{ width: 150px; height: auto; margin: 0; padding: 5px; text-align: left; margin: 10px 0 0; background: #ebebeb; position: absolute; top: 15px; left: -12px; font-size: 11px; border-left: 3px solid #ce2e2e; text-transform: uppercase; } #header #menu .sub-menu{ display: none; } #header #menu .sub-menu.large-menu{ width: 170px; } #header #menu .sub-menu li{ margin: 5px 0; font-size: 11px; } #header #menu .sub-menu li:first-child{ margin: 0 0 5px 0; } #header #menu .sub-menu li:last-child{ margin: 5px 0 0 0; } /*******************************************************************************************/ /*== CONTENT*/ /*******************************************************************************************/ #content{ width: 960px; height: auto; min-height: 200px; margin: 0 auto; padding: 0 10px 20px 10px; background: url('img/bg-centre.png') repeat-y left top; position: relative; z-index: 9; top: -10px; } #content-bas{ width: 960px; height: 11px; margin: 0 auto; padding: 5px 10px 0 10px; background: url('img/bg-centre-bas.png') no-repeat left top; position: relative; z-index: 9; top: -10px; } #content h2{ background: url('../images/picto/puce-fleche.png') no-repeat left center; padding: 0 0 0 23px; margin: 0 20px 20px 20px; font-size: 13px; font-weight: bold;} #bandeau{ width: 960px; height: 255px; position: relative; top: 0px; } #chemin{ width: 920px; height: 15px; margin: 20px; } #chemin a{ color: #3a3a3a; } #englobage{ width: 960px; background: url('img/bg-content.jpg') repeat-y left top; margin: 0 0 0 20px; } /*******************************************************************************************/ /*== FOOTER*/ /*******************************************************************************************/ #footer{ width: 100%; height: 100px; } #footerTxt{ width: 960px; margin: -10px auto 0 auto; padding: 0 0 0 0; font-size: 10px; } #footerTxt #lien_site{ margin: 5px 0 0 0; } #footerTxt #lien_site li{ float: left; margin: 0 13px; text-align: left; vertical-align: top; line-height: 16px; } #footerTxt #lien_site li:first-child{ margin: 0 13px 0 0; } #footerTxt #lien_site li:last-child{ margin: 0 0 0 13px; } #footerTxt #lien_site .t{ color: #000; font-weight: bold;} #footerTxt #lien_site a.sub{ color: #333; } #footerTxt #lien_footer{ clear: both; float: right; padding: 0 0 50px 0; } #footerTxt #lien_footer li{ float: left; margin: 10px 0 0 10px; } #footerTxt #lien_footer a{ display: block; height: 40px; } /*-------CLASSES SPECIFIQUES-------*/ /*******************************************************************************************/ /*******************************************************************************************/ /*== ACCUEIL*/ /*******************************************************************************************/ .box-accueil{ background: #f0f0f0; padding: 20px; width: 253px; height: 284px; line-height: 20px; } .box-accueil h3{ width: 193px; height: 13px; background: url('img/titres/titre-actualites.png') no-repeat left top; text-indent: -5000px; margin: 0 0 10px 0; } .box-accueil h4{ width: 100%; height: 32px; } .box-accueil h4 a{ display: block; width: 247px; height: 22px; padding: 4px 0 0 0; background: #8e8f90; border: 3px solid #fff; font-weight: bold; text-align: center; font-size: 13px; color: #fff; } .box-accueil h4 a:hover{ color: #fff !important; } .box-accueil h4 img{ vertical-align: -1px; } .box-accueil p{ margin: 10px 0 20px 0; } #accueil_haut, #acc_occasions, #accueil_milieu, #accueil_bas{ width: 920px; height: 324px; margin: 0 auto 20px auto; } #accueil_bas{ margin: 0 auto 0 auto; } #accueil_haut{ padding: 25px 0 0 0; } #acc_banniere{ width: 606px; height: 100%; float: left; } #acc_actualites{ float: right; } #acc_actualites .img{ border: 3px solid #fff; } #acc_actualites p{ margin: 15px 0; } #acc_actualites a{ font-weight: bold; } .actu_slider{ position: relative; min-height: 210px; } .actu_slider div{ position: absolute; top: 0; } .actu_slider div:not(:first-child){ display: none; } #acc_occasions{ width: 880px; height: 160px; padding: 20px; line-height: normal; } #acc_occasions h3{ background-image: url('img/titres/titre-occasions.png'); } #acc_occasions #acc_vitrine{ height: 130px; } #acc_occasions #acc_vitrine .item{ width: 90px; height: 130px; float: left; margin: 0 20px 0 0; } #acc_occasions #acc_vitrine .item:last-child{ margin: 0; } #acc_occasions #acc_vitrine .item img{ border: 3px solid #fff; } #acc_occasions #acc_vitrine .item p{ margin: 8px 0 0 0; } #acc_occasions #acc_vitrine .item span{ color: #ce2e2e; } #acc_occasions #acc_vitrine .item a{ text-decoration: underline; } #acc_club p, #acc_business p{ height: 80px; } #acc_club, #acc_neufs, #acc_business{ float: left; margin: 0 20px 0 0; } #acc_club h3{ background-image: url('img/titres/titre-club.png'); } #acc_neufs h3{ background-image: url('img/titres/titre-neufs.png'); } #acc_neufs h4{ margin: 10px 0 22px 0; } #acc_business{ margin: 0; } #acc_business h3{ background-image: url('img/titres/titre-business.png'); } #acc_sav{ margin: 0 20px 0 0; float: left; } #acc_sav h3{ background-image: url('img/titres/titre-sav.png'); } #acc_sav p{ height: 80px; } #acc_piece{ width: 566px; margin: 0; float: left; } #acc_piece h3{ background-image: url('img/titres/titre-pieces.png'); } #acc_piece div{ width: 171px; float: left; margin: 0 20px 0 0; } #acc_piece div p{ height: 80px; } #acc_piece div h4 a{ width: 171px; } #acc_piece div+div+div{ margin: 0; } /*******************************************************************************************/ /*== NOTRE GROUPE*/ /*******************************************************************************************/ #aside{ /* background: #f0f0f0; */ padding: 20px; width: 260px; min-height: 350px; float: left; margin: 0 0 0 0; font-size: 11px; } #aside a{ color: #000; } #aside h3{ border-bottom: 1px solid #8f8d8d; padding: 0 0 8px 0; color: #ce2e2e; font-weight: bold; margin: 0 0 20px 0; font-size: 13px; } #aside p{ margin: 0 0 19px 0; } #aside a img{ vertical-align: -2px; } #groupe{ float: left; margin: 0 0 0 30px; width: 590px; } #groupe h3{ margin: 0 0 20px 0; font-weight: bold; font-size: 13px; } #groupe #encart-video{ width: 576px; height: 347px; background: #e0dbdb; margin: 0 0 20px 0; } #groupe .equipe{} #groupe .equipe p{ width: 150px; height: 220px; float: left; margin: 0 30px 10px 30px; } #groupe .equipe p.first{ margin: 0 30px 10px 0; } #groupe .equipe p.last{ margin: 0 0 10px 30px; } #groupe .equipe p img{ margin: 0 0 16px 0; } #groupe .equipe p strong{ color: #ce2e2e; } #groupe .relation{ position: relative; width: 590px; height: auto; padding: 0 0 26px 0; } #groupe .relation img.ouvrant{ position: absolute; top: 0; left: 0; } #groupe .relation img.fermant{ position: absolute; bottom: 0; right: 0; } #groupe .relation > div{ width: 500px; height: 150px; margin: 0 0 30px 50px; } #groupe .relation > div > img{ margin: 0 15px 0 0; float: left; } #groupe .relation > div h4{ font-size: 17px; margin: 0 0 15px 0; padding: 5px 0 0 0; } #groupe .relation > div h4 strong{ color: #ce2e2e; } #groupe .relation > div p{} #groupe .relation > div p+p{ margin: 10px 0 0 0; } #groupe .relation > div p+p a{ font-weight: bold; } #groupe .relation > div p+p img{ vertical-align: -2px; } /*******************************************************************************************/ /*== CONTACT*/ /*******************************************************************************************/ /*-------Contactez-nous-------*/ /*******************************************************************************************/ #contact{ width: 920px; margin: 0 auto; } #contact form>fieldset>legend{ font-weight: bold; margin: 0 0 20px 0; } #contact form p{ margin: 10px 0; } #contact form .textarea{ width: 710px; height: 227px; } #contact form .submit{ float: right; margin: 0 7px 0 0; } #contact form .submit+p{ clear: right; } /*-------Points de vente-------*/ /*******************************************************************************************/ #point-dv{} #point-dv .concession{ width: 880px; height: 210px; padding: 20px; background: #f0f0f0; margin: 20px; color: #3a3a3a; } #point-dv .concession h3{ font-weight: bold; font-size: 15px; margin: 0 0 10px 0; } #point-dv .concession h3 span{ color: #ce2e2e; } #point-dv .concession p{ margin: 0 0 10px 0; } #point-dv .concession img{ margin: 0 0 0 0; float: right; } /*-------Nous recrutons-------*/ /*******************************************************************************************/ #aside{ /*CSS de base dans la section == NOTRE GROUPE */ } #aside .offre{} #aside .offre strong span{ color: #ce2e2e; } #aside .sep{ background: #8f8d8d; height: 1px; width: 100%; display: block; margin: 0 0 20px 0; } #recrutement{ float: left; margin: 0 0 0 30px; width: 590px; } #recrutement h3{ margin: 0 0 20px 0; font-weight: bold; font-size: 13px; } #recrutement .metiers{} #recrutement .metiers p{ width: 150px; height: 185px; float: left; margin: 0 30px 10px 30px; } #recrutement .metiers p.first{ margin: 0 30px 10px 0; } #recrutement .metiers p.last{ margin: 0 0 10px 30px; } #recrutement .metiers p img{ margin: 0 0 16px 0; } #recrutement form p{ margin: 10px 0; } #recrutement form .textarea{ width: 380px; height: 227px; } #recrutement form .submit{ float: right; margin: 0 7px 0 0; } #recrutement form .submit+p{ clear: right; } /*******************************************************************************************/ /*== VEHICULES NEUFS*/ /*******************************************************************************************/ /*-------Gamme neuf-------*/ /*******************************************************************************************/ #gamme{ width: 920px; margin: 0 auto; } #gamme .ligne-gamme{ width: 100%; height: 140px; margin: 0 0 20px 0; } #gamme .ligne-gamme h3{ width: 137px; height: 49px; padding: 87px 0 0 0; background: url('img/bg-bloc-titre-vn.png') no-repeat left top; font-size: 13px; font-weight: bold; text-align: center; color: #656565; float: left; margin: 0 50px 0 0; } #gamme .ligne-gamme .modele{ width: 180px; height: 139px; font-size: 11px; float: left; font-weight: bold; } #gamme .ligne-gamme .modele>img{ margin: 0 0 10px 0; } #gamme .ligne-gamme .modele strong{ color: #6f6f6f; } #gamme .ligne-gamme .modele span{ color: #ce2e2e; } #gamme .ligne-gamme .modele a{ color: #6f6f6f; } #direction { width: 386px; height: 198px; padding: 21px 23px; margin: 20px 20px 0 20px; background: #f0f0f0; float: left; } #direction h3{ font-weight: bold; margin: 0 0 15px 0; font-weight: bold; } #direction h3+p{ margin: 0 0 15px 0; } #direction .slider{ width: 180px; height: 122px; position: relative; margin: 10px 0 0 0; } #direction .slider img{ position: abolute; top: 0; left: 0; z-index: 3; } #direction .caption{ width: 160px; height: 107px; background: none; text-align: left; top: 0; left: 212px; } #direction .caption p{ padding: 15px 0 0 0; color: #3a3a3a; text-align: left; line-height: 20px; } #direction .caption p .prix{ color: #ce2e2e; } #direction .caption p img{ position: relative; } #direction .caption a{ font-weight: normal; } #direction .nivo-controlNav{ position:absolute; left:50%; bottom:-20px; width: 202px; margin: 0 0 0 -55px; text-align: center; z-index: 3; } #direction .nivo-controlNav a{ background: url('img/nivo-bullets.png') no-repeat; display:block; width:10px; height:10px; text-indent:-9999px; border:0; margin-right:10px; float:left; } #direction .nivo-controlNav a.active { background-position:0 -10px; } #neuf-stock { width: 422px; height: 198px; padding: 21px 23px; margin: 20px 0 0 0; background: #f0f0f0; float: left; } #neuf-stock h3{ font-weight: bold; margin: 0 0 20px 0; } #neuf-stock>img{ margin: 0 0 15px 0; } #neuf-stock p{ margin: 0 0 20px 0; } /*-------Détail neuf-------*/ /*******************************************************************************************/ #vehicules-neuf #fiche{ width: 920px; margin: 0 auto; } #vehicules-neuf #fiche-haut{ width: 100%; height: 225px; margin: 0 0 20px 0; } #vehicules-neuf #fiche-haut .info-vn{ width: 330px; height: 185px; padding: 20px; background: #f0f0f0; float: left; } #vehicules-neuf #fiche-haut .info-vn .modele{ font-size: 25px; } #vehicules-neuf #fiche-haut .info-vn .prix{ font-size: 15px; } #vehicules-neuf #fiche-haut .info-vn .prix strong{ font-size: 20px; color: #ce2e2e; } #vehicules-neuf #fiche-haut .info-vn .technique{ font-weight: bold; margin: 25px 0 0 0; } #vehicules-neuf #fiche-haut .image-vn{ width: 548px; height: 225px; background: #fff; float: right; text-align: center; } #vehicules-neuf form#f_demande{ width: 880px; background: #f0f0f0; padding: 20px; } #vehicules-neuf form#f_demande .left-side{ width: 400px; float: left; margin: 0 0 0 0px; } #vehicules-neuf form#f_demande .right-side{ width: 400px; float: right; margin: 0 00px 0 0; } /*Bug IE7*/ .ie7 #vehicules-neuf form#f_demande .left-side{ width: 40px; float: left; } .ie7 #vehicules-neuf form#f_demande .right-side{ width: 40px; float: right; margin: 0 0 0 0; } #vehicules-neuf form#f_demande p{ margin: 10px 0; } #vehicules-neuf form#f_demande fieldset>h4{ font-weight: bold; font-size: 13px; margin: 0 0 20px 0; } #vehicules-neuf form#f_demande fieldset>h4+p{ margin: 0 0 30px 0; } #vehicules-neuf form#f_demande h4{ font-weight: bold; font-size: 12px; margin: 0 0 20px 0; } #vehicules-neuf form#f_demande .label{ width: 127px; } #vehicules-neuf form#f_demande .input-checkbox{ color: #000; margin: 0 5px 0 0; } #vehicules-neuf form#f_demande .right-side .label{ width: 109px; } #vehicules-neuf form#f_demande .textarea{ width: 356px; height: 214px; } #vehicules-neuf form#f_demande #autre{ width: 245px; height: 115px; } #vehicules-neuf form#f_demande p.conc{ color: #3a3a3a; margin: 15px 0 0 0; } #vehicules-neuf form#f_demande p.conc .label{ width: 320px; margin: 0 0 10px 0; } #vehicules-neuf form#f_demande p.conc .select{ width: 361px; margin: 0; } #vehicules-neuf form#f_demande div.options{} #vehicules-neuf form#f_demande div.options table{ width: 250px; float: right; margin: 0 18px 0 0; } #vehicules-neuf form#f_demande div.options table input{ padding: 0; margin: 0; } #vehicules-neuf form#f_demande .submit{ float: right; margin: 10px 30px 0 0; } #vehicules-neuf form#f_demande .submit+p{ clear: right; padding: 5px 0 0 0; } /*-------Gamme DS-------*/ /*******************************************************************************************/ #vehicules-neuf #ligne-ds{ width: 920px; margin: 0 auto; } #vehicules-neuf .box-ds{ width: 407px; height: 379px; background: #f0f0f0 url('img/bg-box-ds.jpg') no-repeat left top; border: 3px solid #fff; position: relative; margin: 33px 0 35px 33px; float: left; } #vehicules-neuf .box-ds h3{ width: 266px; height: 68px; position: absolute; top: -33px; left: -33px; text-indent: -5000px; background: url('img/titre-ds-direction.png') no-repeat left top; } #vehicules-neuf .box-ds.odd{ margin-right: 20px; } #vehicules-neuf #ligne-ds .direction{ } #ligne-ds .direction .slider{ width: 321px; height: 227px; position: relative; margin: 10px auto; top: 33px; } #ligne-ds .direction .slider img{ position: abolute; top: 0; left: 0; z-index: 3; } #ligne-ds .direction .caption{ width: 321px; height: 75px; background: #fff; margin: 10px auto; text-align: center; bottom: -95px; } #ligne-ds .direction .caption p{ padding: 5px 10px; font-weight: bold; color: #3a3a3a; text-align: left; line-height: 20px; } #ligne-ds .direction .caption p span.prix{ color: #ce2e2e; } #ligne-ds .direction .caption p img{ position: relative; } #ligne-ds .direction .caption a{ font-weight: normal; } #ligne-ds .direction .noresult{ position: absolute; bottom: 0; width: 397px; background: #ce2e2e; font-weight: bold; color: #fff; padding: 5px; } #vehicules-neuf #ligne-ds .ligneDS{ } #vehicules-neuf #ligne-ds .ligneDS h3{ background: url('img/titre-ds-ligne.png') no-repeat left top; } #vehicules-neuf #ligne-ds .ligneDS .modele{ width: 322px; height: 95px; background: #fff; margin: 0 auto 10px auto; position: relative; } #vehicules-neuf #ligne-ds .ligneDS .modele{ top: 33px; } #vehicules-neuf #ligne-ds .ligneDS .modele>img{ float: left; margin: 0 10px 0 0; } #vehicules-neuf #ligne-ds .ligneDS .modele p{ float: left; padding: 15px 0 0 0; line-height: 20px; } #vehicules-neuf #ligne-ds .ligneDS .modele p .prix{ color: #ce2e2e; } #vehicules-neuf #ligne-ds .nouveaute p.caption, #vehicules-neuf #ligne-ds .prochainement p.caption, #vehicules-neuf #ligne-ds .boutique p.caption, #vehicules-neuf #ligne-ds .personnalisation p.caption{ width: 320px; height: 46px; padding: 20px 44px; background: #fff; text-align: left; margin: 0 auto; } #vehicules-neuf #ligne-ds .nouveaute{ text-align: center; } #vehicules-neuf #ligne-ds .nouveaute h3{ background: url('img/titre-ds-nouveaute.png') no-repeat left top; } #vehicules-neuf #ligne-ds .nouveaute>img{ border: 3px solid #fff; margin: 33px 0 33px 0; } #vehicules-neuf #ligne-ds .prochainement{ text-align: center; } #vehicules-neuf #ligne-ds .prochainement h3{ background: url('img/titre-ds-prochainement.png') no-repeat left top; } #vehicules-neuf #ligne-ds .prochainement>img{ margin: 33px 0 33px 0; } #vehicules-neuf #ligne-ds .boutique{ text-align: center; height: 460px; margin-bottom: 5px; } #vehicules-neuf #ligne-ds .boutique h3{ background: url('img/titre-ds-accessoires.png') no-repeat left top; } #vehicules-neuf #ligne-ds .boutique p.img{ margin: 33px auto 2px auto; } #vehicules-neuf #ligne-ds .boutique p.img img{ margin: 0 0 10px 0; } #vehicules-neuf #ligne-ds .boutique p.img .middle{ margin: 0 10px 10px 10px; } #vehicules-neuf #ligne-ds .boutique p.caption{ } #vehicules-neuf #ligne-ds .personnalisation{ text-align: center; height: 460px; margin-bottom: 5px; } #vehicules-neuf #ligne-ds .personnalisation h3{ background: url('img/titre-ds-personnalisation.png') no-repeat left top; } #vehicules-neuf #ligne-ds .personnalisation p.img{ margin: 33px auto 0 auto; } #vehicules-neuf #ligne-ds .personnalisation p.img img{ margin: 0 0 11px 0; } #vehicules-neuf #ligne-ds .personnalisation p.img .odd{ margin: 0 11px 11px 0; } #vehicules-neuf #ligne-ds .personnalisation p.img2 img{ margin: 0 2px 0 0; } #vehicules-neuf #ligne-ds .personnalisation p.img2 .last{ margin: 0 0 0 0; } #vehicules-neuf #ligne-ds .personnalisation p.caption{ margin: 5px auto 0 auto; } #vehicules-neuf #ligne-ds .personnalisation strong a, #vehicules-neuf #ligne-ds .boutique strong a { color: #ce2e2e; } /*******************************************************************************************/ /*== CITROEN BUSINESS*/ /*******************************************************************************************/ #business{ width: 920px; margin: 0 auto; } /*-------Gamme Citroën-------*/ /*******************************************************************************************/ #business #gamme{ width: 920px; margin: 0 auto; } #gamme-particulier{ width: 900px; } #gamme-ds{ width: 900px; margin: 20px 0 0 0; } #business #gamme h3{ width: 100%; padding: 0 0 10px 0; margin: 0 0 10px 0; font-weight: bold; font-size: 13px; border-bottom: 1px solid #ce2e2e; color: #ce2e2e; } #business #gamme .modele{ width: 180px; height: 145px; font-size: 11px; float: left; color: #6f6f6f; margin: 0 0 10px 0; } #business #gamme .modele>img{ margin: 0 0 5px 0; } #business #gamme .modele a{ color: #6f6f6f; } #business #gamme .les-plus{ width: 320px; height: 100px; padding: 15px 20px 20px 20px; margin: 5px 0 0 0; float: left; font-size: 11px; line-height: 17px; background: #f0f0f0; color: #6f6f6f; } #gamme-transformer{ width: 360px; margin: 20px 90px 0 0; float: left; } #gamme-utilitaire{ width: 450px; margin: 20px 0 0 0; float: left; } #business #gamme #gamme-utilitaire .les-plus{ width: 230px; font-size: 11px; line-height: 17px; } #gamme-entreprise{ width: 360px; margin: 20px 90px 0 0; float: left; } #gamme-electrique{ width: 450px; margin: 20px 0 0 0; float: left; } #business #gamme #gamme-ds .les-plus{ height: 105px; padding: 10px 20px 20px 20px; } /*-------Notre équipe-------*/ /*******************************************************************************************/ #business .equipe{ width: 920px; height: auto; padding: 20px 0 0 0; margin: 0 0 20px 0; background: #f0f0f0; } #business .equipe h3{ width: 132px; height: 108px; padding: 10px 0 0 7px; position: relative; top: -20px; float: left; background: url('img/corner-business.jpg') no-repeat left top; color: #fff; font-weight: bold; } #business .equipe .noms{ width: 780px; height: auto; float: left; } #business .equipe .noms div{ width: 260px; height: 120px; float: left; margin: 0 0 20px 0; } #business .equipe .noms div img{ float: left; margin: 0 10px 0 0; } #business .equipe .noms div p{ width: 125px; float: left; margin: 55px 0 0 0; color: #3a3a3a; } #business .equipe .noms div p strong{ color: #ce2e2e; } /*-------Détail business-------*/ /*******************************************************************************************/ #business #fiche{ width: 920px; margin: 0 auto; } #business #fiche-haut{ width: 100%; height: 225px; margin: 0 0 20px 0; } #business #fiche-haut .info-vn{ width: 330px; height: 185px; padding: 20px; background: #f0f0f0; float: left; } #business #fiche-haut .info-vn .modele{ font-size: 25px; } #business #fiche-haut .info-vn .prix{ font-size: 15px; } #business #fiche-haut .info-vn .prix strong{ font-size: 20px; color: #ce2e2e; } #business #fiche-haut .info-vn .technique{ font-weight: bold; margin: 25px 0 0 0; } #business #fiche-haut .image-vn{ width: 548px; height: 225px; background: #fff; float: right; text-align: center; } #business form#f_demande{ width: 880px; background: #f0f0f0; padding: 20px; } #business form#f_demande .left-side{ width: 400px; float: left; margin: 0 0 0 0px; } #business form#f_demande .right-side{ width: 400px; float: right; margin: 0 00px 0 0; } /*Bug IE7*/ .ie7 #business form#f_demande .left-side{ width: 40px; float: left; } .ie7 #business form#f_demande .right-side{ width: 40px; float: right; margin: 0 0 0 0; } #business form#f_demande p{ margin: 10px 0; } #business form#f_demande fieldset>h4{ font-weight: bold; font-size: 13px; margin: 0 0 20px 0; } #business form#f_demande fieldset>h4+p{ margin: 0 0 30px 0; } #business form#f_demande h4{ font-weight: bold; font-size: 12px; margin: 0 0 20px 0; } #business form#f_demande h4.titre{ font-weight: bold; font-size: 12px; margin: 40px 0 20px 0; } #business form#f_demande .label{ width: 127px; } #business form#f_demande .input-checkbox{ color: #000; margin: 0 5px 0 0; } #business form#f_demande .right-side .label{ width: 130px; } #business form#f_demande .comm .label{ width: 130px; margin: 0 0 10px 0; } #business form#f_demande .textarea{ width: 356px; height: 214px; } #business form#f_demande .left-side .textarea{ width: 244px; height: 42px; } #business form#f_demande #autre{ width: 245px; height: 115px; } #business form#f_demande p.conc{ color: #3a3a3a; margin: 15px 0 0 0; } #business form#f_demande p.conc .label{ width: 370px; margin: 0 0 10px 0; } #business form#f_demande p.conc .select{ width: 361px; margin: 0; } #business form#f_demande p.conc .input{ width: 361px; margin: 0; } #business form#f_demande .submit{ float: right; margin: 10px 30px 0 0; } #business form#f_demande .submit+p{ clear: right; padding: 5px 0 0 0; } /*-------Nos services------*/ /*******************************************************************************************/ #business .sstitre{ font-weight: bold; margin: 0 0 20px 0; font-size: 13px; } #business .service{ min-height: 75px; margin: 0 0 20px 0; } #business .service>img{ float: left; margin: 0 20px 0 0; } #business .service p{ float: left; line-height: 17px; } #business .pass{ width: 490px; height: 105px; padding: 20px; margin: 0 0 10px 90px; background: #f0f0f0; } #business .edt{ margin: 0 0 20px 70px; } #business .prestation{ width: 880px; padding: 20px; margin: 10px 0; background: #f0f0f0; } #business .prestation h3{ font-size: 13px; font-weight: bold; margin: 0 0 20px 0; } #business .prestation p{ margin: 0 0 20px 0; line-height: 17px; } #business .prestation p:last-child{ margin: 0; } /*******************************************************************************************/ /*== VEHICULES OCCASION*/ /*******************************************************************************************/ #vehicules-occasion, #liste_stock{ width: 920px; margin: 0 auto; position:relative } #vehicules-occasion > p, #liste_stock > p{ margin: 0 0 20px 0; } /*-------Listing occasion-------*/ /*******************************************************************************************/ #offre_speciale{ width: 880px; height: 162px; padding: 19px 20px; background: #f0f0f0; position: relative; margin-left:20px; margin-bottom:20px; } #offre_speciale h4{color:#d10029; font-size :20px; margin-bottom:15px;} #offre_speciale h5{color:#3a3a3a; font-size :17px; margin-bottom:5px;} #offre_speciale p{color:#3a3a3a; font-size :13px; line-height:20px;} #offre_speciale p.petit{color:#3a3a3a; font-size :10px; margin-top:20px;} #offre_speciale #offre_spe_left{float:left;width:430px;} #offre_speciale #offre_spe_right{float:left;width:320px;} #f_stock{ width: 880px; height: 162px; padding: 19px 20px; background: #f0f0f0; position: relative; } #f_stock h4{ font-weight: bold; margin: 0 0 20px 0; width: 450px; font-size: 13px; } #f_stock .col{ width: 285px; float: left; margin: 0 10px 0 0; } #f_stock .col p{ margin: 0 0 7px 0; } /* #f_stock .col p:last-child{ margin: 0; } */ #f_stock .col .label{ width: 78px; } #f_stock .col .select{ width: 198px; } #f_stock h4+a{ display: block; float: right; position: absolute; top: 20px; right: 20px; } .ie7 #f_stock h4+a{ display: block; float: right; position: absolute; top: -35px; right: 0px; } #f_stock .rachat{ border: 3px solid #fff; } #listing{ margin: 20px 0 0 0; } #listing .item{ height: 70px; background: #f2f2f2; } #listing .item.coul1{ background: #fff; } /*Alternance couleur de fond pour les item de listing*/ #listing .item .colonne{ float: left; height: 58px; padding: 12px 0 0 16px; } #listing .item .col1{ width: 87px; padding: 0; } #listing .item .col1 img{ margin: 4px 0 0 5px; } #listing .item .col2{ width: 283px; position: relative; } #listing .item .col2 img{ position: absolute; top: 5px; right: 20px; } #listing .item .col3{ width: 235px; border-left: 1px solid #6e6e6e; } #listing .item .col4{ width: 137px; height: 50px; padding: 20px 0 0 16px; border-left: 1px solid #6e6e6e; } #listing .item .col4.pro{ height: 58px; padding: 12px 0 0 16px; } #listing .item .col4 strong{ color: #ce2e2e; font-size: 15px; } #listing .item .col4 span{ text-decoration: line-through; } #listing .item .col5{ width: 107px; height: 43px; padding: 27px 0 0 20px; border-left: 1px solid #6e6e6e; } #listing .item .col5 a{ text-decoration: underline; font-weight: bold; } #liste_stock .perso{ width: 100%; background: #f0f0f0; text-align: center; padding: 20px 0; margin: 20px 0; } #liste_stock .perso img{ vertical-align: -2px; } #liste_stock .perso a{ color: #ce2e2e; font-weight: bold; } .pagination{ width: 100%; background: #f0f0f0; text-align: center; padding: 10px 0; margin: 20px 0; font-size: 13px; } .pagination img{ vertical-align: -1px; } .pagination span{ font-weight: bold; } .pagination a{ } .pagination .fleche-g{ margin: 0 10px 0 0; } .pagination .fleche-d{ margin: 0 0 0 10px; } .legende{ font-size: 12px; color: #ce2e2e; } /*-------Détail occasion-------*/ /*******************************************************************************************/ .barre-option{ width: 880px; padding: 11px 20px; background: #f0f0f0; } .barre-option p{ font-weight: bold; width: 130px; } .barre-option p{ float: left; } .barre-option p+p{ float: left; margin: 0 0 0 260px; } .barre-option p+p+p{ float: right; text-align: right; margin: 0 0 0 0; } #fiche{ margin: 20px 0; } #fiche h4{ margin: 0 0 20px 0; font-weight: bold; } #fiche .col-fiche{ width: 250px; float: left; } #fiche .col2-fiche{ width: 425px; float: right; position: relative; } #fiche .galerie{ width: 190px; height: 430px; float: left; margin: 0 20px 0 0; } #fiche .galerie img{ border: 3px solid #fff; margin: 20px 0 0 0; } #fiche .galerie img.big{ margin: 0; } #fiche .galerie img.odd{ margin-right: 10px; } #fiche .galerie p{ margin: 10px 0 0 0; font-size: 11px; } #fiche .infos-haut{ height: 70px; } #fiche .infos-haut strong{ font-size: 15px; } #fiche .infos-haut strong.prix{ color: #ce2e2e; font-size: 20px; } #fiche .infos-haut strong.prix span{ color: #000; font-size: 12px; text-decoration: line-through; } #fiche .infos-centre{ height: 160px; } #fiche .infos-centre table{ width: 100%; } #fiche .infos-centre .col2-fiche p{ margin: 0 0 40px 0; } #fiche .infos-centre .col2-fiche p+p{ margin: 0 0 0 0; } #fiche .infos-centre .col2-fiche p a{ font-weight: bold; } #vehicules-occasion form#f_demande{ width: 880px; background: #f0f0f0; padding: 20px; } #vehicules-occasion form#f_demande h4{ font-weight: bold; font-size: 13px; margin: 0 0 20px 0; } #vehicules-occasion form#f_demande h4+p{ margin: 0 0 20px 0; } #vehicules-occasion form#f_demande h4+p strong{ color: #ce2e2e; } #vehicules-occasion form#f_demande div{ width: 420px; height: 200px; float: left; } #vehicules-occasion form#f_demande div p{ margin: 10px 0; } #vehicules-occasion form#f_demande .label{ width: 130px; } #vehicules-occasion form#f_demande .textarea{ width: 735px; height: 226px; } #vehicules-occasion form#f_demande .submit{ float: right; margin: 10px 0 0 0; } #vehicules-occasion form#f_demande .submit+p{ clear: right; padding: 5px 0 0 0; } /*-------Acces pro-------*/ /*******************************************************************************************/ #vehicules-occasion .box{ width: 343px; height: 224px; background: #f0f0f0; border: 3px solid #fff; position: relative; margin: 20px 0 0 33px; } #vehicules-occasion .box h3{ width: 266px; height: 68px; position: absolute; top: -33px; left: -33px; text-indent: -5000px; background: url('img/titre-acces-avantages.png') no-repeat left top; } #vehicules-occasion .aside-left{ float: left; padding: 40px 30px 0 30px; } #vehicules-occasion .aside-right{ float: right; padding: 40px 32px 0 32px; /* margin-right: 50px; */ } #vehicules-occasion .avantages p{ line-height: 20px; margin: 0 0 20px 0; } #vehicules-occasion .identification p{ line-height: 20px; margin: 0 0 10px 0; } #vehicules-occasion .identification h3{ background: url('img/titre-acces-identification.png') no-repeat left top; } #vehicules-occasion .identification form .label{ width: 85px; } #vehicules-occasion .identification form p{ margin: 10px 0; } #vehicules-occasion .identification form .submit{ width: 125px; float: right; } #vehicules-occasion .identification form .submit +p{ padding: 10px 0 0 0; text-decoration: underline; clear: right; } #vehicules-occasion form#f_ins_pro{ clear: both; padding: 20px 0 0 30px; } #vehicules-occasion form#f_ins_pro+p{ margin: 0 0 20px 0; } #vehicules-occasion form#f_ins_pro .left-side{ width: 409px; float: left; margin: 0 0 0 0px; } #vehicules-occasion form#f_ins_pro .right-side{ width: 409px; float: right; margin: 0 30px 0 0; } /*Bug IE7*/ .ie7 #vehicules-occasion form#f_ins_pro .left-side{ width: 414px; float: left; } .ie7 #vehicules-occasion form#f_ins_pro .right-side{ width: 414px; float: right; margin: 0 0 0 0; } #vehicules-occasion form#f_ins_pro h4{ font-weight: bold; margin: 50px 0 20px 0; } #vehicules-occasion form#f_ins_pro p{ margin: 10px 0; } #vehicules-occasion form#f_ins_pro .left-side .label{ width: 109px; } #vehicules-occasion form#f_ins_pro .right-side .label{ width: 115px; } #vehicules-occasion form#f_ins_pro .textarea{ width: 244px; height: 41px; } #vehicules-occasion form#f_ins_pro .submit{ float: right; margin: 10px 40px 0 0; width: 97px; padding-left: 20px; } #vehicules-occasion form#f_ins_pro .submit+p{ clear: right; padding: 25px 0 0 0; } /*-------Recherche personnalisée-------*/ /*******************************************************************************************/ form#f_rech_perso{ margin: 20px 0 0 0; } form#f_rech_perso .left-side{ width: 405px; float: left; } form#f_rech_perso .right-side{ width: 405px; float: right; margin: 0 100px 0 0; } /*Bug IE7*/ .ie7 form#f_rech_perso .left-side{ width: 410px; float: left; } .ie7 form#f_rech_perso .right-side{ width: 410px; float: right; margin: 0 100px 0 0; } form#f_rech_perso h4{ font-weight: bold; margin: 0 0 20px 0; } form#f_rech_perso p, form#f_rech_perso div.options{ margin: 10px 0; } form#f_rech_perso .left-side .label{ width: 93px; } form#f_rech_perso .right-side .label{ width: 141px; } form#f_rech_perso .textarea{ width: 244px; height: 41px; } form#f_rech_perso p.conc{ color: #3a3a3a; margin: 45px 0 0 0; } form#f_rech_perso p.conc .label{ width: 320px; margin: 0 0 10px 0; } form#f_rech_perso p.conc .select{ width: 345px; margin: 0; } form#f_rech_perso div.options{} form#f_rech_perso div.options table{ width: 250px; float: right; margin: 0 11px 0 0; } form#f_rech_perso div.options table input{ padding: 0; margin: 0; } form#f_rech_perso p #commentaire{ height: 130px; } form#f_rech_perso .submit{ float: right; margin: 10px 0 0 0; } form#f_rech_perso .submit+p{ clear: right; padding: 15px 0 0 0; } /*-------Rachat véhicule-------*/ /*******************************************************************************************/ #rachat{ width: 920px; margin: 0 auto; } #rachat > p{ margin: 0 0 20px 0; } #rachat form#f_rachat .left-side{ width: 405px; float: left; } #rachat form#f_rachat .right-side{ width: 405px; float: right; margin: 0 100px 0 0; } /*Bug IE7*/ .ie7 #rachat form#f_rachat .left-side{ width: 410px; float: left; } .ie7 #rachat form#f_rachat .right-side{ width: 410px; float: right; margin: 0 100px 0 0; } #rachat form#f_rachat h4{ font-weight: bold; margin: 0 0 20px 0; } #rachat form#f_rachat p{ margin: 10px 0; } #rachat form#f_rachat .left-side .label{ width: 93px; } #rachat form#f_rachat .right-side .label{ width: 141px; } #rachat form#f_rachat .textarea{ width: 244px; height: 41px; } #rachat form#f_rachat p.conc{ color: #3a3a3a; margin: 45px 0 0 0; } #rachat form#f_rachat p.conc .label{ width: 320px; margin: 0 0 10px 0; } #rachat form#f_rachat p.conc .select{ width: 345px; margin: 0; } #rachat form#f_rachat p.mec .label{ margin: 0 0 0 0; } #rachat form#f_rachat p.mec .input{ margin: 5px 0 0 0; } #rachat form#f_rachat p.mec img{ vertical-align: 4px; } #rachat form#f_rachat p #commentaire{ height: 130px; } #rachat form#f_rachat .submit{ float: right; margin: 10px 0 0 0; } #rachat form#f_rachat .submit+p{ clear: right; padding: 25px 0 0 0; } /*******************************************************************************************/ /*== SAV*/ /*******************************************************************************************/ #aside{ /*CSS de base dans la section == NOTRE GROUPE */ } #aside.sav .img{ margin: 0 0 15px 0; } #aside.sav .img img{ border: 3px solid #fff; } #aside.sav .titre-aside{ margin: 40px 0 20px 0; } #aside.sav .prix-bold{ font-size: 13px; color: #ce2e2e; font-weight: bold; } #sav{ float: left; margin: 0 0 0 30px; width: 590px; } #sav h3{ margin: 0 0 20px 0; font-weight: bold; font-size: 13px; } /*-------Nos métiers-------*/ /*******************************************************************************************/ #sav .bloc-sav{ width: 267px; height: auto; min-height: 300px; float: left; margin: 0 0 15px 0; } #sav .bloc-sav.first{ margin: 0 45px 15px 0; } #sav .bloc-sav h3{ width: 267px; height: 49px; background: url('img/bg-sav-box.png') no-repeat left top; line-height: 60px; margin: 0; font-size: 13px; text-align: center; color: #fff; font-weight: bold; } #sav .bloc-sav h3+div{ width: 267px; height: 340px; background: url('img/bg-sav-box-c.png') repeat-y left top; line-height: 20px; padding: 10px 0 10px 0; } #sav .ligne2 .bloc-sav h3+div{ height: 240px; } #sav .bloc-sav h3+div p{ width: 204px; margin: 0 auto; } #sav .bloc-sav h3+div p+p{ margin: 20px auto 0 auto; } #sav .bloc-sav h3+div+div{ width: 267px; height: 8px; background: url('img/bg-sav-box-b.png') no-repeat left top; font-size: 6px; } #sav .infos{ height: 195px; width: 545px; padding: 0 0 5px 0; margin: 0 0 0 20px; } #sav .infos h3{ font-weight: bold; font-size: 13px; width: 320px; margin: 0 0 15px 0; } #sav .infos p{ width: 320px; margin: 15px 0 0 0; } #sav .infos .img{ float: right; } /*-------Nos fiches pratiques-------*/ /*******************************************************************************************/ #sav table{ width: 100%; border: 1px solid #dcdada; } #sav table th{ background: #dcdada; padding: 10px; font-weight: bold; } /* #sav table th:first-child{ width: 340px; } */ #sav table tr{ background: #ffffff; } #sav table tr.even{ background: #f0f0f0; } #sav table td{ padding: 10px; line-height: 20px; font-size: 11px; } #sav table+p{ padding: 10px; font-size: 11px; } #sav .rdv-annuel{ padding: 11px 12px; font-size: 12px; background: #f0f0f0; } #sav .rdv-annuel h4{ color: #ce2e2e; margin: 5px 0 10px 0; font-weight: bold; } #sav .rdv-annuel img{ float: left; margin: 0 20px 0 0; } #sav .rdv-annuel+h3{ margin: 40px 0 20px 0; } #sav .recommendation{ width: 236px; height: 326px; background: url('img/bg-sav-entretien.png') no-repeat left top; float: left; margin: 0 0 15px 0; } #sav .recommendation.even{ margin: 0 50px 15px 0; } #sav .recommendation h4{ color: #ce2e2e; font-weight: bold; font-size: 13px; padding: 26px 0 0 70px; margin: 0 0 42px 0; } #sav .recommendation p{ padding: 0 25px; margin: 25px 0 0 0; font-size: 11px; line-height: 20px; } /*-------Nos tarifs-------*/ /*******************************************************************************************/ #sav .tab-entretien{} /* #sav .tab-entretien th:first-child{ width: 140px; } */ #sav table td span{ font-weight: bold; color: #ce2e2e; } #sav .titre{ margin: 30px 0 20px 0; } /*-------Rendez-vous-------*/ /*******************************************************************************************/ #aside.sav .num_vert{ width: 100px; height: 20px; background: url('img/img-num-vert.png') no-repeat left top; line-height: 22px; padding: 0 0 0 89px; margin: 20px 0 0 0; color: #00a058; font-weight: bold; font-size: 12px; word-spacing: 2px; } #sav ul li{ height: 12px; float: left; text-align: center; padding: 12px 7px; cursor: pointer; } #sav ul li.actif{ background: #f0f0f0; } #sav .sav-contact{ width: 550px; padding: 20px; background: #f0f0f0; display: none; } #sav .sav-contact.actif{ display: block; } #sav .sav-contact .garage{ width: 510px; height: 180px; padding: 20px; background: #ffffff; margin: 0 0 20px 0; } #sav .sav-contact .garage img{ float: right; } #sav .sav-contact .garage p{ margin: 0 0 20px 0; } #sav .sav-contact .garage p.concession{ color: #ce2e2e; } #sav .sav-contact form#f_sav{ width: 530px; } #sav .sav-contact form#f_sav h4{ font-weight: bold; margin: 0 0 20px 0; } #sav .sav-contact form#f_sav p{ margin: 10px 0; } #sav .sav-contact form#f_sav .label{ width: 160px; } #sav .sav-contact form#f_sav .textarea{ width: 410px; height: 138px; } #sav .sav-contact form#f_sav div{ margin: 44px 0; } #sav .sav-contact form#f_sav p.conc{ color: #3a3a3a; margin: 45px 0 0 0; } #sav .sav-contact form#f_sav p.conc .label{ width: 320px; margin: 0 0 10px 0; } #sav .sav-contact form#f_sav p.conc .select{ width: 345px; margin: 0; } #sav .sav-contact form#f_sav p.date{ position: relative; } #sav .sav-contact form#f_sav p.date span{ display: block; position: absolute; top: 0; right: 0; width: 105px; } #sav .sav-contact form#f_sav p.date .label{ margin: 0 0 0 0; } #sav .sav-contact form#f_sav p.date .input{ margin: 0 0 0 0; } #sav .sav-contact form#f_sav p.date img{ vertical-align: 10px; } #sav .sav-contact form#f_sav p.abo_news{ width: 415px; } #sav .sav-contact form#f_sav p.message .label{ width: 300px; margin: 0 0 10px 0; } #sav .sav-contact form#f_sav p.veh_re .label{ width: 300px; margin: 0 0 10px 0; } #sav .sav-contact form#f_sav .submit{ float: right; margin: 10px 100px 0 0; /* font-size: 13px; */ } #sav .sav-contact form#f_sav .submit+p{ clear: right; padding: 25px 0 0 0; } /*******************************************************************************************/ /*== PIECES ET ACCESOIRES*/ /*******************************************************************************************/ #pieces-accessoires{ width: 920px; margin: 0 auto; } #aside .promotion{ width: 170px; height: 120px; border: 3px solid #fff; } #aside .promotion p{ padding: 8px 0 0 10px; font-size: 15px; font-weight: bold; color: #fff; width: 73px; height: 74px; background: url('img/triangle_promo.png') no-repeat left top; } /*-------Listing pneu-------*/ /*******************************************************************************************/ #f_stock{ /*Reprend la plupart des style du listing occasion*/ } #f_stock .col_form1{ width: 310px; margin: 0 45px 0 0; } #f_stock .col_form1 .label{ width: 106px; } #f_stock .col_form1 .submit{ width: 195px; } #f_stock .col_form2{ width: 290px; margin: 0 40px 0 0; } #f_stock .col_form2 img{ float: left; margin: 0 20px 0 0; } #f_stock .col_form2 p{ margin: 0 0 0 0; line-height: 20px; } #f_stock .col_form3{ width: 185px; margin: 0;} .forfait-pose{ width: 181px; height: 104px; background: url('img/bg-forfait-pose.jpg') no-repeat left top; } .forfait-pose p{ padding: 13px 0 0 13px; color: #fff; font-weight: bold; } /*-------Détail pneu-------*/ /*******************************************************************************************/ #pieces-accessoires #fiche{ width: 190px; float: left; margin: 20px 30px 0 0; } #pieces-accessoires #fiche p{ margin: 0 0 15px 0; } #pieces-accessoires #fiche p.img img{ max-width: 190px; max-height: 247px; border: 3px solid #fff; } #pieces-accessoires #fiche .modele{ font-size: 15px; font-weight: bold; } #pieces-accessoires #fiche .modele .prix{ font-size: 20px; font-weight: bold; color: #ce2e2e; } #pieces-accessoires #fiche .modele .strike{ text-decoration: line-through; } #pieces-accessoires #fiche .pose{ margin: 8px 0 0 0; } #pieces-accessoires #fiche .legende{ font-size: 12px; color: #ce2e2e; margin: 35px 0 0 0; } #pieces-accessoires #form-detail{ width: 660px; padding: 20px; background: #f0f0f0; float: right; margin: 20px 0 0 0; } #pieces-accessoires #form-detail h4{ font-size: 13px; font-weight: bold; margin: 0 0 15px 0; } #pieces-accessoires #form-detail p{ margin: 10px 0; } #pieces-accessoires #form-detail .label{ width: 170px; } #pieces-accessoires #form-detail .textarea{ width: 470px; height: 225px; } #pieces-accessoires #form-detail .submit{ float: right; margin: 10px 3px 0 0; } #pieces-accessoires #form-detail .submit+p{ clear: right; padding: 15px 0 0 0; } /*-------Acces pro-------*/ /*******************************************************************************************/ #pieces-accessoires .box{ width: 343px; height: 224px; background: #f0f0f0; border: 3px solid #fff; position: relative; margin: 20px 0 0 30px; } #pieces-accessoires .box h3{ width: 266px; height: 68px; position: absolute; top: -33px; left: -33px; text-indent: -5000px; background: url('img/titre-acces-avantages.png') no-repeat left top; } #pieces-accessoires .aside-left{ float: left; padding: 40px 30px 0 30px; } #pieces-accessoires .aside-right{ float: right; padding: 40px 32px 0 32px; /* margin-right: 50px; */ } #pieces-accessoires .avantages p{ margin: 0 0 15px 0; } #pieces-accessoires .identification p{ margin: 0 0 20px 0; } #pieces-accessoires .identification h3{ background: url('img/titre-acces-identification.png') no-repeat left top; } #pieces-accessoires .identification form .label{ width: 85px; } #pieces-accessoires .identification form p{ margin: 10px 0; } #pieces-accessoires .identification form .submit{ width: 125px; float: right; } #pieces-accessoires .identification form .submit +p{ padding: 10px 0 0 0; text-decoration: underline; clear: right; } #pieces-accessoires form#f_ins_pro{ clear: both; padding: 20px 0 40px 30px; } #pieces-accessoires form#f_ins_pro+p{ margin: 0 0 20px 0; } #pieces-accessoires form#f_ins_pro .left-side{ width: 409px; float: left; margin: 0 0 0 0px; } #pieces-accessoires form#f_ins_pro .right-side{ width: 409px; float: right; margin: 0 30px 0 0; } /*Bug IE7*/ .ie7 #pieces-accessoires form#f_ins_pro .left-side{ width: 414px; float: left; } .ie7 #pieces-accessoires form#f_ins_pro .right-side{ width: 414px; float: right; margin: 0 0 0 0; } #pieces-accessoires form#f_ins_pro h4{ font-weight: bold; margin: 50px 0 20px 0; } #pieces-accessoires form#f_ins_pro p{ margin: 10px 0; } #pieces-accessoires form#f_ins_pro .left-side .label{ width: 109px; } #pieces-accessoires form#f_ins_pro .right-side .label{ width: 115px; } #pieces-accessoires form#f_ins_pro .textarea{ width: 244px; height: 41px; } #pieces-accessoires form#f_ins_pro .submit{ float: right; margin: 10px 40px 0 0; width: 97px; padding-left: 20px; } #pieces-accessoires form#f_ins_pro .submit+p{ clear: right; padding: 25px 0 0 0; } /*-------Espace pro-------*/ /*******************************************************************************************/ #pieces-accessoires .actualites{ height: 405px; width: 353px; padding-right: 20px; } #pieces-accessoires .actualites h3{ background: url('img/titre-espace-pro.png') no-repeat left top; } #pieces-accessoires .actualites div{ margin: 0 0 20px 0; } #pieces-accessoires .actualites div p{ float: left; width: 115px; margin: 0; padding:0; font-size: 11px; line-height: 17px; } #pieces-accessoires .actualites div p img.photo{ max-width: 91px; max-height: 68px; border: 3px solid #fff; } #pieces-accessoires .actualites div p+p{ float: left; width: 230px; margin: 0; } #pieces-accessoires .commande{ height: 405px; width: 353px; padding-right: 20px; } #pieces-accessoires .commande p{ margin: 0 0 10px 0; } #pieces-accessoires .commande h3{ width: 266px; height: 68px; position: absolute; top: -33px; left: -33px; text-indent: -5000px; background: url('img/titre-espace-commande.png') no-repeat left top; } #pieces-accessoires .commande p span.tel{ font-weight: bold; color: #ce2e2e; } #pieces-accessoires .commande form .label{ width: 95px; } #pieces-accessoires .commande form a{ text-decoration: underline; } #pieces-accessoires .commande form p{ margin: 10px 0; } #pieces-accessoires .commande form .priorite{ margin: 5px 0 10px 0 } #pieces-accessoires .commande form .priorite .label{ width: 140px; font-weight: bold; } #pieces-accessoires .commande form .priorite .select{ width: 208px; } #pieces-accessoires .commande form .conc .label{ width: 320px; font-weight: bold; margin: 0 0 5px 0; } #pieces-accessoires .commande form .conc .select{ width: 350px; } #pieces-accessoires .commande form .submit{ width: 125px; float: right; margin: 0 -10px 0 0; } #pieces-accessoires .commande form .submit+p{ clear: right; padding: 0 0 0 0; } #pieces-accessoires .esprit{ width: 822px; height: 405px; margin: 60px 0 0 30px; padding: 40px 30px 0 30px; font-size: 11px; } #pieces-accessoires .esprit h3{ background: url('img/titre-esprit-club.png') no-repeat left top; } #pieces-accessoires .esprit div{ width: 360px; float: left; line-height: 17px; margin: 0 90px 0 0; } #pieces-accessoires .esprit div+div{ margin: 0 0 0 0; } #pieces-accessoires .esprit div+div>img{ margin: 0 0 20px 0; border: 3px solid #fff; } #pieces-accessoires .esprit p{ margin: 0 0 20px 0; } #pieces-accessoires .esprit .button{ display: block; width: 214px; height: 24px; color: #fff; font-weight: bold; font-size: 13px; background: url('img/bt-demande.png'); padding: 8px 0 0 45px; text-align: left; margin: 10px 0;} #pieces-accessoires .esprit .button:hover{ color: #fff !important; } /*-------Nos accessoires-------*/ /*******************************************************************************************/ #aside.accessoires{ } #aside.accessoires .img{ margin: 0 0 15px 0; } #aside.accessoires .titre-aside{ margin: 40px 0 20px 0; } #aside.accessoires .prix-bold{ font-size: 13px; color: #ce2e2e; font-weight: bold; } #pieces-accessoires.listing{ float: left; margin: 0 0 0 30px; width: 590px; } #pieces-accessoires h3{ margin: 0 0 20px 0; font-weight: bold; font-size: 13px; } #pieces-accessoires.listing h3+p{ margin: 0 0 20px 0; line-height: 17px; } #pieces-accessoires ul li{ height: 12px; float: left; text-align: center; padding: 12px 7px; cursor: pointer; } #pieces-accessoires ul li.actif{ background: #f0f0f0; } #pieces-accessoires .accessoires-liste{ width: 550px; padding: 20px; background: #f0f0f0; display: none; } #pieces-accessoires .accessoires-liste.actif{ display: block; } #pieces-accessoires .accessoires-liste .item{ margin: 0 0 20px 0; } #pieces-accessoires .accessoires-liste .item>img{ border: 3px solid #fff; float: left; margin: 0 30px 0 0; } #pieces-accessoires .accessoires-liste .item p{ margin: 0 0 20px 0; } #pieces-accessoires .accessoires-liste .item p.des{ padding-top: 10px; } #pieces-accessoires .accessoires-liste .item p.prix{ } #pieces-accessoires .accessoires-liste .item p.prix strong{ color: #ce2e2e; } #pieces-accessoires .accessoires-bas{ width: 550px; height: 38px; padding: 0 20px 10px 20px; background: url('img/bg-bas-accessoire.png') no-repeat left top; } #pieces-accessoires .formulaire{ width: 510px; padding: 20px; background: #fff; display: none; margin: 0 0 20px 0; } #pieces-accessoires .formulaire h4{ font-weight: bold; margin: 0 0 20px 0; } #pieces-accessoires .formulaire #produit{ font-weight: bold; margin: 20px 0; } #pieces-accessoires .formulaire #produit span{ color: #ce2e2e; } #pieces-accessoires .formulaire form{ width: 415px;} #pieces-accessoires .formulaire form div{ margin: 40px 0; } #pieces-accessoires .formulaire form p{ margin: 10px 0; } #pieces-accessoires .formulaire form .label{ width: 150px; } #pieces-accessoires .formulaire form .conc .label{ width: 300px; font-weight: bold; margin: 0 0 5px 0; } #pieces-accessoires .formulaire form .conc .select{ width: 406px; } #pieces-accessoires .formulaire form .submit{ float: right; margin: 10px 7px 0 0; } #pieces-accessoires .formulaire form .submit+p{ clear: right; padding: 15px 0 0 0; } /*-------Nos pièces-------*/ /*******************************************************************************************/ #pieces-accessoires .eurorepar{ width: 570px; height: 104px; background: #f0f0f0; padding: 10px; margin: 0 0 30px 0; } #pieces-accessoires .eurorepar img{ float: left; margin: 0 20px 0 0; } #pieces-accessoires .eurorepar p{ margin: 6px 0 0 0; } #pieces-accessoires .piece{ width: 546px; height: auto; padding: 12px 22px; background: #f0f0f0; margin: 0 0 13px 0; } #pieces-accessoires #f_piece{ width: 415px; } #pieces-accessoires #f_piece p:first-child{ font-weight: bold; margin: 0 0 20px 0; } #pieces-accessoires #f_piece h4{ font-weight: bold; margin: 0 0 20px 0; } #pieces-accessoires #f_piece .espace{ margin: 40px 0; } #pieces-accessoires #f_piece table{ width: 100%; } #pieces-accessoires #f_piece table th{ font-weight: bold; width: 155px; padding: 5px 0; } #pieces-accessoires #f_piece table td{ vertical-align: top; padding: 5px 0; } #pieces-accessoires #f_piece table td.width1{ width: 106px; } #pieces-accessoires #f_piece table td.width2{ width: 107px; } #pieces-accessoires #f_piece table td.width3{ width: 213px; } #pieces-accessoires #f_piece input[type=checkbox]{ vertical-align: -2px; margin-right: 10px; } #pieces-accessoires #f_piece .textarea{ width: 100%; height: 50px; } #pieces-accessoires #f_piece p{ margin: 10px 0; } #pieces-accessoires #f_piece .label{ width: 150px; } #pieces-accessoires #f_piece .conc .label{ width: 300px; font-weight: bold; margin: 0 0 5px 0; } #pieces-accessoires #f_piece .conc .select{ width: 406px; } #pieces-accessoires #f_piece .submit{ float: right; margin: 10px 7px 0 0; } #pieces-accessoires #f_piece .submit+p{ clear: right; padding: 15px 0 0 0; } /*******************************************************************************************/ /*== ESPACE PRIVILEGES*/ /*******************************************************************************************/ #espace-privileges{ width: 920px; margin: 0 auto; } #espace-privileges > p{ margin: 0 0 20px 0; } /*-------Avantages client-------*/ /*******************************************************************************************/ #espace-privileges .box{ height: 314px; background: #f0f0f0; border: 3px solid #fff; position: relative; margin: 53px 0 0 33px; } #espace-privileges .box h3{ width: 266px; height: 68px; position: absolute; top: -33px; left: -33px; text-indent: -5000px; background: url('img/titre-avantage-parrainage.png') no-repeat left top; } /*width: total - padding left et right*/ #espace-privileges .aside-left{ width: 247px; float: left; padding: 40px 36px 0 36px; } #espace-privileges .aside-right{ width: 351px; float: right; padding: 40px 32px 0 32px; margin-right: 50px; } #espace-privileges .parrainage{} #espace-privileges .parrainage h3+p{ margin: 0 0 20px 0; } #espace-privileges .parrainage p+p+p{ text-align: right; font-size: 11px; margin: 5px 10px 0 0; } #espace-privileges .parrainage img.first{ margin: 0 6px 0 0; } #espace-privileges .parrainage img.last{ margin: 6px 0 0 6px; } #espace-privileges .remise{} #espace-privileges .remise h3{ background: url('img/titre-avantage-remise.png'); } #espace-privileges .remise h3+p{ margin: 0 0 20px 0; } #espace-privileges .remise p+p+p{ text-align: right; font-size: 11px; margin: 5px 0 0 0; } #espace-privileges .evenements{} #espace-privileges .evenements h3{ background: url('img/titre-avantage-evenement.png'); } #espace-privileges .evenements h3+p{ margin: 0 0 20px 0; } #espace-privileges .evenements .slider{ width: 251px; height: 163px; position: relative; } #espace-privileges .evenements .slider img{ position: abolute; top: 0; left: 0; z-index: 3; } #espace-privileges .evenements .caption{ width: 251px; height: 40px; background: #fff; color: #000; margin: 10px auto; text-align: center; } #espace-privileges .evenements .caption p{ padding: 12px 0; /* vertical-align: middle; */ } #espace-privileges .inscrire{} #espace-privileges .inscrire h3{ background: url('img/titre-avantage-inscription.png'); } #espace-privileges .inscrire h3+p+p{ text-align: center; margin: 10px 0 0 0; } #espace-privileges .inscrire a{ display: block; width: 184px; height: 24px; color: #fff; font-weight: bold; font-size: 13px; background: url('img/bt-inscription.png'); padding: 8px 0 0 75px; text-align: left; } #espace-privileges .inscrire a:hover{ color: #fff !important; } #espace-privileges .inscrire h3+p+p+p{ width: 259px; text-align: center; margin: 10px auto; } /*-------Club Dallard-------*/ /*******************************************************************************************/ #espace-privileges #aside { margin: 0; position: relative; } #espace-privileges #aside .button{ display: block; width: 214px; height: 24px; color: #fff; font-weight: bold; font-size: 13px; background: url('img/bt-demande.png'); padding: 8px 0 0 45px; text-align: left; margin: 10px 0;} #espace-privileges #aside .button:hover{ color: #fff !important; } #espace-privileges #aside p.espacement{ padding: 0 0 20px 0; margin: 20px 0; border-bottom: 1px solid #8f8d8d; } #espace-privileges #aside .galerie{ position: relative; width: 260px; height: 158px; } #espace-privileges #aside .galerie img{ position: absolute; top: 0; } #club{ float: left; margin: 0 0 0 30px; width: 590px; } #club h3{ margin: 0 0 20px 0; font-weight: bold; font-size: 13px; } #club .categories{ text-align: center; background: #f0f0f0; padding: 22px 0; font-weight: bold; } #club .categories a.actif{ color: #ce2e2e; } #club .offres{ background: #f0f0f0; margin: 20px 0; padding: 20px; } #club .offres div{ width: 100%; } #club .offres div img{ float: left; } #club .offres div p{ margin: 0 0 20px 100px; } #club .offres div p a{ text-decoration: underline; } #club .offres div p strong span{ color: #ce2e2e; } #club .offres+p{ margin: 0 0 20px 0; } #club .offres+p+p >a { text-decoration: underline; } /*-------Inscription-------*/ /*******************************************************************************************/ #espace-privileges form#f_inscription .left-side{ width: 435px; float: left; /* margin: 0 40px 0 0; */ } #espace-privileges form#f_inscription .left-side div{ width: 435px; margin: 0 0 45px 0; } #espace-privileges form#f_inscription .right-side{ width: 435px; float: right; } #espace-privileges form#f_inscription .right-side div{ width: 435px; margin: 0 0 45px 0; } /*Bug IE7*/ .ie7 #espace-privileges form#f_inscription .left-side{ width: 440px; float: left; /* margin: 0 40px 0 0; */ } .ie7 #espace-privileges form#f_inscription .left-side div{ width: 440px; margin: 0 0 45px 0; } .ie7 #espace-privileges form#f_inscription .right-side{ width: 440px; float: right; } .ie7 #espace-privileges form#f_inscription .right-side div{ width: 440px; margin: 0 0 45px 0; } #espace-privileges form#f_inscription h4{ font-weight: bold; margin: 0 0 20px 0; } #espace-privileges form#f_inscription p{ margin: 10px 0; } #espace-privileges form#f_inscription .label{ width: 180px; } #espace-privileges form#f_inscription .textarea{ width: 244px; height: 41px; } #espace-privileges form#f_inscription p.client{ color: #3a3a3a; } #espace-privileges form#f_inscription p.client input{ display: inline-block; margin: 0 0 0 35px; } #espace-privileges form#f_inscription p.client label{ display: inline-block; width: 28px; margin: 0 0 0 7px; } #espace-privileges form#f_inscription .submit{ float: right; margin: 10px 0 0 0; } #espace-privileges form#f_inscription .submit+p{ clear: right; padding: 25px 0 0 0; } /*-------Parrainage-------*/ /*******************************************************************************************/ #espace-privileges form#f_parrainage{ width: 405px; float: left; } #espace-privileges form#f_parrainage h4{ font-weight: bold; margin: 10px 0 15px 0; } #espace-privileges form#f_parrainage .sstitre{ margin: 40px 0 15px 0; } #espace-privileges form#f_parrainage p{ margin: 10px 0; } #espace-privileges form#f_parrainage .label{ width: 140px; } #espace-privileges form#f_parrainage .textarea{ width: 244px; height: 41px; } #espace-privileges form#f_parrainage .select.cad{ width: 395px; } #espace-privileges form#f_parrainage .submit{ float: right; margin: 10px 5px 0 0; } #espace-privileges form#f_parrainage .submit+p{ clear: right; padding: 25px 0 0 0; } #espace-privileges #cadeaux{ width: 455px; float: right; margin: 13px 0 0 0; } #espace-privileges #cadeaux img{ width: 219px; margin: 0 0 10px 0; } #espace-privileges #cadeaux img:nth-child(even){ margin: 0 0 10px 10px; } /*-------Mot de passe oublié-------*/ /*******************************************************************************************/ #f_oubli{ width: 355px; height: 100px; } /*Bug IE7*/ .ie7 #f_oubli{ width: 360px; } #f_oubli .label{ width: 100px; } #f_oubli .submit{ float: right; margin: 10px 0 0 0; } /*-------Conditions générales-------*/ /*******************************************************************************************/ #conditions{ width: 920px; margin: 0 auto; text-align: justify; } #conditions h3{ font-size: 13px; font-weight: bold; margin: 20px 0; } #conditions h3:first-child{ margin: 0 0 20px 0; } /*-------CSS ADDITIONNELS-------*/ /*******************************************************************************************/ /*============*/ /*TWITTER*/ #custom-tweet-button a { display: block; width: 113px; height: 14px; padding: 2px 5px 2px 20px; margin: 0 10px 0 0; background: url('../images/picto/share-twitter.jpg') no-repeat left top;} #custom-tweet-button a:hover{ background-position: left center; } #custom-tweet-button a:active{ background-position: left bottom; } /*============*/ /*JQUERY TIPSY*/ .tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url('img/tipsy.gif'); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; font-family: arial, verdana, sans-serif; font-size: 10px; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; } /*============*/ /*JQUERY NIVO SLIDER*/ #espace-privileges .nivo-controlNav{ position:absolute; left:50%; bottom:-85px; width: 251px; margin: 0 0 0 -40px; text-align: center; z-index: 3; } #espace-privileges .nivo-controlNav a{ background: url('img/nivo-bullets.png') no-repeat; display:block; width:10px; height:10px; text-indent:-9999px; border:0; margin-right:10px; float:left; } #espace-privileges .nivo-controlNav a.active { background-position:0 -10px; } #espace-privileges .nivo-caption{ position:absolute; left:0px; bottom: -70px; background: none; color:#fff; opacity:1; width:100%; z-index:8; } #ligne-ds .nivo-controlNav{ position:absolute; left:50%; bottom:-105px; width: 251px; margin: 0 0 0 -40px; text-align: center; z-index: 3; } #ligne-ds .nivo-controlNav a{ background: url('img/nivo-bullets.png') no-repeat; display:block; width:10px; height:10px; text-indent:-9999px; border:0; margin-right:10px; float:left; } #ligne-ds .nivo-controlNav a.active { background-position:0 -10px; } #ligne-ds .nivo-caption{ position:absolute; left:0px; bottom: -70px; background: none; color:#fff; opacity:1; width:100%; z-index:8; }