/* définition générales Site aslmanet */
html{
 margin: 0;		/* marge autour des objets */
 padding: 0;		/* padding nul */
 background-image: url("../maslsite/image/BanniereASL.jpg"); 
 background-size: auto;
 background-repeat: no-repeat;
 background-position: center top;
 background-attachment: scroll;
 background-color: #eef; /* couleur générale de fond */
 color: #111; 	 /* #44d;couleur générale de caractère */
 width: auto;
 overflow-y: scroll;
}
/* définitions du corps de page */
body{
 font-size: 1em;
 font-style: normal;
 font-family: Verdana,"Times New Roman", Times, serif;
 width: auto;
 height: auto;
 margin-top: 75px;
}
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: green;
}
/* définitions du paragraphe */
p {
 font-size: 1em;
 font-weight: normal;
 margin-left:0.1em;
 text-align: left;
}
/* 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 de 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: blue;
 text-decoration: none;
}
/* définition d'une ancre survolée */
a:hover{
 font-weight: bold;
}
/* définition d'une ancre visitée */
a:visited{
}
/* définition d'une ancre active */
a:active{
}
/* p de défilant */
marquee{
 margin-top: 4em;
 text-align: left;
 color: red;
 font-size: 1em;
 font-weight: bold;
 margin-bottom:0%;	
}
#tableau {
display: table;
width: 100%;
height: auto;
}
/* titre du site */
#header{
display: table-header-group;
width: auto;
height: 3em;
}
#header p {
text-align: justify;
width: auto;
font-size: 1.8em;
}
/* menu et ses options */
#menu-accordeon {
display: table-cell;
list-style:none;
width: 10em;
height: auto;
/* border: 1px solid green; */
}
#menu-accordeon ul {
padding:0;
list-style:none;
margin-left: 0;
}
#menu-accordeon li {
background-color:#fff; 
/*background-image:-webkit-linear-gradient(top, #050 0%, #eef 100%); */
background-image: linear-gradient(to bottom, #252 0%, #aaa 100%);
border-radius: 0.3em;
margin-left: -1.8em; margin-right: 0.2em; margin-top: 0.1em; margin-bottom: 0.2em;
box-shadow: 0.1em 0.1em 0.1em #999;
border:solid 0.1em #282; 
color: #fff;
}
#menu-accordeon li li {
max-height:0;
overflow: hidden;
transition: all 1.5s;
border-radius:0;
background: #666;
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: #775;
}
#menu-accordeon li li:hover {
margin: 0.1em;
background: #883;
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;
}
/* compteur de pages */
#pages_lues{
background: #eee;
color:#222;
width: 14em; 
margin-top: 0.1em;
margin-left:0.1em;
padding: 0.2%;
font-size: 0.8em;
font-weight: normal;
border: 0.1em #444 solid;
}
/* compteur de visiteurs */
#visiteurs{
background: #eee;
color:#222;
width: 14em; 
margin: 0.1%;
margin-left: 0.1em;
padding: 0.2%;
font-size: 0.8em;
font-weight: normal;
border: 0.1em #444 solid;
}
/* taille image logo accueil: si sa taille augmente, le cadre nav descend ! */
img.logo {
 margin-top: 0;
 margin-left: 0;
 height: 5em;
 width: 15em;
}
/* taille image standard dans le menu remplaçant un texte (ex: search) */
img.menu {
 margin-left: 35%;
 height: 1.5em;
 width: 1.5em;
}
main {
display: table-cell;
height: auto;
width: 70em;
}
#nav {
/*display: block; */
margin-left: 0.5%;
margin-top: 0;
width: 99%;
height: 5em;
/* border: 1px solid green; */ 
}
#rappel_categorie {
margin-top: 0;
margin-left:0.5em;
width:98.5%;
height:1.5em;
color: green;
background-color: white;
}
#aidebouton {
 margin-top: -2em;
 margin-left: 15em;
 font-size: 0.5em;
}
#aidebouton p {
 margin-left: 10em;
}
#aideimagette {
 clear: both;
 margin-top: -2.4em;
 margin-left: 2em;
 font-size: 0.5em;
 color: green;
 font-weight: normal;
}
#titre_media {
/*display:block;*/ 
margin-top: 0%;
margin-left: 0.5%;
width: 99%;
border: 1px solid green; 
height: 2em;
}
#titre_m {
 margin-top: 1em;
 font-size: 1.5em;
 font-weight: bold;
 color: green;
}
main media {
display:block; /* essentiel au bon fonctionnement */
margin:0.5%; 
padding: 1%;
border:1px green solid; 
height: auto;
width: auto;
overflow: auto;
}
main media img,p {
 display:inline; /* essentiel au bon fonctionnement */
 margin: auto;
 margin-left: 20%;
 max-height: 30em;
 max-width: 100%;
}
#legende_media {
display:block; 
margin-left: 0.5%;
width: 99%;
height: 2em;
border: 1px solid green; 
}

