diff --git a/core/modules/contextual/contextual.toolbar.js b/core/modules/contextual/contextual.toolbar.js
index ecd19d92..f4a37f5 100644
--- a/core/modules/contextual/contextual.toolbar.js
+++ b/core/modules/contextual/contextual.toolbar.js
@@ -26,7 +26,7 @@ function initContextualToolbar (context) {
   var model = contextualToolbar.model = new contextualToolbar.Model();
 
   var viewOptions = $.extend({
-    el: $('.js .toolbar .bar .contextual-toolbar-tab'),
+    el: $('.toolbar .toolbar-bar .contextual-toolbar-tab'),
     model: model
   }, options);
   new contextualToolbar.VisualView(viewOptions);
diff --git a/core/modules/contextual/css/contextual.toolbar.css b/core/modules/contextual/css/contextual.toolbar.css
index b2733ce..f540349 100644
--- a/core/modules/contextual/css/contextual.toolbar.css
+++ b/core/modules/contextual/css/contextual.toolbar.css
@@ -11,14 +11,15 @@
 .active.toolbar-icon-edit:before {
   background-image: url(../../../misc/edit-active.png);
 }
+
 /* Tab appearance. */
-.js .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
   float: right; /* LTR */
 }
-.js[dir=rtl] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
   float: left;
 }
