/**************   Classiques   ****************/

/* Body  */
body{
margin:0;
padding:0;
}

body, span, strong, div, p, a, legend, fieldset, td, th, li, h1, h2, h3, h4, h5 { font-family:Verdana, Arial, sans-serif; }
body, span, strong,  div, p, a, legend, fieldset, td, th { font-size : 8pt;}

/* les liens */

span.lien {
color:#8a81ad;
font-weight:bold;
cursor:pointer; cursor:hand;
text-decoration:underline;
}

a, a:link, a:visited{
color:#8a81ad;
font-weight:bold;
}

a:hover{
color:#7d57dd;
}

a.nonBold , a.nonBold:link , a.nonBold:visited, span.nonBold {
font-weight:normal;
}

a.nonUnderline , a.nonUnderline:link , a.nonUnderline:visited, span.nonUnderline {
text-decoration:none;
}

a.couleur2 , a.couleur2:link , a.couleur2:visited {
color:#444;
}

a.couleur2:hover {
color:#75797C;
}

a.couleur3 , a.couleur3:link , a.couleur3:visited {
color:#b00000;
}

a.couleur3:hover {
color:red;
}

#htmlFooter a , #htmlFooter a :link , #htmlFooter a :visited {
font-size: 7pt;
color:#6b6b6b;
}

#htmlFooter a:hover {
color:#000000;
}


/* Blocs  */
div, table, td{
vertical-align:top;
padding:0;
margin:0;
}

img{
padding:0;
margin:0;
border:none;
}

/* Zones de textes */
span, h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
text-align:center;
}

/* Les titres */
h1,h2{
color:black;
margin-bottom:0em;
}

/* Les sous titres*/
h3,h4, h5, h6{
color:#444;
}

form { padding:0px; margin-top:0px; margin-bottom:0px; border:none; }

.formInputOnFocus { background-color:beige; }

.formInputNormal { background-color:white; }

.formInputOnError { background-color:#F98585; }

/***************   Structure Globale **************     */

/* Div global */
.container{
width: 99%;
color:#75797C;
font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:8pt;
padding:0;
}

/* Header  */
#htmlHeader{
width:100%;
}

/* Bande de gauche */
#htmlLeft{
width: 200px;
}

/*Bande de droite */
#htmlRight{
width: 175px;
}

/* Centre*/ 
#tdContenu{
width:100%;
padding:0em 3em 0em 3em;
}

/* Centre quand on est dans innovSite */
#htmlCenterInnovSite{
margin-bottom:3em;
}

/* Centre quand on est en dehors d'innoSite */
#htmlCenter{
}

/* Footer   */
#htmlFooter{
margin-top:0.2em;
padding-top:0.2em;
text-align: center;
border-top:1.2px solid #ddd;
}


/*********************** Structure Footer ***********************/

}
#htmlFooter div{
width:90%;
margin-top:0.3em;
margin-left:auto;
margin-right:auto;
}

/*le copyright*/
.cop{
    text-decoration: none;
    color:#aaa;
}


/***************   Structure Header **************    */

/* debut courbe + logo */
#logo1{
width:0%;
height:75px;
background: url(images/logo1.gif) left top no-repeat;
}

#logo2{
width:200px;
height:25px;
background: url(images/logo2.gif) left top no-repeat;
}

/* Milieu courbe */
#milieuCourbe{
background: #125977 ;
font-size:10pt;
vertical-align:middle;
text-align:center;
color:#ffffff;
font-weight:bold;
}


#bandeauPub{
background: #125977 ;
}

/* Fin courbe */
#finCourbe{
width:46px;
height:32px;
background: url(images/finCourbe.gif) left top no-repeat;
}



/* Boite panier */
#boite_panier{
width:175px;
}

/* Son header */
#headerBoitePanier{
height:24px;
background: url(images/headerBoitePanier.gif) left top no-repeat;
}

/* Son corps */
.corpsBoitePanier{
background: url(images/centerBoitePanier.gif) left top repeat-y;
}

/* Libelles 'Montant' et 'Refs' */
.libelleBoitePanier{
color:#828282;
}

/* Son footer */
#footerBoitePanier{
background: url(images/footerBoitePanier.gif) left top no-repeat;
height:24px;
}

#ligneMenuInnovSite{
height:25px;
background:#e8e8e8;
}

.separateurPetitsMenus{
font-weight:bold;
color:#125977;
}

/*********** Boites Left & Right ************/

