/* ATTENTION : NE PAS METTRE D'ACCENTS MEME DANS LES COMMENTAIRES A CAUSE DE IE6 */

/* RESET (aussi dans tableaux et formulaires) */
html, body { margin:0; padding:0; }
* { font-family:"arial","helvetica","liberation sans","freesans", sans-serif; /*text-align:justify;*/ } /* justify pas adapte sur mobile */

/* BODY */
body { font-size:100%; } /* Pour IE */
body { font-size:1em; }
body { font:-apple-system-body;	} /* pour i-phone */
:root { } /* initialement pour descendre systematiquement le surlignage pour eviter interference avec texte */

/* MAPPAGE ET MENU -> voir css
	menu_haut_x pour le menu en haut avec couleur par theme
	misselyn_x pour le menu intial a gauche avec themes specifique aux sites misselyn.com et misselyn.net
	geneal_x pour le menu intial a gauche avec themes specifique au site genealogy.pm

/* Nota sur margin et padding
	En general, padding = 0
	Toutes les polices ont margin = .2em
	
/* Nota sur margin et padding d'un "table"
	Donc, pour alignement avec les polices, "table" a margin = .2em
	Egalement necessaire a droite justement parce que "tr" et "td" (qui peuvent avoir un motif) ont margin = 0
	"td" est en general utilise directement sans police, il doit donc avoir un margin ou padding lequel est defini en fonction de la class de "table"

/* Nota sur margin et padding de ul
	
/* Nota sur margin et padding d'un "form"
	"form" peut avoir un fieldset avec ou sans cadre, et le "fieldset" est occupe par une police, laquelle a une marge = .2
	Sans cadre, la police du fieldset devrait etre alignee sur une police normale
	Donc, margin-top et margin-left de "form" = 0
	Et un tel "fieldset sans cadre" ne doit pas avoir de marge non plus
	C'est egalement inutile si deux "fieldset sans cadre" sont colles, puisque les polices maintiennent l'espacement
	Avec cadre, le fieldset doit etre aligne sur les polices, donc un "fieldset avec cadre" doit avoir un margin-top et margin-left = .2
	Margin-bottom et margin-right = 0, le "fieldset" ne touche pas le bloc suivant puisque le cadre suivant ou la police suivante ont des marges
	Les "champs" sont dans une police. Donc pas besoin de marge
	En revanche, ils ont un cadre, donc il faut un padding complet = .2
	Donc pour alignement horizontal, les "label" necessitent au moins une bordure transparente de meme epaisseur et un padding-top et padding-bottom
	Pour alignement vertical, padding-left = 0 et tant qu'a faire pareil pour padding-right (ce qui implique que le label peut toucher le champ */
	
/* Nota sur appareils : voir en bas de page */

/* POLICES - DIMENSIONS ET MARGES */
/* polices generales */
/*p { margin:.3em 0 0 .3em; font-size:1em; } /* Supprime le 01/12/24 */
p, h1, h2, h3, h4, h5, h6 { margin:.3em; padding:0; }
p { font-size:1em; }
h1 { font-weight:bold; font-size:1.52em; }
h2 { font-weight:bold; font-size:1.32em; }
h3 { font-weight:bold; font-size:1.15em; }
h4 { font-weight:bold; font-size:1em; }
h5 { font-weight:normal; font-size:.87em; }
h6 { font-weight:normal; font-size:.75em; }
/* reduction de taille */
.reduit { font-size:.87em; }
.agrandi { font-size:1.15em; }
/* polices bbcode */
.dim-1 { font-size:.75em; } /* idem h6 */
.dim-2 { font-size:.87em; } /* idem h5 */
.dim-3 { font-size:1em; } /* idem p et h4 */
.dim-4 { font-size:1.15em; } /* idem h3 */
.dim-5 { font-size:1.32em; } /* idem h2 */
.dim-6 { font-size:1.52em; } /* idem h1 */
.dim-7 { font-size:1.75em; } /* plus grand que h1 */

