@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(94%,90%,90%);
	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.Code		{ white-space: pre; font-family: DejaVuSansMono, monospace; font-size: 0.9rem;
				margin: 0.5rem 1.5rem 0.0rem 1.5rem; color: rgb(0%,47%,0%);
				border: dotted 1px rgb(60%,84%,60%); background-color: rgb(90%,100%,90%); }
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; }




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

article { page-break-before: always; }

	}












/*  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, tables must be wrapped in a div element. */


table	{
	clear: both;
	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.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.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.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.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.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 }








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








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









/*  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; color: #b80; text-decoration: none; }
a.OutOfSite::after	{ content: "⬀"; margin-left:  0.2em; color: #b80; text-decoration: none; }










/*  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; }
.Code			{ white-space: pre; font-family: DejaVuSansMono, monospace; font-size: 0.9em; color: rgb(0%,47%,0%); margin: 0.0em 0.2em 0.0em 0.2em; padding: 0.0em 0.3em 0.0em 0.3em; border: dotted 1px rgb(60%,84%,60%); background-color: rgb(90%,100%,90%); }
.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; 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; color: rgb(0%,0%,0%); margin: 0.0em 0.2em 0.0em 0.2em; }
.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: "”"; }
sub				{ font-size: 0.8em; 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; }








/*  B L O C K S  */

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

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

.OverflowableBlockBorder { border: double 0.8vmin #faa; }

nav div { margin: 0 auto 0 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.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.Notion {
	margin: 1.2em 1.5rem 1.0em 1.5rem; font-style: italic;
	}

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


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.Example {
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	}

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



div.Slogan {
	margin: 1.2em 1.5rem 1.0em 1.5rem;
	}
	div.Slogan p { font-family: DejaVuSans; font-size: 1.5em; text-align: center; }

div.SloganFramed	{
	margin: 1.2em 1.5rem 1.0em 1.5rem; padding: 0.0em 0.0em 1.0em 0.0em;
	background-color: rgb(100%,90%,90%);
	border: solid 1.0em rgb(100%,63%,63%);
	}
	div.SloganFramed p { font-family: DejaVuSans; font-size: 1.5em; text-align: center; color: rgb(70%,0%,0%)}








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

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


div.Code {
	display: block; overflow: auto;
	font-family: DejaVuSansMono, monospace; color: rgb(0%,47%,0%); white-space: pre;
	margin: 2.0em 1.5rem 3.0em 1.5rem;
	}
	
div.CodeFramed {
	display: block; overflow: auto; tab-size: 4;
	font-family: DejaVuSansMono, monospace;
	margin: 1.5em 1.5rem 1.0em 1.5rem; padding: 0.5em 1.5em 1.0em 1.5em;
	background-color: rgb(100%,94%,94%);
	border: solid 0.1em rgb(60%,33%,33%);
	}

	div.CodeFramed > p {
		font-family: DejaVuSansMono, monospace; font-size: 0.8em; color: rgb(0%,47%,0%); white-space: pre;
		margin: 0.1em 0.1em 0.0em 0.1em; padding: 0;
		}
	div.CodeFramed > p.CodeComment {
		font-family: DejaVuSansMono, monospace; font-style: italic; font-size: 0.8em; color: rgb(0%,47%,0%); white-space: normal;
		margin: 0.5em 0.1em 0.5em 2.1em; padding: 0; text-indent: -2em;
		}
	div.CodeFramed > p.CodeAssertion {
		font-family: DejaVuSansMono, monospace; font-style: italic; font-size: 0.8em; color: rgb(0%,47%,0%); white-space: normal;
		margin: 0.5em 0.1em 0.5em 2.1em; padding: 0; text-indent: -2em;
		}







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

div.LCCodeBox {
	display: block; overflow: auto;
	background-color: rgb(100%,100%,94%); border: solid 0.1em rgb(60%,60%,40%);
	padding: 0.5em 0 0.8em 0.5em; margin: 1.5rem;
	}

	div.LCCodeBox p {
		font-family: DejaVuSansMono, 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;
	margin: 0; padding: 8.0rem 0 100vmax 0;
	background-color: rgb(98%,95%,95%);
	counter-reset: h1count;
	visibility: hidden;
	}


/* =========================================================================================== */
@media print {
body	{
	font-family: Times, serif; font-size: 11pt;
	margin: 2cm 2cm 2cm 3cm; padding: 0;
	background-color: transparent;
	}
	}





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



#Banner-NavigationByDirectories		{ 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(100%,100%,0%); }
#Banner-FoldingUnfold-Flasher				{ fill: #aaa; stroke: #000; stroke-width: 1.5px; }
#Banner-FoldingFold-Flasher					{ fill: #aaa; stroke: #000; stroke-width: 1.5px; }
#Banner-PreferencesButton-Flasher			{ fill: #aaa; stroke: #000; stroke-width: 5.7px; }
#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-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-PreferencesButton-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-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; }


#Titles	{ top: 0.0rem; min-height: 3.0rem; margin: 0.0rem; padding: 0.0rem 5.0rem 0.3rem 5.0rem; white-space: normal; }

#Titles > h2:before { content: ""; counter-increment: none; }

/*  Title (no subtitle)  */
#Titles > h2 {
	font-size: 2.0rem; font-weight: bold; text-align: center;
	margin: 0; padding: 0.15rem 0.0rem 0.5rem 0.0rem;
	border: none;
	background-color: transparent;
	}

/*  Title + Subtitle  */
#Titles > h2:nth-last-of-type(2) {
	font-size: 1.4rem; font-weight: bold; text-align: center;
	margin: 0; padding: 0.2rem 0.0rem 0.0rem 0.0rem;
	}
#Titles > h2:nth-of-type(2) {
	font-size: 1.1rem; font-weight: normal; text-align: center;
	margin: 0; padding: 0.0rem 0.0rem 0.0rem 0.0rem;
	}





/*  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-bottom: 0.0rem; margin-right: 0.5rem;
	padding-bottom: 0.4rem;
	}
	
#StatisticsTiming		{ position: fixed; bottom: 0.4rem; 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%);
	}

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