-.js .toolbar .toolbar-bar .contextual-toolbar-tab button {
+.toolbar .toolbar-bar .contextual-toolbar-tab button {
   padding-bottom: 1em;
   padding-top: 1em;
   /* Hide tab text. */
@@ -26,16 +27,17 @@
   text-indent: -9999px;
   line-height: 1em;
 }
-.js[dir=rtl] .toolbar .toolbar-bar .contextual-toolbar-tab button {
+[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab button {
   padding-right: 1.3333em;
 }
-.js .toolbar .toolbar-bar .contextual-toolbar-tab button.active {
+.toolbar .toolbar-bar .contextual-toolbar-tab button.active {
   background-image:-moz-linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
   background-image:-webkit-gradient(linear,color-stop(0, rgb(78,159,234)),color-stop(1, rgb(69,132,221)));
   background-image: -webkit-linear-gradient(top,  rgb(78,159,234) 0%, rgb(69,132,221) 100%);
   background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
 }
+
 /* @todo get rid of this declaration by making toolbar.module's CSS less specific */
-.js .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab.toolbar-hidden {
+.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab.hidden {
   display: none;
 }
diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index a3a5b29..0ac7645 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -13,27 +13,18 @@
 .toolbar-icon-shortcut.active:before {
   background-image: url(../images/shortcut-active.png);
 }
-.toolbar .toolbar-tray.toolbar-horizontal.shortcuts .menu {
-  float: left;
-}
 .edit-shortcuts {
   display: block;
 }
-.toolbar .toolbar-vertical .edit-shortcuts {
+.toolbar .toolbar-tray-vertical .edit-shortcuts {
   text-align: right;
   padding: 1em;
 }
-.toolbar .toolbar-horizontal .edit-shortcuts {
+.toolbar .toolbar-tray-horizontal .edit-shortcuts {
   float: left; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal .edit-shortcuts {
-  border-left: 0 none;
-  border-right: 1px solid #d9d9d9;
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .edit-shortcuts {
   float: right;
-  margin-left: 0;
-  margin-right: 0.3333em;
-  padding-left: 0.3333em;
-  padding-right: 0.6667em;
 }
 
 /**
diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css
index c7d4140..bd6b9b7 100644
--- a/core/modules/toolbar/css/toolbar.icons.css
+++ b/core/modules/toolbar/css/toolbar.icons.css
@@ -1,11 +1,11 @@
 /**
- * @file toolbar.icons.css
+ * @file toolbar.toolbar-icons.css
  */
 .toolbar .toolbar-icon {
   padding-left: 2.75em; /* LTR */
   position: relative;
 }
-[dir=rtl] .toolbar .toolbar-icon {
+[dir="rtl"] .toolbar .toolbar-icon {
   padding-left: 1.3333em;
   padding-right: 2.75em;
 }
@@ -22,7 +22,7 @@
   top: 0;
   width: 20px;
 }
-[dir=rtl] .toolbar .toolbar-icon:before {
+[dir="rtl"] .toolbar .toolbar-icon:before {
   left: auto;
   right: 0.6667em;
 }
@@ -34,24 +34,24 @@
 .toolbar .menu ul .toolbar-icon {
   padding-left: 1.3333em; /* LTR */
 }
-[dir=rtl] .toolbar .menu ul .toolbar-icon {
+[dir="rtl"] .toolbar .menu ul .toolbar-icon {
   padding-left: 0;
   padding-right: 1.3333em;
 }
 .toolbar .menu ul a.toolbar-icon:before {
   display: none;
 }
-.toolbar .toolbar-vertical .menu ul {
+.toolbar .toolbar-tray-vertical .menu ul {
   margin-left: 1.5em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .menu ul {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul {
   margin-left: 0;
   margin-right: 1.5em;
 }
-.toolbar .toolbar-vertical .menu ul ul {
+.toolbar .toolbar-tray-vertical .menu ul ul {
   margin-left: 0.75em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .menu ul ul {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul ul {
   margin-left: 0;
   margin-right: 0.75em;
 }
@@ -63,14 +63,14 @@
   background-image: url("../images/icon-home.png");
 }
 .toolbar-icon-home:active:before,
-.toolbar-icon-home.toolbar-active:before {
+.toolbar-icon-home.active:before {
   background-image: url("../images/icon-home-active.png");
 }
 .toolbar-icon-menu:before {
   background-image: url("../images/icon-menu.png");
 }
 .toolbar-icon-menu:active:before,
-.toolbar-icon-menu.toolbar-active:before {
+.toolbar-icon-menu.active:before {
   background-image: url("../images/icon-menu-active.png");
 }
 
@@ -81,56 +81,56 @@
   background-image: url("../images/icon-content.png");
 }
 .toolbar-icon-content:active:before,
-.toolbar-icon-content.toolbar-active:before {
+.toolbar-icon-content.active:before {
   background-image: url("../images/icon-content-active.png");
 }
 .toolbar-icon-structure:before {
   background-image: url("../images/icon-structure.png");
 }
 .toolbar-icon-structure:active:before,
-.toolbar-icon-structure.toolbar-active:before {
+.toolbar-icon-structure.active:before {
   background-image: url("../images/icon-structure-active.png");
 }
 .toolbar-icon-appearance:before {
   background-image: url("../images/icon-appearance.png");
 }
 .toolbar-icon-appearance:active:before,
-.toolbar-icon-appearance.toolbar-active:before {
+.toolbar-icon-appearance.active:before {
   background-image: url("../images/icon-appearance-active.png");
 }
 .toolbar-icon-people:before {
   background-image: url("../images/icon-people.png");
 }
 .toolbar-icon-people:active:before,
-.toolbar-icon-people.toolbar-active:before {
+.toolbar-icon-people.active:before {
   background-image: url("../images/icon-people-active.png");
 }
 .toolbar-icon-extend:before {
   background-image: url("../images/icon-extend.png");
 }
 .toolbar-icon-extend:active:before,
-.toolbar-icon-extend.toolbar-active:before {
+.toolbar-icon-extend.active:before {
   background-image: url("../images/icon-extend-active.png");
 }
 .toolbar-icon-configuration:before {
   background-image: url("../images/icon-configuration.png");
 }
 .toolbar-icon-configuration:active:before,
-.toolbar-icon-configuration.toolbar-active:before {
+.toolbar-icon-configuration.active:before {
   background-image: url("../images/icon-configuration-active.png");
 }
 .toolbar-icon-reports:before {
   background-image: url("../images/icon-reports.png");
 }
 .toolbar-icon-reports:active:before,
-.toolbar-icon-reports.toolbar-active:before {
+.toolbar-icon-reports.active:before {
   background-image: url("../images/icon-reports-active.png");
 }
 .toolbar-icon-help:before {
   background-image: url("../images/icon-help.png");
 }
 .toolbar-icon-help:active:before,
-.toolbar-icon-help.toolbar-active:before {
+.toolbar-icon-help.active:before {
   background-image: url("../images/icon-help-active.png");
 }
 
@@ -147,7 +147,7 @@
     left: 0; /* LTR */
     width: 100%;
   }
-  [dir=rtl] .toolbar .toolbar-bar .toolbar-icon:before {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
     background-size: auto auto;
     left: auto;
     right: 0;
@@ -162,7 +162,7 @@
     text-indent: 0;
     width: auto;
   }
-  [dir=rtl] .toolbar .toolbar-bar .toolbar-icon {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
     background-position: right center;
     padding-left: 1.3333em;
     padding-right: 2.75em;
@@ -171,7 +171,7 @@
     left: 0.6667em; /* LTR */
     width: 20px;
   }
-  [dir=rtl] .toolbar .toolbar-bar .toolbar-icon:before {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
     left: 0;
     right: 0.6667em;
   }
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css
index c2fe3e2..060f102 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -12,23 +12,23 @@
   position: relative;
   width: auto;
 }
-.toolbar .toolbar-horizontal .menu .toolbar-handle,
-.toolbar .toolbar-horizontal .menu ul,
-.toolbar .toolbar-vertical .menu ul {
+.toolbar .toolbar-tray-horizontal .menu .toolbar-handle,
+.toolbar .toolbar-tray-horizontal .menu ul,
+.toolbar .toolbar-tray-vertical .menu ul {
   display: none;
 }
-.toolbar .toolbar-vertical li.toolbar-open > ul {
+.toolbar .toolbar-tray-vertical li.open > ul {
   display: block; /* Show the sub-menus */
 }
-.toolbar .toolbar-vertical .toolbar-handle + a {
+.toolbar .toolbar-tray-vertical .toolbar-handle + a {
   margin-right: 3em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .toolbar-handle + a {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a {
   margin-left: 3em;
   margin-right: 0;
 }
 .toolbar .toolbar-tray .active-trail > .toolbar-box a,
-.toolbar .toolbar-tray a.toolbar-active {
+.toolbar .toolbar-tray a.active {
   color: #000;
   font-weight: bold;
 }
@@ -90,7 +90,7 @@
   width: 3em;
   z-index: 1;
 }
-[dir=rtl] .toolbar .toolbar-icon.toolbar-handle {
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
   left: 0;
   right: auto;
 }
@@ -98,20 +98,16 @@
   background-image: url("../images/icon-open.png");
   left: 0; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-icon.toolbar-handle:before {
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
   left: auto;
   right: 0;
 }
-.toolbar .toolbar-icon.toolbar-handle:before {
-  background-image: url("../images/icon-open.png");
-  left: 0; /* LTR */
-}
-.toolbar .toolbar-icon.toolbar-handle.toolbar-open:before {
+.toolbar .toolbar-icon.toolbar-handle.open:before {
   background-image: url("../images/icon-collapse.png");
 }
 .toolbar .menu .menu .toolbar-icon.toolbar-handle:before {
   background-image: url("../images/icon-child-open.png");
 }
-.toolbar .menu .menu .toolbar-icon.toolbar-handle.toolbar-open:before {
+.toolbar .menu .menu .toolbar-icon.toolbar-handle.open:before {
   background-image: url("../images/icon-child-collapse.png");
 }
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 0917e98..d3e3f9e 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -5,30 +5,20 @@
  * Aggressive resets so we can achieve a consistent look in hostile CSS
  * environments.
  */
-html.js #toolbar-administration,
-html .toolbar * {
+#toolbar-administration,
+#toolbar-administration * {
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
 }
-html.js #toolbar-administration {
+#toolbar-administration {
   font-size: small;
   line-height: 1;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
 }
-html.js .toolbar {
-  left: 0; /* LTR */
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-html.js[dir=rtl] .toolbar {
-   left: auto;
-   right: 0;
- }
 
 /**
  * Very specific overrides for Drupal system CSS.
@@ -44,239 +34,210 @@ html.js[dir=rtl] .toolbar {
 .toolbar .menu li {
   padding-top: 0;
 }
-.js .toolbar .toolbar-bar .toolbar-tab,
-.js .toolbar .menu li {
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .menu li {
   display: block;
 }
-.js .toolbar .toolbar-bar .toolbar-tab,
-.js .toolbar .toolbar-horizontal .toolbar-tab  {
-  float: left; /* LTR */
-}
-.js[dir=rtl] .toolbar .toolbar-bar .toolbar-tab,
-.js[dir=rtl] .toolbar .toolbar-horizontal .toolbar-tab {
-  float: right;
-}
-.js .toolbar a {
+.toolbar a {
   display: block;
   line-height: 1;
 }
+
 /**
  * Administration menu.
  */
-.js .toolbar .toolbar-bar {
-  left: 0; /* LTR */
-  position: absolute;
-  top: 0;
+.toolbar .toolbar-bar,
+.toolbar .toolbar-tray {
+  position: relative;
   z-index: 1250;
-  width: 100%;
 }
-.js[dir=rtl] .toolbar .toolbar-bar {
-  left: auto;
+/* Position the admin toolbar absolutely when the configured standard breakpoint
+ * is active. The toolbar container, that contains the bar and the trays, is
+ * position absolutely so that it scrolls with the page. Otherwise, on smaller
+ * screens, the components of the admin toolbar are positioned statically. */
+body.toolbar-paneled .toolbar-oriented,
+.toolbar-oriented .toolbar-bar,
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
   right: 0;
+  top: 0;
+}
+/* Layer the bar just above the trays and above contextual link triggers. */
+.toolbar-oriented .toolbar-bar {
+  z-index: 502;
+}
+/* Position the admin toolbar fixed when the configured standard breakpoint is
+ * active. */
+body.toolbar-paneled .toolbar-oriented .toolbar-bar {
+  position: fixed;
+}
+/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
+ * around the trays in order to provide a context for scrolling tray content
+ * that is taller than the viewport. */
+body.toolbar-tray-open.toolbar-paneled.toolbar-vertical .toolbar-oriented {
+  bottom: 0;
+  width: 240px;
+  width: 15rem;
+}
+/* Present the admin toolbar tabs horizontally as a default on user agents that
+ * do not understand media queries or on user agents where JavaScript is
+ * disabled. */
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .toolbar-tray-horizontal li {
+  float: left; /* LTR */
 }
+[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+  float: right;
+}
+/* Present the admin toolbar tabs vertically by default on user agents that
+ * that understand media queries. This will be the small screen default. */
 @media only screen {
-  .js .toolbar .toolbar-bar .toolbar-tab,
-  .js .toolbar .toolbar-tray li {
+  .toolbar .toolbar-bar .toolbar-tab,
+  .toolbar .toolbar-tray-horizontal li {
     float: none; /* LTR */
   }
-  .js[dir=rtl] .toolbar .toolbar-bar .toolbar-tab,
-  .js[dir=rtl] .toolbar .toolbar-tray li {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
     float: none;
   }
 }
-@media only screen and (min-width: 16.5em) {
-  .js .toolbar .toolbar-bar .toolbar-tab,
-  .js .toolbar .toolbar-horizontal li {
+/* This min-width media query is meant to provide basic horizontal layout to
+ * the main menu tabs when JavaScript is disabled on user agents that understand
+ * media queries. */
+@media (min-width:16.5em) {
+  .toolbar .toolbar-bar .toolbar-tab,
+  .toolbar .toolbar-tray-horizontal li {
     float: left; /* LTR */
   }
-  .js[dir=rtl] .toolbar .toolbar-bar .toolbar-tab,
-  .js[dir=rtl] .toolbar .toolbar-horizontal li {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
     float: right;
   }
 }
-@media only screen and (min-width: 28.125em) {
-  .js .toolbar .toolbar-bar {
-    position: fixed;
-  }
+/* Present the admin toolbar tabs horizontally when the configured narrow
+ * breakpoint is active. */
+.toolbar-oriented .toolbar-bar .toolbar-tab,
+.toolbar-oriented .toolbar-tray-horizontal li {
+  float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
+  float: right;
 }
 
 /**
  * Toolbar tray.
  */
-.js .toolbar .toolbar-tray {
-  display: none;
-  position: fixed;
-}
-/* Make vertical toolbar tray scroll with page for touch devices. */
-.touch .toolbar .toolbar-tray {
-  position: absolute;
-}
 .toolbar .toolbar-tray {
-  z-index: 1200;
-}
-.toolbar .toolbar-horizontal {
-  width: 100%;
+  display: none;
+  z-index: 501;
 }
-.toolbar .toolbar-vertical,
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  bottom: 0;
-  width: 240px;
-  width: 15rem;
+.toolar .toolbar-tray > .toolbar-lining {
+  position: relative;
 }
-.toolbar .toolbar-vertical {
+.toolbar-oriented .toolbar-tray-vertical {
   left: -100%; /* LTR */
   position: absolute;
+  width: 240px;
+  width: 15rem;
 }
-[dir=rtl] .toolbar .toolbar-vertical {
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
   left: auto;
   right: -100%;
 }
-.toolbar .toolbar-horizontal {
+.toolbar .toolbar-tray-vertical > .toolbar-lining {
+  min-height: 100%;
+}
+.toolbar .toolbar-tray-vertical > .toolbar-lining:before {
+  width: 100%;
+}
+.toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
+  bottom: 0;
+  content: '';
+  display: block;
   left: 0; /* LTR */
-  height: 0;
-  /* Set one higher than the contextual links gear. */
-  z-index: 1000;
+  position: fixed;
+  top: 0;
+  width: 240px;
+  width: 15rem;
+  z-index: -1;
 }
-[dir=rtl] .toolbar .toolbar-horizontal {
+[dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
   left: auto;
   right: 0;
 }
-.toolar .toolbar-tray .toolbar-lining {
-  position: relative;
-}
-.toolbar .toolbar-vertical > .toolbar-lining,
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  left: -100%; /* LTR */
-  min-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
+/* Hide secondary menus when the tray is horizontal. */
+.toolbar-oriented .toolbar-tray-horizontal .menu li ul {
+  display: none;
 }
-[dir=rtl] .toolbar .toolbar-vertical > .toolbar-lining,
-[dir=rtl] .toolbar .toolbar-vertical > .toolbar-lining:before {
-  left: auto;
-  right: -100%;
+/* When the configured standard breakpoint is active and the tray is in a
+ * horizontal position, the tray is fixed to the top of the viewport and does
+ * not scroll with the page contents. */
+body.toolbar-paneled .toolbar .toolbar-tray-horizontal {
+  position: fixed;
 }
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  bottom: 0;
-  -moz-box-sizing: content-box;
-  -o-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-  content: '';
-  display: none;
+/* When the configured standard breakpoint is active and the tray is in a
+ * vertical position, the tray does not scroll with the page. The contents of
+ * the tray scroll within the confines of the viewport. */
+body.toolbar-paneled .toolbar .toolbar-tray-vertical {
   height: 100%;
-  /* Support for devices that do not support position fixed. */
-  position: absolute;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: fixed;
-  top: 0;
-  z-index: -1;
 }
-.toolbar .toolbar-tray.toolbar-active {
+.toolbar .toolbar-tray.active {
   display: block;
 }
-.toolbar .toolbar-horizontal.toolbar-active {
-  height: auto;
-}
-.toolbar .toolbar-vertical.toolbar-active,
-.toolbar .toolbar-vertical.toolbar-active > .toolbar-lining {
-  bottom: 0;
+/* Bring the tray into the viewport. By default it is just off-screen. */
+.toolbar-oriented .toolbar-tray-vertical.active {
   left: 0; /* LTR */
-  top: 0;
 }
-[dir=rtl] .toolbar .toolbar-vertical.toolbar-active,
-[dir=rtl] .toolbar .toolbar-vertical.toolbar-active > .toolbar-lining {
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.active {
   left: auto;
   right: 0;
 }
-/* Make vertical toolbar tray scroll with page for touch devices. */
-.touch .toolbar .toolbar-vertical.toolbar-active,
-.touch .toolbar .toolbar-vertical.toolbar-active > .toolbar-lining {
-  bottom: auto;
-  top: auto;
+/* When the configured standard breakpoint is active, the tray appears to push
+ * the page content away from the edge of the viewport. */
+body.toolbar-vertical.toolbar-paneled {
+  margin-left: 240px; /* LTR */
+  margin-left: 15rem; /* LTR */
 }
-.toolbar .toolbar-horizontal .menu li ul {
-  display: none;
-}
-@media only screen {
-  .toolbar .toolbar-vertical,
-  .toolbar .toolbar-vertical > .toolbar-lining:before {
-    bottom: auto;
-    width: 100%;
-  }
+[dir="rtl"] body.toolbar-vertical.toolbar-paneled {
+  margin-left: auto;
+  margin-left: auto;
+  margin-right: 240px;
+  margin-right: 15rem;
 }
 
-@media only screen and (min-width: 16.5em) {
-  .toolbar .toolbar-vertical {
-    bottom: 0;
-  }
-  .toolbar .toolbar-vertical,
-  .toolbar .toolbar-vertical > .toolbar-lining:before {
-    width: 240px;
-    width: 15rem;
-  }
-  .toolbar .toolbar-vertical.toolbar-active > .toolbar-lining:before {
-    display: block;
-    left: -1px; /* LTR */
-  }
-  [dir=rtl] .toolbar .toolbar-vertical.toolbar-active > .toolbar-lining:before {
-    left: auto;
-    right: -1px;
-  }
-}
-@media only screen and (min-width: 28.125em) {
-  .toolbar .toolbar-tray.toolbar-horizontal {
-    position: fixed;
-  }
-}
-/**
- * At larger screen sizes, the tray pushes the page content.
- */
-@media only screen and (min-width: 38.125em) {
-  body.toolbar-tray-open.toolbar-vertical-layout {
-    margin-left: 240px; /* LTR */
-    margin-left: 15rem; /* LTR */
-  }
-  [dir=rtl] body.toolbar-tray-open.toolbar-vertical {
-    margin-left: 0;
-    margin-right: 240px;
-    margin-right: 15rem;
-  }
-}
 /**
  * ToolBar tray orientation toggle.
- *
- * Hide the orientation toggle from browsers that do not interpret
- * media queries. They get a standard horizontal toolbar.
  */
-.toolbar .toolbar-horizontal .toolbar-toggle-orientation {
+/* Hide the orientation toggle when the configured narrow breakpoint is not
+ * active. */
+.toolbar .toolbar-tray .toolbar-toggle-orientation {
   display: none;
 }
-@media only screen {
-  .toolbar .toolbar-tray .toolbar-toggle-orientation {
-    display: none;
-  }
-}
-@media only screen and (min-width: 16.5em)   {
-  .toolbar .toolbar-tray .toolbar-toggle-orientation {
-    display: block;
-  }
+/* Show the orientation toggle when the configured narrow breakpoint is
+ * active. */
+.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
+  display: block;
 }
-.toolbar .toolbar-horizontal .toolbar-toggle-orientation {
+.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
   bottom: 0;
   position: absolute;
   right: 0; /* LTR */
-  top: 0;
+  top: auto;
 }
-[dir=rtl] .toolbar .toolbar-horizontal .toggle-orientation {
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
   left: 0;
   right: auto;
 }
-.toolbar .toolbar-vertical .toolbar-toggle-orientation {
+.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: right; /* LTR */
   width: 100%;
 }
-[dir=rtl] .toolbar .toolbar-vertical .toolbar-toggle-orientation {
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index 75a9b12..1d64296 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -31,7 +31,7 @@
   box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
   color: #dddddd;
 }
-[dir=rtl] .toolbar .toolbar-bar {
+[dir="rtl"] .toolbar .toolbar-bar {
   box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
 }
 .toolbar .toolbar-bar a {
@@ -56,49 +56,31 @@
 .toolbar .toolbar-tray {
   background-color: #ffffff;
 }
-.toolbar .toolbar-horizontal > .toolbar-lining {
+.toolbar .toolbar-tray-horizontal > .toolbar-lining {
   padding-right: 5em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal > .toolbar-lining {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
   padding-right: 0;
   padding-left: 5em;
 }
-.toolbar .toolbar-vertical > .toolbar-lining,
-.toolbar .toolbar-vertical > .toolbar-lining:before {
+.toolbar .toolbar-tray-vertical > .toolbar-lining:before {
   background-color: #ffffff;
   border-right: 1px solid #aaaaaa; /* LTR */
+  box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical > .toolbar-lining,
-[dir=rtl] .toolbar .toolbar-vertical > .toolbar-lining:before {
+[dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
   border-left: 1px solid #aaaaaa;
   border-right: 0 none;
-}
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
-}
-[dir=rtl] .toolbar-toolbar .toolbar-vertical > .toolbar-lining:before {
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-horizontal {
+.toolbar .toolbar-tray-horizontal {
   border-bottom: 1px solid #aaaaaa;
   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal {
   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-vertical > .toolbar-lining,
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  background-color: #ffffff;
-  border-right: 1px solid #aaaaaa; /* LTR */
-}
-.toolbar .toolbar-vertical > .toolbar-lining:before {
-  box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
-}
-.toolbar .toolbar-horizontal {
-  border-bottom: 1px solid #aaaaaa;
-  box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
-}
-.toolbar .toolbar-horizontal .toolbar-tray {
+.toolbar .toolbar-tray-horizontal .toolbar-tray {
   background-color: #f5f5f5;
 }
 .toolbar .toolbar-tray a {
@@ -109,62 +91,59 @@
 .toolbar .toolbar-tray a.active {
   color: #000;
 }
-.toolbar .toolbar-horizontal .menu {
+.toolbar .toolbar-tray-horizontal .menu {
   background-color: #ffffff;
 }
-.toolbar .toolbar-horizontal .menu li + li {
+.toolbar .toolbar-tray-horizontal .menu li + li {
   border-left: 1px solid #dddddd; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal .menu li + li {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li + li {
   border-left: 0 none ;
   border-right: 1px solid #dddddd;
 }
-.toolbar .toolbar-horizontal .menu li:last-child {
+.toolbar .toolbar-tray-horizontal .menu li:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal .menu li:last-child {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li:last-child {
   border-left: 1px solid #dddddd;
 }
-.toolbar .toolbar-horizontal .menu li:last-child {
-  border-right: 1px solid #dddddd; /* LTR */
-}
-.toolbar .toolbar-vertical .menu li + li {
+.toolbar .toolbar-tray-vertical .menu li + li {
   border-top: 1px solid #dddddd;
 }
-.toolbar .toolbar-vertical .menu li:last-child {
+.toolbar .toolbar-tray-vertical .menu li:last-child {
   border-bottom: 1px solid #dddddd;
 }
-.toolbar .toolbar-vertical .menu .menu li {
+.toolbar .toolbar-tray-vertical .menu .menu li {
   border: 0 none;
 }
-.toolbar .toolbar-vertical .menu ul ul {
+.toolbar .toolbar-tray-vertical .menu ul ul {
   border-bottom: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
-.toolbar .toolbar-vertical .menu li:last-child > ul {
+.toolbar .toolbar-tray-vertical .menu li:last-child > ul {
   border-bottom: 0;
 }
-.toolbar .toolbar-vertical .menu .menu .menu {
+.toolbar .toolbar-tray-vertical .menu .menu .menu {
   margin-left: 1.3333em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .menu .menu .menu {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .menu .menu .menu {
   margin-left: 0;
   margin-right: 1.3333em;
 }
-.toolbar .toolbar-vertical .menu .menu .menu .menu {
+.toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0.25em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .menu .menu .menu .menu {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0;
   margin-right: 0.25em;
 }
 .toolbar .menu .menu a {
   color: #434343;
 }
-.toolbar .toolbar-vertical .menu .menu .menu a {
+.toolbar .toolbar-tray-vertical .menu .menu .menu a {
   padding-left: 0.6667em; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-vertical .menu .menu .menu a {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .menu .menu .menu a {
   padding-left: 0;
   padding-right: 0.5em;
 }
@@ -172,14 +151,14 @@
 /**
  * Orientation toggle.
  */
-.toolbar .toggle-orientation {
+.toolbar .toolbar-toggle-orientation {
   background-color: #f5f5f5;
   padding: 0.6667em;
 }
-.toolbar .toolbar-horizontal .toolbar-toggle-orientation {
+.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
   border-left: 1px solid #c9c9c9; /* LTR */
 }
-[dir=rtl] .toolbar .toolbar-horizontal .toggle-orientation {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
   border-left: 0 none;
   border-right: 1px solid #c9c9c9;
 }
@@ -187,10 +166,10 @@
   float: right; /* LTR */
   padding: 0.1667em;
 }
-[dir=rtl] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
+[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
   float: left;
 }
-.toolbar .toggle-orientation button {
+.toolbar .toolbar-toggle-orientation button {
   cursor: pointer;
   display: inline-block;
   height: 16px;
@@ -201,19 +180,16 @@
 .toolbar .toolbar-toggle-orientation button:before {
   left: 0; /* LTR */
 }
-[dir=rtl] .toolbar .toggle-orientation button:before {
+[dir="rtl"] .toolbar .toolbar-toggle-orientation button:before {
   left: auto;
   right: 0;
 }
-.toolbar .toggle-orientation [value="vertical"]:before {
+.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
   background-image: url('../images/icon-toggle-vertical.png'); /* LTR */
 }
-[dir=rtl] .toolbar .toggle-orientation [value="vertical"]:before {
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
   background-image: url('../images/icon-toggle-vertical-rtl.png');
 }
-.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
-  background-image: url('../images/icon-toggle-vertical.png'); /* LTR */
-}
 .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
   background-image: url('../images/icon-toggle-horizontal.png');
 }
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 18c9026..dea38b5 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -31,6 +31,7 @@ var $messages;
  * Holds the mediaQueryList object.
  */
 var mql = {
+  narrow: null,
   standard: null,
   wide: null
 };
@@ -45,6 +46,11 @@ var mql = {
  */
 Drupal.behaviors.toolbar = {
   attach: function(context) {
+    // Verify that the sser agent understands media queries. Complex admin
+    // toolbar layouts require media query support.
+    if (!window.matchMedia('only screen').matches) {
+      return;
+    };
     var options = $.extend(this.options, drupalSettings.toolbar);
     var $toolbarOnce = $(context).find('#toolbar-administration').once('toolbar');
     if ($toolbarOnce.length) {
@@ -71,12 +77,17 @@ Drupal.behaviors.toolbar = {
         // Add the tray orientation toggles.
         .find('.toolbar-lining')
         .append(Drupal.theme('toolbarOrientationToggle'));
-      // Store media queries.
+      // Store media queries and attach a handler.
+      mql.narrow = window.matchMedia(options.breakpoints['module.toolbar.narrow']);
+      mql.narrow.addListener(Drupal.toolbar.narrowMediaQueryChangeHandler);
       mql.standard = window.matchMedia(options.breakpoints['module.toolbar.standard']);
-      // Set up switching between the vertical and horizontal presentation
-      // of the toolbar trays based on a breakpoint.
+      mql.standard.addListener(Drupal.toolbar.standardMediaQueryChangeHandler);
       mql.wide = window.matchMedia(options.breakpoints['module.toolbar.wide']);
-      mql.wide.addListener(Drupal.toolbar.mediaQueryChangeHandler);
+      mql.wide.addListener(Drupal.toolbar.wideMediaQueryChangeHandler);
+      // Fire each MediaQuery change handler so they process once.
+      Drupal.toolbar.narrowMediaQueryChangeHandler.call(this, mql.narrow);
+      Drupal.toolbar.standardMediaQueryChangeHandler.call(this, mql.standard);
+      Drupal.toolbar.wideMediaQueryChangeHandler.call(this, mql.wide);
       // Set the orientation of the tray.
       // If the tray is set to vertical in localStorage, persist the vertical
       // presentation. If the tray is not locked to vertical, let the media
@@ -106,6 +117,7 @@ Drupal.behaviors.toolbar = {
   // Default options.
   options: {
     breakpoints: {
+      'module.toolbar.narrow': '',
       'module.toolbar.standard': '',
       'module.toolbar.wide': ''
     }
@@ -127,17 +139,17 @@ Drupal.toolbar.setSubtrees = function(subtrees) {
  */
 Drupal.toolbar.toggleTray = function (event) {
   var strings = {
-    opened: Drupal.t('Opened'),
-    closed: Drupal.t('Closed')
+    opened: Drupal.t('opened'),
+    closed: Drupal.t('closed')
   };
   var $tab = $(event.target);
   var name = $tab.attr('data-toolbar-tray');
   // Activate the selected tab and associated tray.
-  var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].toolbar-tray').toggleClass('toolbar-active');
+  var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].toolbar-tray').toggleClass('active');
   if ($activateTray.length) {
     event.preventDefault();
     event.stopPropagation();
-    $tab.toggleClass('toolbar-active');
+    $tab.toggleClass('active');
     // Toggle aria-pressed.
     var value = $tab.prop('aria-pressed');
     $tab.prop('aria-pressed', (value === 'false') ? 'true' : 'false');
@@ -147,7 +159,7 @@ Drupal.toolbar.toggleTray = function (event) {
       '@state': (value === 'true') ? strings.closed : strings.opened
     }));
     // Store the active tab name or remove the setting.
-    if ($tab.hasClass('toolbar-active')) {
+    if ($tab.hasClass('active')) {
       localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name));
     }
     else {
@@ -156,10 +168,10 @@ Drupal.toolbar.toggleTray = function (event) {
     // Disable non-selected tabs and trays.
     $toolbar.find('.toolbar-bar .trigger')
       .not($tab)
-      .removeClass('toolbar-active')
+      .removeClass('active')
       // Set aria-pressed to false.
       .prop('aria-pressed', false);
-    $toolbar.find('.toolbar-tray').not($activateTray).removeClass('toolbar-active');
+    $toolbar.find('.toolbar-tray').not($activateTray).removeClass('active');
   }
   // Update the page and toolbar dimension indicators.
   updatePeripherals();
@@ -176,18 +188,23 @@ Drupal.toolbar.toggleTray = function (event) {
  *   viewport offset distances calculated by Drupal.displace().
  */
 Drupal.toolbar.adjustPlacement = function (event, offsets) {
-  // Set the top of the all the trays to the height of the bar.
-  var barHeight = $toolbar.find('.toolbar-bar').outerHeight();
-  var bhpx =  barHeight + 'px';
-  var tray;
-  for (var i = 0, il = $trays.length; i < il; i++) {
-    tray = $trays[i];
-    if (!tray.style.top.length || (tray.style.top !== bhpx)) {
-      tray.style.top = bhpx;
-    }
+  if (!mql.narrow.matches) {
+    var $body = $('body');
+    var $trays = $toolbar.find('.toolbar-tray');
+    // Alter the padding on the top of the body element.
+    $body.css('padding-top', 0);
+    $trays.css('padding-top', 0);
+    // Remove any orientation classes. Make vertical the default for trays.
+    $body.removeClass('toolbar-vertical toolbar-horizontal');
+    $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
+  }
+  else {
+    // Alter the padding on the top of the body element.
+    $('body').css('padding-top', offsets.top);
+    // The navbar container is invisible. Its placement is used to determine the
+    // container for the trays.
+    $toolbar.find('.toolbar-tray').css('padding-top', $toolbar.find('.toolbar-bar').outerHeight());
   }
-  // Alter the padding on the top of the body element.
-  $('body').css('padding-top', offsets.top);
 };
 
 /**
@@ -199,20 +216,53 @@ Drupal.toolbar.adjustPlacement = function (event, offsets) {
 Drupal.toolbar.setTrayWidth = function () {
   var dir = document.documentElement.dir;
   var edge = (dir === 'rtl') ? 'right' : 'left';
-  // Remove the left offset from the trays.
+  // Remove the side offset from the trays.
   $toolbar.find('.toolbar-tray').removeAttr('data-offset-' + edge + ' data-offset-top');
-  // If an active vertical tray exists, mark it as an offset element.
-  $toolbar.find('.toolbar-tray.toolbar-vertical.toolbar-active').attr('data-offset-' + edge, '');
-  // If an active horizontal tray exists, mark it as an offset element.
-  $toolbar.find('.toolbar-tray.toolbar-horizontal.toolbar-active').attr('data-offset-top', '');
+  // If the page is wider than the narrow media query, apply offset attributes.
+  if (mql.narrow.matches) {
+    // If an active vertical tray exists, mark it as an offset element.
+    $toolbar.find('.toolbar-tray.toolbar-tray-vertical.active').attr('data-offset-' + edge, '');
+    // If an active horizontal tray exists, mark it as an offset element.
+    $toolbar.find('.toolbar-tray.toolbar-tray-horizontal.active').attr('data-offset-top', '');
+  }
   // Trigger a recalculation of viewport displacing elements.
   Drupal.displace();
 };
 
 /**
- * Respond to configured media query applicability changes.
+ * Respond to configured narrow media query changes.
+ */
+Drupal.toolbar.narrowMediaQueryChangeHandler = function (mql) {
+  var $bar = $toolbar.find('.toolbar-bar');
+  if (mql.matches) {
+    $bar.attr('data-offset-top', '');
+  }
+  else {
+    $bar.removeAttr('data-offset-top');
+  }
+  // Toggle between a basic vertical view and a more sophisticated horizontal
+  // and vertical display of the toolbar bar and trays.
+  $toolbar.toggleClass('toolbar-oriented', mql.matches);
+  if (mql.matches) {
+    changeOrientation('vertical');
+  }
+  // Update the page and toolbar dimension indicators.
+  updatePeripherals();
+};
+
+/**
+ * Respond to configured standard media query changes.
+ */
+Drupal.toolbar.standardMediaQueryChangeHandler = function (mql) {
+  $('body').toggleClass('toolbar-paneled', mql.matches);
+  // Update the page and toolbar dimension indicators.
+  updatePeripherals();
+};
+
+/**
+ * Respond to configured wide media query changes.
  */
-Drupal.toolbar.mediaQueryChangeHandler = function (mql) {
+Drupal.toolbar.wideMediaQueryChangeHandler = function (mql) {
   var orientation = (mql.matches) ? 'horizontal' : 'vertical';
   changeOrientation(orientation);
   // Update the page and toolbar dimension indicators.
@@ -253,8 +303,8 @@ function changeOrientation (newOrientation, isLock) {
   }
   if ((!locked && newOrientation === 'horizontal') || newOrientation === 'vertical') {
     $trays
-      .removeClass('toolbar-horizontal toolbar-vertical')
-      .addClass('toolbar-' + newOrientation);
+      .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
+      .addClass('toolbar-tray-' + newOrientation);
     orientation = newOrientation;
     toggleOrientationToggle((newOrientation === 'vertical') ? 'horizontal' : 'vertical');
   }
@@ -264,11 +314,11 @@ function changeOrientation (newOrientation, isLock) {
  * Mark up the body tag to reflect the current state of the toolbar.
  */
 function setBodyState () {
-  var $activeTray = $trays.filter('.toolbar-active');
+  var $activeTray = $trays.filter('.active');
   $('body')
     .toggleClass('toolbar-tray-open', !!$activeTray.length)
-    .toggleClass('toolbar-vertical-layout', (!!$activeTray.length && orientation === 'vertical'))
-    .toggleClass('toolbar-horizontal-layout', (!!$activeTray.length && orientation === 'horizontal'));
+    .toggleClass('toolbar-vertical', (!!$activeTray.length && orientation === 'vertical'))
+    .toggleClass('toolbar-horizontal', (!!$activeTray.length && orientation === 'horizontal'));
 }
 
 /**
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index 86966c1..4671fce 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -32,7 +32,7 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
       // Toggle the list item.
       toggleList($item);
       // Close open sibling menus.
-      var $openItems = $item.siblings().filter('.toolbar-open');
+      var $openItems = $item.siblings().filter('.open');
       toggleList($openItems, false);
     }
     /**
@@ -47,14 +47,14 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
      */
     function toggleList ($item, switcher) {
       var $toggle = $item.find('> .toolbar-box > .toolbar-handle');
-      switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('toolbar-open');
+      switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
       // Toggle the item open state.
-      $item.toggleClass('toolbar-open', switcher);
+      $item.toggleClass('open', switcher);
       // Twist the toggle.
-      $toggle.toggleClass('toolbar-open', switcher);
+      $toggle.toggleClass('open', switcher);
       // Adjust the toggle text.
       $toggle
-        .find('.toolbar-action')
+        .find('.action')
         // Expand Structure, Collapse Structure
         .text((switcher) ?  ui.handleClose : ui.handleOpen);
     }
@@ -81,9 +81,9 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
       $menu.find('li').each(function (index, element) {
           var $item = $(element);
           if ($item.find('> ul.menu').length) {
-            var $box = $item.find('> .toolbar-box');
+            var $box = $item.children('.toolbar-box');
             options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
-            $item.find('> .toolbar-box')
+            $item.children('.toolbar-box')
               .append(Drupal.theme('toolbarMenuItemToggle', options));
           }
         });
@@ -123,8 +123,8 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
         activeItem = location.pathname;
       }
       if (activeItem) {
-        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('toolbar-active');
-        var $activeTrail = $activeItem.parentsUntil('.toolbar-root', 'li').addClass('active-trail');
+        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('active');
+        var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('active-trail');
         toggleList($activeTrail, true);
       }
     }
@@ -135,7 +135,7 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
     return this.each(function (selector) {
       var $menu = $(this).once('toolbar-menu');
       if ($menu.length) {
-        $menu.addClass('toolbar-root');
+        $menu.addClass('root');
         initItems($menu);
         markListLevels($menu);
         // Restore previous and active states.
@@ -151,7 +151,7 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
    *   A string representing a DOM fragment.
    */
   Drupal.theme.toolbarMenuItemToggle = function (options) {
-    return '<button class="' + options['class'] + '"><span class="toolbar-action">' + options.action + '</span><span class="toolbar-label">' + options.text + '</span></button>';
+    return '<button class="' + options['class'] + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
   };
 
 }(jQuery, Drupal));
diff --git a/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarMenuTranslationTest.php b/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarMenuTranslationTest.php
index 58b58c5..a11eaab 100644
--- a/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarMenuTranslationTest.php
+++ b/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarMenuTranslationTest.php
@@ -64,7 +64,7 @@ function testToolbarClasses() {
     $this->assertNoText('No strings available.', 'Search found the menu item as untranslated.');
 
     // Check that the class is on the item before we translate it.
-    $xpath = $this->xpath('//a[contains(@class, "toolbar-icon-structure")]');
+    $xpath = $this->xpath('//a[contains(@class, "icon-structure")]');
     $this->assertEqual(count($xpath), 1, 'The menu item class ok before translation.');
 
     // Translate the menu item.
@@ -93,7 +93,7 @@ function testToolbarClasses() {
 
     // Toolbar icons are included based on the presence of a specific class on
     // the menu item. Ensure that class also exists for a translated menu item.
-    $xpath = $this->xpath('//a[contains(@class, "toolbar-icon-structure")]');
+    $xpath = $this->xpath('//a[contains(@class, "icon-structure")]');
     $this->assertEqual(count($xpath), 1, 'The menu item class is the same.');
   }
 
diff --git a/core/modules/toolbar/toolbar.api.php b/core/modules/toolbar/toolbar.api.php
index 6ed86ba..412331f 100644
--- a/core/modules/toolbar/toolbar.api.php
+++ b/core/modules/toolbar/toolbar.api.php
@@ -16,9 +16,9 @@
  * The toolbar is a container for adminstrative and site-global interactive
  * components.
  *
- * The toolbar provides a common styling for items denoted by the .tab class.
- * The theme wrapper toolbar_tab_wrapper is provided to wrap a toolbar item
- * with the appropriate markup to apply the styling.
+ * The toolbar provides a common styling for items denoted by the
+ * .toolbar-tab class. The theme wrapper toolbar_tab_wrapper is provided to wrap
+ * a toolbar item with the appropriate markup to apply the styling.
  *
  * The toolbar provides a construct called a 'tray'. The tray is a container
  * for content. The tray may be associated with a toggle in the adminstration
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index f6cfac4..13a8aa2 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -91,7 +91,6 @@ function toolbar_element_info() {
       '#attributes' => array(
         'id' => 'toolbar-bar',
         'class' => array('toolbar-bar', 'clearfix',),
-        'data-offset-top' => array(),
       ),
     ),
   );
diff --git a/core/modules/tour/css/tour.module.css b/core/modules/tour/css/tour.module.css
index b6165f8..afb0afd 100644
--- a/core/modules/tour/css/tour.module.css
+++ b/core/modules/tour/css/tour.module.css
@@ -4,23 +4,23 @@
  */
 
 /* Tab appearance. */
-.js .toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
+.toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
   float: right; /* LTR */
 }
-.js[dir=rtl] .toolbar .bar .tour-toolbar-tab.tab {
+[dir="rtl"] .toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
   float: left;
 }
-.js .toolbar .tour-toolbar-tab button {
+.toolbar .tour-toolbar-tab button {
   padding-bottom: 1em;
   padding-top: 1em;
   color: #fff;
   font-weight: bold;
 }
-.js .toolbar .tour-toolbar-tab button.active {
+.toolbar .tour-toolbar-tab button.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%);
 }
-.js .tour-toolbar-tab button:focus {
+.tour-toolbar-tab button:focus {
   outline: thin dotted;
 }
 
@@ -35,12 +35,12 @@
   bottom: 10px;
   right: 15px; /* LTR */
 }
-[dir=rtl] .tour-progress {
+[dir="rtl"] .tour-progress {
   right: 0;
   left: 15px;
 }
 
 /* @todo Remove once http://drupal.org/node/1916690 is resolved. */
-.js .toolbar .tour-toolbar-tab.toolbar-tab.hidden {
+.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
   display: none;
 }