/*

    author    : Hans Hagen, PRAGMA-ADE, Hasselt NL
    copyright : PRAGMA ADE / ConTeXt Development Team
    license   : see context related readme files
    comment   : companion to context.mkiv

*/

/*

    Because empty div elements are not seen we put a comment in them so that empty
    table cells etc work ok.

    We can style individual elements in several ways and we support in this css file
    meaningful elements as well as divs. If needed you can use the chain field as well
    as chain elements in the div class for styling groups.

    \definefloat[myfloata]
    \definefloat[myfloatb][myfloatbs][figure]

    div.float.myfloata { }           float[detail='myfloata'] { }
    div.float.myfloatb { }           float[detail='myfloatb'] { }
    div.float.figure { }             float[detail='figure']   { }
    div.float.figure.myfloatb { }    float[chain~='figure'][detail='myfloata'] { }
    div.myfloata { }                 *[detail='myfloata'] { }
    div.myfloatb { }                 *[detail='myfloatb'] { }
    div.figure { }                   *[chain~='figure'] { }
    div.figure.myfloatb { }          *[chain~='figure'][detail='myfloatb'] { }

    Inheritance when using div seems to be stronger so we need to take more precautions.

*/

/*

    Todo: check when using "rem" instead of "em" makes sense.

*/

@namespace context url('http://www.pragma-ade.com/context/export') ;

/* to be applied */

:root {
	--margin: 2.5em;
}

/* ignore   : mixed   */
/* metadata : display */
/* extradata: display */

ignore,
div.ignore {
    display : none ;
}

ignore,
div.private {
    display : none ;
}

xmetadata,
div.xmetadata {
    display : none ;
}

xmetavariable,
div.xmetavariable {
    display : none ;
}

extradata,
div.extradata {
    display : none ;
}

/* document : display */

document:before,
div.document:before {
    content       : attr(title) ;
    font-size     : 3em ;
    font-family   : TextBold ;
    margin-bottom : 1em ;
    display       : block ;
}

math {
    font-family : MathNormal ; /* , "Lucida Bright Math OT", "Cambria Math", "STIX Two Math" ; */
    font-style  : normal ;
}

/* These will be overloaded in *-styles.css: */

document,
div.document {
    font-family  : TextNormal ; /* "Lucida Bright", "DejaVu Serif", Serif, serif ; */
    font-style   : normal ;
    font-size    : 12pt ;
    line-height  : 1.4 ;
    max-width    : 50em ;
    padding      : 1em ;
    text-align   : justify ;
}

document>metadata,
div.metadata {
    font-family   : Mono, "DejaVu Sans Mono", "Lucida Console", monospace ;
    margin-bottom : 3ex ;
}

/*
    document>metadata>metavariable[name="X"]:before,
    div.document div.metadata div.metavariable.metaname-X:before {
        content : "X\00A0\00A0\00A0:\00A0" ;
    }
*/

document>metadata,
div.document div.metadata {
    display   : flex ;
    flex-flow : column ;
}

document>metadata>metavariable:before,
div.document div.metadata div.metavariable:before {
    display     : inline ;
    content     : attr(label);
    width       : 8em ;
    float       : left ;
    font-family : TextBold ;
}

document>metadata>metavariable[name="title"],
div.document div.metadata div.metavariable.metaname-title {
    order         : -1 ;
    display       : block ;
    width         : 50em ;
    float         : left ;
    font-family   : TextBold ; /* normal */
 /* font-family   : TextBold ;*/
    font-size     : 3em ;
    text-align    : left ;
    margin-bottom : 2ex ;
}

document>metadata>metavariable[name="title"]:before,
div.document div.metadata div.metavariable.metaname-title:before {
    content     : none ;
}

/* paragraph : mixed */
/* p         : mixed */

paragraph,
p,
div.paragraph,
div.p {
    display       : block ;
    margin-top    : 0.5em ;
    margin-bottom : 0.5em ;
}

/* break : display */

break,
div.break {
    display       : block ;
    margin-bottom : 0.5em ;
}

/* construct : inline */

construct,
div.construct {
}

constructleft,
div.constructleft {
}

constructcontent,
div.constructcontent {
}

