/* --- STYLES DE BASE --- */

/* Page */
html {
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
}
body {
  margin: 0;
  padding: 0em; /* Remettre à zéro si nécessaire. */
  /* Pensez à utiliser une collection de polices (2), par ex:
  font-family: Arial, Helvetica, FreeSans, sans-serif; */
  font-size: 0.8em; /* À adapter pour la police choisie. (3) */
  line-height: 1.4; /* À adapter au design. (4) */
  color: black;
  background-color: #f5f5ec;
  font-family:"TrebuchetMS",Verdana,"LucidaGrande",Tahoma,Helvetica,Sans-Serif;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
  line-height: 1.2;
  font-weight: bold; /* Valeur par défaut. (6) */
  font-style: normal;
}
h1 {
  font-size: 1.75em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1em;
}

/* Listes */
ul, ol {
  margin: .75em 0 .75em 32px;
  padding: 0;
}

/* Paragraphes */
p {
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
address {
  margin: .75em 0;
  font-style: normal;
}

/* Liens */
a {
  text-decoration: underline;
}
a:link {
  color: #11C;
}
a:visited {
  color: #339;
}
a:hover, a:focus, a:active {
  color: #00F;
}

/* Pas de bordure autour des images dans les liens */
a img {
  border: none;
}

/* Divers éléments de type en-ligne (8) */
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}

/* Formulaires */
form, fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
input, button, select {
  vertical-align: middle; /* Solution pb. d'alignement. (9) */
}
/*-------------------------------------------------------------------------------------------------*/
.logo{
  margin-left: 60px;
  margin-right: 10px;
  display: block;
  float: left;
}
.blanc{
  color:white;
}
.maj_bleu{
  color: #00a2d2;
  text-transform: uppercase;
}
.maj_vert{
  color: #a5ab00;
  text-transform: uppercase;
}
.gris{
  color: #888888;
}
.mid_gris{
  color: #888888;
  font-size: 1.3em;
  font-weight: bold;
}
.maj_orange{
  color: #ff7b00;
  font-weight: bold;
  font-size: 1.5em;
}
.jaune{
  color: #FBD248;
  font-weight: bold;
  font-size: 1.1em;
}
.type_musique{
  font-style: italic;
  font-size: 1.1em;
}
.titre_droite{
  display: block;
  width: 140px;
  float: right;
  color: #888888;
  border-bottom: solid;
  border-bottom-color: #a5ab00;
  border-bottom-width: 1px;
  padding-left: 85px;
  margin-bottom: 10px;
}

.clear{
    clear:both;
}
#header{
  height: 170px;
  background-color:#333333;
}
#header_deco{
  display: block;
  position: absolute;
  width: 1020px;
  left: 50%;
  margin-left:-510px;
}
#header_deco a.login{
  display: block;
  float: right;
  height: 30px;
  width: 90px;
  margin-top: -20px;
  margin-right: 50px;
  text-decoration: none;
  text-align: center;
  color: white;
  font-weight: bold;
  background: #00A3D3;
  padding-top: 10px;
}

#menu{
    display: block;
    float: left;
    width: 1020px;
    margin-top: 19px;
}
#menu ul li{
    list-style: none;  /*enleve les puces devant les lien menu*/
    float: left;
    margin-right: -155px; /*.............................*/
    margin-left: 155px;   /*decale le menu vers le centre*/
}
#menu ul li a{
    font-size:1.2em;  /*taile de la police*/
    text-decoration: none;
    text-align: center;  /*alignement du texte*/
    display:block;
    background-color: #555555;
    margin-right: 4px;
    padding-left: 10px;
    padding-right: 10px;
    color:white; /*couleur du texte sur bouton*/
    font-weight: bold;
    text-transform: uppercase;
}
#menu ul li a.actual{
  background-color: #f4f4ec;
  color: black;
}
#menu ul li a:hover{
    background-color: #f4f4ec;
    color: black;
}
#conteneur_princ{
  display: block;
  width: 970px;
  position: relative;
  left: 50%;
  margin-left: -460px;
}
#conteneur{
  display: block;
  width: 970px;
  margin-top: 15px;
  padding-bottom: 40px;
  border: solid;
  border-width: 1px;
  border-color: #e5e5db;
  background-color: white;
}
#corps{
  display: block;
  float: left;
  width: 620px;
  padding-left: 35px;
  text-align: justify;
}
#corps ul li{
  list-style: url("../images/puce.png");
}
#colonne_droite{
  display: block;
  float: right;
  width: 290px;
  text-align: right;
  margin-right: 20px;
}
#colonne_droite ul{
  padding-left: 130px;
}
#colonne_droite ul li{
  text-align: justify;
  list-style: url('../images/puce_liens.png');
}
#colonne_droite ul li a{
  text-decoration: none;
  color: #ff7b00;
}
#colonne_droite ul li a:hover{
  text-decoration: underline;
}
.artiste{
  display: block;
  float: right;
  height: 60px;
  width: 220px;
  margin-bottom: 15px;
  border: dotted;
  border-color: #888888;
  border-width: 2px;
  font-size: 1.1em;
}
.artiste img{
  float: left;
}
.infos_artiste{
  display: block;
  float: right;
  padding-right: 15px;
  padding-top: 5px;
}
#footer{
  display: block;
  float: left;
  width: 970px;
  margin-bottom: 20px;
}
#copyright{
  float: left;
  text-transform: uppercase;
  margin-top: 25px;
  margin-left: 80px;
}
#social{
  display: block;
  float: right;
  margin-right: 40px;
  margin-top: 25px;
}
#social a{
  display: block;
  float: left;
  height: 32px;
  width: 32px;
  line-height: 32px;
  padding-left: 10px;
}

#social a.facebook{
  background: url("../images/social-icons/facebook_32.png") no-repeat top left;
}
#social a.facebook:hover{
  background-position: bottom left;
}
#social a.twitter{
  background: url("../images/social-icons/twitter_32.png") no-repeat top left;
}
#social a.twitter:hover{
  background-position: bottom left;
}
#social a.youtube{
  background: url("../images/social-icons/youtube_32.png") no-repeat top left;
}
#social a.youtube:hover{
  background-position: bottom left;
}
#social a.vimeo{
  background: url("../images/social-icons/vimeo_32.png") no-repeat top left;
}
#social a.vimeo:hover{
  background-position: bottom left;
}