/*
    Title   : Harmonie Css
    Auteur  : Demaire Laurent
    Version : 2013.04.bêta
    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 */
}

/* 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;
    word-wrap: break-word;
}
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: "Helvetica Neue", helvetica, arial, sans-serif;
    font-weight:300;
    line-height:1.75;
    letter-spacing:0.1em;
    font-size:1.1em;
}
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%;color:#444;}
h2 {font-size:260%;color:#555;}
h3 {font-size:220%;color:#555;}
h4 {font-size:180%;color:#666;}
h5 {font-size:140%;color:#666;}
h6 {font-size:120%;color:#666;}
/* 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; 
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
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:900;
}
/* 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;
    max-width:100%; /* les images seront limitées à la largeur de leur parent */
}

li
{
    display:list-item;
}
html5\:mark, mark
{
    background-color: yellow;
    color: black;
}
nav ul, nav ol, ol, ul
{
    padding:0 0 1em 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 */
}