.nojavascript {
	position: fixed;
	top: 0;
	width: 100%;
	height: 3em;
	background-color:red;
	line-height: 3em;
	font-weight: bold;
	text-align: center;
	color: black;
	z-index: 10000;
}


div#sidebar {
	width:17%;
	font-family: 'paratexte';
	text-align: left;
	position: absolute; left: 0; top: 6em;
	/*background-color: #df8;*/
	padding: 1em;
	font-size: 1.15em;
	line-height: 1.4em;
	z-index: 20;

}

div#sidebar ul {
	list-style-type: none;
	margin: 0; padding: 0;
	font-style: italic;
	font-size: 0.8em;
}

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



.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;}





/*Styles des sommaires*/

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

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

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

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

.sommaire ul li {
	margin: 0.5em auto;
}

.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;}*/

.sommaire ul .article .titre a:link, .sommaire ul .article .titre a:visited {color: #c50;}
.sommaire ul .article .titre a:hover {color: #ffa500;}

.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.4em; /*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';
	font-size: 1.05em;
}


.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 */
}

.bastiat table {
	font-size: 0.9em;
}

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: 1.1em;
}

.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*/

span.vers, span.cvers {
	display: block;
	margin: 1em;
	text-indent: 0;
}

.vers, .cvers {
	font-size: 90%;
	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*/

.header .titre .np:visited, .np:visited, .header .titre .np:link, .np:link {
	color: #900;
	text-decoration: none;
}
.np:hover, .header .titre .np:hover{
	color: #c33;
}

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

.tj:hover, .header .titre .tj:hover {
	color: #068;
}



/*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;

}


.discours {
font-size: 90%;

}


#sidebar p {
	margin: 0;
	text-align: left;
	font-family: "bastiat";

}
#sidebar h5 {
	margin: 1em 0 0.2em 0;
	font-size: 1.1em;
}

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

	.lettre {
		margin: auto;
		width: 100%;
	}

	.personne {
		width: 100%;
		margin-left: auto; margin-right: auto;
	}

	.sommaire {
		padding:0;
	}
	.footer {
		opacity: 0.9;
	}
	div#sidebar {
	position: relative;
	width:100%; margin: auto;
	background-color: transparent;
	}
}

.container {
	width: 100%;
	margin: auto;
	font-family: "bastiat";
	font-size: 1em;
	overflow: visible;
}


/* Page d'accueil */
div#container {
	width: 95%;
	margin: auto;
	font-family: "bastiat";
	font-size: 1.2em;
	overflow: visible;
}

/*div#container {
	overflow: hidden;
	width: 100%;
}*/

img#portrait {
	float: left;
	width: 30%;
	margin: auto auto auto 5%;
}


#tabs {
	border: none;
	float: right; width: 60%;
}

div#tabs ul:first-child {
	position: absolute;
	right: 0; top: -5em;
	border: none;
	background: none;
	z-index:1000;
	font-family: sans-serif;
	font-size: 0.8em;
}

div#tabs ul:first-child li {
	border-radius: 0;
	border: none;
}


#tabs a:link, #tabs a:visited {

}
#tabs a:hover {
	color: #068;
}


/*Sommaire Guillaumin*/
#vignette {
	float: right;
	margin: 0 10% 2em 0;
	position: relative; left: -10%;
}
#listetomes {
	width: 50%;
	float: left;
	margin: 1em 0 0 10%;
}

hr {
	clear: both;
}



a[target="_blank"] {
	color: #008;
}

a[target="_blank"]:hover {
	border-bottom: dotted #ccc 1px;
}

blockquote.small {
	font-size: 90%;
	margin: 0 0 2em auto; padding:0;
	width: 90%;
	text-align: justify;
	font-style: italic;
}

blockquote.small em, blockquote.small i {
	font-style: normal;
}

.paratexte {
	font-size: 0.9em;
	font-style: italic;
}