constructright,
div.constructright {
}

construct[detail="important"],
div.construct.important {
    font-family : TextBold ;
}

/* highlight : inline */

highlight,
div.highlight { /* todo: style and color */
    display : inline ;
}

/* section        : display */
/* sectiontitle   : mixed   */
/* sectionnumber  : mixed   */
/* sectioncontent : display */

section,
div.section {
    display : block ;
}

sectioncaption,
div.sectioncaption {
    display          : block ;
    text-align       : left ;
    page-break-after : avoid ;
    margin-top       : 3ex ;
    margin-bottom    : 2ex ;
}

sectioncontent,
div.sectioncontent {
    display : block ;
}

sectionnumber,
div.sectionnumber {
    display      : inline ;
    margin-right : 1em ;
}

sectionnumber,
div.sectiontitle {
    display : inline ;
}

/* we need to use level as selector because section is used twice */

/* chapter | title */

section[chain~="chapter"]>sectioncaption,
section[chain~="title"]>sectioncaption,
div.level-2.chapter div.sectioncaption ,
div.level-2.title div.sectioncaption {
    font-size   : 2em ;
    font-family : TextBold ;
}

section[chain~="chapter"],
section[chain~="title"],
div.level-2.chapter,
div.level-2.title {
    page-break-before : always ;
    margin-top        : 4ex ;
}

section[detail="chapter"]>sectioncaption>sectionnumber,
div.level-2.chapter div.sectioncaption div.sectionnumber {
    /* nothing */
}

section[chain~="chapter"]>sectioncaption>sectiontitle,
section[chain~="title"]>sectioncaption>sectiontitle,
div.level-2.chapter div.sectioncaption div.sectiontitle,
div.level-2.title div.sectioncaption div.sectiontitle {
    /* nothing */
}

/* section | subject */

section[chain~="section"]>sectioncaption,
section[chain~="subject"]>sectioncaption,
div.level-3.section div.sectioncaption,
div.level-3.subject div.sectioncaption {
    font-size   : 1.75em ;
    font-family : TextBold ;
}

section[chain~="section"],
section[chain~="subject"],
div.level-3.section,
div.level-3.subject {
    /* nothing */
}

section[chain~="section"]>sectioncaption>sectionnumber,
div.level-3.section div.sectioncaption div.sectionnumber {
    /* nothing */
}

section[chain~="section"]>sectioncaption>sectiontitle,
section[chain~="subject"]>sectioncaption>sectiontitle,
div.level-3.section div.sectioncaption div.sectiontitle,
div.level-3.subject div.sectioncaption div.sectiontitle {
    /* nothing */
}

/* subsection | subsubject */

section[chain~="subsection"]>sectioncaption,
section[chain~="subsubject"]>sectioncaption,
div.level-4.subsection div.sectioncaption,
div.level-4.subsubject div.sectioncaption {
    font-size   : 1.5em ;
    font-family : TextBold ;
}

section[chain~="subsection"],
section[chain~="subsubject"],
div.level-4.subsection,
div.level-4.subsubject {
    /* nothing */
}

section[chain~="subsection"]>sectioncaption>sectionnumber,
div.level-4.subsection div.sectioncaption div.sectionnumber {
    /* nothing */
}

section[chain~="subsection"]>sectioncaption>sectiontitle,
section[chain~="subsubject"]>sectioncaption>sectiontitle,
div.level-4.subsection div.sectioncaption div.sectiontitle,
div.level-4.subsubject div.sectioncaption div.sectiontitle {
    /* nothing */
}

/* subsubsection | subsubsubject */

section[chain~="subsubsection"]>sectioncaption,
section[chain~="subsubsubject"]>sectioncaption,
div.level-5.subsubsection div.sectioncaption,
div.level-5.subsubsubject div.sectioncaption {
    font-size   : 1.25em ;
    font-family : TextBold ;
}

section[chain~="subsubsection"],
section[chain~="subsubsubject"],
div.level-5.subsubsection,
div.level-5.subsubsubject {
    /* nothing */
}

section[chain~="subsubsection"]>sectioncaption>sectionnumber,
div.level-5.subsubsection div.sectioncaption div.sectionnumber {
    /* nothing */
}

