1 files changed, 437 insertions, 191 deletions

diff --git a/tex/context/base/mkiv/export-example.css b/tex/context/base/mkiv/export-example.css
index 8c7ae3bfc..812873afc 100644
--- a/tex/context/base/mkiv/export-example.css
+++ b/tex/context/base/mkiv/export-example.css
@@ -28,6 +28,8 @@
 	context|div.figure { }                   *[chain~='figure'] { }
 	context|div.figure.myfloatb { }          *[chain~='figure'][detail='myfloatb'] { }
 
+	Inheritance when using div seems to be stronger so we need to take more precautions.
+
 */
 
 @namespace context url('http://www.pragma-ade.com/context/export') ;
@@ -35,35 +37,42 @@
 /* ignore  : mixed   */
 /* metadata: display */
 
-ignore, context|div.ignore {
+ignore,
+context|div.ignore {
 	display : none ;
 }
 
-ignore, context|div.private {
+ignore,
+context|div.private {
 	display : none ;
 }
 
-xmetadata, context|div.xmetadata {
+xmetadata,
+context|div.xmetadata {
 	display : none ;
 }
 
-xmetavariable, context|div.xmetavariable {
+xmetavariable,
+context|div.xmetavariable {
 	display : none ;
 }
 
 /* document : display */
 
-document:before, context|div.document:before {
+document:before,
+context|div.document:before {
 	content       : attr(title) ;
 	font-size     : 44pt ;
 	font-weight   : bold ;
 	margin-bottom : 1em ;
 }
 
-document, context|div.document {
+document,
+context|div.document {
 	font-family  : "DejaVu Serif", "Lucida Bright", serif ;
 	font-size    : 12pt ;
-	line-height  : 14.4pt;
+ /*	line-height  : 14.4pt; */
+ 	line-height  : 2.8ex;
 	max-width    : 50em ;
 	padding      : 1em ;
  /* text-align   : justify ;    */
@@ -72,35 +81,59 @@ document, context|div.document {
  /* text-justify : inter-word ; */
 }
 
-document>metadata, context|div.document context|div.metadata {
+document>metadata,
+context|div.document context|div.metadata {
 	font-family   : "DejaVu Sans Mono", "Lucida Console", monospace ;
-	margin-bottom : 2em ;
+	margin-bottom : 3ex ;
 }
 
-document>metadata>metavariable[name="title"]:before,
-		context|div.document context|div.metadata context|div.metavariable.name-title:before {
-	content : "title\00A0\00A0\00A0:\00A0" ;
+/*
+	document>metadata>metavariable[name="X"]:before,
+	context|div.document context|div.metadata context|div.metavariable.metaname-X:before {
+		content : "X\00A0\00A0\00A0:\00A0" ;
+	}
+*/
+
+document>metadata,
+context|div.document context|div.metadata {
+	display   : flex ;
+	flex-flow : column ;
 }
 
-document>metadata>metavariable[name="author"]:before,
-		context|div.document context|div.metadata context|div.metavariable.name-author:before {
-	content : "author\00A0\00A0:\00A0" ;
+document>metadata>metavariable:before,
+context|div.document context|div.metadata context|div.metavariable:before {
+	display     : inline ;
+	content     : attr(label);
+	width       : 8em ;
+	float       : left ;
+	font-weight : bold ;
 }
 
-document>metadata>metavariable[name="version"]:before,
-		context|div.document context|div.metadata context|div.metavariable.name-version:before {
-	content : "version\00A0:\00A0" ;
+document>metadata>metavariable[name="title"],
+context|div.document context|div.metadata context|div.metavariable.metaname-title {
+	order         : -1 ;
+	display       : block ;
+	width         : 50em ;
+	float         : left ;
+	font-family   : "DejaVu Serif", "Lucida Bright", serif ;
+	font-weight   : bold ;
+	font-size     : 3em ;
+    text-align    : left ;
+	margin-bottom : 2ex ;
 }
 
-document>metadata>metavariable[name="title"], document>metadata>metavariable[name="author"], document>metadata>metavariable[name="version"],
-		context|div.document context|div.metadata context|div.metavariable.name-title, context|div.document context|div.metadata context|div.metavariable.name-author, context|div.document context|div.metadata context|div.metavariable.name-version {
-	display : block ;
+document>metadata>metavariable[name="title"]:before,
+context|div.document context|div.metadata context|div.metavariable.metaname-title:before {
+	content     : none ;
 }
 
 /* paragraph : mixed */
 /* p         : mixed */
 
-paragraph, p, context|div.paragraph, context|div.p {
+paragraph,
+p,
+context|div.paragraph,
+context|div.p {
 	display       : block ;
 	margin-top    : 0.5em ;
 	margin-bottom : 0.5em ;
@@ -108,7 +141,8 @@ paragraph, p, context|div.paragraph, context|div.p {
 
 /* break : display */
 
-break, context|div.break {
+break,
+context|div.break {
 	display       : block ;
 	margin-bottom : 0.5em ;
 }
@@ -116,14 +150,17 @@ break, context|div.break {
 /* construct : inline */
 /* highlight : inline */
 
-construct, context|div.construct {
+construct,
+context|div.construct {
 }
 
-construct[detail="important"], context|div.construct.important {
+construct[detail="important"],
+context|div.construct.important {
 	font-weight : bold ;
 }
 
-highlight, context|div.highlight { /* todo: style and color */
+highlight,
+context|div.highlight { /* todo: style and color */
 	display : inline ;
 }
 
@@ -132,95 +169,167 @@ highlight, context|div.highlight { /* todo: style and color */
 /* sectionnumber  : mixed   */
 /* sectioncontent : display */
 
-section, context|div.section {
+section,
+context|div.section {
 	display : block ;
 }
 
-sectioncontent, context|div.sectioncontent {
-	display       : block ;
-	margin-top    : 1em ;
-	margin-bottom : 1em ;
+sectioncaption,
+context|div.sectioncaption {
+	display          : block ;
+    text-align       : left ;
+	page-break-after : avoid ;
+	margin-top       : 3ex ;
+	margin-bottom    : 2ex ;
 }
 
-section[detail="chapter"], section[detail="title"],
-		context|div.section.chapter, context|div.section.title {
-	page-break-before : always ;
-	page-break-after  : avoid ;
-	margin-top        : 3em ;
-	margin-bottom     : 2em ;
+sectioncontent,
+context|div.sectioncontent {
+	display : block ;
 }
 
-section[detail="section"], section[detail="subject"],
-		context|div.section.section, context|div.section.subject {
-	page-break-after : avoid ;
-	margin-top       : 2.5em ;
-	margin-bottom    : 2.5em ;
+sectionnumber,
+context|div.sectionnumber {
+	display      : inline ;
+	margin-right : 1em ;
 }
 
-section[detail="subsection"], section[detail="subsubject"],
-		context|div.section.subsection, context|div.section.subsubject {
-	page-break-after : avoid ;
-	margin-top       : 2em ;
-	margin-bottom    : 2em ;
+sectionnumber,
+context|div.sectiontitle {
+	display : inline ;
 }
 
-section[detail="subsubsection"], section[detail="subsubsubject"],
-		context|div.section.subsubsection, context|div.section.subsubsubject {
-	page-break-after : avoid ;
-	margin-top       : 1em ;
-	margin-bottom    : 0em ;
+/* we need to use level as selector because section is used twice */
+
+/* chapter | title */
+
+section[detail="chapter"]>sectioncaption,
+section[detail="title"]>sectioncaption,
+context|div.level-2.chapter context|div.sectioncaption ,
+context|div.level-2.title context|div.sectioncaption {
+	font-size   : 2em ;
+	font-weight : bold ;
 }
 
-section[detail="summary"], section[detail="subsummary"],
-		context|div.section.summary, context|div.section.subsummary {
-	margin-top    : 1em ;
-	margin-bottom : 1em ;
+section[detail="chapter"],
+section[detail="title"],
+context|div.level-2.chapter,
+context|div.level-2.title {
+	page-break-before : always ;
+	margin-top        : 4ex ;
 }
 
-section[detail="chapter"]>sectionnumber,
-		context|div.section.chapter context|div.sectionnumber {
-	display      : inline-block ;
-	margin-right : 1em ;
-	font-size    : 3em ;
-	font-weight  : bold ;
+section[detail="chapter"]>sectioncaption>sectionnumber,
+context|div.level-2.chapter context|div.sectioncaption context|div.sectionnumber {
+	/* nothing */
 }
 
-section[detail="chapter"]>sectiontitle, section[detail="title"]>sectiontitle,
-		context|div.section.chapter context|div.sectiontitle, context|div.section.title context|div.sectiontitle {
-	display     : inline-block ;
-	font-size   : 3em ;
-	font-weight : bold ;
+section[detail="chapter"]>sectioncaption>sectiontitle,
+section[detail="title"]>sectioncaption>sectiontitle,
+context|div.level-2.chapter context|div.sectioncaption context|div.sectiontitle,
+context|div.level-2.title context|div.sectioncaption context|div.sectiontitle {
+	/* nothing */
 }
 
-section[detail="section"]>sectiontitle, section[detail="subject"]>sectiontitle,
-		context|div.section.section context|div.sectiontitle, context|div.section.subject context|div.sectiontitle {
-	display     : inline-block ;
-	font-size   : 2.5em ;
+/* section | subject */
+
+section[detail="section"]>sectioncaption,
+section[detail="subject"]>sectioncaption,
+context|div.level-3.section context|div.sectioncaption,
+context|div.level-3.subject context|div.sectioncaption {
+	font-size   : 1.75em ;
 	font-weight : bold ;
 }
 
-section[detail="subsection"]>sectiontitle, section[detail="subsubject"]>sectiontitle,
-		context|div.section.subsection context|div.sectiontitle, context|div.section.subsubject context|div.sectiontitle {
-	display     : inline-block ;
-	font-size   : 2em ;
+section[detail="section"],
+section[detail="subject"],
+context|div.level-3.section,
+context|div.level-3.subject {
+	/* nothing */
+}
+
+section[detail="section"]>sectioncaption>sectionnumber,
+context|div.level-3.section context|div.sectioncaption context|div.sectionnumber {
+	/* nothing */
+}
+
+section[detail="section"]>sectioncaption>sectiontitle,
+section[detail="subject"]>sectioncaption>sectiontitle,
+context|div.level-3.section context|div.sectioncaption context|div.sectiontitle,
+context|div.level-3.subject context|div.sectioncaption context|div.sectiontitle {
+	/* nothing */
+}
+
+/* subsection | subsubject */
+
+section[detail="subsection"]>sectioncaption,
+section[detail="subsubject"]>sectioncaption,
+context|div.level-4.subsection context|div.sectioncaption,
+context|div.level-4.subsubject context|div.sectioncaption {
+	font-size   : 1.5em ;
 	font-weight : bold ;
 }
 
-section[detail="subsubsection"]>sectiontitle, section[detail="subsubsubject"]>sectiontitle,
-		context|div.section.subsubsection context|div.sectiontitle, context|div.section.subsubsubject context|div.sectiontitle {
-	display     : inline-block ;
-	font-size   : 1em ;
+section[detail="subsection"],
+section[detail="subsubject"],
+context|div.level-4.subsection,
+context|div.level-4.subsubject {
+	/* nothing */
+}
+
+section[detail="subsection"]>sectioncaption>sectionnumber,
+context|div.level-4.subsection context|div.sectioncaption context|div.sectionnumber {
+	/* nothing */
+}
+
+section[detail="subsection"]>sectioncaption>sectiontitle,
+section[detail="subsubject"]>sectioncaption>sectiontitle,
+context|div.level-4.subsection context|div.sectioncaption context|div.sectiontitle,
+context|div.level-4.subsubject context|div.sectioncaption context|div.sectiontitle {
+	/* nothing */
+}
+
+/* subsubsection | subsubsubject */
+
+section[detail="subsubsection"]>sectioncaption,
+section[detail="subsubsubject"]>sectioncaption,
+context|div.level-5.subsubsection context|div.sectioncaption,
+context|div.level-5.subsubsubject context|div.sectioncaption {
+	font-size   : 1.25em ;
 	font-weight : bold ;
 }
 
-section[detail="section"]>sectionnumber, context|div.section.section context|div.sectionnumber {
-	display      : inline-block ;
-	margin-right : 1em ;
-	font-size    : 2.5em ;
-	font-weight  : bold ;
+section[detail="subsubsection"],
+section[detail="subsubsubject"],
+context|div.level-5.subsubsection,
+context|div.level-5.subsubsubject {
+	/* nothing */
+}
+
+section[detail="subsubsection"]>sectioncaption>sectionnumber,
+context|div.level-5.subsubsection context|div.sectioncaption context|div.sectionnumber {
+	/* nothing */
+}
+
+section[detail="subsubsection"]>sectioncaption>sectiontitle,
+section[detail="subsubsubject"]>sectioncaption>sectiontitle,
+context|div.level-5.subsubsection context|div.sectioncaption context|div.sectiontitle,
+context|div.level-5.subsubsubject context|div.sectioncaption context|div.sectiontitle {
+	/* nothing */
+}
+
+/* summary | subsummary*/
+
+section[detail="summary"],
+section[detail="subsummary"],
+context|div.section.summary,
+context|div.section.subsummary {
+	margin-top    : 1em ;
+	margin-bottom : 1em ;
 }
 
-section[detail="summary"]>sectiontitle, context|div.section.summary context|div.sectiontitle {
+section[detail="summary"]>sectioncaption>sectiontitle,
+context|div.section.summary context|div.sectioncaption context|div.sectiontitle {
 	display             : block ;
 	margin-top          : 1em ;
 	margin-bottom       : 1em ;
@@ -228,16 +337,11 @@ section[detail="summary"]>sectiontitle, context|div.section.summary context|div.
 	border-bottom-style : solid ;
 	border-color        : rgb(50%,50%,100%) ;
 	border-width        : .15em;
+    text-align          : left ;
 }
 
-section[detail="subsection"]>sectionnumber, context|div.section.subsection context|div.sectionnumber {
-	display      : inline-block ;
-	margin-right : 1em ;
-	font-size    : 1em ;
-	font-weight  : bold ;
-}
-
-section[detail="subsummary"]>sectiontitle, context|div.section.subsummary context|div.sectiontitle {
+section[detail="subsummary"]>sectioncaption>sectiontitle,
+context|div.section.subsummary context|div.sectioncaption context|div.sectiontitle {
 	display             : block ;
 	margin-top          : 1em ;
 	margin-bottom       : 1em ;
@@ -245,6 +349,7 @@ section[detail="subsummary"]>sectiontitle, context|div.section.subsummary contex
 	border-color        : rgb(50%,50%,100%) ;
 	border-bottom-style : dotted ;
 	border-width        : .15em ;
+    text-align          : left ;
 }
 
 /* itemgroup   : display */
@@ -265,7 +370,8 @@ section[detail="subsummary"]>sectiontitle, context|div.section.subsummary contex
     glyphs : 'Α' 'B' 'Γ' 'Δ' 'Ε' 'Ζ' 'Η' 'Θ' 'Ι' 'Κ' 'Λ' 'Μ' 'Ν' 'Ξ' 'Ο' 'Π' 'Ρ' 'Σ' 'Τ' 'Υ' 'Φ' 'Χ' 'Ψ' 'Ω' ;
 }
 
-itemgroup, context|div.itemgroup {
+itemgroup,
+context|div.itemgroup {
 	display       : block ;
 	margin-bottom : 0.5em ;
 	margin-top    : 0.5em ;
@@ -284,18 +390,21 @@ itemgroup[symbol="n"], context|div.itemgroup.symbol-n { list-style-type : decima
 itemgroup[symbol="g"], context|div.itemgroup.symbol-g { list-style-type : lower-greek ; }
 itemgroup[symbol="G"], context|div.itemgroup.symbol-G { list-style-type : upper-greek ; }
 
-item, context|div.item {
+item,
+context|div.item {
 	display       : list-item ;
 	margin-left   : 1em ;
 	margin-bottom : 0.5em ;
 	margin-top    : 0.5em ;
 }
 
-itemtag, context|div.item {
+itemtag,
+context|div.item {
 	display: none ;
 }
 
-itemcontent, context|div.itemcontent {
+itemcontent,
+context|div.itemcontent {
 }
 
 /* description        : display */
@@ -303,13 +412,15 @@ itemcontent, context|div.itemcontent {
 /* descriptioncontent : mixed   */
 /* descriptionsymbol  : inline  */
 
-description, context|div.description {
+description,
+context|div.description {
 	display       : block ;
 	margin-bottom : 1em ;
 	margin-top    : 1em ;
 }
 
-descriptiontag, context|div.descriptiontag {
+descriptiontag,
+context|div.descriptiontag {
 	display      : inline ;
     float        : left ;
     clear        : left ;
@@ -318,10 +429,12 @@ descriptiontag, context|div.descriptiontag {
     font-weight  : bold ;
 }
 
-descriptioncontent, context|div.descriptioncontent {
+descriptioncontent,
+context|div.descriptioncontent {
 }
 
-descriptionsymbol, context|div.descriptionsymbol {
+descriptionsymbol,
+context|div.descriptionsymbol {
 	display : inline ;
 }
 
@@ -330,7 +443,8 @@ descriptionsymbol, context|div.descriptionsymbol {
 /* verbatimline       : mixed   */
 /* verbatim           : inline  */
 
-verbatimblock, context|div.verbatimblock {
+verbatimblock,
+context|div.verbatimblock {
 	background-color : rgb(50%,50%,100%) ;
 	display          : block ;
 	padding          : 1em ;
@@ -339,17 +453,20 @@ verbatimblock, context|div.verbatimblock {
 	font-family      : "DejaVu Sans Mono", "Lucida Console", monospace ;
 }
 
-verbatimlines+verbatimlines, context|div.verbatimlines+context|div.verbatimlines {
+verbatimlines+verbatimlines,
+context|div.verbatimlines+context|div.verbatimlines {
 	display    : block ;
 	margin-top : 1em ;
 }
 
-verbatimline, context|div.verbatimline {
+verbatimline,
+context|div.verbatimline {
 	display     : block ;
 	white-space : pre-wrap ;
 }
 
-verbatim, context|div.verbatim {
+verbatim,
+context|div.verbatim {
 	display     : inline ;
 	white-space : pre-wrap ;
 	color       : rgb(60%,60%,0%) ;
@@ -359,18 +476,21 @@ verbatim, context|div.verbatim {
 /* lines : display */
 /* line  : mixed   */
 
-lines, context|div.lines {
+lines,
+context|div.lines {
 	display       : block ;
 	margin-bottom : 1em ;
 	margin-top    : 1em ;
 }
 
-lines+lines, context|div.lines+context|div.lines {
+lines+lines,
+context|div.lines+context|div.lines {
 	display    : block ;
 	margin-top : 1em ;
 }
 
-line, context|div.line {
+line,
+context|div.line {
 	display     : block ;
 	white-space : pre-wrap ;
 }
@@ -378,7 +498,10 @@ line, context|div.line {
 /* synonym : inline  */
 /* sorting : inline  */
 
-sorting, synonym, context|div.sorting, context|div.synonym {
+sorting,
+synonym,
+context|div.sorting,
+context|div.synonym {
 	display      : inline ;
 	font-variant : small-caps ;
 }
@@ -393,15 +516,18 @@ sorting, synonym, context|div.sorting, context|div.synonym {
 /* registerpage      : inline  */
 /* registerpagerange : mixed   */
 
-register, context|div.register {
+register,
+context|div.register {
 	display: none ;
 }
 
-registerlocation, context|div.registerlocation {
+registerlocation,
+context|div.registerlocation {
 	display: inline ;
 }
 
-registerlocation:after, context|div.registerlocation:after {
+registerlocation:after,
+context|div.registerlocation:after {
 	content        : "\25B6\00A0\00A0" ;
 	color          : rgb(40%,40%,40%) ;
 	font-size      : x-small ;
@@ -414,33 +540,39 @@ registerlocation:after, context|div.registerlocation:after {
 /* tablerow  : display */
 /* tablecell : mixed   */
 
-table, context|div.table {
+table,
+context|div.table {
 	display : table ;
 }
 
-tablerow, context|div.tablerow {
+tablerow,
+context|div.tablerow {
 	display : table-row ;
 }
 
-tablecell[align="middle"], context|div.tablecell.align-middle {
+tablecell[align="middle"],
+context|div.tablecell.align-middle {
 	display    : table-cell ;
 	text-align : center ;
 	padding    : .1em ;
 }
 
-tablecell[align="flushleft"], context|div.tablecell.align-flushleft {
+tablecell[align="flushleft"],
+context|div.tablecell.align-flushleft {
 	display    : table-cell ;
 	text-align : left ;
 	padding    : .1em ;
 }
 
-tablecell[align="flushright"], context|div.tablecell.align-flushright {
+tablecell[align="flushright"],
+context|div.tablecell.align-flushright {
 	display    : table-cell ;
 	text-align : right ;
 	padding    : .1em ;
 }
 
-tablecell, context|div.tablecell {
+tablecell,
+context|div.tablecell {
 	display    : table-cell ;
 	text-align : left ;
 	padding    : .1em ;
@@ -450,73 +582,97 @@ tablecell, context|div.tablecell {
 /* tabulaterow  : display */
 /* tabulatecell : mixed   */
 
-tabulate, context|div.tabulate {
+tabulate,
+context|div.tabulate {
 	display       : table ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 	margin-left   : 2.5em ;
 }
 
-floatcontent>tabulate, context|div.floatcontent context|div.tabulate {
+floatcontent>tabulate,
+context|div.floatcontent context|div.tabulate {
 	margin-left   : 0em ;
 }
 
-tabulaterow, context|div.tabulaterow {
+tabulaterow,
+context|div.tabulaterow {
 	display : table-row ;
 }
 
-tabulatecell[align="middle"], context|div.tabulatecell.align-middle {
+tabulatecell[align="middle"],
+context|div.tabulatecell.align-middle {
 	display       : table-cell ;
 	text-align    : center ;
 	padding-right : 1em ;
 }
 
-tabulatecell[align="flushleft"], context|div.tabulatecell.align-flushleft {
+tabulatecell[align="flushleft"],
+context|div.tabulatecell.align-flushleft {
 	display       : table-cell ;
 	text-align    : left ;
 	padding-right : 1em ;
 }
 
-tabulatecell[align="flushright"], context|div.tabulatecell.align-flushright {
+tabulatecell[align="flushright"],
+context|div.tabulatecell.align-flushright {
 	display       : table-cell ;
 	text-align    : right ;
 	padding-right : 1em ;
 }
 
-tabulatecell, context|div.tabulatecell {
+tabulatecell,
+context|div.tabulatecell {
 	display       : table-cell ;
 	text-align    : left ;
 	padding-right : 1em ;
 }
 
+tabulatecell[kind="strong"],
+context|div.tabulatecell.kind-strong {
+	font-weight : bold ;
+}
+
+tabulatecell[kind="equals"]:before,
+context|div.tabulatecell.kind-equals:before {
+	display      : inline-block ;
+	clear        : left ;
+	margin-left  : -.6em ;
+	width        : .6em ;
+	content      : ":" ;
+}
+
 /* combination        : display */
 /* combinationpair    : display */
 /* combinationcontent : mixed   */
 /* combinationcaption : mixed   */
 
-combination, context|div.combination {
+combination,
+context|div.combination {
 	display       : table ;
 	margin-top    : 0em ;
 	margin-bottom : 0em ;
 }
 
-combinationpair, context|div.combinationpair {
+combinationpair,
+context|div.combinationpair {
 	display       : table-cell ;
 	padding-right : 1em ;
 }
 
-combinationcontent, context|div.combinationcontent {
+combinationcontent,
+context|div.combinationcontent {
 	display    : table-row ;
 	text-align : center ;
 }
 
-combinationcaption, context|div.combinationcaption {
+combinationcaption,
+context|div.combinationcaption {
 	display     : table-row ;
 	padding-top : 1ex ;
 	text-align  : center ;
 }
 
-
 /* list        : display */
 /* listitem    : display */
 /* listtag     : mixed   */
@@ -524,39 +680,81 @@ combinationcaption, context|div.combinationcaption {
 /* listdata    : mixed   */
 /* listpage    : mixed   */
 
-list, context|div.list {
-	display : block ;
+list,
+context|div.list {
+	display    : block ;
+	text-align : left ;
 }
 
-listitem[detail="chapter"], context|div.listitem.chapter {
+listitem[detail="chapter"],
+context|div.listitem.chapter {
 	display     : block ;
 	margin-top  : 1em ;
+	margin-left : 5em ;
 	font-weight : bold ;
 }
 
-listitem[detail="section"], context|div.listitem.section {
-	display : block ;
+listitem[detail="section"],
+context|div.listitem.section {
+	display     : block ;
+	margin-left : 5em ;
 }
 
-listitem[detail="subsection"], context|div.listitem.subsection {
-	display : block ;
-	display : inline-block ;
+listitem[detail="subsection"],
+context|div.listitem.subsection {
+	display     : block ;
+	margin-left : 5em ;
 }
 
-listtag, context|div.listtag {
-	display : inline-block ;
-	width   : 5em ;
+/*
+listitem[detail="subsection"],
+context|div.listitem.subsection {
+	display     : inline-block ;
+	margin-left : -5em ;
 }
 
-listcontent, context|div.listcontent {
-	display : inline-block ;
+listitem[detail="subsection"]>listtag,
+context|div.listitem.subsection context|div.listtag {
+	margin-right : 1em ;
 }
+*/
 
-listdata, context|div.listdata {
-	display : inline-block ;
+listitem[detail="chapter"]>listtag,
+context|div.listitem.chapter context|div.listtag {
+	display     : inline-block ;
+	margin-left : -5em ;
+	float       : left ;
+	clear       : left ;
+}
+
+listitem[detail="section"]>listtag,
+context|div.listitem.section context|div.listtag {
+	display     : inline-block ;
+	margin-left : -5em ;
+	float       : left ;
+	clear       : left ;
+}
+
+listitem[detail="subsection"]>listtag,
+context|div.listitem.subsection context|div.listtag {
+	display      : inline-block ;
+	margin-left : -5em ;
+	float        : left ;
+	clear        : left ;
+}
+
+listcontent,
+context|div.listcontent {
+	display : inline ;
+}
+
+listdata,
+context|div.listdata {
+	display : inline ;
 }
 
-listpage, context|div.listpage {
+listpage,
+context|div.listpage {
 	display : none ;
 }
 
@@ -570,59 +768,77 @@ listpage, context|div.listpage {
 
 /* :lang(en) */
 
-delimited[detail="quotation"]:before, delimitedblock[detail="quotation"]:before,
-	context|div.delimited.quotation:before, context|div.delimitedblock.quotation:before {
+delimited[detail="quotation"]:before,
+delimitedblock[detail="quotation"]:before,
+context|div.delimited.quotation:before,
+context|div.delimitedblock.quotation:before {
 	/* content : "\201C" ; */
 	font-style : italic ;
 }
 
-delimited[detail="quotation"]:after, delimitedblock[detail="quotation"]:after,
-	context|div.delimited.quotation:after, context|div.delimitedblock.quotation:after {
+delimited[detail="quotation"]:after,
+delimitedblock[detail="quotation"]:after,
+context|div.delimited.quotation:after,
+context|div.delimitedblock.quotation:after {
 	/* content : "\201D" ; */
 	font-style : italic ;
 }
 
-delimited[detail="quote"]:before, delimitedblock[detail="quote"]:before,
-	context|div.delimited.quote:before, context|div.delimitedblock.quote:before {
+delimited[detail="quote"]:before,
+delimitedblock[detail="quote"]:before,
+context|div.delimited.quote:before,
+context|div.delimitedblock.quote:before {
 	/* content : "\2018" ; */
 	font-style : italic ;
 }
 
-delimited[detail="quote"]:after, delimitedblock[detail="quote"]:after,
-	context|div.delimited.quote:after, context|div.delimitedblock.quote:after {
+delimited[detail="quote"]:after,
+delimitedblock[detail="quote"]:after,
+context|div.delimited.quote:after,
+context|div.delimitedblock.quote:after {
 	/* content : "\2019" ; */
 	font-style : italic ;
 }
 
-delimited, context|div.delimited {
+delimited,
+context|div.delimited {
     display : inline
 }
 
-delimitedcontent, context|div.delimitedcontent {
+delimitedcontent,
+context|div.delimitedcontent {
     display : inline
 }
 
-delimitedsymbol, context|div.delimitedsymbol {
+delimitedsymbol,
+context|div.delimitedsymbol {
     display : inline
 }
 
-delimitedblock, context|div.delimitedblock {
+delimitedblock,
+context|div.delimitedblock {
     display : block
 }
 
-subsentence:before, subsentence:after, context|div.subsentence:before, context|div.subsentence:after {
+subsentence:before,
+subsentence:after,
+context|div.subsentence:before,
+context|div.subsentence:after {
 	content : "\2014" ;
 }
 
-subsentence, context|div.subsentence {
+subsentence,
+context|div.subsentence {
     display : inline
 }
 
-subsentencecontent, context|div.subsentencecontent {
+subsentencecontent,
+context|div.subsentencecontent {
     display : inline
 }
 
-subsentencesymbol, context|div.subsentencesymbol {
+subsentencesymbol,
+context|div.subsentencesymbol {
     display : inline
 }
 
@@ -636,36 +852,42 @@ subsentencesymbol, context|div.subsentencesymbol {
 /* floattext    : mixed   */
 /* floatcontent : mixed   */
 
-float, context|div.float {
+float,
+context|div.float {
 	display       : block ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 	margin-left   : 2.5em ;
 }
 
-floatcaption, context|div.floatcaption {
+floatcaption,
+context|div.floatcaption {
 	display    : block ;
 	margin-top : 0.5em ;
 	color      : rgb(60%,60%,0%) ;
 }
 
-floatlabel, context|div.floatlabel {
+floatlabel,
+context|div.floatlabel {
 	display      : inline-block ;
 	font-weight  : bold ;
 	margin-right : 0.25em ;
 }
 
-floatnumber, context|div.floatnumber {
+floatnumber,
+context|div.floatnumber {
 	display      : inline ;
 	font-weight  : bold ;
 	margin-right : 0.25em ;
 }
 
-floattext, context|div.floattext {
+floattext,
+context|div.floattext {
 	display      : inline ;
 }
 
-floatcontent, context|div.floatcontent {
+floatcontent,
+context|div.floatcontent {
 }
 
 /* image     : mixed */
@@ -679,11 +901,14 @@ floatcontent, context|div.floatcontent {
     height          : 5.994cm ;
 } */
 
-mpgraphic:before, context|div.mpgraphic:before { /* does not work with empty element */
+mpgraphic:before,
+context|div.mpgraphic:before {
+	/* does not work with empty element */
 	content : "[runtime metapost graphic]" ;
 }
 
-mpgraphic, context|div.mpgraphic {
+mpgraphic,
+context|div.mpgraphic {
 	display : inline ;
 }
 
@@ -695,63 +920,73 @@ mpgraphic, context|div.mpgraphic {
 /* formulanumber  : mixed   */
 /* formulacontent : display */
 
-formula, context|div.formula {
+formula,
+context|div.formula {
 	display       : block ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 	margin-left   : 2.5em ;
 }
 
-subformula, context|div.subformula { /* todo */
+subformula,
+context|div.subformula { /* todo */
 	display       : block ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 	margin-left   : 2.5em ;
 }
 
-formulaset, context|div.formulaset { /* todo */
+formulaset,
+context|div.formulaset { /* todo */
 	display       : block ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 	margin-left   : 2.5em ;
 }
 
-formulacaption, context|div.formulacaption { /* todo */
+formulacaption,
+context|div.formulacaption { /* todo */
 	display    : block ;
 	margin-top : 0.5em ;
 	color      : rgb(60%,60%,0%) ;
 }
 
-formulalabel, context|div.formulalabel {
+formulalabel,
+context|div.formulalabel {
 	display      : inline ;
 	font-weight  : bold ;
 	margin-right : .25em ;
 }
 
-formulanumber, context|div.formulanumber {
+formulanumber,
+context|div.formulanumber {
 	display     : inline ;
 	font-weight : bold ;
 }
 
-formulacontent, context|div.formulacontent {
+formulacontent,
+context|div.formulacontent {
 	display : block ;
 }
 
-link, context|div.link {
+link,
+context|div.link {
 	display : inline ;
 }
 
 /* margintextblock : inline  */
 /* margintext      : inline  */
 
-margintext, context|div.margintext {
+margintext,
+context|div.margintext {
 	display       : block ;
 	font-weight   : bold ;
 	margin-top    : 1em ;
 	margin-bottom : 1em ;
 }
 
-margintext:before, context|div.margintext:before {
+margintext:before,
+context|div.margintext:before {
 	content : "\25B6\00A0\00A0" ;
 	color   : rgb(40%,40%,40%) ;
 }
@@ -793,15 +1028,18 @@ context|div.math-display {
 /* unit     : inline */
 /* number   : inline */
 
-quantity, context|div.quantity {
+quantity,
+context|div.quantity {
 	display : inline-block ;
 }
 
-quantity>unit, context|div.quantity>context|div.unit {
+quantity>unit,
+context|div.quantity>context|div.unit {
 	display : inline ;
 }
 
-quantity>number, context|div.quantity>context|div.number {
+quantity>number,
+context|div.quantity>context|div.number {
 	display : inline ;
 }
 
@@ -809,24 +1047,28 @@ quantity>number, context|div.quantity>context|div.number {
 /* sup    : inline */
 /* subsup : inline */
 
-sup, context|div.sup {
+sup,
+context|div.sup {
 	display        : inline-block ;
 	font-size      : xx-small ;
 	vertical-align : super ;
 }
 
-sub, context|div.sub {
+sub,
+context|div.sub {
 	display        : inline-block ;
 	font-size      : xx-small ;
 	vertical-align : sub ;
 }
 
-subsup>sup, context|div.subsup>context|div.sup {
+subsup>sup,
+context|div.subsup>context|div.sup {
 	display        : inline ;
 	vertical-align : top ;
 }
 
-subsup>sub, context|div.subsup>context|div.sub {
+subsup>sub,
+context|div.subsup>context|div.sub {
 	display        : inline ;
 	vertical-align : bottom ;
 }
@@ -840,11 +1082,13 @@ context|div[href]:hover {
 
 /* setups */
 
-setup, context|div.setup {
+setup,
+context|div.setup {
 	display : block ;
 }
 
-comment, context|div.comment {
+comment,
+context|div.comment {
 	background-color : rgb(50%,75%,100%) ;
 	display          : block ;
 	padding          : 1em ;
@@ -855,10 +1099,12 @@ comment, context|div.comment {
 
 /* special */
 
-c, context|div.c {
+c,
+context|div.c {
 	display : inline ;
 }
 
-warning, context|div.warning {
+warning,
+context|div.warning {
 	display : none ;
 }