/* Feuille de style ZigZag Territoires */

/* --------------------------------------------------- Style des balises générales */

html, body {
	margin:0;
	padding:0;
	height: 100%;
}

body {
 background:#D5D0BC;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-color:#333;
 font-size:small;
 behavior: url(csshover.htc); 
 text-align: center; 
}


ul {
 margin:0px;
 padding:0px;
 }

li {
  list-style:none;
  border:none;
  font-size:12px;
  margin-left:5px;
  margin-bottom:0px;
  
}

a {
  border:none;
  text-decoration:none;
  color:#333;
}

img
{
  border:  none ;
}

a:hover {
  color:#999;
}

h1{
  color:#6E3030;
  font-size:14px;
  margin-bottom:5px;
  padding:0;
  } 
h2{
  color:#333;
  font-size:12px;
  margin-bottom:2px;
  padding:0;
  }
h3{
  font-size:10px;
  color:#666;
  margin-bottom:2px;
  padding:0;
  }

/* ---------------------------------------------------- Zones principales des pages */
#container {
 background:#D5D0BC url(fond.jpg) no-repeat top left;
 width:1000px;
 height: auto !important;
 height: 1200px;
 min-height: 1200px;
 margin-top:0px;
 margin-left:auto;
 margin-right:auto;
 border:none;
 text-align: left; 
 }

/* -------------------------------------------------- Logo ZigZag */
#entetezigzag {
  margin:5px;
  position:relative;
  
  /* -------------------------------------------------- Technique de remplacement de texte / Lehy/Langridge */
  /*Taille de l'image*/ 
  padding-top: 85px; 
  width: 157px; 
  /*L'image de remplacment*/ 
  background: url(logozigzag.gif) no-repeat top left; 
  /* Cacher le text*/ 
  overflow: hidden; 
  /* WIN IE5 hack */ 
  height: 85px; 
  voice-family: "\"}\""; 
  voice-family:inherit; 
  height: 0;
 }
 

/* --------------------- Zone centrale. Utilisée comme container sur site e-commerce  */
#zonecentrale
{
 padding:5px;
}

/* -------------------------------------------------- Music Player ZIGZAG (Flash) */
#ZonePlayer{
 margin-left:0px;
}

/* -------------------------------------------------- Zone d'informations importantes en page d'accueil */
#ZoneInformations {
    background-color:#FFFFFF;
    border: solid #666 1px;
	margin:0;
	margin-left:30px;
	margin-right:30px;
	margin-bottom:30px;
	margin-top:20px;
	padding:10px;
	}

#ZoneInformations h2{
 color:#6E3030;
 margin-bottom:10px;
}

#ZoneInformations a {
  text-decoration:none;
  font-size:9px;
}



table#catalogues td{
 vertical-align:top;
 padding:5px;
 padding-bottom:15px;
 border-top:#AAA 1px solid;
}
table#catalogues img{
 padding-top:5px;
}

/* -------------------------------------------------- Présentation de l'identification / création de nouveau compte */
#compte {
    background-color:#FFFFFF;
    border: solid #666 1px;
	margin:0;
	margin-right:30px;
	margin-bottom:30px;
	margin-top:20px;
	padding:10px;
	}

#compte h2{
 color:#6E3030;
 border-bottom:1px #666 solid;
 white-space:nowrap;
 margin-bottom:10px;
}

#compte a{
 color:#6699CC;
 text-decoration:none;
}
#compte a:hover{
 text-decoration:underline;
}

/* -------------------------------------------------- Pied de page */
#zonepied
{
 clear:both;
 height:15px;
 margin-top:15px;
 border-top:#666666 thin solid;
}

#zonepied p
{
 font-size:9px;
 color:#666666;
 float:right;
}
#zonepied a
{
 font-size:9px;
 color:#000000;
}

/* -------------------------------------------------- Zones de d'informations ZigZag */
#accesdirect{
  float:left;
  width:200px;
  margin-top:10px;
  margin-left:0;
  padding-left:5px;
  padding-right:5px;
  } 
  
#informationspeciale{
  float:right;
  width:200px;
  margin-top:25px;
  margin-left:5px;
  padding-left:5px;
  padding-right:5px;
  border-left:solid 1px #666;
  border-bottom:solid 1px #666;
  } 
  
#informationspeciale h1{
 border-top:#666 solid 1px;
 padding-top:5px;
}

/* ----------------------- Rubriques générales en zone centrale de la page */
#rubriquesgenerales{
  margin-left:220px;
  margin-right:220px;
  height: auto !important;
  height: 1000px;
  min-height: 1000px;
}
 
#rubriquesgenerales h1{
  background:transparent top left no-repeat url(h1.gif);
  color:#6E3030;
  font-size:14px;
  margin-bottom:5px;
  padding:0;
  padding-left:50px;
  padding-top:10px;
  height:40px;
  white-space:nowrap;
  }
  
