div#sidebar {
	width:17%;
	font-family: 'paratexte';
	text-align: justify;
	position: absolute; left: 0; top: 6em;
	/*background-color: #df8;*/
	padding: 1em;

}


.footer .arbor {
	float:left; display: block;
	height: 100%;
	position: relative;
	min-width: 12em; width: auto; max-width: 20em; white-space: nowrap;
	vertical-align: middle;
/*	background-color: rgba(255, 255, 255, 0.7);
	background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.5));
	text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
				2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
				1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;*/
}

.arbor .retour {
	width:100%; height: 55%;
	position: absolute; top: 0; left: 0; line-height: 2em;
	text-align: center;
}


.prec, .suiv {
	position: absolute;
	bottom: 0;
	width: 45%; height: 40%; line-height: 0.5em;
}

.prec {
	float: left;
	left:0;
	text-align: right;
}

.suiv {
	float: right;
	right:0;
	text-align: left;
}

.header {
    position: absolute; left: 0; top: 0;
    width: 100%;
	text-align: center;
	z-index:20;
	font-family: "paratexte", sans-serif;
min-height:1cm;
background-color: white;
transition: opacity 200ms height 600ms;
height: 8em;

}

.tiny {
height:2em;
}
.tiny .auteur {display: none;}

.header .titre {
font-size: 2em;
text-align: center;
position: static;
display: block;
/*transform: translate(-50%,0%);*/ /*Façon alternative de centrer verticalement,
 je la garde sous le coude au cas où l'autre ne serait pas bien prise en charge par tous les brouteurs.*/
 /*align-self: center;*/
 /*position: relative; top: -1em;*/
 font-weight: bold;
 /*text-shadow: 1px 1px 0px #555;*/
 /*transition: font-size 300ms, top 300ms;*/
}
.tiny .titre {
	font-size: 1.3em;
top: 50%;
text-shadow: none;
}

.header .auteur {
position: static;
display: block;
font-style: italic;
font-size: 1em;
text-align: center;
}


.header .url_bo {
	display: block;
	font-family: monospace;

 height: 1.5em;
 padding: 0.8em;
 top: 0; left: 0;
}
.url_bo:hover {
	color: #33f;
	text-decoration: underline;
}

@media only screen and (min-width: 1000px) {
	.margin {
	position: absolute;
	width : 15%;
	right: 0;
	}
	.margin .vers, .margin .cvers {
		margin: 1em 0;
	}

	h4 {display: none;}
}

body {
	margin: 8em 0 4em 0; padding: 0; /*margin top 6em pour les pages avec header inamovibles...*/
	/*background: #f5f5f5;*/
}

