/* UTF-8 (éàç) */

html { padding: 0; margin: 0; }
body {
    color: #000; background: #f9fae9; font-family: 'trebuchet ms',verdana,helvetica,arial,sans-serif; margin: 0;
    font-size: 11.6pt; /* Le 'w' est moche sous windows sinon */
}
tt { text-align: left; }

p,pre,table,dl,ul,ol,h2,h3,h4,h5,h6,hr {padding: 0; margin: 1em 40px 1em 40px; }

header {
	background: #ca9f44 url(../images/fond24) repeat top center; margin: 0; padding: 0; display: inline-block; width: 100%;
	border-bottom: 1px #888 solid;
}
header p { margin: 0; }
h1 {
	background: linear-gradient(to left, rgba(0,0,0,.76), rgba(0,0,0,0));
	background-size: 800px 100%;
	background-position: center right;
	background-repeat: no-repeat;
	vertical-align: middle;
	color: #eaeaea; font-family: georgia,arial,helvetica,sans-serif; font-size: 1.7em;
	font-style: italic; text-align: right;
	padding: .05em 1em;
	margin: 1em 0;
	font-weight: bold;
}
h1 span span { display: inline; }
h1 a:link,h1 a:visited { color: #fbfbfb; }
h1 span a:link,h1 span a:visited { color: #eaeaea; }
body>h1 {
	background: linear-gradient(to left, rgba(0,0,0,.76), rgba(0,0,0,0)), url(../images/fond10);
	background-size: 800px 100%, 100%;
	background-position: center right, top center;
	background-repeat: no-repeat, repeat;
	padding: 1em; margin-bottom: 0;
}

h2 { font-family: georgia; font-style: italic; font-size: 1.7em; color: #333; border-bottom: 2px gold solid; }
h3 { border-bottom: 2px #eed solid; }

address { font-size: .8em; border-top: 1px #888 solid; font-family: helvetica,arial,sans-serif;
	padding: 1em; width: 67%; text-align: right; float: right; margin-top: 2em; color: #222; }
hr+address { border-top: none; margin-top: 1em; }
address img { border: 0; }

strong{ font-weight: bold; background: #f3f3dd; border-radius: 10px; padding: 0 .1em 0 .1em}
small { font-size: .8em; }

li { list-style-position: inside; }
ul,ol { margin-left: 70px; }

caption { font-weight: normal; text-align: center; caption-side: bottom;
	margin-top: .5em; padding-top: .2em; margin-left:0; margin-right: 0;
	border-top: 2px gold solid; font-size: .8em;
	font-family: georgia,'times new roman',times,serif; font-style: italic; }
pre,th { background: #f3f3dd; }
input,textarea,select,fieldset,button { border: 1px #bbb solid; }
input:focus,select:focus,textarea:focus,button:focus { border-color: gold; }
.withBorder, .withBorder th, .withBorder td { border: 1px #ccc solid; } 
td,tr {border-left: 0; border-right: 0; border-bottom: 1px #ccc solid; }
th {border: 1px #ccc solid; }
td,th{ padding: 0 .5em 0 .5em; }
legend { font-family: georgia; font-style: italic; font-size: .8em; }
input[type='submit'], input[type='button'], button { background: #444; color: white; font-family: georgia; font-size: .8em; font-style: italic; border-width: 0; }
input[type='submit']:hover, input[type='button']:hover, button:hover { background-color: #111; cursor: pointer; }
fieldset p { margin: .5em; padding: 0; }
table { border-collapse: collapse; border: 1px #ccc solid; }
input[disabled='disabled'] { color: #888; cursor: no-drop; }

abbr[title],acronym[title] { cursor: help; border-bottom: 1px #bbb dotted; text-decoration: none; }

dt { font-weight: bold; }
.mauvaise_nouvelle { color: darkred; }
.bonne_nouvelle { color: darkgreen; }
span[lang|='la'] { font-style: italic; }

/* For home page */
.photoList { border-top: 1em transparent solid; }
.li1 { float: left; }
.li2 { float: right; }
.photoList li { display: table; height: 85px; width: 49%; list-style-type: none; padding: 0; margin: 0 0 3px 0; text-align: left; }
.photoList+* {clear: both; /* padding-top: 1em; */ }
.listContainer,.imgContainer { display: table-cell; vertical-align: middle; }
.imgContainer { width: 100px; padding-left: 3px; }
.textContainer { display: table-cell; vertical-align: middle; padding: 0 3px 0 6px; }

ol.photoList,ul.photoList { width: 70%; margin: 0 auto 0 auto; padding: 0; }
.photoList img { width: 100px; vertical-align: middle; border: 1px #888 solid; }

.listContainer>.textContainer { padding-left: 111px; }
.listContainer>.imgContainer+.textContainer { padding-left: 6px; }

.photoList a { border: 1px #fff dotted; }
.photoList a:hover { border: 1px #FDE34E solid; background-color: #FDE34E; border-radius: 4px; }
.photoList a:hover strong { background-color: inherit; }

/* end for home page */

hr,address,h1,h2,h3 { clear: both; }

a:link, a:visited, a[tabindex] { text-decoration: underline; cursor: pointer; }
a:hover { text-decoration: none; }

p { margin-bottom: 0; }
/* p + p { text-indent: 1em; margin-top:0 } */
acronym { letter-spacing: .08em; }
/* q { “ ”} */
blockquote { padding: 0 0; margin: 0 40px; text-align: left; border-left: 1em #f3f3dd solid; }

.orientation { text-align: left; font-size: 1em; /* border-bottom: 1px #888 solid; */ color: #444; /* background: #fff; */ }
.orientation a,.orientation strong { color: inherit; }
.orientation .arrow { color: #cbb; }

p,dd,li { text-align: justify; line-height: 1.4em; }
h2[id]:hover:after{ content: " (shortcut: #" attr(id) ")"; float: right; color: #888; font-size: .4em; font-family: "courier new",courier,monospace; font-weight: normal; font-style: normal; letter-spacing: 0; }
h2:active { color: red; border-color: red; }

#menu { font-size: 1em; z-index: 0; }
#menu ul { padding: 0; margin: 0; border-top: 1px #aaa dotted; }
#menu a { display: block; }
#menu li { background: #f3f3dd url(/images/degraden1); border-bottom: 1px #aaa dotted; border-left: 1px #aaa dotted; border-right: 1px #aaa dotted; list-style-type: none; font-size: .75em; letter-spacing: .04em; padding: .24em; text-align: center; transition-property: background-color; transition-duration: 1s; }
#menu li a { text-decoration: none; }
#menu li a { font-family: tahoma,verdana,arial,georgia; }
#menu li:hover { background: #fff; transition-duration: .3s; }
#menu hr { display: none; }
#menu .selected { font-weight: bold; }
#menu.fixed { position: fixed; top: 0; }

.description, body.hasSideMenu .description {
	background: linear-gradient(to bottom, #888 0%, #888 5%, gold 6%, gold 15%, #444 16%, #444 100%);
	color: #fafafa; padding: .5em 0 0 0; font-size: .8em; text-align: center; font-weight: bold; font-style: italic; font-family: georgia,cursive;
	margin: 0; }

h1+.orientation+.description { margin: 0; }
.illustration { /* border-top: 1px #aaa solid; border-bottom: 1px #aaa solid; */ text-align: center; font-size: .85em; font-family: georgia; font-style: italic; background: #f3f3dd url(/images/degraden1) right top; padding: .5em !important; border-radius: 20px; text-indent: 0; }
.illustration img, .illustration object , .illustration svg { border-width: 0px 0px 2px 0px; border-color: gold; border-style: solid; padding-bottom: .5em; }

ul .reviewed, ol .reviewed { color: gold; font-size: .5em; text-transform: uppercase; background: #444; padding: 0 2px; border-radius: 2px; opacity: .9; }
ul .reviewed br, ol .reviewed br { display: none; }
ul .in_progress, ol .in_progress { color: #eee; font-size: .6rem; text-transform: uppercase; background: #444; padding: 0 2px; border-radius: 2px; opacity: .9; }
ul .in_progress br, ol .in_progress br { display: none; }

q { quotes: "“" "”" "‘" "’"; }
/* *:lang(fr) q { quotes: "« " " »" "'" "'"; } */

.invisible { display: none; }

/* a[href^="http://"]:after{content: ' [external link]';} */
/* a[href^="http://"] { padding-right: 13px; background: url(/images/lien_externe.png) no-repeat right center; }
a[href^="http://donindiano"],address a[href^="http://validator"] { padding-right: 0; background-image: none; } */

div.errors{ position: absolute; top: 1em; left: 1em; border: 5px red double; padding: .3em; background: lightpink; font-family: monospace; opacity: .8; }
div.errors:active { visibility: hidden; }

.centerTd td { text-align: center; }

*[lang|="la"] { font-style: italic; }

.footnotes { font-size: 80%; border-top: 1px #888 dashed; padding-top: 1em; margin-top: 2em; }
.footnotes ul, .footnotes li { list-style-type: none; }
.footnotes li:target { background-color: gold; transition: background-color 2.5s; }
.href_footnote a:link, .href_footnote a:visited { text-decoration: none; }
.href_footnote a:hover { text-decoration: underline; }

.for_sale { background: gold; font-size: .9em; }

.notForScreen { display: none; }

.text_comment .layoutLineBreak { display: none; }
.meta_comment { font-style: italic; }
.hidden_comment { color: #888; }
.admin_comment .name_comment strong { /* text-shadow: 0 0 1px gold; */ border-bottom: .1em gold solid; border-radius: 0; }
#comments_section { background-color: #F3F3DD; padding-bottom: .5em; border-top: 1px #ccc solid; margin-top: 2em; }
#comments_section p+p { text-indent: 0; }
.comments_navigation { font-size: small; background-color: #dedeca; }
#comments_section .is_thread { border-top: 3px dotted #dedeca; margin-top: -9px; padding-top: 5px; }
#comments_section .is_reply { padding-left: 4em; }
#comments_list :first-child.user_comment { border-top: none !important; }
textarea#user_comment { vertical-align: top; }

.teletype { font-family: "Courier New", monospace; }

@media (min-width: 801px) {
	/*
	Does not work yet
	:root {
		var-window-width: large;
	}
	For now I'll use a hack: carry a variable in the z-index of #menu (0=undefined; 1=large; 2=small)
	*/
	#menu { position: absolute; right: 25px; top: 150px; width: 200px; z-index: 1; }
	body.hasSideMenu p,body.hasSideMenu pre,body.hasSideMenu table,body.hasSideMenu dl,body.hasSideMenu ul,body.hasSideMenu ol,body.hasSideMenu h2,body.hasSideMenu h3,body.hasSideMenu h4,body.hasSideMenu h5,body.hasSideMenu h6,body.hasSideMenu hr,body.hasSideMenu figure { padding: 0; margin: 1em 260px 1em 40px; }
	#menu h2 { display: none; }
}

@media (max-width: 800px) {
	/* Smartphone 2020 */
	/*
	:root {
		var-window-width: small;
	}
	*/
	html,body{color:#000;background:#f9fae9;margin:0;font-size:11.2pt;font-family:'trebuchet ms',verdana,helvetica,arial,sans-serif;}
	h1 {
		font-size:1.6rem;
		color:#fff;
		background:#111;
		margin:0;
		padding: 0.2em 1em;
		text-transform:uppercase;
	}
	h1,h2,.photoList{text-align:center}
	.photoList img{display:block;margin-left:auto;margin-right:auto}
	h2 {
		font-size:1.4em;
		background:#fd0;
		margin: 0.8em 0;
		padding: 5px 4px 4px 4px;
	}
	p{margin:1em .5em}
	.description{margin:0;padding:0;color:#fff;background:#585858}
	.orientation,.navigation{text-align:right;font-size:1em;margin:0 .5em}
	ul { padding-left: 1em; margin: 0 1em 0 2em; }
	table{border-collapse:collapse}
	caption, .illustration, .description, body.hasSideMenu .description {
		text-align:center;font-style:italic; font-size: 0.9rem;
	}
	.illustration,th,strong{background:#f3f3dd}
	img, .illustration object { max-width: 100%; }
	address { width: auto; text-align: center; }
	address img{display:none}
	.navigation{display:inline}
	#comments_section{background:#f3f3dd;border-top:2px #ccc dotted;}
	#titleComments {
		text-align: center;
		background: #fd0;
		margin-left: 0;
		margin-right: 0;
	}
	#comments_section .is_reply{padding-left:.8em;border-left:.2em #dedeca solid}
	.teletype{font-family:monospace}
	.photoList .li1, .photoList .li2 { float: none; width: 100%; margin: 1px 0 0 0; }
	ol.photoList, ul.photoList { padding: 0 0.5em; width: auto; border: none; }
	.photoList a { display: block; border: none; }
	.reviewed, .in_progress { display: none; }
	h2[id]:hover:after { content: ""; }
	/* .photoList+* { padding-top: 0; } */
	#menu { margin: 1em auto; z-index: 2; }
	#menu li { font-size: 1em; }
	#menu a { padding: 1em; }
	#menu ul { padding: 1em; }
	.description, body.hasSideMenu .description {
		background: #444;
		border-top: 3px gold solid;
		padding: 3px 0 2px 0;
	}
	abbr[title], acronym[title] { border-bottom: inherit; }
}

/* Burger menu - 2020 */

body p, body ul, body ol, body h1, body h2, body h3, body table, body address, body dl, body hr {
	transition: filter 1s;
}
body.hasMenuExpanded p, body.hasMenuExpanded ul, body.hasMenuExpanded ol, body.hasMenuExpanded h1, body.hasMenuExpanded h2, body.hasMenuExpanded h3, body.hasMenuExpanded table, body.hasMenuExpanded address, body.hasMenuExpanded dl, body.hasMenuExpanded hr {
	filter: blur(3px);
}

.menuBurgerButton, .menuBurgerButton:hover, .menuBurgerButton:active {
	background-color: transparent;
	/* box-shadow: 0 0 15px #f9fae9; */
}
.hasMenuExpanded .menuBurgerButton {
	background-color: #444;
	opacity: 1;
}
.navButtonIsHidden .menuBurgerButton {
	display: none;
}
.menuBurgerButton {
	display: block;
	width: 4rem;
	height: 4rem;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 100;
	border: none;
	opacity: 1;
	transition: opacity 0.4s, background-color 1s;
	background-image: url(/scripts/icon_menu_nav2);
}
.menuBurgerButton.unshowing {
	opacity: 0;
	visibility: hidden;
	transition: opacity 4s, visibility 4s 0s;
}

.menuBurgerOverlay {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	opacity: 0;
	background-color: #ba9;
	z-index: 99;
	visibility: hidden;
	transition: opacity 1s, visibility 0s 1s;
}
body.hasMenuExpanded {
	overflow: hidden;
}
body.hasMenuExpanded .menuBurgerOverlay {
	opacity: 0.3;
	visibility: visible;
	transition: opacity 1s, visibility 0s;
}

#menuPanel {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 5rem;
	right: 1rem;
	left: 1rem;
	max-height: calc(100vh - 6rem);
	overflow-y: scroll;
	z-index: 100;
	padding: 0 !important;
	transition: opacity 1s, visibility 0s 1s;
	box-shadow: 0 0 10px black;
}
body.hasMenuExpanded #menuPanel {
	opacity: 1;
	visibility: visible;
	filter: none;
	transition: opacity 1s, visibility 0s;
}

.menuBurgerLoading #menuPanel, .menuBurgerLoading.usesMenuBurgerNav #menu h2 {
	display: none;
}

.usesMenuBurgerNav .navigation {
	display: none;
}

.usesMenuBurgerNav #menu h2 {
	visibility: hidden;
	color: #f9fae9;
	position: fixed;
	top: 1rem;
	left: 5rem;
	right: 5rem;
	height: 3rem;
	z-index: 100;
	filter: none;
	border: none;
	font-size: 19px;
	line-height: 18px;
	text-align: left;
	background: linear-gradient(to right, black, #444);
	overflow: hidden;
	margin: 0;
	padding: 1rem 0 0 0;
	opacity: 0;
	transition: opacity 1s, visibility 0s 1s;
	}

.menuBurgerTitle {
	visibility: hidden;
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 4rem;
	height: 4rem;
	z-index: 100;
	font-size: 13px;
	line-height: 2rem;
	padding: 0;
	font-family: georgia,arial,helvetica,sans-serif;
	font-style: italic;
	opacity: 0;
	transition: opacity 1s, visibility 0s 1s;
	background-color: black;
	background-image: url(/scripts/icon_menu_home);
	background-repeat: no-repeat;
	background-size: 2rem;
	background-position: center center;
}
body.hasMenuExpanded .menuBurgerTitle, body.hasMenuExpanded.usesMenuBurgerNav #menu h2 {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s, visibility 0s;
}

.hasMenuExpanded #menu li {
	background: #f9fae9;
}

.usesMenuBurgerNav #menu li a:active, .menuBurgerTitle:active {
	background-color: gold;
}


.tableTooWide {
	overflow-x: scroll;
	display: block;
	margin: 0;
}

table.tableTooWide.withborder, .tableTooWide[border="1"] {
	border: none;
}

.tableTooWide.withborder td:first-child, .tableTooWide[border="1"] td:first-child {
	border-left: 1px #ccc solid;
}

.tableTooWide.withborder td:last-child, .tableTooWide[border="1"] td:last-child {
	border-right: 1px #ccc solid;
}

.tableTooWideContainer {
	margin-left: 0.5em; margin-right: 0.5em;
	overflow-x: hidden;
	position: relative;
}

.tableTooWideContainer:before {
	display: block;
	width: 4em;
	height: 100%;
	content: "";
	opacity: 1;
	transition: opacity 0.4s;
	background: url(/scripts/icon_fleche_droite_plate) no-repeat space right center /30px, linear-gradient(to right, rgba(0,0,0,0), #f9fae9);
	position: absolute;
	top: 0;
	right: 0;
}

.tableTooWideContainer.fullyScrolledToRight:before {
	opacity: 0;
}