#rubriquesgenerales h2{
  font-size:12px;
  color:#333333;
  margin-bottom:2px;
  padding:0;
  }
#rubriquesgenerales h3{
  font-size:10px;
  color:#666666;
  margin-bottom:2px;
  padding:0;
  }

  
#rubriquesgenerales a{
  padding-top:10px;
  font-size:11px;
  font-weight:normal;
  color:#003366;
}
#rubriquesgenerales a:hover{
 text-decoration:underline;
}

#rubriquesgenerales img 
{ 
 border : 0px; 
 margin:5px;
} 
/* ----------------------- Catalogue occupataion maximum de la page */
#catalogue{
  margin-left:220px;
  height: auto !important;
  height: 1000px;
  min-height: 1000px;
}
 
#catalogue h1{
  background:transparent top left no-repeat url(h1.gif);
  color:#6E3030;
  font-size:14px;
  margin-bottom:5px;
  padding:0;
  padding-left:50px;
  padding-top:10px;
  height:40px;
  white-space:nowrap;
  }
  
#catalogue h2{
  font-size:12px;
  color:#333333;
  margin-bottom:2px;
  padding:0;
  }
#catalogue h3{
  font-size:10px;
  color:#666666;
  margin-bottom:2px;
  padding:0;
  }

  
#catalogue a{
  padding-top:10px;
  font-size:11px;
  font-weight:normal;
  color:#003366;
}
#catalogue a:hover{
 text-decoration:underline;
}

#catalogue img 
{ 
 border : 0px; 
 margin:5px;
} 

/* -------------------------------------------------- Menus de navigation  ZigZag */
#navigationprincipale {
 width:100%;
 height:25px;
}

#navigationprincipale ul{
 margin:5px;
 padding:0px;
}

#navigationprincipale li{
  float:left;
  margin:0px;
  list-style:none;
  width:100px;
  border:none;
  white-space:nowrap;
}
#navigationprincipale a{
 display:block;
 text-decoration:none;
 font:Verdana, Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:200;
 color:#FFFFFF;
 border-right:1px solid;
 background:#AB9C86;
 text-align:center;
}

#navigationprincipale a:hover{
 background:#7E7058;
 border:1px solid;
 border-color:#666 #FFF #FFF #666;
}

#navigationsecondaire {
  width:100%;
  height:50px;
  margin-top:5px;
  margin-bottom:5px;
  border-bottom:#999 solid 1px;
}
#navigationsecondaire ul{
 float:left;
 margin:0px;
 padding:0px;
 }

#navigationsecondaire li{
  float:left;
  list-style:none;
  border:none;
  white-space:nowrap;
  font-size:10px;
  margin-left:5px;
}

#navigationsecondaire p{
  clear:left;
  margin:0;
  padding:0;
}
#navigationsecondaire a{
  margin-top:5px;
  list-style:none;
  width:80px;
  border:none;
  white-space:nowrap;
  color:#666;
}
#navigationsecondaire a:hover{
  color:#999;
}


/* ---------------------------------- Menu utilisé dans les boîtes de gauche de la page d'accueil */
.blocgauche {
 background-color:#DBD5CA;
 width:160px;
 margin-top:10px;
 margin-bottom:5px;
 padding-left:2px;
 padding-right:2px;
 padding-bottom:10px;
 border:#666666 1px solid;
}

h1.blocgauche {
  color:#FFFFFF;
  height:15px;
  margin-bottom:5px;
  margin-top:2px;
  padding:0;
  font-size:9px;
  background-color:#AB9C86;
  text-align:center;
 }
 
p.blocgauche {
 font-size:8px;
 color:#999;
}

/* ---------------------------------- Affichage des évènement */
.blocactu {
 background-color:#E3DED7;
 width:150px;
 margin-top:5px;
 margin-bottom:5px;
 margin-left:auto;
 margin-right:auto;
 padding:2px;
 border:#666666 1px solid;
}

p.blocactu {
 font-size:9px;
 margin-top:0;
 margin-bottom:0;
 padding:0;
 border:none;
 color:#999;
}
a.blocactu {
 font-size:10px;
 clear:all;
 border:none;
 color:#333;
}
a.blocactu:hover {
 color:#999;
}
/* ----------------------------------------------------- Menu de selection des critères de recherche */
ul#menuselection li ul{ display:none; }
	
ul#menuselection li:hover>ul{ display:block; }

ul#menuselection{
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
  font-size: 12px;
}

ul#menuselection ul{
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
  max-height:200px;
  overflow:auto;
  height: expression(this.scrollHeight > 200 ? "200px" : "auto"); /* bug IE */
  font-size: 12px;
}

ul#menuselection ul{
  position:absolute;
  top:-1px;
  left:148px;
}