#legende_media p {
 margin-top: 0.3em;
 margin-left: 2em;
 font-size: 0.8em;
 color: green;
}
/* survol mailto de contact */
.contact a:hover{
 color:green;
}
/* Recherche: couleur de surlignement pour recherche */
span {
 background-color: #0c0;
}

/* texte préformaté */
pre{
 overflow:auto ;
}
/* définition du div liste imagettes  */  
div.liste_imagette {
 float: left; 
 height: 27em; 
 width: 10%; /* partage avec media */
 margin-top: 7%;
 margin-left: 1%;
/* border:1px green solid; */
}
/* lien imagette */
a.imagette:hover{
 color: green;
 }
/* définition du div imagette  */  
img.imagette{
 border:0.1em #444 solid; 
 float: left;
 margin: 0.5%;
 padding: 0%;
 width: 44%;
 height: auto;
}
/* définition des flèches 
div.liste_fleche {
 height: 5em; 
 width: 96%;
 margin: 0 auto ; 
border: 1px solid red;
}
*/
#bouton_f {
 position: relative;
 left: -25em; top: 2em;
 height: 1.7em; 
 border: 0;
 background-color: green;
}
#bouton_p {
 position: relative;
 left: -20em;  top: 2em; 
 height:1.7em; 
 background-color: green;
}
#bouton_n {
 position: relative;
 top: 2em; left: 20em;
 height:1.7em;
 background-color: green;
}
#bouton_l {
 position: relative;
 top: 2em; left: 15em;
  height:1.7em; 
  border:0;
 background-color: green;
}
#footer {
 display: table-footer-group;
 background: white;
 width: auto;
 height: auto;
 border: 1px solid blue;
}
#footer p{
 display: inline;
 text-align:center;
 margin-left: 0.2em; 
 font-size: small;
 color: green
}
// affichage des tableaux
table.matable {
border: 1px solid #222;
}
tr:nth-child(even) 
{background: #CCC}
tr:nth-child(odd) 
{background: #FFF}

/* 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;
}
div.critere {
margin-top: 0.5em;
margin-left: -20em;
}
div.reponse {
margin-top: 7em;
}
/* Gestion des petits écrans genre mobile */
@media screen and (max-width: 800px) {
html {
 margin-left:1em;
 background-image: url("../maslsite/image/BanniereASLsmart.jpg"); 
 background-size: auto;
 background-position: center top;
 background-attachment: scroll;
}
body {
 margin-top: 20px;
}
#header {
 display: block;
 width: 28em;
}
#header p {
 text-align: center;
}
main {
display: block;
width: 26em;
}
#nav {
margin-left: 0;
margin-top: 0;
width: 26em;
height: 4em;
}
#aidebouton {
 display:none;
}
div.liste_fleche {
 display:block;
 height: 5em; 
 width: 96%;
 margin: 0 auto ; 
 border: 1px red solid; 
/* overflow: auto; */
}
#bouton_f {
 position: relative;
 top: 2em; left: -5em; 
}
#bouton_p {
 position: relative;
 top: 2em; left: 0em;
}
#bouton_n {
 position: relative;
 top: 2em; left: 6em;
}
#bouton_l {
 position: relative;
 top: 2em; left: 11em;
}
/* définition du titre média  */  
#titre_media{
margin-top: 0;
margin-left: 0em;
font-size: 1.1em;
color: maroon;
}
#titre_m {
 margin-top: 1em;
 margin-left:0.2em;
 font-size: 1em;
 font-weight: bold;
 color: green;
}
main media {
/*display:block; décale l'accueil !!! */
margin:0.5%; 
padding: 1%;
height: 40em;
width: auto;
overflow: auto;
}
main media img {
 display:block;
 margin: auto;
 width: auto; 
}
#footer {
 display: block;
 width: 27em;
}
#footer p{
 text-align: left;
}
 div.critere {
  width: 100%;
  height: auto;
  border: 1px solid black;
  margin-left: -1em;
 }
 p.critere input {
  width: 98%;
  font-size: 1em;
 }
div.reponse {
margin-top: 7em;
} 
div.reponse a {
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 1em;
}
}