section[chain~="subsubsection"]>sectioncaption>sectiontitle,
section[chain~="subsubsubject"]>sectioncaption>sectiontitle,
div.level-5.subsubsection div.sectioncaption div.sectiontitle,
div.level-5.subsubsubject div.sectioncaption div.sectiontitle {
    /* nothing */
}

/* summary | subsummary*/

section[detail="summary"],
section[detail="subsummary"],
div.section.summary,
div.section.subsummary {
    margin-top    : 1em ;
    margin-bottom : 1em ;
}

section[detail="summary"]>sectioncaption>sectiontitle,
div.section.summary div.sectioncaption div.sectiontitle {
    display             : block ;
    margin-top          : 1em ;
    margin-bottom       : 1em ;
    font-family         : TextBold ;
    border-bottom-style : solid ;
    border-color        : rgb(50%,50%,100%) ;
    border-width        : .15em;
    text-align          : left ;
}

section[detail="subsummary"]>sectioncaption>sectiontitle,
div.section.subsummary div.sectioncaption div.sectiontitle {
    display             : block ;
    margin-top          : 1em ;
    margin-bottom       : 1em ;
    font-family         : TextBold ;
    border-color        : rgb(50%,50%,100%) ;
    border-bottom-style : dotted ;
    border-width        : .15em ;
    text-align          : left ;
}

/* itemgroup   : display */
/* item        : display */
/* itemtag     : mixed   */
/* itemcontent : mixed   */

/* type   : alphabetic ; */
/* suffix : '.' ;        */

@counter-style lower-greek { /* css 3 */
    type   : non-repeating ;
    glyphs : 'α' 'β' 'γ' 'δ' 'ε' 'ζ' 'η' 'θ' 'ι' 'κ' 'λ' 'μ' 'ν' 'ξ' 'ο' 'π' 'ρ' 'σ' 'τ' 'υ' 'φ' 'χ' 'ψ' 'ω' ;
}

@counter-style upper-greek { /* css 3 */
    type   : non-repeating ;
    glyphs : 'Α' 'B' 'Γ' 'Δ' 'Ε' 'Ζ' 'Η' 'Θ' 'Ι' 'Κ' 'Λ' 'Μ' 'Ν' 'Ξ' 'Ο' 'Π' 'Ρ' 'Σ' 'Τ' 'Υ' 'Φ' 'Χ' 'Ψ' 'Ω' ;
}

itemgroup,
div.itemgroup {
    display       : block ;
    margin-bottom : 0.5em ;
    margin-top    : 0.5em ;
}

itemgroup[symbol="1"], div.itemgroup.symbol-1 { list-style-type : disc ; }
itemgroup[symbol="2"], div.itemgroup.symbol-2 { list-style-type : square ; }
itemgroup[symbol="3"], div.itemgroup.symbol-3 { list-style-type : square ; }
itemgroup[symbol="4"], div.itemgroup.symbol-4 { list-style-type : square ; }
itemgroup[symbol="5"], div.itemgroup.symbol-5 { list-style-type : circ ; }
itemgroup[symbol="a"], div.itemgroup.symbol-a { list-style-type : lower-alpha ; }
itemgroup[symbol="A"], div.itemgroup.symbol-A { list-style-type : alpha ; }
itemgroup[symbol="r"], div.itemgroup.symbol-r { list-style-type : lower-roman ; }
itemgroup[symbol="R"], div.itemgroup.symbol-R { list-style-type : upper-roman ; }
itemgroup[symbol="n"], div.itemgroup.symbol-n { list-style-type : decimal ; }
itemgroup[symbol="g"], div.itemgroup.symbol-g { list-style-type : lower-greek ; }
itemgroup[symbol="G"], div.itemgroup.symbol-G { list-style-type : upper-greek ; }

item,
div.item {
    display       : list-item ;
    margin-left   : 2.5em ;
    margin-bottom : 0.5em ;
    margin-top    : 0.5em ;
}

itemtag,
div.itemtag {
    display: none ;
}

itemcontent,
div.itemcontent {
}

/* description        : display */
/* descriptiontag     : mixed   */
/* descriptioncontent : mixed   */
/* descriptionsymbol  : inline  */

