/* définition générales Site de Françoise Rozé Braud */
html{
margin: 0;		/* marge autour des objets */
padding: 0;		/* padding nul */
background-color: white; /* couleur générale de fond */
color: black; 		/* couleur générale de caractère */
width: auto;
}
/* définitions du corps de page */
body{
font-size: 1em;
font-style: normal;
font-family: "Times New Roman", Times, serif;
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:2em;
font-weight: normal;
text-align: center;
color: #222;
}
/* définitions du paragraphe */
p{
font-size: 1.5em;
font-weight: normal;
margin-left: 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:#555;
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 générale des textes */
p.texte {
text-align:left;
margin-left:2em; 
font-size: 1.2em;
}
/* p de défilant */
marquee{
text-align: left;
color:red;
font-size:1.5em;
font-weight: bold;
margin-top:0.5%;
margin-bottom:0.5%;	
}

#tableau {
display: table;
width: 100%;
height: 55em;
}
/* titre du site */
#header {
display: table-header-group;
width:auto;
}
#header p {
text-align: center;
font-size: 2.5em;
font-weight: bold;
}
/* menu et ses options */
#menu-accordeon {
display: table-cell;
list-style:none; 
width: 15%; 
}
#menu-accordeon ul {
padding: 0;
list-style: none; 
}
#menu-accordeon li {
background-color:#ddd; 
margin-left: -20%;
margin-right: 5%;
font-size: 1em;
color: black;
}
#menu-accordeon a {
display: inline;
text-decoration: none;
text-align: center;
color: #111;
padding: 0.1em 0.2em;
font-family: "Times New Roman", Times, serif;
font-size:1.5em;
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
font-size:1em;
}
#menu-accordeon li:hover {
background: #aaa;
color: white;
}

main {
display: table-cell;
height: 35em;
width: 85%;
border: 1px solid #ccc;
}

#nav {
display: block;
margin-left: 0;
margin-top: 0;
width: auto;
}
#rappel_categorie {
margin-top: 0;
margin-left:0;
width:auto;
height:2em;
font-size: 1.5em;
font-weight: bold;
padding-top:0.5em;
padding-left: 1em;
color: black;
background-color: #eee;
}

#aideimagette {
 clear: both;
 margin-top: -0.5em;
 margin-left: 0.5em;
 font-size: 1em;
 color: black;
 font-weight: normal;
}

#fleches {
}
#bouton_n {
 position:relative;
 top: 0em;
 right: -50em;
 background-color: #fff; 
 border: solid 1px white;
}
#bouton_p {
 position:relative;
 top: 0em;
 left: 10em;
 background-color: #fff; 
 border: solid 1px white;
}
#titre_media {
display:block; 
margin-top: 0;
margin-left: 11em;
width: auto;
height: 2em;
}
#titre_m {
 display: inline;
 width:auto;
 font-size: 1.5em;
 font-weight: bold;
 color: black;
}
#media_m {
display: block; 
width: auto;
height: auto;
overflow: auto;
}

main media img {
 margin-left: 10%;
 margin-right: auto;
 width: auto;
 height:30em;
}
#legende_media {
display:block; 
margin-left: 11em;
width: auto;
height: 2.8em;
}
#legende_m {
 font-size: 1em;
 color: black;
}
/* format images W3C validator */
img.valide {
 margin-top: 0.1em;
 border:0; width:5em; height:2em;
}
#footer {
display: table-footer-group;
background: #eee;
width: auto;
height: auto;
border: 1px solid #aaa;
}
#footer p{
display: inline;
text-align:center;
margin-left: 0.2em; 
font-size: small;
color: black
}

/* sous menu des galeries */
#sousmenu {
 margin: 0 auto;
 width: 65%;
}
/* définition de la page frgalerie.txt */  
td.galerie {
 padding: 5px;
 border: 1px solid black;
 }	
img.galerie {
 margin: 0;
 padding: 0;
}
/* définition de la page frgalerie.txt */  
div.galerie {
 float: left; 
 width: 23%; 
 height: 13%;	
 margin:0.5%;
 margin-top: 0.5%;
 border: 1px solid #ccc; 
 }
