body {
   font-family: Tahoma, Geneva, sans-serif;
    background-color: silver;
}

#quincaillerie header,
#quincaillerie footer
{
    background: #555;
    color: white;
    box-sizing:border-box
}

#quincaillerie header
{
    border-bottom: 2px solid firebrick;  
}
#quincaillerie footer
{
    border-top: 2px solid firebrick; 
}
#accueil a#qkl0ele {background-image: url(../images/briele.jpg);}
#accueil a#qkl0plo {background-image: url(../images/briplo.jpg);}
#accueil a#qkl0fix {background-image: url(../images/brifix.jpg);}
#accueil a#qkl0mac {background-image: url(../images/brimac.jpg);}
#accueil a#qkl0jar {background-image: url(../images/brijar.jpg);}
#accueil a#qkl0mec {background-image: url(../images/brimec.jpg);}
#accueil a#qkl0gaz {background-image: url(../images/bridis.jpg);}
#accueil a#qkl0men {background-image: url(../images/brimen.jpg);}
#accueil a#qkl0pei {background-image: url(../images/bripei.jpg);}
#accueil a#qkl0qui {background-image: url(../images/briqui.jpg);}

#accueil a,section>a{background-size: contain; background-repeat: no-repeat}

#qklele figure img       { background-image: url(../images/qklele.gif);}
#qklplo figure img       { background-image: url(../images/qklplo.gif);}
#qklfix figure img       { background-image: url(../images/qklfix.gif);}
#qklmac figure img       { background-image: url(../images/qklmac.gif);}
#qkljar figure img       { background-image: url(../images/qkljar.gif);}
#qklmec figure img       { background-image: url(../images/qklout.gif);}
#qklpei figure img       { background-image: url(../images/qkldec.gif);}
#qklent figure img       { background-image: url(../images/qklent.gif);}
#qklame figure img       { background-image: url(../images/qklame.gif);}
#qklqui figure img       { background-image: url(../images/qklqui.gif);}
#qklgaz figure img       { background-image: url(../images/qklgaz.gif);}
#qklmen figure img       { background-image: url(../images/qklmen.gif);}



/* les logo doivent faire 140x40 */
.abus            {background-image: url(../images/abus.png);color: transparent;}
.acto            {background-image: url(../images/acto.gif);color: transparent;} /* majuscule importante ! */
.adler           {background-image: url(../images/adler.png);color: transparent;} /* majuscule importante ! */
.antargaz        {background-image: url("../images/antargaz.gif");color: transparent;}
.bosch           {background-image: url(../images/bosch.png);color: transparent;}
.boutte          {background-image: url("../images/boutte.jpg");color: transparent;}
.brosseriethomas {background-image: url(../images/brosserie-thomas.png);color: transparent;}
.butagaz         {background-image: url(../images/butagaz.png);color: transparent;} /* majuscule importante ! */
.capvert         {background-image: url(../images/capvert.png);color: transparent;} /* majuscule importante ! */
.dexter          {background-image: url(../images/dexter.png);color: transparent;}
.dhome           {background-image: url(../images/dhome.png);color: transparent;}
.facom           {background-image: url(../images/facom.png);color: transparent;}
.forgesdemagne   {background-image: url("../images/forges de magne.jpg");color: transparent;}
.fischer         {background-image: url(../images/fischer.png);color: transparent;}
.geb             {background-image: url(../images/geb.png);color: transparent;}
.gerlon          {background-image: url(../images/gerlon.gif);color: transparent;}
.girpi           {background-image: url(../images/girpi.png);color: transparent;}
.gouvy           {background-image: url(../images/gouvy.png);color: transparent;}
.grundfos        {background-image: url(../images/grundfos.png);color: transparent;}
.guillouard      {background-image: url(../images/guillouard.png);color: transparent;}
.hammerlin       {background-image: url(../images/hammerlin.jpg);color: transparent;}
.hager           {background-image: url(../images/hager.png);color: transparent;}
.leparfait       {background-image: url(../images/parfait.png);color: transparent;}
.legrand         {background-image: url(../images/legrand.png);color: transparent;}
.molly           {background-image: url(../images/molly.png);color: transparent;}
.nicoll          {background-image: url(../images/nicoll.png);color: transparent;}
.nogent          {background-image: url(../images/nogent.png);color: transparent;}
.novap           {background-image: url(../images/novap.png);color: transparent;}
.noyonetthiebault{background-image: url("../images/noyon et thiebault.png");color: transparent;}
.onyx            {background-image: url(../images/onyx.gif);color: transparent;}
.pattex          {background-image: url(../images/pattex.png);color: transparent;}
.primagaz        {background-image: url(../images/primagaz.png);color: transparent;} /* PROBLEME */
.renz            {background-image: url(../images/renz.png);color: transparent;}
.ribimex         {background-image: url(../images/ribimex.png);color: transparent;} 
.rozenbal        {background-image: url(../images/rozenbal.png);color: transparent;}
.scid            {background-image: url("../images/scid.png");color: transparent;}
.silverline      {background-image: url("../images/silverline.png");color: transparent;}
.stanley         {background-image: url("../images/stanley.png");color: transparent;}
.starwax         {background-image: url("../images/starwax.png");color: transparent;}
.straussvonderweidt{background-image: url("../images/strauss-vonderweidt.png");color: transparent;}
.virax           {background-image: url("../images/virax.png");color: transparent;}
.vignefreres     {background-image: url("../images/vigne freres.jpg");color: transparent;}
.wurth           {background-image: url(../images/wurth.png);color: transparent;}

.titre#peiout h2:before {content: "Les ";}
.titre#peiout h2:after {content: " du peintre";}

.titre#jarout h2:before {content: "Les ";}
.titre#jarout h2:after {content: " du jardinier";}

.titre#outout h2:before {content: "Les ";}
.titre#outout h2:after {content: " du mécanicien";}

.titre#ploout h2:before {content: "Les ";}
.titre#ploout h2:after {content: " du plombier";}

.titre#eleout h2:before {content: "Les ";}
.titre#eleout h2:after {content: " de l'électricien";}

.titre#mecout h2:before {content: "Les ";}
.titre#mecout h2:after {content: " du mécanicien";}

.titre#menout h2:before {content: "Les ";}
.titre#menout h2:after {content: " du menuisier";}

.titre#macout h2:before {content: "Les ";}
.titre#macout h2:after {content: " du maçon";}