ul#menuselection li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menuselection a{
  display:block;
  width:100%;
  color:#000000;
}

ul#menuselection a:hover{
  background: gray;
  color: white;
}
/* ---------------------------------- Menu utilisé pour sélectionner un extrait du catalogue musical */
#menucatalog{
 width:90%;
 margin:0;
 padding:0;
 height:21px;
 border-bottom:1px #666 solid;
}

#menucatalog a
{
color: #FFF;
background: #AB9C86 url(left.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px;
padding-top:0;
padding-bottom:0;
}

#menucatalog a span
{
background: url(right.gif) right top no-repeat;
padding-right: 10px
}

#menucatalog a, #menucatalog a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#menucatalog a, #menucatalog a span
{
float: none
}
/* End hide */

#menucatalog a:hover
{
color: #fff;
background: #6E3030 url(left_active.gif) left top no-repeat;
padding-left: 10px
}

#menucatalog a:hover span
{
background: url(right_active.gif) right top no-repeat;
padding-right: 10px
}

#menucatalog ul
{
list-style: none;
padding: 0;
margin: 0;
}

#menucatalog li
{
padding-top:8px;
float: left;
margin: 0;
}

/* -------------------------------------------------- Disposition de l'agenda */
#agenda a{
 margin-bottom:3px;
}

table#agenda {
    background-color:#FFFFFF;
    border: solid #000 3px;
    width: 700px; 
    filter:alpha(opacity=30);  
    -moz-opacity:0.30;
    opacity: 0.30; 
}

table#agenda th {
    background-color:#6699FF;
    border: solid #000 1px;
    filter:alpha(opacity=100);  
    -moz-opacity:1;
    opacity: 1; 
}

table#agenda td {
    padding: 5px;
    border: solid #000 1px;
    filter:alpha(opacity=100);  
    -moz-opacity:1;
    opacity: 1; 
}
/* -------------------------------------------------- mise en valeur d'un paragraphe (artise, disque) */

.miseenvaleur{
  background:url(cadre.gif) no-repeat top right;
  width:450px;
  height:150px;
  margin-bottom:15px;
  margin-left:180px;
  filter:alpha(opacity=30);  
  -moz-opacity:0.30;
  opacity: 0.30; 
}
  

/* -------------------------------------------------- informations artistes */

#artistes a{
  font-size:12px;
  font-weight:normal;
  color:#000033;
  text-decoration:none;
  float:none;
  margin-left:30px;
  margin-top:2px;
  display:block;
}

#artistes a:hover{
  text-decoration:underline;
}
/* -------------------------------------------------- informations album */
#album a{
  font-size:12px;
  font-weight:normal;
  color:#000033;
  text-decoration:none;
  float:none;
  margin-left:30px;
  margin-top:2px;
  display:block;
}

#album a:hover{
  text-decoration:underline;
}
#album p{
  margin-top:5px;
  margin-left:30px;
  margin-bottom:0px;
}

/* -------------------------------------------------- Autres styles */
.Chapo{
 border:#999 1px dotted;
 padding:10px;
 margin:5px;
 color:#999;
}

.titrerouge{
  font-size:18px;
  color:#6E3030;
  margin-left:10px;
  }
.italic{
  font-size:12px;
  color:#666;
  text-align:center;
  font-style:italic;
  }
  
.rouge{
	font-weight:bold;
    color:#6E3030;
  }

.detail{
  font-size:11px;
  margin-left:10px;
  }
  
.vignette{
  border:#666 solid 0px;
  margin:0 auto;
}
.droite{
  float:right;
  margin-left:2px;
}
.gauche{
  float:left;
  margin-right:2px;
}
.centrer{
  text-align:center;
  margin-left,margin-right:auto;
}
.gaucheespace{
  float:left;
  margin-right:50px;
}

.clear{
 margin-top:10px;
 clear:both;
 }
 
.imagecatalog{
  float:left;
  margin:0;
}


.legende{
 text-align:left;
 font-size:9px;
 color:#666;
 margin:0px;
 padding:0px;
 }
 
 .legendesommaire{
 text-align:center;
 font-size:9px;
 color:#333;
 margin:0px;
 padding:0px;
 }

.menucatalog{
  margin:0;
  padding:0;
  width:150px;
  height:15px;
  border:#999999 1px solid;
  background-color:#333;
  background:url(menucatalog.gif) no-repeat top left;
  clear:left;
}

.catalogmenu{
 margin-right:10px;
 margin_bottom:5px;
 margin-top:auto;
 float:right;
}

.menushop{
  float:left;
  margin-left:10px;
  margin-right:5px;
}

.colonne {
  width: 40%;
  margin-bottom:10px;
  padding-left:0;
  padding-right:20px;
  float:left;
}

.selecteur{
 max-height:110px;
 height:110px;
 text-align:center;
}

.small{
  text-decoration:none;
  font-size:11px;
}