Merge branch 'tmpl' into 'master'

Use simple text templates for CSS

See merge request GNOME/yelp-xsl!4

38 files changed, 2331 insertions, 2009 deletions

diff --git a/.gitignore b/.gitignore
index 1ad147b0..f962399d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ INSTALL
 Makefile
 !/test/**/Makefile
 /test/colors/*.html
+/test/lipsum/html/
 /test/syntax/*.html
 /test/syntax/highlight.pack.js
 Makefile.in
diff --git a/configure.ac b/configure.ac
index b4083651..5470bacc 100644
--- a/configure.ac
+++ b/configure.ac
@@ -63,6 +63,7 @@ doc/yelp-xsl/Makefile
 po/Makefile.in
 xslt/Makefile
 xslt/common/Makefile
+xslt/common/css/Makefile
 xslt/common/domains/Makefile
 xslt/common/icons/Makefile
 xslt/docbook/Makefile
diff --git a/doc/yelp-xsl/C/db2html-css.page b/doc/yelp-xsl/C/db2html-css.page
deleted file mode 100644
index 453b5a52..00000000
--- a/doc/yelp-xsl/C/db2html-css.page
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<page xmlns="http://projectmallard.org/1.0/" type="guide" style="xslt-stylesheet" id="db2html-css">
- <info>
-  <link type="guide" xref="stylesheets" group="db2html"/>
- </info>
- <title>DocBook to HTML - CSS</title>
- <p>REMARK: Describe this module</p>
- <links type="topic" groups="imports" style="linklist">
-  <title>Imports Stylesheets</title>
- </links>
- <links type="topic" groups="includes" style="linklist">
-  <title>Includes Stylesheets</title>
- </links>
- <links type="topic" groups="params" style="linklist">
-  <title>Defines Parameters</title>
- </links>
- <links type="topic" groups="keys" style="linklist">
-  <title>Defines Keys</title>
- </links>
- <links type="topic" groups="templates" style="linklist">
-  <title>Defines Templates</title>
- </links>
- <links type="topic" groups="modes" style="linklist">
-  <title>Defines Modes</title>
- </links>
- <list style="compact">
-  <title>Calls Parameters</title>
-  <item>
-   <p><link xref="color.bg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.yellow"/></p>
-  </item>
-  <item>
-   <p><link xref="color.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.yellow"/></p>
-  </item>
- </list>
- <list style="compact">
-  <title>Calls Templates</title>
-  <item>
-   <p><link xref="l10n.align.end"/></p>
-  </item>
-  <item>
-   <p><link xref="l10n.align.start"/></p>
-  </item>
-  <item>
-   <p><link xref="l10n.direction"/></p>
-  </item>
- </list>
- <table rules="rows">
-  <title>Implements Templates</title>
-  <thead>
-   <tr>
-    <th>
-     <p>Mode</p>
-    </th>
-    <th>
-     <p>Match</p>
-    </th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td>
-     <p><code xref="html.css.mode">html.css.mode</code></p>
-    </td>
-    <td>
-     <p><code>*</code></p>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</page>
diff --git a/doc/yelp-xsl/C/db2html-division.page b/doc/yelp-xsl/C/db2html-division.page
index 2d9dddbb..ca6a5dbd 100644
--- a/doc/yelp-xsl/C/db2html-division.page
+++ b/doc/yelp-xsl/C/db2html-division.page
@@ -81,8 +81,20 @@
    <p><link xref="html.output"/></p>
   </item>
   <item>
+   <p><link xref="l10n.align.end"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.align.start"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.direction"/></p>
+  </item>
+  <item>
    <p><link xref="l10n.gettext"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
  <list style="compact">
   <title>Calls Modes</title>
@@ -241,6 +253,14 @@
    </tr>
    <tr>
     <td>
+     <p><code xref="html.css.mode">html.css.mode</code></p>
+    </td>
+    <td>
+     <p><code>*</code></p>
+    </td>
+   </tr>
+   <tr>
+    <td>
      <p><code xref="html.footer.mode">html.footer.mode</code></p>
     </td>
     <td>
diff --git a/doc/yelp-xsl/C/db2html.page b/doc/yelp-xsl/C/db2html.page
index 947fd00e..7b045616 100644
--- a/doc/yelp-xsl/C/db2html.page
+++ b/doc/yelp-xsl/C/db2html.page
@@ -6,6 +6,7 @@
   <link type="topic" xref="color" group="imports"/>
   <link type="topic" xref="icons" group="imports"/>
   <link type="topic" xref="html" group="imports"/>
+  <link type="topic" xref="tmpl" group="imports"/>
   <link type="topic" xref="utils" group="imports"/>
   <link type="topic" xref="db-chunk" group="imports"/>
   <link type="topic" xref="db-common" group="imports"/>
@@ -17,7 +18,6 @@
   <link type="topic" xref="db2html-callout" group="includes"/>
   <link type="topic" xref="db2html-classsynopsis" group="includes"/>
   <link type="topic" xref="db2html-cmdsynopsis" group="includes"/>
-  <link type="topic" xref="db2html-css" group="includes"/>
   <link type="topic" xref="db2html-division" group="includes"/>
   <link type="topic" xref="db2html-ebnf" group="includes"/>
   <link type="topic" xref="db2html-funcsynopsis" group="includes"/>
diff --git a/doc/yelp-xsl/C/db2xhtml.page b/doc/yelp-xsl/C/db2xhtml.page
index 7966de28..fee1f94f 100644
--- a/doc/yelp-xsl/C/db2xhtml.page
+++ b/doc/yelp-xsl/C/db2xhtml.page
@@ -6,6 +6,7 @@
   <link type="topic" xref="color" group="imports"/>
   <link type="topic" xref="icons" group="imports"/>
   <link type="topic" xref="html" group="imports"/>
+  <link type="topic" xref="tmpl" group="imports"/>
   <link type="topic" xref="utils" group="imports"/>
   <link type="topic" xref="db-chunk" group="imports"/>
   <link type="topic" xref="db-common" group="imports"/>
@@ -17,7 +18,6 @@
   <link type="topic" xref="db2html-callout" group="includes"/>
   <link type="topic" xref="db2html-classsynopsis" group="includes"/>
   <link type="topic" xref="db2html-cmdsynopsis" group="includes"/>
-  <link type="topic" xref="db2html-css" group="includes"/>
   <link type="topic" xref="db2html-division" group="includes"/>
   <link type="topic" xref="db2html-ebnf" group="includes"/>
   <link type="topic" xref="db2html-funcsynopsis" group="includes"/>
diff --git a/doc/yelp-xsl/C/html.css.core.page b/doc/yelp-xsl/C/html.css.core.page
index 374ca1eb..fa25af26 100644
--- a/doc/yelp-xsl/C/html.css.core.page
+++ b/doc/yelp-xsl/C/html.css.core.page
@@ -33,35 +33,11 @@
  common spacings for block-level elements like paragraphs and lists, defines
  styles for links, and defines four common wrapper divs: <sys>header</sys>, <sys>side</sys>,
  <sys>body</sys>, and <sys>footer</sys>.</p>
+ <p>This template uses text templates to keep the actual CSS content in a
+ separate file, <sys>css/core.css.tmpl</sys>, and do simple param substitutions.
+ This makes it easier to update the CSS without working with XSLT.</p>
  <p>All parameters can be automatically computed if not provided.</p>
  <list style="compact">
-  <title>Calls Parameters</title>
-  <item>
-   <p><link xref="color.bg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.purple"/></p>
-  </item>
-  <item>
-   <p><link xref="color.gray"/></p>
-  </item>
- </list>
- <list style="compact">
   <title>Calls Templates</title>
   <item>
    <p><link xref="l10n.align.end"/></p>
@@ -72,5 +48,8 @@
   <item>
    <p><link xref="l10n.direction"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
 </page>
diff --git a/doc/yelp-xsl/C/html.css.elements.page b/doc/yelp-xsl/C/html.css.elements.page
index 8e2a48fd..4da538ff 100644
--- a/doc/yelp-xsl/C/html.css.elements.page
+++ b/doc/yelp-xsl/C/html.css.elements.page
@@ -33,56 +33,11 @@
  the simpler element names from Mallard, although there some class names which
  are not taken from Mallard. Stylesheets which convert to HTML should use the
  appropriate common classes.</p>
+ <p>This template uses text templates to keep the actual CSS content in a
+ separate file, <sys>css/elements.css.tmpl</sys>, and do simple param substitutions.
+ This makes it easier to update the CSS without working with XSLT.</p>
  <p>All parameters can be automatically computed if not provided.</p>
  <list style="compact">
-  <title>Calls Parameters</title>
-  <item>
-   <p><link xref="color.bg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.yellow"/></p>
-  </item>
-  <item>
-   <p><link xref="color.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.yellow"/></p>
-  </item>
-  <item>
-   <p><link xref="icons.size.quote"/></p>
-  </item>
- </list>
- <list style="compact">
   <title>Calls Templates</title>
   <item>
    <p><link xref="l10n.align.end"/></p>
@@ -96,5 +51,8 @@
   <item>
    <p><link xref="l10n.gettext"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
 </page>
diff --git a/doc/yelp-xsl/C/html.css.syntax.page b/doc/yelp-xsl/C/html.css.syntax.page
index 1b95d85d..32cafba7 100644
--- a/doc/yelp-xsl/C/html.css.syntax.page
+++ b/doc/yelp-xsl/C/html.css.syntax.page
@@ -33,40 +33,13 @@
  is broken up into chunks and wrapped in HTML elements with particular classes.
  This template outputs CSS to match those elements and style them with the
  built-in themeable colors from <code xref="color">color</code>.</p>
+ <p>This template uses text templates to keep the actual CSS content in a
+ separate file, <sys>css/syntax.css.tmpl</sys>, and do simple param substitutions.
+ This makes it easier to update the CSS without working with XSLT.</p>
  <p>All parameters can be automatically computed if not provided.</p>
  <list style="compact">
   <title>Calls Parameters</title>
   <item>
-   <p><link xref="color.bg.green"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.green"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.orange"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.purple"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.yellow"/></p>
-  </item>
-  <item>
    <p><link xref="html.syntax.highlight"/></p>
   </item>
  </list>
@@ -81,5 +54,8 @@
   <item>
    <p><link xref="l10n.direction"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
 </page>
diff --git a/doc/yelp-xsl/C/html.page b/doc/yelp-xsl/C/html.page
index 5edd6d26..b148fca8 100644
--- a/doc/yelp-xsl/C/html.page
+++ b/doc/yelp-xsl/C/html.page
@@ -34,66 +34,15 @@
  <list style="compact">
   <title>Calls Parameters</title>
   <item>
-   <p><link xref="color.bg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.dark"/></p>
-  </item>
-  <item>
    <p><link xref="color.bg.gray"/></p>
   </item>
   <item>
-   <p><link xref="color.bg.green"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.yellow"/></p>
-  </item>
-  <item>
-   <p><link xref="color.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.blue"/></p>
-  </item>
-  <item>
    <p><link xref="color.fg.dark"/></p>
   </item>
   <item>
-   <p><link xref="color.fg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.green"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.orange"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.purple"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.yellow"/></p>
-  </item>
-  <item>
    <p><link xref="color.gray"/></p>
   </item>
   <item>
-   <p><link xref="color.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.yellow"/></p>
-  </item>
-  <item>
    <p><link xref="html.basename"/></p>
   </item>
   <item>
@@ -111,9 +60,6 @@
   <item>
    <p><link xref="html.xhtml"/></p>
   </item>
-  <item>
-   <p><link xref="icons.size.quote"/></p>
-  </item>
  </list>
  <list style="compact">
   <title>Calls Templates</title>
@@ -135,6 +81,9 @@
   <item>
    <p><link xref="l10n.gettext"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
  <list style="compact">
   <title>Calls Modes</title>
diff --git a/doc/yelp-xsl/C/mal2html-page.page b/doc/yelp-xsl/C/mal2html-page.page
index ad464d4d..715c39d6 100644
--- a/doc/yelp-xsl/C/mal2html-page.page
+++ b/doc/yelp-xsl/C/mal2html-page.page
@@ -33,48 +33,9 @@
    <p><link xref="color.bg"/></p>
   </item>
   <item>
-   <p><link xref="color.bg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.green"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.orange"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.purple"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.bg.yellow"/></p>
-  </item>
-  <item>
    <p><link xref="color.blue"/></p>
   </item>
   <item>
-   <p><link xref="color.fg"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.blue"/></p>
-  </item>
-  <item>
-   <p><link xref="color.fg.dark"/></p>
-  </item>
-  <item>
-   <p><link xref="color.gray"/></p>
-  </item>
-  <item>
-   <p><link xref="color.red"/></p>
-  </item>
-  <item>
-   <p><link xref="color.yellow"/></p>
-  </item>
-  <item>
    <p><link xref="mal.cache"/></p>
   </item>
   <item>
@@ -167,6 +128,9 @@
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
+  <item>
+   <p><link xref="tmpl.file"/></p>
+  </item>
  </list>
  <list style="compact">
   <title>Calls Modes</title>
diff --git a/doc/yelp-xsl/C/mal2html.page b/doc/yelp-xsl/C/mal2html.page
index 481f2699..ff738cb0 100644
--- a/doc/yelp-xsl/C/mal2html.page
+++ b/doc/yelp-xsl/C/mal2html.page
@@ -7,6 +7,7 @@
   <link type="topic" xref="icons" group="imports"/>
   <link type="topic" xref="html" group="imports"/>
   <link type="topic" xref="ttml" group="imports"/>
+  <link type="topic" xref="tmpl" group="imports"/>
   <link type="topic" xref="utils" group="imports"/>
   <link type="topic" xref="mal-gloss" group="imports"/>
   <link type="topic" xref="mal-if" group="imports"/>
diff --git a/doc/yelp-xsl/C/mal2xhtml.page b/doc/yelp-xsl/C/mal2xhtml.page
index 4ae4d1bc..47b08cab 100644
--- a/doc/yelp-xsl/C/mal2xhtml.page
+++ b/doc/yelp-xsl/C/mal2xhtml.page
@@ -7,6 +7,7 @@
   <link type="topic" xref="icons" group="imports"/>
   <link type="topic" xref="html" group="imports"/>
   <link type="topic" xref="ttml" group="imports"/>
+  <link type="topic" xref="tmpl" group="imports"/>
   <link type="topic" xref="utils" group="imports"/>
   <link type="topic" xref="mal-gloss" group="imports"/>
   <link type="topic" xref="mal-if" group="imports"/>
diff --git a/doc/yelp-xsl/C/tmpl.file.page b/doc/yelp-xsl/C/tmpl.file.page
new file mode 100644
index 00000000..8cfb8206
--- /dev/null
+++ b/doc/yelp-xsl/C/tmpl.file.page
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page xmlns="http://projectmallard.org/1.0/" style="xslt-template" id="tmpl.file">
+ <info>
+  <link type="guide" xref="tmpl" group="templates"/>
+  <link type="guide" xref="templates" group="tmpl"/>
+  <desc>Perform text substitutions on a file.</desc>
+  <revision version="40" date="2020-10-16" status="final"/>
+ </info>
+ <title>tmpl.file</title>
+ <synopsis>
+  <title>Parameters</title>
+  <terms>
+   <item>
+    <title><code>$file</code></title>
+    <p>The filename of the file to process for substitutions.</p>
+   </item>
+   <item>
+    <title><code>$node</code></title>
+    <p>The node to create CSS for.</p>
+   </item>
+   <item>
+    <title><code>$direction</code></title>
+    <p>The directionality of the text, either <sys>ltr</sys> or <sys>rtl</sys>.</p>
+   </item>
+   <item>
+    <title><code>$left</code></title>
+    <p>The starting alignment, either <sys>left</sys> or <sys>right</sys>.</p>
+   </item>
+   <item>
+    <title><code>$right</code></title>
+    <p>The ending alignment, either <sys>left</sys> or <sys>right</sys>.</p>
+   </item>
+  </terms>
+ </synopsis>
+ <p>This template reads the file specified by the <code>$file</code> parameter and performs
+ text substitutions. Due to XSLT limitations, the file must be a well-formed
+ XML document. However, this template simply takes the string value of the
+ document, so it is sufficient to wrap the text in a dummy element and ensure
+ any <sys>&lt;</sys> and <sys>&amp;</sys> characters are escaped.</p>
+ <p>See <code xref="tmpl">tmpl</code> for information on the substitution syntax.</p>
+ <note style="plain">
+  <p>This template was added in version 40.</p>
+ </note>
+ <list style="compact">
+  <title>Calls Templates</title>
+  <item>
+   <p><link xref="l10n.align.end"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.align.start"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.direction"/></p>
+  </item>
+  <item>
+   <p><link xref="tmpl.text"/></p>
+  </item>
+ </list>
+</page>
diff --git a/doc/yelp-xsl/C/tmpl.page b/doc/yelp-xsl/C/tmpl.page
new file mode 100644
index 00000000..f0419a63
--- /dev/null
+++ b/doc/yelp-xsl/C/tmpl.page
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page xmlns="http://projectmallard.org/1.0/" type="guide" style="xslt-stylesheet" id="tmpl">
+ <info>
+  <link type="guide" xref="stylesheets" group="tmpl"/>
+  <desc>Perform simple substitutions in text files.</desc>
+  <revision version="40" date="2020-10-16" status="final"/>
+ </info>
+ <title>Text Templates</title>
+ <p>This stylesheet contains templates to perform simple substitutions on text
+ and files containing text. The primary purpose of these templates is to allow
+ CSS and JavaScript to be maintained in separate files outside the XSLT, but
+ still allow those files to reference variables for things like color themes
+ and text directionality.</p>
+ <p>The substitution evaluates anything between <sys>{{</sys> and <sys>}}</sys>. Usually, this will
+ be a reference to a parameter or variable, but it can be any XPath expression.
+ For example, <sys>{{$color.fg}}</sys> will be replaced with the primary text color.</p>
+ <p>This syntax is similar to XSLT attribute value templates, except that it uses
+ double curly braces to avoid conflicts with the many curly braces used in CSS
+ and JavaScript files.</p>
+ <note style="plain">
+  <p>This stylesheet was added in version 40.</p>
+ </note>
+ <links type="topic" groups="imports" style="linklist">
+  <title>Imports Stylesheets</title>
+ </links>
+ <links type="topic" groups="includes" style="linklist">
+  <title>Includes Stylesheets</title>
+ </links>
+ <links type="topic" groups="params" style="linklist">
+  <title>Defines Parameters</title>
+ </links>
+ <links type="topic" groups="keys" style="linklist">
+  <title>Defines Keys</title>
+ </links>
+ <links type="topic" groups="templates" style="linklist">
+  <title>Defines Templates</title>
+ </links>
+ <links type="topic" groups="modes" style="linklist">
+  <title>Defines Modes</title>
+ </links>
+ <list style="compact">
+  <title>Calls Templates</title>
+  <item>
+   <p><link xref="l10n.align.end"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.align.start"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.direction"/></p>
+  </item>
+ </list>
+</page>
diff --git a/doc/yelp-xsl/C/tmpl.text.page b/doc/yelp-xsl/C/tmpl.text.page
new file mode 100644
index 00000000..375e9ece
--- /dev/null
+++ b/doc/yelp-xsl/C/tmpl.text.page
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page xmlns="http://projectmallard.org/1.0/" style="xslt-template" id="tmpl.text">
+ <info>
+  <link type="guide" xref="tmpl" group="templates"/>
+  <link type="guide" xref="templates" group="tmpl"/>
+  <desc>Perform text substitutions on some text.</desc>
+  <revision version="40" date="2020-10-16" status="final"/>
+ </info>
+ <title>tmpl.text</title>
+ <synopsis>
+  <title>Parameters</title>
+  <terms>
+   <item>
+    <title><code>$text</code></title>
+    <p>The text to process for substitutions.</p>
+   </item>
+   <item>
+    <title><code>$node</code></title>
+    <p>The node to create CSS for.</p>
+   </item>
+   <item>
+    <title><code>$direction</code></title>
+    <p>The directionality of the text, either <sys>ltr</sys> or <sys>rtl</sys>.</p>
+   </item>
+   <item>
+    <title><code>$left</code></title>
+    <p>The starting alignment, either <sys>left</sys> or <sys>right</sys>.</p>
+   </item>
+   <item>
+    <title><code>$right</code></title>
+    <p>The ending alignment, either <sys>left</sys> or <sys>right</sys>.</p>
+   </item>
+  </terms>
+ </synopsis>
+ <p>This template performs text substitutions on the text in <code>$text</code>. It is called
+ by <code xref="tmpl.file">tmpl.file</code>, and it calls itself recursively after each substitution.</p>
+ <p>See <code xref="tmpl">tmpl</code> for information on the substitution syntax.</p>
+ <note style="plain">
+  <p>This template was added in version 40.</p>
+ </note>
+ <list style="compact">
+  <title>Calls Templates</title>
+  <item>
+   <p><link xref="l10n.align.end"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.align.start"/></p>
+  </item>
+  <item>
+   <p><link xref="l10n.direction"/></p>
+  </item>
+  <item>
+   <p><link xref="tmpl.text"/></p>
+  </item>
+ </list>
+</page>
diff --git a/test/lipsum/README b/test/lipsum/README
new file mode 100755
index 00000000..e79538c7
--- /dev/null
+++ b/test/lipsum/README
@@ -0,0 +1,26 @@
+#!/bin/sh
+# This document is intended to test out different style changes on
+# Mallard documents. If you need to test things not in this document,
+# feel free to add stuff to this document. You can use lipsum.com
+# to generate text.
+#
+# To try things out, just make changes directly to the files in your
+# checkout of yelp-xsl. You don't have to build or install your copy
+# of yelp-xsl. Just build this preview document. To build this preview
+# document, just run this README. You do need yelp-tools installed
+# for the yelp-build command. It's in your distro's packages, and you
+# might have it installed already anyway.
+#
+# ./README
+
+yelp-build cache *.page
+if [ ! -d html ]; then mkdir html; fi
+cp ../../js/highlight.pack.js html/
+for page in *.page; do
+    xsltproc \
+        --stringparam mal.cache.file index.cache \
+        -o html/ \
+        ../../xslt/mallard/html/mal2html.xsl \
+        $page;
+done
+rm index.cache
diff --git a/test/lipsum/index.page b/test/lipsum/index.page
new file mode 100644
index 00000000..887faf39
--- /dev/null
+++ b/test/lipsum/index.page
@@ -0,0 +1,43 @@
+<page xmlns="http://projectmallard.org/1.0/"
+      type="guide"
+      id="index">
+  <info>
+    <credit type="author copyright">
+      <name>Shaun McCance</name>
+      <email>shaunm@redhat.com</email>
+      <years>2020</years>
+    </credit>
+
+    <desc>This is the index page, whence all other pages link.</desc>
+
+    <revision date="2020-10-16" status="review"/>
+  </info>
+
+  <title>Lorem ipsum</title>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Morbi mauris ipsum, varius quis hendrerit eleifend, lobortis ac risus.
+  In congue ac nunc id luctus.
+  Nullam tincidunt, ligula id consequat ullamcorper, risus erat volutpat augue, ut sagittis dui erat vitae lacus.
+  Curabitur aliquam ut urna sed molestie. Integer non fringilla dui.
+  Donec at elit id tortor lacinia sollicitudin ut non ligula.
+  Vestibulum in pretium ligula. Cras dignissim nisl ligula, non semper diam lobortis sit amet.
+  Donec cursus sollicitudin velit, at vulputate enim.</p>
+
+  <links type="topic">
+    <title>Regular links</title>
+  </links>
+
+  <links type="topic" style="2column">
+    <title>Two-column links</title>
+  </links>
+
+  <links type="topic" style="linklist">
+    <title>Link list</title>
+  </links>
+
+  <links type="topic" style="button">
+    <title>Link buttons</title>
+  </links>
+
+</page>
diff --git a/test/lipsum/note1.page b/test/lipsum/note1.page
new file mode 100644
index 00000000..4aed9b47
--- /dev/null
+++ b/test/lipsum/note1.page
@@ -0,0 +1,136 @@
+<page xmlns="http://projectmallard.org/1.0/"
+      type="topic" style="concept"
+      id="note1">
+  <info>
+    <credit type="author copyright">
+      <name>Shaun McCance</name>
+      <email>shaunm@redhat.com</email>
+      <years>2020</years>
+    </credit>
+
+    <desc>Note some notes. Tip some tips. Warn some warnings.</desc>
+
+    <link type="guide" xref="index"/>
+  </info>
+
+  <title>Notes of a feather</title>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Morbi mauris ipsum, varius quis hendrerit eleifend, lobortis ac risus.
+  In congue ac nunc id luctus.</p>
+
+  <note>
+    <p>Nullam tincidunt, ligula id consequat ullamcorper, risus erat volutpat.
+    Curabitur aliquam ut urna sed molestie. Integer non fringilla dui.</p>
+  </note>
+
+  <p>Ut viverra facilisis dui, et pharetra nibh volutpat et.
+  Nunc vitae ante ac nulla convallis tristique eu sit amet leo.
+  Cras et turpis eu erat fermentum porttitor.</p>
+
+  <note style="sidebar">
+    <p>Donec euismod, nibh quis consequat pellentesque, urna ligula sollicitudin tortor,
+    eu vestibulum libero enim eget metus. Maecenas in iaculis sem.
+    Aenean dignissim pretium metus, eget pharetra neque ultrices et.</p>
+
+    <p>Donec nec diam in eros eleifend pretium ut id dolor.
+    Quisque ut felis enim. Sed tincidunt risus eu feugiat semper.
+    Aliquam malesuada ligula ligula, ac consequat erat mattis efficitur.</p>
+  </note>
+
+
+  <note style="advanced">
+    <title>Advanced</title>
+    <p>Donec dictum tortor lorem, ut mattis est suscipit dapibus.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Etiam feugiat mi semper mattis rhoncus. Sed laoreet convallis pharetra.
+    Cras semper nulla sit amet nulla dapibus finibus.</p>
+  </note>
+
+  <p>Vestibulum interdum ipsum a faucibus lacinia.
+  Mauris et sem ultrices, ornare velit et, rutrum nisi.</p>
+
+  <note style="bug">
+    <title>Bug</title>
+    <p>Proin bibendum neque nec egestas sodales.
+    Curabitur mattis sapien vitae justo pellentesque eleifend.
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+    Nulla commodo aliquam enim.</p>
+  </note>
+
+  <p>Cras sit amet ultrices ligula. Donec mattis tincidunt ex ac ullamcorper.
+  Etiam pharetra dignissim ligula, vel tincidunt nisi hendrerit ut.</p>
+
+  <note style="caution">
+    <title>Caution</title>
+    <p>Proin bibendum neque nec egestas sodales.
+    Curabitur mattis sapien vitae justo pellentesque eleifend.
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+    Nulla commodo aliquam enim.</p>
+  </note>
+
+  <p>Ut viverra facilisis dui, et pharetra nibh volutpat et.
+  Nunc vitae ante ac nulla convallis tristique eu sit amet leo.
+  Cras et turpis eu erat fermentum porttitor.</p>
+
+  <note style="danger">
+    <title>Danger</title>
+    <p>Maecenas posuere urna odio, at congue quam imperdiet a.
+    Suspendisse vulputate sed quam in luctus.
+    Fusce hendrerit scelerisque dui eget faucibus.
+    Vivamus at augue molestie enim lacinia finibus eget a metus.
+    Curabitur non urna neque.</p>
+  </note>
+
+  <p>Cras sit amet ultrices ligula. Donec mattis tincidunt ex ac ullamcorper.
+  Etiam pharetra dignissim ligula, vel tincidunt nisi hendrerit ut.</p>
+
+  <note style="important">
+    <title>Important</title>
+    <p>Etiam eleifend fringilla elementum. Vivamus ac dapibus dui.</p>
+
+    <p>Phasellus et sem eget libero tempus porta at vitae urna.
+    Vestibulum id mauris auctor, tempus risus efficitur, lobortis libero.
+    In dui est, ornare at suscipit non, aliquam eu nulla.</p>
+  </note>
+
+  <p>Pellentesque viverra tincidunt pretium.
+  Sed molestie dui metus, nec imperdiet nulla accumsan nec.
+  Ut consectetur tristique mauris, id rhoncus leo commodo eget.</p>
+
+  <note style="plain">
+    <title>Plain</title>
+    <p>Maecenas posuere urna odio, at congue quam imperdiet a.
+    Suspendisse vulputate sed quam in luctus.
+    Fusce hendrerit scelerisque dui eget faucibus.
+    Vivamus at augue molestie enim lacinia finibus eget a metus.
+    Curabitur non urna neque.</p>
+  </note>
+
+  <p>Ut viverra facilisis dui, et pharetra nibh volutpat et.
+  Nunc vitae ante ac nulla convallis tristique eu sit amet leo.
+  Cras et turpis eu erat fermentum porttitor.</p>
+
+  <note style="tip">
+    <title>Tip</title>
+    <p>Donec dictum tortor lorem, ut mattis est suscipit dapibus.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Etiam feugiat mi semper mattis rhoncus. Sed laoreet convallis pharetra.
+    Cras semper nulla sit amet nulla dapibus finibus.</p>
+  </note>
+
+  <p>Vestibulum interdum ipsum a faucibus lacinia.
+  Mauris et sem ultrices, ornare velit et, rutrum nisi.</p>
+
+  <note style="warning">
+    <title>Warning</title>
+    <p>Proin bibendum neque nec egestas sodales.
+    Curabitur mattis sapien vitae justo pellentesque eleifend.
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+    Nulla commodo aliquam enim.</p>
+  </note>
+
+  <p>Ut viverra facilisis dui, et pharetra nibh volutpat et.
+  Nunc vitae ante ac nulla convallis tristique eu sit amet leo.
+  Cras et turpis eu erat fermentum porttitor.</p>
+</page>
diff --git a/test/lipsum/task1.page b/test/lipsum/task1.page
new file mode 100644
index 00000000..684bb07a
--- /dev/null
+++ b/test/lipsum/task1.page
@@ -0,0 +1,34 @@
+<page xmlns="http://projectmallard.org/1.0/"
+      type="topic" style="task"
+      id="task1">
+  <info>
+    <credit type="author copyright">
+      <name>Shaun McCance</name>
+      <email>shaunm@redhat.com</email>
+      <years>2020</years>
+    </credit>
+
+    <desc>Perform the first action with gusto.</desc>
+
+    <link type="guide" xref="index"/>
+  </info>
+
+  <title>The first task</title>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Morbi mauris ipsum, varius quis hendrerit eleifend, lobortis ac risus.
+  In congue ac nunc id luctus.</p>
+
+  <steps>
+    <item><p>Nullam tincidunt, ligula id consequat ullamcorper, risus erat volutpat.</p></item>
+    <item><p>Curabitur aliquam ut urna sed molestie. Integer non fringilla dui.</p></item>
+    <item>
+      <p>Donec at elit id tortor lacinia sollicitudin ut non ligula.</p>
+      <list>
+        <item><p>Vestibulum in pretium ligula.</p></item>
+        <item><p>Cras dignissim nisl ligula, non semper diam lobortis sit amet.</p></item>
+      </list>
+    </item>
+    <item><p>Donec cursus sollicitudin velit, at vulputate enim.</p></item>
+  </steps>
+</page>
diff --git a/xslt/common/Makefile.am b/xslt/common/Makefile.am
index 33ab76c9..60230754 100644
--- a/xslt/common/Makefile.am
+++ b/xslt/common/Makefile.am
@@ -1,4 +1,4 @@
-SUBDIRS = domains icons
+SUBDIRS = css domains icons
 
 xsldir=$(datadir)/yelp-xsl/xslt/common
 
@@ -8,6 +8,7 @@ xsl_DATA =			\
 	l10n.xsl		\
 	l10n-numbers.xsl	\
 	html.xsl		\
+	tmpl.xsl		\
 	ttml.xsl		\
 	utils.xsl
 
diff --git a/xslt/common/css/Makefile.am b/xslt/common/css/Makefile.am
new file mode 100644
index 00000000..de375bd4
--- /dev/null
+++ b/xslt/common/css/Makefile.am
@@ -0,0 +1,8 @@
+cssdir=$(datadir)/yelp-xsl/xslt/common/css
+
+css_DATA =			\
+	core.css.tmpl		\
+	elements.css.tmpl	\
+	syntax.css.tmpl
+
+EXTRA_DIST=$(css_DATA)
diff --git a/xslt/common/css/README b/xslt/common/css/README
new file mode 100644
index 00000000..e79f97b3
--- /dev/null
+++ b/xslt/common/css/README
@@ -0,0 +1,21 @@
+These are the CSS text template files used by these XSLT stylesheets.
+They are maintained in separate files to make it easier to work on them.
+You can call variables or XPath expression with double curly braces {{$like_this}}.
+Variables are defined in the XSLT files.
+
+Because of limitations in XSLT, these files do have to be well-formed XML,
+even though we only ever use the text value.
+That means they have to be wrapped in an XML element,
+and any < and & characters have to be escaped as &lt; and &amp;, respectively.
+
+Here's what each file is:
+
+* core.css.tmpl     - The core CSS for general page layout
+* elements.css.tmpl - CSS for element styles common to multiple formats
+* syntax.css.tmpl   - CSS for syntax highlighting, using highlight.js
+* mallard.css.tmpl  - CSS for element styles specific to Mallard
+* docbook.css.tmpl  - CSS for element styles specific to DocBook
+
+The easiest way to test your changes to these files is with the lipsum test document,
+found under test/lipsum from the root of this repository.
+That directory has a README that explains how to use it to test changes.
diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl
new file mode 100644
index 00000000..daede214
--- /dev/null
+++ b/xslt/common/css/core.css.tmpl
@@ -0,0 +1,241 @@
+<tmpl>
+html { height: 100%; }
+body {
+  font-family: sans-serif;
+  margin: 0; padding: 0;
+  background-color: {{$color.bg}};
+  color: {{$color.fg}};
+  direction: {{$direction}};
+}
+article, aside, nav, header, footer, section {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+main {
+  display: flex;
+  flex-flow: row;
+}
+main > * {
+  flex: 0 0 220px;
+}
+main > div.page {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  min-height: 100vh;
+}
+div.page > article { flex: 1 0 auto; }
+div.page > header, div.page > footer { flex: 0 1 auto; }
+.pagewide {
+  max-width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+aside.sidebar {
+  width: 300px;
+  padding: 20px 10px;
+  background: {{$color.bg.gray}}
+}
+aside.sidebar-right { order: 3; }
+aside.sidebar section { margin-top: 0; }
+aside.sidebar * { margin-bottom: 20px; }
+aside.sidebar section > div.inner > div.hgroup {
+  border-bottom: none;
+}
+aside.sidebar section h2 {
+  font-size: 1em;
+  margin-bottom: 0;
+}
+article {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 20em;
+  background-color: {{$color.bg}};
+}
+section {
+  margin-top: 2.4em;
+  clear: both;
+}
+section section {
+  margin-top: 1.44em;
+}
+.yelp-hash-highlight {
+  animation-name: yelp-hash-highlight;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-hash-highlight {
+  from { transform: translateY(0px) }
+  25%  { transform: translateY(20px); }
+  50%  { transform: translateY(0); }
+  75%  { transform: translateY(10px); }
+  to   { transform: translateY(0px); }
+}
+div.trails {
+  margin: 0 -10px 0 -10px;
+  padding: 0.2em 10px;
+  background-color: {{$color.bg.gray}};
+}
+div.trail {
+  margin: 0.2em 0;
+  padding: 0 1em 0 1em;
+  text-indent: -1em;
+  color: {{$color.fg.dark}};
+}
+a.trail { white-space: nowrap; }
+div.hgroup {
+  margin-bottom: 0.5em;
+  color: {{$color.fg.dark}};
+}
+section > div.inner > div.hgroup {
+  margin-top: 0;
+  border-bottom: solid 1px {{$color.gray}};
+}
+section.links > div.inner > div.hgroup {
+  border-bottom: solid 2px {{$color.fg.blue}};
+}
+section section.links > div.inner > div.hgroup {
+  border: none;
+}
+h1, h2, h3, h4, h5, h6, h7 {
+  margin: 0; padding: 0;
+  font-weight: normal;
+}
+h1 { font-size: 2.4em; }
+h2 { font-size: 1.72em; }
+h3.title, h4.title, h5.title, h6.title, h7.title { font-size: 1.44em; }
+h3, h4, h5, h6, h7 { font-size: 1em; }
+p { line-height: 1.44em; }
+div, pre, p { margin: 0; padding: 0; }
+div.contents > * + *,
+th > * + *, td > * + *,
+dt > * + *, dd > * + *,
+li > * + * { margin-top: 1em; }
+p img { vertical-align: middle; }
+p.lead { font-size: 1.2em; }
+div.clear {
+  margin: 0; padding: 0;
+  height: 0; line-height: 0;
+  clear: both;
+}
+.center { text-align: center; }
+
+footer.about { margin: 0; }
+footer.about > div.inner > div.hgroup {
+  margin: 0; padding: 0;
+  text-align: center;
+  border: none;
+}
+footer.about > div.inner > div.hgroup > h2 {
+  margin: 0; padding: 0.2em;
+  font-size: inherit;
+}
+footer.about.ui-expander > div.inner > div.hgroup span.title:before {
+  content: "";
+}
+div.copyrights {
+  max-width: 700px;
+  text-align: center;
+  padding: 10px;
+  margin: 0 auto;
+}
+div.copyright { margin: 0; }
+div.credits {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  max-width: 720px;
+  margin: 0 auto;
+}
+div.credits > * {
+  vertical-align: top;
+  text-align: left;
+  flex: 1 0 220px;
+  margin: 0;
+  padding: 10px;
+}
+div.credits > *:empty { padding: 0 10px; height: 0; }
+ul.credits, ul.credits li {
+  margin: 0; padding: 0;
+  list-style-type: none;
+}
+ul.credits li {
+  margin-{{$left}}: 1em;
+  text-indent: -1em;
+}
+div.license {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+table {
+  border-collapse: collapse;
+  border-color: {{$color.gray}};
+  border-width: 1px;
+}
+td, th {
+  padding: 0.5em;
+  vertical-align: top;
+  border-color: {{$color.gray}};
+  border-width: 1px;
+}
+thead td, thead th, tfoot td, tfoot th {
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+  background-color: {{$color.bg.dark}};
+}
+th {
+  text-align: {{$left}};
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+
+ul, ol, dl { margin: 0; padding: 0; }
+li {
+  margin: 1em 0 0 0;
+  margin-{{$left}}: 2.4em;
+  padding: 0;
+}
+li:first-child { margin-top: 0; }
+@media (max-width: 480px) {
+  li {
+    margin-{{$left}}: 1.44em;
+  }
+}
+dt { margin-top: 1em; }
+dt:first-child { margin-top: 0; }
+dt + dt { margin-top: 0; }
+dd {
+  margin: 0.2em 0 0 0;
+  margin-{{$left}}: 1.44em;
+}
+dd + dd { margin-top: 1em; }
+ol.compact li { margin-top: 0.2em; }
+ul.compact li { margin-top: 0.2em; }
+ol.compact li:first-child { margin-top: 0; }
+ul.compact li:first-child { margin-top: 0; }
+dl.compact dt { margin-top: 0.2em; }
+dl.compact dt:first-child { margin-top: 0; }
+dl.compact dt + dt { margin-top: 0; }
+
+a {
+  text-decoration: none;
+  color: {{$color.fg.blue}};
+}
+a:visited { color: {{$color.fg.purple}}; }
+a:hover {
+  border-bottom: dotted 1px {{$color.fg.blue}};
+}
+p a {
+  border-bottom: dotted 1px {{$color.fg.blue}};
+}
+a img { border: none; }
+</tmpl>
diff --git a/xslt/common/css/docbook.css.tmpl b/xslt/common/css/docbook.css.tmpl
new file mode 100644
index 00000000..047492ad
--- /dev/null
+++ b/xslt/common/css/docbook.css.tmpl
@@ -0,0 +1,175 @@
+<tmpl>
+div.hgroup.bridgehead { margin-top: 1em; }
+
+<!-- == common == -->
+sub { font-size: 0.83em; }
+sub sub { font-size: 1em; }
+sup { font-size: 0.83em; }
+sup sup { font-size: 1em; }
+table.table-pgwide { width: 100%; }
+table.table-rules-groups thead + *, table.table-rules-rows thead + *,
+table.table-rules-groups tfoot + *, table.table-rules-rows tfoot + *,
+table.table-rules-groups tbody + *, table.table-rules-rows tbody + *,
+table.table-rules-rows tr + * { border-top: solid 1px; }
+table.table-rules-cols td + *, table.table-rules-cols th + * {
+  border-{{$left}}: solid 1px;
+}
+
+td.td-colsep { border-{{$right}}: solid 1px; }
+td.td-rowsep { border-bottom: solid 1px; }
+
+<!-- == bibliography == -->
+span.bibliolabel {
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+div.biblioentry span.title {
+  font-weight: normal;
+  font-style: italic;
+}
+span.citetitle {
+  font-style: italic;
+}
+
+<!-- == block == -->
+div.epigraph {
+  text-align: {{$right}};
+  margin-{{$left}}: 20%;
+  margin-{{$right}}: 0;
+  color: {{$color.fg.dark}};
+}
+div.programlisting .userinput {
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+div.address, div.literallayout { white-space: pre; }
+
+
+<!-- == footnotes == -->
+div.footnotes {
+  border-top: solid 2px {{$color.gray}};
+}
+div.footnote { margin-top: 1.44em; }
+sup.footnote { font-size: 0.83em; }
+a.footnote {
+  font-weight: bold;
+  text-decoration: none;
+  border-bottom: none;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-radius: 2px;
+}
+div.footnote > a.footnote {
+  margin-{{$right}}: 0.83em;
+  background-color: {{$color.bg.gray}};
+}
+div.footnote > a.footnote + p { display: inline-block; margin: 0; }
+a.footnote:hover, div.footnote > a.footnote:hover {
+  background-color: {{$color.bg.blue}};
+  box-shadow: 0 0 2px {{$color.blue}};
+}
+
+<!-- == indexes == -->
+dt.ixprimary {
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+dt.ixprimary * { font-style: normal; }
+dt.ixprimary + dt.ixprimary { margin-top: 1em; }
+dd.ixsecondary {
+  color: {{$color.fg.gray}};
+}
+dt.ixsecondary, dt.ixtertiary { margin-top: 0.2em; }
+dd.ixlink, dd.ixsee, dd.ixseealso {
+  color: {{$color.fg.gray}};
+}
+dd.ixlink + dd, dd.ixsee + dd, dd.ixseealso + dd {
+  margin-top: 0.2em;
+}
+dt.ixsecondary:before, dt.ixtertiary:before {
+  content: "⏺";
+  color: {{$color.fg.gray}};
+}
+dd.ixlink:before {
+  content: "⏺";
+  color: {{$color.blue}};
+}
+dd.ixsee:before, dd.ixseealso:before {
+  content: "⏺";
+  color: {{$color.gray}};
+}
+
+<!-- == unsorted == -->
+dl.index dt { margin-top: 0; }
+dl.index dd { margin-top: 0; margin-bottom: 0; }
+dl.indexdiv dt { margin-top: 0; }
+dl.indexdiv dd { margin-top: 0; margin-bottom: 0; }
+dl.setindex dt { margin-top: 0; }
+dl.setindex dd { margin-top: 0; margin-bottom: 0; }
+div.simplelist { margin-{{$left}}: 1.72em; }
+div.simplelist table { margin-left: 0; border: none; }
+div.simplelist td {
+  padding: 0.5em;
+  border-{{$left}}: solid 1px {{$color.gray}};
+}
+div.simplelist td:first-child {
+  padding-{{$left}}: 0;
+  border-{{$left}}: 0;
+}
+
+span.accel { text-decoration: underline; }
+span.email { font-family: monospace,monospace; font-size: 0.83em; }
+span.firstterm { font-style: italic; }
+span.foreignphrase { font-style: italic; }
+
+dt.glossterm span.glossterm { font-style: normal; }
+<!--
+dt.glossterm { margin-left: 0em; }
+dd + dt.glossterm { margin-top: 2em; }
+dd.glossdef, dd.glosssee, dd.glossseealso { margin-top: 0em;  margin-bottom: 0; }
+-->
+
+span.glossterm { font-style: italic; }
+
+span.lineannotation { font-style: italic; }
+span.medialabel { font-style: italic; }
+.methodparam span.parameter { font-style: italic; }
+span.paramdef span.parameter { font-style: italic; }
+span.prompt { font-family: monospace,monospace; font-size: 0.83em; }
+span.wordasword { font-style: italic; }
+<!-- FIXME below -->
+
+dt.question {
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+dd + dt.question { margin-top: 1em; }
+dd.answer {
+  margin-top: 1em;
+  margin-left: 2em;
+  margin-right: 2em;
+}
+div.qanda-label {
+  line-height: 1.44em;
+  float: {{$left}};
+  margin-{{$right}}: 1em;
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+dl.qandaset ol, dl.qandaset ul, dl.qandaset table { clear: both; }
+
+div.synopfragment { padding-top: 0.5em; }
+span.co {
+  border-radius: 4px;
+  background-color: {{$color.bg.yellow}};
+  outline: solid 1px {{$color.yellow}};
+}
+span.co a { text-decoration: none; }
+span.co a:hover { text-decoration: none; }
+div.co {
+  margin: 0;
+  float: {{$left}};
+  clear: both;
+}
+</tmpl>
diff --git a/xslt/common/css/elements.css.tmpl b/xslt/common/css/elements.css.tmpl
new file mode 100644
index 00000000..0432f80d
--- /dev/null
+++ b/xslt/common/css/elements.css.tmpl
@@ -0,0 +1,584 @@
+<tmpl>
+.yelp-svg-fill {
+  fill: {{$color.fg.dark}};
+}
+.yelp-svg-stroke {
+  stroke: {{$color.fg.dark}};
+}
+div.title {
+  margin: 0 0 0.2em 0;
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+div.title h1, div.title h2, div.title h3, div.title h4, div.title h5, div.title h6 {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+div.desc { margin: 0 0 0.2em 0; }
+div.contents + div.desc { margin: 0.2em 0 0 0; }
+pre.contents {
+  padding: 0.5em 1em 0.5em 1em;
+}
+div.links-center { text-align: center; }
+div.links .desc { color: {{$color.fg.gray}}; }
+div.links > div.inner > div.region > div.desc { font-style: italic; }
+div.links ul { margin: 0; padding: 0; }
+div.links ul ul {
+  margin-{{$left}}: 1em;
+}
+li.links {
+  margin: 0.5em 0 0.5em 0;
+  padding: 0;
+  list-style-type: none;
+}
+li.links-head {
+  margin-top: 1em;
+  color: {{$color.fg.gray}};
+  border-bottom: solid 1px {{$color.gray}};
+}
+div.sectionlinks {
+  display: inline-block;
+  padding: 0 1em 0 1em;
+  background-color: {{$color.bg.blue}};
+  border: solid 1px {{$color.fg.blue}};
+}
+div.sectionlinks ul { margin: 0; }
+div.sectionlinks li { padding: 0; }
+div.sectionlinks div.title { margin: 0.5em 0 0.5em 0; }
+div.sectionlinks div.sectionlinks {
+  display: block;
+  margin: 0.5em 0 0 0;
+  padding: 0;
+  border: none;
+}
+div.sectionlinks div.sectionlinks li {
+  padding-{{$left}}: 1.44em;
+}
+nav.prevnext { clear: both; }
+div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; }
+nav.prevnext > div.inner { float: {{$right}}; }
+nav.prevnext > div.inner > * {
+  background-color: {{$color.bg.gray}};
+  display: inline-block;
+  position: relative;
+  height: 1.44em;
+  padding: 0.2em 0.83em 0 0.83em;
+  margin-bottom: 1em;
+  border: solid 1px {{$color.gray}};
+}
+nav.prevnext > div.inner > span { visibility: hidden; }
+nav.prevnext > div.inner > a + a {
+  border-{{$left}}: none;
+}
+nav.prevnext > div.inner > a:first-child {
+  border-top-{{$left}}-radius: 2px;
+  border-bottom-{{$left}}-radius: 2px;
+}
+nav.prevnext > div.inner > a:last-of-type {
+  border-top-{{$right}}-radius: 2px;
+  border-bottom-{{$right}}-radius: 2px;
+}
+div.serieslinks {
+  display: inline-block;
+  padding: 0 1em 0 1em;
+  background-color: {{$color.bg.blue}};
+  border: solid 1px {{$color.fg.blue}};
+}
+div.serieslinks ul { margin: 0; }
+div.serieslinks li { padding: 0; }
+div.serieslinks div.title { margin: 0.5em 0 0.5em 0; }
+pre.numbered {
+  margin: 0;
+  padding: 0.5em;
+  float: {{$left}};
+  margin-{{$right}}: 0.5em;
+  text-align: {{$right}};
+  color: {{$color.fg.gray}};
+  background-color: {{$color.bg.yellow}};
+}
+div.code {
+  border: solid 1px {{$color.gray}};
+}
+div.example {
+  border-{{$left}}: solid 4px {{$color.gray}};
+  padding-{{$left}}: 1em;
+}
+div.example > div.inner > div.region > div.desc { font-style: italic; }
+div.figure {
+  display: inline-block;
+  max-width: 100%;
+  margin-{{$left}}: 1.72em;
+}
+div.figure > div.inner {
+  padding: 4px;
+  color: {{$color.fg.dark}};
+  border: solid 1px {{$color.gray}};
+  background-color: {{$color.bg.gray}};
+}
+@media (max-width: 960px) {
+  div.figure {
+    margin-{{$left}}: 0;
+  }
+}
+a.figure-zoom {
+  float: {{$right}};
+}
+a.figure-zoom:hover { border-bottom: none; }
+a.figure-zoom:hover .yelp-svg-fill { fill: {{$color.blue}}; }
+a.figure-zoom:hover .yelp-svg-stroke { stroke: {{$color.blue}}; }
+a.figure-zoom .figure-zoom-out { display: none; }
+a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; }
+a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; }
+div.figure > div.inner > div.region > div.contents {
+  margin: 0;
+  padding: 0.5em 1em 0.5em 1em;
+  clear: both;
+  text-align: center;
+  color: {{$color.fg}};
+  border: solid 1px {{$color.gray}};
+  background-color: {{$color.bg}};
+}
+div.list > div.inner > div.title { margin-bottom: 0.5em; }
+div.listing > div.inner { margin: 0; padding: 0; }
+div.listing > div.inner > div.region > div.desc { font-style: italic; }
+div.note {
+  padding: 6px;
+  border: solid 1px {{$color.bg.dark}};
+  background-color: {{$color.bg.gray}};
+  display: flex;
+  flex-flow: row;
+}
+div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; }
+div.note-warning > svg .yelp-svg-fill {
+  fill: {{$color.red}};
+}
+div.note-danger {
+  border-color: {{$color.red}};
+}
+div.note-important > svg .yelp-svg-fill {
+  fill: {{$color.blue}};
+}
+div.note-danger > svg .yelp-svg-fill {
+  fill: {{$color.red}};
+  animation-name: yelp-note-danger;
+  animation-duration: 2s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+}
+@keyframes yelp-note-danger {
+  from { fill: {{$color.red}} }
+  50%  { fill: {{$color.gray}} }
+  to   { fill: {{$color.red}} }
+}
+div.note-sidebar {
+  float: {{$right}};
+  max-width: 206px;
+  margin-{{$left}}: 20px;
+  padding: 6px;
+}
+div.quote {
+  padding: 0;
+  min-height: {{$icons.size.quote}}px;
+}
+<!-- There are rules to create the blockquote icon in html.xsl
+     that these simple text templates can't handle. -->
+div.quote > div.inner > div.title {
+  margin: 0;
+  margin-{{$left}}: {{$icons.size.quote}}px;
+}
+blockquote {
+  margin: 0; padding: 0;
+  margin-{{$left}}: {{$icons.size.quote}}px;
+}
+blockquote > *:first-child { margin-top: 0; }
+div.quote > div.inner > div.region > div.cite {
+  margin-top: 0.5em;
+  margin-{{$left}}: {{$icons.size.quote}}px;
+  color: {{$color.fg.gray}};
+}
+div.quote > div.inner > div.region > div.cite::before {
+  <!-- FIXME: i18n -->
+  content: '&#x2015; ';
+  color: {{$color.fg.gray}};
+}
+div.screen {
+  background-color: {{$color.bg.gray}};
+  border: solid 1px {{$color.gray}};
+}
+ol.steps, ul.steps {
+  padding: 0.5em 1em 0.5em 1em;
+  border: solid 1px {{$color.bg.gray}};
+  border-{{$left}}: solid 4px {{$color.yellow}};
+}
+ol.steps .steps {
+  padding: 0;
+  border: none;
+  background-color: unset;
+}
+li.steps { margin-{{$left}}: 1.44em; }
+li.steps li.steps { margin-{{$left}}: 2.4em; }
+div.synopsis > div.inner > div.region > div.contents,
+div.synopsis > div.contents, div.synopsis > pre.contents {
+  padding: 0.5em 1em 0.5em 1em;
+  border-top: solid 1px;
+  border-bottom: solid 1px;
+  border-color: {{$color.fg.blue}};
+  background-color: {{$color.bg.gray}};
+}
+div.synopsis > div.inner > div.region > div.desc { font-style: italic; }
+div.synopsis div.code {
+  background: unset;
+  border: none;
+  padding: 0;
+}
+div.synopsis div.code > pre.contents { margin: 0; padding: 0; }
+div.unknown > div.inner > div.region > div.desc { font-style: italic; }
+div.table > div.desc { font-style: italic; }
+tr.shade {
+  background-color: {{$color.bg.gray}};
+}
+td.shade {
+  background-color: {{$color.bg.gray}};
+}
+tr.shade td.shade {
+  background-color: {{$color.bg.dark}};
+}
+
+span.app { font-style: italic; }
+span.cmd {
+  font-family: monospace,monospace; font-size: 0.83em;
+  background-color: {{$color.bg.gray}};
+  padding: 0 0.2em 0 0.2em;
+}
+span.cmd span.cmd { background-color: unset; padding: 0; }
+pre span.cmd { background-color: unset; padding: 0; }
+span.code {
+  font-family: monospace,monospace; font-size: 0.83em;
+  border-bottom: solid 1px {{$color.bg.dark}};
+}
+span.code span.code { border: none; }
+pre span.code { border: none; }
+span.em { font-style: italic; }
+span.em-bold {
+  font-style: normal; font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+a span.em-bold {
+  color: {{$color.fg.blue}};
+}
+pre span.error {
+  color: {{$color.fg.red}};
+}
+span.file { font-family: monospace,monospace; font-size: 0.83em; }
+span.gui, span.guiseq { color: {{$color.fg.dark}}; }
+a span.gui, a span.guiseq { color: {{$color.fg.blue}}; }
+span.input { font-family: monospace,monospace; font-size: 0.83em; }
+pre span.input {
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+kbd {
+  font-family: inherit;
+  font-size: inherit;
+  color: {{$color.fg.dark}};
+  background-color: {{$color.bg.gray}};
+  border: solid 1px {{$color.gray}};
+  border-radius: 2px;
+  margin: 0 0.2em 0 0.2em;
+  padding: 0.2em 0.5em 0 0.5em;
+  white-space: nowrap;
+}
+kbd.key-Fn {
+  font-weight: bold;
+  color: {{$color.fg.blue}};
+}
+span.key a {
+  border-bottom: none;
+}
+a kbd {
+  color: {{$color.fg.blue}};
+  border-color: {{$color.fg.blue}};
+}
+span.keyseq {
+  color: {{$color.fg.dark}};
+  white-space: nowrap
+}
+a span.keyseq { color: {{$color.fg.blue}}; }
+span.output { font-family: monospace,monospace; font-size: 0.83em; }
+pre span.output {
+  color: {{$color.fg}};
+}
+pre span.prompt {
+  color: {{$color.fg.dark}};
+}
+span.sys { font-family: monospace,monospace; font-size: 0.83em; }
+span.var { font-style: italic; }
+
+.ui-tile-img .media-controls { display: none; }
+span.media-audio, span.media-video { display: inline-block; }
+audio, video { display: block; margin: 0; }
+div.media > div.inner { display: inline-block; text-align: center; }
+.media-controls {
+  height: 30px;
+  margin: 0; padding: 0;
+  border-left: solid 1px {{$color.fg}};
+  border-right: solid 1px {{$color.fg}};
+  border-bottom: solid 1px {{$color.fg}};
+  background-color: {{$color.fg.dark}};
+  color: {{$color.bg}};
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+.media-controls > * {
+  flex: 0 1 auto;
+}
+.media-controls > input.media-range {
+  flex: 1 0 auto;
+  background-color: {{$color.fg.dark}};
+  margin: 0 10px;
+  -webkit-appearance: none;
+}
+input.media-range::-webkit-slider-runnable-track {
+  height: 4px;
+  background: {{$color.fg.gray}};
+  border-radius: 2px;
+}
+input.media-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  background: {{$color.bg.dark}};
+  border: solid 1px {{$color.fg.dark}};
+  margin-top: -6px;
+}
+input.media-range::-webkit-slider-thumb:hover,
+input.media-range::-webkit-slider-thumb:focus {
+  background: {{$color.bg.gray}};
+}
+input.media-range::-moz-range-track {
+  height: 4px;
+  background: {{$color.fg.gray}};
+  border-radius: 2px;
+}
+input.media-range::-moz-range-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  background: {{$color.bg.dark}};
+  border: solid 1px {{$color.fg.dark}};
+  margin-top: -6px;
+}
+.media-controls-audio {
+  border-top: solid 1px {{$color.fg}};
+  border-radius: 4px;
+}
+button.media-play {
+  height: 30px;
+  padding: 0 6px 0 6px; line-height: 0;
+  background-color: {{$color.fg.dark}};
+  border: none;
+  border-{{$right}}: solid 1px {{$color.fg}};
+}
+button.media-play:hover, button.media-play:focus {
+  background-color: {{$color.fg.blue}};
+}
+button.media-play .yelp-svg-fill { fill: {{$color.bg.gray}}; }
+button.media-play .media-pause { display: none; }
+button.media-play-playing .media-play { display: none; }
+button.media-play-playing .media-pause { display: inline; }
+.media-time {
+  margin: 0;
+  font-size: 16px;
+  height: 30px;
+  line-height: 30px;
+}
+.media-time > span {
+  padding-{{$right}}: 8px;
+}
+.media-duration {
+  font-size: 12px;
+  color: {{$color.bg.dark}};
+  opacity: 0.8;
+}
+.media-controls-ttml {
+  min-width: 630px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+div.media-ttml {
+  margin: 0; padding: 6px 0;
+  background-color: {{$color.bg.gray}};
+  border: solid 1px {{$color.fg}};
+  min-height: 24px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.media-ttml-pre { white-space: pre; }
+.media-ttml-nopre { white-space: normal; }
+div.media-ttml-div {
+  text-align: {{$left}};
+  display: none;
+  margin: 0; padding: 0;
+}
+div.media-ttml-p {
+  text-align: {{$left}};
+  display: none;
+  margin: 0 auto;
+  max-width: 560px;
+  line-height: 1.44em;
+}
+div.media-ttml-div > * + * { margin-top: 1em; }
+div.yelp-data { display: none; }
+.ui-expander > div.inner > div.title span.title,
+.ui-expander > div.inner > div.hgroup span.title {
+  cursor: default;
+}
+.ui-expander > div.inner > div.title span.title:before,
+.ui-expander > div.inner > div.hgroup span.title:before {
+  font-weight: bold;
+  content: "⌃";
+  display: inline-block;
+  margin: 0;
+  color: {{$color.fg.blue}};
+  transform: translateY(0.2em) rotate(0deg);
+  -webkit-transform: translateY(0.2em) rotate(0deg);
+  transition: transform 0.2s linear;
+  transform-origin: 50% 30%;
+  -webkit-transform-origin: 50% 30%;
+  -webkit-transition: -webkit-transform 0.2s linear;
+  margin: 0 0.2em;
+}
+.ui-expander-c > div.inner > div.hgroup { border-bottom: none; }
+<!-- There is a rotation on the arrow in html.xsl that these
+     simple text templates can't handle -->
+.ui-expander > div.inner > div.title:hover,
+.ui-expander > div.inner > div.hgroup:hover * {
+  color: {{$color.fg.blue}};
+}
+.ui-expander > div.inner > div.hgroup > .subtitle {
+  margin-{{$left}}: 2em;
+}
+.ui-expander-c > div.inner > div.region {
+  display: none;
+}
+.ui-expander-e > div.inner > div.region {
+  animation-name: yelp-ui-expander-e;
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+  transform-origin: 0 0;
+}
+@keyframes yelp-ui-expander-e {
+  from { transform: scaleY(0); }
+  to   { transform: scaleY(1); }
+}
+div.ui-expander-preview > div.inner > div.region {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear, background-color 0.2s linear;
+  animation-name: none;
+}
+div.ui-expander-preview.ui-expander-c > div.inner {
+  max-height: 100px;
+  overflow: hidden;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region {
+  display: block;
+  transform: scaleY(0.4);
+  background-color: {{$color.bg.gray}};
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover {
+  background-color: {{$color.bg.blue}};
+  cursor: zoom-in;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * {
+  cursor: zoom-in;
+}
+div.ui-expander-preview > div.inner > div.region > * {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region > * {
+  transform: scaleX(0.4);
+}
+section.ui-expander-preview > div.inner > div.region > div.contents{
+  transform-origin: 0 0;
+  transition: transform 0.2s linear, background-color 0.2s linear;
+}
+section.ui-expander-preview.ui-expander-c > div.inner {
+  max-height: 140px;
+  overflow: hidden;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region {
+  display: block;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents {
+  transform: scaleY(0.6);
+  background-color: {{$color.bg.gray}};
+}
+section.ui-expander-preview > div.inner > div.region > div.contents > * {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * {
+  transform: scaleX(0.6);
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover {
+  background-color: {{$color.bg.blue}};
+  cursor: zoom-in;
+}
+@media only screen and (max-width: 480px) {
+  article > div.region > div.contents > div.example,
+  article > div.region > section > div.inner > div.region > div.contents > div.example {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+  div.example {
+    padding-{{$left}}: 6px;
+    padding-{{$right}}: 10px;
+  }
+  article > div.region > div.contents > div.note,
+  article > div.region > section > div.inner > div.region > div.contents > div.note {
+    margin-left: -10px;
+    margin-right: -10px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  article > div.region > div.contents > div.note,
+  article > div.region > section > div.inner > div.region > div.contents > div.note {
+    border-left: none;
+    border-right: none;
+  }
+  div.note-sidebar {
+    float: none;
+    max-width: none;
+    margin-left: inherit;
+    margin-right: inherit;
+    padding-left: inherit;
+    padding-right: inherit;
+  }
+  div.note-sidebar > div.inner > div.title,
+  div.note-sidebar > div.inner > div.region > div.contents {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  article > div.region > div.contents > div.steps,
+  article > div.region > section > div.inner > div.region > div.contents > div.steps {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+  div.steps > div.inner > div.title {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  ol.steps, ul.steps {
+    padding: 0;
+    padding-{{$left}}: 6px;
+    padding-{{$right}}: 10px;
+  }
+}
+</tmpl>
diff --git a/xslt/common/css/mallard-editor.css.tmpl b/xslt/common/css/mallard-editor.css.tmpl
new file mode 100644
index 00000000..91870036
--- /dev/null
+++ b/xslt/common/css/mallard-editor.css.tmpl
@@ -0,0 +1,19 @@
+<tmpl>
+div.note-version {
+  background-color: {{$color.bg.yellow}};
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+span.status {
+  font-size: 0.83em;
+  font-weight: normal;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  color: {{$color.fg.dark}};
+  border: solid 1px {{$color.red}};
+  background-color: {{$color.bg.yellow}};
+}
+span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated {
+  background-color: {{$color.bg.red}};
+}
+</tmpl>
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
new file mode 100644
index 00000000..97d94d23
--- /dev/null
+++ b/xslt/common/css/mallard.css.tmpl
@@ -0,0 +1,493 @@
+<tmpl>
+<!-- links -->
+div.links .desc a {
+  color: inherit;
+}
+div.links .desc a:hover {
+  color: {{$color.fg.blue}};
+}
+a.bold { font-weight: bold; }
+
+<!-- link/@style = 'button' -->
+div.link-button {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.link-button a {
+  display: inline-block;
+  background-color: {{$color.blue}};
+  color: {{$color.bg}};
+  text-shadow: {{$color.fg.blue}} 1px 1px 0px;
+  border: solid 1px {{$color.fg.blue}};
+  padding: 0.2em 0.83em 0.2em 0.83em;
+  border-radius: 4px;
+}
+.link-button a:visited {
+  color: {{$color.bg}};
+}
+.link-button a:hover {
+  text-decoration: none;
+  color: {{$color.bg}};
+  background-color: {{$_color.link_button_hover}};
+}
+div.link-button a .desc {
+  display: block;
+  font-weight: normal;
+  font-size: 0.83em;
+  color: {{$color.bg.gray}};
+}
+
+<!-- @style = 'float*' -->
+div.floatleft {
+  float: left;
+  margin-right: 1em;
+}
+div.floatright {
+  float: right;
+  margin-left: 1em;
+}
+div.floatstart {
+  float: {{$left}};
+  margin-{{$right}}: 1em;
+}
+div.floatend {
+  float: {{$right}};
+  margin-{{$left}}: 1em;
+}
+
+<!-- FIXME -->
+div.title-heading h1, div.title-heading h2, div.title-heading h3,
+div.title-heading h4, div.title-heading h5, div.title-heading h6 {
+  font-size: 1.72em;
+  font-weight: bold;
+}
+ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
+div.links-heading > a { font-size: 1.72em; font-weight: bold; }
+ul.links-heading > li > div.desc { margin-top: 0.5em; }
+
+div.links-uix-hover {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+ul.links-uix-hover { flex-grow: 1; }
+ul.links-uix-hover li { margin: 0; padding: 0; }
+ul.links-uix-hover a {
+  display: block;
+  padding: 8px 1.2em;
+  border-bottom: none;
+}
+ul.links-uix-hover a:hover, ul.links-uix-hover a:focus {
+  background: {{$color.bg.blue}};
+}
+ul.links-uix-hover img {
+  display: block;
+  position: absolute;
+  top: 0; {{$left}}: 0;
+  visibility: hidden;
+  opacity: 0.0;
+  transition: opacity 0.6s, visibility 0.6s;
+}
+ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img {
+  visibility: visible;
+  opacity: 1.0;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+@media only screen and (max-width: 480px) {
+  div.links-uix-hover-img { display: none; }
+  ul.links-uix-hover img { display: none; }
+  ul.links-uix-hover li {
+    margin-left: -10px; margin-right: -10px;
+  }
+  ul.links-uix-hover li a {
+    padding: 10px;
+  }
+}
+
+<!-- uix:overlay -->
+div.ui-overlay-screen {
+  position: fixed;
+  margin: 0;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background: {{$color.fg.dark}};
+  animation-name: yelp-overlay-screen;
+  animation-duration: 0.8s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-overlay-screen {
+  from { opacity: 0.0; }
+  to   { opacity: 0.6; }
+}
+div.ui-overlay {
+  display: none;
+  position: fixed;
+  text-align: center;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+div.ui-overlay-show {
+  animation-name: yelp-overlay-slide;
+  animation-duration: 0.8s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-overlay-slide {
+  from { transform: translateY(-400px) translateX(-50%); }
+  to   { transform: translateY(0) translateX(-50%); }
+}
+div.ui-overlay > div.inner {
+  display: inline-block;
+  padding: 8px;
+  background-color: {{$color.bg.gray}};
+  border-radius: 4px;
+  text-align: {{$left}};
+}
+div.ui-overlay img, div.ui-overlay video {
+  max-height: 80vh;
+  max-width: 90vw;
+}
+div.ui-overlay > div.inner > div.title { margin-top: -4px; }
+a.ui-overlay-close {
+  display: block;
+  float: {{$right}};
+  width: 30px; height: 30px;
+  font-size: 22px; line-height: 30px;
+  font-weight: bold;
+  margin-top: -28px;
+  margin-{{$right}}: -26px;
+  padding: 1px 2px 3px 2px;
+  text-align: center;
+  border: none;
+  border-radius: 50%;
+  background-color: {{$color.blue}};
+  color: {{$color.bg}};
+}
+div.links-tiles {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: stretch;
+  vertical-align: top;
+  clear: both;
+  margin: 0 -10px;
+}
+div.links-tile {
+  max-width: 300px;
+  flex: 1 0 300px;
+  vertical-align: top;
+  margin: 0;
+  padding: 10px;
+}
+div.links-tiles > div.links-tile { max-width: none; }
+div.links-tile:empty { padding: 0 10px; height: 0; }
+div.links-tile > a {
+  display: block;
+  vertical-align: top;
+  padding: 10px;
+  border-radius: 4px;
+  border: none;
+}
+div.links-tile > a:hover {
+  background-color: {{$color.bg.blue}};
+}
+div.links-tile > a > span.links-tile-img {
+  display: block;
+  text-align: center;
+}
+div.links-tile > a > span.links-tile-img > img {
+  width: 100%;
+  border-radius: 3px;
+}
+div.links-tile > a > span.links-tile-text > span.title {
+  display: block;
+  font-weight: bold;
+}
+div.links-tile > a > span.links-tile-text > * + span.title {
+  margin-top: 0.5em;
+}
+div.links-tile > a > span.links-tile-text > span.desc {
+  display: block;
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+
+<!-- links/@style = 'grid' -->
+div.links-grid-container {
+  margin-left: -10px;
+  margin-right: -10px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  vertical-align: top;
+  clear: both;
+}
+div.links-grid {
+  flex: 1 0 300px;
+  padding: 10px;
+}
+div.links-grid:empty { padding: 0 10px; height: 0; }
+div.links-grid-link { font-weight: bold; }
+div.links-grid > div.desc {
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+
+<!-- FIXME -->
+<!-- links/@style = 'norwich' -->
+div.links-norwich {
+  width: 900px;
+}
+div.links-norwich-primary {
+  float: left;
+  vertical-align: top;
+  margin: 0; padding: 0;
+}
+div.links-norwich-big {
+  vertical-align: top;
+  display: inline-block;
+  background: {{$color.bg.blue}};
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.blue}}, {{$color.blue}});
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-big + div.links-norwich-big {
+  background: {{$color.bg.yellow}};
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.yellow}}, {{$color.yellow}});
+}
+div.links-norwich-big a {
+  display: block;
+  width: 230px;
+  height: 500px;
+  height: 320px;
+  padding: 9px;
+  font-size: 1.2em;
+  color:  {{$color.fg}};
+  border: solid 1px {{$color.blue}};
+  background-repeat: no-repeat;
+  background-position: right -80px bottom -80px;
+}
+div.links-norwich-big a:hover {
+  border: solid 1px {{$color.blue}};
+  box-shadow: 2px 2px 2px {{$color.blue}};
+}
+div.links-norwich-big a span.title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+div.links-norwich-big a .desc {
+  color:  {{$color.fg}};
+  font-weight: normal;
+}
+div.links-norwich-secondary {
+  vertical-align: top;
+  margin: 0; padding: 0;
+}
+div.links-norwich-small {
+  display: inline-block;
+  vertical-align: top;
+  background: {{$color.bg.gray}};
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-small a {
+  display: block;
+  width: 140px;
+  height: 140px;
+  padding: 9px;
+  font-weight: bold;
+  color:  {{$color.fg}};
+  border: solid 1px {{$color.gray}};
+  background-repeat: no-repeat;
+  background-position: right 4px bottom 4px;
+}
+div.links-norwich-small a:hover {
+  border: solid 1px {{$color.gray}};
+  box-shadow: 2px 2px 2px {{$color.blue}};
+}
+@media only screen and (max-width: 900px) {
+  div.links-norwich {
+    width: 720px;
+  }
+}
+@media only screen and (max-width: 720px) {
+  div.links-norwich {
+    width: 540px;
+  }
+}
+@media only screen and (max-width: 540px) {
+  div.links-norwich {
+    width: 100%;
+  }
+  div.links-norwich-big {
+    width: 100%;
+    margin-right: 0;
+  }
+  div.links-norwich-big a {
+    width: auto;
+  }
+}
+
+<!-- links/@type = 'topic' and @style = '2column' -->
+div.links-divs {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+a.linkdiv {
+  display: block;
+  margin: 0;
+  padding: 10px;
+  border-bottom: none;
+}
+a.linkdiv:hover {
+  text-decoration: none;
+  background-color: {{$color.bg.blue}};
+}
+a.linkdiv > span.title {
+  display: block;
+  margin: 0;
+  font-size: 1em;
+  font-weight: bold;
+  color: inherit;
+}
+a.linkdiv > span.desc {
+  display: block;
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+span.linkdiv-dash { display: none; }
+div.links-twocolumn {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  vertical-align: top;
+  margin-left: -10px;
+  margin-right: -10px;
+}
+div.links-twocolumn > div.links-divs {
+  flex: 1 0 320px;
+  vertical-align: top;
+  margin: 0;
+}
+
+<!-- FIXME -->
+div.comment {
+  padding: 0.5em;
+  border: solid 2px {{$color.red}};
+  background-color: {{$color.bg.red}};
+}
+div.comment div.comment {
+  margin: 1em 1em 0 1em;
+}
+div.comment div.cite {
+  margin: 0 0 0.5em 0;
+  font-style: italic;
+}
+
+<!-- FIXME -->
+div.tree > div.inner > div.title { margin-bottom: 0.5em; }
+ul.tree {
+  margin: 0; padding: 0;
+  list-style-type: none;
+}
+li.tree { margin: -2px 0 0 0; padding: 0; }
+li.tree div { margin: 0; padding: 0; }
+ul.tree ul.tree {
+  margin-{{$left}}: 1.44em;
+}
+div.tree-lines ul.tree { margin-left: 0; }
+
+<!-- FIXME -->
+span.hi {
+  background-color: {{$color.bg.yellow}};
+}
+span.hi.hi-ins {
+  background-color: {{$color.bg.green}};
+}
+span.hi.hi-del {
+  background-color: {{$color.bg.red}};
+  text-decoration: line-through;
+}
+span.hi.hi-ins ins { text-decoration: none; }
+span.hi.hi-del del { text-decoration: none; }
+span.hi.hi-red { background-color: {{$color.bg.red}}; }
+span.hi.hi-orange { background-color: {{$color.bg.orange}}; }
+span.hi.hi-yellow { background-color: {{$color.bg.yellow}}; }
+span.hi.hi-green { background-color: {{$color.bg.green}}; }
+span.hi.hi-blue { background-color: {{$color.bg.blue}}; }
+span.hi.hi-purple { background-color: {{$color.bg.purple}}; }
+span.hi.hi-gray { background-color: {{$color.bg.gray}}; }
+
+<!-- experimental/gloss -->
+dt.gloss-term {
+  margin-top: 1.2em;
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; }
+dt.gloss-term + dd { margin-top: 0.2em; }
+dd.gloss-link {
+  margin: 0 0.2em 0 0.2em;
+  border-{{$left}}: solid 4px {{$color.blue}};
+  padding-{{$left}}: 1em;
+}
+dd.gloss-def {
+  margin: 0 0.2em 1em 0.2em;
+  border-{{$left}}: solid 4px {{$color.gray}};
+  padding-{{$left}}: 1em;
+}
+a.gloss-term {
+  position: relative;
+  border-bottom: dashed 1px {{$color.blue}};
+}
+a.gloss-term:hover {
+  text-decoration: none;
+  border-bottom-style: solid;
+}
+span.gloss-desc {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  margin: 0;
+  {{$left}}: 0;
+  top: 1.2em;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  min-width: 12em;
+  max-width: 24em;
+  overflow: hidden;
+  color: {{$color.fg.dark}};
+  background-color: {{$color.bg.yellow}};
+  border: solid 1px {{$color.yellow}};
+  box-shadow: 2px 2px 4px {{$color.gray}};
+}
+a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc {
+  display: inline-block;
+  animation-name: yelp-gloss-fade;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-gloss-fade {
+  from { opacity: 0.0; }
+  to   { opacity: 1.0; }
+}
+
+<!-- conditional processing -->
+.if-if { display: none; }
+.if-choose, .if-when, .if-else { margin: 0; padding: 0; }
+.if-choose > .if-when { display: none; }
+.if-choose > .if-else { display: block; }
+.if-if.if__not-target-mobile { display: block; }
+.if-choose.if__not-target-mobile > .if-when { display: block; }
+.if-choose.if__not-target-mobile > .if-else { display: none; }
+@media only screen and (max-width: 480px) {
+  .if-if.if__target-mobile { display: block; }
+  .if-if.if__not-target-mobile { display: none; }
+  .if-choose.if__target-mobile > .if-when { display: block; }
+  .if-choose.if__target-mobile > .if-else { display: none; }
+  .if-choose.if__not-target-mobile > .if-when { display: none; }
+  .if-choose.if__not-target-mobile > .if-else { display: block; }
+}
+</tmpl>
diff --git a/xslt/common/css/syntax.css.tmpl b/xslt/common/css/syntax.css.tmpl
new file mode 100644
index 00000000..eac3f9d7
--- /dev/null
+++ b/xslt/common/css/syntax.css.tmpl
@@ -0,0 +1,51 @@
+<tmpl>
+.hljs a {
+  color: inherit;
+  border-bottom: dotted 1px {{$color.fg.blue}};
+}
+.hljs a:hover, .hljs a:hover * { color: {{$color.fg.blue}}; }
+.hljs-addition {
+  color: {{$color.fg.green}};
+  background-color: {{$color.bg.green}};
+}
+.hljs-deletion {
+  color: {{$color.fg.red}};
+  background-color: {{$color.bg.red}};
+}
+.hljs-emphasis  { font-style: italic; }
+.hljs-strong    { font-weight: bold; }
+.hljs-attr      { color: {{$color.fg.blue}}; }
+.hljs-attribute { color: {{$color.fg.yellow}}; }
+.hljs-built_in  { color: {{$color.fg.orange}}; }
+.hljs-bullet    { color: {{$color.fg.green}}; }
+.hljs-class     { }
+.hljs-code      { color: {{$color.fg.dark}}; }
+.hljs-comment   { color: {{$color.fg.gray}}; }
+.hljs-doctag    { }
+.hljs-formula   { color: {{$color.fg.dark}}; }
+.hljs-function  { }
+.hljs-keyword   { color: {{$color.fg.purple}}; }
+.hljs-link      { color: {{$color.fg.orange}}; }
+.hljs-literal   { color: {{$color.fg.orange}}; }
+.hljs-meta      { color: {{$color.fg.orange}}; }
+.hljs-name      { color: {{$color.fg.red}}; }
+.hljs-number    { color: {{$color.fg.orange}}; }
+.hljs-params    { color: {{$color.fg.orange}}; }
+.hljs-quote     { color: {{$color.fg.gray}}; }
+.hljs-regexp    { color: {{$color.fg.red}}; }
+.hljs-rest_arg  { }
+.hljs-section   { color: {{$color.fg.blue}}; }
+.hljs-string    { color: {{$color.fg.green}}; }
+.hljs-subst     { }
+.hljs-symbol    { color: {{$color.fg.green}}; }
+.hljs-tag       { color: {{$color.fg.red}}; }
+.hljs-title     { color: {{$color.fg.blue}}; }
+.hljs-type      { }
+.hljs-variable  { }
+.hljs-selector-attr  { }
+.hljs-selector-class { color: {{$color.fg.red}}; }
+.hljs-selector-id    { color: {{$color.fg.red}}; }
+.hljs-selector-tag   { color: {{$color.fg.purple}}; }
+.hljs-template-tag      { }
+.hljs-template-variable { }
+</tmpl>
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 2dc349b1..17778344 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -1222,6 +1222,10 @@ common spacings for block-level elements like paragraphs and lists, defines
 styles for links, and defines four common wrapper divs: `header`, `side`,
 `body`, and `footer`.
 
+This template uses text templates to keep the actual CSS content in a
+separate file, `css/core.css.tmpl`, and do simple param substitutions.
+This makes it easier to update the CSS without working with XSLT.
+
 All parameters can be automatically computed if not provided.
 -->
 <xsl:template name="html.css.core">
@@ -1239,254 +1243,13 @@ All parameters can be automatically computed if not provided.
       <xsl:with-param name="direction" select="$direction"/>
     </xsl:call-template>
   </xsl:param>
-  <xsl:text>
-html { height: 100%; }
-body {
-  font-family: sans-serif;
-  margin: 0; padding: 0;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg"/><xsl:text>;
-  direction: </xsl:text><xsl:value-of select="$direction"/><xsl:text>;
-}
-article, aside, nav, header, footer, section {
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-main {
-  display: flex;
-  flex-flow: row;
-}
-main > * {
-  flex: 0 0 220px;
-}
-main > div.page {
-  flex-grow: 1;
-  margin: 0;
-  display: flex;
-  flex-flow: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 100vh;
-}
-div.page > article { flex: 1 0 auto; }
-div.page > header, div.page > footer { flex: 0 1 auto; }
-.pagewide {
-  max-width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-aside.sidebar {
-  width: 300px;
-  padding: 20px 10px;
-  background: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>
-}
-aside.sidebar-right { order: 3; }
-aside.sidebar section { margin-top: 0; }
-aside.sidebar * { margin-bottom: 20px; }
-aside.sidebar section > div.inner > div.hgroup {
-  border-bottom: none;
-}
-aside.sidebar section h2 {
-  font-size: 1em;
-  margin-bottom: 0;
-}
-article {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  min-height: 20em;
-  background-color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-}
-section {
-  margin-top: 2.4em;
-  clear: both;
-}
-section section {
-  margin-top: 1.44em;
-}
-.yelp-hash-highlight {
-  animation-name: yelp-hash-highlight;
-  animation-duration: 0.5s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-hash-highlight {
-  from { transform: translateY(0px) }
-  25%  { transform: translateY(20px); }
-  50%  { transform: translateY(0); }
-  75%  { transform: translateY(10px); }
-  to   { transform: translateY(0px); }
-}
-div.trails {
-  margin: 0 -10px 0 -10px;
-  padding: 0.2em 10px;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-div.trail {
-  margin: 0.2em 0;
-  padding: 0 1em 0 1em;
-  text-indent: -1em;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-a.trail { white-space: nowrap; }
-div.hgroup {
-  margin-bottom: 0.5em;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-section > div.inner > div.hgroup {
-  margin-top: 0;
-  border-bottom: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-section.links > div.inner > div.hgroup {
-  border-bottom: solid 2px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-section section.links > div.inner > div.hgroup {
-  border: none;
-}
-h1, h2, h3, h4, h5, h6, h7 {
-  margin: 0; padding: 0;
-  font-weight: normal;
-}
-h1 { font-size: 2.4em; }
-h2 { font-size: 1.72em; }
-h3.title, h4.title, h5.title, h6.title, h7.title { font-size: 1.44em; }
-h3, h4, h5, h6, h7 { font-size: 1em; }
-p { line-height: 1.44em; }
-div, pre, p { margin: 0; padding: 0; }
-div.contents > * + *,
-th > * + *, td > * + *,
-dt > * + *, dd > * + *,
-li > * + * { margin-top: 1em; }
-p img { vertical-align: middle; }
-p.lead { font-size: 1.2em; }
-div.clear {
-  margin: 0; padding: 0;
-  height: 0; line-height: 0;
-  clear: both;
-}
-.center { text-align: center; }
-
-footer.about { margin: 0; }
-footer.about > div.inner > div.hgroup {
-  margin: 0; padding: 0;
-  text-align: center;
-  border: none;
-}
-footer.about > div.inner > div.hgroup > h2 {
-  margin: 0; padding: 0.2em;
-  font-size: inherit;
-}
-footer.about.ui-expander > div.inner > div.hgroup span.title:before {
-  content: "";
-}
-div.copyrights {
-  max-width: 700px;
-  text-align: center;
-  padding: 10px;
-  margin: 0 auto;
-}
-div.copyright { margin: 0; }
-div.credits {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  max-width: 720px;
-  margin: 0 auto;
-}
-div.credits > * {
-  vertical-align: top;
-  text-align: left;
-  flex: 1 0 220px;
-  margin: 0;
-  padding: 10px;
-}
-div.credits > *:empty { padding: 0 10px; height: 0; }
-ul.credits, ul.credits li {
-  margin: 0; padding: 0;
-  list-style-type: none;
-}
-ul.credits li {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-  text-indent: -1em;
-}
-div.license {
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 10px;
-}
-
-table {
-  border-collapse: collapse;
-  border-color: </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-  border-width: 1px;
-}
-td, th {
-  padding: 0.5em;
-  vertical-align: top;
-  border-color: </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-  border-width: 1px;
-}
-thead td, thead th, tfoot td, tfoot th {
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-}
-th {
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-ul, ol, dl { margin: 0; padding: 0; }
-li {
-  margin: 1em 0 0 0;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2.4em;
-  padding: 0;
-}
-li:first-child { margin-top: 0; }
-@media (max-width: 480px) {
-  li {
-    margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-  }
-}
-dt { margin-top: 1em; }
-dt:first-child { margin-top: 0; }
-dt + dt { margin-top: 0; }
-dd {
-  margin: 0.2em 0 0 0;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-}
-dd + dd { margin-top: 1em; }
-ol.compact li { margin-top: 0.2em; }
-ul.compact li { margin-top: 0.2em; }
-ol.compact li:first-child { margin-top: 0; }
-ul.compact li:first-child { margin-top: 0; }
-dl.compact dt { margin-top: 0.2em; }
-dl.compact dt:first-child { margin-top: 0; }
-dl.compact dt + dt { margin-top: 0; }
-
-a {
-  text-decoration: none;
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-a:visited { color: </xsl:text>
-  <xsl:value-of select="$color.fg.purple"/><xsl:text>; }
-a:hover {
-  border-bottom: dotted 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-p a {
-  border-bottom: dotted 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-a img { border: none; }
-</xsl:text>
+  <xsl:call-template name="tmpl.file">
+    <xsl:with-param name="file" select="'css/core.css.tmpl'"/>
+    <xsl:with-param name="node" select="$node"/>
+    <xsl:with-param name="direction" select="$direction"/>
+    <xsl:with-param name="left" select="$left"/>
+    <xsl:with-param name="right" select="$right"/>
+  </xsl:call-template>
 </xsl:template>
 
 
@@ -1507,6 +1270,10 @@ the simpler element names from Mallard, although there some class names which
 are not taken from Mallard. Stylesheets which convert to HTML should use the
 appropriate common classes.
 
+This template uses text templates to keep the actual CSS content in a
+separate file, `css/elements.css.tmpl`, and do simple param substitutions.
+This makes it easier to update the CSS without working with XSLT.
+
 All parameters can be automatically computed if not provided.
 -->
 <xsl:template name="html.css.elements">
@@ -1524,211 +1291,21 @@ All parameters can be automatically computed if not provided.
       <xsl:with-param name="direction" select="$direction"/>
     </xsl:call-template>
   </xsl:param>
-  <xsl:text>
-.yelp-svg-fill {
-  fill: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-.yelp-svg-stroke {
-  stroke: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-div.title {
-  margin: 0 0 0.2em 0;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-div.title h1, div.title h2, div.title h3, div.title h4, div.title h5, div.title h6 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-}
-div.desc { margin: 0 0 0.2em 0; }
-div.contents + div.desc { margin: 0.2em 0 0 0; }
-pre.contents {
-  padding: 0.5em 1em 0.5em 1em;
-}
-div.links-center { text-align: center; }
-div.links .desc { color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>; }
-div.links > div.inner > div.region > div.desc { font-style: italic; }
-div.links ul { margin: 0; padding: 0; }
-div.links ul ul {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-li.links {
-  margin: 0.5em 0 0.5em 0;
-  padding: 0;
-  list-style-type: none;
-}
-li.links-head {
-  margin-top: 1em;
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-  border-bottom: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-}
-div.sectionlinks {
-  display: inline-block;
-  padding: 0 1em 0 1em;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-div.sectionlinks ul { margin: 0; }
-div.sectionlinks li { padding: 0; }
-div.sectionlinks div.title { margin: 0.5em 0 0.5em 0; }
-div.sectionlinks div.sectionlinks {
-  display: block;
-  margin: 0.5em 0 0 0;
-  padding: 0;
-  border: none;
-}
-div.sectionlinks div.sectionlinks li {
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-}
-nav.prevnext { clear: both; }
-div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; }
-nav.prevnext > div.inner { float: </xsl:text><xsl:value-of select="$right"/><xsl:text>; }
-nav.prevnext > div.inner > * {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  display: inline-block;
-  position: relative;
-  height: 1.44em;
-  padding: 0.2em 0.83em 0 0.83em;
-  margin-bottom: 1em;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-}
-nav.prevnext > div.inner > span { visibility: hidden; }
-nav.prevnext > div.inner > a + a {
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: none;
-}
-nav.prevnext > div.inner > a:first-child {
-  border-top-</xsl:text><xsl:value-of select="$left"/><xsl:text>-radius: 2px;
-  border-bottom-</xsl:text><xsl:value-of select="$left"/><xsl:text>-radius: 2px;
-}
-nav.prevnext > div.inner > a:last-of-type {
-  border-top-</xsl:text><xsl:value-of select="$right"/><xsl:text>-radius: 2px;
-  border-bottom-</xsl:text><xsl:value-of select="$right"/><xsl:text>-radius: 2px;
-}
-div.serieslinks {
-  display: inline-block;
-  padding: 0 1em 0 1em;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-div.serieslinks ul { margin: 0; }
-div.serieslinks li { padding: 0; }
-div.serieslinks div.title { margin: 0.5em 0 0.5em 0; }
-pre.numbered {
-  margin: 0;
-  padding: 0.5em;
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0.5em;
-  text-align: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-div.code {
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-div.example {
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-div.example > div.inner > div.region > div.desc { font-style: italic; }
-div.figure {
-  display: inline-block;
-  max-width: 100%;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.72em;
-}
-div.figure > div.inner {
-  padding: 4px;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-@media (max-width: 960px) {
-  div.figure {
-    margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  }
-}
-a.figure-zoom {
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-}
-a.figure-zoom:hover { border-bottom: none; }
-a.figure-zoom:hover .yelp-svg-fill { fill: </xsl:text>
-  <xsl:value-of select="$color.blue"/><xsl:text>; }
-a.figure-zoom:hover .yelp-svg-stroke { stroke: </xsl:text>
-  <xsl:value-of select="$color.blue"/><xsl:text>; }
-a.figure-zoom .figure-zoom-out { display: none; }
-a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; }
-a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; }
-div.figure > div.inner > div.region > div.contents {
-  margin: 0;
-  padding: 0.5em 1em 0.5em 1em;
-  clear: both;
-  text-align: center;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-}
-div.list > div.inner > div.title { margin-bottom: 0.5em; }
-div.listing > div.inner { margin: 0; padding: 0; }
-div.listing > div.inner > div.region > div.desc { font-style: italic; }
-div.note {
-  padding: 6px;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.bg.dark"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  display: flex;
-  flex-flow: row;
-}
-div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; }
-div.note-warning > svg .yelp-svg-fill {
-  fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
-}
-div.note-danger {
-  border-color: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
-}
-div.note-important > svg .yelp-svg-fill {
-  fill: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-div.note-danger > svg .yelp-svg-fill {
-  fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
-  animation-name: yelp-note-danger;
-  animation-duration: 2s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-}
-@keyframes yelp-note-danger {
-  from { fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text> }
-  50%  { fill: </xsl:text><xsl:value-of select="$color.gray"/><xsl:text> }
-  to   { fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text> }
-}
-div.note-sidebar {
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  max-width: 206px;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 20px;
-  padding: 6px;
-}
-div.quote {
-  padding: 0;
-  min-height: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
-}
-div.quote > div.inner:before {
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  content: '</xsl:text>
+  <!-- Almost everything is in the text template file, except there's
+       these two bits that aren't because XPath alone can't handle
+       them. We could precompute and pass params, but I'm hesitant
+       to add special-purpose params, which are API. -->
+  <xsl:call-template name="tmpl.file">
+    <xsl:with-param name="file" select="'css/elements.css.tmpl'"/>
+    <xsl:with-param name="node" select="$node"/>
+    <xsl:with-param name="direction" select="$direction"/>
+    <xsl:with-param name="left" select="$left"/>
+    <xsl:with-param name="right" select="$right"/>
+  </xsl:call-template>
+  <!-- FIXME: I don't like this at all. We use a character as the
+       blockquote icon, which requires a whole font, and which random
+       internet users might not have. Let's make SVGs and use the same
+       icon embedding we use for notes. -->
   <xsl:variable name="quote">
     <xsl:for-each select="$node[1]">
       <xsl:call-template name="l10n.gettext">
@@ -1738,6 +1315,9 @@ div.quote > div.inner:before {
     </xsl:for-each>
   </xsl:variable>
   <xsl:variable name="quotc" select="substring(concat($quote, '“'), 1, 1)"/>
+  <xsl:text>div.quote > div.inner:before { float: </xsl:text>
+  <xsl:value-of select="$left"/>
+  <xsl:text>content: '</xsl:text>
   <xsl:choose>
     <xsl:when test="contains('«‹', $quotc)">
       <xsl:text>«</xsl:text>
@@ -1751,10 +1331,10 @@ div.quote > div.inner:before {
     <xsl:otherwise>
       <xsl:text>“</xsl:text>
     </xsl:otherwise>
-  </xsl:choose><xsl:text>';
+  </xsl:choose>
+  <xsl:text>';
   font-family: "Century Schoolbook L";
-  font-size: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
+  font-size: {{$icons.size.quote}}px;
   font-weight: bold;
   line-height: </xsl:text>
   <xsl:choose>
@@ -1766,441 +1346,25 @@ div.quote > div.inner:before {
     </xsl:otherwise>
   </xsl:choose><xsl:text>em;
   margin: 0; padding: 0;
-  height: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
-  width: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
+  height: {{$icons.size.quote}}px;
+  width: {{$icons.size.quote}}px;
   text-align: center;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg.dark"/><xsl:text>;
-}
-div.quote > div.inner > div.title {
-  margin: 0;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
-}
-blockquote {
-  margin: 0; padding: 0;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
-}
-blockquote > *:first-child { margin-top: 0; }
-div.quote > div.inner > div.region > div.cite {
-  margin-top: 0.5em;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
-    <xsl:value-of select="$icons.size.quote"/><xsl:text>px;
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-}
-div.quote > div.inner > div.region > div.cite::before {
-  <!-- FIXME: i18n -->
-  content: '&#x2015; ';
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-}
-div.screen {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-ol.steps, ul.steps {
-  padding: 0.5em 1em 0.5em 1em;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.yellow"/><xsl:text>;
-}
-ol.steps .steps {
-  padding: 0;
-  border: none;
-  background-color: unset;
-}
-li.steps { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em; }
-li.steps li.steps { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2.4em; }
-div.synopsis > div.inner > div.region > div.contents,
-div.synopsis > div.contents, div.synopsis > pre.contents {
-  padding: 0.5em 1em 0.5em 1em;
-  border-top: solid 1px;
-  border-bottom: solid 1px;
-  border-color: </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-div.synopsis > div.inner > div.region > div.desc { font-style: italic; }
-div.synopsis div.code {
-  background: unset;
-  border: none;
-  padding: 0;
-}
-div.synopsis div.code > pre.contents { margin: 0; padding: 0; }
-div.unknown > div.inner > div.region > div.desc { font-style: italic; }
-div.table > div.desc { font-style: italic; }
-tr.shade {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-td.shade {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-tr.shade td.shade {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-}
-
-span.app { font-style: italic; }
-span.cmd {
-  font-family: monospace,monospace; font-size: 0.83em;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  padding: 0 0.2em 0 0.2em;
-}
-span.cmd span.cmd { background-color: unset; padding: 0; }
-pre span.cmd { background-color: unset; padding: 0; }
-span.code {
-  font-family: monospace,monospace; font-size: 0.83em;
-  border-bottom: solid 1px </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-}
-span.code span.code { border: none; }
-pre span.code { border: none; }
-span.em { font-style: italic; }
-span.em-bold {
-  font-style: normal; font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-a span.em-bold {
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-pre span.error {
-  color: </xsl:text><xsl:value-of select="$color.fg.red"/><xsl:text>;
-}
-span.file { font-family: monospace,monospace; font-size: 0.83em; }
-span.gui, span.guiseq { color: </xsl:text>
-  <xsl:value-of select="$color.fg.dark"/><xsl:text>; }
-a span.gui, a span.guiseq { color: </xsl:text>
-  <xsl:value-of select="$color.fg.blue"/><xsl:text>; }
-span.input { font-family: monospace,monospace; font-size: 0.83em; }
-pre span.input {
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-kbd {
-  font-family: inherit;
-  font-size: inherit;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  border-radius: 2px;
-  margin: 0 0.2em 0 0.2em;
-  padding: 0.2em 0.5em 0 0.5em;
-  white-space: nowrap;
-}
-kbd.key-Fn {
-  font-weight: bold;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-span.key a {
-  border-bottom: none;
-}
-a kbd {
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  border-color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-span.keyseq {
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  white-space: nowrap
-}
-a span.keyseq { color: </xsl:text>
-  <xsl:value-of select="$color.fg.blue"/><xsl:text>; }
-span.output { font-family: monospace,monospace; font-size: 0.83em; }
-pre span.output {
-  color: </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-}
-pre span.prompt {
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-span.sys { font-family: monospace,monospace; font-size: 0.83em; }
-span.var { font-style: italic; }
-
-.ui-tile-img .media-controls { display: none; }
-span.media-audio, span.media-video { display: inline-block; }
-audio, video { display: block; margin: 0; }
-div.media > div.inner { display: inline-block; text-align: center; }
-.media-controls {
-  height: 30px;
-  margin: 0; padding: 0;
-  border-left: solid 1px </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  border-right: solid 1px </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  border-bottom: solid 1px </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  background-color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  display: flex;
-  align-items: center;
-}
-.media-controls > * {
-  flex: 0 1 auto;
-}
-.media-controls > input.media-range {
-  flex: 1 0 auto;
-  background-color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  margin: 0 10px;
-  -webkit-appearance: none;
-}
-input.media-range::-webkit-slider-runnable-track {
-  height: 4px;
-  background: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-  border-radius: 2px;
-}
-input.media-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 16px;
-  width: 16px;
-  border-radius: 8px;
-  background: </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  margin-top: -6px;
-}
-input.media-range::-webkit-slider-thumb:hover,
-input.media-range::-webkit-slider-thumb:focus {
-  background: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-input.media-range::-moz-range-track {
-  height: 4px;
-  background: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-  border-radius: 2px;
-}
-input.media-range::-moz-range-thumb {
-  -webkit-appearance: none;
-  height: 16px;
-  width: 16px;
-  border-radius: 8px;
-  background: </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  margin-top: -6px;
-}
-.media-controls-audio {
-  border-top: solid 1px </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  border-radius: 4px;
-}
-button.media-play {
-  height: 30px;
-  padding: 0 6px 0 6px; line-height: 0;
-  background-color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  border: none;
-  border-</xsl:text><xsl:value-of select="$right"/><xsl:text>: solid 1px </xsl:text>
-    <xsl:value-of select="$color.fg"/><xsl:text>;
-}
-button.media-play:hover, button.media-play:focus {
-  background-color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-button.media-play .yelp-svg-fill { fill: </xsl:text>
-  <xsl:value-of select="$color.bg.gray"/><xsl:text>; }
-button.media-play .media-pause { display: none; }
-button.media-play-playing .media-play { display: none; }
-button.media-play-playing .media-pause { display: inline; }
-.media-time {
-  margin: 0;
-  font-size: 16px;
-  height: 30px;
-  line-height: 30px;
-}
-.media-time > span {
-  padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 8px;
-}
-.media-duration {
-  font-size: 12px;
-  color: </xsl:text><xsl:value-of select="$color.bg.dark"/><xsl:text>;
-  opacity: 0.8;
-}
-.media-controls-ttml {
-  min-width: 630px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-div.media-ttml {
-  margin: 0; padding: 6px 0;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  min-height: 24px;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.media-ttml-pre { white-space: pre; }
-.media-ttml-nopre { white-space: normal; }
-div.media-ttml-div {
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  display: none;
-  margin: 0; padding: 0;
-}
-div.media-ttml-p {
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  display: none;
-  margin: 0 auto;
-  max-width: 560px;
-  line-height: 1.44em;
-}
-div.media-ttml-div > * + * { margin-top: 1em; }
-div.yelp-data { display: none; }
-.ui-expander > div.inner > div.title span.title,
-.ui-expander > div.inner > div.hgroup span.title {
-  cursor: default;
-}
-.ui-expander > div.inner > div.title span.title:before,
-.ui-expander > div.inner > div.hgroup span.title:before {
-  font-weight: bold;
-  content: "⌃";
-  display: inline-block;
-  margin: 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  transform: translateY(0.2em) rotate(0deg);
-  -webkit-transform: translateY(0.2em) rotate(0deg);
-  transition: transform 0.2s linear;
-  transform-origin: 50% 30%;
-  -webkit-transform-origin: 50% 30%;
-  -webkit-transition: -webkit-transform 0.2s linear;
-  margin: 0 0.2em;
-}
-.ui-expander-c > div.inner > div.hgroup { border-bottom: none; }
-.ui-expander-e > div.inner > div.title span.title:before,
-.ui-expander-e > div.inner > div.hgroup span.title:before {</xsl:text>
-<xsl:choose>
-<xsl:when test="$direction = 'rtl'">
-  transform: translateY(0.2em) rotate(-180deg);
-  -webkit-transform: translateY(0.2em) rotate(-180deg);
-</xsl:when>
-<xsl:otherwise>
-  transform: translateY(0.2em) rotate(180deg);
-  -webkit-transform: translateY(0.2em) rotate(180deg);
-</xsl:otherwise>
-</xsl:choose><xsl:text>}
-.ui-expander > div.inner > div.title:hover,
-.ui-expander > div.inner > div.hgroup:hover * {
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-.ui-expander > div.inner > div.hgroup > .subtitle {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2em;
-}
-.ui-expander-c > div.inner > div.region {
-  display: none;
-}
-.ui-expander-e > div.inner > div.region {
-  animation-name: yelp-ui-expander-e;
-  animation-duration: 0.2s;
-  animation-fill-mode: forwards;
-  transform-origin: 0 0;
-}
-@keyframes yelp-ui-expander-e {
-  from { transform: scaleY(0); }
-  to   { transform: scaleY(1); }
-}
-div.ui-expander-preview > div.inner > div.region {
-  transform-origin: 0 0;
-  transition: transform 0.2s linear, background-color 0.2s linear;
-  animation-name: none;
-}
-div.ui-expander-preview.ui-expander-c > div.inner {
-  max-height: 100px;
-  overflow: hidden;
-}
-div.ui-expander-preview.ui-expander-c > div.inner > div.region {
-  display: block;
-  transform: scaleY(0.4);
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  cursor: zoom-in;
-}
-div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * {
-  cursor: zoom-in;
-}
-div.ui-expander-preview > div.inner > div.region > * {
-  transform-origin: 0 0;
-  transition: transform 0.2s linear;
-}
-div.ui-expander-preview.ui-expander-c > div.inner > div.region > * {
-  transform: scaleX(0.4);
-}
-section.ui-expander-preview > div.inner > div.region > div.contents{
-  transform-origin: 0 0;
-  transition: transform 0.2s linear, background-color 0.2s linear;
-}
-section.ui-expander-preview.ui-expander-c > div.inner {
-  max-height: 140px;
-  overflow: hidden;
-}
-section.ui-expander-preview.ui-expander-c > div.inner > div.region {
-  display: block;
-}
-section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents {
-  transform: scaleY(0.6);
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-section.ui-expander-preview > div.inner > div.region > div.contents > * {
-  transform-origin: 0 0;
-  transition: transform 0.2s linear;
-}
-section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * {
-  transform: scaleX(0.6);
-}
-section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  cursor: zoom-in;
-}
-@media only screen and (max-width: 480px) {
-  article > div.region > div.contents > div.example,
-  article > div.region > section > div.inner > div.region > div.contents > div.example {
-    margin-left: -10px;
-    margin-right: -10px;
-  }
-  div.example {
-    padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 6px;
-    padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 10px;
-  }
-  article > div.region > div.contents > div.note,
-  article > div.region > section > div.inner > div.region > div.contents > div.note {
-    margin-left: -10px;
-    margin-right: -10px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  article > div.region > div.contents > div.note,
-  article > div.region > section > div.inner > div.region > div.contents > div.note {
-    border-left: none;
-    border-right: none;
-  }
-  div.note-sidebar {
-    float: none;
-    max-width: none;
-    margin-left: inherit;
-    margin-right: inherit;
-    padding-left: inherit;
-    padding-right: inherit;
-  }
-  div.note-sidebar > div.inner > div.title,
-  div.note-sidebar > div.inner > div.region > div.contents {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-  article > div.region > div.contents > div.steps,
-  article > div.region > section > div.inner > div.region > div.contents > div.steps {
-    margin-left: -10px;
-    margin-right: -10px;
-  }
-  div.steps > div.inner > div.title {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-  ol.steps, ul.steps {
-    padding: 0;
-    padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 6px;
-    padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 10px;
-  }
-}
-</xsl:text>
+  color: {{$color.bg.dark}};
+}</xsl:text>
+  <!-- Surely we should be able to figure out a way to conditionalize
+       the rotation direction in the text templates, or handle this a
+       different way. -->
+  <xsl:text>.ui-expander-e > div.inner > div.title span.title:before, </xsl:text>
+  <xsl:text>.ui-expander-e > div.inner > div.hgroup span.title:before {</xsl:text>
+  <xsl:choose>
+    <xsl:when test="$direction = 'rtl'">
+      <xsl:text>transform: translateY(0.2em) rotate(-180deg);</xsl:text>
+    </xsl:when>
+    <xsl:otherwise>
+      <xsl:text>transform: translateY(0.2em) rotate(180deg);</xsl:text>
+    </xsl:otherwise>
+  </xsl:choose>
+  <xsl:text>}</xsl:text>
 </xsl:template>
 
 
@@ -2221,6 +1385,10 @@ is broken up into chunks and wrapped in HTML elements with particular classes.
 This template outputs CSS to match those elements and style them with the
 built-in themeable colors from {color}.
 
+This template uses text templates to keep the actual CSS content in a
+separate file, `css/syntax.css.tmpl`, and do simple param substitutions.
+This makes it easier to update the CSS without working with XSLT.
+
 All parameters can be automatically computed if not provided.
 -->
 <xsl:template name="html.css.syntax">
@@ -2239,56 +1407,14 @@ All parameters can be automatically computed if not provided.
     </xsl:call-template>
   </xsl:param>
   <xsl:if test="$html.syntax.highlight">
-.hljs a {
-  color: inherit;
-  border-bottom: dotted 1px <xsl:value-of select="$color.fg.blue"/>;
-}
-.hljs a:hover, .hljs a:hover * { color: <xsl:value-of select="$color.fg.blue"/>; }
-.hljs-addition {
-  color: <xsl:value-of select="$color.fg.green"/>;
-  background-color: <xsl:value-of select="$color.bg.green"/>;
-}
-.hljs-deletion {
-  color: <xsl:value-of select="$color.fg.red"/>;
-  background-color: <xsl:value-of select="$color.bg.red"/>;
-}
-.hljs-emphasis  { font-style: italic; }
-.hljs-strong    { font-weight: bold; }
-.hljs-attr      { color: <xsl:value-of select="$color.fg.blue"/>; }
-.hljs-attribute { color: <xsl:value-of select="$color.fg.yellow"/>; }
-.hljs-built_in  { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-bullet    { color: <xsl:value-of select="$color.fg.green"/>; }
-.hljs-class     { }
-.hljs-code      { color: <xsl:value-of select="$color.fg.dark"/>; }
-.hljs-comment   { color: <xsl:value-of select="$color.fg.gray"/>; }
-.hljs-doctag    { }
-.hljs-formula   { color: <xsl:value-of select="$color.fg.dark"/>; }
-.hljs-function  { }
-.hljs-keyword   { color: <xsl:value-of select="$color.fg.purple"/>; }
-.hljs-link      { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-literal   { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-meta      { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-name      { color: <xsl:value-of select="$color.fg.red"/>; }
-.hljs-number    { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-params    { color: <xsl:value-of select="$color.fg.orange"/>; }
-.hljs-quote     { color: <xsl:value-of select="$color.fg.gray"/>; }
-.hljs-regexp    { color: <xsl:value-of select="$color.fg.red"/>; }
-.hljs-rest_arg  { }
-.hljs-section   { color: <xsl:value-of select="$color.fg.blue"/>; }
-.hljs-string    { color: <xsl:value-of select="$color.fg.green"/>; }
-.hljs-subst     { }
-.hljs-symbol    { color: <xsl:value-of select="$color.fg.green"/>; }
-.hljs-tag       { color: <xsl:value-of select="$color.fg.red"/>; }
-.hljs-title     { color: <xsl:value-of select="$color.fg.blue"/>; }
-.hljs-type      { }
-.hljs-variable  { }
-.hljs-selector-attr  { }
-.hljs-selector-class { color: <xsl:value-of select="$color.fg.red"/>; }
-.hljs-selector-id    { color: <xsl:value-of select="$color.fg.red"/>; }
-.hljs-selector-tag   { color: <xsl:value-of select="$color.fg.purple"/>; }
-.hljs-template-tag      { }
-.hljs-template-variable { }
-</xsl:if>
+    <xsl:call-template name="tmpl.file">
+      <xsl:with-param name="file" select="'css/syntax.css.tmpl'"/>
+      <xsl:with-param name="node" select="$node"/>
+      <xsl:with-param name="direction" select="$direction"/>
+      <xsl:with-param name="left" select="$left"/>
+      <xsl:with-param name="right" select="$right"/>
+    </xsl:call-template>
+  </xsl:if>
 </xsl:template>
 
 
diff --git a/xslt/common/tmpl.xsl b/xslt/common/tmpl.xsl
new file mode 100644
index 00000000..c52a95cf
--- /dev/null
+++ b/xslt/common/tmpl.xsl
@@ -0,0 +1,162 @@
+<?xml version='1.0' encoding='UTF-8'?><!-- -*- indent-tabs-mode: nil -*- -->
+<!--
+This program is free software; you can redistribute it and/or modify it under
+the terms of the GNU Lesser General Public License as published by the Free
+Software Foundation; either version 2 of the License, or (at your option) any
+later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with this program; see the file COPYING.LGPL. If not, see
+<http://www.gnu.org/licenses/>.
+-->
+
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:dyn="http://exslt.org/dynamic"
+                xmlns:str="http://exslt.org/strings"
+                exclude-result-prefixes="dyn str"
+                version="1.0">
+
+<!--!!==========================================================================
+Text Templates
+Perform simple substitutions in text files.
+@revision[version=40 date=2020-10-16 status=final]
+
+This stylesheet contains templates to perform simple substitutions on text
+and files containing text. The primary purpose of these templates is to allow
+CSS and JavaScript to be maintained in separate files outside the XSLT, but
+still allow those files to reference variables for things like color themes
+and text directionality.
+
+The substitution evaluates anything between `{{` and `}}`. Usually, this will
+be a reference to a parameter or variable, but it can be any XPath expression.
+For example, `{{$color.fg}}` will be replaced with the primary text color.
+
+This syntax is similar to XSLT attribute value templates, except that it uses
+double curly braces to avoid conflicts with the many curly braces used in CSS
+and JavaScript files.
+
+[note .plain]
+This stylesheet was added in version 40.
+-->
+
+
+<!--**==========================================================================
+tmpl.file
+Perform text substitutions on a file.
+@revision[version=40 date=2020-10-16 status=final]
+
+[xsl:params]
+$file: The filename of the file to process for substitutions.
+$node: The node to create CSS for.
+$direction: The directionality of the text, either `ltr` or `rtl`.
+$left: The starting alignment, either `left` or `right`.
+$right: The ending alignment, either `left` or `right`.
+
+This template reads the file specified by the $file parameter and performs
+text substitutions. Due to XSLT limitations, the file must be a well-formed
+XML document. However, this template simply takes the string value of the
+document, so it is sufficient to wrap the text in a dummy element and ensure
+any `<` and `&` characters are escaped.
+
+See {tmpl} for information on the substitution syntax.
+
+[note .plain]
+This template was added in version 40.
+-->
+<xsl:template name="tmpl.file">
+  <xsl:param name="file"/>
+  <xsl:param name="node" select="."/>
+  <xsl:param name="direction">
+    <xsl:call-template name="l10n.direction"/>
+  </xsl:param>
+  <xsl:param name="left">
+    <xsl:call-template name="l10n.align.start">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+  <xsl:param name="right">
+    <xsl:call-template name="l10n.align.end">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+
+  <xsl:for-each select="document($file)">
+    <xsl:call-template name="tmpl.text">
+      <xsl:with-param name="text" select="string(.)"/>
+      <xsl:with-param name="node" select="$node"/>
+      <xsl:with-param name="direction" select="$direction"/>
+      <xsl:with-param name="left" select="$left"/>
+      <xsl:with-param name="right" select="$right"/>
+    </xsl:call-template>
+  </xsl:for-each>
+</xsl:template>
+
+
+<!--**==========================================================================
+tmpl.text
+Perform text substitutions on some text.
+@revision[version=40 date=2020-10-16 status=final]
+
+[xsl:params]
+$text: The text to process for substitutions.
+$node: The node to create CSS for.
+$direction: The directionality of the text, either `ltr` or `rtl`.
+$left: The starting alignment, either `left` or `right`.
+$right: The ending alignment, either `left` or `right`.
+
+This template performs text substitutions on the text in $text. It is called
+by {tmpl.file}, and it calls itself recursively after each substitution.
+
+See {tmpl} for information on the substitution syntax.
+
+[note .plain]
+This template was added in version 40.
+-->
+<xsl:template name="tmpl.text">
+  <xsl:param name="text" select="''"/>
+  <xsl:param name="node" select="."/>
+  <xsl:param name="direction">
+    <xsl:call-template name="l10n.direction"/>
+  </xsl:param>
+  <xsl:param name="left">
+    <xsl:call-template name="l10n.align.start">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+  <xsl:param name="right">
+    <xsl:call-template name="l10n.align.end">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+  <xsl:choose>
+    <xsl:when test="contains($text, '{{')">
+      <xsl:variable name="aft" select="substring-after($text, '{{')"/>
+      <xsl:choose>
+        <xsl:when test="contains($aft, '}}')">
+          <xsl:value-of select="substring-before($text, '{{')"/>
+          <xsl:value-of select="dyn:evaluate(substring-before($aft, '}}'))"/>
+          <xsl:call-template name="tmpl.text">
+            <xsl:with-param name="text" select="substring-after($aft, '}}')"/>
+            <xsl:with-param name="node" select="$node"/>
+            <xsl:with-param name="direction" select="$direction"/>
+            <xsl:with-param name="left" select="$left"/>
+            <xsl:with-param name="right" select="$right"/>
+          </xsl:call-template>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="$text"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:when>
+    <xsl:otherwise>
+      <xsl:value-of select="$text"/>
+    </xsl:otherwise>
+  </xsl:choose>
+</xsl:template>
+
+</xsl:stylesheet>
diff --git a/xslt/dita/html/dita2xhtml.xsl b/xslt/dita/html/dita2xhtml.xsl
index 869b0010..e18c8cff 100644
--- a/xslt/dita/html/dita2xhtml.xsl
+++ b/xslt/dita/html/dita2xhtml.xsl
@@ -30,6 +30,7 @@ REMARK: Describe this module
 <xsl:import href="../../common/icons.xsl"/>
 <xsl:import href="../../common/html.xsl"/>
 <xsl:import href="../../common/ttml.xsl"/>
+<xsl:import href="../../common/tmpl.xsl"/>
 <xsl:import href="../../common/utils.xsl"/>
 
 <xsl:import href="../common/dita-map.xsl"/>
diff --git a/xslt/docbook/html/Makefile.am b/xslt/docbook/html/Makefile.am
index a25394a8..8a3afa3b 100644
--- a/xslt/docbook/html/Makefile.am
+++ b/xslt/docbook/html/Makefile.am
@@ -6,7 +6,6 @@ xsl_DATA =				\
 	db2html-callout.xsl		\
 	db2html-classsynopsis.xsl	\
 	db2html-cmdsynopsis.xsl		\
-	db2html-css.xsl			\
 	db2html-division.xsl		\
 	db2html-ebnf.xsl		\
 	db2html-footnote.xsl		\
diff --git a/xslt/docbook/html/db2html-css.xsl b/xslt/docbook/html/db2html-css.xsl
deleted file mode 100644
index 496a3718..00000000
--- a/xslt/docbook/html/db2html-css.xsl
+++ /dev/null
@@ -1,224 +0,0 @@
-<?xml version='1.0' encoding='UTF-8'?><!-- -*- indent-tabs-mode: nil -*- -->
-<!--
-This program is free software; you can redistribute it and/or modify it under
-the terms of the GNU Lesser General Public License as published by the Free
-Software Foundation; either version 2 of the License, or (at your option) any
-later version.
-
-This program is distributed in the hope that it will be useful, but WITHOUT
-ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
-FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
-details.
-
-You should have received a copy of the GNU Lesser General Public License
-along with this program; see the file COPYING.LGPL.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                xmlns="http://www.w3.org/1999/xhtml"
-                version="1.0">
-
-<!--!!==========================================================================
-DocBook to HTML - CSS
-
-REMARK: Describe this module
--->
-
-
-<xsl:template mode="html.css.mode" match="*">
-  <xsl:param name="direction">
-    <xsl:call-template name="l10n.direction"/>
-  </xsl:param>
-  <xsl:param name="left">
-    <xsl:call-template name="l10n.align.start">
-      <xsl:with-param name="direction" select="$direction"/>
-    </xsl:call-template>
-  </xsl:param>
-  <xsl:param name="right">
-    <xsl:call-template name="l10n.align.end">
-      <xsl:with-param name="direction" select="$direction"/>
-    </xsl:call-template>
-  </xsl:param>
-  <xsl:text>
-div.hgroup.bridgehead { margin-top: 1em; }
-
-<!-- == common == -->
-sub { font-size: 0.83em; }
-sub sub { font-size: 1em; }
-sup { font-size: 0.83em; }
-sup sup { font-size: 1em; }
-table.table-pgwide { width: 100%; }
-table.table-rules-groups thead + *, table.table-rules-rows thead + *,
-table.table-rules-groups tfoot + *, table.table-rules-rows tfoot + *,
-table.table-rules-groups tbody + *, table.table-rules-rows tbody + *,
-table.table-rules-rows tr + * { border-top: solid 1px; }
-table.table-rules-cols td + *, table.table-rules-cols th + * {
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 1px;
-}
-
-td.td-colsep { border-</xsl:text><xsl:value-of select="$right"/><xsl:text>: solid 1px; }
-td.td-rowsep { border-bottom: solid 1px; }
-
-<!-- == bibliography == -->
-span.bibliolabel {
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-div.biblioentry span.title {
-  font-weight: normal;
-  font-style: italic;
-}
-span.citetitle {
-  font-style: italic;
-}
-
-<!-- == block == -->
-div.epigraph {
-  text-align: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 20%;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-div.programlisting .userinput {
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-div.address, div.literallayout { white-space: pre; }
-
-
-<!-- == footnotes == -->
-div.footnotes {
-  border-top: solid 2px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-div.footnote { margin-top: 1.44em; }
-sup.footnote { font-size: 0.83em; }
-a.footnote {
-  font-weight: bold;
-  text-decoration: none;
-  border-bottom: none;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-radius: 2px;
-}
-div.footnote > a.footnote {
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0.83em;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-div.footnote > a.footnote + p { display: inline-block; margin: 0; }
-a.footnote:hover, div.footnote > a.footnote:hover {
-  background-color: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  box-shadow: 0 0 2px </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-}
-
-<!-- == indexes == -->
-dt.ixprimary {
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-dt.ixprimary * { font-style: normal; }
-dt.ixprimary + dt.ixprimary { margin-top: 1em; }
-dd.ixsecondary {
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-}
-dt.ixsecondary, dt.ixtertiary { margin-top: 0.2em; }
-dd.ixlink, dd.ixsee, dd.ixseealso {
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-}
-dd.ixlink + dd, dd.ixsee + dd, dd.ixseealso + dd {
-  margin-top: 0.2em;
-}
-dt.ixsecondary:before, dt.ixtertiary:before {
-  content: "⏺";
-  color: </xsl:text><xsl:value-of select="$color.fg.gray"/><xsl:text>;
-}
-dd.ixlink:before {
-  content: "⏺";
-  color: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-dd.ixsee:before, dd.ixseealso:before {
-  content: "⏺";
-  color: </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-}
-
-<!-- == unsorted == -->
-dl.index dt { margin-top: 0; }
-dl.index dd { margin-top: 0; margin-bottom: 0; }
-dl.indexdiv dt { margin-top: 0; }
-dl.indexdiv dd { margin-top: 0; margin-bottom: 0; }
-dl.setindex dt { margin-top: 0; }
-dl.setindex dd { margin-top: 0; margin-bottom: 0; }
-div.simplelist { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.72em; }
-div.simplelist table { margin-left: 0; border: none; }
-div.simplelist td {
-  padding: 0.5em;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 1px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-div.simplelist td:first-child {
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-}
-
-span.accel { text-decoration: underline; }
-span.email { font-family: monospace,monospace; font-size: 0.83em; }
-span.firstterm { font-style: italic; }
-span.foreignphrase { font-style: italic; }
-
-dt.glossterm span.glossterm { font-style: normal; }
-<!--
-dt.glossterm { margin-left: 0em; }
-dd + dt.glossterm { margin-top: 2em; }
-dd.glossdef, dd.glosssee, dd.glossseealso { margin-top: 0em;  margin-bottom: 0; }
--->
-
-span.glossterm { font-style: italic; }
-
-span.lineannotation { font-style: italic; }
-span.medialabel { font-style: italic; }
-.methodparam span.parameter { font-style: italic; }
-span.paramdef span.parameter { font-style: italic; }
-span.prompt { font-family: monospace,monospace; font-size: 0.83em; }
-span.wordasword { font-style: italic; }
-<!-- FIXME below -->
-
-dt.question {
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-dd + dt.question { margin-top: 1em; }
-dd.answer {
-  margin-top: 1em;
-  margin-left: 2em;
-  margin-right: 2em;
-}
-div.qanda-label {
-  line-height: 1.44em;
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-dl.qandaset ol, dl.qandaset ul, dl.qandaset table { clear: both; }
-
-div.synopfragment { padding-top: 0.5em; }
-span.co {
-  border-radius: 4px;
-  background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  outline: solid 1px </xsl:text>
-  <xsl:value-of select="$color.yellow"/><xsl:text>;
-}
-span.co a { text-decoration: none; }
-span.co a:hover { text-decoration: none; }
-div.co {
-  margin: 0;
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  clear: both;
-}
-</xsl:text>
-</xsl:template>
-
-</xsl:stylesheet>
diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl
index 1679d712..a40c32e2 100644
--- a/xslt/docbook/html/db2html-division.xsl
+++ b/xslt/docbook/html/db2html-division.xsl
@@ -59,7 +59,6 @@ common {html} stylesheet.
 <!--%# html.sidebar.contents.mode -->
 <xsl:template mode="html.sidebar.contents.mode" match="*">
   <xsl:param name="side"/>
-  <xsl:param name="side"/>
   <div class="sidebar-contents">
     <div class="inner">
       <div class="title">
@@ -152,6 +151,30 @@ common {html} stylesheet.
   </xsl:if>
 </xsl:template>
 
+<!--%# html.css.mode -->
+<xsl:template mode="html.css.mode" match="*">
+  <xsl:param name="direction">
+    <xsl:call-template name="l10n.direction"/>
+  </xsl:param>
+  <xsl:param name="left">
+    <xsl:call-template name="l10n.align.start">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+  <xsl:param name="right">
+    <xsl:call-template name="l10n.align.end">
+      <xsl:with-param name="direction" select="$direction"/>
+    </xsl:call-template>
+  </xsl:param>
+  <xsl:call-template name="tmpl.file">
+    <xsl:with-param name="file" select="'css/docbook.css.tmpl'"/>
+    <xsl:with-param name="node" select="."/>
+    <xsl:with-param name="direction" select="$direction"/>
+    <xsl:with-param name="left" select="$left"/>
+    <xsl:with-param name="right" select="$right"/>
+  </xsl:call-template>
+</xsl:template>
+
 
 <!--**==========================================================================
 db2html.division.div
diff --git a/xslt/docbook/html/db2xhtml.xsl b/xslt/docbook/html/db2xhtml.xsl
index bc12a788..3aa47f75 100644
--- a/xslt/docbook/html/db2xhtml.xsl
+++ b/xslt/docbook/html/db2xhtml.xsl
@@ -32,6 +32,7 @@ DocBook documents into XHTML. This stylesheet sets the parameter
 <xsl:import href="../../common/color.xsl"/>
 <xsl:import href="../../common/icons.xsl"/>
 <xsl:import href="../../common/html.xsl"/>
+<xsl:import href="../../common/tmpl.xsl"/>
 <xsl:import href="../../common/utils.xsl"/>
 
 <xsl:import href="../common/db-chunk.xsl"/>
@@ -48,7 +49,6 @@ DocBook documents into XHTML. This stylesheet sets the parameter
 <xsl:include href="db2html-callout.xsl"/>
 <xsl:include href="db2html-classsynopsis.xsl"/>
 <xsl:include href="db2html-cmdsynopsis.xsl"/>
-<xsl:include href="db2html-css.xsl"/>
 <xsl:include href="db2html-division.xsl"/>
 <xsl:include href="db2html-ebnf.xsl"/>
 <xsl:include href="db2html-funcsynopsis.xsl"/>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index f6f793b7..fe67287b 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -983,6 +983,15 @@ are processed in {mal2html.block.mode}.
   </xsl:if>
 </xsl:template>
 
+<!-- We need this in the CSS, but the text templates can't xsl:call-template -->
+<xsl:variable name="_color.link_button_hover">
+  <xsl:call-template name="color.blend">
+    <xsl:with-param name="bg" select="$color.blue"/>
+    <xsl:with-param name="fg" select="$color.bg"/>
+    <xsl:with-param name="mix" select="0.1"/>
+  </xsl:call-template>
+</xsl:variable>
+
 <!--%# html.css.mode -->
 <xsl:template mode="html.css.mode" match="mal:page">
   <xsl:param name="direction">
@@ -998,559 +1007,22 @@ are processed in {mal2html.block.mode}.
       <xsl:with-param name="direction" select="$direction"/>
     </xsl:call-template>
   </xsl:param>
-<xsl:text>
-<!-- links -->
-div.links .desc a {
-  color: inherit;
-}
-div.links .desc a:hover {
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-a.bold { font-weight: bold; }
-
-<!-- link/@style = 'button' -->
-div.link-button {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-.link-button a {
-  display: inline-block;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-  text-shadow: </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text> 1px 1px 0px;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  padding: 0.2em 0.83em 0.2em 0.83em;
-  border-radius: 4px;
-}
-.link-button a:visited {
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-}
-.link-button a:hover {
-  text-decoration: none;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-  background-color: </xsl:text>
-<xsl:call-template name="color.blend">
-<xsl:with-param name="bg" select="$color.blue"/>
-<xsl:with-param name="fg" select="$color.bg"/>
-<xsl:with-param name="mix" select="0.1"/>
-</xsl:call-template><xsl:text>
-}
-div.link-button a .desc {
-  display: block;
-  font-weight: normal;
-  font-size: 0.83em;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-
-<!-- @style = 'float*' -->
-div.floatleft {
-  float: left;
-  margin-right: 1em;
-}
-div.floatright {
-  float: right;
-  margin-left: 1em;
-}
-div.floatstart {
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
-}
-div.floatend {
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-
-<!-- FIXME -->
-div.title-heading h1, div.title-heading h2, div.title-heading h3,
-div.title-heading h4, div.title-heading h5, div.title-heading h6 {
-  font-size: 1.72em;
-  font-weight: bold;
-}
-ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
-div.links-heading > a { font-size: 1.72em; font-weight: bold; }
-ul.links-heading > li > div.desc { margin-top: 0.5em; }
-
-div.links-uix-hover {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-ul.links-uix-hover { flex-grow: 1; }
-ul.links-uix-hover li { margin: 0; padding: 0; }
-ul.links-uix-hover a {
-  display: block;
-  padding: 8px 1.2em;
-  border-bottom: none;
-}
-ul.links-uix-hover a:hover, ul.links-uix-hover a:focus {
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-ul.links-uix-hover img {
-  display: block;
-  position: absolute;
-  top: 0; </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  visibility: hidden;
-  opacity: 0.0;
-  transition: opacity 0.6s, visibility 0.6s;
-}
-ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img {
-  visibility: visible;
-  opacity: 1.0;
-  transition: opacity 0.2s, visibility 0.2s;
-}
-@media only screen and (max-width: 480px) {
-  div.links-uix-hover-img { display: none; }
-  ul.links-uix-hover img { display: none; }
-  ul.links-uix-hover li {
-    margin-left: -10px; margin-right: -10px;
-  }
-  ul.links-uix-hover li a {
-    padding: 10px;
-  }
-}
-
-<!-- uix:overlay -->
-div.ui-overlay-screen {
-  position: fixed;
-  margin: 0;
-  left: 0; top: 0;
-  width: 100%; height: 100%;
-  background: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  animation-name: yelp-overlay-screen;
-  animation-duration: 0.8s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-overlay-screen {
-  from { opacity: 0.0; }
-  to   { opacity: 0.6; }
-}
-div.ui-overlay {
-  display: none;
-  position: fixed;
-  text-align: center;
-  top: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-div.ui-overlay-show {
-  animation-name: yelp-overlay-slide;
-  animation-duration: 0.8s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-overlay-slide {
-  from { transform: translateY(-400px) translateX(-50%); }
-  to   { transform: translateY(0) translateX(-50%); }
-}
-div.ui-overlay > div.inner {
-  display: inline-block;
-  padding: 8px;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border-radius: 4px;
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-}
-div.ui-overlay img, div.ui-overlay video {
-  max-height: 80vh;
-  max-width: 90vw;
-}
-div.ui-overlay > div.inner > div.title { margin-top: -4px; }
-a.ui-overlay-close {
-  display: block;
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  width: 30px; height: 30px;
-  font-size: 22px; line-height: 30px;
-  font-weight: bold;
-  margin-top: -28px;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: -26px;
-  padding: 1px 2px 3px 2px;
-  text-align: center;
-  border: none;
-  border-radius: 50%;
-  background-color: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-  color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-}
-div.links-tiles {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: stretch;
-  vertical-align: top;
-  clear: both;
-  margin: 0 -10px;
-}
-div.links-tile {
-  max-width: 300px;
-  flex: 1 0 300px;
-  vertical-align: top;
-  margin: 0;
-  padding: 10px;
-}
-div.links-tiles > div.links-tile { max-width: none; }
-div.links-tile:empty { padding: 0 10px; height: 0; }
-div.links-tile > a {
-  display: block;
-  vertical-align: top;
-  padding: 10px;
-  border-radius: 4px;
-  border: none;
-}
-div.links-tile > a:hover {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-div.links-tile > a > span.links-tile-img {
-  display: block;
-  text-align: center;
-}
-div.links-tile > a > span.links-tile-img > img {
-  width: 100%;
-  border-radius: 3px;
-}
-div.links-tile > a > span.links-tile-text > span.title {
-  display: block;
-  font-weight: bold;
-}
-div.links-tile > a > span.links-tile-text > * + span.title {
-  margin-top: 0.5em;
-}
-div.links-tile > a > span.links-tile-text > span.desc {
-  display: block;
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- links/@style = 'grid' -->
-div.links-grid-container {
-  margin-left: -10px;
-  margin-right: -10px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  vertical-align: top;
-  clear: both;
-}
-div.links-grid {
-  flex: 1 0 300px;
-  padding: 10px;
-}
-div.links-grid:empty { padding: 0 10px; height: 0; }
-div.links-grid-link { font-weight: bold; }
-div.links-grid > div.desc {
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- FIXME -->
-<!-- links/@style = 'norwich' -->
-div.links-norwich {
-  width: 900px;
-}
-div.links-norwich-primary {
-  float: left;
-  vertical-align: top;
-  margin: 0; padding: 0;
-}
-div.links-norwich-big {
-  vertical-align: top;
-  display: inline-block;
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>, </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>);
-  margin: 0 20px 20px 0;
-}
-div.links-norwich-big + div.links-norwich-big {
-  background: </xsl:text><xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>, </xsl:text>
-    <xsl:value-of select="$color.yellow"/><xsl:text>);
-}
-div.links-norwich-big a {
-  display: block;
-  width: 230px;
-  height: 500px;
-  height: 320px;
-  padding: 9px;
-  font-size: 1.2em;
-  color:  </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-  background-repeat: no-repeat;
-  background-position: right -80px bottom -80px;
-}
-div.links-norwich-big a:hover {
-  border: solid 1px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-div.links-norwich-big a span.title {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-div.links-norwich-big a .desc {
-  color:  </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  font-weight: normal;
-}
-div.links-norwich-secondary {
-  vertical-align: top;
-  margin: 0; padding: 0;
-}
-div.links-norwich-small {
-  display: inline-block;
-  vertical-align: top;
-  background: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  margin: 0 20px 20px 0;
-}
-div.links-norwich-small a {
-  display: block;
-  width: 140px;
-  height: 140px;
-  padding: 9px;
-  font-weight: bold;
-  color:  </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-  background-repeat: no-repeat;
-  background-position: right 4px bottom 4px;
-}
-div.links-norwich-small a:hover {
-  border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
-  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-@media only screen and (max-width: 900px) {
-  div.links-norwich {
-    width: 720px;
-  }
-}
-@media only screen and (max-width: 720px) {
-  div.links-norwich {
-    width: 540px;
-  }
-}
-@media only screen and (max-width: 540px) {
-  div.links-norwich {
-    width: 100%;
-  }
-  div.links-norwich-big {
-    width: 100%;
-    margin-right: 0;
-  }
-  div.links-norwich-big a {
-    width: auto;
-  }
-}
-
-<!-- links/@type = 'topic' and @style = '2column' -->
-div.links-divs {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-a.linkdiv {
-  display: block;
-  margin: 0;
-  padding: 10px;
-  border-bottom: none;
-}
-a.linkdiv:hover {
-  text-decoration: none;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-a.linkdiv > span.title {
-  display: block;
-  margin: 0;
-  font-size: 1em;
-  font-weight: bold;
-  color: inherit;
-}
-a.linkdiv > span.desc {
-  display: block;
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-span.linkdiv-dash { display: none; }
-div.links-twocolumn {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  vertical-align: top;
-  margin-left: -10px;
-  margin-right: -10px;
-}
-div.links-twocolumn > div.links-divs {
-  flex: 1 0 320px;
-  vertical-align: top;
-  margin: 0;
-}
-
-<!-- FIXME -->
-div.comment {
-  padding: 0.5em;
-  border: solid 2px </xsl:text>
-    <xsl:value-of select="$color.red"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.red"/><xsl:text>;
-}
-div.comment div.comment {
-  margin: 1em 1em 0 1em;
-}
-div.comment div.cite {
-  margin: 0 0 0.5em 0;
-  font-style: italic;
-}
-
-<!-- FIXME -->
-div.tree > div.inner > div.title { margin-bottom: 0.5em; }
-ul.tree {
-  margin: 0; padding: 0;
-  list-style-type: none;
-}
-li.tree { margin: -2px 0 0 0; padding: 0; }
-li.tree div { margin: 0; padding: 0; }
-ul.tree ul.tree {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-}
-div.tree-lines ul.tree { margin-left: 0; }
-
-<!-- FIXME -->
-span.hi {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.hi.hi-ins {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.green"/><xsl:text>;
-}
-span.hi.hi-del {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.red"/><xsl:text>;
-  text-decoration: line-through;
-}
-span.hi.hi-ins ins { text-decoration: none; }
-span.hi.hi-del del { text-decoration: none; }
-span.hi.hi-red { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-span.hi.hi-orange { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.orange"/><xsl:text>; }
-span.hi.hi-yellow { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.yellow"/><xsl:text>; }
-span.hi.hi-green { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.green"/><xsl:text>; }
-span.hi.hi-blue { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.blue"/><xsl:text>; }
-span.hi.hi-purple { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.purple"/><xsl:text>; }
-span.hi.hi-gray { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.gray"/><xsl:text>; }
-
-<!-- experimental/gloss -->
-dt.gloss-term {
-  margin-top: 1.2em;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; }
-dt.gloss-term + dd { margin-top: 0.2em; }
-dd.gloss-link {
-  margin: 0 0.2em 0 0.2em;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-dd.gloss-def {
-  margin: 0 0.2em 1em 0.2em;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-a.gloss-term {
-  position: relative;
-  border-bottom: dashed 1px </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-}
-a.gloss-term:hover {
-  text-decoration: none;
-  border-bottom-style: solid;
-}
-span.gloss-desc {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  margin: 0;
-  </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  top: 1.2em;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  min-width: 12em;
-  max-width: 24em;
-  overflow: hidden;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.yellow"/><xsl:text>;
-  box-shadow: 2px 2px 4px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc {
-  display: inline-block;
-  animation-name: yelp-gloss-fade;
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-gloss-fade {
-  from { opacity: 0.0; }
-  to   { opacity: 1.0; }
-}
-
-<!-- conditional processing -->
-.if-if { display: none; }
-.if-choose, .if-when, .if-else { margin: 0; padding: 0; }
-.if-choose > .if-when { display: none; }
-.if-choose > .if-else { display: block; }
-.if-if.if__not-target-mobile { display: block; }
-.if-choose.if__not-target-mobile > .if-when { display: block; }
-.if-choose.if__not-target-mobile > .if-else { display: none; }
-@media only screen and (max-width: 480px) {
-  .if-if.if__target-mobile { display: block; }
-  .if-if.if__not-target-mobile { display: none; }
-  .if-choose.if__target-mobile > .if-when { display: block; }
-  .if-choose.if__target-mobile > .if-else { display: none; }
-  .if-choose.if__not-target-mobile > .if-when { display: none; }
-  .if-choose.if__not-target-mobile > .if-else { display: block; }
-}
-</xsl:text>
-<xsl:if test="$mal2html.editor_mode">
-<xsl:text>
-div.note-version {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-span.status {
-  font-size: 0.83em;
-  font-weight: normal;
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.red"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-</xsl:text>
-</xsl:if>
+  <xsl:call-template name="tmpl.file">
+    <xsl:with-param name="file" select="'css/mallard.css.tmpl'"/>
+    <xsl:with-param name="node" select="."/>
+    <xsl:with-param name="direction" select="$direction"/>
+    <xsl:with-param name="left" select="$left"/>
+    <xsl:with-param name="right" select="$right"/>
+  </xsl:call-template>
+  <xsl:if test="$mal2html.editor_mode">
+    <xsl:call-template name="tmpl.file">
+      <xsl:with-param name="file" select="'css/mallard-editor.css.tmpl'"/>
+      <xsl:with-param name="node" select="."/>
+      <xsl:with-param name="direction" select="$direction"/>
+      <xsl:with-param name="left" select="$left"/>
+      <xsl:with-param name="right" select="$right"/>
+    </xsl:call-template>
+  </xsl:if>
 </xsl:template>
 
 <!--%# html.js.mode -->
diff --git a/xslt/mallard/html/mal2xhtml.xsl b/xslt/mallard/html/mal2xhtml.xsl
index 9f54a663..f84ca976 100644
--- a/xslt/mallard/html/mal2xhtml.xsl
+++ b/xslt/mallard/html/mal2xhtml.xsl
@@ -37,6 +37,7 @@ and {ttml.features}.
 <xsl:import href="../../common/icons.xsl"/>
 <xsl:import href="../../common/html.xsl"/>
 <xsl:import href="../../common/ttml.xsl"/>
+<xsl:import href="../../common/tmpl.xsl"/>
 <xsl:import href="../../common/utils.xsl"/>
 
 <xsl:import href="../common/mal-gloss.xsl"/>