@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Droid+Serif); /* pour le corps des articles */
@import url(http://fonts.googleapis.com/css?family=Glegoo);    /* pour le titre des articles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin:0;
padding:0;
border:0;
vertical-align:top;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}

/*Corps de page                                                       */
body {
/* Couleur de fond                     */ background-color:#DAF7AE;
/* Police de caractere                 */ font-family: DroidSerif, Arial, sans-serif;
/* Couleur des caracteres              */ color:#757575;
/* largeur de la zone d'affichage      */ width:1000px;
/* marge par rapport a la fenetre      */ margin: 5px auto;
}

/* Classe pour le header de la page                                   */
.header_page {
/* largeur de l'element                */ width :1000px;
/* hauteur de l'element                */ height : 195px;
/* Couleur de fond                     */ background-color:#C4FB71;
/* Definition Arrondie Bordure         */ border-radius:30px 30px 0px 0px;
/* Trait Bordure haute                 */ border-top:3px solid black;
/* Trait Bordure G                     */ border-left:3px solid black;
/* Trait Bordure D                     */ border-right:3px solid black;
/* Trait Bordure basse                 */ border-bottom:2px solid black;
/* Image de fond                       */ background:url('../image/header.jpg');
}

/* Definition du tag nav                                              */
nav {
/*                                     */ display:block;
/* largeur de l'element                */ width:1000px;
/* hauteur de l'element                */ height : 100px;
/* Trait Bordure G                     */ border-left:3px solid black;
/* Trait Bordure D                     */ border-right:3px solid black;
/* Trait Bordure basse                 */ border-bottom:2px solid black;
/* Image de fond                       */ background:url('../image/guitare02.jpg');
}

/* Definition du tag ul lorsqu'il est precede de nav                  */
nav ul {
/* marge H D B G                       */ margin: 0px;
}

/* Definition du tag li lorsqu'il est precede de nav ul               */
/* on defini la liste en ligne                                        */
nav ul li {
/*                                     */ display:inline-block;
/* marge H D B G                       */ margin: 0px;
/* Position de element li a gauche     */ float:left;
/* largeur de element li               */ width:120px;
/* texte centre sur la largeur 100     */ text-align:center;
/* hauteur de ligne de li              */ line-height:100px;
}

/* Definition du tag a lorsqu'il est precede de nav ul li             */
nav ul li a{
/* Couleur des caracteres              */ color:white;
/* pas de souligner sous le lien       */ text-decoration:none;
/* Taille de la police de caracteres   */ font-size:18px;
/* Police de caractere                 */ font-family:Arial, sans-serif;
}

/* Definition du tag nav ul li a lorsqu'il est survolé                */
nav ul li a:hover{
/* Couleur des caracteres              */ color:#C4FB71;
}

/* Definition du tag section                                          */
section {
/*                                     */ display:inline-block;
/* largeur de l'element                */ width:1000px;
/* Epaisseur bordure horiz 0 verti 3   */ border-width: 0px 3px;
/* Type bordure horiz sans verti trait */ border-style: none solid;
/* Couleur bordure                     */ border-color: black;
/* Couleur de fond                     */ background-color:#C4FB71;
/* marge H D B G                       */ margin: 0px 20px 0px 0px;
}

/* Definition du tag ul                                               */
ul {
/* marge H D B G                       */ margin: 10px 20px 15px 45px;
/* pas de type de liste                */ list-style-type:none;
}

/* Definition du tag li                                               */
li {
/* marge H D B G                       */ margin: 5px 0px 5px 5px;
/* Image de fond                       */ list-style-image :url("../image/note02.png");
}

/* Definition du tag h1 lorsqu'il est precede de section              */
section h1 {
/* marge H D B G                       */ margin: 10px 20px 10px 10px;
/* Police de caractere                 */ font-family:Glegoo, Arial, sans-serif;
}

/* Classe pour le header d'un article                                 */
.header_article {
/* Trait Bordure basse                 */ border-bottom:1px solid green;
/* marge H D B G                       */ margin: 0px 20px 10px 20px;
/* Police de caractere                 */ font-family:Glegoo, Arial, sans-serif;
/* Taille de la police de caracteres   */ font-size:18px;
/* Alignement du texte                 */ text-align:left;
}

/* Definition du tag article                                          */
article {
/* marge H D B G                       */ margin: 20px 0px 20px 20px;
}

/* Classe pour le footer d'un article                                 */
.footer_article {
/* Trait Bordure basse                 */ border-top:1px solid green;
/* marge H D B G                       */ margin: 20px 20px 0px 20px;
/* Taille de la police de caracteres   */ font-size:12px;
/* Alignement du texte                 */ text-align:right;
}

/* Classe pour le footer de la page                                   */
.footer_page {
/* largeur de l'element                */ width:1000px;
/* hauteur de ligne de                 */ line-height:25px;
/* Couleur de fond                     */ background-color:#C4FB71;
/* Definition Arrondie Bordure         */ border-radius: 0px 0px 30px 30px ;
/* Trait Bordure haute                 */ border-top:2px solid black;
/* Trait Bordure G                     */ border-left:3px solid black;
/* Trait Bordure D                     */ border-right:3px solid black;
/* Trait Bordure basse                 */ border-bottom:3px solid black;
/* Alignement du texte                 */ text-align:center;
/* Taille de la police de caracteres   */ font-size :12px;
}

/* Classe pour le paragraphe d'un article                             */
.texte {
/* Taille de la police de caracteres   */ text-align:justify;
/* marge H D B G                       */ margin: 5px 20px 5px 20px;
}

.centre {
/* Alignement du texte                 */ text-align:center;
}

.gras {
font-weight:bold;
}

.media_pos {
display: block;
/* largeur de l'element                */ width: 400px;
/* marge h/b et g/d                    */ margin: 5px auto;
/* Bordure de l'element                */ border: 0;
}

.video_pos {
display: block;

/* marge h/b et g/d                    */ margin: 5px auto;
/* Bordure de l'element                */ border: 0;
}