diff --git a/static/css/oml.css b/static/css/oml.css
index 33ae71b..aae24a4 100644
--- a/static/css/oml.css
+++ b/static/css/oml.css
@@ -1,4 +1,5 @@
 .OMLQuote {
+    padding: 8px;
     color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
     font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
diff --git a/static/js/annotation.js b/static/js/annotation.js
index aeda34a..ee77fc3 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,16 +1,18 @@
 'use strict';
 
 oml.ui.annotation = function(annotation, $iframe) {
-    var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
-        padding: '8px'
-    }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
-        click: function(event) {
-            that.select()
-            $iframe.postMessage('selectAnnotation', {
-                id: annotation.id
+    var $quote = Ox.Element()
+            .addClass('OxSelectable OMLQuote')
+            .append(
+                Ox.Element().html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
+            ).on({
+                click: function(event) {
+                    that.select()
+                    $iframe.postMessage('selectAnnotation', {
+                        id: annotation.id
+                    })
+                }
             })
-        }
-    })
     var notes = annotation.notes.length ? annotation.notes.map(function(note) {
         note.editable = !note.user
         return note