diff --git a/README.md b/README.md
index b63fc27..320c4c2 100644
--- a/README.md
+++ b/README.md
@@ -219,6 +219,30 @@ Router.map(function () {
  */
 ```
 
+### CSS
+The following CSS classes are defined by this addon to make it easier to layout a page using `frost-navigation`:
+
+ * `frost-application`: This class should be applied to, the parent of the `frost-navigation`
+   element.
+ * `frost-application-content`: This class should be applied to the element below the `frost-navigation` element.
+   It will ensure that that element takes up all the space below the navigation.
+
+```handlebars
+<div class='frost-application'>
+  {{frost-navigation ...}}
+  <div class='frost-application-content'>
+    <!-- the rest of your page here -->
+  </div>
+</div>
+```
+
+### User menu
+An example of a user-menu is defined in the dummy app at `tests/dummy/app/pods/components/user-menu` There are also
+a couple classes defined in this addon that will format your own user-menu properly:
+ * `frost-navigation-user` for the actual user menu button
+ * `frost-navigation-user-menu` for the popover menu that is expanded when clicking on the above button
+ * `frost-navigation-user-menu-list` for the `<ul>` that holds the list items of the user menu
+
 ## Testing with [ember-hook](https://www.npmjs.com/package/ember-hook)
 
 The navigation component is accessible using ember-hook with the top level hook names, or you can access the internal
diff --git a/addon/styles/_mixins.scss b/addon/styles/_mixins.scss
new file mode 100644
index 0000000..cf1bd91
--- /dev/null
+++ b/addon/styles/_mixins.scss
@@ -0,0 +1,72 @@
+//
+// Mixins used for ember-frost-navigation styles
+//
+
+@mixin category-styles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px 20px;
+  transition: background .5s ease;
+  border-right: 1px solid $frost-color-nav-category-border-right;
+  cursor: pointer;
+  user-select: none;
+
+  .nav-category-icon {
+    .frost-icon {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+
+  .nav-category-name {
+    transition: color .5s ease;
+    color: $frost-color-grey-6;
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  &:hover {
+    .nav-category-name {
+      color: $frost-color-white;
+    }
+  }
+
+  &.active {
+    background: $frost-color-nav-category-active-bg;
+
+    .nav-category-name {
+      color: $frost-color-white;
+    }
+  }
+
+  &.disabled {
+    color: $frost-color-grey-5;
+  }
+}
+
+@mixin tertiary-button-color ($color) {
+  .frost-button {
+    &.tertiary {
+      color: $color;
+    }
+  }
+}
+
+@mixin do-not-expand-links {
+  .frost-link {
+    .content {
+      min-width: inherit;
+    }
+  }
+}
+
+// In some instances, the <a> tag gets a color that we don't want,
+// based on browser default styles, so we want to make sure the color
+// of the link, and by extension the color on the frost-icon is inherited (ARM 2017-04-03)
+@mixin keep-link-icon-colors-inherited {
+  .frost-link {
+    color: inherit;
+  }
+}
diff --git a/addon/styles/_variables.scss b/addon/styles/_variables.scss
new file mode 100644
index 0000000..e47e656
--- /dev/null
+++ b/addon/styles/_variables.scss
@@ -0,0 +1,22 @@
+//
+// Variables used by
+//
+
+$frost-color-nav-bar-bg: $frost-color-night-2 !default;
+$frost-color-nav-border-left: rgba($frost-color-white, .2) !default;
+$frost-color-nav-category-border-right: rgba($frost-color-white, .2) !default;
+
+// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03)
+$frost-color-nav-category-active-bg: rgba(39, 36, 37, .5) !default;
+$frost-color-nav-column-border: rgba($frost-color-white, .3) !default;
+
+// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03)
+$frost-color-nav-modal-bg: rgba(51, 66, 79, .97) !default;
+$frost-color-nav-route-focus-bg: rgba(0, 0, 0, .2) !default;
+$frost-color-nav-route-active-bg: rgba($frost-color-nav-route-focus-bg, .05) !default;
+$frost-color-nav-route-focus-box-shadow: #fff !default;
+
+$frost-navigation-bar-height: 50px !default;
+$z-index-application-bar: 3 !default;
+$z-index-modal: 2 !default;
+$z-index-modal-hidden: -1 !default;
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 265a03a..331f37e 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -1,21 +1,7 @@
 @import 'node_modules/ember-frost-core/addon/styles/frost-theme';
 @import 'node_modules/ember-frost-core/addon/styles/frost-app';
-
-$nav-modal-bg: rgba(51, 66, 79, .97);
-$nav-column-border: rgba($frost-color-white, .3);
-$nav-route-focus-bg: rgba(0, 0, 0, .2);
-$nav-route-active-bg: rgba($nav-route-focus-bg, .05);
-$nav-route-focus-box-shadow: #fff;
-$frost-nav-border-left: rgba($frost-color-white, .2);
-$nav-category-border-right: rgba($frost-color-white, .2);
-$nav-category-active-bg: rgba(39, 36, 37, .5);
-
-$z-index-application-bar: 3 !default;
-$z-index-modal: 2 !default;
-$z-index-modal-hidden: -1 !default;
-
-$frost-navigation-bar-height: 50px !default;
-$frost-navigation-bar-bg-color: $frost-color-night-2 !default;
+@import 'variables';
+@import 'mixins';
 
 .frost-application-bar {
   display: flex;
@@ -24,7 +10,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
   left: 0;
   width: 100%;
   height: inherit;
-  background-color: $frost-navigation-bar-bg-color;
+  background-color: $frost-color-nav-bar-bg;
   z-index: $z-index-application-bar;
 
   .branding {
@@ -61,6 +47,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
   }
 
   .nav-modal {
+    @include keep-link-icon-colors-inherited;
+
     display: flex;
     position: fixed;
     top: $frost-navigation-bar-height;
@@ -73,7 +61,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
     padding: 0;
     border: 0;
     outline: 0;
-    background: $nav-modal-bg;
+    background: $frost-color-nav-modal-bg;
     overflow-x: hidden;
 
     .liquid-container,
@@ -101,7 +89,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
       padding: 30px;
 
       &+ .nav-column {
-        border-left: 1px solid $nav-column-border;
+        border-left: 1px solid $frost-color-nav-column-border;
       }
     }
 
@@ -193,8 +181,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
           }
 
           &.active {
-            background: $nav-route-active-bg;
-            box-shadow: 0 0 1px $nav-route-focus-box-shadow;
+            background: $frost-color-nav-route-active-bg;
+            box-shadow: 0 0 1px $frost-color-nav-route-focus-box-shadow;
 
             .nav-route-name {
               color: $frost-color-lgrey-1;
@@ -207,8 +195,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
 
           &:focus {
             outline: none;
-            background: $nav-route-focus-bg;
-            box-shadow: 0 0 6px $nav-route-focus-box-shadow;
+            background: $frost-color-nav-route-focus-bg;
+            box-shadow: 0 0 6px $frost-color-nav-route-focus-box-shadow;
 
             .nav-route-name {
               color: $frost-color-white;
@@ -277,59 +265,79 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
   flex-direction: row;
   height: $frost-navigation-bar-height;
 
-  & > div {
+  &> div {
     &:first-of-type {
       border-bottom: 1px solid $frost-color-grey-2;
-      border-left: 1px solid $frost-nav-border-left;
-      overflow: hidden;
-
-      .user {
-        border-left: 0;
-      }
+      border-left: 1px solid $frost-color-nav-border-left;
+      overflow: inherit; // allows frost-popover for the user drop-down to display
     }
   }
 
   .nav-category {
+    @include category-styles;
+    @include do-not-expand-links;
+    @include keep-link-icon-colors-inherited;
+  }
+
+  &-user {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 10px 20px;
-    transition: background .5s ease;
-    border-right: 1px solid $nav-category-border-right;
-    cursor: pointer;
-    user-select: none;
+    height: 50px;
+    margin-left: auto;
+    padding-right: 15px;
+    padding-left: 15px;
+    border-right: 0;
+    color: $frost-color-white;
+    vertical-align: middle;
 
-    .nav-category-icon {
-      .frost-icon {
-        width: 30px;
-        height: 30px;
-        margin-right: 10px;
-      }
+    .frost-icon {
+      width: 35px;
+      height: 35px;
+      padding-left: 5px;
     }
+  }
 
-    .nav-category-name {
-      transition: color .5s ease;
-      color: $frost-color-grey-6;
-      font-size: 18px;
-      font-weight: 300;
-    }
+  &-user-menu {
+    padding: 0;
+  }
 
-    &:hover {
-      .nav-category-name {
-        color: $frost-color-white;
-      }
-    }
+  &-user-menu-list {
+    min-width: 200px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
-    &.active {
-      background: $nav-category-active-bg;
+    > li {
+      @include tertiary-button-color($frost-color-grey-3);
+      border-top: 1px solid $frost-color-lgrey-1;
+      color: $frost-color-grey-3;
 
-      .nav-category-name {
-        color: $frost-color-white;
+      &:first-child {
+        border-top: 0;
+      }
+
+      &:last-child {
+        @include tertiary-button-color($frost-color-blue-1);
+        border-top: 5px solid $frost-color-lgrey-5;
       }
     }
 
-    &.disabled {
-      color: $frost-color-grey-5;
+    .frost-button {
+      width: 100%;
+      text-align: left;
     }
   }
 }
+
+.frost-application {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &-content {
+    position: relative;
+    flex: 1;
+    overflow: auto;
+  }
+}
diff --git a/blueprints/ember-frost-navigation/index.js b/blueprints/ember-frost-navigation/index.js
deleted file mode 100644
index 4108e78..0000000
--- a/blueprints/ember-frost-navigation/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-module.exports = {
-  description: '',
-  normalizeEntityName: function () {},
-
-  /**
-    Installs specified packages at the root level of the application.
-    Triggered by 'ember install <addon name>'.
-
-    @returns {Promise} package names and versions
-  */
-  afterInstall: function () {
-    return this.addAddonsToProject({
-      packages: [
-        {
-          name: 'ember-frost-core',
-          target: '^1.0.0'
-        }
-      ]
-    })
-  }
-}
diff --git a/package.json b/package.json
index c0e3ece..dd4c8b6 100644
--- a/package.json
+++ b/package.json
@@ -54,14 +54,15 @@
     "ember-computed-decorators": "0.2.2",
     "ember-concurrency": "0.7.19",
     "ember-disable-proxy-controllers": "^1.0.1",
+    "ember-elsewhere": "0.4.1",
     "ember-engines": "~0.3.4",
     "ember-export-application-global": "^1.0.5",
-    "ember-frost-core": "1.9.6",
     "ember-frost-notifier": "4.2.1",
-    "ember-frost-test": "1.0.1",
+    "ember-frost-popover": "4.2.5",
+    "ember-frost-test": "1.0.2",
     "ember-hook": "1.4.1",
     "ember-load-initializers": "^0.5.1",
-    "ember-prop-types": "3.10.3",
+    "ember-prop-types": "3.10.4",
     "ember-redux": "^1.0.0",
     "ember-resolver": "^2.0.3",
     "ember-sinon": "0.6.0",
@@ -78,7 +79,7 @@
     "remark-cli": "^2.0.0",
     "remark-lint": "^5.1.0",
     "sass-lint": "^1.0.0",
-    "sinon-chai": "^2.8.0",
+    "sinon-chai": "^2.9.0",
     "typescript": "^2.0.0"
   },
   "keywords": [
@@ -90,6 +91,7 @@
     "ember-computed-decorators": "^0.2.2",
     "ember-cli-htmlbars": "^1.0.1",
     "ember-cli-sass": "5.6.0",
+    "ember-frost-core": "^1.0.0",
     "liquid-fire": "0.26.1"
   },
   "ember-addon": {
@@ -101,4 +103,4 @@
   "pr-bumper": {
     "coverage": 96.7
   }
-}
\ No newline at end of file
+}
diff --git a/tests/dummy/app/pods/application/controller.js b/tests/dummy/app/pods/application/controller.js
new file mode 100644
index 0000000..618bbd5
--- /dev/null
+++ b/tests/dummy/app/pods/application/controller.js
@@ -0,0 +1,28 @@
+  import Ember from 'ember'
+  const {Controller, Logger, inject} = Ember
+
+  export default Controller.extend({
+
+    frostNavigation: inject.service(),
+    notifier: inject.service(),
+
+    _notify (type, message) {
+      this.get('notifier').addNotification({
+        message,
+        type,
+        autoClear: true,
+        clearDuration: 1200
+      })
+    },
+
+    actions: {
+      myAction (item) {
+        this._notify(
+          'success',
+          `Item '${item.action}' fired`
+        )
+
+        Logger.log(item)
+      }
+    }
+  })
diff --git a/tests/dummy/app/pods/application/template.hbs b/tests/dummy/app/pods/application/template.hbs
index 3a979a5..e2d862d 100644
--- a/tests/dummy/app/pods/application/template.hbs
+++ b/tests/dummy/app/pods/application/template.hbs
@@ -1,2 +1,23 @@
 {{frost-notifier}}
-{{outlet}}
+<div class='frost-application'>
+  <!-- BEGIN-SNIPPET template -->
+  {{frost-navigation
+    hook='my-navigation'
+    navActions=(hash
+      myAction=(action 'myAction')
+    )
+    logo=(component 'custom-logo'
+      hook='my-custom-logo'
+      class='nav-category navigation-logo'
+    )
+    menu=(component 'user-menu'
+      class='nav-category frost-navigation-user'
+      username='Username'
+    )
+  }}
+  <!-- END-SNIPPET -->
+
+  <div class='frost-application-content'>
+    {{outlet}}
+  </div>
+</div>
diff --git a/tests/dummy/app/pods/components/user-pane/component.js b/tests/dummy/app/pods/components/user-menu/component.js
similarity index 60%
rename from tests/dummy/app/pods/components/user-pane/component.js
rename to tests/dummy/app/pods/components/user-menu/component.js
index 7aebd71..be3c1ce 100644
--- a/tests/dummy/app/pods/components/user-pane/component.js
+++ b/tests/dummy/app/pods/components/user-menu/component.js
@@ -1,6 +1,6 @@
-import Ember from 'ember'
+import {Component} from 'ember-frost-core'
+
 import layout from './template'
-const {Component} = Ember
 
 export default Component.extend({
   layout
diff --git a/tests/dummy/app/pods/components/user-menu/template.hbs b/tests/dummy/app/pods/components/user-menu/template.hbs
new file mode 100644
index 0000000..46e3aee
--- /dev/null
+++ b/tests/dummy/app/pods/components/user-menu/template.hbs
@@ -0,0 +1,46 @@
+{{frost-button
+  class=(concat css '-user-button')
+  hook=(concat hookPrefix '-userButton')
+  hookQualifiers=hookQualifiers
+  icon='user'
+  pack='frost-nav'
+  text=username
+}}
+
+{{#frost-popover
+  class='frost-navigation-user-menu'
+  hook=(concat hookPrefix '-userMenu')
+  hookQualifiers=hookQualifiers
+  position='bottom'
+  target=(concat '.' css '-user-button')
+}}
+  <ul class='frost-navigation-user-menu-list'>
+    <li>
+      {{frost-button
+        hook=(concat hookPrefix '-aboutButton')
+        hookQualifiers=hookQualifiers
+        priority='tertiary'
+        size='medium'
+        text='About'
+      }}
+    </li>
+    <li>
+      {{frost-button
+        hook=(concat hookPrefix '-changePasswordButton')
+        hookQualifiers=hookQualifiers
+        priority='tertiary'
+        size='medium'
+        text='Change password'
+      }}
+    </li>
+    <li>
+      {{frost-button
+        hook=(concat hookPrefix '-logoutButton')
+        hookQualifiers=hookQualifiers
+        priority='tertiary'
+        size='medium'
+        text='Logout'
+      }}
+    </li>
+  </ul>
+{{/frost-popover}}
diff --git a/tests/dummy/app/pods/components/user-pane/template.hbs b/tests/dummy/app/pods/components/user-pane/template.hbs
deleted file mode 100644
index d909a74..0000000
--- a/tests/dummy/app/pods/components/user-pane/template.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{model.label}}
-{{component model.logo}}
diff --git a/tests/dummy/app/pods/demo/controller.js b/tests/dummy/app/pods/demo/controller.js
index da1396d..5998a91 100644
--- a/tests/dummy/app/pods/demo/controller.js
+++ b/tests/dummy/app/pods/demo/controller.js
@@ -1,28 +1,13 @@
 import Ember from 'ember'
-const {
-  Controller,
-  Logger: {
-    log
-  },
-  get,
-  inject: {
-    service
-  },
-  set
-} = Ember
+const {Controller, get, inject, set} = Ember
+
 // BEGIN-SNIPPET controller
 export default Controller.extend({
+
+  frostNavigation: inject.service(),
+
   count: 0,
-  frostNavigation: service(),
-  notifier: service(),
-  _notify (type, message) {
-    get(this, 'notifier').addNotification({
-      message,
-      type,
-      autoClear: true,
-      clearDuration: 1200
-    })
-  },
+
   init () {
     this._super(...arguments)
     let customRouteObject = Ember.Object.extend({}).create({
@@ -45,25 +30,21 @@ export default Controller.extend({
         }
       ]
     ]
-    get(this, 'frostNavigation.categories').push({
+
+    this.get('frostNavigation.categories').push({
       name: 'Custom Category',
       columns
     })
-    get(this, 'frostNavigation.categories').push({
+
+    this.get('frostNavigation.categories').push({
       name: 'NPM',
       pack: 'frost-nav',
       url: 'http://npmjs.org',
       icon: 'application'
     })
   },
+
   actions: {
-    myAction (item) {
-      this._notify(
-        'success',
-        `Item '${item.action}' fired`
-      )
-      log(item)
-    },
     incrementCount () {
       let count = get(this, 'count') + 1
 
diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs
index bb99006..f6d93f6 100644
--- a/tests/dummy/app/pods/demo/template.hbs
+++ b/tests/dummy/app/pods/demo/template.hbs
@@ -1,63 +1,34 @@
-<!-- BEGIN-SNIPPET template -->
-{{frost-navigation
-  hook='my-navigation'
-  navActions=(hash
-    myAction=(action 'myAction')
-  )
-  logo=(component 'custom-logo'
-    hook='my-custom-logo'
-    class='nav-category navigation-logo'
-  )
-  menu=(component 'user-pane'
-    class='nav-category user'
-    model=(hash
-      logo=(component 'frost-icon'
-        hook='my-custom-menu'
-        icon='user'
-        pack='frost-nav'
-      )
-      label='Username'
-    )
-  )
-}}
-<!-- END-SNIPPET -->
 <div class='page-content'>
-  <div class='row'>
-    <div class='column item'>
-      <div class='row item'>
-        <div class='item'>
-          <h3>Click me</h3>
+  <div class='item'>
+    <h3>Click me</h3>
 
-          {{frost-button
-            icon='add'
-            priority='primary'
-            size='small'
-            hook='my-incrementer'
-            onClick=(action 'incrementCount')
-          }}
-          {{count}}
-        </div>
-      </div>
-      <div class='row item'>
-        <div class='item'>
-          <h3>Router</h3>
-          {{code-snippet name='router.js'}}
-        </div>
-        <div class='item'>
-          <h3>Controller</h3>
-          {{code-snippet name='controller.js'}}
-        </div>
-      </div>
-      <div class='row item'>
-        <div class='item'>
-          <h3>Template</h3>
-          {{code-snippet name='template.hbs'}}
-        </div>
-        <div class='item'>
-          <h3>Outlet</h3>
-          {{outlet}}
-        </div>
-      </div>
+    {{frost-button
+      icon='add'
+      priority='primary'
+      size='small'
+      hook='my-incrementer'
+      onClick=(action 'incrementCount')
+    }}
+    {{count}}
+  </div>
+  <div class='row'>
+    <div class='item'>
+      <h3>Router</h3>
+      {{code-snippet name='router.js'}}
+    </div>
+    <div class='item'>
+      <h3>Controller</h3>
+      {{code-snippet name='controller.js'}}
+    </div>
+  </div>
+  <div class='row'>
+    <div class='item'>
+      <h3>Template</h3>
+      {{code-snippet name='template.hbs'}}
+    </div>
+    <div class='item'>
+      <h3>Outlet</h3>
+      {{outlet}}
     </div>
   </div>
 </div>
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index dff9454..55c35c3 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -1,101 +1,56 @@
 @import 'node_modules/ember-frost-core/addon/styles/frost-theme';
 
 .page-content {
-  align-items: center;
   display: flex;
-  justify-content: center;
-
-  .row {
-   display: flex;
-   flex-direction: row;
+  flex-direction: column;
+  width: 90%;
+  margin: 0 5%;
+}
 
-   .column {
-     display: flex;
-     flex-direction: column;
-   }
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
 
-   .item {
-     width: 90%;
-   }
+.hljs {
+  background: #21252E;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0,.2);
+  color: #98A0B0;
+  max-height: 50vh;
+  // font-size: .85em;
+  overflow: scroll;
+  padding: .9em;
+  width: 90%;
+
+  .hljs-keyword {
+    color: #B959D8;
   }
 
-  .hljs {
-    background: #21252E;
-    border-radius: 3px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0,.2);
-    color: #98A0B0;
-    max-height: 50vh;
-    // font-size: .85em;
-    overflow: scroll;
-    padding: .9em;
-    width: 90%;
-
-    .hljs-keyword {
-      color: #B959D8;
-    }
-
-    .hljs-built_in {
-      color: #DFB563;
-    }
-
-    .hljs-string {
-      color: #86BB62;
-    }
-
-    .hljs-number,
-    .hljs-subst {
-      color: #C7894F;
-    }
-
-    .hljs-tag {
-      color: inherit;
+  .hljs-built_in {
+    color: #DFB563;
+  }
 
-      .hljs-name {
-        color: #D95360;
-      }
+  .hljs-string {
+    color: #86BB62;
+  }
 
-      .hljs-attr {
-        color: #C7894F;
-      }
-    }
+  .hljs-number,
+  .hljs-subst {
+    color: #C7894F;
   }
-}
-.frost-application-bar {
-  .navigation-logo {
-    border-right: solid 1px #666;
-    cursor: pointer;
-    height: 50px;
 
-    .frost-icon {
-      width: 125px;
-    }
+  .hljs-tag {
+    color: inherit;
 
-    > div {
-      &.frost-svg {
-        width: 125px;
-        height: 40px;
-        margin: 0px 24px;
-      }
+    .hljs-name {
+      color: #D95360;
     }
-  }
 
-  .user {
-    align-items: center;
-    border-left: solid 1px $frost-color-grey-3;
-    border-right: 0;
-    color: $frost-color-white;
-    display: flex;
-    flex-direction: row;
-    height: 50px;
-    margin-left: auto;
-    padding-left: 15px;
-    padding-right: 15px;
-    vertical-align: middle;
-
-    .frost-icon {
-      height: 35px;
-      padding-left: 5px;
-      width: 35px;
+    .hljs-attr {
+      color: #C7894F;
     }
   }
 }