.additional-info, .caveat {
    color: CornflowerBlue;
    font-size: smaller;
    font-style: italic;
    }

.additional-info em {
    font-style: normal;
    }

.caveat {
    color: medium-orchid;
    border-bottom-style: dashed;
    border-bottom-color: rgba(0,0,0, 0.2);
    }

.foreign { font-style: italic; }
[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(0,0,0, 0.25);
    /* Also, dotted-underline doesn't appear for italic text?? */
    }
.attn {
    text-decoration-style: dotted;
    // text-decoration: underline;
    font-weight: bold;
    color: LimeGreen;
    }

p.subtitle {
    font-size: smaller;
    text-align: center;
    }

.title {
    text-align: center;
    }

q {
  quotes: "“" "”" "‘" "’" "«" "»" "‹" "›";
}

kbd {
    border-style : dashed;
    border-width : 1px;
    font-size: smaller;
    padding-top: 5px;
    padding: 2px;
    }


.bnf, .bnf-nonterminal {  /* I should go deprecate class 'bnf', in my own work.  */
    color: CornflowerBlue;
    }
.bnf-nonterminal {
    font-style: italic;
    }
.bnf-terminal {
    font-style: normal;
    color: black;
    font-weight: 600;  /* 400=normal, 700=bold.     only in increments of 100?  min is 100?, max is 900? ? */
    }
.bnf-keyword { /* for bnf's own syntax (that is, the meta-syntax):   `::=`, `|` */
    color: sienna;
    }

.filename {
    /* font-family:'Consolas','Menlo','Andale Mono','Lucidatypewriter','PT Mono','Lucida Console','Courier New',monospace; */
    font-family: monospace;
    /* as per http://stackoverflow.com/questions/4062001/css3-border-opacity */
    border-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: rgba(0,0,0, 0.2);
    background-clip: padding-box;  /* 'ensure that the border remains transparent even on a solid background' ?? */
    }

kbd kbd {
    border-style: none;
    border-width : 1px;
    }

samp kbd {
    /* When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.
     * -- see http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element 
     */
    border-style: none;
    border-width : 1px;
    font-style: italic;
    font-weight: bold;
    color: blue;
    }

kbd samp { 
    /* samp inside kbd means "[user] input based on system output, for example invoking a menu item."
     * -- see http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element 
     * I'm presuming they mean anywhere inside (not just an immediate child),
     * since you might have a kbd containing a `p` tag or `br` or ...?
     */
    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: smaller;
    border-style : none;
    border-width : 1px;
    padding: 2px;
    }

samp .non-tt {  /* This is probably incorrect selecter (I want: `samp` elements whose `class` attribute includes 'non-tt'). */
    font-family: sans-serif;
    font-style: oblique;
    color: darkBlue;
    /* border-width: 1px; */
    /* border-bottom-style: dashed; */
    /* border-bottom-color: rgba(0,0,0, 0.2); */
    }

.boxed {
    border: 1px solid blue; 
    margin: 3px;
    }

em em {
    font-style: normal;
    font-weight: 550;  /* N.B.  normal = 400; bold = 700 */
    }

em em em {
    font-style: italic;
    }