/* POLICES - STYLES ET COULEURS GENERIQUES */
/* styles */
.gras  { font-weight:bold; }
.italique { font-style:italic; }
.sousligne { text-decoration:underline; }
/* formats personnalises */
.blink { font-weight:bold; color:#CC0066; }
.danger-faible { color:#FF0000; font-weight:normal; }
.danger-fort  { color:#FF0000; font-weight:bold; } /* confidentialite et securite, sortie de livres */
.gold { color:#CD8903; font-style:italic; } /* C89640 plus clair - CD8903 plus fonce */
.introduction { color:#606060;/*#B22222; brick*/ font-weight:bold; font-style:italic; }
/*.pellicule-texte { text-align:left; padding:0 .1em; margin:0; }*/
.pellicule-texte { text-align:left; padding:0 .1em; margin:0; }
.pellicule-image { text-align:left; padding:0; margin:0; }
.pellicule-portrait { text-align:left; padding:0 .1em; margin:0; font-style:italic; } /* portrait dans profil, pas dans album */
/* couleurs generales */
.blanc { color:#FFFFFF; }
.bleu-moyen { color:#0000C0; }
.gris { color:#606060; }
.malin { color:transparent }
.noir { color:#000000; }
.rouge { color:#FF0000; } /* Red */
.vert-fonce { color:#006400; } /* DarkGreen */
.instruction { font-weight:bold; color:#FF0000; }
.exergue { font-weight:bold; font-style:italic; color:#008000; }
/* positionnement */
.centre { text-align:center; }
.droite { text-align:right; }
.gauche { text-align:left; }
/* specifiques */
.bloc_analyse { margin:.3em 0 0 .3em; padding:.3em; border:1px solid #B0B0B0; }
.map-entete h1 { margin:0; text-align:center; }

/* IMAGES */
img { margin:0; padding:0; border:0; /*vertical-align:middle;*/ }
img.menu-img { width:12em; }
img.gn-foto  { height:6em; } /* Taille des photos dans un bloc */
img.legende-icone { height:1.2em; margin-top:.3em; vertical-align:middle; }
img.comm-icone { height:1em; vertical-align:middle; }

/* ANNONCES (plusieurs possibles) */
.annonce { width:90%; margin:.3em auto; padding:.3em; color:#CC0066; text-align:center; border:1px solid #CC0066; background-color:#FFE8F8; }

/* LISTES */
/*li.carre { list-style-type: square; margin-left:3em;}/**/
ul, li  { margin:0; padding:0; }

/* MAPPAGES SPECIFIQUES */
.map-expose ul { margin-left:2em; }
.map-expose ul li { padding:.3em 0 0 .3em; list-style-type:square; list-style-image:none; }
.map-expose a { font-weight:bold; }
	
/* COULEURS ARRIERE-PLAN */
/* couleurs reglementes */
.fond-argent  { background-color:#CECECE; }		/* reference web, utilise en indirect */
.fond-etain-pur  { background-color:#E8E8E8; }	/* reference Francis, ald #EDEDED, utilise en indirect */
.fond-etain-oxyde { background-color:#BABABA; }	/* reference web, utilise en indirect */
.fond-gris-souris { background-color:#9E9E9E; }	/* reference web, utilise */

/* POSITIONS PARAGRAPHES ET DIMENSIONS */
.aire-gauche { float:left; }
.aire-droite { float:right; }
.aire-droite-auto  { float:right; }
@media only screen and (min-width:761px) {
	.aire-droite-auto  { float:none; }
	}
.aire-reset { clear:both; }
.description-image { float:left; margin:.3em; height:19em; width:auto; border:1px solid #999999; }
.tab-03 { margin-left:3%; }
.largeur-17 { width:17em; } 	/* input submit */
.largeur-13m { min-width:13em; }	 /* icones guide */
.hauteur-06m { min-height:6.5em; } /* fieldset */
.hauteur-11m { min-height:11.2em; } /* fieldset */
.hauteur-15m { min-height:15em; } /* fieldset */
.hauteur-18m { min-height:18em; } /* fieldset */

/* FLEXBOX */
.flex-ligne, .flex-multilignes, .flex-gauche, .flex-horizontal, .flex-horizontal_reactif, .flex-vertical {
	display:-webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */
	display:-moz-box;		/* OLD - Firefox 19- (buggy but mostly works) */
	display:-ms-flexbox;	/* TWEENER */
	display:-webkit-flex; 	/* NEW - Chrome */
	display:flex;			/* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
.flex-ligne { flex-direction:row; flex-wrap:nowrap; justify-content:space-between; }
.flex-multilignes { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; row-gap:0; column-gap:0; }
.flex-gauche { flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; }
.flex-horizontal { flex-direction:row; }
.flex-horizontal_reactif { flex-direction:row; }
.flex-vertical { flex-direction:column; }
.flex-abscisse-gauche { justify-content:flex-start; }
.flex-abscisse-gauche_reactif { justify-content:flex-start; }
.flex-abscisse-centre { justify-content:center; }
.flex-abscisse-centre_reactif { justify-content:center; }
.flex-abscisse-droite { justify-content:flex-end; }
.flex-abscisse-droite_reactif { justify-content:flex-end; }
.flex-ordonnee-gauche { align-items:flex-start; }
.flex-ordonnee-centre { align-items:center; }
.flex-ordonnee-droite { align-items:flex-end; }
@media only screen and (max-width:760px) {
	.flex-horizontal_reactif { flex-direction:column; }
	.flex-abscisse-gauche_reactif { align-items:flex-start; }
	.flex-abscisse-centre_reactif { align-items:center; }
	.flex-abscisse-droite_reactif { align-items:flex-end; }
	}
a.survol-ligne:hover { background-color:#CECECE; }

/* TABLEAUX - EXPLICATIF */
/* Nota sur gestion des bordures (statique, adaptatif ou responsive-reactif)
	Pour les lignes : en general, gestion individuelle de chaque ligne dans la page ! (exemple : livres, selon livre (mobile), serie, etagere
	tableau-bordures :	tableau non reactif
						tr: pas de bordures
						td: bordures, padding .3
	tableau-reactif :	tr,td: mobile: transformés en block
						th: mobile: display:none;
						td: mobile: padding-bottom et top = 0 pour ne pas afficher des cellules vides
	tableau-reactif-cellule: tableau reactif
						tr: ordi: pas de bordure; mobile: bordure basse epaisse; tous: padding .3
						td: ordi: bordure; mobile: bordure basse (texte rubrique trop grand); tous: padding .3
	tableau-reactif-ligne :	tableau reactif
						tr: ordi: pas de bordure; mobile: bordure basse legere (epaisse a voir); tous: padding .3
						td: ordi: bordure; mobile: pas de bordure (vraie difference avec tableau-reactif-cellule)
	tableau-sitemap : 	pas responsive parce que les colonnes sont identiques pour ordi et mobile
						donc code adaptatif (flex serait probablement interessant)
/* Nota sur les tableaux
	contacts :		tableau-reactif, tableau-reactif-ligne
	covid19 :		tableau-reactif, tableau-reactif-cellule
	livre :			tableau-reactif-lisere
	livres :		tableau-reactif, tableau-reactif-lisere
	person :		tableau-reactif-lisere (pour leurs points de contacts)
	person_add :	tableau-reactif, tableau-reactif-lisere (sélection profils)
	person_info :	tableau-bordures
	search :		tableau-reactif, tableau-reactif-lisere (pour les livres)
	topic_mod :		tableaux explicatifs, td bordure en ordi, tr bordure en mobile
					tableaux selection : idem person_add
/* Nota sur gestion des bordures des tableaux en responsive
	Pour les cellules en ecran large : souvent, il a une bordure a chaque cellule
	Pour les cellules d'un grand tableau en petit ecran : en general, il n'y a pas de bordure sur les cellules (mais il y en a une sur la ligne)
	Pour les cellules d'un petit tableau en petit ecran : les bordures du grand ecran sont maintenues */
	
/* TABLEAUX - DIMENSIONS, BORDURES, ESPACEMENTS */
table { border-collapse:collapse; margin:.2em; padding:0; background-color:transparent; } /* egalement indispensable pour le menu horizontal dans IE6 */
tr, td, th { margin:0; padding:0; border:0; vertical-align:top; }
td.nombre { text-align:right; padding-right:2em;}
.tableau-bordures { margin-top:1em; margin-left:3%; }
.tableau-bordures td, .tableau-bordures th { padding:.3em; border:1px solid #B0B0B0; }
.tableau-sitemap { margin-top:1em; margin-left:3%; } /* plus elegant a 94% */
.tableau-sitemap td { padding:.3em; } /* bordure geree par class specifique */
.tableau-reactif-cellule { margin-top:1em; margin-left:3%; }
.tableau-reactif-cellule td, .tableau-reactif-cellule th { padding:.3em; border:1px solid #B0B0B0; }
.tableau-reactif-ligne { margin-top:1em; margin-left:3%; }
.tableau-reactif-ligne td, .tableau-reactif-ligne th { padding:.3em; border:1px solid #B0B0B0; }
.tableau-reactif-lisere td { padding:.3em; border:0; }
.tableau-94 { width:94%; }
.survol-ligne tr:hover { background-color:#CECECE; }
@media only screen and (max-width:760px) {
	.tableau-reactif tr { display:block; } /* tr.border doit etre gere specifiquement, tel que dans livres */
	.tableau-reactif th { display:none; }
	.tableau-reactif td { display:block; padding-top:0; padding-bottom:0; }
	.tableau-reactif td.ecran-large { display:none; } /* necessaire meme si ecran-large est display:none */
	.tableau-reactif-cellule { width:94%; }
	.tableau-reactif-cellule tr { padding-top:.3em; padding-bottom:.3em; border-bottom:3px solid #000000; } /* first-child = th, donc affiche; maintenir padding ? */
	.tableau-reactif-cellule td { border:0; border-top:1px solid #B0B0B0; }
	.tableau-reactif-cellule td:first-child { border-top:0; } /* il y a deja la bordure tr */
	.tableau-reactif-ligne { width:94%; }
	.tableau-reactif-ligne tr { padding-top:.3em; padding-bottom:.3em; border-bottom:1px solid #B0B0B0; } /* first-child = th, donc affiche */
	.tableau-reactif-ligne tr:first-child { padding:0; } /* first-child = th, donc affiche */
	.tableau-reactif-ligne td { border:0; }
	.tableau-reactif-lisere tr { padding-top:.3em; padding-bottom:.3em; } /* sur firefox, padding incompris en tableau mais compris en block */
	tr.separateur-mobile { border-top:1px solid #B0B0B0; } /* pas dans .tableau-reactif, car parfois different, typiquement dans livres */
	}
	
/* TABLEAUX - ENTETES */
/* Entetes de tableaux (en media -reactive- souvent utilise avec flex) */
.tete-grise th, th.tete-grise, td.tete-grise, p.tete-grise 
	{ text-align:center; font-weight:bold; background-color:#808080; color:#FFFFFF; border:1px solid #FFFFFF; }
	/* sauf erreur seul p.tete-grise et td.tete-grise est utilise */
	/* p.tete-grise utilise dans simili-tableau sitemap en mobile */
.tete-verte th, th.tete-verte, td.tete-verte
	{ text-align:center; font-weight:bold; background-color:#007F00; color:#FFFFFF; border:1px solid #FFFFFF; }
	/* sauf erreur seul .tete-verte th est utilise */
@media only screen and (max-width:760px) {
	.bloc-mobile { font-style:italic; }
	.bloc-mobile-02 { font-style:italic; width:2em; }
	.case-mobile-02 { display:inline-block; font-style:italic; width:2em; } /* inline-block necessaire car en general dans un span */
	}
@media only screen and (min-width:761px) {
	.bloc-mobile { display:none; }
	.bloc-mobile-02 { display:none; }
	.case-mobile-02 { display:none; }
	}

/* COLONNES effet similaire a un tableau, avec "table" = "colonnes-direction" et "td" = "colonne" */
.colonnes-centre { display:table; margin:auto; } /* inutilise */
.colonnes-gauche { display:table; margin-left:0; margin-right:auto; /*border:10px solid red; /*width:100%;*/}
.colonnes-droite { display:table; margin-left:auto; margin-right:0; } /* inutilise */
.colonne { display:table-cell; vertical-align:top; /*padding:.3em; /*border:10px solid green; /*width:25em; float:left;*/}
.colonne-media { display:block; vertical-align:top; /*padding:.3em; /*border:10px solid green; /*width:25em; float:left;*/}
@media only screen and (min-width:761px) {
	.colonne-media  { display:table-cell; vertical-align:top; }
	}

/* FORMULAIRES RESET */
/*form { margin:0; padding:.5em .2em .5em .2em; }*/
form { margin:0; padding:0; }
input, textarea, select { /*border-width:1px;*/ /*background-color:#000088;*/ /*transparent;*/ color:#000000; font-size:1em;}
/*input[type=checkbox], input[type=radio] { height:1em; }*/
/*legend { font-weight:bold; font-size:1em; text-align:left; color:#000088; }*/
/*input[type=checkbox], input[type=radio] { margin:1em; }*/
/*option { border-style:none; background-color:#F0F6F0; color:#000000; }*/
/*select { border-width:0; padding:0; background-color:#F0F6F0; }*/

/* FORMULAIRES FIELDSET */
/* x = maximum, m = minimum, s = similaire */
fieldset { float:left; margin:0; padding:0; border:0; }
.gris-17, .gris-20, .gris-20-30, .gris-22s, .gris-26x, .gris-30, .gris-30m, .gris-40, .gris-40x, .gris-auto
	{ margin:.3em; border:.1em solid #A0A0A0; border-radius:.3em; background-color:#E8E8E8; }
.gris-17 { width:17em; }
.gris-20, .gris-20-30 { width:20em; }
.gris-22s { width:21.6em; } /* 21.4 theoriquement ok, 22 passe mais pas de marge */
.gris-26x { max-width:26em; }
.gris-30 { width:30em; }
.gris-30m { min-width:30em; }
.gris-40 { width:40em; }
.gris-40x { max-width:40em; }
.vitre-40 { width:40em; }
.vitre-40, .vitre-auto { margin:.2em 0 0 .2em; border:.1em solid transparent; background-color:transparent; }
.minimal { padding:0; margin:0; border:none;}
@media only screen and (min-width:761px) {
	.gris-20-30 { width:30em; }
	}

/* FORMULAIRES CHAMPS ET SIMILI-CHAMPS */
/* Les classes cell-xx sont utilisees pour les labels dans les forms (comme elles sont display:inline-block, elles ne sont pas vraiment adaptees aux tableaux) */
/* FORMULAIRES CHAMPS ET SIMILI-CHAMPS - PROPRIETES GENERALES
	champ		chanp de form, fond blanc, bordure grise
	simul		cellule simulant un champ input, fond transparent, bordure grise (comme champ)
	cell		cellule (en remplacement d'une cellule de tableau), souvent devant un champ, fond transparent, bordure transparente
	case		idem cell mais hauteur minimale
	NOTA: 	fieldset gris-22s, label cell-08 et input champ-12 sont compatibles pour une seule ligne sur mobile
			gris-22s = 22 fonctionne mais marge-droite 0, theorie 21.4 fonctionne et ok sur galaxy, 21.6 donne un peu de liberte et marge-droite ok */
.champ-n2, .champ-n4, .champ-05, .champ-08, .champ-10, .champ-12, .champ-12-20, .champ-12-28, .champ-16, .champ-20, .champ-20-20, .champ-28, .champ-zone, .champ-auto
	{ display:inline-block; margin:0; padding:.2em; border:.1em solid #A0A0A0; border-radius:.3em; background-color:#FFFFFF; }
.simul-n1, .simul-n2, .simul-n4, .simul-28, .simul-auto
	{ display:inline-block; margin:0; padding:.2em; border:.1em solid #A0A0A0; border-radius:.3em; background-color:transparent; }
.cell-n4, .cell-04, .cell-05, .cell-08, .cell-09, .cell-10, .cell-14, .cell-28, .cell-auto, .cell-auto-08
	{ display:inline-block; margin:0; padding:.2em 0; text-align:left; border:.1em solid transparent; background-color:transparent; }
.case-10 
	{ display:inline-block; margin:0; padding:.2em 0; text-align:left; border:.1em solid transparent;  background-color:transparent; }
/* FORMULAIRES CHAMPS ET SIMILI-CHAMPS - DIMENSIONS */
.simul-n1 { width:.7em; }
.champ-n2, .simul-n2 { width:1.3em; }
.champ-n4, .simul-n4, .cell-n4 { width:2.8em; }
.cell-04 { width:4em; }
.champ-05, .cell-05 { width:5em; }
.champ-08, .cell-08 { width:8em; }
.cell-09 { width:9em; }
.champ-10, .cell-10, .case-10 { width:10em; }
.champ-12, .champ-12-20, .champ-12-28 { width:12em; }
.cell-14 { width:14em; }
.champ-16 { width:16em; }
.champ-20, .champ-20-20 { width:20em; }
.champ-28, .simul-28, .cell-28 { width:28em; }
.champ-zone { width:20em; height:5em; }
.cell-auto-08 { width:auto; }
@media only screen and (min-width:761px) {
	.champ-12-20 { width:20em; }
	.champ-12-28 { width:28em; }
	.champ-zone { width:28em; }
	.cell-auto-08 { width:8em; }
	}
/* FORMULAIRES CHAMPS ET SIMILI-CHAMPS - PROPRIETES SPECIFIQUES */
.cell-top { vertical-align:top; } /* notamment pour textarea */
.cell-auto img { vertical-align:top; } /* pour photo principale */

/* LIENS HYPERTEXTE ET BOUTONS */
/* LIENS - ACTIVATION PAR TEXTE */
a { cursor:pointer; }
a:link { padding:.1em; color:#0000FF; background-color:transparent; text-decoration:none; }
a:visited { color:#0000FF; background-color:transparent; text-decoration:none; }
a:hover { background-color:#007F00; color:#FFFFFF; text-decoration:none; }
.lien-gras a { font-weight:bold; }
.lien-neutre a:link { color:#007F00; font-weight:bold; } /* pour courriel */
.lien-neutre a:visited { color:#007F00; }
.lien-neutre a:hover  { color:#FFFFFF; }
/* LIENS - ACTICATION PAR TEXTE VERS LIVRE */
.livre-lien a:link { color:#000000; }
.livre-lien a:visited { color:#000000; }
.livre-lien a:hover  { color:#FFFFFF; }
/* LIENS - ACTIVATION PAR IMAGE VERS ANIMAL */
 /* image servant de lien, par exemple pet dans person, similaire a article, mais avec padding */
.btn-animal a:link, .btn-animal a:visited, .btn-animal a:hover { padding:.3em; background-color:transparent; }
.btn-animal:hover{ background-color:#7FBF7F; } /* = opacity .5 de 00FF00 */
.btn-animal:hover img { opacity:.7; }
/* LIENS - BOUTONS LANGUE */
.btn-langue { display:inline-block; margin-top:-.2em; width:1.6em; padding:.2em 0; font-weight:bold; text-align:center; color:#FFFFFF; background-color:#0000F0; }
.btn-langue a:link  { color:#FFFFFF; }
.btn-langue a:visited  { color:#FFFFFF; }
.btn-langue a:hover  { color:#000000; text-decoration:none; }
/* LIENS - BOUTONS DE FORMULAIRE */
.btn-cancel { margin-bottom:.1em; padding:.3em; border:.1em solid #E0804F; border-radius:.3em; font-weight:normal; background-color:#F8E8B0; cursor:pointer; }
.btn-submit { margin-bottom:.1em; padding:.2em; border:.2em solid #E0804F; border-radius:.3em; font-weight:bold; background-color:#F8E8B0; cursor:pointer; }
.btn-select { margin-bottom:.1em; padding:.3em; border:.1em solid #E0804F; border-radius:.3em; font-weight:normal; background-color:#F8E8B0; cursor:pointer; }
	/* btn-select : pour selectionner dans un form avant submit */
.btn-oubli { margin-bottom:.1em; padding:.2em; border:.2em solid #E0804F; border-radius:.3em; font-weight:normal; background-color:#FFFFFF; cursor:pointer; }
.btn-radio-1 { display:inline-block; width:1.2em; } /* utilise dans profils selectionnables */
.btn-radio-0-1 { display:none; } /* utilise dans profils selectionnables */
@media only screen and (min-width:761px) {
	.btn-radio-0-1 { display:inline-block; width:1.2em; } /* utilise dans profils selectionnables */
	}
/* BOUTONS DANS MENU SECONDAIRE : voir plus bas */


.simili-btn-folio/*,.bouton*/ { padding:.2em; border:1px solid #E0804F; background-color:#F8E8B0; }
	
/* FORMAT DES LIVRES */
.livre-acquis-police { color:#006400; }
.livre-cotes-police { color:#FF0000; }
.livre-depotlegal-police { color:#E84510; } /* FF4500 OrangeRed */
.livre-disparu-police { color:#FF0000; font-style:italic; }
.livre-doublon-police { color:#068080; font-style:italic; }
.livre-endroit-police { color:#B22222; font-style:italic; } /* Brick */
.livre-genre-police { color:#006400; }
.livre-impression-police { color:#0000C0; } /* Bleu moyen */
.livre-integrale-police { color:#505050; }
.livre-memento-police { color:#8904B1; }
.livre-quete-police { color:#FF0000; font-style:italic; }
.livre-sorti-police { color:#FF0000; font-weight:bold; font-style:italic; }
.livre-statut-police { color:#505050; font-style:italic; }
.livre-disparu-fond { background-color:#FFCB60; }	/* aurore, proche initial #F7D358; */
.livre-doublon-fond { background-color:#A9EAFE; }	/* azurin, initial #A9F5F2 */
.livre-integre-fond { font-style:italic; }
.livre-quete-fond { background-color:#F5A9BC; }	/* rose-dragee-fonce */
.livre-sorti-fond { background-color:#909090; }	/* plus clair que gris-fer */
img.livre_icone { height:1.2em; margin:-.1em 0; padding:0; vertical-align:middle; }
img.livre-mod-icone { height:1.4em; margin:-.2em 0; padding:0; vertical-align:middle; }
tr.livres-bordure-sans { border-top:0; }
tr.livres-bordure-serie { border-top:2px solid #000000;} /* separateur entre series */
tr.livres-bordure-etagere { border-top:5px solid #000000; } /* separateur entre etageres */
td.livre-mods-icones { text-align:right; } /* bloc maintien en ligne */
td.livre-mods-icones a { height:1.2em; padding:.3em .1em; }
@media only screen and (min-width:761px) {
	td.livre-mods-icones { min-width:5.4em; } /* necessaire pour mal-voyant avec grand em */
	}
@media only screen and (max-width:760px) {
	img.livre-mod-icone { height:1.8em; margin:-.4em 0; padding:0; vertical-align:middle; }
	tr.livres-bordure-sans { border-top:1px solid #B0B0B0; } /* separateur entre chaque livre, idem classe mince, idem separateur-mobile */
	}

/* ALBUMS - VIGNETTES ET ARTICLES */
/* Les commentaires ci-dessous sont valables pour article a:pseudo et vignette a:pseudo */
/* Le but principal est de contrer le a:link general */
/* si padding = 0 il contre correctement le general, si padding different de 0 seul le padding horizontal est pris en compte */
/* le background transparent est necessaire sinon il prend celui du a:hover sur une hauteur d'un caractere */
/* Autre commentaire : pas de css pour article comme pour vignette sinon l'article sera toujours a gauche */
.article-mod  { margin:0 0 1em 0; padding:0; border:1px solid #FF3110; /*background-color:#F9E9F0;*/ }
.article-vue  { margin:0 0 1em 0; padding:0; border:1px solid transparent; /*background-color:#F9E9F0;*/ }
.article a:link, .article a:visited, .article a:hover { padding:0; color:#000000; background-color:transparent; }
.vignette-mod { float:left; margin:.3em; padding:0; border:1px solid #FF3110; /*background-color:#F9E9F0;*/ }
.vignette-mod a:link, .vignette-mod a:visited, .vignette-mod a:hover { padding:0; color:#000000; background-color:transparent; } 
.vignette-vue { float:left; margin:.3em; padding:0; border:1px solid transparent; /*background-color:transparent;*/ }
.vignette-vue a:link, .vignette-vue a:visited, .vignette-vue a:hover { padding:0; color:#000000; background-color:transparent; } 
.vignette { margin:0; padding:0; border:1px solid #999999; background-color:#E2E8E2; }
.vignette-portrait  { margin:0; padding:0; border:none; background-color:transparent; } /* dans profil, pas dans album */
.vignette-portrait a:link, .vignette-portrait a:visited, .vignette-portrait a:hover { padding:0; color:#000000; background-color:transparent; } 
.vignette-albumlist { margin:0; padding:0; border:1px solid #E0804F; background-color:#F8E8B0; }
/*.vignette-albumlist a:link, .vignette-albumlist a:visited, .vignette-albumlist a:hover { padding:0; color:#000000; background-color:transparent; } 
	/* albumlist et portrait idem vignette mais avec leur propre border et background */
.article:hover, .vignette:hover, .vignette-portrait:hover , .vignette-albumlist:hover { color:#000000; background-color:#7FBF7F; } /* = opacity .5 de 00FF00 */
.article:hover img, .vignette:hover img, .vignette-portrait:hover img, .vignette-albumlist:hover img { opacity:.7; }

/* ALBUMS - TEXTES */
.topic-complement { color:#006400; font-weight:bold; font-style:italic; }
.topic-date { color:#FF0000; font-weight:bold; font-style:italic; }
.vignette-texte { padding:0 .1em; margin:0; }
.vignette-complement { padding:0 .1em; margin:0; color:#006400; font-style:italic; }
.vignette-date { padding:0 .1em; margin:0; color:#FF0000; }

/* ALBUMS - PHOTOS */
img.grande-paysage { max-width:94vw; max-height:45vh; }
img.grande-portrait, img.grande-portrait-large { max-width:94vw; max-height:60vh; }
img.moyenne-paysage { width:20em; }
img.moyenne-portrait { height:20em; }
img.petite-paysage, .petite-paysage-large { height:7.5em; } /* doit etre identique a constante PHOTO_PETITE_PAYSAGE (7.5) */
img.petite-portrait { height:10em; } /* doit etre identique a constante PHOTO_PETITE_PORTRAIT (9.9) */
img.naine-paysage { height:3.75em; }
img.naine-portrait { height:5em; }
img.album-entete { max-height:2.5em; vertical-align:middle; }
img.cadre-mince { border:1px solid #B0B0B0; }
img.cadre-deces { border:.3em solid #000000; }
@media only screen and (max-width:760px) {
	/*img.grande-paysage { max-width:94vw; }*/
	img.grande-portrait { max-height:200vh; } /* :auto ne change rien */
	img.grande-portrait, img.grande-portrait-large { max-height:200vh; }
	img.petite-paysage-large { max-width:94vw; height:auto; }
	}

/* MENU DEROULANT */
/* display initial de li doit etre dans la classe secondaire, car parfois block (mobile), parfois inline-block (quand toujours horizontal) */
.rollmenu { margin:0; padding:0; border:none; } /* motif prioritaire par rapport a misselyn.css et geneal.css */
.rollmenu a { display:inline-block; *zoom:1; *display:inline; } /* sur le fond, devrait etre dans nav-mixte, nav-horiz et pagemenu */
.rollmenu li ul { display:none; }
.rollmenu li:hover ul { display:block; position:absolute; } /* NON-IE6, aussi pour largeur et position /**/
.rollmenu li a:hover ul { display:block; position:absolute; } /* IE6, aussi pour largeur et position /**/

/* MENU SECONDAIRE (similaire a nav-horiz) */
/* pas de background, c'est celui de chaque bouton individuellement */
.pagemenu a, .pagemenu a:link, .pagemenu a:visited { height:1.2em; padding:.5em .2em; font-weight:bold;}
	/* padding initial .3.3 trop petit pour mobile, ensuite .5.3 trop de place sur mobile */
.pagemenu li { display:inline-block; *zoom:1; *display:inline; } 
.pagemenu li ul { margin-top:0; margin-left:0; }
.pagemenu li ul { padding:0; }
.pagemenu li ul li { display:block; }
/*.pagemenu li ul li a { width:12em; } /* voir zoommenu */

/* MENU SECONDAIRE - SECOND NIVEAU (ZOOM) */
/* zoommenu = pagemenu li, creation specifique pour differencier d'un sous-menu */
.zoommenu  { width:3.2em; background-color:#FFFFFF; border:1px solid #E0804F; color:#0000FF; } /* hover standard, fond idem ancre */
.zoommenu a, .zoommenu a:link, .zoommenu a:visited { width:2.8em; text-align:right; } /* padding initial .3 trop petit pour mobile */
.zoommenu ul { background-color:#FFFFFF; border:1px solid #E0804F; }
.zoommenu ul li { width:3.2em; } /* width a = 2 padding a */

/* MENU SECONDAIRE - BOUTONS */
.pagemenu-btn-folio { background-color:#F8E8B0; border:1px solid #E0804F; } /* bouton vers un autre folio, hover standard */
.pagemenu-btn-ancre  { background-color:#FFFFFF; border:1px solid #E0804F; } /* bouton vers une ancre ou similaire, hover standard */
.pagemenu-btn-factice  { color:#606060; background-color:transparent; border:1px solid #606060; } /* bouton factice donc inactif */
.pagemenu-btn-factice a:hover  { color:#606060; background-color:transparent; } /* eviter hover standard */
.pagemenu-icone  { height:1.6em; margin-top:-.2em; vertical-align:top; }

/* ONGLETS */
.onglet { margin:0 .3em; padding:.1em 0; border:.2em solid #E0804F; border-top:0; } /* .1 evite probleme bordure inexplique */
.visible { display:block; }
.masque { display:none; }
ul.sheetmenu{ margin:0 .3em; padding:0 0 0 .5em; border:0; border-bottom:.2em solid #E0804F; }
ul.sheetmenu li { display:inline-block; *zoom:1; *display:inline; margin:0 0 -.2em .3em; padding:.2em 0; border:.2em solid #E0804F; background-color:#F8E8B0; 
	list-style-type:none; list-style-image:none; border-top-left-radius:.6em; border-top-right-radius:.6em;} 
ul.sheetmenu li.onglet_actif { font-weight:bold; padding:.2em; border-bottom:.2em solid #FFFFFF; background-color:#FFFFFF;} /* border = motif, padding = celui de a */
ul.sheetmenu a, ul.sheetmenu a:link, ul.sheetmenu a:visited { font-weight:bold; margin:0; padding:.2em; text-align:right; } 
	/* text-align pour le zoom, HS quand dans pagemenu-btn-ancre, sans doute question priorite */

/* LIGNE DE SEPARATION (pour donner un style a hr) ou BORDURE */
hr.mince { border:0; border-top:1px solid #B0B0B0; }
hr.mince_99 { margin:0 .3em; padding-bottom:.3em; border:0; border-top:1px solid #B0B0B0; }
hr.moyen { border:0; border-top:2px solid #B8B8B8; } /* Prevision, non utilise */
.separation { width:100%; height:2px; }
.separation hr { display:none; }
.bordure-basse { border-bottom:1px solid #B0B0B0; }
.bordure-haute { border-top:1px solid #B0B0B0; }
.separateur-bas { padding-bottom:.3em; border-bottom:1px solid #808080; }
.separateur-haut { padding-top:.3em; border-top:1px solid #808080; }*/

/* BOUTON HAUT DE PAGE */
#to-top { position:fixed; bottom:1em; right:.5em; opacity:.7; }
#to-top a, #to-top a:link, #to-top a:visited { padding:.5em 0; }

/* SPECIAL ADAPTATIF APPAREILS 
	.ecran-petit : n'apparait que sur ecran mobile, donc en display:none sous media min-width
	.ecran-large : n'apparait que sur ecran ordinateur, donc en display:none par defaut
	.tableau-reactif 
	*/
@media only screen and (max-width:760px) {
	.ecran-large { display:none; }
	/*p.ecran-petit { display:block; }*/
	/*table.ecran-petit { display:table; }*/
	/*label.ecran-large { display:none; } /* inutile sur firefox */
	}
@media only screen and (min-width:761px) {
	.ecran-petit { display:none; }
	/*table.ecran-large { display:table; }*/
	}