/* Boites de gauche et droite      */
.sideBox{
/* on  decolle les boites les unes des autes par le bas pour pas descendre la premiere */
margin-bottom: 1em;
text-align : center;
}

/* Header des boites de gauche et droite   */
.header_sideBox{
height:23px;
text-align:left;
vertical-align:middle;
background-color: #125977;
}

/* Puce des boites de gauche et droite         */
.puce_sideBox{
float:left;
height:23px;
width:12px;
background: url(images/puceGauche.gif) left top no-repeat ; 
}

/* Titre des boites de gauche et droite   */
.titre_sideBox{
padding-top:0.3em;
margin-left:1.5em;
color: #fefefe;
font-weight: bold;
font-size: 9pt;
}


/* Corps des boites de gauche et droite    */
.corps_sideBox{
clear:both;
padding:0.5em 0em 0.5em 0em;
margin-top:0.2em;
background:#fefefe;
border:1px solid #f7f7f7;
}


/* Boites de right_boxes / left_boxes    */
.boite_infos{
margin:0;
padding:0;
text-align : center;
}

/* Titre des boites de right_boxes / left_boxes  */
.titreBoite_infos{
font-weight:bold;
text-align:center;
background: #125977;
color:white;
font-size:9pt;
}

/* Contenu des boites de right_boxes / left_boxes   */
.contenuBoite_infos{
text-align:left;
margin:0;
padding:0.3em;
background: #f7f7f7 ;
color:#125977;
}


.menuBoiteCatalogue{
border:1px solid #125977;
width:225px;
background:white;
}

/* Titre d'un menu a deux etages */
.titreMenuBoiteCatalogue{
padding:0.5em;
border-bottom:1px solid #e6e6e6;
color:#125977;
font-weight:bold;
}

.puceMenuBoiteCatalogue{
background:#f4f4f4;
width:12px;
}

/* Ligne d'un menu a deux etages */
.ligneMenuBoiteCatalogue{
border-bottom:#cecece solid 1px;
border-top:#ffffff solid 2px;
vertical-align:middle;
padding-left:0.5em;
width:100%;
cursor:pointer;
}

#choixRecherche {
  border:1px solid #125977;
  width:200px;
  z-index:5;
  position:absolute;
  background:#fefefe;
  padding:0.3em;
  text-align:left;
}

#choixRecherche a.nonSelectionne {
  height:12px;
  display:block;
  padding:0.5em 0em 0.5em 0em;
  text-align:left;
}

#choixRecherche a.selectionne {
  height:12px;
  display:block;
  padding:0.5em 0em 0.5em 0em;
  text-align:left;
  background:#FFFCCA;
}


/**************   Accueil ****************/

.titreCatalogueTd {
padding:1.5em 0em 0.2em 0em;
border-bottom:2px solid #e0e0e0;
white-space:nowrap;
width:100%;
}

.titreCatalogue {
color:#fdb626;
white-space:nowrap;
font-size:13pt;
}

.sepArticleSelection {
text-align:center;
border-bottom:2px solid #e0e0e0;
line-height:160%;
}

.imgCatalogue {
padding-top:1em;
vertical-align:middle;
width:0px;
text-align:center;
}

/**************   Affichage BreadCrumb ****************/

div.breadCrumb{
text-align:left;
width:95%;
}

a.breadCrumb, a.breadCrumb:link, a.breadCrumb:visited, span.breadCrumb{
color:#444;
}

a.breadCrumb:hover{
color:#75797C;
}


/**************   Affichage BreadCrumb Commande****************/

.separateurEtapeCdePassee , .separateurEtapeCdeCourante , .separateurEtapeCdeNonPassee{
width:30px;
vertical-align:middle;
}

.separateurEtapeCdePassee{
background:url(  images/breadCrumbCdeSeparateur.gif ) center repeat-x;
}

.separateurEtapeCdeCourante{
background:url(  images/breadCrumbCdeFleche.gif ) center repeat-x;
}

.separateurEtapeCdeNonPassee{
background:url(  images/breadCrumbCdeSeparateur2.gif ) center repeat-x;
} 


.boiteEtapeCdePassee , .boiteEtapeCdeCourante , .boiteEtapeCdeNonPassee{
text-align:center;
vertical-align:middle;
font-weight:bold;
height:30px;
width:90px;
}