/* There is no robust way to ignore the space after the tag, so we have (space+1em). */

description,
div.description {
    display       : block ;
    margin-bottom : 1em ;
    margin-top    : 1em ;
}

descriptiontag,
div.descriptiontag {
    display      : inline ;
    margin-right : 1em ;
    font-family  : TextBold ;
}

descriptioncontent,
div.descriptioncontent {
    display      : inline ;
}

descriptionsymbol,
div.descriptionsymbol {
    display : inline ;
}

/* verbatimblock : display */
/* verbatimlines : display */
/* verbatimline  : mixed   */
/* verbatim      : inline  */

verbatimblock,
div.verbatimblock {
    background-color : rgb(50%,50%,100%) ;
    display          : block ;
    padding          : 1em ;
    margin-bottom    : 1em ;
    margin-top       : 1em ;
    font-family      : Mono ;
    font-style       : normal ;
}

verbatimlines+verbatimlines,
div.verbatimlines+div.verbatimlines {
    display    : block ;
    margin-top : 1em ;
}

verbatimline,
div.verbatimline {
    display     : block ;
    white-space : pre-wrap ;
}

verbatim,
div.verbatim {
    display     : inline ;
    white-space : pre-wrap ;
    color       : rgb(60%,60%,0%) ;
    font-family : Mono ;
    font-style  : normal ;
}

/* lines      : display */
/* line       : mixed   */
/* linenumber : inline  */

lines,
div.lines {
    display       : block ;
    margin-bottom : 1em ;
    margin-top    : 1em ;
}

lines+lines,
div.lines+div.lines {
    display    : block ;
    margin-top : 1em ;
}

line,
div.line {
    display     : block ;
    white-space : pre-wrap ;
}

linenumber,
div.linenumber {
    display      : inline-block ;
    margin-right : 1em ;
    width        : 3em ;
    text-align   : left ;
    font-family  : Mono ;
    font-style   : normal ;
}

/* synonym : inline  */
/* sorting : inline  */

sorting,
synonym,
div.sorting,
div.synonym {
    display      : inline ;
    font-variant : small-caps ;
}

/* register          : display */
/* registersection   : display */
/* registertag       : mixed   */
/* registerentries   : display */
/* registerentry     : mixed   */
/* registersee       : mixed   */
/* registerpages     : mixed   */
/* registerpage      : inline  */
/* registerpagerange : mixed   */

register,
div.register {
    display: none ;
}

registerlocation,
div.registerlocation {
    display: inline ;
}

registerlocation:after,
div.registerlocation:after {
    content        : "\25B6\00A0\00A0" ;
    color          : rgb(40%,40%,40%) ;
    font-size      : x-small ;
    line-height    : 0 ;
    padding-top    : 0.5ex ;
    vertical-align : top ;
}

/* table     : display */
/* tablerow  : display */
/* tablecell : mixed   */

/* we have a few bonus mappings here */

table,
div.table {
    display : table ;
}

tablerow, tr
div.tablerow, div.tr {
    display : table-row ;
}

tablecell[align="middle"], td[align="middle"],
div.tablecell.align-middle {
    display    : table-cell ;
    text-align : center ;
    padding    : .1em ;
}

tablecell[align="flushleft"], td[align="flushleft"],
div.tablecell.align-flushleft {
    display    : table-cell ;
    text-align : left ;
    padding    : .1em ;
}

tablecell[align="flushright"], td[align="flushright"],
div.tablecell.align-flushright {
    display    : table-cell ;
    text-align : right ;
    padding    : .1em ;
}

tablecell, td
div.tablecell, div.td {
    display    : table-cell ;
    text-align : left ;
    padding    : .1em ;
}

tablehead,
div.thead, div.tableheader {
    display : table-header-group ;
}

tablefoot,
div.tfoot, div.tablefooter {
    display : table-footer-group ;
}

tablebody,
div.tbody, div.tablebody {
    display : table-body-group ;
}

/* tabulate     : display */
/* tabulaterow  : display */
/* tabulatecell : mixed   */

tabulate,
div.tabulate {
    display       : table ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
}

floatcontent>tabulate,
div.floatcontent div.tabulate {
    margin-left   : 0em ;
}