dl { border: 3px double #ccc;  padding: 0.5em; }
dt { float: left;
     clear: left;
     width: 100px;
     text-align: right;
     font-weight: bold;
     /* color: green; */
     }
dt::after { content: ":"; }
dd { margin:  0 0 0     110px;
     padding: 0 0 0.5em 0; }



good, .good {
    color: SeaGreen;
    text-decoration-style: wavy;
    text-decoration: underline;
    }

bad, .bad {
    color: firebrick;
    text-decoration-style: wavy;
    text-decoration: underline;
    opacity: 0.5;
    }

ins, .ins {
    color: SeaGreen;
    text-decoration: none;
    font-style: italic;
    }
del, .del {
    color: firebrick;
    text-decoration: line-through;
    font-size: smaller;
    opacity: 0.5;
    }

.pre {
    white-space: pre;
    font-family: monospace;
    }


.nav-bar {
    font-size: x-small; 
    font-family: sans-serif; 
    color: black; 
    text-align: center;
    margin-left:0px;
    }

.footnote-section {
    /* at the start of 1+ footnotes */
    font-size: smaller;  /* hack: smaller here, *and* in each footnote, to effect 2-steps smaller. */
    }

.footnote {
    font-size: smaller;
    }
.footnote-mark {
    font-size: 70%;
    }

.solution {
    color: DarkGreen;
    }

code, .code-inline {
    font-family: 'NK57 Monospace Condensed', NK57, Hack, 'Roboto Mono', 'Bitstream Vera Sans Mono', Consolas, Menlo, 'PT Mono', 'Courier New', 'Andale Mono', Monaco, LucidaTypewriter, Inconsolata, monospace;
                 /* Include some obscure fonts early in the list, on the theory that if the user has them installed at all, they're preferred? */
    background-color: #EAEACA;
    }
.code-block {
    background-color: #E0E0A0;
    border: 0px;
    }

code var {
    font-style: italic;
    color: blue;
    }

table {
    border-collapse: collapse;
    }
/*
table, td, th {
    border: 1px solid black;
    }
*/
.numeric td, td.numeric {   /* if a table/row is `class="numeric"`, thdn put td as right-aligned. */
    text-align: right;
    }



.de-emph {
    opacity: 0.3;
    }

/* For hspace: 
    <span style="padding-left: 30em;"/>
    ('width' doesn't work for in-line elements)
    Though: - one 'em' seems to be about 2x as wide as a letter "m"! [chrome]
            - setting the other paddings to 0 doesn't seem to change anything.

    A different hack, : `img height="30px"` -- but (a) circumventing css; (b) only 'px' allowed
    for the value, in html5.
*/

/* For vspace: padding-top, but that only works for block elements.
   So for in-line vertical spacer, use `<img height="20px" alt="vertical-spacer (no actual image)"/>`
   However, 'px' is only supported unit (and, we're using html instead of css).

   inline-block doesn't seem to work: `<span style="display: inline-block;"/>` adds a line-break
   line-height doesn't work on spans -- seems to be for block elements I guess.
*/

     /* css tooltip sample is from:  http://www.menucool.com/    */
     /** TODO: don't have tooltip restrict to a span;
               fix the syntax: <a href="#" class="tooltip">  <div class="tooltip"> </div></a>
               or better, pre-process ixml:  <tooltip>blah blah<tip>popup extra info here</tip></tooltip>
      */

    .tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;}
    .tooltip strong {line-height:30px;}
    .tooltip > span /* How to handle a 'span' *inside* something with class "tooltip": */
    {
	    width:200px;
	    padding: 10px 20px;
	    margin-top: 20px;
	    margin-left: -85px;
	    opacity: 0;
	    visibility: hidden;
	    z-index: 10;	   
	    position: absolute;

	    font-family: 'Arial';
	    font-size: 12px;
	    font-style: normal;  
        	    
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -o-border-radius: 3px;
	    border-radius: 3px;
	    
	    
            -webkit-box-shadow: 2px 2px 2px #999;
	    -moz-box-shadow: 2px 2px 2px #999;		
	    box-shadow: 2px 2px 2px #999;	    
	    
	    -webkit-transition-property:opacity, margin-top, visibility, margin-left;
	    -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -moz-transition-property:opacity, margin-top, visibility, margin-left;
	    -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -o-transition-property:opacity, margin-top, visibility, margin-left;
	    -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    transition-property:opacity, margin-top, visibility, margin-left;
	    transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    }
    
    /*a.tooltip > span:hover,*/
	.tooltip:hover > span
	{
		opacity: 1;
		text-decoration:none;
		visibility: visible;
		overflow: visible;
		margin-top:50px;
		display: inline;
		margin-left: -60px;		
	}

	.tooltip span b {
    
		width: 15px;
		height: 15px;
		margin-left: 20px;
		margin-top: -19px;
			
		display: block;
		position: absolute;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
			
		-webkit-box-shadow: inset -1px 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		-o-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;
			
		display: none\0/;
		*display: none;
	}
    
.tooltip > span {
	color: #FFFFFF; 

	background: #333333;
	background: -moz-linear-gradient(top, #333333 0%, #999999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#999999));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );
	    
	border: 1px solid #000000;	     
}    
	  
.tooltip span b {
	background: #333333;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
}