diff --git a/vasl_templates/webapp/data/default-template-pack/ob_vo_note.css b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.css
new file mode 100644
index 0000000..528b665
--- /dev/null
+++ b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.css
@@ -0,0 +1,23 @@
+/* NOTE: This CSS is split out into a separate file so we can apply it when generating Chapter H notes as images. */
+
+img.piece { float: left ; margin-right: 0.5em ; }
+
+.header { margin-bottom: 0.25em ; }
+.header .note-number { font-weight: bold ; }
+.header .name { font-weight: bold ; font-style: italic ; }
+
+.content { text-align: justify ; }
+.content p { margin-top: 5px ; }
+.content ul { margin-left: 0 ; padding-left: 25px ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
+.content li { margin-bottom: 2px ; }
+.content .example { font-size: 90% ; font-style: italic ; }
+.content .rf { font-style: italic ; color: #444 ; }
+.content .lfloat { float: left ; margin-right: 0.5em ; }
+.content .rfloat { float: right ; margin-left: 0.5em ; }
+.content table { margin: 0 10px 0 10px ; margin-top: -0.5em ; }
+.content table th { padding: 2px 10px 2px 5px ; text-align: left ; background: #f0f0f0 ; }
+.content table td { padding: 0 10px 0 5px ; }
+
+table.layout td { padding: 0 5px 0 5px ; }
+
+.content .rf { display: none ; }
diff --git a/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2 b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2
index eb54ce6..30721b8 100644
--- a/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2
@@ -2,25 +2,7 @@
-
+
diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js
index 0bfdf9b..c33593f 100644
--- a/vasl_templates/webapp/static/snippets.js
+++ b/vasl_templates/webapp/static/snippets.js
@@ -375,8 +375,10 @@ function make_snippet( $btn, params, extra_params, show_date_warnings )
var templ = get_template( template_id, true ) ;
if ( templ === null )
return { content: "[error: can't find template]" } ;
- for ( var incl in gTemplatePack.includes )
- templ = strReplaceAll( templ, "{{INCLUDE:"+incl+"}}", gTemplatePack.includes[incl] ) ;
+ for ( var key in gTemplatePack.css )
+ templ = strReplaceAll( templ, "{{CSS:"+key+"}}", gTemplatePack.css[key] ) ;
+ for ( key in gTemplatePack.includes )
+ templ = strReplaceAll( templ, "{{INCLUDE:"+key+"}}", gTemplatePack.includes[key] ) ;
var func ;
try {
func = jinja.compile( templ ).render ;
diff --git a/vasl_templates/webapp/vo_notes.py b/vasl_templates/webapp/vo_notes.py
index 952f316..2a0fa08 100644
--- a/vasl_templates/webapp/vo_notes.py
+++ b/vasl_templates/webapp/vo_notes.py
@@ -236,7 +236,7 @@ def _make_vo_note_html( vo_note ):
url_root = url_root[:-1]
# inject the CSS (we do it like this since VASSAL doesn't support :-/)
- css = globvars.template_pack.get( "css", {} ).get( "vo_note" )
+ css = globvars.template_pack.get( "css", {} ).get( "ob_vo_note" )
if css:
vo_note = "\n\n\n\n{}".format( css, vo_note )