tabulaterow,
div.tabulaterow {
    display : table-row ;
}

tabulatecell[align="middle"],
div.tabulatecell.align-middle {
    display       : table-cell ;
    text-align    : center ;
    padding-right : 1em ;
}

tabulatecell[align="flushleft"],
div.tabulatecell.align-flushleft {
    display       : table-cell ;
    text-align    : left ;
    padding-right : 1em ;
}

tabulatecell[align="flushright"],
div.tabulatecell.align-flushright {
    display       : table-cell ;
    text-align    : right ;
    padding-right : 1em ;
}

tabulatecell,
div.tabulatecell {
    display       : table-cell ;
    text-align    : left ;
    padding-right : 1em ;
}

tabulatecell[kind="strong"],
div.tabulatecell.kind-strong {
    font-family : TextBold ;
}

tabulatecell[kind="equals"]:before,
div.tabulatecell.kind-equals:before {
    display      : inline-block ;
    clear        : left ;
    margin-left  : -.6em ;
    width        : .6em ;
    content      : ":" ;
}

/*

    A combination needs some processing because it is not a table yet. So, the next
    mapping is just one row! The tags are a bit confusing now.

*/

/* combination        : display */
/* combinationpair    : display */
/* combinationcontent : mixed   */
/* combinationcaption : mixed   */

/*
combination,
div.combination {
    display       : table ;
    margin-top    : 0em ;
    margin-bottom : 0em ;
}

combinationpair, combinationtext,
div.combinationpair, div.combinationtext {
    display       : table-cell ;
    padding-right : 1em ;
}

combinationcontent,
div.combinationcontent {
    display    : table-row ;
    text-align : center ;
}

combinationcaption,
div.combinationcaption {
    display     : table-row ;
    padding-top : 1ex ;
    text-align  : center ;
}

*/

combination {
    display       : grid ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    column-gap    : 1em ;
    row-gap       : 1ex ;
    align-items   : baseline ;
}

combinationpair, combinationtext,
div.combinationpair, div.combinationtext {
    display               : grid ;
    grid-template-columns : repeat(1, min-content) ;
}

combination[nx="1"] { grid-template-columns : repeat(1, min-content) ; }
combination[nx="2"] { grid-template-columns : repeat(2, min-content) ; }
combination[nx="3"] { grid-template-columns : repeat(3, min-content) ; }
combination[nx="4"] { grid-template-columns : repeat(4, min-content) ; }
combination[nx="5"] { grid-template-columns : repeat(5, min-content) ; }
combination[nx="6"] { grid-template-columns : repeat(6, min-content) ; }
combination[nx="7"] { grid-template-columns : repeat(7, min-content) ; }
combination[nx="8"] { grid-template-columns : repeat(8, min-content) ; }

combinationcontent,
div.combinationcontent {
    /* maybe only grid when an image */
    display     : block ;
    text-align  : center ;
    xdisplay         : grid ;
    xjustify-content : center ;
}

combinationcaption,
div.combinationcaption {
    display     : block ;
    padding-top : 1ex ;
    text-align  : center ;
}

/* list        : display */
/* listitem    : display */
/* listtag     : mixed   */
/* listcontent : mixed   */
/* listdata    : mixed   */
/* listpage    : mixed   */
/* listtext    : inline   */

list,
div.list {
    display    : block ;
    text-align : left ;
}

listitem[detail="chapter"],
div.listitem.chapter {
    display     : block ;
    margin-top  : 1em ;
    margin-left : 5em ;
    font-family : TextBold ;
}

listitem[detail="section"],
div.listitem.section {
    display     : block ;
    margin-left : 5em ;
}

listitem[detail="subsection"],
div.listitem.subsection {
    display     : block ;
    margin-left : 5em ;
}

/*
listitem[detail="subsection"],
div.listitem.subsection {
    display     : inline-block ;
    margin-left : -5em ;
}

listitem[detail="subsection"]>listtag,
div.listitem.subsection div.listtag {
    margin-right : 1em ;
}
*/

listitem[detail="chapter"]>listtag,
div.listitem.chapter > div.listtag {
    display     : inline-block ;
    margin-left : -5em ;
    float       : left ;
    clear       : left ;
}

