Harmonie CSS ( Harmonisation, Reset & Framework )

Cette base CSS permet de débuter facilement touts projets Html en proposant une harmonisation des rendus des balises Html sur les navigateurs, un reset de ses valeurs et de classes prédéfinis pour accélérer votre programmation mise en page.
Vous pouvez observer son rendu et le comparer avec d'autres FrameWorks CSS dans le labo (Rendu CSS).

Mise en place :

Télécharger le fichier compressé ci-dessous.
Décompresser le fichier ZIP.
Ensuite placez le à dans votre site web de préférence avec vos feuilles de style.
Faites y appel dans vos pages.

<link href="harmonieCss.css" rel="stylesheet" type="text/css" media="screen, handheld, tv, projection" /> 

Découvrez le

Téléchargez le

Télécharger le fichier : harmonieCss
Nombre de hits : 1751

Historique des versions

Version -2012.02.A- = Ajout de classes prédéfinies.
Date du : 19-12-2012

  • Ajout de classes prédéfinies (Style mini frameworks CSS).
  • Ajout classes : Box, arrowBox et messageBox.

Version -2012.01.A- (Harmonie CSS) = Harmonisation du rendu affiché des éléments Html pour la plupart des navigateurs.
Date du : 09-12-2012

  • Reset CSS
  • Harmonisation du rendu / navigateur

Version -2012.00.A- (Reset CSS) = Elaboration d'une feuille de style qui remet à zéro les attributs des éléments Html.
Date du : 06-11-2012


A = Pour Alpha, distribution en cours de conception.
B = Pour Beta, distribution en phase de test, en attente de feed-back avant version final.
F = Version Final de la distribution.

Une petite démo en utilisant les classes prédéfinies :

Exemple sur un Formulaire

Contact Général
Facturation
Webmaster

    <form class="magrin1 padding0-5 width200px boxSuccess center textCenter textWhite">
        <fieldset class="borderGray5 backgroundSlime">
            <legend class="baxShadow borderGreen5 textWhite backgroundSlime">Contact</legend>
            <label for="email">Email :</label>
                <input type="email" id="email" name="email" required>
            
            <label for="objet">Objet :</label>
                <input type="text" id="objet" name="objet" required autocomplete="off">
            
            <label for="civilite">Civilité :</label>
                <select id="civilite" name="civilite">
                    <option value="mr">Monsieur</option>
                    <option value="mme">Madame</option>
                    <option value="melle">Mademoiselle</option>
                </select>
            
            <label for="destinataire">Destinataire(s) :</label>
                <input type="checkbox" name="destinataire" value="general">Général<br>
                <input type="checkbox" name="destinataire" value="facturation">Facturation<br>
                <input type="checkbox" name="destinataire" value="webmaster">Webmaster<br>
            
            <label for="contenu">Message :</label>
                <textarea name="contenu" required autofocus></textarea>
            <br>
            <input type="submit">
        </fieldset>
    </form>                    
                

Les classes prédéfinies

Hack IE

En incluant ces tests conditionnelles vous pourrai définir aisément un style à appliquer pour IE.

        <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->
        <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->
        <!--[if IE 8 ]><body class="ie8"><![endif]-->
        <!--[if !IE]><body><![endif]-->
    

Display

block = défini l'élément comme étant un block.
inlineBlock = défini l'élément comme étant un block en ligne.
inline = défini l'élément comme étant en ligne. Ex.: la balise strong.

Les flottants

clearFloat = arrêt des flottants précédents.
floatLeft = flottant à gauche.
floatRight = flottant à droite.

Tailles des blocks

En utilisant comme début de nom de classe width ou height suivi de sa taille soit de px (pixel) ou pc (pourcent) uniquement pour la largeur.
Les tailles en % pour la largeur (width) sont : 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100.
Les tailles en pixel pour la largeur (width) sont : 40, 50, 60, 88, 100, 120, 125, 150, 200, 234, 300, 400, 468, 500, 600, 700, 728, 800, 900, 960, 980.
Les tailles en pixel pour la hauteur (height) sont : 31, 40, 50, 60, 90, 100, 125, 150, 200, 240, 250, 300, 400, 500.

Détails des largeurs et hauteurs en pixels :
Comme on peut le constater il y a certaines valeurs qui paraissent anormales, celle-ci servent aux bannières.

  • 728 x 90 pixels
  • 468 x 60 pixels
  • 234 x 60 pixels
  • 125 x 125 pixels
  • 120 x 90 pixels
  • 120 x 60 pixels
  • 88 x 31 pixels
  • 120 x 240 pixels
  • 300 x 250 pixels

Les marges internes et externes

Les marges sont exprimées en "em" :

  • margin0
  • margin0-5
  • margin1
  • margin1-5
  • margin2
  • margin2-5
  • margin3

se décline pour :
margin, marginTop, marginRight, marginBottom, marginLeft.
padding, paddingTop, paddingRight, paddingBottom, paddingLeft.

Alignement

center = centrage d'un block si une taille est déterminé.
textCenter = Centre le texte dans son bloc.
textRight = Aligne le texte à droite dans son bloc.
textLeft = Aligne le texte à gauche dans son bloc.
textJustify = Justify le text sur la largeur de son bloc.

Retrait

textIndent1, 1-5, 2, 2-5 et 3 donne un retrait exprimé en "em" à votre texte.

Taille du texte

