@charset "utf-8";

/************************
       NOUVEAU MENU
*************************/
/* https://www.w3schools.com/css/css_navbar.asp */

.menu ul {
    list-style-type: none;
    font-family: "Arial";
    font-size:14px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu li a:hover {
    color: #000;
    background-color: #bbb;
}


/* **************
   Grandes lignes
   *************/

body {
  font-family:'Comic Sans MS', Verdana, Arial, Helvetica, sans-serif;
  font-size:medium;
  color:black;     
  margin:0px;
  padding:0px;
  text-align:justify;
  background-color:#000000;
  background:url(../images/fond_2600x1720.jpg) no-repeat bottom center fixed;
  -webkit-background-size : cover;
     -moz-background-size : cover;
      -o-background-size  : cover;
        background-size   : cover;
}     

.page {
   width:1024px;
   margin-top:0;
   margin-bottom:40px;
   margin-left:auto;
   margin-right:auto;
   border-top:2px solid black;
   border-bottom:2px solid black;
   border-right:2px solid black;
   border-left:2px solid black;
   background-image:url('../images/texture_michel.jpg');
   background-repeat:repeat;
}

.utile {
   font-family:Arial,Helvetica,sans-serif;
   color:Black;
   margin-left:10%;
   margin-right:10%;
}

h1 {
   font-size:50px;  
   font-weight:bold;
   text-align:center;
   padding-top:1.2em; 
   padding-bottom:0.4em; 
}

h2 {
   font-size:30px;
   font-weight:bold;
   padding-top:0.4em;
   text-align:left;
}

h3 {
   font-size:22px;
   font-weight:bold;
   font-style:italic;
   padding-top:1em;
   text-align:left;
   color:black;
}

p {
   font-size:18px;
   padding-top:0px;
   /* padding-top:6px; */
   text-align:justify;
}


/**************************************
 Concerts passés, présents et à venir
**************************************/

.prochain_concert {
  display:block;
  height:400px;
  width:auto;
  margin-left:auto;
  margin-right:auto;
  padding:0;
}

.concert {
  font-size:30px;
  padding-top:10px;
}

img.concerts_passes {
  display:block;
  width:400px;
  margin-left:auto;
  margin-right:auto;
}

table.affiche {
  width:900px;
  margin-left:auto;
  margin-right:auto;
}

.affiche {
  text-align:center;
}

tr.affiche {
  height:150px;
}

td.affiche {
  width:300px;
  margin:0;
  padding:5px;
  text-align:center;
}

.vignette {
  height:150px;
  width:auto;
}

tr.legende {
  height:70px;
}

.annee, .descr {
  font-family:Arial; 
  text-align:center; 
  margin:0;
  padding:0;
}

.annee {
  font-size:22px; 
  font-weight:bold; 
}

.descr { 
  font-size:16px; 
}

#map {
  height:400px;
  width: 500px;
  margin: 10px auto;
  border: 1px double black;
}


/**********************
       Contacts
**********************/

.qui,.comment {
  font-family:Arial,Helvetica,sans-serif;
  color:black;
  margin:0;padding:0;
  margin:0;
  padding:0; 
  text-align:center;
}

.qui {
  font-size:24px; 
  font-weight:bold;
  margin-top:30px; 
}
.comment {
  font-size:22px; 
}


/*****************************
    Musique ancienne façon
*****************************/

div.ecarte {
  height:12px;
}

table.msk {
  margin-top:0;
  border:double black;
}

tr.msk {
  height:50px;
  background-color: WhiteSmoke;
}

tr.msk:hover {
  background-color: #ddd;
}

td.msk {
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:bold;
  color: black;
  padding:0px;
  margin:0px;
  border:1px solid black;
  text-align: center;
  vertical-align: middle;
  border-left:1px dashed dimgray;
  border-right:1px dashed dimgray;
}

tr.tete {
  height:40px;
}

td.tete {
  font-size:14px;
  font-weight:bold;
  background-color: Gainsboro;
}

.court {
  width:50px;
}

.large {
  width:100px;
}

.msk a:hover { 
  color:red;
  font-weight:bold;
}

p.msk_auteur {
  font-family:Arial;
  font-size:20px;
  font-weight:bold;
  margin-top:50px;
  margin-bottom:0px;
}   
     
p.msk_oeuvre {
  font-family: "Times New Roman", serif;
  font-size:18px;
  font-style:italic;
  margin:0;
  padding:0;
}        

td.msk_morceau {
  width: 250px;
  font-family: "Times New Roman", serif;
  text-align:left;
  font-size:18px;
  font-style:italic;
  border-top:1px solid black;
  padding-left:5px;
}


/**********************
        Bureau
**********************/

.bureau table {
  font-size:20px;
}
  
.bureau tr {
  height:35px;
  vertical-align:center;
}
  
.bureau th {
  width:320px;
  font-weight:bold;
}


/************************
        Coulisse
************************/

.coulisse {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino,serif;
  font-size: 18px;
  color: Black;
  margin: 10px 10%;
}