.boiteEtapeCdePassee{border:1px solid #444;color:#444;}

.boiteEtapeCdeCourante{border:1px solid #125977;color:#125977;}

.boiteEtapeCdeNonPassee{border:1px solid #c0c0c0;color:#c0c0c0;}

#flecheEtapesCde{background:url(  images/breadCrumbCdeFleche.gif ) center no-repeat;width:40px;}


/***************  Affichage de la liste des marques   ****************/

/* Affichage de la liste des marques */
.listeMarques{
text-align:left;
background: #f7f7f7;
width:99%;
margin-top:0.5em;
margin-bottom:0.5em;
}



/***************   Affichage d'un Article  ****************/

/* Tableau global contenant les macros  */
.art_global{
/* pour ie */
width:95%;
}

/* Ligne de macros : En cas de affichage en lignes des macros */
.art_ligne{
}

/* Colonne de macros : En cas de affichage en colonnes des macros */
.art_colonne{}

/* Boites de macro [fiche descriptive, images & videos, tableau prix, ...] */
/* Remarque : petit jeu de mots...loooool */
.art_boite{
padding-left:1em;
padding-right:1em;
}

/* Titre de ces boites */
.art_titreBoite{
padding-bottom:0.2em;
background: url(images/hrTitre.gif) left bottom repeat-x ;
}

/* Idem pour les sous boites */
.art_titreSousBoite{
padding-bottom:0.2em;
background: url(images/hrTitre.gif) left bottom repeat-x ;
text-align:right;
font-weight:bold;
color:#444;
font-size:10pt;
}

/* Texte du titre*/
.art_titreBoiteTxt{
white-space:nowrap;
text-align:left;
}

/* image du titre*/
.art_titreBoiteImg{
width:25px;
}

/* Contenu de ces boites */
.art_contenuBoite{
margin-top:1em;
}

/* Ligne de la fiche article*/
#infosFicheArticle tr{
height:15px;
}

#infosFicheArticle td{
text-align:left;
}

/* Libelle de la fiche descriptive */
.libelleFicheArticle{
font-weight:bold;
color:#444;
white-space:nowrap; 
width:0%;
}

/* Valeur de la fiche descriptive */
.valeurFicheArticle{
padding-left:0.5em;
text-align:left;
}

.separateurFiche{
background:url( images/point.gif ) left repeat-x;
width:40%;
margin:1em 0em 1em 0em;
}

/* Le tableau viewer ( la visionneuse ) */
#tableauViewer{
margin-top:3em;
}

/* Le tableau des videos */
#videos{
margin-top:3em;
background:#fefefe;
}

/* Div de zoom d'une image */
#zoomDiv{
position:absolute;
top:120px;
left:215px;
z-index:5;
border:1px solid #125977;
}
 
/* Colonne du tableau des prix */
#tableauPrix td{
padding:0.2em;
vertical-align:middle;
}

/* Libelle de la fiche descriptive */
.puceFicheArticle{
width:20px;
}

/* Intitule du tableau des prix */
.intituleTableauPrix{
border:1px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
background:#cc8080;
}

/* Bouton ajouter au panier */
table.addPanier{
margin-top:1em;
border:1px solid #125977;
margin-left:auto;
margin-right:auto;
}


/* Tableau prix degressifs et conditionnements par palier */
#tableauPrixDegressifs{
border:1px solid #e6e6e6;
margin-right:auto;
margin-left:auto;
}

/* Cellule du tableau  prix degressifs et conditionnements par palier */
#tableauPrixDegressifs td{
padding:0.4em 1em 0.4em 1em;
vertical-align:middle;
}




/**************   Affichage d'une Categorie  ***************/

/* Tableau global contenant les macros */
.cat_global{
/* pour ie */
width:95%;
}

/* Ligne de macros : En cas de affichage en lignes des macros de categorie */
.cat_ligne{
padding:0.5em;
margin-top:0.5em;
}

/* Colonne de macros : En cas de affichage en colonnes des macros de categorie */
.cat_colonne{}

/* Boites de macro [soldes, top ventes, ...] */
/* Remarque : petit jeu de mots...lol */
.cat_boite{
/* pour moz */
margin-left:3em;
margin-right:3em;
}

/* Titre de ces boites */
.cat_titreBoite{
padding-bottom:0.2em;
background: url(images/hrTitre.gif) left bottom repeat-x ;
}


/* Texte du titre*/
.cat_titreBoiteTxt{
white-space:nowrap;
text-align:left;
font-size:9pt;
font-weight:bold;
color:black;
}

/* image du titre*/
.cat_titreBoiteImg{
width:25px;
}

/* Contenu de ces boites */
.cat_contenuBoite{
margin-top:1em;
}

.ligneMacroPrixCanonsCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroPrixCanonsCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroPrixCanons{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroPrixCanons{
font-weight:bold;
}

.libelleLigneMacroPrixCanons{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroPrixCanons{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroPrixCanonCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroPrixCanonCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroPrixCanon{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroPrixCanon{
font-weight:bold;
}

.libelleLigneMacroPrixCanon{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroPrixCanon{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroNouveautesCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroNouveautesCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroNouveautes{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroNouveautes{
font-weight:bold;
}

.libelleLigneMacroNouveautes{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroNouveautes{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroLeMoinsCherCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroLeMoinsCherCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroLeMoinsCher{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroLeMoinsCher{
font-weight:bold;
}

.libelleLigneMacroLeMoinsCher{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroLeMoinsCher{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroLesMoinsChersCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroLesMoinsChersCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroLesMoinsChers{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroLesMoinsChers{
font-weight:bold;
}

.libelleLigneMacroLesMoinsChers{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroLesMoinsChers{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroLePlusCherCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroLePlusCherCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroLePlusCher{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroLePlusCher{
font-weight:bold;
}

.libelleLigneMacroLePlusCher{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroLePlusCher{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroLesPlusChersCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroLesPlusChersCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroLesPlusChers{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroLesPlusChers{
font-weight:bold;
}

.libelleLigneMacroLesPlusChers{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroLesPlusChers{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroNotreSelectionCouleur1{
height:40px;
background:#f7f7f9;
}

.ligneMacroNotreSelectionCouleur2{
height:40px;
background:#ffffff;
}

.numeroLigneMacroNotreSelection{
color:#f3b429;
font-weight:bold;
vertical-align:middle;
white-space:nowrap;
}

.lienMacroNotreSelection{
font-weight:bold;
}

.libelleLigneMacroNotreSelection{
padding-left:0.5em;
vertical-align:middle;
}

.prixLigneMacroNotreSelection{
padding-left:0.5em;
color:#b00000;
}

.ligneMacroTelechargements{
height:20px;
}

.lienMacroTelechargements{
font-weight:bold;
padding-left:0.5em;
}




/***************   Affichage des resultats de recherche  ****************/

.titreBoiteCR{
background: url(images/degrade1.gif) left top repeat-y ;
color:black;
padding:0.2em;
}

.boiteResultat{
border:2px outset white;
width:90%;
margin-top:0.5em;
}

.titreBoiteResultat{
background: url(images/degrade2.gif) left top repeat-y ;
color:black;
padding:0.2em;
}

/***************   Affichage d'une Liste d'articles  ****************/

/* colonnes de la liste des articles */

.listeArticles table{
text-align:left;
}

.listeArticles td{
vertical-align:middle;
padding:0.2em 0.5em 0.2em 0.5em;
border-bottom:1px solid #fdb626;
}

/* Intitules du tableau =['miniature', 'nom / marque', 'prix',... ] */
.listeArticles th{
height:30px;
padding:0.5em;
color:black;
border-bottom:1px solid #fdb626;
border-top:1px solid #fdb626;
text-align:center;
font-weight:bold;
}

.listeArticlesCouleur2 td{
border-bottom:1px solid #125977;
}

.listeArticlesCouleur2 th{
border-bottom:1px solid #125977;
border-top:1px solid #125977;
}


/***************   Affichage de la comparaison  ****************/

td.comp_colonne {
border-right:1px #125977 solid;
border-left:1px #125977 solid;
width:175px;
text-align:center;
}

td.comp_colonne_top {
border-top:1px #125977 solid;
}

td.comp_colonne_bottom {
border-bottom:1px #125977 solid;
}

/***************   Affichage du panier  ****************/

/* resume */
#resumePanier{
width:99%;
border:1px solid #fdb626;
}

#resumePanier th{
font-weight:bold;
border-bottom:1px solid #fdb626;
text-align:center;
}

/* Titres des blocs de la page panier = ['Votre panier','ajouter article', 'codes promo',..] */
h3.panier{
font-size:13pt;
text-align:left;
width:100%;
font-style:italic;
color:#fdb626;
border-bottom:1px solid #fdb626;
}

/* Quasiment tous les tableaux */
table.panier{
margin-top:3em;
width:100%;
}

.tableauTotaux {
  border:1px solid black;
  float:right;
}

/* Tableaux auxiliaires du panier (code promo, totaux, nouvel article, ...)*/
.intituleTableauAuxiliaire{
  background-color:#fefefe;
  font-weight:bold;
  white-space:nowrap;
  text-align:left;
  padding:3px;
  padding-right:2em;
}

.valueTableauAuxiliaire{
  white-space:nowrap;
  text-align:right;
}



/* Boutons valider, continuer, ... */
.boutonPanier{
color:black;
font-weight:bold;
border-bottom:1px solid #125977;
}

/***************   Mail a un ami ****************/

.libelleMailFriend{
font-weight:bold;
background: #fefefe ;
border:1px solid #f7f7f7;
}

/***************   Actualites  ****************/

.titreCategorieActualitesParCat{
width:90%;
height:15px;
font-weight:bold;
color:darkblue;
border-bottom:1px solid darkblue;
}

.h1TitreCategorieActualites{
font-size:15pt;
text-align:left;
width:80%;
font-style:italic;
color:#fdb626;
border-bottom:1px solid #fdb626;
margin-left:auto;
margin-right:auto;
}

.tableActualite{
width:100%;
margin-top:1em;
margin-bottom:3em;
}

.titreActualite{
font-size:12pt;
margin-bottom:1em;
}

.titreSousActualiteRss
{
padding-top:1em;
font-size:9pt;
font-weight:bold;
}

.dateActualite{
text-align:center;
height:40px;
}

.corpsActualite{
text-align:justify;
}

.imgActualite{
margin-left:1em;
margin-right:1em;
text-align:center;
}



/***************   Login  ****************/

input.searchButton {
cursor:pointer; cursor:hand;
font-size:small;
font-weight:normal;
margin:3px;
padding:1px;
color:black;
border:1px solid black;
background-color:#fefefe;
}

.loginDiv{
width:450px;
padding:0em 1em 0em 1em;
margin-bottom:1em;
margin-left:auto;
margin-right:auto;
}

.tableInscriptionForm{
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:1em;
width:99%;
}

.loginDivTitre{
background: url(images/hrTitre.gif) left bottom repeat-x ;
}

.loginDivTitreTxt{
white-space:nowrap;
text-align:left;
font-size:9pt;
font-weight:bold;
color:black;
}

.loginDivTitreImg{
width:25px;
}

.loginDivContenu{
margin-top:1em;
}

.loginErreur{
color:darkred;
font-weight:bold;
}

.loginConfirmation{
color:darkgreen;
font-weight:bold;
}

.formLabel{
color:#444;
font-weight:bold;
border-bottom:1px solid #fdb626;
vertical-align:middle;
padding-left:0.5em;
}

.formElt{
vertical-align:middle;
color:#444;
text-align:left;
border-bottom:1px solid #e6e6e6;
}

.conseilTitre{
text-align:left;
font-size:10pt;
color:#444;
}

.formPointInterrogationTxt{
font-size:14pt;
font-weight:bold;
cursor:hand;
cursor:pointer;
color:#fdb626;
}

/***************   Confirmation commande  ****************/
.modePaiement{
margin:0em 0.5em 1em 0.5em;
width:100%;
border-bottom:1px solid #e6e6e6;
}

.contenuModePaiement{
width:60%;
padding:0.5em 5em 1em 0em;
}


/***************   Popups  ****************/
.titleBarPopup{
position:absolute;
border:none;
background:#4455aa;
overflow:hidden;
}


.titleTxtPopup{
position:relative;
left:2px;
top:2px;
color:white;
font-weight:bold;
}

.clientAreaPopup{
position:absolute;
border:2px inset #cccccc;
background:white;
overflow:auto;
}


/***************   Chargement  ****************/

span.chargement , strong.chargement{
font-size:10pt;
font-family:Verdana, Arial, sans-serif;
}

/***************   Pour l'impression  ****************/

/* Visible seulement a l'impression */
.justPrint{
display:none;
}


@media print {
  .justPrint { display:block; }
  
  .noPrint { display:none; }
  
  body, span, div, p, a, legend, fieldset, td, th, li, h1, h2, h3, h4, h5 { font-family:Verdana, Arial, sans-serif; }
  body, span, div, p, a, legend, fieldset, td, th { font-size : 9pt;}
  
  img {
    border:none;
  }
    
  #tdContenu{
    padding:0px;
  }
  
  .art_titreBoite, .art_titreSousBoite, .cat_titreBoite, .loginDivTitre{
    border-bottom:2px solid #125977;
  }
  
  #imagesEtVideos{
    width:0%;
  }
  
  .footerPrinted{
    text-align:center;
    width:100%;
    margin-top:5em;
  }
  
  #descriptionArticle {
    text-align:left;
  }
  
  #puceDescriptionArticle {
    vertical-align:top;
    padding-top:0.4em;
  }

}