La taille est exprimée en "em" :
(0-5 vaut 0.5em)

  • size0-5
  • size0-6
  • size0-7
  • size0-8
  • size0-9
  • size1-1
  • size1-2
  • size1-3
  • size1-4
  • size1-5

Les couleurs sur le texte

textRed1 textRed2 textRed3 textRed4
textGreen1 textGreen2 textGreen3 textGreen4 textGreen5
textBlue1 textBlue2 textBlue3 textBlue4 textBlue5
textWhite textBlack
textGrey1 textGrey2 textGrey3 textGrey4 textGrey5 textGrey6 textGrey7 textGrey8 textGrey9
textSilver textMagnolia
textYellow textOrange textFlux textGold textPink textSlime textInfo textError textWarning textSuccess

Les couleurs de fond

backgroundRed1
backgroundRed2
backgroundRed3
backgroundRed4

backgroundGreen1
backgroundGreen2
backgroundGreen3
backgroundGreen4
backgroundGreen5

backgroundBlue1
backgroundBlue2
backgroundBlue3
backgroundBlue4
backgroundBlue5

backgroundWhite
backgroundBlack

backgroundGrey1
backgroundGrey2
backgroundGrey3
backgroundGrey4
backgroundGrey5
backgroundGrey6
backgroundGrey7
backgroundGrey8
backgroundGrey9

backgroundSilver
backgroundMagnolia

backgroundYellow
backgroundOrange
backgroundFlux
backgroundGold
backgroundPink
backgroundSlime
backgroundInfo
backgroundError
backgroundWarning
backgroundSuccess

Les puces

puceNone = pas de puce devant les listes.
puceSquare = puce de forme carré.

Les bordures

Couleurs

Le jeu de couleur est disponible avec la classe : borderYellow et reprend les même couleurs que pour le texte et le background.

Taille de la bordure

La taille de la bordure avec border1 ou 2, 3 et 5 ou en précisant un côté comme borderLeft3 = une bordure solide de 3 pixel sur le côté gauche.
( border, borderTop, borderLeft, borderBottom et borderBotom )

borderRadius et consoeurs :

  • borderRadius3
  • borderRadius5
  • borderRadius6
  • borderRadius7
  • borderRadius8
  • borderRadius9
  • borderRadius10
  • borderRadius15
  • borderRadius20
  • borderRadius25

Se décline également en borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomLeft et borderRadiusBottomRight.

Exemples :

Une bordure rose :
Classes : border1 = epaisseur (1,2,3 ou 5) borderPink = sa couleur

<span class="border1 borderPink">textes</span>

Une bordure de droite épaisseur 5px, couleur verte :
borderRight5 borderSlime

<span class="borderRight5 borderSlime">borderRight5 borderSlime</span>

Un exemple d'une boite
avec :
margin2
padding2
backgroundGrey8
border2
borderGrey3
borderRadiusTopLeft20
borderRadiusBottomRight5
boxShadow

<div class="backgroundGrey8 borderRadiusTopLeft20 borderRadiusBottomRight5 border2 borderGrey3 margin2 padding2 boxShadow">
</div>


Blocs utilisateur (Messages Box)

Message : validation
Message : success
Message : warning
Message : error
Message : info

Boites fléchées (Arrow)

arrowTopInfo
arrowRightInfo
arrowBottomInfo
arrowLeftInfo
arrowTopSuccess
arrowRightSuccess
arrowBottomSuccess
arrowLeftSuccess
arrowTopWarning
arrowRightWarning
arrowBottomWarning
arrowLeftWarning
arrowTopError
arrowRightError
arrowBottomError
arrowLeftError

Boites (box)

boxInfo
boxSuccess
boxWarning
boxError

Divers

  • boxShadow = Une ombre de 5px en gris autour du bloc.
  • opaqueWhite = Mets le fond en blanc légèrement transparent.
  • opaqueBlack = Mets le fond en noir légèrement transparent.

Voici le code source complet du fichier CSS.
Nombre de release au 9/12/2012 : 3.
Dernière version : 2012.02.alpha.

/*
    Title   : Harmonie Css
    Auteur  : Demaire Laurent
    Version : 2012.02.A
    License : Aucune - Libre de tous droits
    Contact : http://www.lesite.eu
    Suivi   : Web -> http://# - Tweeter -> @chezlaurent
*/

/* Reset général des éléments */
html,body,div,span,iframe
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,
h1,h2,h3,h4,h5,h6,p,
a,abbr,del,ins,dfn,kbd,mark,samp
b,i,em,strong,bdo,sub,sup,var,code,
img,
table,caption,tbody,tbody,thead,tfoot,tr,th,td,
dl,dt,dd,ol,ul,li,
form,fieldset,label,legend,
address,blockquote,cite,code,details,pre
summary,time,
audio,canvas,embed,objet,output,source,video
{
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    font-size:100%;
    -webkit-text-size-adjust: 100%; /* POUR */
    -ms-text-size-adjust: 100%;  /* POUR */
    font:inherit; /* Donne le style du bloc parent si pas il sera en normal */
    vertical-align:baseline; /* Valeur par défaut centre au bas de l'élément */
    outline:0; /* Pas pris en charge par IE6-7 / Donne à 0 l'épaisseur supérieur au border */
}

