/* définitions générales Site mariehelenepioche */
html{
margin:0px;		/* marge nulle autour des objets */
padding:0px;		/* padding nul */
font-family: Verdana,"Times New Roman", Times, serif;
margin: 5px; font-size: 12pt;
background-color: #308787;
color: yellow;
width: 100%;
}

/* définitions du corps de page */
body{
font-size: 1em;
font-style: normal;
width: auto;
height: auto;
}
h1{
margin-top:1.5%;
font-size: 2em;
font-weight: normal;
text-align: center;
}
h2{
margin-top: 0.5%;
font-size: 2em;
font-weight: normal;
text-align: center;
}
h3{
margin-top:-2%;
font-size: 1.5em;
font-weight: normal;
text-align:center;
color:#A00000;
}
/* définitions du paragraphe */
p {
font-size: 1em;
font-weight: normal;
margin-left: 15px;
color: yellow;
}
/* définition de la première lettre d'un paragraphe */
p:first-letter{
}

/* définition de la première ligne d'un paragraphe */
p:first-line{
}

/* définition des listes */
li, li ul li{
margin-top: 0.2em;
margin-left: 2em;
font-size: 1em;
font-weight: normal;
text-align:left;
list-style:none;
}
/* lien */
a {
vertical-align: middle;
color: yellow;
text-decoration: none;
}
/* définition d'une ancre survolée */
a:hover{
color: blue;
}
/* définition d'une ancre visitée */
a:visited{
}
/* définition d'une ancre active */
a:active{
}

/* définition du défilant */
marquee{
text-align: left;
color: red;
font-size: 1em;
font-weight: bold;
margin-top:0%;
margin-bottom:0%;	
}

/* définition du modèle de présentation type table;
comprend table-header-group, table-cell, cell et table-footer-group */
#tableau {
display: table;
width: 100%;
height: auto;
}
/* entête de page dont titre du site */
#header {
display: table-header-group;
width: 98%;
height: 3em;
}
#header p {
text-align: center;
width: auto;
font-size: 2em;
background-image:-webkit-linear-gradient(top, #308787 0%, #eef 100%);
background-image: linear-gradient(to bottom, #308787 0%, #eef 100%);
border-radius: 0.3em;
margin: 0.1em;
box-shadow: 0.1em 0.1em 0.1em #999;
border:solid 0.05em #eef;
color: yellow;
}

/* menu et ses options */
#menu-accordeon {
display: table-cell;
list-style:none;
width: 12em;
}
#menu-accordeon ul {
padding:0;
margin-left: 0em;
list-style:none;
text-align: center;
}
#menu-accordeon li {
background-color:#fff; 
background-image:-webkit-linear-gradient(top, #308787 0%, #eef 100%);
background-image: linear-gradient(to bottom, #308787 0%, #eef 100%);
border-radius: 0.3em;
margin-top: 0.2em; margin-bottom: 0.2em; margin-left: -2em; margin-right: 0.2em;
box-shadow: 0.1em 0.1em 0.1em #999;
border:solid 0.1em #eef;
color: #fff;
}
#menu-accordeon li li {
max-height:0;
overflow: hidden;
transition: all 0.5s;
border-radius:0;
background: #308787;
box-shadow: none;
border:none;
margin:0
}
#menu-accordeon a {
display: block;
text-decoration: none;
text-align: left;
color: #fff;
padding: 0.1em 0.2em;
font-family: verdana;
font-size:1em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
font-size:1em
}
#menu-accordeon li:hover {
background: #308787;
}
#menu-accordeon li li:hover {
margin: 0.1em;
background: #377;
font-weight: bold;
}
#menu-accordeon ul li:last-child {
border-radius: 0 0 0.2em 0.2em;
border:none;
}

#menu-accordeon li:hover li {
max-height: 15em;
}
/* taille image logo accueil */
img.logo {
 margin-left: 0%;
 height: 5em;
 width: 12em;
}
/* taille image standard dans le menu (ex: search) */
img.menu {
margin-left: 5%;
height: 1.5em;
width: 1.5em;
}
/* taille image page accueil*/
img.imageaccueil {
margin-left: 18%;
height: 30em;
}

/* compteur de pages */
#pages_lues{
background: #409797;
color:#A00000;
width: 13em; 
margin-top: 1em;
margin-left: -0.5em;
padding: 0.2%;
font-size: 0.8em;
font-weight: normal;
}

/* compteur de visiteurs */
#visiteurs{
background: #409797;
color:#A00000;
width: 13em; 
margin: 0.1%;
margin-left: -0.5em;
padding: 0.2%;
font-size: 0.8em;
font-weight: normal;
}

