diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c946503..208d00f 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -1,8 +1,8 @@
-
 div.vertical-tabs {
-  margin: 1em 0 1em 15em; /* LTR */
+  margin: 1em 0 1em;
   border: 1px solid #ccc;
 }
+
 .vertical-tabs ul.vertical-tabs-list {
   width: 15em;
   list-style: none;
@@ -10,7 +10,25 @@ div.vertical-tabs {
   padding: 0;
   margin: -1px 0 -1px -15em; /* LTR */
   float: left; /* LTR */
+  display: none;
+}
+
+@media (min-width: 640px) {
+    div.vertical-tabs {
+        margin: 1em 0 1em 15em; /* LTR */
+    }
+
+    .vertical-tabs ul.vertical-tabs-list {
+      display: block;
+    }
+
+    .vertical-tabs h3.vertical-tab-button {
+      display: none;
+    }
 }
+
+
+
 .vertical-tabs fieldset.vertical-tabs-pane {
   margin: 0 !important;
   padding: 0 1em;
@@ -21,37 +39,49 @@ fieldset.vertical-tabs-pane > legend {
 }
 
 /* Layout of each tab */
-.vertical-tabs ul.vertical-tabs-list li {
+.vertical-tabs .vertical-tab-button {
   background: #eee;
   border: 1px solid #ccc;
   border-top: 0;
   padding: 0;
   margin: 0;
 }
-.vertical-tabs ul.vertical-tabs-list li a {
+.vertical-tabs .vertical-tab-button 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-tabs .vertical-tab-button a:focus strong,
+.vertical-tabs .vertical-tab-button a:active strong,
+.vertical-tabs .vertical-tab-button a:hover strong {
   text-decoration: underline;
 }
-.vertical-tabs ul.vertical-tabs-list li a:hover {
+.vertical-tabs .vertical-tab-button a:hover {
   outline: 1px dotted;
 }
-.vertical-tabs ul.vertical-tabs-list li.selected {
+.vertical-tabs .vertical-tab-button.selected {
   background-color: #fff;
+}
+.vertical-tabs ul.vertical-tabs-list li.selected {
   border-right-width: 0; /* LTR */
 }
-.vertical-tabs ul.vertical-tabs-list .selected strong {
+
+.vertical-tabs h3.vertical-tab-button {
+  border-left-width: 0;
+  border-right-width: 0;
+  font-size: 1em;
+  font-weight: normal;
+}
+.vertical-tabs h3.vertical-tab-button.selected {
+  border-bottom-width: 0;
+}
+.vertical-tabs .vertical-tab-button.selected strong {
   color: #000;
 }
-.vertical-tabs ul.vertical-tabs-list .summary {
+.vertical-tabs .vertical-tab-button .summary {
   display: block;
 }
-.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
+.vertical-tabs .vertical-tab-button .summary {
   line-height: normal;
   margin-bottom: 0;
 }
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 14d0660..5ee0861 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -36,6 +36,7 @@ Drupal.behaviors.verticalTabs = {
         });
         tab_list.append(vertical_tab.item);
         $(this)
+          .before(vertical_tab.heading)
           .removeClass('collapsible collapsed')
           .addClass('vertical-tabs-pane')
           .data('verticalTab', vertical_tab);
@@ -81,6 +82,11 @@ Drupal.verticalTab = function (settings) {
     return false;
   });
 
+  this.heading_link.click(function () {
+    self.focus();
+    return false;
+  });
+
   // Keyboard events added:
   // Pressing the Enter key will open the tab pane.
   this.link.keydown(function(event) {
@@ -92,6 +98,17 @@ Drupal.verticalTab = function (settings) {
     }
   });
 
+  // Keyboard events added:
+  // Pressing the Enter key will open the tab pane.
+  this.heading_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;
+    }
+  });
+
   this.fieldset
     .bind('summaryUpdated', function () {
       self.updateSummary();
@@ -110,12 +127,14 @@ Drupal.verticalTab.prototype = {
           var tab = $(this).data('verticalTab');
           tab.fieldset.hide();
           tab.item.removeClass('selected');
+          tab.heading.removeClass('selected');
         })
         .end()
       .show()
       .siblings(':hidden.vertical-tabs-active-tab')
         .val(this.fieldset.attr('id'));
     this.item.addClass('selected');
+    this.heading.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>');
@@ -126,6 +145,7 @@ Drupal.verticalTab.prototype = {
    */
   updateSummary: function () {
     this.summary.html(this.fieldset.drupalGetSummary());
+    this.heading_summary.html(this.fieldset.drupalGetSummary());
   },
 
   /**
@@ -189,6 +209,12 @@ Drupal.theme.prototype.verticalTab = function (settings) {
       .append(tab.summary = $('<span class="summary"></span>')
     )
   );
+  tab.heading = $('<h3 class="vertical-tab-button"></h3>')
+    .append(tab.heading_link = $('<a href="#"></a>')
+      .append(tab.heading_title = $('<strong></strong>').text(settings.title))
+      .append(tab.heading_summary = $('<span class="summary"></span>')
+    )
+  );
   return tab;
 };