/* ATTENTION CES BALISES NE SONT PLUS RECONNUS EN HTML5
acronym, applet, big, center, u, s, small, strike
{
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    font-size:100%;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;  
    font:inherit; 
    vertical-align:baseline; 
    outline:0; 
}
*/

/* Elément HTML5 - Attribution de l'attribut "display" pour les navigateurs ne prenant pas en charge HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
    display:block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
/************************************************************************************************/
/* Mise en forme par défaut des éléments afin d'harmoniser le rendu en fonction des navigateurs */
/************************************************************************************************/
html
{
    font-size:62.5%; /* Equivaut a une hauteur de 10px de base, utile à l'heritage */
}
html, div, dl, dt, fieldset, form, frame, frameset, map, noframes, p, ol
{
    display:block;
}
body
{
    color:#333;
    /*background:#FFF;*/
    font-family: "Century Gothic", "Helvetica Neue",helvetica, arial, sans-serif;
    line-height:1.5;
}
head, script, title, meta, link, style, [hidden], base
{
    display:none;
}
/* Définitons des attributs des balises Titre */
h1, h2, h3, h4, h5, h6
{
    display:block;
    margin: 10px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    text-rendering: optimizelegibility;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child
{
    margin-top: 0; /* Suppression des fusions de marges */
}
h1 {font-size:300%;}
h2 {font-size:260%;}
h3 {font-size:220%;}
h4 {font-size:180%;}
h5 {font-size:140%;}
h6 {font-size:120%;}
/* Taille des élèments par défaut */
p, li, dt, dd, td, th, caption, legend, pre, summary, textarea {font-size: 1.4em;}
li li, li p, td p, th p, li h1, li h2, li h3, li h4, li h5, li h6, button, code, input, select  {font-size: 100%;}
/* Attributs sur les balises HTML */
a
{
    color:#08C;
    text-decoration:none;
}
a:hover
{
  color: #005580;
  text-decoration: underline;
}
a img, img
{
    border:0; /* Eviter liens bordures bleu lors des liens */
}
:active, :focus, :hover
{
    outline: 0; /* Retire les pointillés des éléments */
}
/*:link, :visited
{
    text-decoration:underline;
}*/
ins, u
{
    text-decoration:underline;
}
abbr[title], acronym[title]
{
    border-bottom: 1px dotted;
}
button, label
{
    vertical-align:middle;
}
code, kbd, samp, tt
{
    max-width:100%;
    height:auto;
    font-family:courrier,monospace;
    font-size:0.8125em;
    white-space:pre; /* Interpretation des espaces blancs tel que tapé */
}
address
{
    display:block;
    font-style:italic;
}
b, strong
{
    font-weight:bolder;
}
/* Plus reconnu en html5
big
{
    font-size:120%;
}
*/
blockquote
{
    display:block;
    max-width:100%;
    height:auto;
    margin-left:40px;
    margin-right:40px;
    quotes:none;
    border:none;
    font-size:1.2em;
}
blockquote:after, blockquote:before, q:after, q:before /* Pas compatible <IE8 */
{
    content:'';
    content:none;
}
caption
{
    display:table-caption; 
    text-align:center;
}
/* Plus reconnu en html 5
center
{
    display:block;
    text-align:center;
}
*/
cite, i, em, var, dfn
{
    font-style:italic;
}
col
{
    display:table-column; 
    border-color:#F0F0F0;
}
colgroup
{
    display:table-column-group; 
    border-color:#F0F0F0;
}
dd
{
    display:block;
    margin-left:40px;
}
dt
{
    font-weight:bold;
}
del
{
    text-decoration:line-through;
}
/* Plus reconnu en html 5
s, strike
{
    text-decoration:line-through;
}
*/
dir
{
   display:block;
   margin:0;
   margin-left:40px;
}
embed, objet, video
{
    max-width:100%;
    height:auto;
}
hr
{
    display:block;
    border:0;
    border-bottom:1px solid #AAA;
    text-align:center;
}
img
{
    width: auto;
    vertical-align: middle;
}

li
{
    display:list-item;
}
html5\:mark, mark
{
    background-color: yellow;
    color: black;
}
nav ul, nav ol, ol, ul
{
    padding-left:2em;
}

p
{
    /*margin: 0 0 1.5em 1.5em;*/
}
p:last-child
{
    margin-bottom: 0; /* Supprime le marge du bas des derniers paragraphes */
}
pre
{
    display:block;
    max-width:100%;
    padding:1em;
    height:auto;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
            border-radius: 7px;
    font-family: "Courier New", monospace;
    background-color: #f5f5f5;
    border: 1px solid #e1e1e8;
}
code
{
    max-width:100%;
    height:auto;
    font-family: "Courier New", monospace;
      -webkit-border-radius: 7px;
         -moz-border-radius: 7px;
              border-radius: 7px;
    background-color: #f5f5f5;
    border: 1px solid #e1e1e8;
    font-size:1.3em;
}
pre code
{
    border:none;
    background:none;
    font-size:0.8em;
}
q
{
    quotes:none;
}

/* Plus reconnu en html5
small
{
    font-size: 75%;
}
*/
sub,sup
{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup
{
    top: -0.5em;
}
sub
{
    bottom: -0.25em;
}


/**********************************/
/*   Mise en form des tableaux    */

table
{
    display:table;
    max-width:100%;
    height:auto;
    border-collapse:collapse;
    border-color:#F0F0F0;
    border-spacing:2px;
}
tbody
{
    display:table-footer-group;
    vertical-align: middle;
}
td
{
    display:table-cell;
    max-width:100%;
    height:auto;
    vertical-align: middle;
    text-align:left;
    padding:0 0.3em 0 0.3em;
}
th
{
    display:table-cell;
    font-weight:bolder;
    text-align:center;
    vertical-align: middle;
}
thead
{
    display:table-header-group;
    vertical-align: middle;
}
tr
{
    display:table-row;
    vertical-align: middle;
}


/**********************************/
/*  Mise en form des formulaires  */

form { margin: 0 0 20px;}
fieldset
{
    margin:0.5em;
    padding:0.5em;
    border:1px solid #AAA;
      -webkit-border-radius: 7px;
         -moz-border-radius: 7px;
              border-radius: 7px;
}
label
{
    display: block;
    margin-bottom: 0.5em;
}
legend
{
    display: block;
    width: 100%;
    margin-bottom: 1.5em;
    text-indent:1em;
    line-height: 2em;
    font-size:1em;
    color: #333;
    border: 1px solid #AAA;
      -webkit-border-radius: 7px;
         -moz-border-radius: 7px;
              border-radius: 7px;
}
label, input, button, select, textarea
{
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}
input, button, select, textarea
{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#666;
    padding:0.4em;
}
input, textarea, select
{
    max-width:100%;
    height:auto;
    border:1px solid #AAA;
}
input, select
{
    vertical-align:middle;
}
optgroup
{
    font-style:italic;
    font-weight:bold;
}
option
{
    font-style:normal;
    font-weight:normal;
}
select
{
    min-width: 11em;
}
textarea
{
    white-space: pre-wrap;
}

/*************************/
/*  Fix Old Navigateurs  */

/* Permet de rendre les image png transparente sous IE6 */
* html img,
* html .png
{
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

/* Gestion du positionnement inline-block sous IE6 et IE7
  Pour cela il faut utiliser des classes conditionnelles dans votre le fichier HTML
  Exemple :
    <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->
    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->
    <!--[if IE 8 ]><body class="ie8"><![endif]-->
    <!--[if !IE]><!--><body><!--<![endif]-->
*/
.ie6, .ie7
{
    display: inline;
    zoom: 1;
}
.ie8 img
{
    width: auto; /* fix IE8 */
}

/***************************/
/* Les classes prédéfinies */

/* reset */
.reset          { clear:both; margin:0; padding:0; background:transparent; border:0; font-size:100%; }

/* display */
.block          { display: block; }
.inlineBlock    { display: inline-block; }
.inline         { display: inline; }

/* Les flottants */
.clearFloat     {clear:both;}
.floatLeft      {float:left;}
.floatRight     {float:right;}

/* Largeur et hauteur des blocks en pourcent ou en pixel */
.width5pc       { width: 5%; }
.width10pc      { width: 10%; }
.width20pc      { width: 20%; }
.width25pc      { width: 25%; }
.width30pc      { width: 30%; }
.width33pc      { width: 33.333%; }
.width40pc      { width: 40%; }
.width50pc      { width: 50%; }
.width60pc      { width: 60%; }
.width66pc      { width: 66.666%; }
.width70pc      { width: 70%; }
.width75pc      { width: 75%; }
.width80pc      { width: 80%; }
.width90pc      { width: 90%; }
.width100pc     { width: 100%; }

.width40px      { width: 40px; }
.width50px      { width: 50px; }
.width50px      { width: 60px; }
.width88px      { width: 88px; }
.width100px     { width: 100px; }
.width120px     { width: 120px; }
.width125px     { width: 125px; }
.width150px     { width: 150px; }
.width200px     { width: 200px; }
.width234px     { width: 234px; }
.width300px     { width: 300px; }
.width400px     { width: 400px; }
.width468px     { width: 468px; }
.width500px     { width: 500px; }
.width600px     { width: 600px; }
.width700px     { width: 700px; }
.width728px     { width: 728px; }
.width800px     { width: 800px; }
.width960px     { width: 960px; }
.width980px     { width: 980px; }

.height31px      { height: 31px; }
.height40px      { height: 40px; }
.height50px      { height: 50px; }
.height60px      { height: 60px; }
.height90px      { height: 90px; }
.height100px     { height: 100px; }
.height125px     { height: 125px; }
.height150px     { height: 150px; }
.height200px     { height: 200px; }
.height240px     { height: 240px; }
.height250px     { height: 250px; }
.height300px     { height: 300px; }
.height400px     { height: 400px; }
.height500px     { height: 500px; }

/* Les marges externes */
.margin0        { margin: 0; }
.margin0-5      { margin: 0.5em; }
.margin1        { margin: 1em; }
.margin1-5      { margin: 1.5em; }
.margin2        { margin: 2em; }
.margin2-5      { margin: 2.5em; }
.margin3        { margin: 3em; }

.marginTop0     { margin-top: 0; }
.marginTop0-5   { margin-top: 0.5em; }
.marginTop1     { margin-top: 1em; }
.marginTop1-5   { margin-top: 1.5em; }
.marginTop2     { margin-top: 2em; }
.marginTop2-5   { margin-top: 2.5em; }
.marginTop3     { margin-top: 3em; }

.marginRight0   { margin-right: 0; }
.marginRight0-5 { margin-right: 0.5em; }
.marginRight1   { margin-right: 1em; }
.marginRight1-5 { margin-right: 1.5em; }
.marginRight2   { margin-right: 2em; }
.marginRight2-5 { margin-right: 2.5em; }
.marginRight3   { margin-right: 3em; }

.marginBottom0   { margin-bottom: 0; }
.marginBottom0-5 { margin-bottom: 0.5em; }
.marginBottom1   { margin-bottom: 1em; }
.marginBottom1-5 { margin-bottom: 1.5em; }
.marginBottom2   { margin-bottom: 2em; }
.marginBottom2-5 { margin-bottom: 2.5em; }
.marginBottom3   { margin-bottom: 3em; }

.marginLeft0     { margin-left: 0; }
.marginLeft0-5   { margin-left: 0.5em; }
.marginLeft1     { margin-left: 1em; }
.marginLeft1-5   { margin-left: 1.5em; }
.marginLeft2     { margin-left: 2em; }
.marginLeft2-5   { margin-left: 2.5em; }
.marginLeft3     { margin-left: 3em; }

/* Les marges internes */
.padding0        { padding: 0; }
.padding0-5      { padding: 0.5em; }
.padding1        { padding: 1em; }
.padding1-5      { padding: 1.5em; }
.padding2        { padding: 2em; }
.padding2-5      { padding: 2.5em; }
.padding3        { padding: 3em; }

.paddingTop0     { padding-top: 0; }
.paddingTop0-5   { padding-top: 0.5em; }
.paddingTop1     { padding-top: 1em; }
.paddingTop1-5   { padding-top: 1.5em; }
.paddingTop2     { padding-top: 2em; }
.paddingTop2-5   { padding-top: 2.5em; }
.paddingTop3     { padding-top: 3em; }

.paddingRight0   { padding-right: 0; }
.paddingRight0-5 { padding-right: 0.5em; }
.paddingRight1   { padding-right: 1em; }
.paddingRight1-5 { padding-right: 1.5em; }
.paddingRight2   { padding-right: 2em; }
.paddingRight2-5 { padding-right: 2.5em; }
.paddingRight3   { padding-right: 3em; }

.paddingBottom0   { padding-bottom: 0; }
.paddingBottom0-5 { padding-bottom: 0.5em; }
.paddingBottom1   { padding-bottom: 1em; }
.paddingBottom1-5 { padding-bottom: 1.5em; }
.paddingBottom2   { padding-bottom: 2em; }
.paddingBottom2-5 { padding-bottom: 2.5em; }
.paddingBottom3   { padding-bottom: 3em; }

.paddingLeft0     { padding-left: 0; }
.paddingLeft0-5   { padding-left: 0.5em; }
.paddingLeft1     { padding-left: 1em; }
.paddingLeft1-5   { padding-left: 1.5em; }
.paddingLeft2     { padding-left: 2em; }
.paddingLeft2-5   { padding-left: 2.5em; }
.paddingLeft3     { padding-left: 3em; }

/* Alignement du texte et block */

.center      { margin: auto; }
.textLeft    { text-align: left; }
.textRight   { text-align: right; }
.textCenter  { text-align: center; }
.textJustify { text-align: justify; }

/* Grandeur du texte */

.size0-5    { font-size: 0.5em; }
.size0-6    { font-size: 0.6em; }
.size0-7    { font-size: 0.7em; }
.size0-8    { font-size: 0.8em; }
.size0-9    { font-size: 0.9em; }
.size1-1    { font-size: 1.1em; }
.size1-2    { font-size: 1.2em; }
.size1-3    { font-size: 1.3em; }
.size1-4    { font-size: 1.4em; }
.size1-5    { font-size: 1.5em; }

/* Les puces */

.puceNone   { list-style: none; }
.puceSquare { list-style: square; }

/* Les bordures */
      
.borderTop1      { border-top: 1px solid; }
.borderTop2      { border-top: 2px solid; }
.borderTop3      { border-top: 3px solid; }
.borderTop5      { border-top: 5px solid; }

.borderRight1    { border-right: 1px solid; }
.borderRight2    { border-right: 2px solid; }
.borderRight3    { border-right: 3px solid; }
.borderRight5    { border-right: 5px solid; }

.borderBottom1   { border-bottom: 1px solid; }
.borderBottom2   { border-bottom: 2px solid; }
.borderBottom3   { border-bottom: 3px solid; }
.borderBottom5   { border-bottom: 5px solid; }

.borderLeft1     { border-left: 1px solid; }
.borderLeft2     { border-left: 2px solid; }
.borderLeft3     { border-left: 3px solid; }
.borderLeft5     { border-left: 5px solid; }

.border1        { border: 1px solid; }
.border2        { border: 2px solid; }
.border3        { border: 3px solid; }
.border5        { border: 5px solid; }

.borderRadius3    { border-radius: 3px; }
.borderRadius5    { border-radius: 5px; }
.borderRadius6    { border-radius: 6px; }
.borderRadius7    { border-radius: 7px; }
.borderRadius8    { border-radius: 8px; }
.borderRadius9    { border-radius: 9px; }
.borderRadius10   { border-radius: 10px; }
.borderRadius15   { border-radius: 15px; }
.borderRadius20   { border-radius: 20px; }
.borderRadius25   { border-radius: 25px; }

.borderRadiusTopLeft3    { border-top-left-radius: 3px; }
.borderRadiusTopLeft5    { border-top-left-radius: 5px; }
.borderRadiusTopLeft6    { border-top-left-radius: 6px; }
.borderRadiusTopLeft7    { border-top-left-radius: 7px; }
.borderRadiusTopLeft8    { border-top-left-radius: 8px; }
.borderRadiusTopLeft9    { border-top-left-radius: 9px; }
.borderRadiusTopLeft10   { border-top-left-radius: 10px; }
.borderRadiusTopLeft15   { border-top-left-radius: 15px; }
.borderRadiusTopLeft20   { border-top-left-radius: 20px; }
.borderRadiusTopLeft25   { border-top-left-radius: 25px; }

.borderRadiusTopRight3    { border-top-right-radius: 3px; }
.borderRadiusTopRight5    { border-top-right-radius: 5px; }
.borderRadiusTopRight6    { border-top-right-radius: 6px; }
.borderRadiusTopRight7    { border-top-right-radius: 7px; }
.borderRadiusTopRight8    { border-top-right-radius: 8px; }
.borderRadiusTopRight9    { border-top-right-radius: 9px; }
.borderRadiusTopRight10   { border-top-right-radius: 10px; }
.borderRadiusTopRight15   { border-top-right-radius: 15px; }
.borderRadiusTopRight20   { border-top-right-radius: 20px; }
.borderRadiusTopRight25   { border-top-right-radius: 25px; }

.borderRadiusBottomLeft3    { border-bottom-left-radius: 3px; }
.borderRadiusBottomLeft5    { border-bottom-left-radius: 5px; }
.borderRadiusBottomLeft6    { border-bottom-left-radius: 6px; }
.borderRadiusBottomLeft7    { border-bottom-left-radius: 7px; }
.borderRadiusBottomLeft8    { border-bottom-left-radius: 8px; }
.borderRadiusBottomLeft9    { border-bottom-left-radius: 9px; }
.borderRadiusBottomLeft10   { border-bottom-left-radius: 10px; }
.borderRadiusBottomLeft15   { border-bottom-left-radius: 15px; }
.borderRadiusBottomLeft20   { border-bottom-left-radius: 20px; }
.borderRadiusBottomLeft25   { border-bottom-left-radius: 25px; }

.borderRadiusBottomRight3    { border-bottom-right-radius: 3px; }
.borderRadiusBottomRight5    { border-bottom-right-radius: 5px; }
.borderRadiusBottomRight6    { border-bottom-right-radius: 6px; }
.borderRadiusBottomRight7    { border-bottom-right-radius: 7px; }
.borderRadiusBottomRight8    { border-bottom-right-radius: 8px; }
.borderRadiusBottomRight9    { border-bottom-right-radius: 9px; }
.borderRadiusBottomRight10   { border-bottom-right-radius: 10px; }
.borderRadiusBottomRight15   { border-bottom-right-radius: 15px; }
.borderRadiusBottomRight20   { border-bottom-right-radius: 20px; }
.borderRadiusBottomRight25   { border-bottom-right-radius: 25px; }

/* Couleur de la bordure */

.borderRed1      { border-color: #a0191e; }
.borderRed2      { border-color: #c10000; }
.borderRed3      { border-color: #c6002b; }
.borderRed4      { border-color: #FF0000; }

.borderGreen1    { border-color: #005e20; }
.borderGreen2    { border-color: #007e00; }
.borderGreen3    { border-color: #5f7900; }
.borderGreen4    { border-color: #57b05a; }
.borderGreen5    { border-color: #c2eb74; }

.borderBlue1     { border-color: #2f3958; }
.borderBlue2     { border-color: #265390; }
.borderBlue3     { border-color: #0067a0; }
.borderBlue4     { border-color: #2e7dec; }
.borderBlue5     { border-color: #b5cdff; }

.borderWhite     { border-color: #fff; }
.borderBlack     { border-color: #000; }

.borderGrey1     { border-color: #282b2e; }
.borderGrey2     { border-color: #343434; }
.borderGrey3     { border-color: #434343; }
.borderGrey4     { border-color: #4c4c4f; }
.borderGrey5     { border-color: #666; }
.borderGrey6     { border-color: #888; }
.borderGrey7     { border-color: #aaa; }
.borderGrey8     { border-color: #ccc; }
.borderGrey9     { border-color: #eee; }

.borderSilver    { border-color: #e9e9e9; }
.borderMagnolia  { border-color: #f7f5e8; }

.borderYellow    { border-color: #ffff6f; }
.borderOrange    { border-color: #c74100; }
.borderFlux      { border-color: #ff5e00; }
.borderGold      { border-color: #bb8800; }
.borderPink      { border-color: #ff0070; }
.borderSlime     { border-color: #adc61a; }

/* Effets des boites */

.boxShadow      { box-shadow:0 0 5px #666; }
.opaqueWhite    { background:rgba(255,255,255,.7); }
.opaqueBlack    { background:rgba(0,0,0,.7); }

/* Palette de couleur */

.textRed1      { color: #a0191e; }
.textRed2      { color: #c10000; }
.textRed3      { color: #c6002b; }
.textRed4      { color: #FF0000; }

.textGreen1    { color: #005e20; }
.textGreen2    { color: #007e00; }
.textGreen3    { color: #5f7900; }
.textGreen4    { color: #57b05a; }
.textGreen5    { color: #c2eb74; }

.textBlue1     { color: #2f3958; }
.textBlue2     { color: #265390; }
.textBlue3     { color: #0067a0; }
.textBlue4     { color: #2e7dec; }
.textBlue5     { color: #b5cdff; }

.textWhite     { color: #fff; }
.textBlack     { color: #000; }

.textGrey1     { color: #282b2e; }
.textGrey2     { color: #343434; }
.textGrey3     { color: #434343; }
.textGrey4     { color: #4c4c4f; }
.textGrey5     { color: #666; }
.textGrey6     { color: #888; }
.textGrey7     { color: #aaa; }
.textGrey8     { color: #ccc; }
.textGrey9     { color: #eee; }

.textSilver    { color: #e9e9e9; }
.textMagnolia  { color: #f7f5e8; }

.textYellow    { color: #ffff6f; }
.textOrange    { color: #c74100; }
.textFlux      { color: #ff5e00; }
.textGold      { color: #bb8800; }
.textPink      { color: #ff0070; }
.textSlime     { color: #adc61a; }
.textInfo      { color: #00529B; }
.textSuccess   { color: #4F8A10; }
.textWarning   { color: #9F6000; }
.textError     { color: #D8000C; }

/* Pack de boites de info utilisateur */

.backgroundRed1      { background-color: #a0191e; }
.backgroundRed2      { background-color: #c10000; }
.backgroundRed3      { background-color: #c6002b; }
.backgroundRed4      { background-color: #FF0000; }

.backgroundGreen1    { background-color: #005e20; }
.backgroundGreen2    { background-color: #007e00; }
.backgroundGreen3    { background-color: #5f7900; }
.backgroundGreen4    { background-color: #57b05a; }
.backgroundGreen5    { background-color: #c2eb74; }

.backgroundBlue1     { background-color: #2f3958; }
.backgroundBlue2     { background-color: #265390; }
.backgroundBlue3     { background-color: #0067a0; }
.backgroundBlue4     { background-color: #2e7dec; }
.backgroundBlue5     { background-color: #b5cdff; }

.backgroundWhite     { background-color: #fff; }
.backgroundBlack     { background-color: #000; }

.backgroundGrey1     { background-color: #282b2e; }
.backgroundGrey2     { background-color: #343434; }
.backgroundGrey3     { background-color: #434343; }
.backgroundGrey4     { background-color: #4c4c4f; }
.backgroundGrey5     { background-color: #666; }
.backgroundGrey6     { background-color: #888; }
.backgroundGrey7     { background-color: #aaa; }
.backgroundGrey8     { background-color: #ccc; }
.backgroundGrey9     { background-color: #eee; }

.backgroundSilver    { background-color: #e9e9e9; }
.backgroundMagnolia  { background-color: #f7f5e8; }

.backgroundYellow    { background-color: #ffff6f; }
.backgroundOrange    { background-color: #c74100; }
.backgroundFlux      { background-color: #ff5e00; }
.backgroundGold      { background-color: #bb8800; }
.backgroundPink      { background-color: #ff0070; }
.backgroundSlime     { background-color: #adc61a; }
.backgroundInfo      { background-color: #BDE5F8; }
.backgroundSuccess   { background-color: #DFF2BF; }
.backgroundWarning   { background-color: #FEEFB3; }
.backgroundError     { background-color: #FFBABA; }

/* Messages Box */

.info, .success, .warning, .error, .validation
{
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin: 10px 5px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
}
.info
{
    color: #00529B;
    background-color: #BDE5F8;
}
.success
{
    color: #4F8A10;
    background-color: #DFF2BF;
}
.warning
{
    color: #9F6000;
    background-color: #FEEFB3;
}
.error
{
    color: #D8000C;
    background-color: #FFBABA;
}
.boxInfo
{
    color: #00529B;
    background-color: #BDE5F8;
    border: 1px solid;
}
.boxSuccess
{
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 1px solid;
}
.boxWarning
{
    color: #9F6000;
    background-color: #FEEFB3;
    border: 1px solid;
}
.boxError
{
    color: #D8000C;
    background-color: #FFBABA;
    border: 1px solid;
}

/* Fléches Box */

.arrowTopInfo { position: relative; background: #aedef7; border: 1px solid #003c8a; }
.arrowTopInfo:after, .arrowTopInfo:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowTopInfo:after { border-color: rgba(174, 222, 247, 0); border-bottom-color: #aedef7; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowTopInfo:before { border-color: rgba(0, 60, 138, 0); border-bottom-color: #003c8a; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowRightInfo { position: relative; background: #aedef7; border: 1px solid #003c8a; }
.arrowRightInfo:after, .arrowRightInfo:before{ left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowRightInfo:after{ border-color: rgba(174, 222, 247, 0); border-left-color: #aedef7; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowRightInfo:before{ border-color: rgba(0, 60, 138, 0); border-left-color: #003c8a; border-width: 21px; top: 50%; margin-top: -21px; }

.arrowBottomInfo { position: relative; background: #aedef7; border: 1px solid #003c8a; }
.arrowBottomInfo:after, .arrowBottomInfo:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowBottomInfo:after { border-color: rgba(174, 222, 247, 0); border-top-color: #aedef7; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowBottomInfo:before { border-color: rgba(0, 60, 138, 0); border-top-color: #003c8a; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowLeftInfo { position: relative; background: #aedef7; border: 1px solid #003c8a; }
.arrowLeftInfo:after, .arrowLeftInfo:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowLeftInfo:after { border-color: rgba(174, 222, 247, 0); border-right-color: #aedef7; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowLeftInfo:before { border-color: rgba(0, 60, 138, 0); border-right-color: #003c8a; border-width: 21px; top: 50%; margin-top: -21px; }



.arrowTopSuccess { position: relative; background: #dff2bf; border: 1px solid #4f8A10; }
.arrowTopSuccess:after, .arrowTopSuccess:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowTopSuccess:after { border-color: rgba(223, 242, 191, 0); border-bottom-color: #dff2bf; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowTopSuccess:before { border-color: rgba(79, 138, 16, 0); border-bottom-color: #4f8A10; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowRightSuccess { position: relative; background: #dff2bf; border: 1px solid #4f8A10; }
.arrowRightSuccess:after, .arrowRightSuccess:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowRightSuccess:after { border-color: rgba(223, 242, 191, 0); border-right-color: #dff2bf; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowRightSuccess:before { border-color: rgba(79, 138, 16, 0); border-right-color: #4f8A10; border-width: 21px; top: 50%; margin-top: -21px; }

.arrowBottomSuccess { position: relative; background: #dff2bf; border: 1px solid #4f8A10; }
.arrowBottomSuccess:after, .arrowBottomSuccess:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowBottomSuccess:after { border-color: rgba(223, 242, 191, 0); border-top-color: #dff2bf; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowBottomSuccess:before { border-color: rgba(79, 138, 16, 0); border-top-color: #4f8A10; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowLeftSuccess { position: relative; background: #dff2bf; border: 1px solid #4f8A10; }
.arrowLeftSuccess:after, .arrowLeftSuccess:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowLeftSuccess:after { border-color: rgba(223, 242, 191, 0); border-right-color: #dff2bf; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowLeftSuccess:before { border-color: rgba(79, 138, 16, 0); border-right-color: #4f8A10; border-width: 21px; top: 50%; margin-top: -21px; }



.arrowTopWarning { position: relative; background: #feefb3; border: 1px solid #9F6000; }
.arrowTopWarning:after, .arrowTopWarning:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowTopWarning:after { border-color: rgba(254, 239, 179, 0); border-bottom-color: #feefb3; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowTopWarning:before { border-color: rgba(159, 96, 0, 0); border-bottom-color: #9F6000; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowRightWarning { position: relative; background: #feefb3; border: 1px solid #9F6000; }
.arrowRightWarning:after, .arrowRightWarning:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowRightWarning:after { border-color: rgba(254, 239, 179, 0); border-left-color: #feefb3; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowRightWarning:before { border-color: rgba(159, 96, 0, 0); border-left-color: #9F6000; border-width: 21px; top: 50%; margin-top: -21px; }

.arrowBottomWarning { position: relative; background: #feefb3; border: 1px solid #9F6000; }
.arrowBottomWarning:after, .arrowBottomWarning:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowBottomWarning:after { border-color: rgba(254, 239, 179, 0); border-top-color: #feefb3; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowBottomWarning:before { border-color: rgba(159, 96, 0, 0); border-top-color: #9F6000; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowLeftWarning { position: relative; background: #feefb3; border: 1px solid #9F6000; }
.arrowLeftWarning:after, .arrowLeftWarning:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowLeftWarning:after { border-color: rgba(254, 239, 179, 0); border-right-color: #feefb3; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowLeftWarning:before { border-color: rgba(159, 96, 0, 0); border-right-color: #9F6000; border-width: 21px; top: 50%; margin-top: -21px; }



.arrowTopError { position: relative; background: #FFBABA; border: 1px solid #D8000C; }
.arrowTopError:after, .arrowTopError:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowTopError:after { border-color: rgba(255, 186, 186, 0); border-bottom-color: #FFBABA; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowTopError:before { border-color: rgba(216, 0, 12, 0); border-bottom-color: #D8000C; border-width: 21px; left: 50%; margin-left: -21px; }

.arrowRightError { position: relative; background: #FFBABA; border: 1px solid #D8000C; }
.arrowRightError:after, .arrowRightError:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowRightError:after { border-color: rgba(255, 186, 186, 0); border-left-color: #FFBABA; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowRightError:before { border-color: rgba(216, 0, 12, 0); border-left-color: #D8000C; border-width: 21px; top: 50%; margin-top: -21px; }

.arrowBottomError { position: relative; background: #FFBABA; border: 1px solid #D8000C; }
.arrowBottomError:after, .arrowBottomError:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowBottomError:after { border-color: rgba(255, 186, 186, 0); border-top-color: #FFBABA; border-width: 20px; left: 50%; margin-left: -20px; }
.arrowBottomError:before { border-color: rgba(216, 0, 12, 0); border-top-color: #D8000C; border-width: 21px; left: 50%; margin-left: -21px; }


.arrowLeftError { position: relative; background: #FFBABA; border: 1px solid #D8000C; }
.arrowLeftError:after, .arrowLeftError:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowLeftError:after { border-color: rgba(255, 186, 186, 0); border-right-color: #FFBABA; border-width: 20px; top: 50%; margin-top: -20px; }
.arrowLeftError:before { border-color: rgba(216, 0, 12, 0); border-right-color: #D8000C; border-width: 21px; top: 50%; margin-top: -21px; }