 renderCSS = (v, rp = '') -> # v: style objects keyed by token type, rp: css rule prefix
   join G.map (g) ->
     h = $.extend {}, g.d, v[g.t] # h: effective style
-    selector = g.c.split(',').map((x) -> rp + ' ' + x).join ','
-    "#{selector}{color:#{h.fg};" +
+    g.c.split(',').map((x) -> rp + ' ' + x).join(',') + '{' +
+      (h.fg         && "color:#{h.fg};"             || '') +
       (h.bg         && "background-color:#{h.bg};"  || '') +
       (h.bold       && 'font-weight:bold;'          || '') +
       (h.italic     && 'font-style:italic;'         || '') +

    <div id=col-settings>
      <datalist id=col-list>#{join u.map (c) -> "<option value=#{c}>"}</datalist>
      <select id=col-group>#{join G.map (g, i) -> "<option value=#{i}>#{g.s}"}</select>
      <p><label>Foreground: <input type=color id=col-fg list=col-list></label>
      <p><label>Background: <input type=color id=col-bg list=col-list></label>
      <p><label><input type=checkbox id=col-bold      ><b>B</b></label>
         <label><input type=checkbox id=col-italic    ><i>I</i></label>
         <label><input type=checkbox id=col-underlined><u>U</u></label>


selectGroup = (i, forceRefresh) ->
  if i != sel || forceRefresh
    h = model[i]; $('#col-group').val i
    $('#col-fg-cb').prop 'checked', !!h.fg; $('#col-fg').val(h.fg).toggle !!h.fg
    $('#col-bg-cb').prop 'checked', !!h.bg; $('#col-bg').val(h.bg).toggle !!h.bg
    $('#col-bold'      ).prop 'checked', !!h.bold
    $('#col-italic'    ).prop 'checked', !!h.italic
    $('#col-underlined').prop 'checked', !!h.underlined
