@charset "utf-8";
/*

	S I T E S	S T Y L E S   F O R   D E S K T O P

*/


@font-face { font-family: DejaVuSans; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSans.ttf'); }
@font-face { font-family: DejaVuSans; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSans-Bold.ttf'); font-weight: bold; }
@font-face { font-family: DejaVuSans; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSans-Oblique.ttf'); font-style: italic; }
@font-face { font-family: DejaVuSans; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSans-BoldOblique.ttf'); font-weight: bold; font-style: italic; }

@font-face { font-family: DejaVuSansCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansCondensed.ttf'); }
@font-face { font-family: DejaVuSansCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansCondensed-Bold.ttf'); font-weight: bold; }
@font-face { font-family: DejaVuSansCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansCondensed-Oblique.ttf'); font-style: italic; }
@font-face { font-family: DejaVuSansCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansCondensed-BoldOblique.ttf'); font-weight: bold; font-style: italic; }

@font-face { font-family: DejaVuSansMono; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansMono.ttf'); }
@font-face { font-family: DejaVuSansMono; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansMono-Bold.ttf'); font-weight: bold; }
@font-face { font-family: DejaVuSansMono; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansMono-Oblique.ttf'); font-style: italic; }
@font-face { font-family: DejaVuSansMono; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSansMono-BoldOblique.ttf'); font-weight: bold; font-style: italic; }

@font-face { font-family: DejaVuSerif; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerif.ttf'); }
@font-face { font-family: DejaVuSerif; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerif-Bold.ttf'); font-weight: bold; }
@font-face { font-family: DejaVuSerif; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerif-Italic.ttf'); font-style: italic; }
@font-face { font-family: DejaVuSerif; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerif-BoldItalic.ttf'); font-weight: bold; font-style: italic; }

@font-face { font-family: DejaVuSerifCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerifCondensed.ttf'); }
@font-face { font-family: DejaVuSerifCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerifCondensed-Bold.ttf'); font-weight: bold; }
@font-face { font-family: DejaVuSerifCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerifCondensed-Italic.ttf'); font-style: italic; }
@font-face { font-family: DejaVuSerifCondensed; src: url('../../zSiteSupport/Fonts/DejaVu/DejaVuSerifCondensed-BoldItalic.ttf'); font-weight: bold; font-style: italic; }



	










/*  H 1 - H 6   P A R A G R A P H  */

/*
For numbered and foldable headings the margin and padding should be set by the folding/unfolding
algorithms:  when folded they have no space between them, but when unfolded the space before a
heading is dictated by the folding state of the previous chapter, not the chapter itself!
*/

h1	{ clear: both;
	font-family: DejaVuSans; font-size: 1.15rem; font-weight: normal; color: rgb(29%,23%,24%);
	margin-top: 2rem; padding: 0.2rem 0.0rem 0.25rem 1.5rem;
	border-top: solid 0.15em rgb(50%,46%,47%);  border-bottom: solid 0.1em rgb(50%,46%,47%);
	background-color: rgb(84%,77%,77%);
	counter-increment: h1count; counter-reset: h2count h3count h4count;
	}

	h1::before { content: counter(h1count)".  "; width: 11rem; text-align: right; }

	h1.NoNumber::before { content: ""; counter-increment: h1count -1; }

p.h1	/* simulate a heading with a paragraph if needed outside folding/numbering on top level. */
	{ clear: both;
	font-family: DejaVuSans; font-size: 1.15rem; font-weight: normal; color: rgb(29%,23%,24%);
	margin: 2.0rem 0.0rem 0.0rem 0.0rem ; padding: 0.2rem 0.0rem 0.25rem 1.5rem;
	border-top: solid 0.15em rgb(50%,46%,47%);  border-bottom: solid 0.1em rgb(50%,46%,47%);
	background-color: rgb(84%,77%,77%); }


/*

Folded-unfolded look of Chapters.

Note complication because of potential NoNumber, thinner borders when folded and bottom border of last folded h1.

Case for aligning the numbers at the right if more than 9 chapters (forget about more than 99 chapters):
If all chapters are folded, then their numbers look better if right-aligned on a same vertical space.

There are three ways of doing it:

(1) do it properly by CSS3 counter-style written below.  However this does not yet work on many browsers,
e.g. the leading-space argument disrupts styles in Safari.  The code is:

 @counter-style leading-space { system: extends decimal; pad: 2 '\2007'; }
.Folded:before				{ content: "▶︎  "counter(h1count, leading-space)".  "; }
.Unfolded:before			{ content: "︎▼  "counter(h1count, leading-space)".  "; }

(2) give the numbers 1 to 9 more space than 10 to 99 by putting the number in a span before the text of each h1 and
right-aligning text in that span.  This is a complexity in the html code.  CSS code:
.Folded:before				{ content: "▶︎  "; }
.Folded span:before			{ content: counter(h1count)".  "; display: inline-block; width: 2.5rem; text-align: right; }

(3) use the numbers accumulated in the javascript for text references.  Since the number is known to the folding/unfolding
algorithm, it can attribute a different class to the h1s that have numbers 1 to 9.  This is the adopted solution until
solution (1) works.  Classes Folded-1-9 and Folded are distinguished by the number of non-breaking spaces in their
::before content.  The folding/unfolding algorithm then assigns Folded-1-9 to h1s with numbers 1-9 and just Folded to
the others.

*/



.Folded			{ cursor: pointer; border-top: solid 0.05rem rgb(50%,46%,47%); border-bottom: none; }
.Folded-1-9		{ cursor: pointer; border-top: solid 0.05rem rgb(50%,46%,47%); border-bottom: none; }
article:last-of-type h1.Folded:last-of-type
				{ cursor: pointer; border-top: solid 0.05rem rgb(50%,46%,47%); border-bottom: solid 0.05rem rgb(50%,46%,47%); }
.FoldedNoNumber	{ cursor: pointer; border-top: solid 0.05rem rgb(50%,46%,47%); border-bottom: none; }
article:last-of-type h1.FoldedNoNumber:last-of-type
				{ cursor: pointer; border-top: solid 0.05rem rgb(50%,46%,47%); border-bottom: solid 0.05rem rgb(50%,46%,47%); }
.Unfolded		{ cursor: pointer; }

.Folded::before				{ content: "▶  "		counter(h1count) ".  "; }
.Folded-1-9::before			{ content: "▶    "		counter(h1count) ".  "; }
.FoldedNoNumber::before		{ content: "▶         "; counter-increment: h1count -1; }
.Unfolded::before			{ content: "▼  "		counter(h1count) ".  "; }
.Unfolded-1-9::before		{ content: "▼    "		counter(h1count) ".  "; }
.UnfoldedNoNumber::before	{ content: "▼         "; counter-increment: h1count -1; }
.Unfoldable	{ }  /* for disabling foldability; to be used on body only. */

.Folded-1-9:hover		{ color: rgb(30%,35%,87%); background-color: rgb(70%,70%,70%); cursor: pointer; }
.Folded:hover			{ color: rgb(30%,35%,87%); background-color: rgb(70%,70%,70%); cursor: pointer; }
.FoldedNoNumber:hover	{ color: rgb(30%,35%,87%); background-color: rgb(70%,70%,70%); cursor: pointer; }
.Unfolded:hover			{ color: rgb(30%,35%,87%); background-color: rgb(70%,70%,70%); cursor: pointer; }
.UnfoldedNoNumber:hover	{ color: rgb(30%,35%,87%); background-color: rgb(70%,70%,70%); cursor: pointer; }


h2	{ clear: both;
	font-family: DejaVuSans; font-size: 1.1rem; font-weight: normal; color: rgb(29%,23%,24%);
	margin: 1.8rem 0 0.0rem 1.5rem; padding: 0.1rem 1.0rem 0.1rem 0.5rem;
	border: solid 0.1em rgb(70%,66%,67%); border-right: none;;
	background-color: rgb(90%,87%,87%);
	counter-increment: h2count; counter-reset: h3count h4count;
	}

	h2::before { content: counter(h1count)"."counter(h2count)".  "; }

	h2.NoNumber::before { content: ""; counter-increment: h2count -1; }
	h2:first-of-type { clear: none; }



h3	{ clear: none;
	font-family: DejaVuSans; font-size: 1.0rem; font-weight: normal; color: rgb(29%,23%,24%);
	margin: 1.5rem 0 0.0rem 1.5rem; padding: 0.2rem 1.0rem 0.2rem 0.5rem;
	border-top: none;
	background-color: rgb(94%,90%,90%);
	counter-increment: h3count; counter-reset: h4count;
	}

	h3::before { content: counter(h1count)"."counter(h2count)"."counter(h3count)".  "; }

	h3.NoNumber::before { content: ""; counter-increment: h3count -1; }



h4	{ clear: none;
	font-family: DejaVuSans; font-size: 1.0rem; font-weight: normal; font-style: italic; color: rgb(0%,0%,0%);
	margin: 1.0rem 0 0.0rem 1.5rem; padding: 0.2rem 1.0rem 0.2rem 0.5rem;
	border: none;
	background-color: transparent;
	counter-increment: h4count;
	}

	h4::before { content: counter(h1count)"."counter(h2count)"."counter(h3count)"."counter(h4count)".  "; }

	h4.NoNumber::before { content: ""; counter-increment: h4count -1; }



p			{ text-align: justify; margin: 0.5rem 1.5rem 0.0rem 1.5rem; }


p.Bold		{ font-weight: bold; margin: 0.5rem 1.5rem 0.0rem 1.5rem; }
p.Emphasis	{ font-family: DejaVuSerif, serif; font-style: italic; color: rgb(60%,27%,0%);
				margin: 0.5rem 1.7rem 0.0rem 1.5rem; }
p.Example	{ font-family: DejaVuSansMono, monospace; color: rgb(13%,53%,0%);
				margin: 0 1.5rem 0 1.5rem; }
p.Formula	{ margin: 0.5rem 1.8rem 0.5rem 1.8rem; padding: 0.5rem 1.0rem 0.5rem 1.0rem;
				border: solid 0.1rem rgb(67%,67%,67%); }
				
p.Intonate	{ font-style: italic; margin-right: 1.7rem; }

p.Italic	{ font-style: italic; margin: 0.5rem 3.5rem 0.0rem 1.5rem; }

p.MonospacePre	{ white-space: pre; font-family: DejaVuSansMono, monospace; color: rgb(0%,0%,0%);
					margin: 0.5rem 1.5rem 0.0rem 1.5rem; }
p.Quote		{ font-family: DejaVuSerifCondensed, serif; font-style: italic; color: rgb(20%,20%,50%);
					margin: 0.5rem 1.5rem 0.0rem 1.5rem; }

p.Author	{ font-size: 1.0rem; font-style: italic; text-align: right; margin-right: 1.5rem; }
p.Date		{ font-size: 0.9rem; font-style: italic; text-align: right; margin-right: 1.5rem; }











/* =================================================================================================== */
@media print {


h1	{
	font-family: DejaVuSans; font-size: 5mm; color: black;
	margin: 10mm 0 0 0; padding: 0;
	border: none;
	background-color: transparent;
	}
h1:first-of-type {margin-top: 1mm; }
article:first-of-type { margin-top: 1mm; }

p.h1	/* simulate a heading with a paragraph if needed outside folding/numbering on top level. */
	{
	font-family: DejaVuSans; font-size: 2.5em;
	margin: 2mm 0 0 0; padding: 0;
	border: none;
	background-color: transparent; }

.Unfolded::before			{ content: ""		counter(h1count) ".  "; }
.Unfolded-1-9::before		{ content: ""		counter(h1count) ".  "; }
.UnfoldedNoNumber::before	{ content: ""; counter-increment: h1count -1; }
.Unfoldable	{ }  /* for disabling foldability; to be used on body only. */


h2	{
	font-family: DejaVuSans; font-size: 4mm; font-weight: normal; color: black;
	margin: 5mm 0 3mm 0; padding: 0;
	border: none;
	background-color: transparent;
	}



h3	{
	font-family: DejaVuSans; font-size: 3mm; font-weight: normal; color: black;
	margin: 1.5rem 0 0.0rem 1.5rem; padding: 0.2rem 1.0rem 0.2rem 0.5rem;
	border: none;
	background-color: transparent;
	}

p			{ font-family: DejaVuSerif; text-align: justify; margin: 2mm 0 0 0; }


p.Bold		{ font-weight: bold; margin: 0.5rem 1.5rem 0.0rem 1.5rem; }
p.Emphasis	{ font-family: DejaVuSerif, serif; font-style: italic; color: rgb(60%,27%,0%);
				margin: 0.5rem 1.7rem 0.0rem 1.5rem; }
p.Example	{ font-family: DejaVuSansMono, monospace; color: rgb(13%,53%,0%);
				margin: 0 1.5rem 0 1.5rem; }
p.Formula	{ margin: 0.5rem 1.8rem 0.5rem 1.8rem; padding: 0.5rem 1.0rem 0.5rem 1.0rem;
				border: solid 0.1rem rgb(67%,67%,67%); }
				
p.Intonate	{ font-style: italic; margin-right: 1.7rem; }

p.Italic	{ font-style: italic; margin: 0.5rem 3.5rem 0.0rem 1.5rem; }
p.Math		{ white-space: pre; font-family: DejaVuSerif, serif; font-style: italic; letter-spacing: 0.1rem; color: rgb(0%,0%,88%);
				margin: 0.5rem 1.5rem 0.0rem 1.5rem; }
p.MonospacePre	{ white-space: pre; font-family: DejaVuSansMono, monospace; color: rgb(0%,0%,0%);
					margin: 0.5rem 1.5rem 0.0rem 1.5rem; }
p.Quote		{ font-family: DejaVuSerifCondensed, serif; font-style: italic; color: rgb(20%,20%,50%);
					margin: 0.5rem 1.5rem 0.0rem 1.5rem; }

p.Author	{ font-size: 0.9rem; font-style: italic; text-align: right; margin-right: 1.5rem; }
p.Date		{ font-size: 0.9rem; font-style: italic; text-align: right; margin-right: 1.5rem; }


}












/*  W I D T H S   B O R D E R S   A L I G N M E N T S  */

/* Widths in percent */
.W05	{ width:   5%; }
.W10	{ width:  10%; }
.W15	{ width:  15%; }
.W20	{ width:  20%; }
.W25	{ width:  25%; }
.W30	{ width:  30%; }
.W35	{ width:  35%; }
.W40	{ width:  40%; }
.W45	{ width:  45%; }
.W50	{ width:  50%; }
.W55	{ width:  55%; }
.W60	{ width:  60%; }
.W65	{ width:  65%; }
.W70	{ width:  70%; }
.W75	{ width:  75%; }
.W80	{ width:  80%; }
.W85	{ width:  85%; }
.W90	{ width:  90%; }
.W95	{ width:  95%; }
.W100	{ width: 100%; }

/* Heights in % viewport width */
.H05	{ height:   5vw; }
.H10	{ height:  10vw; }
.H15	{ height:  15vw; }
.H20	{ height:  20vw; }
.H25	{ height:  25vw; }
.H30	{ height:  30vw; }
.H35	{ height:  35vw; }
.H40	{ height:  40vw; }
.H45	{ height:  45vw; }
.H50	{ height:  50vw; }
.H55	{ height:  55vw; }
.H60	{ height:  60vw; }
.H65	{ height:  65vw; }
.H70	{ height:  70vw; }
.H75	{ height:  75vw; }
.H80	{ height:  80vw; }
.H85	{ height:  85vw; }
.H90	{ height:  90vw; }
.H95	{ height:  95vw; }
.H100	{ height: 100vw; }

/* Widths in em */
.We02	{ width:   2em; }
.We03	{ width:   3em; }
.We04	{ width:   4em; }
.We06	{ width:   6em; }
.We10	{ width:  10em; }
.We15	{ width:  15em; }
.We20	{ width:  20em; }
.We25	{ width:  25em; }
.We30	{ width:  30em; }
.We40	{ width:  40em; }
.We50	{ width:  50em; }

/* Borders */
.Bt	{ border-top:		solid 0.1em rgb(53%,53%,53%); }
.Br	{ border-right:		solid 0.1em rgb(53%,53%,53%); }
.Bb	{ border-bottom:	solid 0.1em rgb(53%,53%,53%); }
.Bl	{ border-left:		solid 0.1em rgb(53%,53%,53%); }
.Ba	{ border:			solid 0.1em rgb(53%,53%,53%); }
.Bn	{ border:			none; }

/* Background colours (Highlights) */
.Hb		{ background-color: rgb( 78%, 86%,100%); }	/* blue,	light	*/
.Hc		{ background-color: rgb( 69%,100%,100%); }	/* cyan,	light	*/
.Hg		{ background-color: rgb( 84%,100%, 77%); }	/* green,	light	*/
.Hgrl	{ background-color: rgb( 80%, 80%, 80%); }	/* grey,	light	*/
.Hm		{ background-color: rgb(100%, 85%,100%); }	/* magenta,	light	*/
.Hr		{ background-color: rgb(100%, 86%, 78%); }	/* red,		light	*/
.Hy		{ background-color: rgb(100%,100%, 76%); }	/* yellow,	light	*/

/* Alignments */
.At	{ vertical-align:	top;		}
.Am	{ vertical-align:	middle;		}
.Ab	{ vertical-align:	bottom;		}
.Al	{ text-align:		left;		}
.Ac	{ text-align:		center;		}
.Ar	{ text-align:		right;		}
.Aj	{ text-align:		justify;	}
.An	{ white-space:		nowrap;		}
.Aw	{ white-space:		normal;		}
.Ap	{ white-space:		pre;		}

table.Al { margin-left: 0; }
img.Al { margin-left: 0; }
img.Am { margin-top: auto; margin-bottom: auto; }

/* Floats */
.Fr { float: right; }
.Fl { float: left; }








/*  T A B L E S  */

	
/*	by default table is transparent and centred, cells have no borders no textwrap and moderate padding.
	To allow overflow on tablets and smartphones, tables must be wrapped in a div element. */


table	{
	clear: both; width: auto;
	margin: 0 auto 0 auto;
	border-collapse: collapse; border: none;
	}
table.AL	{ margin-left: 1.5rem; }
table.AR	{ margin-right: 1.5rem; }


thead	{
	}

th	{
	font-weight: normal; vertical-align: middle; text-align: center; white-space: nowrap;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-collapse: collapse; border: none;
	background-color: rgb(100%,91%,69%);
	}

tbody	{
	}

td	{
	vertical-align: top; white-space: nowrap;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-collapse: collapse; border: none;
	background-color: transparent;
	}

tfoot	{
	font-weight: normal; vertical-align: middle; text-align: center; white-space: nowrap;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-collapse: collapse; border: none;
	background-color: rgb(79%,100%,100%);
	}

caption		{ caption-side: bottom; font-style: italic; padding-top: 0.8em; text-align: center; }
caption.Dt	{ caption-side: top; font-style: italic; padding-bottom: 0.8em; text-align: center; }
caption.Db	{ caption-side: bottom; font-style: italic; padding-top: 0.8em; text-align: center; }


td > p				{ white-space: normal; margin: 0.5em 0 0 0; padding: 0; }
td > p:first-Child	{ white-space: normal; margin: 0; padding: 0; }

/* columns cannot generally have style properties inherited from a col element; using nth-child also fails if there are colspan cells in the row */
table.Al td { text-align: left; }
table.Al1 td:nth-child(1) { text-align: left; }
table.Al2 td:nth-child(2) { text-align: left; }
table.Al3 td:nth-child(3) { text-align: left; }
table.Al4 td:nth-child(4) { text-align: left; }
table.Al5 td:nth-child(5) { text-align: left; }
table.Al6 td:nth-child(6) { text-align: left; }
table.Al7 td:nth-child(7) { text-align: left; }
table.Al8 td:nth-child(8) { text-align: left; }
table.Al9 td:nth-child(9) { text-align: left; }
table.Al10 td:nth-child(10) { text-align: left; }
table.Al11 td:nth-child(11) { text-align: left; }
table.Al12 td:nth-child(12) { text-align: left; }
table.Al13 td:nth-child(13) { text-align: left; }
table.Al14 td:nth-child(14) { text-align: left; }
table.Al15 td:nth-child(15) { text-align: left; }

table.Ar td { text-align: right; }
table.Ar1 td:nth-child(1) { text-align: right; }
table.Ar2 td:nth-child(2) { text-align: right; }
table.Ar3 td:nth-child(3) { text-align: right; }
table.Ar4 td:nth-child(4) { text-align: right; }
table.Ar5 td:nth-child(5) { text-align: right; }
table.Ar6 td:nth-child(6) { text-align: right; }
table.Ar7 td:nth-child(7) { text-align: right; }
table.Ar8 td:nth-child(8) { text-align: right; }
table.Ar9 td:nth-child(9) { text-align: right; }
table.Ar10 td:nth-child(10) { text-align: right; }
table.Ar11 td:nth-child(11) { text-align: right; }
table.Ar12 td:nth-child(12) { text-align: right; }
table.Ar13 td:nth-child(13) { text-align: right; }
table.Ar14 td:nth-child(14) { text-align: right; }
table.Ar15 td:nth-child(15) { text-align: right; }

table.Ac td { text-align: center; }
table.Ac1 td:nth-child(1) { text-align: center; }
table.Ac2 td:nth-child(2) { text-align: center; }
table.Ac3 td:nth-child(3) { text-align: center; }
table.Ac4 td:nth-child(4) { text-align: center; }
table.Ac5 td:nth-child(5) { text-align: center; }
table.Ac6 td:nth-child(6) { text-align: center; }
table.Ac7 td:nth-child(7) { text-align: center; }
table.Ac8 td:nth-child(8) { text-align: center; }
table.Ac9 td:nth-child(9) { text-align: center; }
table.Ac10 td:nth-child(10) { text-align: center; }
table.Ac11 td:nth-child(11) { text-align: center; }
table.Ac12 td:nth-child(12) { text-align: center; }
table.Ac13 td:nth-child(13) { text-align: center; }
table.Ac14 td:nth-child(14) { text-align: center; }
table.Ac15 td:nth-child(15) { text-align: center; }

table.Aw td	{ white-space: normal; }
table.Aw1 td:nth-child(1) { white-space: normal; }
table.Aw2 td:nth-child(2) { white-space: normal; }
table.Aw3 td:nth-child(3) { white-space: normal; }
table.Aw4 td:nth-child(4) { white-space: normal; }
table.Aw5 td:nth-child(5) { white-space: normal; }
table.Aw6 td:nth-child(6) { white-space: normal; }
table.Aw7 td:nth-child(7) { white-space: normal; }
table.Aw8 td:nth-child(8) { white-space: normal; }
table.Aw9 td:nth-child(9) { white-space: normal; }
table.Aw10 td:nth-child(10) { white-space: normal; }
table.Aw11 td:nth-child(11) { white-space: normal; }
table.Aw12 td:nth-child(12) { white-space: normal; }
table.Aw13 td:nth-child(13) { white-space: normal; }
table.Aw14 td:nth-child(14) { white-space: normal; }
table.Aw15 td:nth-child(15) { white-space: normal; }

table.Ap td	{ white-space: pre; }
table.Ap1 td:nth-child(1) { white-space: pre; }
table.Ap2 td:nth-child(2) { white-space: pre; }
table.Ap3 td:nth-child(3) { white-space: pre; }
table.Ap4 td:nth-child(4) { white-space: pre; }
table.Ap5 td:nth-child(5) { white-space: pre; }
table.Ap6 td:nth-child(6) { white-space: pre; }
table.Ap7 td:nth-child(7) { white-space: pre; }
table.Ap8 td:nth-child(8) { white-space: pre; }
table.Ap9 td:nth-child(9) { white-space: pre; }
table.Ap10 td:nth-child(10) { white-space: pre; }
table.Ap11 td:nth-child(11) { white-space: pre; }
table.Ap12 td:nth-child(12) { white-space: pre; }
table.Ap13 td:nth-child(13) { white-space: pre; }
table.Ap14 td:nth-child(14) { white-space: pre; }
table.Ap15 td:nth-child(15) { white-space: pre; }


table.Simple th		{ border: solid 0.1em rgb(53%,53%,53%); }
table.Simple th.Bn	{ border: none; background-color: transparent; }
table.Simple td		{ border: solid 0.1em rgb(53%,53%,53%); }
table.Simple td.Bn	{ border: none; background-color: transparent; }
table.LeftHeadings tr > td:first-child { background-color: rgb(100%,91%,69%); }

table.Sortable th	{ cursor: pointer }
table.Sortable tr:last-child th::after	{ content: "  ⇅"; color: rgb(56%,22%,22%); }
table.Sortable th.DontSort::after	{ content: "" }

/* 
table.Sortable th::after	{ content: url(StyleSections/TableColumnSortArrows.svg) }
 */

table.Scrollable { display: block; table-layout: fixed; }
table.Scrollable th, td { white-space: normal; }

table.Scrollable caption { display: block; margin: 0 auto 0 auto; padding-left: 0; padding-right: 0; border: solid 1px black; border-bottom: none; font-style: normal; }

table.Scrollable thead { display: block; overflow-y: scroll; margin: 0 auto 0 auto; padding: 0; border: solid 1px black; border-bottom: none; }
table.Scrollable thead tr th	{ border: solid  1px #b80; border-left: none; padding: 0.2em; }
table.Scrollable thead tr:first-child	th	{ border-top: none; }
table.Scrollable thead tr:last-child	th	{ border-bottom: none; }

table.Scrollable tbody { display: block; overflow-y: scroll; margin: 0 auto 0 auto; padding: 0; border: solid 1px black; border-bottom: none; }
table.Scrollable tbody tr td	{ border: solid  1px black; border-left: none; }
table.Scrollable tbody tr:first-child	td	{ border-top: none; }
table.Scrollable tbody tr:last-child	td	{ border-bottom: none; }

table.Scrollable tfoot { display: block; overflow-y: scroll; margin: 0 auto 0 auto; padding: 0; border: solid 1px black; }
table.Scrollable tfoot tr td	{ border-left: none; }
table.Scrollable tfoot tr:first-child td	{ border-top: none; }









/*  L I S T S  */

ul			{ margin: 0.5em 1.5rem 1.5em 3.5em; padding: 0; list-style-type: disc; }
	li > ul	{ margin: 0.0em 0.0em 0.5em 1.5em; list-style-type: circle; }
	li > ul > li > ul	{ list-style-type: square; }

ol			{ margin: 0.5em 1.5rem 1.5em 3.9em; padding: 0; list-style-type: decimal; }
	li > ol	{ margin: 0.0em 0.0em 0.5em 1.5em; }

ol.Letters { list-style: lower-alpha; }

li			{ margin: 0.1em 1.5rem 0.0em 1em; text-align: left; }

ul.Loose			{ margin-top: 1.0em; }
	ul.Loose > li	{ margin-top: 0.7em; }

ol.Loose			{ margin-top: 1.0em; }
	ol.Loose > li	{ margin-top: 0.7em; }


ul.WithImage	{ list-style-type: none; margin-left: 3em; }
ul.WithImage li { margin: 0.5em 1.5em 0.0em 0.0em; text-align: left; padding-left: 1.3em; list-style-type: none;
		background-image: url("StyleSections/Bullet.png"); background-repeat: no-repeat;
		background-position: 0.0em 0.25em; background-size: 0.8em 0.8em;
		}

ul.WithSVG	{ list-style-type: none; margin-left: 3em; }
ul.WithSVG li { margin: 0.5em 1.5em 0.0em 0.0em; text-align: left; padding-left: 1.5em; list-style-type: none;
		background-image: url("StyleSections/Bullet.svg"); background-repeat: no-repeat;
		background-position: 0.0em 0.1em; background-size: 1em 1em;
		}


ol.NestedNumbering				{ counter-reset: olnestcount; list-style-type: none; margin-left: 2.5em; }
li > ol.NestedNumbering	{ margin-left: 1.5em; }
ol.NestedNumbering li:before	{ content: counters(olnestcount,".")".  " ; font-size: 1.0em; vertical-align: 0; counter-increment: olnestcount; }


/* for definitions to float right of their term, the dd margin-left must be greater than the dt width,
and the dt and dd margin-top must be equal too. */

dl	{ clear: both; margin: 1.0em 4.0em 1.5em 3.5em; padding: 0em; border: solid 1px transparent; }
dt	{ margin-top: 0.5em; display: block; font-family: DejaVuSansCondensed; color: rgb(37%,0%,69%); }
dd	{ margin-top: 0.2em; display: block; text-align: left; }
dd p	{ margin: 0; padding: 0; }
dd li	{ margin: 0 2em 0 2em; padding: 0; }

dl.Dw6 dt	{ clear: both; width: 6.0em; float: left; }
dl.Dw6 dd	{ margin-left: 7.0em; margin-top: 0.5em; }

dl.Dw8 dt	{ clear: both; width: 8.0em; float: left; }
dl.Dw8 dd	{ margin-left: 9.0em; margin-top: 0.5em; }

dl.Dw10 dt	{ clear: both; width: 10.0em; float: left; }
dl.Dw10 dd	{ margin-left: 11.0em; margin-top: 0.5em; }

dl.Dw12 dt	{ clear: both; width: 12.0em; float: left; }
dl.Dw12 dd	{ margin-left: 13.0em; margin-top: 0.5em; }

dl.Dw6r dt	{ clear: both; width: 6.0em; float: left; text-align: right; }
dl.Dw6r dd	{ margin-left: 7.0em; margin-top: 0.5em; }

dl.Dw8r dt	{ clear: both; width: 8.0em; float: left; text-align: right; }
dl.Dw8r dd	{ margin-left: 9.0em; margin-top: 0.5em; }

dl.Dw10r dt	{ clear: both; width: 10.0em; float: left; text-align: right; }
dl.Dw10r dd	{ margin-left: 11.0em; margin-top: 0.5em; }

dl.Dw12r dt	{ clear: both; width: 12.0em; float: left; text-align: right; }
dl.Dw12r dd	{ margin-left: 13.0em; margin-top: 0.5em; }











/* =================================================================================================== */
@media print {


ul			{ margin: 8mm 0 0 8mm; }
	li > ul	{ margin: 3mm 0 0 8mm; list-style-type: circle; }
	li > ul > li > ul	{ list-style-type: square; }

ol			{ margin: 8mm 0 0 8mm; }
	li > ol	{ margin: 4mm 0 0 8mm; }


li			{ font-family: DejaVuSerif; margin: 1mm 0 0 0; }


ul.Loose			{ margin-top: 8mm; }
	ul.Loose > li	{ margin-top: 2mm; }

ol.Loose			{ margin-top: 8mm; }
	ol.Loose > li	{ margin-top: 2mm; }






}








/*  R U L E R S  A N D   F O O T N O T E S  */
/*
background-color is the colour of the line, height is the thickness of the line,
border specifications apply to a border around the line, one border must be used if it is to print.
*/

hr			{ background-color: rgb(50%,46%,47%); margin-top: 0.2em; margin-bottom: 0.1em; width: 100%; height: 0.1em; border-width: 0; }
body > hr	{ background-color: rgb(50%,46%,47%); margin-top: 2.0em; margin-bottom: 0.1em; width:  30%; height: 0.2em; border-width: 0; } /* end of page */

div.Footnote	{ font-size: 0.8em; }
div.Footnote hr	{ background-color: transparent; margin: 2.0em auto 0.0em 1.875rem; width: 10em; height: 0.1em; border-top: solid 0.1em rgb(50%,46%,47%); }
div.Footnote p	{ margin-left: 1.875rem; font-style: italic; }

/* for debugging */
hr.ThinRedLine	{ background-color: red; margin-top: 0; margin-bottom: 0; width: 100%; height: 1px; border-width: 0; z-index: 10000; }











/* =================================================================================================== */
@media print {

hr			{ background-color: black; margin-top: 0.2em; margin-bottom: 0.1em; width: 100%; height: 0.2mm; border-width: 0; }
body > hr	{ background-color: black; margin-top: 2.0em; margin-bottom: 0.1em; width:  30%; height: 0.2mm; border-width: 0; } /* end of page */

}








/*  A N C H O R S  */

/* the sequence of these specifications MUST be link-visited-hover-active ! */

a:link		{ }
a:visited	{ color: rgb(56%,15%,87%); }
a:hover		{ color: red; }
a:active	{ color: rgb(67%,66%,100%); }


/* let the hand cursor appear over active objects with computed links (i.e. those not in an <a> tag) */
.Clink { cursor: pointer; }


a.OutOfSite::before	{ content: "⬀"; margin-right: 0.2em; font-size: 1.2em; font-weight: bold; color: rgb(52%,12%,0%); text-decoration: none; display: inline-block; }
a.OutOfSite::after	{ content: "⬀"; margin-left:  0.2em; font-size: 1.2em; font-weight: bold; color: rgb(52%,12%,0%); text-decoration: none; display: inline-block; }











/* =================================================================================================== */
@media print {

a:link		{ text-decoration: none; color: black; }
a:visited	{ color: black; }
a:hover		{ color: black; }
a:active	{ color: black; }


}









/*  I M A G E S   D R A W I N G S   A N D   F I G U R E S  */

/* by default images have their native width and height and are centred in the containing element */


img			{ display: block; margin: 1.0em auto 1.0em auto; }
img.Il		{ display: inline; margin: 1.0em auto 1.0em auto; }

svg			{ display: block; margin: 1.0em auto 1.0em auto; }


figure		{ margin: 1.5em auto 1.5em auto; }
figcaption	{ text-align: center; font-style: oblique; font-size: 0.9em; margin: 0.5em auto 0.5em auto; white-space: nowrap; }
figure.Ba	{ padding: 0.0em 1.0em 0.0em 1.0em; border: solid 0.1em rgb(50%,46%,47%); }
figure.Fl	{ margin: 0.5em 1.5rem 1.5em 1.5rem; }
figure.Fr	{ margin: 0.0em 1.5rem 1.5em 1.5rem; }

figcaption .SVG	{ font-size: 0.6em; color: red; margin-left: 1.0em; text-decoration: none; }

video		{ display: block; margin: 1.0em auto 1.0em auto; }








/*  T E X T   S T Y L E S  */

/* semantic and presentation mixed, in alphabetical order: */

.Bold			{ font-weight: bold; }
.Definition		{ font-style: italic; color: rgb(47%,0%,89%); margin-right: 0.2em; }
.Emphasis		{ font-family: DejaVuSerif, serif; font-style: italic; color: rgb(60%,27%,0%); margin-right: 0.08em; }
.Example		{ font-family: DejaVuSansMono, monospace; color: rgb(13%,53%,0%); margin: 0 0.2em 0 0.2em; }
.Formula		{ margin: 0.5em 2.0em 0.5em 2.0em; padding: 0.5em 1.0em 0.5em 1.0em; border: solid 0.1em rgb(67%,67%,67%); }
.Intonate		{ font-style: italic; color: #600; margin-right: 0.1em; }
.Italic			{ font-style: italic; margin-right: 0.2em; }
.Math			{ white-space: pre; font-family: DejaVuSerif, serif; font-style: italic; letter-spacing: 0.1em; color: rgb(0%,0%,88%); margin: 0.0em 0.2em 0.0em 0.2em; }
.MonospacePre	{ white-space: pre; font-family: DejaVuSansMono, monospace; font-size: 0.9em; margin: 0.0em 0.2em 0.0em 0.2em; padding: 0.0em 0.3em 0.0em 0.3em; background-color: rgb(90%,90%,100%); tab-size: 4; }
.Quote			{ font-family: DejaVuSerifCondensed; font-style: italic; color: rgb(20%,20%,50%); margin-left: 0.2em; margin-right: 0.2em; }
	span.Quote:before	{ content: "“"; }
	span.Quote:after	{ content: "”"; }
p.Quote			{ margin-left: 3rem; margin-right: 3rem; }
	p.Quote:before	{ content: "“"; }
	p.Quote:after	{ content: "”"; }
sub				{ font-size: 0.6em; font-style: italic; vertical-align: sub; margin-left: 0.0em; margin-right: 0.1em; letter-spacing: 0.2em; }
sup				{ font-size: 0.6em; vertical-align: super; }
.Smaller		{ font-size: 0.7em; }
.Snbs			{ font-size: 0.5em; } /* small non-breaking space */
.Term			{ color: rgb(37%,0%,69%); }
.TextRed		{ color: red; }
.TextGreen		{ color: green; }
.TextBlue		{ color: blue; }
.Tiny			{ font-size: 0.2em; }











/* =================================================================================================== */
@media print {


.Emphasis		{ font-family: DejaVuSerif; font-style: italic; font-weight: bold; color: black; margin-right: 0.08em; }






}








/*  B L O C K S  */

.Ofa	{ overflow: auto; }
.Ofh	{ overflow: hidden; }

.OverflowableBlockBorder { border: dotted 2px #faa; }

nav div { margin: 0 auto 0 auto; }



/*
The difference between a framed and a non-framed div is in the padding, border and background colour.
Divs normally surround other normal elements.
Exceptions:
	Code blocks do not need paragraphs.
	SVG drawings and tables are inside specific divs.
Everything concerning Code is in the Mathematics and Programming section.
*/

div	{
	display: block; overflow: auto;
	margin: 1em auto 1em auto;
	}

div.Framed	{
	margin: 1.2em 1.5rem 1.0em 1.5rem; padding: 0.5em 0.0em 1.0em 0.0em;
	border: solid 0.1em rgb(0%,0%,0%);
	}

div.Colophon { font-size: 0.8em; margin: 3em 1em 1em 1em; border: solid 1px black; }

div.Example {
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	}

div.ExampleFramed {
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	padding: 0.0em 0.0em 1.0em 0.0em;
	border: solid 0.1em rgb(94%,63%,63%);
	background-color: rgb(100%,94%,94%);
	}
	div.ExampleFramed p { margin: 0.5em 1.5rem 0.0em 1.5rem; }

div.Notion {
	margin: 1.2em 3rem 1.0em 3rem;
	font-style: italic;
	}

div.NotionFramed	{
	margin: 1.2em 3rem 1.0em 3rem; padding: 0.5em 0.0em 1.0em 0.0em;
	font-style: italic;
	border: solid 0.1em rgb(67%,67%,67%);
	background-color: rgb(100%,100%,90%);
	}

div.Quote {
	font-family: DejaVuSerifCondensed; font-style: italic; color: rgb(20%,20%,50%);
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	}
	div.Quote:before	{ content: ""; }
	div.Quote:after		{ content: ""; }

div.QuoteFramed	{
	font-family: DejaVuSerifCondensed; font-style: italic; color: rgb(20%,20%,50%);
	margin: 1.2em 1.5rem 1.0em 1.5rem; padding: 0.5em 0.0em 1.0em 0.0em;
	background-color: rgb(97%,97%,100%);
	border: solid 0.1em rgb(67%,67%,67%);
	}
	div.QuoteFramed p { font-family: DejaVuSerifCondensed, serif; }
	div.QuoteFramed p.Author { font-weight: bold; text-align: right; margin-right: 4.0em; }
	div.QuoteFramed li { font-family: DejaVuSerifCondensed, serif; margin: 0.2em; }

div.Recipe {
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	}

div.RecipeFramed	{
	margin: 1.2em 3rem 1.0em 15rem; padding: 0.1em 0.0em 0.1em 0.0em;
	font-size: 0.5rem;
	background-color: transparent /*rgb(90%,100%,90%)*/;
	border: solid 0.1em rgb(57%,77%,57%);
	}
div.RecipeFramed p { margin: 0.1em 0.1em 0.1em 1.0em; padding: 0; }
div.RecipeFramed p:first-child { margin-left: 0.2em; color: rgb(55%,22%,16%); }


/* div for user dialog */
#Dialog		{ display: none; position: fixed; top: 40vh; left: 16vw; width: 60vw; padding: 3em;
				border-radius: 1.5em; border: solid 0.5em #999; background-color: #fff; }
#Dialog p { text-align: left; }









/*   M A T H E M A T I C S   A N D   P R O G R A M M I N G  */


math					{ font-family: DejaVuSerif; color: rgb(0%,0%,88%); margin-left: 0.2em; margin-right: 0.2em; }
mo						{ margin-left: 0.2em; margin-right: 0.2em; }
msup > mn				{ font-size: 0.8em; }
msubsup > mn			{ font-size: 0.8em; }
msubsup mn:nth-child(3)	{ font-size: 0.6em; }
msubsup mi:nth-child(2)	{ font-size: 0.6em; }
msub mi:nth-child(2)	{ font-size: 0.6em; vertical-align: -0.6em; }
msup mn:nth-child(2)	{ font-size: 0.6em; }
msqrt					{ margin-top: 0.1em; }

p.Math		{ white-space: pre; font-family: DejaVuSerif, serif; font-style: italic; letter-spacing: 0.1rem; color: rgb(0%,0%,88%);
				margin: 0.5rem 1.5rem 0.0rem 1.5rem; }

div.Math {
	display: block; overflow: auto;
	font-family: DejaVuSerif, serif;
	margin: 1.5em 1.5rem 2.0em 1.5rem;
	}

	div.Math > p {
		font-style: italic; color: rgb(0%,0%,88%);
		margin: 0.2em 1.5rem 0.0em 0.1em; padding: 0;
		}
	
div.MathFramed {
	display: block; overflow: auto;
	font-family: DejaVuSerif, serif;
	margin: 1.5em 1.5rem 1.0em 1.5rem; padding: 0.8em 1.5rem 1.0em 1.2rem;
	border: solid 0.1em rgb(63%,63%,80%);
	background-color: rgb(100%,100%,100%);
	}

	div.MathFramed > p {
		font-style: italic; color: rgb(0%,0%,88%);
		margin: 0.2em 0.1em 0.0em 0.1em; padding: 0;
		}
		
		
/*
syntax highlighting (colouring) for examples of code is done independent of the
language, by providing only a choice of colours and text styles, all of whose names
begin with S (for "syntax"), followed by a single letter:

Su	light blue
SU	dark blue
Sg	light green
SG	dark green
SY	dark yellow
Sp	pink
Sb	bold
Si	italic

*/

span.Su { color: rgb(  0% ,62%, 75%); }
span.SU { color: rgb(  0%,  0%, 62%); }
span.Sg { color: rgb( 40%,100%, 40%); }
span.SG { color: rgb(  0%, 62%,  0%); }
span.SY { color: rgb( 62%, 56%,  0%); }
span.Sp { color: rgb( 62%,  0%, 62%); }
span.Sb { font-weight: bold; }
span.Si { font-style: italic; }


/* ============================================================ */

.Code	{
	margin: 0.0em 0.2em 0.0em 0.2em; padding: 0.0em 0.3em 0.0em 0.3em;
	font-family: BodyCodeFont, monospace; color: rgb(0%,47%,0%); white-space: pre; tab-size: 4;
	border: dotted 1px rgb(60%,84%,60%);
	background-color: rgb(90%,100%,90%);
	}

p.Code	{ margin: 0.5rem 1.5rem 0.0rem 1.5rem; }

div.Code {
	margin: 2.0em 1.5rem 3.0em 1.5rem; padding: 0.5em;
	}
	div.Code::first-line { line-height: 0px; } /* hides the first line break */
	
div.CodeFramed {
	margin: 1.5em 1.5rem 1.0em 3rem; padding: 0.5em 1.5em 1.0em 1.2em;
	font-family: BodyCodeFont, monospace; font-size: 0.8em; color: rgb(0%,47%,0%); white-space: pre; tab-size: 4;
	line-height: 1.5em;
	border: solid 0.1em rgb(60%,60%,60%);
	background-color: rgb(95%,95%,95%);
	}
	div.CodeFramed::first-line { line-height: 0px; } /* hides the first line break */

	div.CodeFramed > p {
		margin: 0.1em 0.1em 0.0em 0.1em; padding: 0;
		}
	div.CodeFramed > p.CodeComment {
		font-style: italic; white-space: normal;
		margin: 0.5em 0.1em 0.5em 2.1em; padding: 0;
		}
	div.CodeFramed > p.CodeAssertion {
		font-style: italic; white-space: normal; color: rgb(30%,20%,0%);
		margin: 0.5em 0.1em 0.5em 2.1em; padding: 0;
		}







/* LiveCode code  --  as generated by the Livecode-to-HTML stack.*/

div.LCCodeBox {
	margin: 1.5em 1.5rem 1.0em 3rem;
	padding: 0.5em 0 0.8em 0.5em;
	font-family: BodyCodeFont, monospace; font-size: 0.8em; color: rgb(0%,47%,0%); white-space: pre; tab-size: 4;
	border: solid 0.1em rgb(60%,60%,40%);
	background-color: rgb(100%,100%,94%);
	}

	div.LCCodeBox p {
		font-family: BodyCodeFont, monospace; color: rgb(0%,0%,0%); white-space: pre;
		margin: 0.2em 0.1em 0.0em 0.5em; padding: 0;
		}

.LCCode				{ color: rgb(0%,0%,0%); white-space: pre; }
.LCFunction			{ color: rgb(56%,13%,56%); }
.LCKeyword			{ font-weight: bold; font-size: 0.92em; }
.LCBlockComment		{ color: rgb(0%,56%,0%); white-space: pre; font-style: italic; }
.LCLineComment		{ color: rgb(0%,56%,0%); white-space: pre; font-weight: bold; font-size: 0.92em; }
.LCComment			{ color: rgb(0%,56%,0%); white-space: pre; font-weight: bold; }
.LCCommentLine		{ color: rgb(0%,56%,0%); white-space: pre; font-weight: bold; }
.LCCommand			{ color: rgb(56%,56%,0%); }
.LCProperty			{ color: rgb(27%,65%,67%); }
.LCLiteral			{ color: rgb(0%,0%,56%); }
.LCControlStructure	{ color: rgb(60%,2%,9%); }
.LCBold				{ font-weight: bold; }
.LCItalic			{ font-style: oblique; padding-right: 0.2em; }
.LCLineNumber		{ margin-right: 1em;}








/*  B O D Y  */

body	{
	font-family: DejaVuSansCondensed; font-variant-ligatures: no-common-ligatures;
	margin: 0; padding: 8.0rem 0 100vmax 0;
	background-color: rgb(94%,90%,90%);
	counter-reset: h1count;
	visibility: hidden;
	}







/*  P A G E   H E A D E R  */

body > header						{ position: fixed; left:   0.0rem; top: 0.0rem; width:    100%;                 margin: 0.0rem; padding: 0.0rem; background-color: rgb(84%,77%,77%); }

/*logo*/
#Banner-SiteLogo					{ position: fixed; left:   0.0rem; top: 0.0rem; width:  2.2rem; height: 2.2rem; margin: 0.0rem; padding: 0.2rem; cursor: pointer; }

/*chapters*/
#Banner-FoldingUnfold				{ position: fixed; left:   2.7rem; top: 0.3rem; width:  2.5rem; height: 2.5rem; margin: 0.0rem; padding: 0.0rem; cursor: pointer; }
#Banner-FoldingFold					{ position: fixed; left:   2.7rem; top: 0.3rem; width:  2.5rem; height: 2.5rem; margin: 0.0rem; padding: 0.0rem; cursor: pointer; }

/*language*/
#Banner-LanguageMenu				{ position: fixed; right:  3.6rem; top: 0.2rem;                                 margin: 0.0rem;                  cursor: pointer; overflow: visible; }
#Banner-LanguageMenu:hover			{ position: fixed; right:  3.6rem; top: 0.2rem;                                                 padding: 0 0.3rem 0 0.3rem;                  border: solid 1px #888; background-color: white; }
#Banner-LanguageMenu p				{ font-size: 0.6rem; margin: 0.0rem; padding: 0.0rem; text-align: center; }
#Banner-LanguageMenu:hover p		{ font-size: 1.2rem; margin: 0.0rem; padding: 0.0rem; text-align: center; }

/*search*/
#Banner-SearchButton				{ position: fixed; right:  1.7rem; top: 0.2rem; width:  1.4rem; height: 1.4rem; margin: 0.0rem; padding: 0.2rem; cursor: pointer; }
#Banner-SearchForm					{ position: fixed; right:  0.0rem; top: 0.0rem; width: 50.0vw;  height: 3.3rem; margin: 0.0rem; padding: 0.0rem; text-align: center; border: solid 1px #888; background-color: white; visibility: hidden;}
#Banner-SearchForm-Hide				{ position: fixed; right: 46.0vw;  top: 1.0rem; width:  1.2rem; height: 1.2rem; margin: 0.0rem; padding: 0.0rem; }
#Banner-SearchForm-Terms			{ position: fixed; right:  8.0vw;  top: 1.5rem; width: 35.0vw;  height: 1.5rem; margin: 0.0rem; padding: 0.0rem; }
#Banner-SearchForm-Submit			{ position: fixed; right:  0.6rem; top: 0.9rem; width:  2.2rem; height: 2.2rem; margin: 0.0rem; padding: 0.0rem; }

/*preferences*/
#Banner-PreferencesButton			{ position: fixed; right:  0.2rem; top: 0.4rem; width:  1.5rem; height: 1.5rem; margin: 0.0rem; padding: 0.0rem; cursor: pointer; }

/*logged-in user (if any)*/
#Banner-LoggedInUser { display: none;
	position: fixed; right:  0.2rem; top: 2.5rem; overflow: hidden; width: 10.0rem; height: 0.8rem;
	margin: 0.0rem; padding: 0.0rem; font-size: 0.6rem; cursor: pointer; }
#Banner-LoggedInUser p { margin: 0 0 0.5rem 0; text-align: right; }
#Banner-LoggedInUser:hover {
	position: fixed; right:  0.2rem; top: 2.0rem; overflow: hidden; width: 15.0rem; height: 4.2rem;
	margin: 0.0rem; padding: 0.5rem; font-size: 1.0rem; border-radius: 0.8em; border: solid 0.2em #999; background-color: white; cursor: pointer; }
#Banner-LoggedInUser:hover p		{ margin: 0.5em; text-align: left; }
#Banner-LoggedInUser:hover p:nth-child(2):hover	{ color: red; }



#Banner-NavigationByDirectories		{
	position: fixed; left: 0; top: 3.4rem;
	width: 100%; margin: 0.0rem; padding: 0.1rem 0 0.1rem 0.6rem;
	border-top: solid 0.1rem rgb(50%,46%,47%); border-bottom: solid 0.1rem rgb(50%,46%,47%); background-color: rgb(91%,85%,85%);
	}
#Banner-NavigationByDirectories p	{ font-size: 0.6rem; margin: 0.0rem; padding: 0.0rem; white-space: nowrap; }


#Banner-SiteLogo-Flasher					{ fill: rgb(53%,53%,53%); }
#Banner-FoldingUnfold-Flasher				{ fill: #aaa; stroke: #000; stroke-width: 1.5px; }
#Banner-FoldingFold-Flasher					{ fill: #aaa; stroke: #000; stroke-width: 1.5px; }
#Banner-SearchButton-Flasher				{ fill: #fff; stroke: #000; stroke-width:   3px; }
#Banner-SearchForm-Hide-Flasher				{ fill: #aaa; stroke: #000; stroke-width:   3px; }
#Banner-SearchForm-Submit-Flasher			{ fill: #fff; stroke: #000; stroke-width:   3px; }
#Banner-PreferencesButton-Flasher			{ fill: #aaa; stroke: #000; stroke-width: 5.7px; }

#Banner-SiteLogo-Flasher.FlasherOn			{ fill: rgb(0%,100%,0%); }
#Banner-FoldingUnfold-Flasher.FlasherOn		{ fill: rgb(0%,100%,0%); }
#Banner-FoldingFold-Flasher.FlasherOn		{ fill: rgb(0%,100%,0%); }
#Banner-SearchButton-Flasher.FlasherOn		{ fill: rgb(0%,100%,0%); }
#Banner-SearchForm-Hide-Flasher.FlasherOn	{ fill: rgb(0%,100%,0%); }
#Banner-SearchForm-Submit-Flasher.FlasherOn	{ fill: rgb(0%,100%,0%); }
#Banner-PreferencesButton-Flasher.FlasherOn	{ fill: rgb(0%,100%,0%); }

#Banner-Message			{ position: fixed; left:   1.0rem; top: 1.0rem; padding: 1.0rem; display: none; background-color: white; border: solid 1px black; }
#Banner-Message-Text	{ border: none; font-size: 1rem; }


#PrintTitle	{ display: none; }


/* The page titles div:  this is always present and has exactly two h1 elements.
If and only if the second one (subtitle) is empty then the sizes, margin and padding
are changed by the JavaScript after the content is loaded.
*/
#Titles	{ top: 0.0rem; min-height: 3.0rem; margin: 0.0rem; padding: 0.0rem 5.0rem 0.3rem 5.0rem; white-space: normal; }
/* #Titles > h1::before { content: ""; counter-increment: h1count -1; } 

h1	{
	}

*/

/*  Both Titles */
#Titles > p { clear: both;
	font-family: DejaVuSans; font-size: 2.0rem; font-weight: bold; text-align: center; color: rgb(29%,23%,24%);
	margin: 0; padding: 0.2rem 0.0rem 0.25rem 1.5rem;
	}

/*  Main Title */
#Titles > p:nth-of-type(1) {
	font-size: 1.4rem;
	padding: 0.2rem 0.0rem 0.0rem 0.0rem;
	}

/*  Subtitle */
#Titles > p:nth-of-type(2) {
	font-size: 1.1rem; font-weight: normal; text-align: center;
	padding: 0;
	}





/*  P A G E   F O O T E R  */

body > footer {
	position: fixed; bottom: 0; width: 100%;
	border-top: solid 0.1rem rgb(50%,46%,47%);
	background-color: rgb(84%,77%,77%);
	}

body > footer p {
	font-size: 0.6rem; font-style: italic; text-align: right; color: black;
	margin: 0 0.5rem 0 0;
	padding: 0.1rem 0 0.1rem 0;
	}
	
#StatisticsTiming		{ position: fixed; bottom: 0.1rem; left: 0.5rem; padding: 0; margin: 0; font-size: 0.6rem; color: rgb(50%,50%,50%) }
#StatisticsTiming > p	{ padding: 0; margin: 0; }





/*  P R E F E R E N C E S   P A G E  */

/* These are only used on the top Welcome and the Preferences pages */
#Preferences								{ width: 96vw; font-size: 2.8vmin; letter-spacing: normal; margin-top: 1rem; }
#Preferences td								{ padding: 0.0rem 0.5rem 0.0rem 0.5rem; vertical-align: middle; }
#Preferences > tbody > tr > td:first-child	{ padding: 0.4em 0.0rem 0.8rem 0.5rem; width: 5%; text-align: right; vertical-align: top; }
#Preferences > tbody > tr > td:nth-child(2)	{ padding: 0.2rem 0.8rem 0.4rem 0.4rem; text-align: right; white-space: nowrap; width: 10%; }
#Preferences table							{ width: 10%; margin: 0 auto 0 0; }
#Preferences table td						{ padding: 0.2rem 0.4rem 0.2rem 0.4rem; }
#Preferences tr.Bt							{ border-width: 4px; border-color: rgb(67%,67%,67%); }

#Preferences div.PreferenceTextExample {
	width: 97%;
	border: solid 1px black;
	margin: 0.2rem 0 0 0;
	padding: 0 0 0.5rem 0;
	font-size: 1rem;
	text-align: left;
	white-space: normal;
	background-color: rgb(100%,100%,80%);
	}

.PrefButton	{ padding: 0.1em 0.5em 0.1em 0.5em; margin: 0; border: solid 2px rgb(67%,67%,67%); border-radius: 0.5em; cursor: pointer; background-color: rgb(90%,90%,92%); }
.CircledNumber { border: solid 1px black; padding: 0.1em 0.4em 0.1em 0.4em; border-radius: 1em; background-color: rgb(91%,85%,85%) }











/* =================================================================================================== */
@media print {

body	{
	font-family: DejaVuSerif; font-size: 3.5mm;
	margin: 2cm 1.5cm 2cm 2.5cm; padding: 0;
	background-color: transparent;
	}

body > footer {
	display: none;
	}




}



/* ========================================================================================================= */
/* ===                           Styles particular to the V&F  database pages                             == */
/* ========================================================================================================= */
/*

There are only two pages needing more than the styles shared by all sites:  the list and the record.
The DBList page has one scrolling table that needs its own styles, the DBRecord page has many elements
needing their own styles.

*/






/* ==================================================   E V E R Y W H E R E  ======================================= */

body.DB	{ visibility: hidden; } /* show database pages only after access check or reload */

button	{
	padding: 0.05em 1.0em 0.1em 1.0em;
	font-size: 1.0em; white-space: normal;
	border-radius: 0.5em; border: 1px solid rgb(40%,40%,40%); background-color: #dff; cursor: pointer;
	}
button:hover	{ background-color: #acc; }
button:active	{ background-color: #99f; }


/* div for user dialog */
#Dialog		{ display: none; position: fixed; top: 40vh; left: 16vw; width: 60vw; padding: 3em;
				border-radius: 1.5em; border: solid 0.5em #999; background-color: #fff; }
#Dialog p { text-align: left; }





/* ======================================================   D B L I S T  =========================================== */

#NewButton	{ display: none; margin-top: 0em; }	/* it only appears if user has rights */
 
#MachinesList { margin: 2em 2vw 2em 1vw; }
/*
BH is body height, CW is column width, TW is total width  [ 6+30+25+10+25 = 96 ]
									#		 name		 visual		  date		location	*/
#MachinesList { --BH: 70vh; --CW1: 6vw; --CW2: 30vw; --CW3: 25vw; --CW4: 10vw; --CW5: 25vw; }
#MachinesList { --TW: calc(var(--CW1) + var(--CW2) + var(--CW3) + var(--CW4) + var(--CW5)); width: var(--TW); }
#MachinesList caption { width: var(--TW); background-color: #bef; padding: 0.5em 0 0.5em 0; }
#MachinesList thead { width: var(--TW); }
#MachinesList tbody { width: var(--TW); height: var(--BH); border-bottom: solid 1px #000; }
#MachinesList thead tr th:nth-child(1), #MachinesList tbody tr td:nth-child(1) { width:  var(--CW1); }
#MachinesList thead tr th:nth-child(2), #MachinesList tbody tr td:nth-child(2) { width:  var(--CW2); }
#MachinesList thead tr th:nth-child(3), #MachinesList tbody tr td:nth-child(3) { width:  var(--CW3); }
#MachinesList thead tr th:nth-child(4), #MachinesList tbody tr td:nth-child(4) { width:  var(--CW4); }
#MachinesList thead tr th:nth-child(5), #MachinesList tbody tr td:nth-child(5) { width:  var(--CW5); }

#MachinesList tbody tr td				{ border-left: solid 1px #ccc; border-right: solid 1px #ccc; background-color: white; }
#MachinesList tbody tr td:nth-child(1)	{ font-size: 0.8em; color: #888; }
#MachinesList tbody tr td:nth-child(3) img { width: 95%; margin: 0.2em auto 0.2em auto; padding: 0; }
#MachinesList tbody tr td:last-child	{ border-right: solid 1px #000; }
#MachinesList tbody tr:last-child		{ border-bottom: solid 1px black; }







/* ======================================================   D B R E C O R D  =========================================== */
/*

Consists of a banner below the normal page banner, where the "Back to List", machine name and "Save" buttons are located,
followed by a series of parts, each of which has sections (foldable articles) for the machine characteristics.

There are four parts: Identification, Description, Documents and Statistics.
The more interesting sections are in the Description part.

The elements of a section are wrapped in an article.
An article normally has three divs:
	a table with elements that are inputs or displays, may contain nested tables,
	a file upload area,
	an associated file thumbnails area.

To comply with the general table handling, each table is wrapped in a div element.
The elements table can have one or two columns.

	if two columns: in div of class DoubleColumn, table having one row with two cells:
		one cell for a nested inputs table
		one cell for more inputs, most often the notes text area because that must span the inputs but can also hold a choices area

	if one column:  in div of class SingleColumn, table having one row with one cell.
	

The file upload area has a drop area and a file select area

The thumbnail area shows a table of thumbnails for each file associated with the section.

*/


/* ------------------------------------------   G E N E R A L  ----------------------------------*/

input		{ padding: 0.0em 0.0em 0.15em 0.2em; margin: 0.0em 0.0em 0.0em 0.0em; font-size: 1.0em; border: solid 1px rgb(40%,40%,40%) }
select		{ padding: 0.0em 0.0em 0.00em 0.0em; margin: 0.0em 0.0em 0.0em 0.0em; font-size: 1.0em; border: solid 1px rgb(40%,40%,40%) }
textarea	{ padding: 0.0em 0.0em 0.00em 0.2em; margin: 0.0em 0.0em 0.0em 0.0em; font-size: 1.0em; border: solid 1px rgb(40%,40%,40%) }

.DBLocked { background-color: transparent; border: solid 1px rgb(70%,70%,70%); }





/* -------------------------  N O R M A L L Y   H I D D E N   I N T E R A C T I O N   D I V S  -------------------------------*/

/* upload progress */
#UploadProgress			{ display: none; position: fixed; top: 45vh; left:5vw; width: 85vw; height: 2em; padding: 0.1em;
							background-color: white; overflow: hidden; }
#UploadProgressFrame	{ border: solid 1px blue; margin: 0.5em 0 0 2%; width:96%; height: 1em; padding: 0; overflow: hidden; }
#UploadProgressBar		{ margin: 0; padding: 0; width: 0%; background-color: blue; border: none; overflow: hidden; }




/* large view visual */
#LargeView				{ display: none; position: fixed; z-index: 100; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh;
							background-color: black; }
#LargeView img			{ padding: 0; margin: 0; } /*the buttons*/

#LargeViewCloseL		{ position: fixed; left:	0.5em;		top:	2.5em;	width:	1.5em; cursor: pointer; }
#LargeViewCloseR		{ position: fixed; right:	0.5em;		top:	2.5em;	width:	1.5em; cursor: pointer; }

#LargeViewPreviousArrow	{ position: fixed; left:	0.5em;		top:	40vh;	width:	1.5em; cursor: pointer; }
#LargeViewImage			{ position: fixed; }
#LargeViewVideo			{ position: fixed; display: none; }
#LargeViewNextArrow		{ position: fixed; right:	0.5em;		top:	40vh;	width:	1.5em; cursor: pointer; }

#LargeViewCaption		{ position: fixed; padding: 0; margin: 0;
							text-align: center; font-size: 2em; color: white; background-color: #222; border: solid 1px #666; }



/* for making a video thumbnail */
#VideoThumbnail-Creation	{ display: block; position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: white; }
#VideoThumbnail-Creation	table { margin: 10vh 2em 0 0; }
#VideoThumbnail-Creation	table tbody tr td { border: solid 1px red; }
#VideoThumbnail-Creation	td p { margin: 0.5em 3em 1em 3em; text-align: center; clear: both; }
#VideoThumbnail-Creation	table tbody tr td video { margin: 0 auto 0 auto; width: 80%; border: solid 1px black; }
#VideoThumbnail-Canvas { border: solid 1px black; width: 30vw; }
#VideoThumbnail-Confirm { margin: 1em auto 0 auto; }






/* -----------------------------  B A N N E R   -   P A R T S   -   S E C T I O N S  ----------------------------------*/

/* The machine banner, three divs for the 'Back to the List' button, the machine name and the 'Save' button. */
#RecordBannerName		{ position: fixed; top: 4.5em; width: 100vw; margin: 0; padding: 0em; color: rgb(29%,23%,24%);
							background-color: rgb(84%,77%,77%); border-bottom: solid 1px rgb(50%,46%,47%); }
#RecordBannerName p		{ text-align: center; font-size: 1.6em; font-weight: bold; }
#RecordBannerBackToList	{ position: fixed; top: 4.5em; left: 0; margin: 0; padding: 0.5em; }
#RecordBannerSave		{ position: fixed; top: 4.5em; right:0; margin: 0; padding: 0.5em; }

h1.PartTitle {
	margin: 2.5em 00 0.2em 00; padding: 0.3em 0 0.3em 2.0em;
	text-align: left; color: rgb(39%,23%,24%); font-weight: bold; font-size: 1.6em; letter-spacing: 0.1em;
	}
h1.PartTitle:first-of-type { margin-top: 2.5em; }

/* Special element */
#MachineImage { border: solid 1px black; }

/* Double column part ------------------------------------------------------------------------------------------------------------------*/
article.Part div.DoubleColumn table	{ width: 98vw; margin: 0 auto 0 0; padding: 0; }

	/*inputcell*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(1)	{ width: 50%; padding: 0; }
	/*notescell*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(2)	{ width: 50%; padding: 0 0 0 0.5em; text-align: left; vertical-align: top; }

		/*inputs*/		article.Part div.DoubleColumn table tbody tr td div 	{ margin: 0; padding: 0; }
						article.Part div.DoubleColumn table tbody tr td:nth-of-type(1) div table	{ margin: 0 auto 0 0; }
			/*labels*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(1) div table tbody tr td:nth-of-type(1)	{ width: 10em; padding: 0.2em 0.3em 0 0; text-align: right; vertical-align: top;}
			/*fields*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(1) div table tbody tr td:nth-of-type(2)	{ width: 10em; padding: 1px; text-align: left; }
			/*button*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(1) div table tbody tr td p { margin: 0.2em; }
			/*table*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(1) div table { margin: 0; padding: 0; width: 100%; }

	
		/*notes*/		article.Part div.DoubleColumn table tbody tr td:nth-of-type(2) div table tbody tr td p			{ text-align: left; }
			/*text*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(2) div table tbody tr td textarea	{ text-align: left; }
			/*img*/		article.Part div.DoubleColumn table tbody tr td:nth-of-type(2) div table tbody tr td img		{ border: solid 1px black; margin: 0; }
			/*button*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(2) div table tbody tr td p 			{ margin: 0.2em; }
			/*table*/	article.Part div.DoubleColumn table tbody tr td:nth-of-type(2) div table { margin: 0; padding: 0; width: 100%; }


/* Single column part ------------------------------------------------------------------------------------------------------------------*/
article.Part div.SingleColumn table	{ width: 96%; margin: 0 auto 0 auto; }

			/*labels*/	article.Part div.SingleColumn table tbody tr td				{ width: 10em; padding-right: 0.3em; text-align: right; vertical-align: top;}
			/*fields*/	article.Part div.SingleColumn table tbody tr td				{ width: auto; padding: 1px; text-align: left; }
			/*text*/	article.Part div.SingleColumn table tbody tr td textarea	{ text-align: left; }




/* File Upload Area ------------------------------------------------------------------------------------------------------------------*/
article.Part div.UploadArea table	{ width: auto; margin: 1em auto 1em auto; padding: 0.5em; border: solid 1px #999; font-size: 0.8em; background-color: #edd; }
	article.Part div.UploadArea table tbody tr td				{ vertical-align: middle; }
	article.Part div.UploadArea table tbody tr td p				{ text-align: center; margin: 0; padding: 0.5em 1.0em 0.5em 1.0em; background-color: #ffa; border: 1px dashed #77f; border-radius: 0.5em; }
	article.Part div.UploadArea table tbody tr td p.highlight	{ border-color: red; background-color: #afa; }
	article.Part div.UploadArea table tbody tr td:nth-child(2)	{ font-style: italic; padding: 0 2em 0 2em; }
	article.Part div.UploadArea table tbody tr td input			{ font-size: 1.0em; border: none; }


/* Associated File Thumbnails Area ------------------------------------------------------------------------------------------------------------------*/
article.Part > div.Thumbnails > table	{ width: 6%; margin: 0 auto 0 auto; }

div.Thumbnails table tbody tr td:nth-of-type(odd)	{ padding: 0.5em; }
div.Thumbnails table tbody tr td:nth-of-type(even)	{ padding: 0.8em 0 0 0; }
div.Thumbnails table tbody tr td img:nth-of-type(1)	{ margin: 0 auto 0 auto; border: solid 1px black; cursor: pointer; }
div.Thumbnails table tbody tr td img:nth-of-type(2)	{ margin: 0.2em auto 0 auto; padding: 0; width: 1em; border: none; cursor: pointer; }

#ShowVisualTitle { display: none; position: fixed; width: 120px;
			padding: 0.5em; font-size: 0.7em; text-align: center; background-color: white; border: solid 1px #555; }




/* the special table for the going train gears */
table.DriveArbours { border: solid 1px #666; margin-left: 4.5rem; }
table.DriveArbours td { text-align: center; }
table.DriveArbours tr td:nth-child(3) { border-right: solid 1px rgb(40%,40%,40%); }
table.DriveArbours tr td:nth-child(1) { border-right: solid 1px rgb(40%,40%,40%); }
table.DriveArbours tr:nth-child(1) { border-bottom: solid 1px rgb(40%,40%,40%); }
table.DriveArbours tr:nth-child(1) td:nth-child(2) { border-right: solid 1px rgb(40%,40%,40%); }




/* Summary tables for makers, locations, machinedocuments and all documents. */
/* Note: the cells take the colour and text-alignment but not padding, margin and border!
But why?  Therefore those are set for each table individually. */
.SummaryList { font-size: 0.9em; }
.SummaryList thead tr th { background-color: rgb(84%,77%,77%); }
.SummaryList tbody tr { font-family: DejaVuSansMono; background-color: white; }
.SummaryList tbody tr td { cursor: pointer; }
.SummaryList tbody tr td:nth-child(1) { color: #999; text-align: right; }
 
#MakersSummaryList				tbody tr td,
#LocationsSummaryList			tbody tr td,
#MachineDocumentsSummaryList	tbody tr td,
#DocumentsSummaryList			tbody tr td
		{ padding: 0 0.2em 0 0.2em; border: solid 1px #aaa; }

 
#MakersSummaryList {	/* id       firstname    lastname       life */
		--BH: 10em; --CW1: 5vw; --CW2: 15vw; --CW3: 15vw; --CW4: 10vw;
		--TW: calc(var(--CW1) + var(--CW2) + var(--CW3) + var(--CW4)); width: var(--TW);
		margin-top: 0; }
#MakersSummaryList thead { width: var(--TW); }
#MakersSummaryList tbody { width: var(--TW); height: var(--BH); border-bottom: solid 1px #000; }
#MakersSummaryList thead tr th:nth-child(1), #MakersSummaryList tbody tr td:nth-child(1) { width:  var(--CW1); color: #999; }
#MakersSummaryList thead tr th:nth-child(2), #MakersSummaryList tbody tr td:nth-child(2) { width:  var(--CW2); }
#MakersSummaryList thead tr th:nth-child(3), #MakersSummaryList tbody tr td:nth-child(3) { width:  var(--CW3); }
#MakersSummaryList thead tr th:nth-child(4), #MakersSummaryList tbody tr td:nth-child(4) { width:  var(--CW4); }




#LocationsSummaryList {	/* id       location      country     address */
		--BH: 10em; --CW1: 5vw; --CW2: 20vw; --CW3: 5vw; --CW4: 15vw;
		--TW: calc(var(--CW1) + var(--CW2) + var(--CW3) + var(--CW4)); width: var(--TW);
		margin-top: 0; }
#LocationsSummaryList thead { width: var(--TW); }
#LocationsSummaryList tbody { width: var(--TW); height: var(--BH); border-bottom: solid 1px #000; }
#LocationsSummaryList thead tr th:nth-child(1), #LocationsSummaryList tbody tr td:nth-child(1) { width:  var(--CW1); color: #999; }
#LocationsSummaryList thead tr th:nth-child(2), #LocationsSummaryList tbody tr td:nth-child(2) { width:  var(--CW2); }
#LocationsSummaryList thead tr th:nth-child(3), #LocationsSummaryList tbody tr td:nth-child(3) { width:  var(--CW3); }
#LocationsSummaryList thead tr th:nth-child(4), #LocationsSummaryList tbody tr td:nth-child(4) { width:  var(--CW4); }




#MachineDocuments { width: 95vw; }
#MachineDocuments td { padding: 0; }
#MachineDocuments td div td { padding: 0.1em; }
#MachineDocuments td:nth-of-type(1) div table { margin: 0 auto 0 0; }
#MachineDocuments td:nth-of-type(2) div table { margin: 0 0 0 auto; }
#MachineDocuments div { margin: 0 auto 0 0; padding: 0; }
#MachineDocuments tbody tr td div table tbody tr div { padding: 0 0.2em 0 0.2em; }




#MachineDocumentsSummaryList {	/* id         title        type */
		--BH: 10em; --CW1: 5vw; --CW2: 35vw; --CW3: 6vw;
		--TW: calc(var(--CW1) + var(--CW2) + var(--CW3)); width: var(--TW);
		margin-top: 0; }
#MachineDocumentsSummaryList thead { width: var(--TW); }
#MachineDocumentsSummaryList tbody { width: var(--TW); height: var(--BH); border-bottom: solid 1px #000; }
#MachineDocumentsSummaryList thead tr th:nth-child(1), #MachineDocumentsSummaryList tbody tr td:nth-child(1) { width:  var(--CW1); color: #999; }
#MachineDocumentsSummaryList thead tr th:nth-child(2), #MachineDocumentsSummaryList tbody tr td:nth-child(2) { width:  var(--CW2); }
#MachineDocumentsSummaryList thead tr th:nth-child(3), #MachineDocumentsSummaryList tbody tr td:nth-child(3) { width:  var(--CW3); }




#DocumentsSummaryList {			/* id         title        type */
		--BH: 10em; --CW1: 5vw; --CW2: 35vw; --CW3: 6vw;
		--TW: calc(var(--CW1) + var(--CW2) + var(--CW3)); width: var(--TW);
		margin-top: 0; }
#DocumentsSummaryList thead { width: var(--TW); }
#DocumentsSummaryList tbody { width: var(--TW); height: var(--BH); border-bottom: solid 1px #000; }
#DocumentsSummaryList thead tr th:nth-child(1), #DocumentsSummaryList tbody tr td:nth-child(1) { width:  var(--CW1); color: #999; }
#DocumentsSummaryList thead tr th:nth-child(2), #DocumentsSummaryList tbody tr td:nth-child(2) { width:  var(--CW2); }
#DocumentsSummaryList thead tr th:nth-child(3), #DocumentsSummaryList tbody tr td:nth-child(3) { width:  var(--CW3); }




#a-RecordStatistics	div table { margin-left: 0; }
#a-RecordStatistics	div table tbody tr td:nth-child(1) { text-align: right; padding-right: 1em; font-size: 0.8em; }
#MachineChangeLog			{ font-family: DejaVuSansMono, monospace; font-size: 0.7em; }
#MachineDataAuthorName		{ font-family: DejaVuSansMono, monospace; font-size: 0.7em; }
#MachineDataAuthorContact	{ font-family: DejaVuSansMono, monospace; font-size: 0.7em; }

	



/* =========================================================================================== */
@media print {
.DontPrint { display: none; }
	}


/*  A D D E D    R U L E S  */

/* These must be able to work when they are the last in the list.
Example values are given here in commented form.

The trick to let in-page anchors scroll to the top but just below the page head:
.InPage { padding-top: 10rem; margin-top: -10rem; }
( the amount depends on the actual height of the banners )

*/


/* END OF STYLE SHEET */