style fixes

6 files changed, 130 insertions, 180 deletions

diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 5fb894c1..ed6d3dd8 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -284,19 +284,19 @@ templates['fields.html'] = template({"1":function(container,depth0,helpers,parti
 templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"kanji-definition\">\n    <div class=\"action-bar\">\n"
+  return "<p>\n    <div class=\"actions\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    </div>\n\n    <div class=\"kanji-glyph\">"
+    + "    </div>\n\n    <div class=\"glyph\">"
     + container.escapeExpression(((helper = (helper = helpers.character || (depth0 != null ? depth0.character : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"character","hash":{},"data":data}) : helper)))
-    + "</div>\n\n    <div class=\"kanji-reading\">\n        <table>\n            <tr>\n                <th>Kunyomi:</th>\n                <td>\n"
+    + "</div>\n\n    <div class=\"reading\">\n        <table>\n            <tr>\n                <th>Kunyomi:</th>\n                <td>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "                </td>\n            </tr>\n            <tr>\n                <th>Onyomi:</th>\n                <td>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "                </td>\n            </tr>\n        </table>\n    </div>\n\n    <div class=\"kanji-tags\">\n"
+    + "                </td>\n            </tr>\n        </table>\n    </div>\n\n    <div>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    </div>\n\n    <div class=\"kanji-glossary\">\n"
+    + "    </div>\n\n    <div class=\"glossary\">\n"
     + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.program(13, data, 0),"data":data})) != null ? stack1 : "")
-    + "    </div>\n</div>\n";
+    + "    </div>\n</p>\n";
 },"2":function(container,depth0,helpers,partials,data) {
     var helper;
 
@@ -315,7 +315,7 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 },"7":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "            <span class=\"tag tag-"
+  return "            <span class=\"label label-default tag-"
     + alias4(((helper = (helper = helpers.category || (depth0 != null ? depth0.category : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"category","hash":{},"data":data}) : helper)))
     + "\" title=\""
     + alias4(((helper = (helper = helpers.notes || (depth0 != null ? depth0.notes : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"notes","hash":{},"data":data}) : helper)))
@@ -325,12 +325,12 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 },"9":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "            <ol \"kanji-glossary-group\">\n"
+  return "            <ol>\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "            </ol>\n";
 },"10":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "                    <li><span class=\"kanji-glossary-item\">";
