/*=========[ Général ]========================================================================================= */
* {margin:0px; padding:0px}

html {
  background-image: url(../img/interface/fond_html.jpg);
  font:12px Arial, Helvetica, Verdana;
  width:100%;
  color:#343434;
  padding-bottom:40px;
  line-height:18px
}

.left {float:left}
.right {float:right}
.clear {clear:both}

.none {display:none !important}

.blanc {color:#fff !important}
.noir {color:#000 !important}
.rouge {color:#ce0000 !important}
.gris {color:#888}

.centrage {text-align:center}
.legende {font-size:11px!important}
.liste {margin:10px 0px 5px 15px}
.liste li {
  background-image: url(../img/interface/puce_grise.png); 
  background-repeat:no-repeat; 
  background-position:0px 1px;
  list-style:none;
  margin-bottom:5px;
  padding-left:20px
}

a{text-decoration:none}
img {border:none}

p {text-align:justify}

h1 {color:#fff; font-size:18px}
h2 {
  font-size:17px; 
  background-image: url(../img/interface/caniche_titre.png); 
  background-repeat:no-repeat; 
  background-position:0px 0px;
  height:19px; 
  padding:5px 0px 0px 32px;
  margin:0px 0px 10px 3px
}
h2.nocaniche {background-image:none; padding-left:0px}
h3 {font-size:13px}
h4 {
  font-size:14px; 
  background-image: url(../img/interface/plus.png); 
  background-repeat:no-repeat; 
  background-position:top right;
  height:16px; 
  padding:2px 25px 0px 0px;
  margin:10px 15px 0px 0px;
  color:#343434;
  text-align:right; 
}


/*=========[ Structure generale ]========================================================================================= */
#conteneur {width:980px; margin:0px auto; background-color:transparent}
#contenu {background-image: url(../img/interface/fond_contenu.png); padding:10px 10px 60px 10px; width:960px}
#contenu .cache {display:none}

#bandeau {
  background-image: url(../img/interface/bandeau_haut.png); 
  background-repeat:no-repeat;
  width:980px;
  height:245px;
  margin:0px auto;
  position:relative;
}
.bandeau-photo {position:absolute; top:34px; right:0px}
.logo-titre {position:absolute; top:65px; left:40px}
.btn-decouvrir {position:absolute; top:180px; left:70px}
.btn-newsletter {position:absolute; top:180px; left:300px}

/* menu */
#menu {margin-left:10px}
#menu li {display:inline; margin:0px !important; padding:0px !important;}
#menu ul {display:inline; margin:0px !important; padding:0px !important;}
#menu a {display:inline; margin:0px !important; padding:0px !important}
#menu img {display:inline; margin:0px !important; padding:0px !important;}

#pied {background-image: url(../img/interface/pied.png); width:980px; height:38px; text-align:center}
#pied a {color:#343434; margin:0px 2px}
#pied a:hover {color:#ce0000}
#pied h3 {font-size:11px; display:inline; font-weight:normal; color:#343434}

.fond1 {
  background-image: url(../img/interface/contenu_milieu.gif);
  background-repeat:repeat-y;
  width:882px;
  padding:10px 40px
}

.fond2 {
  background-image: url(../img/interface/contenu_fond2_milieu.gif);
  background-repeat:repeat-y;
  width:892px;
  padding:10px 20px
}

.fond1-bas {margin-bottom:20px}
.fond2-bas {margin-bottom:10px}

.cadran {background-color:#fff; border:1px #999 solid; padding:5px 10px; margin-bottom:10px}
.cadran1 {background-image: url(../img/pages/news_milieu.gif); background-color:#fff; margin-bottom:10px}
.cadran1 h3 {color:#9f0101; margin-bottom:5px; font-size:13px}

.titre {margin-bottom:10px}
.lire-suite {margin-top:10px}
.savoir-plus {margin-top:10px}

.bouton,.bouton-gris { 
  background-image:url(../img/interface/btn_droite.gif); 
  background-repeat:no-repeat; 
  background-position:100% 0; 
  height:28px; /* Moitié de la hauteur de l'image */ 
  display:inline-block; 
  padding-right:30px; /* marge droite */ 
  line-height:30px; /* positionnement du texte en hauteur */ 
  vertical-align:middle; 
  color:#fff !important;
  text-decoration:none;
  font-size:12px;
  font-weight:bold
}
.bouton-gris {background-image:url(../img/interface/btn_gris_droite.gif);}

.bouton span,.bouton-gris span {
  display:inline-block; 
  background-image:url(../img/interface/btn_gauche.gif); 
  background-position:0 0; 
  background-repeat:no-repeat; 
  height:28px; /* moitié de la hauteur de l'image */ 
  padding-left:30px; /* positionnement du texte en largeur */ 
  white-space:nowrap;
  cursor:hand;
} 
.bouton-gris span {background-image:url(../img/interface/btn_gris_gauche.gif); }

.bouton:hover span,.bouton-gris:hover span {background-position:0 -28px /* moitié de la hauteur de l'image */} 
.bouton:hover,.bouton-gris:hover {background-position:100% -28px /* moitié de la hauteur de l'image */}

/*=========[ Accueil ]========================================================================================= */
#bandeau-accueil {
  background-image: url(../img/interface/bandeau_haut_accueil.png); 
  background-repeat:no-repeat;
  width:980px;
  height:562px;
  margin:0px auto;
  position:relative;
}
#bandeau-accueil h1,#bandeau h1 {position:absolute; top:20px; right:75px}

.logo {display:block; position:absolute; top:45px; left:50px}
.logo-titre-accueil {display:block; position:absolute; top:60px; right:40px}

.video-accueil {position:absolute; top:168px; right:0px}
.btn-decouvrir-accueil {position:absolute; bottom:40px; right:260px}
.btn-newsletter-accueil {position:absolute; bottom:40px; right:40px}

.cadran-accueil {width:421px}
.cadran-accueil em {font-size:10px; color:#777}
.news-accueil  {padding:0px 10px}

.accueil-biographie {width:420px; text-align:center}

#accueil-droite p {margin-top:10px; text-align:center; width:420px;}


/*=========[ Concerts ]========================================================================================= */
table#concerts td {padding:4px 5px}
.concerts1 {background-color:#a5a5a5}
#lien_annee {margin:5px 0px 0px 15px; width:500px}

/*=========[ Discographie ]========================================================================================= */
.disco1,.disco2,.disco3 {background-image: url(../img/pages/disco_milieu.gif); background-color:transparent; width:250px}
.disco-lien1 a {margin:5px 0px 0px 100px}
.disco-lien2 a {margin:5px 0px 0px 40px}
.disco-lien3 a {margin:5px 0px 0px 70px}
.disco1 p,.disco2 p,.disco3 p {padding:0px 10px; text-align:center; height:90px}
.disco1 ul {text-align:center}
.disco1 {margin:10px 30px 0px 65px}
.disco2 {margin:10px 0px 0px 0px}
.disco3 {margin:10px 0px 0px 25px}

/*=========[ Biographie ]========================================================================================= */
#biographie {width:592px; margin-right:20px; line-height:23px}
#biographie b {color:#ce0000}

.biographie-musiciens {margin-right:5px}
.biographie-musiciens p {text-align:center}


/*=========[ Videos ]========================================================================================= */
#videos img {margin:0px 9px 2px 9px}
#videos p {text-align:center}

.video1 {margin:0px 10px 0px 0px}
.video {margin:0px 10px 10px 0px}


/*=========[ Photos ]========================================================================================= */
#galerie-photos {
  margin:20px auto 0px auto; 
  border:1px #454143 solid;
  width:750px;
  height:450px; 
}


/*=========[ News ]========================================================================================= */
.news {background-color:#fff; border:1px solid #c7c6c6; padding:15px; margin-bottom:20px; width:850px}
.news p {width:620px;}
.news img {margin:0px 5px 5px 0px}
.news h3 {margin-bottom:15px; width:620px}
p.news-date {display:block; width:150px; margin-right:9px; font-size:11px; color:#9f9f9f; text-align:right}
div > p.news-date {margin-right:8px}

a.news-savoir {display:block; width:115px; height:30px; margin-top:15px}
#pagination a{color:#ce0000}
#pagination a:hover{color:#ce0000; text-decoration:underline}

/*=========[ Pro ]========================================================================================= */
#caroussel {width:470px; background-color:#444; padding:1px; text-align:center}
#caroussel a {color:#fff; font-size:10px}
#caroussel a:hover {color:#ce0000}

.pro {background-image: url(../img/pages/pro_milieu.gif); width:380px; margin-left:20px; background-color:transparent;}
.pro b,.pro p {padding:0px 10px}
.partenaire-logo {margin:10px 10px 0px 0px}

.dl1 {display:block; margin-left:190px}

/*=========[ Liens ]========================================================================================= */
#liens a {width:430px}
#liens2 {margin-left:0px}

#liens a,#liens2 a {
  display:block;
  background-image: url(../img/interface/puce_grise.png); 
  background-repeat:no-repeat;
  background-position:0px 2px;
  color:#333;
  width:250px;
  margin:0px 20px 7px 0px;
  list-style:none;
  padding:1px 0px 1px 20px;
  text-decoration:none;
}
#liens a:hover,#liens2 a:hover {color:#ce0000}

#liens p,#liens2 p {margin:0px 0px 10px 5px}

#lien_annee a{background-image: url(../img/interface/lire_annee.gif); margin:3px 3px 3px 3px; padding:0px 3px 0px 3px;}

/*=========[ Contact ]========================================================================================= */
.contacts {width:420px}
.contacts a {color:#fff !important}
.contact-carte {margin:0px 0px 0px 60px}

label {width:120px; display:block; float:left; margin:5px 10px 20px 0px; text-align:right; font-weight:bold; color:#ce0000}
input {width:250px; background-color:#fff; border:1px #c6c6c6 solid; padding:4px 5px; color:#444}
textarea {width:715px; background-color:#fff; border:1px #c6c6c6 solid; padding:10px; color:#444; height:120px; overflow:auto}
fieldset {border:none}

#newsletter .puce {width:30px; margin-top:15px}
.newsletter-btn {width:273px !important; height:19px !important; padding-top:0px !important; margin:20px 0px 0px 80px; background-color:transparent !important; border:none !important}


#envoyer {width:191px; height:37px; padding:0px; border:none; margin:0px 15px 20px 0px}


.ok {display:block; background-color:#fff; width:250px; color:#17d320; border:1px #17d320 solid; padding:2px 5px; text-align:center; margin:5px 0px}
.error {display:block; background-color:#fff; width:230px; color:#ff0000; border:1px #ff0000 solid; padding:2px 0px; text-align:center; margin:5px 0px}

.message_ok {
  background-image:url(../img/pages/ok.png); 
  background-repeat:no-repeat;
  background-position:10px 5px;
  background-color:#0dd157; 
  border:1px #5aff98 solid; 
  padding:30px 20px 40px 100px; 
  color:#fff; 
  font-size:12px; 
  width:230px;
  text-align:left;
}
.message_error {
  background-image:url(../img/pages/attention.png); 
  background-repeat:no-repeat;
  background-position:10px 15px;
  background-color:#cecece; 
  border:1px #a1a1a1 solid; 
  padding:30px 20px 40px 100px; 
  color:#333; 
  font-size:12px; 
  width:250px;
  text-align:left;
}


/*=========[ jazz manouche ]========================================================================================= */
#manouche-liste {padding-left:20px}
#manouche-liste li{margin-bottom:10px}
a.manouche-lien {color:#ce0000; font-weight:bold}
a:hover.manouche-lien {text-decoration:underline}

/*=========[ Commander un CD ou TSHIRT ]========================================================================================= */
.commande {background-color:#dcdcdc; width:480px}
.commande-titre {margin:5px 0px 0px 20px}

.commander-adresse {width:310px !important}

#commander {width:192px; height:37px; padding:0px; border:none; margin:10px 33px 0px 0px}
#tshirt {position:relative}
#tshirt b {width:120px}
#tshirt select {background-color:#201E1F; border:1px #555 solid; color:#d9d9d9; width:300px}


/*=========[ Newsletter ]========================================================================================= */
#inscription input {width:auto}
.newsletter-email {width:250px!important}
#newsletter-ok {background-color:#444; color:#fff; border:1px #888 solid; width:150px!important}