.coulisse h1 {
  font-family: Arial;
  font-size: 25px;
  margin-top: 40px;
}



.agenda {
  font-size: 22px;
  padding-top: 8px;
  font-weight: normal;
}

.agenda ul {
  padding-left: 10px;
}

.agenda li {
  margin-left: 10px;
  margin-bottom: 12px;
}

.saison {
  margin-top: 15px;
  padding: 0;
}

.saison h1 {
  text-align: center;
  line-height: normal;
  margin:0;
  padding: 0;

}

.saison p {
  font-size: 22px;
  text-align:center;
  line-height: normal;
  margin-top: 2px;
  margin-bottom: 8px;
}
.saison p a { text-decoration: none;}
.saison p a:link, .saison p a:visited { color: black;}
.saison p a:hover, .saison p a:active { color: red;}


/*******************************
          agenda popup
*******************************/

.agenda_popup {
  font-family: "Arial" ;
  color:Black;
  max-width: 600px;
  margin: 0;
  padding-left: 5%;
  padding-right: 5%;
  border: 2px solid black;
  border-radius: 0px;
  background-image: url("../images/texture_tileable_wood.png");
  background-repeat: repeat;
  -webkit-box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.54);
}

.agenda_popup h1 {
  color: White;
  font-size: 26px;
  text-align: center;
  text-shadow: 1px 1px 2px black, 0 0 25px Moccasin, 0 0 5px Black;
}

.agenda_popup h2 {
  color: DimGray;
  font-size: 22px;
  font-weight: bold;
  margin-top: 30px;
}

.agenda_popup h3 {
  color: DimGray;
  font-size: 18px;
  font-weight: normal;
  margin-top: 20px;
}

.agenda_popup .rubrique {
  margin-left: 25px;
}

.agenda_popup .partie {
  margin-left: 40px;
}

.agenda_popup p {
  font-size: 16px;
  margin-bottom:10px;
}

.dispatch {
  line-height:1.4;
}

.dispatch li {
  padding: 5px 0px;
}


/************************************
          Fichiers musicaux                     
************************************/

.musique .auteur {
  font-family:Arial;
  font-size:20px;
  font-weight:bold;
  margin-top:50px;
  margin-bottom:0px;
}   
     
.musique .oeuvre {
  font-family: "Times New Roman", serif;
  font-size:18px;
  font-style:italic;
  margin:0;
  padding:0;
}        

.musique table {
  margin-top:0;
  border:double black;
}

.musique tr {
  height:50px;
  background-color: WhiteSmoke;
}

.musique tr:hover {
  background-color: #ddd;
}

.musique thead tr {
  height:40px;
}

.musique thead th {
  background-color: Gainsboro;
}

.musique thead th, .musique tbody td {
  width:100px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
  border-left:1px dashed dimgray;
  border-right:1px dashed dimgray;
  border-top: 1px solid black;
}

.musique tbody th {
  width: 250px;
  font-family: "Times New Roman", serif;
  font-weight: normal;
  font-size: 18px;
  font-style: italic;
  text-align: left;
  border-top: 1px solid black;
  padding-left: 5px;
}

.musique .long   { width:250px; }
.musique .normal { width:100px; }
.musique .court  { width:50px;  }

</style>



/**************************
          oeuvres                     
**************************/

.repertoire {
  width: 60%;
  margin: 0 auto 150px;
}

.oeuvres {
  font-family:'Palatino Linotype','Book Antiqua',Palatino,serif;
  width: 60%;
  margin: 0 auto 150px;
}

.oeuvres h1 {
  font-family:'Arial';
  font-size:40px;
  font-weight: bold;
  margin: 40px auto 20px;
  padding: 25px 0 0 0;
}

.oeuvres h2 {
  font-size:24px;
  font-weight: bold;
  margin: 0;
  padding: 25px 0 0 0;
}

.oeuvres h3 {
  font-size:16px;
  margin: 0;
  padding: 0;
}       

.oeuvres ul {
  font-family:'Palatino Linotype','Book Antiqua',Palatino,serif;
  font-style: italic;
  font-size: 22px;
  list-style-type: none;
  margin: 0;
  padding: 3px 0 0 25px;
}



/********************************
         Petits bouts 
********************************/


.iconerie {
  width:25px;
}

.nwc {
  font-size:12px;
}

.separico {
  margin-top:4px;
}

.ecart p {
  marging-top: 15px;
}

.saut20 p {
  marging-top: 20px;
}

.gras {
  font-weight: bold;
}

.rouge {
  color: red; font-weight: bold;
}

.clic {
  font-style: italic;
  color: DarkBlue;
}

.milieu {text-align: center;
}


img.a_gauche {
   display:block;
   float:left;
   padding:10px;
}
img.a_droite {
   display:block;
   float:right;
   padding:10px;
}
img.au_centre {
   display:block;
   margin-left:auto;
   margin-right:auto;
   padding:10px;
}