a:link, a:visited {text-decoration: none; color: #33f; z-index:5;}
a:hover {color: #035;}
a[name] {
	display: inline-block;
    position: relative;
    top: -5em; /*Pour que le header ne cache pas la cible des liens*/
    visibility: hidden;
}
/*Rendre insélectionnables les appels de note. Ça ne marche pas encore tout à fait... T_T*/
a[href*=footnote], a[href*=footnote] sup {
	user-select: none;
	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none;   /* Chrome/Safari/Opera */
 	-khtml-user-select: none;    /* Konqueror */
  	-moz-user-select: none;      /* Firefox */
  	-ms-user-select: none;       /* Internet Explorer/Edge */
}

sup {line-height: 0; font-variant: normal;}


/*Polices de caractères*/

@font-face{
    font-family:'bastiat';
    src:url("fonts/FeENrm28C.otf");
    font-weight:normal;font-style:normal;
}
@font-face{
    font-family:'bastiat';
    src:url("fonts/FeENit27C.otf");
    font-weight:normal;font-style:italic;
}

@font-face{
    font-family:'paratexte';
    src:url("fonts/Simonetta-Regular.ttf");
    font-weight:normal;font-style:normal;
}
@font-face{
    font-family:'paratexte';
    src:url("fonts/Simonetta-Italic.ttf");
    font-weight:normal;font-style:italic;
}

@font-face{
    font-family:'paratexte';
    src:url("fonts/Simonetta-Black.ttf");
    font-weight:bold;font-style:normal;
}
@font-face{
    font-family:'paratexte';
    src:url("fonts/Simonetta-BlackItalic.ttf");
    font-weight:bold;font-style:italic;
}


/*Styles des sommaires*/

.sommaire {
	margin: auto;
	padding: 3em;
	width: 90%;
	font-size: 1.05em;
	font-family: "paratexte", sans-serif;
	text-align: justify;
	background: white;
}

.sommaire table {
	width: 80%;
	margin: auto;
	border-spacing: 1em 0.5em;
}

.sommaire .chapeau {
	width:75%;
	margin: 2em auto;
}

.sommaire ul {
	margin: 5em auto;
	list-style-type: none;
	width: 75%;
}

.bastiat ul {
	margin: 1em auto 2em auto;
	list-style-type: none;
	width: 75%;
}

.sommaire ul li.article {
	margin: 0.5em 0;
}

.sommaire ul .article .date {
	font-weight: bold;
	display: inline-block;
	min-width: 17%;
	text-align: right;
	height: 1.5em;
	white-space: nowrap;
	vertical-align: middle;
}

.sommaire ul .article .titre {
	text-align: justify;
	display: inline-block;
	width: 80%;
	float: right;
	vertical-align: middle;
	font-size: large;
}
/*.titre em {font-style: normal;}*/

.titre a:link, .titre a:visited {color: #c50;}
.titre a:hover {color: orange;}

.sommaire ul .article .about {
	display: block;
	text-align: justify;
	clear: both;
	padding: 0.3em 2em 0.5em 4em;
}

/*Styles du texte de Bastiat*/



.bastiat, .other {
	width: 58%;
	min-width: 20em;
	margin: 0 auto;
	font-size: 1.2em; /*1.2*/
	/*line-height: 1.8em;*/ /*1.8*/
	background: white;
	/*padding: 8em 3em 2em 3em;*/
	padding: 3em 3em 2em 3em;
}


.bastiat p, .other p {
	text-indent: 1.4em;
	margin: 0.5em 0;
	text-align: justify;
}
p.noindent {text-indent: 0;}
p[align="center"] {
	text-align: center;
}
p[align="right"] {
	text-align: right;
}
/*Stylage des footnotes*/

h4 {

	font-family: 'paratexte';
	text-align:center;
}

.footnote {
	padding: 0.1em 2em;
	font-family: 'bastiat';
}



.bastiat {
	font-family: 'bastiat', serif;
}
.other {
	font-family: 'paratexte', sans-serif;
}

.bastiat h2 {
	text-align: center;
	font-variant: small-caps;
	font-weight: normal;
	margin: 2em 0;
	font-family: "paratexte", sans-serif;
	font-size: 1.3em;
}
h2 sup, h2 i {font-variant: normal;}
i i, i em, em em, em i {font-style: normal;}
h2 i {font-weight: bold;}

h3 {
	text-align: center;
}

.bastiat h3 {
	font-style: italic;
	font-weight: normal;
	padding-top: 1em;
}
.bastiat img {
	margin: auto;
	max-width: 100%;
}


p table {
	margin: auto;
}

.bastiat p {
	line-height:1.3em;
}

.other p {
	line-height: 1.5em;
}

.bastiat > blockquote {
	font-size: 0.9em;
	margin-right: 0;
}

blockquote p.proches {
	margin: 0;
}

.liste p {
	margin: 0.2em 0;
}
.liste {

	margin: 0.5em 0;
}

.bastiat p.noselect {
	color: #444;
	text-align: right;
	font-family: 'paratexte', sans-serif;
	font-style: italic;
	padding-top: 1em;
	margin-top: 2em;
	user-select: none;
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}

table.petit {
	width: 110%;
	border-spacing: 1em;
	position: relative; left: -2.5em;
}
table.small {
	font-size: 0.8em;
	table-layout: fixed;
}

table.petit p, table.petit blockquote {
	font-size:1em;
	margin: 0.5em 0;
	padding: 0;
}

table.petit td {
	width: 50%;
	padding: 0;
	vertical-align: top;}

table th {
	font-weight: normal;
	font-variant: small-caps;
}

span[style="font-variant: small-caps"] {
	font-size: 1.1em;
	letter-spacing: 0.05em;
}

i span[style="font-variant: small-caps"], em span[style="font-variant: small-caps"], h3 span[style="font-variant: small-caps"] {
	font-style: normal;
}


/*Style épistolaire*/

.cher {
	font-variant: small-caps;
	padding: 0 0 1em 2.5em;
	margin-top: 2em;
	font-size: larger;
}


.politesse {
	padding-left: 3em; padding-top: 0.3em;
}

p.sign {
	text-align: right;
	font-variant: small-caps;
	font-size: large;
}

.bastiat > .date {
	font-size: 0.85em;
	text-indent: 1.4em;
}

p.datetag {
	text-align: right;
	margin-bottom: 2em;
	font-size: 0.9em;
}

/*Épigraphes*/

.epigraphe {
	width: 60%;
	margin: 2em 0 4em auto;
	font-size: 0.9em;
	text-align: justify;
}

/*Poésie*/

.vers, .cvers {
	font-size: 80%;
	line-height: 1.2em;
	text-align: justify;
	clear:both;
}

.vers {
	padding-left: 4em;
}

.cvers {
	text-align: center;
}

span.dr {float:right;}
table.vers {
	font-size: 90%;
	padding:1em;
}

/*Tableaux*/

.bastiat table {
	margin:auto;
}

.bastiat table.conseil_inf {
	border-spacing: 1em;
}

/*Mise en forme des liens*/

.np:link, .np:visited {
	color: #700;
	text-decoration: none;
}
.np:hover {
	color: #c00;
}

.tj:link, .tj:visited {
	color: #034;
	text-decoration: none;
}

.tj:hover {
	color: #068;
}

/*Footer, Header*/



.footer {
        left: 0;
	width: 100%;
	text-align: center;
	z-index:20;
	font-family: "paratexte", sans-serif;
position: fixed;
bottom: 0;
height: 3.5em; min-height:1cm;
background-color: rgba(230,255,50,1); /*#9c0;*/
background: linear-gradient (to right, rgba(230,255,50,1), rgba(230,255,50,0.7));
/*background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,1));*/
opacity: 0.7;
transition: opacity 200ms;
}


.footer:hover {opacity: 1;}

.footer:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .3s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .3s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .3s ease-in-out;
}

.footer {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  -moz-filter: grayscale(100%);
  -moz-transition: .3s ease-in-out;
  -o-filter: grayscale(100%);
  -o-transition: .3s ease-in-out;
}
.footer a:visited, .footer a:link {
	text-decoration: none;
	color: #925;
	font-weight: bold;
	padding: 0;

}

.footer a:hover {
	color: #7a0;
	text-shadow: 1px 1px 0 #ff0;
}






/*Menu de gauche*/

.gauche {
	position: fixed;
	left: 0; top:0;
	width: 12%; height: 100%;
	background-color: rgba(255,230,100,1);
	padding: 10em 1em;
	font-family: 'paratexte', sans-serif;
	text-align: justify;
	z-index:3;
	overflow: auto;
}

/*Notes marginales*/

.mnote {
	width: 15%;
	position: absolute;
	right: 0;
/*	height: 3em;
	margin-top: -4em;*/
	font-size: 0.8em;
	line-height: 1em;
	border: red 1px solid;
	font-family: 'paratexte', sans-serif;

}

/*Index des personnes*/


.journal {
	text-align: justify;
	margin: 2em;
}

.personne {
	text-align: justify;
}

.personne p {
	position: relative;
	margin: 0.2em 0; text-indent: 1em;
}

.personne p.bio {
	font-weight: bold; font-size: 0.9em; color: #558;
}

/*.personne>p:nth-child(2),*/ .personne {
	width: 60%;
	margin: 2em auto;
}



.personne span.dates {

	position: absolute;
	right: 0; top: 0;
}

.personne span.nom {
	font-variant: small-caps; font-weight: bold;
	font-size: 1.4em;
	margin-left: -1em ;
}

.personne ul {
	margin: 0; width: 100%;
}

.journal .titre {
	font-weight: bold;
}

.sommaire p.alphabet {
	position: fixed;
	left:0; top:1em;
	padding: 1em;
	font-weight: bold;
	background: rgba(255,255,255,0.8);
	z-index:15;
}

/*Index des Journaux*/
ul.journaux {
	list-style-type: none;
	width: 100%;
	margin: 0; padding: 0;
	text-align: center;
}

.itemjournal {
	width: 12em;
	display: inline-block;
	position: relative;
	min-height: 9em;
}

.itemjournal .titre {
	position: absolute; top: 0; left:0;
	width: 100%;
	padding: 0.5em 0 1em 0;
	font-weight: bold;
}

.itemjournal a.titre:link, .itemjournal a.titre:visited {
	color: orange;
}

.itemjournal a.titre:hover {
	color: #c50;
}

.itemjournal .about {
	width: 90%;
	height:50%;
	position: absolute; bottom: 0; left: 0;
	font-size: 0.9em;
	padding: 0 0.5em 0 0.5em;
}

.discours {
font-size: 90%;

}


#sidebar p {
	margin: 0;

}
#sidebar h5 {
	margin: 1em 0 0.2em 0;
}

@media only screen and (max-width: 1000px) {
	.bastiat, .other {
		width: 80%;
		font-size: 1.2em;
	}
	.sommaire table {width: 100%;}

	.personne {
		width: 80%;
	}
	.lettre {
		margin: 0;
	}
	.sommaire {
		margin: 0; .padding:0;
	}
	.footer {
		opacity: 0.9;
	}
	#sidebar {
	position: relative;
	width:90%; margin: auto;
	background-color: transparent;
	}
}