+  "                    <li><span class=\"glossary-item\">";
   stack1 = ((helper = (helper = helpers.multiLine || (depth0 != null ? depth0.multiLine : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"multiLine","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.multiLine) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -339,7 +339,7 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
     return container.escapeExpression(container.lambda(depth0, depth0));
 },"13":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "            <div class=\"kanji-glossary-group kanji-glossary-item\">";
+  "            <div class=\"glossary-item\">";
   stack1 = ((helper = (helper = helpers.multiLine || (depth0 != null ? depth0.multiLine : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"multiLine","hash":{},"fn":container.program(14, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.multiLine) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -402,13 +402,13 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
 },"2":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <div class=\"term-tags\">\n"
+  return "        <div>\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </div>\n";
 },"3":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "                <span class=\"tag tag-"
+  return "                <span class=\"label label-default tag-"
     + alias4(((helper = (helper = helpers.category || (depth0 != null ? depth0.category : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"category","hash":{},"data":data}) : helper)))
     + "\" title=\""
     + alias4(((helper = (helper = helpers.notes || (depth0 != null ? depth0.notes : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"notes","hash":{},"data":data}) : helper)))
@@ -418,12 +418,12 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
 },"5":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <ul class=\"term-glossary-group\">\n"
+  return "        <ul>\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ul>\n";
 },"6":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "                <li><span class=\"term-glossary-item\">";
+  "                <li><span class=\"glossary-item\">";
   stack1 = ((helper = (helper = helpers.multiLine || (depth0 != null ? depth0.multiLine : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"multiLine","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.multiLine) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -432,7 +432,7 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
     return container.escapeExpression(container.lambda(depth0, depth0));
 },"9":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "        <div class=\"term-glossary-group term-glossary-item\">";
+  "        <div class=\"glossary-item\">";
   stack1 = ((helper = (helper = helpers.multiLine || (depth0 != null ? depth0.multiLine : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"multiLine","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.multiLine) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -444,16 +444,16 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
 },"12":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"term-definition\">\n    <div class=\"action-bar\">\n"
+  return "<p>\n    <div class=\"actions\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.playback : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(17, data, 0),"inverse":container.program(20, data, 0),"data":data})) != null ? stack1 : "")
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reasons : depth0),{"name":"if","hash":{},"fn":container.program(22, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "\n    <div class=\"term-glossary\">\n"
+    + "\n    <div class=\"glossary\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.grouped : depth0),{"name":"if","hash":{},"fn":container.program(26, data, 0),"inverse":container.program(32, data, 0),"data":data})) != null ? stack1 : "")
-    + "    </div>\n</div>\n";
+    + "    </div>\n</p>\n";
 },"13":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
@@ -470,7 +470,7 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
     + "\"><img src=\"img/play_audio.png\"></a>\n";
 },"17":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = 
-  "        <div class=\"term-expression\"><ruby>";
+  "        <div class=\"expression\"><ruby>";
   stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : alias2),(options={"name":"kanjiLinks","hash":{},"fn":container.program(18, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -483,7 +483,7 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
   return container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper)));
 },"20":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "        <div class=\"term-expression\">";
+  "        <div class=\"expression\">";
   stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"kanjiLinks","hash":{},"fn":container.program(18, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -491,7 +491,7 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
 },"22":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <div class=\"term-reasons\">\n"
+  return "        <div class=\"reasons\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.reasons : depth0),{"name":"each","hash":{},"fn":container.program(23, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </div>\n";
 },"23":function(container,depth0,helpers,partials,data) {
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 29871daf..5289392a 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -16,15 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+
 iframe#yomichan-popup {
-    all:              initial;
+    all: initial;
     background-color: #fff;
-    border:           1px solid #999;
-    box-shadow:       0 0 10px rgba(0, 0, 0, .5);
-    height:           250px;
-    position:         fixed;
-    resize:           both;
-    visibility:       hidden;
-    width:            400px;
-    z-index:          2147483647;
+    border: 1px solid #999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    height: 250px;
+    position: fixed;
+    resize: both;
+    visibility: hidden;
+    width: 400px;
+    z-index: 2147483647;
 }
diff --git a/ext/fg/css/frame.css b/ext/fg/css/frame.css
index 27aaadb6..9697ba2e 100644
--- a/ext/fg/css/frame.css
+++ b/ext/fg/css/frame.css
@@ -3,7 +3,7 @@
  * Author: Alex Yatskov <alex@foosoft.net>
  *
  * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
+ * it under the entrys of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
@@ -16,41 +16,47 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* common styles */
+
+/*
+ * Fonts
+ */
 
 @font-face {
     font-family: kanji-stroke-orders;
-    src:         url('../ttf/kanji-stroke-orders.ttf');
+    src: url('../ttf/kanji-stroke-orders.ttf');
 }
+
 @font-face {
     font-family: vl-gothic-regular;
-    src:         url('../ttf/vl-gothic-regular.ttf');
+    src: url('../ttf/vl-gothic-regular.ttf');
 }
 
-body {
-    background-color: #fff;
-    color:            #333;
-    font-family:      helvetica neue, helvetica, arial, sans-serif;
-    font-size:        14px;
-    line-height:      1.42857143;
-    overflow-y:       auto;
-    padding:          5px;
+
+/*
+ * General
+ */
+
+hr {
+    margin-top: 0.8em;
+    margin-bottom: 0.8em;
 }
 
-.tag {
-    border-radius:  0.25em;
-    color:          #fff;
-    cursor:         default;
-    display:        inline;
-    font-size:      75%;
-    font-weight:    700;
-    line-height:    1;
-    padding:        0.2em 0.6em 0.3em;
-    text-align:     center;
-    vertical-align: baseline;
-    white-space:    nowrap;
+.spinner {
+    bottom: 5px;
+    display: none;
+    position: fixed;
+    right: 5px;
+}
+
+#orphan {
+    display: none;
 }
 
+
+/*
+ * Entries
+ */
+
 .tag-default {
     background-color: #8a8a91;
 }
@@ -79,126 +85,64 @@ body {
     background-color: #aa66cc;
 }
 
-.action-bar {
-    float: right;
-}
-
-.action-bar:after {
-    clear:   both;
-    content: '';
-    display: block;
-}
-
-.action-bar .disabled {
+.actions .disabled {
     pointer-events: none;
-    cursor:         default;
+    cursor: default;
 }
 
-.action-bar .disabled img {
+.actions .disabled img {
     -webkit-filter: grayscale(100%);
-    opacity:        0.25;
+    opacity: 0.25;
 }
 
-.action-bar .pending {
+.actions .pending {
     visibility: hidden;
 }
 
-.spinner {
-    bottom:   5px;
-    display:  none;
-    position: fixed;
-    right:    5px;
-}
-
-hr {
-  background-color: #fff;
-  border:           none;
-  border-top:       1px dotted #ccc;
-  margin-top:       0.8em;
-  margin-bottom:    0.8em;
-  height:           1px;
+.actions {
+    display: inline-block;
+    float: right;
 }
 
-#orphan {
-    display: none;
+.actions:after {
+    clear: both;
+    content: '';
+    display: block;
 }
 
-/* term styles */
-
-.term-expression {
-    display:     inline-block;
+.expression {
+    display: inline-block;
     font-family: vl-gothic-regular;
-    font-size:   24px;
+    font-size: 24px;
 }
 
-.term-expression a {
-    border-bottom:   1px #777 dashed;
-    color:           #333;
+.expression a {
+    border-bottom: 1px #777 dashed;
+    color: #333;
     text-decoration: none;
 }
 
-.term-reasons {
-    color:   #777;
+.reasons {
+    color: #777;
     display: inline-block;
 }
 
-.term-glossary ol, .term-glossary ul {
+.glossary ol, .glossary ul {
     padding-left: 1.4em;
 }
 
-.term-glossary li {
+.glossary li {
     color: #777;
 }
 
-.term-glossary-group {
-    margin-top:    0.4em;
-    margin-bottom: 0.4em;
-}
-
-.term-glossary-item {
-    color:       #000;
-    font-family: vl-gothic-regular;
-}
-
-/* kanji styles */
-
-.kanji-glyph {
-    font-family:    kanji-stroke-orders;
-    font-size:      120px;
-    line-height:    120px;
-    padding:        0.01em;
-    vertical-align: top;
-}
-
-.kanji-reading table {
-    padding: 0.3em, 0.3em;
+.glossary-item {
+    color: #000;
 }
 
-.kanji-reading th {
-    color:          #777;
-    font-weight:    bold;
-    text-align:     right;
+.glyph {
+    font-family: kanji-stroke-orders;
+    font-size: 120px;
+    line-height: 120px;
+    padding: 0.01em;
     vertical-align: top;
 }
-
-.kanji-reading td {
-    font-family: vl-gothic-regular;
-}
-
-.kanji-glossary ol {
-    padding-left: 1.4em;
-}
-
-.kanji-glossary li {
-    color: #777;
-}
-
-.kanji-glossary-group {
-    padding-bottom: 0.7em;
-    padding-top:    0.7em;
-}
-
-.kanji-glossary-item {
-    color:       #000;
-    font-family: vl-gothic-regular;
-}
diff --git a/ext/fg/frame.html b/ext/fg/frame.html
index bf7f0f7b..14fd63c1 100644
--- a/ext/fg/frame.html
+++ b/ext/fg/frame.html
@@ -3,22 +3,27 @@
     <head>
         <meta charset="UTF-8">
         <title></title>
+        <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
         <link rel="stylesheet" href="css/frame.css">
     </head>
     <body>
-        <div class="spinner">
-            <img src="img/spinner.gif">
-        </div>
+        <div class="container-fluid">
+            <div class="spinner">
+                <img src="img/spinner.gif">
+            </div>
 
-        <div id="content"></div>
-        <div id="orphan">
-            <h1>Yomichan Updated!</h1>
-            <p>The Yomichan extension has been updated to a new version! In order to continue viewing definitions on this page you must reload this tab or restart your browser.</p>
-        </div>
+            <div id="content"></div>
 
-        <script src="../lib/jquery-3.1.1.min.js"></script>
-        <script src="../lib/wanakana.min.js"></script>
-        <script src="js/util.js"></script>
-        <script src="js/frame.js"></script>
+            <div id="orphan">
+                <h1>Yomichan Updated!</h1>
+                <p>The Yomichan extension has been updated to a new version! In order to continue viewing definitions on this page you must reload this tab or restart your browser.</p>
+            </div>
+
+            <script src="../lib/jquery-3.1.1.min.js"></script>
+            <script src="../lib/wanakana.min.js"></script>
+            <script src="js/util.js"></script>
+            <script src="js/frame.js"></script>
+        </div>
     </body>
 </html>
diff --git a/tmpl/kanji.html b/tmpl/kanji.html
index 3f6d8084..43c57aed 100644
--- a/tmpl/kanji.html
+++ b/tmpl/kanji.html
@@ -1,14 +1,14 @@
 {{#*inline "kanji"}}
-<div class="kanji-definition">
-    <div class="action-bar">
+<p>
+    <div class="actions">
         {{#if addable}}
             <a href="#" title="Add Kanji" class="action-add-note pending disabled" data-mode="kanji" data-index="{{@index}}"><img src="img/add_kanji.png"></a>
         {{/if}}
     </div>
 
-    <div class="kanji-glyph">{{character}}</div>
+    <div class="glyph">{{character}}</div>
 
-    <div class="kanji-reading">
+    <div class="reading">
         <table>
             <tr>
                 <th>Kunyomi:</th>
@@ -29,24 +29,24 @@
         </table>
     </div>
 
-    <div class="kanji-tags">
+    <div>
         {{#each tags}}
-            <span class="tag tag-{{category}}" title="{{notes}}">{{name}}</span>
+            <span class="label label-default tag-{{category}}" title="{{notes}}">{{name}}</span>
         {{/each}}
     </div>
 
-    <div class="kanji-glossary">
+    <div class="glossary">
         {{#if glossary.[1]}}
-            <ol "kanji-glossary-group">
+            <ol>
                 {{#each glossary}}
-                    <li><span class="kanji-glossary-item">{{#multiLine}}{{.}}{{/multiLine}}</span></li>
+                    <li><span class="glossary-item">{{#multiLine}}{{.}}{{/multiLine}}</span></li>
                 {{/each}}
             </ol>
         {{else}}
-            <div class="kanji-glossary-group kanji-glossary-item">{{#multiLine}}{{glossary.[0]}}{{/multiLine}}</div>
+            <div class="glossary-item">{{#multiLine}}{{glossary.[0]}}{{/multiLine}}</div>
         {{/if}}
     </div>
-</div>
+</p>
 {{/inline}}
 
 {{#if definitions}}
diff --git a/tmpl/terms.html b/tmpl/terms.html
index aae365c7..036aa465 100644
--- a/tmpl/terms.html
+++ b/tmpl/terms.html
@@ -1,25 +1,25 @@
 {{#*inline "definition"}}
     {{#if tags}}
-        <div class="term-tags">
+        <div>
             {{#each tags}}
-                <span class="tag tag-{{category}}" title="{{notes}}">{{name}}</span>
+                <span class="label label-default tag-{{category}}" title="{{notes}}">{{name}}</span>
             {{/each}}
         </div>
     {{/if}}
     {{#if glossary.[1]}}
-        <ul class="term-glossary-group">
+        <ul>
             {{#each glossary}}
-                <li><span class="term-glossary-item">{{#multiLine}}{{.}}{{/multiLine}}</span></li>
+                <li><span class="glossary-item">{{#multiLine}}{{.}}{{/multiLine}}</span></li>
             {{/each}}
         </ul>
     {{else}}
-        <div class="term-glossary-group term-glossary-item">{{#multiLine}}{{glossary.[0]}}{{/multiLine}}</div>
+        <div class="glossary-item">{{#multiLine}}{{glossary.[0]}}{{/multiLine}}</div>
     {{/if}}
 {{/inline}}
 
 {{#*inline "term"}}
-<div class="term-definition">
-    <div class="action-bar">
+<p>
+    <div class="actions">
         {{#if addable}}
             <a href="#" title="Add term as expression" class="action-add-note pending disabled" data-mode="term_kanji" data-index="{{@index}}"><img src="img/add_term_kanji.png"></a>
             <a href="#" title="Add term as reading" class="action-add-note pending disabled" data-mode="term_kana" data-index="{{@index}}"><img src="img/add_term_kana.png"></a>
@@ -30,20 +30,20 @@
     </div>
 
     {{#if reading}}
-        <div class="term-expression"><ruby>{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}<rt>{{reading}}</rt></ruby></div>
+        <div class="expression"><ruby>{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}<rt>{{reading}}</rt></ruby></div>
     {{else}}
-        <div class="term-expression">{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}</div>
+        <div class="expression">{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}</div>
     {{/if}}
 
     {{#if reasons}}
-        <div class="term-reasons">
+        <div class="reasons">
             {{#each reasons}}
                 <span class="reasons">{{.}}</span> {{#unless @last}}&laquo;{{/unless}}
             {{/each}}
         </div>
     {{/if}}
 
-    <div class="term-glossary">
+    <div class="glossary">
     {{#if grouped}}
         {{#if definitions.[1]}}
         <ol>
@@ -58,7 +58,7 @@
         {{> definition}}
     {{/if}}
     </div>
-</div>
+</p>
 {{/inline}}
 
 {{#if definitions}}