p.galerie {	
 font-style: normal;
 font-size:100%;
}	
img.galerie {
 float: left;
 margin: 0%;
 padding: 3px;
 width: 63%; 
 height: auto;
}

/* définition accueil */
p.accueil {
font-size: 1.5em;
margin: 1em;
margin-top: -2em;
padding-bottom: 2em;
width: auto;
height: auto;
}
#imageaccueil {
float: right;
margin: 2em;
}

/* définition div contact et survol mailto de contact */
div.contact{
margin-top: 0%;
}
.contact a:hover{
 color:blue;
}
img.imagecontact {
 border: 1px solid black;
 margin: 1em;
 padding:0.5%;
 height: auto;
}
/* Recherche: couleur se surlignement */
span {
 background-color: #5f5;
}

img.imageaccueil {
 height: 250px;
}
/* définition du div liste imagettes  */  
div.liste_imagette{
 float: left; 
 height: auto; 
 width: 25%; /* partage avec cadre_media */
 margin-top: 1em;
 margin-left: 0%;
 overflow: auto;
/* border:1px solid #ddd; */ 
}
/* lien imagette */
a.imagette:hover{
 }
/* définition du div imagette  */  
img.imagette{
/* border:0.1em #444 solid; */
 float: left;
 margin: 0.5%;
 padding: 0.3%;
 width: 30%;
 height: auto;
}

/* 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:auto:
}
#header p {
text-align: left;
font-size: 1.5em;
}
#menu-accordeon {
display: block;
list-style:none; 
width: 12em; 
}

#menu-accordeon li {
margin-left:1em;
margin-top: 0.2em;
margin-bottom: 0.3em;
font-size: 1.1em;
}
main {
display: block;
margin-top: 1em; 
margin-left: 0;
width: 26em;
height: auto;
border: none;
}
#nav {
margin-left: 0;
margin-top: 0;
width: auto;
height: 4em;
}
#sousmenu {
 margin: 0 auto;
 width: auto;
}
#aideimagette{
display: none;
}
#rappel_categorie {
margin-top: 0;
width:auto;
height:1.5em;
font-size: 1.5em;
font-weight: bold;
padding-top:0.3em;
padding-left: 1em;
padding-bottom:0.3em;
color: black;
background-color: #eee;
}
/* définition du div liste imagettes  */  
div.liste_imagette{
float: left; 
width: 100%;
height: auto; 
margin-top: 0.5em;
margin-bottom: 0.5em;
overflow: auto;
border:1px solid black;
}
/* lien imagette */
a.imagette:hover{
 }
/* définition du div imagette  */  
img.imagette{
 float: left;
 margin: 0.1em;
 padding: 0.1em;
 width: 15%;
 height: auto;
}
#aidebouton {
margin-top: 3em;
margin-left: 10em;
font-size: 0.7em;
}
#fleches {
}
#bouton_n {
 position:relative;
 top: 0em;
 left: 20em;
 background-color: #fff; 
 border: solid 1px white;
}
#bouton_p {
 position:relative;
 top: 0em;
 left: 2em;
 background-color: #fff; 
 border: solid 1px white;
}
/* définition du média  */  
#titre_media{
float:left;
margin-top: -0.5em;
margin-left: 1em;
margin-bottom: 0.5em;
}
main media {
float:left;
margin-top: 3em; 
padding: 0.2em;
height:30em;
width: auto;
overflow: auto;
}
main media img {
display: block;
margin: auto;
padding: 3px;
width: 25.5em; 
height: auto;
}
#legende_media{
float: left;
margin-left: 2em;
margin-top: 0em;
margin-bottom: 0.5em;
}

#footer {
clear:both;
width: auto;
}
#footer p{
text-align: left;
}
p.accueil {
font-size: 1em;
padding: 0.5em;
padding-bottom: 2em;
width:auto;
}
img.imageaccueil {
 float: none;
 height: 12em;
 width: 16em;
}

img.imagecontact {
 border: 1px solid black;
 margin: 0.5em;
 padding:0.5%;
 height: 16em;
 width: 12em;
}
div.critere {
width: 100%;
height: auto;
border: 1px solid black;
}
p.critere input {
width: 98%;
font-size: 4em;
}
}