diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c946503..b86532d 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -1,61 +1,100 @@
-
 div.vertical-tabs {
-  margin: 1em 0 1em 15em; /* LTR */
+  margin: 1em 0;
   border: 1px solid #ccc;
 }
+
 .vertical-tabs ul.vertical-tabs-list {
-  width: 15em;
-  list-style: none;
-  border-top: 1px solid #ccc;
-  padding: 0;
-  margin: -1px 0 -1px -15em; /* LTR */
-  float: left; /* LTR */
+  display: none;
 }
+
 .vertical-tabs fieldset.vertical-tabs-pane {
   margin: 0 !important;
-  padding: 0 1em;
+  padding: 0;
   border: 0;
 }
+
 fieldset.vertical-tabs-pane > legend {
-  display: none;
+  /* Save the legend from shrinkwrapping. */
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+}
+
+.vertical-tabs fieldset.vertical-tabs-pane > div.fieldset-contents {
+  padding: 0 1em;
+  overflow: hidden; /* stop margin collapse */
 }
 
-/* Layout of each tab */
-.vertical-tabs ul.vertical-tabs-list li {
+.vertical-tab-widget {
   background: #eee;
-  border: 1px solid #ccc;
-  border-top: 0;
+  border-style: solid;
+  border-color: #ccc;
+  border-width: 1px 0 0;
   padding: 0;
   margin: 0;
 }
-.vertical-tabs ul.vertical-tabs-list li a {
+
+legend.vertical-tab-widget.first {
+  border-top-width: 0;
+}
+
+.vertical-tab-widget a {
   display: block;
   text-decoration: none;
   padding: 0.5em 0.6em;
 }
-.vertical-tabs ul.vertical-tabs-list li a:focus strong,
-.vertical-tabs ul.vertical-tabs-list li a:active strong,
-.vertical-tabs ul.vertical-tabs-list li a:hover strong {
+
+.vertical-tab-widget a:focus strong,
+.vertical-tab-widget a:active strong,
+.vertical-tab-widget a:hover strong {
   text-decoration: underline;
 }
-.vertical-tabs ul.vertical-tabs-list li a:hover {
+
+.vertical-tab-widget a:hover {
   outline: 1px dotted;
 }
-.vertical-tabs ul.vertical-tabs-list li.selected {
+.vertical-tab-widget.selected {
   background-color: #fff;
-  border-right-width: 0; /* LTR */
+  border-bottom-width: 0;
 }
-.vertical-tabs ul.vertical-tabs-list .selected strong {
+.vertical-tab-widget.selected strong {
   color: #000;
 }
-.vertical-tabs ul.vertical-tabs-list .summary {
+.vertical-tab-widget .summary {
   display: block;
-}
-.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
   line-height: normal;
   margin-bottom: 0;
 }
 
+
+@media (min-width: 640px) {
+  div.vertical-tabs {
+    margin: 1em 0 1em 15em; /* LTR */
+  }
+
+  .vertical-tabs ul.vertical-tabs-list {
+    display: block;
+    width: 15em;
+    list-style: none;
+    border-top: 1px solid #ccc;
+    padding: 0;
+    margin: -1px 0 -1px -15em; /* LTR */
+    float: left; /* LTR */
+  }
+
+  fieldset.vertical-tabs-pane > legend {
+    display: none;
+  }
+
+  .vertical-tab-widget {
+    border-width: 0 1px 1px 1px;
+  }
+
+  .vertical-tab-widget.selected {
+    border-width: 0 0 1px 1px; /* LTR */
+  }
+}
+
 /**
  * Prevent text inputs from overflowing when container is too narrow. "width" is
  * applied to override hardcoded cols or size attributes and used in conjunction
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 14d0660..f3ac064 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -15,26 +15,38 @@
 Drupal.behaviors.verticalTabs = {
   attach: function (context) {
     $('.vertical-tabs-panes', context).once('vertical-tabs', function () {
+      // A hidden form element will indicate the ID of a pane that should be
+      // pre-selected, and tab_focus will be set to the corresponding jQuery
+      // object, if it exists, as we loop over the fieldsets.
       var focusID = $(':hidden.vertical-tabs-active-tab', this).val();
       var tab_focus;
 
-      // Check if there are some fieldsets that can be converted to vertical-tabs
+      // Stop now if there aren't any fieldsets to be converted to tab panes.
       var $fieldsets = $('> fieldset', this);
       if ($fieldsets.length == 0) {
         return;
       }
 
-      // Create the tab column.
+      // Prepare a <ul> to contain tabs in a separate column, to avoid needing
+      // to find a way to produce such column using the <legend>s and CSS.
+      // Since the column will be floated, it needs a clearfixing wrapper.
       var tab_list = $('<ul class="vertical-tabs-list"></ul>');
       $(this).wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
 
       // Transform each fieldset into a tab.
       $fieldsets.each(function () {
+        // Wrap everything but the <legend> with a separate <div>,
+        // so that it can be hidden by JS while leaving display
+        // of the <legend> under the control of the CSS.
+        $('>:not(legend)', this).wrapAll('<div class="fieldset-contents"></div>');
+
         var vertical_tab = new Drupal.verticalTab({
           title: $('> legend', this).text(),
           fieldset: $(this)
         });
-        tab_list.append(vertical_tab.item);
+        tab_list.append(vertical_tab.outerWidget.element);
+        $('> legend', this).replaceWith(vertical_tab.innerWidget.element);
+
         $(this)
           .removeClass('collapsible collapsed')
           .addClass('vertical-tabs-pane')
@@ -46,6 +58,8 @@ Drupal.behaviors.verticalTabs = {
 
       $('> li:first', tab_list).addClass('first');
       $('> li:last', tab_list).addClass('last');
+      $('legend:first', this).addClass('first');
+      $('legend:last', this).addClass('last'); // TODO showtab hidetab
 
       if (!tab_focus) {
         // If the current URL has a fragment and one of the tabs contains an
@@ -76,14 +90,30 @@ Drupal.verticalTab = function (settings) {
   var self = this;
   $.extend(this, settings, Drupal.theme('verticalTab', settings));
 
-  this.link.click(function () {
+  this.outerWidget.link.click(function () {
+    self.focus();
+    return false;
+  });
+
+  this.innerWidget.link.click(function () {
     self.focus();
     return false;
   });
 
   // Keyboard events added:
   // Pressing the Enter key will open the tab pane.
-  this.link.keydown(function(event) {
+  this.outerWidget.link.keydown(function(event) {
+    if (event.keyCode == 13) {
+      self.focus();
+      // Set focus on the first input field of the visible fieldset/tab pane.
+      $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus();
+      return false;
+    }
+  });
+
+  // Keyboard events added:
+  // Pressing the Enter key will open the tab pane.
+  this.innerWidget.link.keydown(function(event) {
     if (event.keyCode == 13) {
       self.focus();
       // Set focus on the first input field of the visible fieldset/tab pane.
@@ -108,24 +138,28 @@ Drupal.verticalTab.prototype = {
       .siblings('fieldset.vertical-tabs-pane')
         .each(function () {
           var tab = $(this).data('verticalTab');
-          tab.fieldset.hide();
-          tab.item.removeClass('selected');
+          tab.fieldset.children('.fieldset-contents').hide();
+          tab.outerWidget.element.removeClass('selected');
+          tab.innerWidget.element.removeClass('selected');
         })
         .end()
-      .show()
+      .children('.fieldset-contents').show().end()
       .siblings(':hidden.vertical-tabs-active-tab')
         .val(this.fieldset.attr('id'));
-    this.item.addClass('selected');
+    this.outerWidget.element.addClass('selected');
+    this.innerWidget.element.addClass('selected');
     // Mark the active tab for screen readers.
-    $('#active-vertical-tab').remove();
-    this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');
+    $('.active-vertical-tab').remove();
+    this.outerWidget.link.append('<span class="active-vertical-tab element-invisible">' + Drupal.t('(active tab)') + '</span>');
+    this.innerWidget.link.append('<span class="active-vertical-tab element-invisible">' + Drupal.t('(active tab)') + '</span>');
   },
 
   /**
    * Updates the tab's summary.
    */
   updateSummary: function () {
-    this.summary.html(this.fieldset.drupalGetSummary());
+    this.innerWidget.summary.html(this.fieldset.drupalGetSummary());
+    this.outerWidget.summary.html(this.fieldset.drupalGetSummary());
   },
 
   /**
@@ -183,12 +217,23 @@ Drupal.verticalTab.prototype = {
  */
 Drupal.theme.prototype.verticalTab = function (settings) {
   var tab = {};
-  tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
-    .append(tab.link = $('<a href="#"></a>')
-      .append(tab.title = $('<strong></strong>').text(settings.title))
-      .append(tab.summary = $('<span class="summary"></span>')
+
+  tab.outerWidget = {};
+  tab.outerWidget.element = $('<li class="vertical-tab-widget" tabindex="-1"></li>')
+    .append(tab.outerWidget.link = $('<a href="#"></a>')
+      .append(tab.outerWidget.title = $('<strong></strong>').text(settings.title))
+      .append(tab.outerWidget.summary = $('<span class="summary"></span>')
     )
   );
+
+  tab.innerWidget = {};
+  tab.innerWidget.element = $('<legend class="vertical-tab-widget" tabindex="-1"></legend>')
+    .append(tab.innerWidget.link = $('<a href="#"></a>')
+      .append(tab.innerWidget.title = $('<strong></strong>').text(settings.title))
+      .append(tab.innerWidget.summary = $('<span class="summary"></span>')
+    )
+  );
+
   return tab;
 };