listitem[detail="section"]>listtag,
div.listitem.section > div.listtag {
    display     : inline-block ;
    margin-left : -5em ;
    float       : left ;
    clear       : left ;
}

listitem[detail="subsection"]>listtag,
div.listitem.subsection > div.listtag {
    display      : inline-block ;
    margin-left : -5em ;
    float        : left ;
    clear        : left ;
}

listcontent,
div.listcontent {
    display : inline ;
}

listdata,
div.listdata {
    display : inline ;
}

listpage,
div.listpage {
    display : none ;
}

listtext,
div.listtext {
    display : inline ;
}

/* delimitedblock     : display */
/* delimited          : inline  */
/* delimitedsymbol    : inline  */
/* delimitedcontent   : inline  */
/* subsentence        : inline  */
/* subsentencesymbol  : inline  */
/* subsentencecontent : inline  */

/* :lang(en) */

delimited[detail="quotation"]:before,
delimitedblock[detail="quotation"]:before,
div.delimited.quotation:before,
div.delimitedblock.quotation:before {
    /* content : "\201C" ; */
    font-style : italic ;
}

delimited[detail="quotation"]:after,
delimitedblock[detail="quotation"]:after,
div.delimited.quotation:after,
div.delimitedblock.quotation:after {
    /* content : "\201D" ; */
    font-style : italic ;
}

delimited[detail="quote"]:before,
delimitedblock[detail="quote"]:before,
div.delimited.quote:before,
div.delimitedblock.quote:before {
    /* content : "\2018" ; */
    font-style : italic ;
}

delimited[detail="quote"]:after,
delimitedblock[detail="quote"]:after,
div.delimited.quote:after,
div.delimitedblock.quote:after {
    /* content : "\2019" ; */
    font-style : italic ;
}

delimited,
div.delimited {
    display : inline ;
}

delimitedcontent,
div.delimitedcontent {
    display : inline ;
}

delimitedsymbol,
div.delimitedsymbol {
    display : inline ;
}

delimitedblock,
div.delimitedblock {
    display       : block ;
    margin-bottom : 0.5em ;
    margin-top    : 0.5em ;
}

subsentence:before,
subsentence:after,
div.subsentence:before,
div.subsentence:after {
    content : "\2014" ;
}

subsentence,
div.subsentence {
    display : inline ;
}

subsentencecontent,
div.subsentencecontent {
    display : inline ;
}

subsentencesymbol,
div.subsentencesymbol {
    display : inline ;
}

/* narrower : display */

narrower,
div.narrower {
    display       : block ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
    margin-right  : 2.5em ;
}

/* label  : mixed   */
/* number : mixed   */

/* float        : display */
/* floatcaption : mixed   */
/* floatlabel   : inline  */
/* floatnumber  : inline  */
/* floattext    : mixed   */
/* floatcontent : mixed   */

float,
div.float {
    display       : block ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
}

floatcaption,
div.floatcaption {
    display    : block ;
    margin-top : 0.5em ;
    color      : rgb(60%,60%,0%) ;
}

floatlabel,
div.floatlabel {
    display      : inline-block ;
    font-family  : TextBold ;
    margin-right : 0.25em ;
}

floatnumber,
div.floatnumber {
    display      : inline ;
    font-family  : TextBold ;
    margin-right : 0.25em ;
}

floattext,
div.floattext {
    display      : inline ;
}

floatcontent,
div.floatcontent {
}

/* image     : mixed */
/* mpgraphic : mixed */

/* image {
    display         : block ;
    background      : url(hacker.jpg) ;
    background-size : 100% auto ;
    width           : 8.992cm ;
    height          : 5.994cm ;
} */

mpgraphic:before,
div.mpgraphic:before {
    /* does not work with empty element */
    content : "[runtime metapost graphic]" ;
}

mpgraphic,
div.mpgraphic {
    display : inline ;
}

/* formula        : display */
/* subformula     : display */
/* formulaset     : display */
/* formulacaption : mixed   */
/* formulalabel   : mixed   */
/* formulanumber  : mixed   */
/* formulacontent : display */

