diff --git a/css/navbar.base-rtl.css b/css/navbar.base-rtl.css
index ea958fa..9572871 100644
--- a/css/navbar.base-rtl.css
+++ b/css/navbar.base-rtl.css
@@ -7,20 +7,20 @@ html.js .drupal-navbar {
   left: auto;
   right: 0;
 }
-.js .drupal-navbar .bar .tab,
-.js .drupal-navbar .horizontal .tab  {
+.js .drupal-navbar .navbar-bar .navbar-tab,
+.js .drupal-navbar .navbar-tray-horizontal .navbar-tab  {
   float: right;
 }
 /**
  * Administration menu.
  */
-.js .drupal-navbar .bar {
+.js .drupal-navbar .navbar-bar {
   left: auto;
   right: 0;
 }
 @media only screen and (min-width: 16.5em) {
-  .js .drupal-navbar .bar .tab,
-  .js .drupal-navbar .horizontal li {
+  .js .drupal-navbar .navbar-bar .navbar-tab,
+  .js .drupal-navbar .navbar-tray-horizontal li {
     float: right;
   }
 }
@@ -28,27 +28,27 @@ html.js .drupal-navbar {
 /**
  * navbar tray.
  */
-.drupal-navbar .vertical {
+.drupal-navbar .navbar-tray-vertical {
   left: auto;
   right: -100%;
 }
-.drupal-navbar .horizontal {
+.drupal-navbar .navbar-tray-horizontal {
   left: auto;
   right: 0;
 }
-.drupal-navbar .vertical > .lining,
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   left: auto;
   right: -100%;
 }
-.drupal-navbar .vertical.active,
-.drupal-navbar .vertical.active > .lining {
+.drupal-navbar .navbar-tray-vertical.active,
+.drupal-navbar .navbar-tray-vertical.active > .navbar-lining {
   left: auto;
   right: 0;
 }
 
 @media only screen and (min-width: 16.5em) {
-  .drupal-navbar .vertical.active > .lining:before {
+  .drupal-navbar .navbar-tray-vertical.active > .navbar-lining:before {
     left: auto;
     right: -1px;
   }
@@ -70,10 +70,10 @@ html.js .drupal-navbar {
  * Hide the orientation toggle from browsers that do not interpret
  * media queries. They get a standard horizontal navbar.
  */
-.drupal-navbar .horizontal .toggle-orientation {
+.drupal-navbar .navbar-tray-horizontal .navbar-toggle-orientation {
   left: 0;
   right: auto;
 }
-.drupal-navbar .vertical .toggle-orientation {
+.drupal-navbar .navbar-tray-vertical .navbar-toggle-orientation {
   float: left;
 }
diff --git a/css/navbar.base.css b/css/navbar.base.css
index 4bd5429..37ab639 100644
--- a/css/navbar.base.css
+++ b/css/navbar.base.css
@@ -36,12 +36,12 @@ html.js .drupal-navbar {
   margin: 0;
   padding-top: 0;
 }
-.js .drupal-navbar .bar .tab,
+.js .drupal-navbar .navbar-bar .navbar-tab,
 .js .drupal-navbar .menu li {
   display: block;
 }
-.js .drupal-navbar .bar .tab,
-.js .drupal-navbar .horizontal .tab  {
+.js .drupal-navbar .navbar-bar .navbar-tab,
+.js .drupal-navbar .navbar-tray-horizontal .navbar-tab  {
   float: left; /* LTR */
 }
 .js .drupal-navbar a {
@@ -51,7 +51,7 @@ html.js .drupal-navbar {
 /**
  * Administration menu.
  */
-.js .drupal-navbar .bar {
+.js .drupal-navbar .navbar-bar {
   left: 0; /* LTR */
   position: absolute;
   top: 0;
@@ -59,19 +59,19 @@ html.js .drupal-navbar {
   width: 100%;
 }
 @media only screen {
-  .js .drupal-navbar .bar .tab,
-  .js .drupal-navbar .tray li {
+  .js .drupal-navbar .navbar-bar .navbar-tab,
+  .js .drupal-navbar .navbar-tray li {
     float: none; /* LTR */
   }
 }
 @media only screen and (min-width: 16.5em) {
-  .js .drupal-navbar .bar .tab,
-  .js .drupal-navbar .horizontal li {
+  .js .drupal-navbar .navbar-bar .navbar-tab,
+  .js .drupal-navbar .navbar-tray-horizontal li {
     float: left; /* LTR */
   }
 }
 @media only screen and (min-width: 28.125em) {
-  .js .drupal-navbar .bar {
+  .js .drupal-navbar .navbar-bar {
     position: fixed;
   }
 }
@@ -79,44 +79,44 @@ html.js .drupal-navbar {
 /**
  * navbar tray.
  */
-.js .drupal-navbar .tray {
+.js .drupal-navbar .navbar-tray {
   display: none;
 }
-.drupal-navbar .tray {
+.drupal-navbar .navbar-tray {
   bottom: auto;
   position: absolute;
   z-index: 1200;
 }
-.drupal-navbar .horizontal {
+.drupal-navbar .navbar-tray-horizontal {
   width: 100%;
 }
-.drupal-navbar .vertical,
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   bottom: 0;
   width: 240px;
   width: 15rem;
 }
-.drupal-navbar .vertical {
+.drupal-navbar .navbar-tray-vertical {
   left: -100%; /* LTR */
   position: absolute;
 }
-.drupal-navbar .horizontal {
+.drupal-navbar .navbar-tray-horizontal {
   left: 0; /* LTR */
   height: 0;
   /* Set one higher than the contextual links gear. */
   z-index: 1000;
 }
-.drupal-navbar .tray .lining {
+.drupal-navbar .navbar-tray .navbar-lining {
   position: relative;
 }
-.drupal-navbar .vertical > .lining,
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   left: -100%; /* LTR */
   min-height: 100%;
   position: absolute;
   width: 100%;
 }
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   bottom: 0;
   content: '';
   display: none;
@@ -127,53 +127,53 @@ html.js .drupal-navbar {
   top: 0;
   z-index: -1;
 }
-.drupal-navbar .tray.active {
+.drupal-navbar .navbar-tray.active {
   display: block;
 }
-.drupal-navbar .horizontal.active {
+.drupal-navbar .navbar-tray-horizontal.active {
   height: auto;
 }
-.drupal-navbar .vertical.active,
-.drupal-navbar .vertical.active > .lining {
+.drupal-navbar .navbar-tray-vertical.active,
+.drupal-navbar .navbar-tray-vertical.active > .navbar-lining {
   left: 0; /* LTR */
   top: 0;
 }
 /* Make vertical navbar tray scroll with page for touch devices. */
-.touch .drupal-navbar .vertical.active,
-.touch .drupal-navbar .vertical.active > .lining {
+.touch .drupal-navbar .navbar-tray-vertical.active,
+.touch .drupal-navbar .navbar-tray-vertical.active > .navbar-lining {
   bottom: auto;
   top: auto;
 }
-.drupal-navbar .horizontal .menu li ul {
+.drupal-navbar .navbar-tray-horizontal .menu li ul {
   display: none;
 }
 @media only screen {
-  .drupal-navbar .vertical,
-  .drupal-navbar .vertical > .lining:before {
+  .drupal-navbar .navbar-tray-vertical,
+  .drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
     width: 100%;
   }
 }
 
 @media only screen and (min-width: 16.5em) {
-  .drupal-navbar .vertical,
-  .drupal-navbar .vertical > .lining:before {
+  .drupal-navbar .navbar-tray-vertical,
+  .drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
     width: 240px;
     width: 15rem;
   }
-  .drupal-navbar .vertical.active > .lining:before {
+  .drupal-navbar .navbar-tray-vertical.active > .navbar-lining:before {
     display: block;
     left: -1px; /* LTR */
   }
 }
 @media only screen and (min-width: 28.125em) {
-  .drupal-navbar .tray.horizontal,
-  .drupal-navbar .tray.vertical {
+  .drupal-navbar .navbar-tray.navbar-tray-horizontal,
+  .drupal-navbar .navbar-tray.navbar-tray-vertical {
     position: fixed;
   }
-  .drupal-navbar .tray.vertical {
+  .drupal-navbar .navbar-tray.navbar-tray-vertical {
     bottom: 0;
   }
-  .drupal-navbar .vertical {
+  .drupal-navbar .navbar-tray-vertical {
     overflow: auto;
     overflow-x: hidden;
     overflow-y: auto;
@@ -194,26 +194,26 @@ html.js .drupal-navbar {
  * Hide the orientation toggle from browsers that do not interpret
  * media queries. They get a standard horizontal navbar.
  */
-.drupal-navbar .horizontal .toggle-orientation {
+.drupal-navbar .navbar-tray-horizontal .navbar-toggle-orientation {
   display: none;
 }
 @media only screen {
-  .drupal-navbar .tray .toggle-orientation {
+  .drupal-navbar .navbar-tray .navbar-toggle-orientation {
     display: none;
   }
 }
 @media only screen and (min-width: 16.5em)   {
-  .drupal-navbar .tray .toggle-orientation {
+  .drupal-navbar .navbar-tray .navbar-toggle-orientation {
     display: block;
   }
 }
-.drupal-navbar .horizontal .toggle-orientation {
+.drupal-navbar .navbar-tray-horizontal .navbar-toggle-orientation {
   bottom: 0;
   position: absolute;
   right: 0; /* LTR */
   top: 0;
 }
-.drupal-navbar .vertical .toggle-orientation {
+.drupal-navbar .navbar-tray-vertical .navbar-toggle-orientation {
   float: right; /* LTR */
   width: 100%;
 }
diff --git a/css/navbar.icons-rtl.css b/css/navbar.icons-rtl.css
index 9d1564c..d3d7733 100644
--- a/css/navbar.icons-rtl.css
+++ b/css/navbar.icons-rtl.css
@@ -3,41 +3,41 @@
  *
  * RTL styles for navbar.icons.css
  */
-.drupal-navbar .icon {
+.drupal-navbar .navbar-icon {
   padding-left: 1.3333em;
   padding-right: 2.75em;
 }
-.drupal-navbar .icon:before {
+.drupal-navbar .navbar-icon:before {
   left: auto;
   right: 0.6667em;
 }
-.drupal-navbar .menu ul .icon {
+.drupal-navbar .menu ul .navbar-icon {
   padding-left: 0;
   padding-right: 1.3333em;
 }
-.drupal-navbar .vertical .menu ul {
+.drupal-navbar .navbar-tray-vertical .menu ul {
   margin-left: 0;
   margin-right: 1.5em;
 }
-.drupal-navbar .vertical .menu ul ul {
+.drupal-navbar .navbar-tray-vertical .menu ul ul {
   margin-left: 0;
   margin-right: 0.75em;
 }
 
 @media only screen and (min-width: 16.5em) {
-  .drupal-navbar .bar .icon:before {
+  .drupal-navbar .navbar-bar .navbar-icon:before {
     left: auto;
     right: 0;
   }
 }
 
 @media only screen and (min-width: 36em) {
-  .drupal-navbar .bar .icon {
+  .drupal-navbar .navbar-bar .navbar-icon {
     background-position: right center;
     padding-left: 1.3333em;
     padding-right: 2.75em;
   }
-  .drupal-navbar .bar .icon:before {
+  .drupal-navbar .navbar-bar .navbar-icon:before {
     left: auto;
     right: 0.6667em;
   }
diff --git a/css/navbar.icons.css b/css/navbar.icons.css
index c5c184e..0e2a245 100644
--- a/css/navbar.icons.css
+++ b/css/navbar.icons.css
@@ -1,14 +1,14 @@
 /**
  * @file navbar.icons.css
  */
-.drupal-navbar .icon {
+.drupal-navbar .navbar-icon {
   background: none;
   height: auto;
   padding-left: 2.75em; /* LTR */
   position: relative;
   width: auto;
 }
-.drupal-navbar .icon:before {
+.drupal-navbar .navbar-icon:before {
   background-attachment: scroll;
   background-color: transparent;
   background-position: center center;
@@ -21,125 +21,125 @@
   top: 0;
   width: 20px;
 }
-.drupal-navbar button.icon {
+.drupal-navbar button.navbar-icon {
   background-color: transparent;
   border: 0;
   font-size: 1em;
 }
-.drupal-navbar .menu ul .icon {
+.drupal-navbar .menu ul .navbar-icon {
   padding-left: 1.3333em; /* LTR */
 }
-.drupal-navbar .menu ul a.icon:before {
+.drupal-navbar .menu ul a.navbar-icon:before {
   display: none;
 }
-.drupal-navbar .vertical .menu ul {
+.drupal-navbar .navbar-tray-vertical .menu ul {
   margin-left: 1.5em; /* LTR */
 }
-.drupal-navbar .vertical .menu ul ul {
+.drupal-navbar .navbar-tray-vertical .menu ul ul {
   margin-left: 0.75em; /* LTR */
 }
 
 /**
  * Top level icons
  */
-.icon-home:before {
+.navbar-icon-home:before {
   background-image: url("../images/icon-home.png");
 }
-.icon-home:active:before,
-.icon-home.active:before {
+.navbar-icon-home:active:before,
+.navbar-icon-home.active:before {
   background-image: url("../images/icon-home-active.png");
 }
-.icon-menu:before {
+.navbar-icon-menu:before {
   background-image: url("../images/icon-menu.png");
 }
-.icon-menu:active:before,
-.icon-menu.active:before {
+.navbar-icon-menu:active:before,
+.navbar-icon-menu.active:before {
   background-image: url("../images/icon-menu-active.png");
 }
 
 /**
  * Main menu icons.
  */
-.icon-content:before {
+.navbar-icon-content:before {
   background-image: url("../images/icon-content.png");
 }
-.icon-content:active:before,
-.icon-content.active:before {
+.navbar-icon-content:active:before,
+.navbar-icon-content.active:before {
   background-image: url("../images/icon-content-active.png");
 }
-.icon-structure:before {
+.navbar-icon-structure:before {
   background-image: url("../images/icon-structure.png");
 }
-.icon-structure:active:before,
-.icon-structure.active:before {
+.navbar-icon-structure:active:before,
+.navbar-icon-structure.active:before {
   background-image: url("../images/icon-structure-active.png");
 }
-.icon-appearance:before {
+.navbar-icon-appearance:before {
   background-image: url("../images/icon-appearance.png");
 }
-.icon-appearance:active:before,
-.icon-appearance.active:before {
+.navbar-icon-appearance:active:before,
+.navbar-icon-appearance.active:before {
   background-image: url("../images/icon-appearance-active.png");
 }
-.icon-people:before {
+.navbar-icon-people:before {
   background-image: url("../images/icon-people.png");
 }
-.icon-people:active:before,
-.icon-people.active:before {
+.navbar-icon-people:active:before,
+.navbar-icon-people.active:before {
   background-image: url("../images/icon-people-active.png");
 }
-.icon-modules:before {
+.navbar-icon-modules:before {
   background-image: url("../images/icon-extend.png");
 }
-.icon-modules:active:before,
-.icon-modules.active:before {
+.navbar-icon-modules:active:before,
+.navbar-icon-modules.active:before {
   background-image: url("../images/icon-extend-active.png");
 }
-.icon-configuration:before {
+.navbar-icon-configuration:before {
   background-image: url("../images/icon-configuration.png");
 }
-.icon-configuration:active:before,
-.icon-configuration.active:before {
+.navbar-icon-configuration:active:before,
+.navbar-icon-configuration.active:before {
   background-image: url("../images/icon-configuration-active.png");
 }
-.icon-reports:before {
+.navbar-icon-reports:before {
   background-image: url("../images/icon-reports.png");
 }
-.icon-reports:active:before,
-.icon-reports.active:before {
+.navbar-icon-reports:active:before,
+.navbar-icon-reports.active:before {
   background-image: url("../images/icon-reports-active.png");
 }
-.icon-help:before {
+.navbar-icon-help:before {
   background-image: url("../images/icon-help.png");
 }
-.icon-help:active:before,
-.icon-help.active:before {
+.navbar-icon-help:active:before,
+.navbar-icon-help.active:before {
   background-image: url("../images/icon-help-active.png");
 }
 /**
  * User icon.
  */
-.icon-user:before {
+.navbar-icon-user:before {
   background-image: url("../images/icon-user.png");
 }
-.icon-user:active:before,
-.icon-user.active:before {
+.navbar-icon-user:active:before,
+.navbar-icon-user.active:before {
   background-image: url("../images/icon-user-active.png");
 }
 
 /**
  * Shortcut icon.
  */
-.icon-shortcut:before {
+.navbar-icon-shortcut:before {
   background-image: url("../images/shortcut.png");
 }
-.icon-shortcut:active:before,
-.icon-shortcut.active:before {
+.navbar-icon-shortcut:active:before,
+.navbar-icon-shortcut.active:before {
   background-image: url("../images/shortcut-active.png");
 }
 
 @media only screen and (min-width: 16.5em) {
-  .drupal-navbar .bar .icon {
+  .drupal-navbar .navbar-bar .navbar-icon {
     margin-left: 0;
     margin-right: 0;
     padding-left: 0;
@@ -147,7 +147,7 @@
     text-indent: -9999px;
     width: 4em;
   }
-  .drupal-navbar .bar .icon:before {
+  .drupal-navbar .navbar-bar .navbar-icon:before {
     background-size: auto auto;
     left: 0; /* LTR */
     width: 100%;
@@ -155,14 +155,14 @@
 }
 
 @media only screen and (min-width: 36em) {
-  .drupal-navbar .bar .icon {
+  .drupal-navbar .navbar-bar .navbar-icon {
     background-position: left center; /* LTR */
     padding-left: 2.75em; /* LTR */
     padding-right: 1.3333em; /* LTR */
     text-indent: 0;
     width: auto;
   }
-  .drupal-navbar .bar .icon:before {
+  .drupal-navbar .navbar-bar .navbar-icon:before {
     left: 0.6667em; /* LTR */
     width: 20px;
   }
diff --git a/css/navbar.menu-rtl.css b/css/navbar.menu-rtl.css
index 4346cbd..ed67c10 100644
--- a/css/navbar.menu-rtl.css
+++ b/css/navbar.menu-rtl.css
@@ -1,7 +1,7 @@
 /**
  * @file navbar.menu-rtl.css
  */
-.drupal-navbar .vertical .handle + a {
+.drupal-navbar .navbar-tray-vertical .navbar-handle + a {
   margin-left: 3em;
   margin-right: 0;
 }
@@ -9,11 +9,11 @@
 /**
  * Handle.
  */
-.drupal-navbar .icon.handle {
+.drupal-navbar .navbar-icon.navbar-handle {
   left: 0;
   right: auto;
 }
-.drupal-navbar .icon.handle:before {
+.drupal-navbar .navbar-icon.navbar-handle:before {
   left: auto;
   right: 0;
 }
diff --git a/css/navbar.menu.css b/css/navbar.menu.css
index c1bb7fa..93c72b5 100644
--- a/css/navbar.menu.css
+++ b/css/navbar.menu.css
@@ -7,25 +7,25 @@
   margin: 0;
   padding: 0;
 }
-.drupal-navbar .box {
+.drupal-navbar .navbar-box {
   display: block;
   line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
   position: relative;
   width: auto;
 }
-.drupal-navbar .horizontal .menu .handle,
-.drupal-navbar .horizontal .menu ul,
-.drupal-navbar .vertical .menu ul {
+.drupal-navbar .navbar-tray-horizontal .menu .navbar-handle,
+.drupal-navbar .navbar-tray-horizontal .menu ul,
+.drupal-navbar .navbar-tray-vertical .menu ul {
   display: none;
 }
-.drupal-navbar .vertical li.open > ul {
+.drupal-navbar .navbar-tray-vertical li.open > ul {
   display: block; /* Show the sub-menus */
 }
-.drupal-navbar .vertical .handle + a {
+.drupal-navbar .navbar-tray-vertical .navbar-handle + a {
   margin-right: 3em; /* LTR */
 }
-.drupal-navbar .tray .active-trail > .box a,
-.drupal-navbar .tray a.active {
+.drupal-navbar .navbar-tray .active-trail > .navbar-box a,
+.drupal-navbar .navbar-tray a.active {
   color: #000;
   font-weight: bold;
 }
@@ -72,10 +72,10 @@
 /**
  * Handle.
  */
-.drupal-navbar .handle:hover {
+.drupal-navbar .navbar-handle:hover {
   cursor: pointer;
 }
-.drupal-navbar .icon.handle {
+.drupal-navbar .navbar-icon.navbar-handle {
   bottom: 0;
   display: block;
   height: 100%;
@@ -87,16 +87,16 @@
   width: 3em;
   z-index: 1;
 }
-.drupal-navbar .icon.handle:before {
+.drupal-navbar .navbar-icon.navbar-handle:before {
   background-image: url("../images/icon-open.png");
   left: 0; /* LTR */
 }
-.drupal-navbar .icon.handle.open:before {
+.drupal-navbar .navbar-icon.navbar-handle.open:before {
   background-image: url("../images/icon-collapse.png");
 }
-.drupal-navbar .menu .menu .icon.handle:before {
+.drupal-navbar .menu .menu .navbar-icon.navbar-handle:before {
   background-image: url("../images/icon-child-open.png");
 }
-.drupal-navbar .menu .menu .icon.handle.open:before {
+.drupal-navbar .menu .menu .navbar-icon.navbar-handle.open:before {
   background-image: url("../images/icon-child-collapse.png");
 }
diff --git a/css/navbar.theme-rtl.css b/css/navbar.theme-rtl.css
index 3eae6a4..30ca840 100644
--- a/css/navbar.theme-rtl.css
+++ b/css/navbar.theme-rtl.css
@@ -8,35 +8,35 @@
 /**
  * navbar tray.
  */
-.drupal-navbar .horizontal > .lining {
+.drupal-navbar .navbar-tray-horizontal > .navbar-lining {
   padding-left: 5em;
   padding-right: 0;
 }
-.drupal-navbar .vertical > .lining,
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   border-left: 1px solid #aaaaaa;
   border-right: none;
 }
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
-.drupal-navbar .horizontal .menu li + li {
+.drupal-navbar .navbar-tray-horizontal .menu li + li {
   border-left: none;
   border-right: 1px solid #dddddd;
 }
-.drupal-navbar .horizontal .menu li:last-child {
+.drupal-navbar .navbar-tray-horizontal .menu li:last-child {
   border-left: 1px solid #dddddd;
   border-right: none;
 }
-.drupal-navbar .vertical .menu .menu .menu {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu {
   margin-left: 0;
   margin-right: 1.3333em;
 }
-.drupal-navbar .vertical .menu .menu .menu .menu {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0;
   margin-right: 0.25em;
 }
-.drupal-navbar .vertical .menu .menu .menu a {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu a {
   padding-left: 0;
   padding-right: 0.6667em;
 }
@@ -44,14 +44,14 @@
 /**
  * Orientation toggle.
  */
-.drupal-navbar .horizontal .toggle-orientation {
+.drupal-navbar .navbar-tray-horizontal .navbar-toggle-orientation {
   border-left: none;
   border-right: 1px solid #c9c9c9;
 }
-.drupal-navbar .toggle-orientation > .lining {
+.drupal-navbar .navbar-toggle-orientation > .navbar-lining {
   float: left;
 }
-.drupal-navbar .toggle-orientation button:before {
+.drupal-navbar .navbar-toggle-orientation button:before {
   left: auto;
   right: 0;
 }
@@ -59,12 +59,12 @@
 /**
  * Shortcut.
  */
-.drupal-navbar .tray.horizontal.shortcuts .menu {
+.drupal-navbar .navbar-tray.navbar-tray-horizontal.shortcuts .menu {
   float: right;
 }
-.drupal-navbar .vertical .edit-shortcuts {
+.drupal-navbar .navbar-tray-vertical .edit-shortcuts {
   text-align: left;
 }
-.drupal-navbar .horizontal .edit-shortcuts {
+.drupal-navbar .navbar-tray-horizontal .edit-shortcuts {
   float: right;
 }
diff --git a/css/navbar.theme.css b/css/navbar.theme.css
index eb8227a..d276ea6 100644
--- a/css/navbar.theme.css
+++ b/css/navbar.theme.css
@@ -19,7 +19,7 @@
   padding: 1em 1.3333em;
   text-decoration: none;
 }
-.drupal-navbar .tray .menu li a {
+.drupal-navbar .navbar-tray .menu li a {
   padding-right: 1.3333em;
 }
 .drupal-navbar a:hover {
@@ -29,23 +29,23 @@
 /**
  * navbar bar.
  */
-.drupal-navbar .bar {
+.drupal-navbar .navbar-bar {
   background-color: #0f0f0f;
   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3333);
   color: #dddddd;
 }
-.drupal-navbar .bar a {
+.drupal-navbar .navbar-bar a {
   color: #ffffff;
 }
-.drupal-navbar .bar .tab > a {
+.drupal-navbar .navbar-bar .navbar-tab > a {
   font-weight: bold;
 }
-.drupal-navbar .bar .tab > a:hover {
+.drupal-navbar .navbar-bar .navbar-tab > a:hover {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   text-decoration: none;
 }
-.drupal-navbar .bar .tab > a.active {
+.drupal-navbar .navbar-bar .navbar-tab > a.active {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
@@ -53,88 +53,88 @@
 /**
  * navbar tray.
  */
-.drupal-navbar .tray > .lining {
+.drupal-navbar .navbar-tray > .navbar-lining {
   background-color: #ffffff;
 }
-.drupal-navbar .horizontal > .lining {
+.drupal-navbar .navbar-tray-horizontal > .navbar-lining {
   padding-right: 5em; /* LTR */
 }
-.drupal-navbar .vertical > .lining,
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   background-color: #ffffff;
   border-right: 1px solid #aaaaaa; /* LTR */
 }
-.drupal-navbar .vertical > .lining:before {
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
   box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-.drupal-navbar .horizontal {
+.drupal-navbar .navbar-tray-horizontal {
   border-bottom: 1px solid #aaaaaa;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
 }
-.drupal-navbar .horizontal .tray {
+.drupal-navbar .navbar-tray-horizontal .navbar-tray {
   background-color: #f5f5f5;
 }
-.drupal-navbar .tray a {
+.drupal-navbar .navbar-tray a {
   color: #707070;
 }
-.drupal-navbar .tray a:hover,
-.drupal-navbar .tray a:active,
-.drupal-navbar .tray a.active {
+.drupal-navbar .navbar-tray a:hover,
+.drupal-navbar .navbar-tray a:active,
+.drupal-navbar .navbar-tray a.active {
   color: #000;
 }
-.drupal-navbar .horizontal .menu {
+.drupal-navbar .navbar-tray-horizontal .menu {
   background-color: #ffffff;
 }
-.drupal-navbar .horizontal .menu li + li {
+.drupal-navbar .navbar-tray-horizontal .menu li + li {
   border-left: 1px solid #dddddd; /* LTR */
 }
-.drupal-navbar .horizontal .menu li:last-child {
+.drupal-navbar .navbar-tray-horizontal .menu li:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-.drupal-navbar .vertical .menu li + li {
+.drupal-navbar .navbar-tray-vertical .menu li + li {
   border-top: 1px solid #dddddd;
 }
-.drupal-navbar .vertical .menu li:last-child {
+.drupal-navbar .navbar-tray-vertical .menu li:last-child {
   border-bottom: 1px solid #dddddd;
 }
-.drupal-navbar .vertical .menu .menu li {
+.drupal-navbar .navbar-tray-vertical .menu .menu li {
   border: 0 none;
 }
-.drupal-navbar .vertical .menu ul ul {
+.drupal-navbar .navbar-tray-vertical .menu ul ul {
   border-bottom: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
-.drupal-navbar .vertical .menu li:last-child > ul {
+.drupal-navbar .navbar-tray-vertical .menu li:last-child > ul {
   border-bottom: 0;
 }
-.drupal-navbar .vertical .menu .menu .menu {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu {
   margin-left: 1.3333em; /* LTR */
 }
-.drupal-navbar .vertical .menu .menu .menu .menu {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0.25em; /* LTR */
 }
 .drupal-navbar .menu .menu a {
   color: #434343;
 }
-.drupal-navbar .vertical .menu .menu .menu a {
+.drupal-navbar .navbar-tray-vertical .menu .menu .menu a {
   padding-left: 0.6667em; /* LTR */
 }
 
 /**
  * Orientation toggle.
  */
-.drupal-navbar .toggle-orientation {
+.drupal-navbar .navbar-toggle-orientation {
   background-color: #f5f5f5;
   padding: 0.6667em;
 }
-.drupal-navbar .horizontal .toggle-orientation {
+.drupal-navbar .navbar-tray-horizontal .navbar-toggle-orientation {
   border-left: 1px solid #c9c9c9; /* LTR */
 }
-.drupal-navbar .toggle-orientation > .lining {
+.drupal-navbar .navbar-toggle-orientation > .navbar-lining {
   float: right; /* LTR */
   padding: 0.1667em;
 }
-.drupal-navbar .toggle-orientation button {
+.drupal-navbar .navbar-toggle-orientation button {
   cursor: pointer;
   display: inline-block;
   height: 16px;
@@ -142,30 +142,30 @@
   text-indent: -999em;
   width: 20px;
 }
-.drupal-navbar .toggle-orientation button:before {
+.drupal-navbar .navbar-toggle-orientation button:before {
   left: 0; /* LTR */
 }
-.drupal-navbar .toggle-orientation [value="vertical"]:before {
+.drupal-navbar .navbar-toggle-orientation [value="vertical"]:before {
   background-image: url('../images/icon-toggle-vertical.png'); /* LTR */
 }
-.drupal-navbar .toggle-orientation [value="horizontal"]:before {
+.drupal-navbar .navbar-toggle-orientation [value="horizontal"]:before {
   background-image: url('../images/icon-toggle-horizontal.png');
 }
 
 /**
  * Shortcut.
  */
-.drupal-navbar .tray.horizontal.shortcuts .menu {
+.drupal-navbar .navbar-tray.navbar-tray-horizontal.shortcuts .menu {
   float: left;
 }
 .edit-shortcuts {
   display: block;
 }
-.drupal-navbar .vertical .edit-shortcuts {
+.drupal-navbar .navbar-tray-vertical .edit-shortcuts {
   text-align: right;
   padding: 1em;
 }
-.drupal-navbar .horizontal .edit-shortcuts {
+.drupal-navbar .navbar-tray-horizontal .edit-shortcuts {
   display: inline-block;
   float: left; /* LTR */
 }
diff --git a/js/navbar.js b/js/navbar.js
index 18bc627..c05993a 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -197,8 +197,8 @@ Drupal.navbar = Drupal.navbar || {
    */
   View: Backbone.View.extend({
     events: {
-      'click .bar .navbar-tab': 'onTabClick',
-      'click .toggle-orientation button': 'onOrientationToggleClick'
+      'click .navbar-bar .navbar-tab': 'onTabClick',
+      'click .navbar-toggle-orientation button': 'onOrientationToggleClick'
     },
 
     /**
@@ -213,8 +213,8 @@ Drupal.navbar = Drupal.navbar || {
       this.model.bind('change:offsets', this.adjustPlacement, this);
 
       // Add the tray orientation toggles.
-      this.$el.find('.tray')
-        .find('.lining')
+      this.$el.find('.navbar-tray')
+        .find('.navbar-lining')
         .append(Drupal.theme('navbarOrientationToggle'));
 
       // Trigger an activeTab change so that listening scripts can respond on
@@ -276,7 +276,7 @@ Drupal.navbar = Drupal.navbar || {
       // perfectly with Backbone views. All click events within the view's el
       // are being delegated, so we need to check here that we have the right
       // element before acting with it.
-      if ($(event.target).is('.toggle-orientation button')) {
+      if ($(event.target).is('.navbar-toggle-orientation button')) {
         var orientation = this.model.get('orientation');
         // Determine the toggle-to orientation.
         var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
@@ -342,7 +342,7 @@ Drupal.navbar = Drupal.navbar || {
           localStorage.setItem('Drupal.navbar.activeTabID', JSON.stringify(id));
         }
         // Activate the associated tray.
-        $tray = this.$el.find('[data-navbar-tray="' + name + '"].tray');
+        $tray = this.$el.find('[data-navbar-tray="' + name + '"].navbar-tray');
         if ($tray.length) {
           $tray.addClass('active');
           this.model.set('activeTray', $tray.get(0));
@@ -364,12 +364,12 @@ Drupal.navbar = Drupal.navbar || {
         localStorage.removeItem('Drupal.navbar.activeTabID');
       }
       // Disable non-selected tabs.
-      this.$el.find('.bar .navbar-tab')
+      this.$el.find('.navbar-bar .navbar-tab')
         .not($tab)
         .removeClass('active')
         .attr('aria-pressed', 'false');
       // Disable non-selected trays.
-      this.$el.find('.tray')
+      this.$el.find('.navbar-tray')
         .not($tray)
         .removeClass('active');
     },
@@ -383,14 +383,14 @@ Drupal.navbar = Drupal.navbar || {
       // the tray orientation toggle.
       var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
       // Update the orientation of the trays.
-      var $trays = this.$el.find('.tray')
-        .removeClass('horizontal vertical')
-        .addClass(orientation);
+      var $trays = this.$el.find('.navbar-tray')
+        .removeClass('navbar-tray-horizontal navbar-tray-vertical')
+        .addClass('navbar-tray-' + orientation);
 
       // Update the tray orientation toggle button.
-      var iconClass = 'icon-toggle-' + orientation;
-      var iconAntiClass = 'icon-toggle-' + antiOrientation;
-      this.$el.find('.toggle-orientation button')
+      var iconClass = 'navbar-icon-toggle-' + orientation;
+      var iconAntiClass = 'navbar-icon-toggle-' + antiOrientation;
+      this.$el.find('.navbar-toggle-orientation button')
         .val(antiOrientation)
         .text(this.strings[antiOrientation])
         .removeClass(iconClass)
@@ -401,9 +401,9 @@ Drupal.navbar = Drupal.navbar || {
       // Remove data-offset attributes from the trays so they can be refreshed.
       $trays.removeAttr('data-offset-left').removeAttr('data-offset-right').removeAttr('data-offset-top');
       // If an active vertical tray exists, mark it as an offset element.
-      $trays.filter('.vertical.active').attr('data-offset-' + edge, '');
+      $trays.filter('.navbar-tray-vertical.active').attr('data-offset-' + edge, '');
       // If an active horizontal tray exists, mark it as an offset element.
-      $trays.filter('.horizontal.active').attr('data-offset-top', '');
+      $trays.filter('.navbar-tray-horizontal.active').attr('data-offset-top', '');
       // Trigger a recalculation of viewport displacing elements.
       Drupal.displace();
 
@@ -439,10 +439,10 @@ Drupal.navbar = Drupal.navbar || {
      */
     adjustPlacement: function () {
       // Set the top of the all the trays to the height of the bar.
-      var barHeight = this.$el.find('.bar').outerHeight();
+      var barHeight = this.$el.find('.navbar-bar').outerHeight();
       var height = barHeight;
       var bhpx =  barHeight + 'px';
-      var $trays = this.$el.find('.tray');
+      var $trays = this.$el.find('.navbar-tray');
       var tray;
       for (var i = 0, il = $trays.length; i < il; i++) {
         tray = $trays[i];
@@ -511,8 +511,8 @@ Drupal.navbar = Drupal.navbar || {
  *   The corresponding HTML.
  */
 Drupal.theme.navbarOrientationToggle = function () {
-  return '<div class="toggle-orientation"><div class="lining">' +
-    '<button class="icon" type="button"></button>' +
+  return '<div class="navbar-toggle-orientation"><div class="navbar-lining">' +
+    '<button class="navbar-icon" type="button"></button>' +
     '</div></div>';
 };
 
diff --git a/js/navbar.menu.js b/js/navbar.menu.js
index ec7acd4..e92b050 100644
--- a/js/navbar.menu.js
+++ b/js/navbar.menu.js
@@ -50,7 +50,7 @@ var activeItem = Drupal.settings.basePath + Drupal.settings.currentPath;
      *   simply toggling its presence.
      */
     function toggleList ($item, switcher) {
-      var $toggle = $item.find('> .box > .handle');
+      var $toggle = $item.find('> .navbar-box > .navbar-handle');
       switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
       // Toggle the item open state.
       $item.toggleClass('open', switcher);
@@ -67,27 +67,27 @@ var activeItem = Drupal.settings.basePath + Drupal.settings.currentPath;
      *
      * Items with sub-elements have a list toggle attached to them. Menu item
      * links and the corresponding list toggle are wrapped with in a div
-     * classed with .box. The .box div provides a positioning context for the
-     * item list toggle.
+     * classed with .navbar-box. The .navbar-box div provides a positioning
+     * context for the item list toggle.
      *
      * @param {jQuery} $menu
      *   The root of the menu to be initialized.
      */
     function initItems ($menu) {
       var options = {
-        'class': 'icon handle',
+        'class': 'navbar-icon navbar-handle',
         'action': ui.handleOpen,
         'text': ''
       };
       // Initialize items and their links.
-      $menu.find('li > a').wrap('<div class="box">');
+      $menu.find('li > a').wrap('<div class="navbar-box">');
         // Add a handle to each list item if it has a menu.
       $menu.find('li').each(function (index, element) {
           var $item = $(element);
           if ($item.find('> ul.menu').length) {
-            var $box = $item.find('> .box');
+            var $box = $item.find('> .navbar-box');
             options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
-            $item.find('> .box')
+            $item.find('> .navbar-box')
               .append(Drupal.theme('navbarMenuItemToggle', options));
           }
         });
@@ -143,7 +143,7 @@ var activeItem = Drupal.settings.basePath + Drupal.settings.currentPath;
         // Attach handlers.
         // Bind event handlers.
         $menu
-          .delegate('.handle', 'click.navbar', toggleClickHandler);
+          .delegate('.navbar-handle', 'click.navbar', toggleClickHandler);
         // Restore previous and active states.
         openActiveItem($menu);
       }
diff --git a/navbar.module b/navbar.module
index cb1797a..29bccff 100644
--- a/navbar.module
+++ b/navbar.module
@@ -98,7 +98,7 @@ function navbar_element_info() {
       '#heading' => t('Navbar items'),
       '#attributes' => array(
         'id' => 'navbar-bar',
-        'class' => array('bar', 'clearfix'),
+        'class' => array('navbar-bar', 'clearfix'),
         'data-offset-top' => array(),
       ),
     ),
@@ -309,7 +309,7 @@ function navbar_pre_render_item($element) {
       $element['tray']['#wrapper_attributes'] = array();
     }
     $element['tray']['#wrapper_attributes'] += $attributes;
-    $element['tray']['#wrapper_attributes']['class'][] = 'tray';
+    $element['tray']['#wrapper_attributes']['class'][] = 'navbar-tray';
     $element['tray']['#wrapper_attributes']['class'][] = 'overlay-displace-top';
 
     if (!isset($element['tray']['#theme_wrappers'])) {
@@ -334,7 +334,7 @@ function template_preprocess_navbar_tab_wrapper(&$variables) {
   if (!isset($variables['element']['#wrapper_attributes'])) {
     $variables['element']['#wrapper_attributes'] = array();
   }
-  $variables['element']['#wrapper_attributes']['class'][] = 'tab';
+  $variables['element']['#wrapper_attributes']['class'][] = 'navbar-tab';
 }
 
 /**
@@ -387,7 +387,7 @@ function theme_navbar_tab_wrapper(&$variables) {
 function theme_navbar_tray_wrapper(&$variables) {
   if (!empty($variables['element']['#children'])) {
     $element = $variables['element'];
-    return '<div' . drupal_attributes($element['#wrapper_attributes']) . '><div class="lining clearfix">' . $element['#children'] . '</div></div>';
+    return '<div' . drupal_attributes($element['#wrapper_attributes']) . '><div class="navbar-lining clearfix">' . $element['#children'] . '</div></div>';
   }
 }
 
@@ -440,7 +440,7 @@ function navbar_navbar() {
       '#options' => array(
         'attributes' => array(
           'title' => t('Home page'),
-          'class' => array('icon', 'icon-home'),
+          'class' => array('navbar-icon', 'navbar-icon-home'),
         ),
       ),
     ),
@@ -485,7 +485,7 @@ function navbar_navbar() {
       '#options' => array(
         'attributes' => array(
           'title' => t('Admin menu'),
-          'class' => array('icon', 'icon-menu', 'navbar-tab',),
+          'class' => array('navbar-icon', 'navbar-icon-menu', 'navbar-tab',),
         ),
       ),
     ),
@@ -529,7 +529,7 @@ function navbar_navbar() {
         '#options' => array(
           'attributes' => array(
             'title' => t('My account'),
-            'class' => array('icon', 'icon-user', 'navbar-tab',),
+            'class' => array('navbar-icon', 'navbar-icon-user', 'navbar-tab',),
           ),
         ),
       ),
@@ -570,7 +570,7 @@ function navbar_navbar() {
           '#options' => array(
             'attributes' => array(
               'title' => t('Shortcuts'),
-              'class' => array('icon', 'icon-shortcut', 'navbar-tab',),
+              'class' => array('navbar-icon', 'navbar-icon-shortcut', 'navbar-tab',),
             ),
           ),
         ),
@@ -626,8 +626,8 @@ function navbar_menu_navigation_links(&$tree) {
     $tree[$key]['link']['localized_options']['attributes'] = array(
       'id' => 'navbar-link-' . str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['link_path']),
       'class' => array(
-        'icon',
-        'icon-' . strtolower(str_replace(' ', '-', $item['link']['link_title'])),
+        'navbar-icon',
+        'navbar-icon-' . strtolower(str_replace(' ', '-', $item['link']['link_title'])),
       ),
     );
   }