/* corps de page */
main {
display: table-cell;
height: 38em;
width: 100%;
overflow:auto;
}

/* partie navigation par clic sur imagettes ou sur boutons défilement */
#nav {
display: cell;
margin-top: 0;
margin-left: 0.5%;
width: auto;
height: 7em;
}
/* définition aide clic sur imagettes */
#aideimagette {
display:block;
margin-top: 0em;
margin-left: 2em;
font-size: 0.8em;
color: yellow;
font-weight: normal;
height:auto;
}
/* définition de la liste imagettes  */  
div.liste_imagette {
float: left;
margin-top: -1em;
margin-bottom: 0%;
margin-left: 0%;
width: 100%; 
height: 6em;
background-color:#409797;
}

/* définition d'une imagette  */  
img.imagette{
float: left;
padding: 2px;
margin-left: 2px; margin-right: 2px;
margin-top: 5px; margin-bottom: 5px;
height: 5em;
width: auto;
}

/* définition titre du média */
#titre_media {
display:block; 
margin-top: 0.5%;
margin-left: 0.5%;
width: 99%;
height: 2em;
}
#titre_media p {
margin-top: 0.3em;
margin-left: 26%;
font-size: 1em;
font-style: italic;
font-weight: normal;
text-align: left;
color: yellow;
}

/* définition média */
main media {
display: cell;
margin:0.2%; 
padding: 1%;
height: auto;
width: auto;
overflow:auto;
}
/* cas du média image */
main media img {
margin: auto;
margin-left: 25%;
height: 25em;
}

/* définition légende du média */
#legende_media {
display:block; 
margin-left: 0.5%;
width: 99%;
height: 2em;
}
#legende_media p {
margin-top: 0.3em;
margin-left: 26%;
font-size: 0.8em;
color: yellow;
}

/* Recherche: couleur de surlignement pour recherche */
span {
background-color: #0c0;
}

/* texte préformaté */
pre{
overflow:auto ;
}

/* photo page A propos */
#photoartiste{
display: block;
border: none;
margin-top: -3%;
margin-left: auto;
margin-right: auto;
width: auto;
height: 12em;
text-align: center;  /* IE */
}
/* photo page contact */
#photocontact {
display:block;
margin-left: auto;
margin-right: auto;
height: 20em;
}

/* pied de page */
#footer {
display: table-footer-group; 
background: #409797;
width: 98%;
height: auto;
border: 1px solid blue;
}
#footer p{
display: inline;
text-align:center;
margin-left: 0.2em; 
font-size: 0.8em;
color: #600000;
}
/* format images W3C validator */
img.valide {
margin-top: 0.1em;
border:0; width:5em; height:2em;
}

/* définition du div zoom */ 
div.zoom {
width:99.8%;
}
img.zoom{
display:block;
width: 90%;
margin-top:2%; 
margin-left:auto;
margin-right:auto;
margin-bottom:2%;
}

/* pages en construction */
p.construction {
padding-top: 4em;
font-size: 1.2em;
text-align:center;
color: maroon;
}

/* Gestion des petits écrans genre mobile */
@media screen and (max-width: 768px) {
#header {
display: block;
width: auto;
height: 2em;
}
#header p {
text-align: left;
font-size: 1.3em;
background-image:none;
border-radius: none;
margin: 0.1em;
box-shadow: none;
border:none;

}
/* écarter les boutons de menu */
#menu-accordeon li {
margin-top: 0.8em; margin-bottom: 0.8em;
}
img.imageaccueil {
margin-left: 0;
height: 20em;
}
main {
display: block;
width: 26em;
}
#nav {
margin-left: 0;
margin-top: 0;
width: 26em;
height: 4em;
}
#aideimagette {
 display:none;
}
div.liste_imagette {
float: left;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
width: auto; 
height:auto;
background-color:#409797;
}
/* définition du titre média  */  
#titre_media{
float: left;
margin-top: 0em;
margin-left: -5.5em;
}
main media {
float:left;
margin-top: 2em;
margin-left:auto;
padding: 0.2em;
height: 31em;
width: auto;
height: auto;
overflow: auto;
border: 1px #888 solid;
}
main media img {
display:block;
margin: auto;
width: 25em; 
height: auto;
}
#legende_media{
float:left;
margin-left:-5.5em;
}
#footer {
display: block;
width:auto;
}
#footer p{
text-align: left;
}
 div.critere {
  width: 100%;
  height: auto;
  border: 1px solid black;
 }
 p.critere input {
  width: 98%;
  font-size: 4em;
 }
}