formula,
div.formula {
   xdisplay      : block ;
    display       : table ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
}

subformula,
div.subformula { /* todo */
    display       : block ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
}

formulaset,
div.formulaset { /* todo */
    display       : block ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
    margin-left   : 2.5em ;
}

formulacaption,
div.formulacaption { /* todo */
    xdisplay     : block ;
    display      : table-cell ;
    margin-top   : 0.5em ;
    padding-left : 2em ;
    color        : rgb(60%,60%,0%) ;
}

formulalabel,
div.formulalabel {
    display      : inline ;
    font-family  : TextBold ;
    margin-right : .25em ;
}

formulanumber,
div.formulanumber {
    display     : inline ;
    font-family : TextBold ;
    margin-left : 0em ;
}

formulacontent,
div.formulacontent {
    xdisplay    : block ;
    display     : table-cell ;
    margin-left : 0em ;
}

link,
div.link {
    display : inline ;
}

/* margintextblock : inline  */
/* margintext      : inline  */

margintext,
div.margintext {
    display       : block ;
    font-family   : TextBold ;
    margin-top    : 1em ;
    margin-bottom : 1em ;
}

margintext:before,
div.margintext:before {
    content : "\25B6\00A0\00A0" ;
    color   : rgb(40%,40%,40%) ;
}

/*
    The mathml core specification has an example of annotated mathml and suggest to only show
    the first child saying that    "typically, the <semantics> element has as its first child
    element a mathml expression to be annotated" and it's "typically" that we don't like here.
    So we go for a different solution than suggested.

    Unfortunately we cannot set the math style on an element and have to go via a
    class (or set the style attribute).
*/

math > semantics > annotation-xml,
math > semantics > annotation {
  display: none ;
}

div.math-inline {
    display        : inline math ;
    vertical-align : 0 ; /* this will be set directly */
    math-style     : compact ;
}

div.math-display {
    display    : block math ;
    margin     : 1ex 0ex 1em 3em ;
    math-style : normal ;
}

.math_display_style {
    math-style  : normal ;
 /* scriptlevel : 0 ; */
}
.math_text_style {
    math-style  : compact ;
 /* scriptlevel : 0 ; */
}
.math_script_style {
    math-style  : compact ;
 /* scriptlevel : 1 ; */
}
.math_script_script_style {
    math-style  : compact ;
 /* scriptlevel : 2 ; */
}

/* publication : inline */
/* pubfld      : inline */

publication,
div.publication {
    display : inline ;
}

pubfld[detail="title"],
div.pubfld.title {
    display     : inline ;
    font-family : TextItalic ;
}

/* quantity : inline */
/* unit     : inline */
/* number   : inline */

quantity,
div.quantity {
    display : inline-block ;
}

quantity>unit,
div.quantity>div.unit {
    display : inline ;
}

quantity>number,
div.quantity>div.number {
    display : inline ;
}

/* sub    : inline */
/* sup    : inline */
/* subsup : inline */

sup,
div.sup {
    display        : inline-block ;
    font-size      : xx-small ;
    vertical-align : super ;
}

sub,
div.sub {
    display        : inline-block ;
    font-size      : xx-small ;
    vertical-align : sub ;
}

subsup>sup,
div.subsup>div.sup {
    display        : inline ;
    vertical-align : top ;
}

subsup>sub,
div.subsup>div.sub {
    display        : inline ;
    vertical-align : bottom ;
}

/* links */

div[href]:hover {
    color            : rgb(50%,0%,0%) ;
    background-color : rgb(85%,85%,85%) ;
}

/* setups */

setup,
div.setup {
    display : block ;
}

comment,
div.comment {
    background-color : rgb(50%,75%,100%) ;
    display          : block ;
    padding          : 1em ;
    margin-bottom    : 2ex ;
    margin-top       : 2ex ;
    font-family      : Mono ;
    font-style       : normal ;
}

/* textdisplay */

textdisplay,
div.textdisplay {
    display       : block ;
    margin-bottom : 2ex ;
    margin-top    : 2ex ;
}

/* blocks */

block,
div.block {
    display : block ;
}

/* special */

c,
div.c {
    display : inline ;
}

warning,
div.warning {
    display : none ;
}