.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 {
	text-align: center;
	z-index:20;
	font-family: "paratexte", sans-serif;
	min-height: 1cm;
	background-color: white;
	transition: opacity 200ms height 600ms;
	position: relative;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

.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: 0;
	padding: 0 0 56px 0; /*margin top 6em pour les pages avec header inamovibles...*/
	/*background: #f5f5f5;*/
}

a:link, a:visited {
  text-decoration: none;
  color: #006;
  z-index:5;
}

a:hover {
  color: #068;
  border-bottom: dotted #ccc 1px;
}

/*
.footnote a:hover {
  border: none;
}
*/

/* i.e. external links */
a[target="_blank"] {
	color: #006;
}

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

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 0;
	width: calc(100% - 6em);
	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: 1em 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: auto;
		min-width: auto;
		font-size: 1.2em;
		position: relative;
		clear: both;
		padding: 1em 1.5em 2em 1.5em;
}
	}
	.sommaire table {width: 100%;}

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

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

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

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


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

@media only screen and (max-width: 768px) {
	div#home-container {
		margin-top: 0;
		margin-bottom: 1em;
	}
}

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

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

@media only screen and (max-width: 768px) {
	img#portrait {		
		float: none;
		margin: 1em auto;
		display: block;
		width: 50%;
		max-width: 200px;
	}
}

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

@media only screen and (max-width: 768px) {
	#tabs {		
		float: none;
		width: auto;
		padding: 0;
	}
}

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

@media only screen and (max-width: 768px) {
	div#tabs ul {		
		top: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		position: relative;
		margin: 2em 0 1em;
	}
}

div#tabs ul li {
	background-color: #eeeeee;
	border-radius: 0;
	border: none;
	padding-bottom: 0;
	margin: 0 .05em;
}

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

div#tabs ul li:last-child {
	border-radius: 0 3px 3px 0;
}

div#tabs ul li.ui-tabs-active {
	background-color: #2f1f79;
}

div#tabs ul li.ui-tabs-active a {
	color: #fff;
}

div#tabs ul li.ui-tabs-active a:hover {
	cursor: default;
}

a.ui-tabs-anchor {
  border: none;
}
#tabs a:link, #tabs a:visited {
  color: #006;
}
#tabs a:hover {
	color: #068;
}

@media only screen and (max-width: 768px) {
	#home-container .tabs {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	span.vers {
		padding-left: 0;
		margin: 1em 0 2em;
	}
}

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

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