diff --git a/css/partials/_boxes.scss b/css/partials/_boxes.scss
new file mode 100644
index 0000000..6d6dd3e
--- /dev/null
+++ b/css/partials/_boxes.scss
@@ -0,0 +1,62 @@
+$types: (
+    note:       (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
+    seealso:    (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
+    definition: (color: hsl(360, 61%, 94%), title-color: hsl(360, 61%, 64%), icon: ""),
+    exampl:     (color: hsl(148, 61%, 94%), title-color: hsl(148, 61%, 64%), icon: ""),
+    question:   (color: hsl(59,  61%, 94%), title-color: hsl(59,  61%, 64%), icon: ""),
+    summary:    (color: hsl(204, 61%, 94%), title-color: hsl(204, 61%, 64%), icon: ""),
+    hint:       (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
+    important:  (color: hsl(42,  61%, 94%), title-color: hsl(42,  61%, 64%), icon: ""),
+    caution:    (color: hsl(42,  61%, 94%), title-color: hsl(42,  61%, 64%), icon: ""),
+    warning:    (color: hsl(42,  61%, 94%), title-color: hsl(42,  61%, 64%), icon: "")
+);
+
+
+@each $label, $map in $types {
+
+    .#{$label} {
+        padding:12px;
+        line-height:24px;
+        margin-bottom:24px;
+        -webkit-font-smoothing:antialiased;
+
+        background: map-get($map, color);
+
+        p:last-child, .last {
+            margin-bottom:0;
+        }
+
+
+        &.admonition-title{
+            line-height: 1;
+            background: map-get($map, title-color);
+            margin-bottom: 0px;
+
+            &:before{
+                font-family:FontAwesome;
+                content: map-get($map, icon);
+            }
+        }
+    }
+}
+
+#content .admonition-title{
+    color:#fff;
+    font-weight:bold;
+    display:block;
+    color:#fff;
+    padding:6px 12px;
+    margin-bottom:0px;
+    font-family:inherit;
+    -webkit-font-smoothing:antialiased;
+
+    &:before{
+        margin-right:4px;
+        font-family:"FontAwesome";
+        display:inline-block;
+        font-style:normal;
+        font-weight:normal;
+        line-height:1;
+        text-decoration:inherit;
+    }
+}
diff --git a/js/readtheorg.js b/js/readtheorg.js
index 14b23d4..0ee1a44 100644
--- a/js/readtheorg.js
+++ b/js/readtheorg.js
@@ -1,16 +1,14 @@
 $(function() {
     $('.note').before("<p class='admonition-title note'>Note</p>");
     $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
-    $('.warning').before("<p class='admonition-title warning'>Warning</p>");
-    $('.caution').before("<p class='admonition-title caution'>Caution</p>");
-    $('.attention').before("<p class='admonition-title attention'>Attention</p>");
-    $('.tip').before("<p class='admonition-title tip'>Tip</p>");
-    $('.important').before("<p class='admonition-title important'>Important</p>");
-    $('.hint').before("<p class='admonition-title hint'>Hint</p>");
-    $('.error').before("<p class='admonition-title error'>Error</p>");
-    $('.danger').before("<p class='admonition-title danger'>Danger</p>");
+    $('.definition').before("<p class='admonition-title definition'>Definition</p>");
+    $('.exampl').before("<p class='admonition-title exampl'>Example</p>");
     $('.question').before("<p class='admonition-title question'>Question</p>");
-    $('.summary').before("<p class='admonition-title hint'>Summary</p>");
+    $('.summary').before("<p class='admonition-title summary'>Summary</p>");
+    $('.hint').before("<p class='admonition-title hint'>Hint</p>");
+    $('.important').before("<p class='admonition-title important'>Important</p>");
+    $('.caution').before("<p class='admonition-title caution'>Caution</p>");
+    $('.warning').before("<p class='admonition-title warning'>Warning</p>");
 });
 
 $( document ).ready(function() {