/*
-------- STRUCTURE -----------

      Ne pas modifier !

Any change in this section
is likely to rip off the very fabric of reality
(or at least spark off wavelets in the space-time continuum)

*/

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

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

div#container_left {
position: fixed;
top: 0;
left: 0;
height:100%;
overflow: auto;
margin: 0;
padding: 0;
width: 20%;
}

div#content_left {
padding: 1em;
margin: 0;
padding-top: .2em;
}

div#menu {
margin-right: 0em;
margin-left: 0em;
width: 100%;
position: relative;
right: 0em;
padding-left: 0em;
padding-right: 0em;
}

#menu dl {
margin-bottom:0;
margin-top:0;
}

#menu dd {
margin-left:.5em;
margin-top:.2em;
margin-bottom: 0;
font-size:1.1em;
}

#titre_ens a {
text-decoration:none;
color:inherit;
}

p.logo {
text-indent: 0;
text-align: center;
margin-bottom: .6em;
width: 100%;
margin-top: 0em;
}

.logo img {
max-width:100%;
}

#menu a {
text-decoration: none;
color: inherit;
font-size: 1.1em;
}

#menu dt {
font-weight: bold;
color:#006600;
font-size: 1.1em;
}

img.spacer {
width: 100%;
height: 4px;
margin-top: .4em;
margin-bottom:.4em;
}

div#container_right {
margin-top: 0;
padding: 0;
position: absolute;
right: 0%;
top: 0;
left: 20%;
min-height: 100%;
}

div#titre_ens {
text-align: center;
font-family: serif;
font-size: 1.2em;
margin-top: 0;
padding-top: 0.2em;
padding-bottom: .8em;
color: #006600;
width: 100%;
}

#titre_ens h1 {
margin-top:.4em;
margin-bottom:.4em;
}

div#bandeau_gauche {
width: 80%;
height: 30px;
overflow: hidden;
float: left;
text-align:left;
}

div#bandeau_droite {
width: 20%;
height: 30px;
text-align: right;
overflow: hidden;
position: relative;
}

img.bandeau {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

p.chemin {
font-family: sans-serif;
font-size: .8em;
margin: 0;
margin-left:.5em;
line-height: 30px;
max-width:100%;
z-index: 2;
position: relative;
bottom: 34px;
color: #330099;
}

p#version {
right: .5em;
text-indent: 0;
display: inline-block;
}

#version img {
position: relative;
top: 4px;
}

div#page_content {
padding-left: 2em;
padding-right: 1em;
padding-bottom: 1em; /* marge apparente */
margin-top: 0em;
margin-bottom: 6em; /* doit correspondre � la hauteur du footer */
margin-left: 0;
margin-right: 1em;
}

img#print {
float: right;
margin-top: .4em;
margin-right: .3em;
}

h2#titre_page {
text-align: center;
font-size: 1.8em;
margin-bottom: 1em;
margin-top: 0.8em;
}

div#menu_page {
float: right;
max-width: 30%;
border: 2px solid green;
/* background: #9ACD32; */
margin-left: 2em;
margin-bottom: 1em;
margin-top: 1em;
color: #006600;
}

#menu_page ul {
list-style: none;
padding-right: .8em;
padding-bottom: 0.2em;
padding-left: 1em;
margin-top: .6em;
margin-bottom: .6em;
}

#menu_page a {
color: #006600;
}

#menu_page li {
font-size: 110%;
line-height: 1.7em;
}

#menu_page p {
text-align: center;
text-indent: 0;
margin-top: .6em;
margin-bottom: .6em;
}

p#menu_bas, p.haut_page  {
width: 100%;
text-align: center;
text-indent:0;
font-size: 110%;
margin-bottom: 1.5em;
}

div#footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 6em;
border-top: 1px solid black;
padding-top: 0;
}

/* !!! checker structure du footer !! */

/*div#footer_gauche {
width: 75%;
height: 6em;
overflow: hidden;
float: left;
text-align:left;
}

div#footer_droite {
width: 25%;
height: 6em;
text-align: right;
overflow: hidden;
position: relative;
}*/


div#footer_droite {
width: 25%;
position: absolute;
right: 0;
height: 6em;
margin: 0;
text-align: right;
display: table;
}

div#valid {
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0;
max-width: 100%;
}

#footer_droite a {
max-width: 100%;
}

div#footer > #footer_droite img {
padding: 0;
max-width: 100%;
max-height: 3em;
}

div#footer_gauche {
width: 75%;
height: 0em;
text-align: center;
padding-top: 0;
}


#footer_gauche p {
text-align: center;
margin-top: 0.6em;
margin-bottom: 0em;
position: relative;
max-width: 100%;
}


/* -------- FIN structure -------- */


/* Style g�n�ral */


/*taille et police du texte  */
html {
font-family: Arial, sans-serif; /* en mettre plus */
font-size:13px; /* 14 ? */
font-weight: 500; /* 500 : ne change rien */
}

h2 {
text-align: center;
color: grey;
font-size: 160%;
margin-bottom: 2em;
}

h3 {
font-size: 120%;
}

p {
text-indent: 2em;
text-align: justify;
line-height: 150%;
}

p.trad {
text-indent: 0;
margin-left: 2em;
font-style: italic;
}


/* images */

a img {
border: none;
}

img.puce {
width:.7em;
height:.7em;
}

/* div illustr�e par une photo */
/*la <div class="illu"> n'a pas de style, c'est juste un d�limiteur,
mais son contenu doit �tre en gros assez long que l'image */
/* la photo elle-m�me, dans une div de max-width 50%, a une max-width 100% */

div.photo {
float: right;
max-width: 50%;
margin-right: .5em;
margin-top: .5em;
margin-left: 2em;
margin-bottom: 2em;
text-align: center;
}

.photo img {
max-width: 100%;
}

p.legend {
margin-top: .2em;
font-size: 11px;
font-style: italic;
text-indent: 0;
max-width:80%; /* pas optimal */
margin: 0 auto;
text-align: center;
}

.post_photo { /* en dehors de la div illustr�e */
clear: both;
}

/* images-contenu (prennent tte la largeur de la page) */

p.image {
max-width: 100%;
}

.image img {
max-width:100%;
display: block;
margin-right: auto;
margin-left: auto;
}




/* tables */

table {
font-size: 100%;
border-collapse:collapse;
border:1px solid black
}

table td, th {
border: 1px solid black;
padding:.3em;
}

/* discographie */

ul.discographie li{
    list-style: none;
    float: left;
    margin: 5px;
}


ul.discographie img {
    border: solid 1px black;
    display: block;
    height: 227px;
    width: 227px;
}

/* CD */

.CD img, .CD table {
    float: left;
}

.CD img
{
max-width: 40%;
margin: 1em;
}

.CD table {
border-style:none;
margin-left:2em;
}

.CD th, .CD td {
border-style:none;
}


.CD td.duree {
    text-align: right;
}

.CD div.dedi_cd {
		float:left;
		max-width:40%;
		margin:1em;
    text-align: center;
}

.dedi_cd p {
text-align: center;
text-indent: 0em;
}



/* reste */
.repertoire dt {
font-weight: bold;
}
.oeuvre, .repertoire dd {
font-style: italic;
}


/* css pour les mobiles */
.menu_contenu { width: 100%; font-size: large; background: green; text-align:center;}
.menu_contenu:hover { background: yellow; }