diff --git a/core/includes/form.inc b/core/includes/form.inc
index 6956f04..34630f8 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -256,8 +256,8 @@ function drupal_get_form($form_id) {
  *     handler, and is also used in Ajax handlers.
  *   - has_file_element: Internal. If TRUE, there is a file element and Form API
  *     will set the appropriate 'enctype' HTML attribute on the form.
- *   - groups: Internal. An array containing references to fieldsets to render
- *     them within vertical tabs.
+ *   - groups: Internal. An array containing references to details elements to
+ *     render them within vertical tabs.
  *   - storage: $form_state['storage'] is not a special key, and no specific
  *     support is provided for it in the Form API. By tradition it was
  *     the location where application-specific data was stored for communication
@@ -1706,9 +1706,9 @@ function form_error(&$element, $message = '') {
  *   type, one of the functions in this array is form_process_date(), which adds
  *   the individual 'year', 'month', 'day', etc. child elements. These functions
  *   can also be used to set additional properties or implement special logic
- *   other than adding child elements: for example, for the 'fieldset' element
- *   type, one of the functions in this array is form_process_fieldset(), which
- *   adds the attributes and JavaScript needed to make the fieldset collapsible
+ *   other than adding child elements: for example, for the 'details' element
+ *   type, one of the functions in this array is form_process_details(), which
+ *   adds the attributes and JavaScript needed to make the details collapsible
  *   if the #collapsible property is set. The #process functions are called in
  *   preorder traversal, meaning they are called for the parent element first,
  *   then for the child elements.
@@ -2814,6 +2814,39 @@ function theme_fieldset($variables) {
 }
 
 /**
+ * Returns HTML for a details form element and its children.
+ *
+ * @param $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #attributes, #children, #collapsed, #collapsible,
+ *     #description, #id, #title, #value.
+ *
+ * @ingroup themeable
+ */
+function theme_details($variables) {
+  $element = $variables['element'];
+  element_set_attributes($element, array('id'));
+  _form_set_attributes($element, array('form-wrapper'));
+
+  $output = '<details' . new Attribute($element['#attributes']) . '>';
+  if (!empty($element['#title'])) {
+    $output .= '<summary>' . $element['#title'] . '</summary>';
+  }
+  $output .= '<div class="details-wrapper">';
+  if (!empty($element['#description'])) {
+    $output .= '<div class="details-description">' . $element['#description'] . '</div>';
+  }
+  $output .= $element['#children'];
+  if (isset($element['#value'])) {
+    $output .= $element['#value'];
+  }
+  $output .= '</div>';
+  $output .= "</details>\n";
+  return $output;
+}
+
+/**
  * Returns HTML for a radio button form element.
  *
  * Note: The input "name" attribute needs to be sanitized before output, which
@@ -3683,16 +3716,35 @@ function form_validate_machine_name(&$element, &$form_state) {
  *   The processed element.
  */
 function form_process_fieldset(&$element, &$form_state) {
+  return form_process_details($element, $form_state);
+}
+
+/**
+ * Arranges details into groups.
+ *
+ * @param $element
+ *   An associative array containing the properties and children of the
+ *   details. Note that $element must be taken by reference here, so processed
+ *   child elements are taken over into $form_state.
+ * @param $form_state
+ *   The $form_state array for the form this details belongs to.
+ *
+ * @return
+ *   The processed element.
+ */
+function form_process_details(&$element, &$form_state) {
   $parents = implode('][', $element['#parents']);
 
-  // Each fieldset forms a new group. The #type 'vertical_tabs' basically only
-  // injects a new fieldset.
+  // Each details element forms a new group. The #type 'vertical_tabs' basically
+  // only injects a new details element.
   $form_state['groups'][$parents]['#group_exists'] = TRUE;
   $element['#groups'] = &$form_state['groups'];
 
-  // Process vertical tabs group member fieldsets.
+  // Process vertical tabs group member details elements.
   if (isset($element['#group'])) {
-    // Add this fieldset to the defined group (by reference).
+    // REMOVEME: Temporarily force vertical-tab fieldsets into details.
+    $element['#theme_wrappers'] = array('details');
+    // Add this details element to the defined group (by reference).
     $group = $element['#group'];
     $form_state['groups'][$group][] = &$element;
   }
@@ -3714,13 +3766,27 @@ function form_process_fieldset(&$element, &$form_state) {
  *   The modified element with all group members.
  */
 function form_pre_render_fieldset($element) {
-  // The .form-wrapper class is required for #states to treat fieldsets like
+  return form_pre_render_details($element);
+}
+
+/**
+ * Adds members of this group as actual elements for rendering.
+ *
+ * @param $element
+ *   An associative array containing the properties and children of the
+ *   details.
+ *
+ * @return
+ *   The modified element with all group members.
+ */
+function form_pre_render_details($element) {
+  // The .form-wrapper class is required for #states to treat details like
   // containers.
   if (!isset($element['#attributes']['class'])) {
     $element['#attributes']['class'] = array();
   }
 
-  // Collapsible fieldsets
+  // Collapsible details.
   if (!empty($element['#collapsible'])) {
     $element['#attached']['library'][] = array('system', 'drupal.collapse');
     $element['#attributes']['class'][] = 'collapsible';
@@ -3729,7 +3795,7 @@ function form_pre_render_fieldset($element) {
     }
   }
 
-  // Fieldsets may be rendered outside of a Form API context.
+  // Details may be rendered outside of a Form API context.
   if (!isset($element['#parents']) || !isset($element['#groups'])) {
     return $element;
   }
@@ -3741,7 +3807,7 @@ function form_pre_render_fieldset($element) {
       // Break references and indicate that the element should be rendered as
       // group member.
       $child = (array) $element['#groups'][$parents][$key];
-      $child['#group_fieldset'] = TRUE;
+      $child['#group_details'] = TRUE;
       // Inject the element as new child element.
       $element[] = $child;
 
@@ -3761,7 +3827,7 @@ function form_pre_render_fieldset($element) {
       // Intentionally empty to clarify the flow; we simply return $element.
     }
     // If we injected this element into the group, then we want to render it.
-    elseif (!empty($element['#group_fieldset'])) {
+    elseif (!empty($element['#group_details'])) {
       // Intentionally empty to clarify the flow; we simply return $element.
     }
     // Otherwise, this element belongs to a group and the group exists, so we do
@@ -3779,7 +3845,7 @@ function form_pre_render_fieldset($element) {
  *
  * @param $element
  *   An associative array containing the properties and children of the
- *   fieldset.
+ *   details element.
  * @param $form_state
  *   The $form_state array for the form this vertical tab widget belongs to.
  *
@@ -3787,10 +3853,10 @@ function form_pre_render_fieldset($element) {
  *   The processed element.
  */
 function form_process_vertical_tabs($element, &$form_state) {
-  // Inject a new fieldset as child, so that form_process_fieldset() processes
-  // this fieldset like any other fieldset.
+  // Inject a new details as child, so that form_process_details() processes
+  // this details element like any other details.
   $element['group'] = array(
-    '#type' => 'fieldset',
+    '#type' => 'details',
     '#theme_wrappers' => array(),
     '#parents' => $element['#parents'],
   );
@@ -3813,12 +3879,12 @@ function form_process_vertical_tabs($element, &$form_state) {
 }
 
 /**
- * Returns HTML for an element's children fieldsets as vertical tabs.
+ * Returns HTML for an element's children details as vertical tabs.
  *
  * @param $variables
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
- *     the fieldset. Properties used: #children.
+ *     the details element. Properties used: #children.
  *
  * @ingroup themeable
  */
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index cc29a98..f3d6988 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -3042,6 +3042,9 @@ function drupal_common_theme() {
     'fieldset' => array(
       'render element' => 'element',
     ),
+    'details' => array(
+      'render element' => 'element',
+    ),
     'radio' => array(
       'render element' => 'element',
     ),
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 80f5939..a64ce05 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -3,18 +3,18 @@
 "use strict";
 
 /**
- * The collapsible fieldset object represents a single collapsible fieldset.
+ * The collapsible details object represents a single collapsible details element.
  */
-function CollapsibleFieldset(node, settings) {
+function CollapsibleDetails(node, settings) {
   this.$node = $(node);
-  this.$node.data('fieldset', this);
+  this.$node.data('details', this);
   this.settings = $.extend({
       duration:'fast',
       easing:'linear'
     },
     settings
   );
-  // Expand fieldset if there are errors inside, or if it contains an
+  // Expand details if there are errors inside, or if it contains an
   // element that is targeted by the URI fragment identifier.
   var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
   if (this.$node.find('.error' + anchor).length) {
@@ -27,19 +27,19 @@ function CollapsibleFieldset(node, settings) {
 }
 
 /**
- * Extend CollapsibleFieldset function.
+ * Extend CollapsibleDetails function.
  */
-$.extend(CollapsibleFieldset, {
+$.extend(CollapsibleDetails, {
   /**
-   * Holds references to instantiated CollapsibleFieldset objects.
+   * Holds references to instantiated CollapsibleDetails objects.
    */
-  fieldsets: []
+  instances: []
 });
 
 /**
- * Extend CollapsibleFieldset prototype.
+ * Extend CollapsibleDetails prototype.
  */
-$.extend(CollapsibleFieldset.prototype, {
+$.extend(CollapsibleDetails.prototype, {
   /**
    * Flag preventing multiple simultaneous animations.
    */
@@ -57,17 +57,16 @@ $.extend(CollapsibleFieldset.prototype, {
    * Initialize and setup legend markup.
    */
   setupLegend: function () {
-    // Turn the legend into a clickable link, but retain span.fieldset-legend
-    // for CSS positioning.
-    var $legend = this.$node.find('> legend .fieldset-legend');
+    // Turn the summary into a clickable link.
+    var $legend = this.$node.find('> summary');
 
-    $('<span class="fieldset-legend-prefix element-invisible"></span>')
+    $('<span class="details-summary-prefix element-invisible"></span>')
       .append(this.$node.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
       .prependTo($legend)
       .after(' ');
 
     // .wrapInner() does not retain bound events.
-    var $link = $('<a class="fieldset-title" href="#"></a>')
+    var $link = $('<a class="details-title" href="#"></a>')
       .prepend($legend.contents())
       .appendTo($legend)
       .click($.proxy(this.onLegendClick, this));
@@ -88,7 +87,7 @@ $.extend(CollapsibleFieldset.prototype, {
     this.$summary.html(text ? ' (' + text + ')' : '');
   },
   /**
-   * Toggle the visibility of a fieldset using smooth animations.
+   * Toggle the visibility of a details element using smooth animations.
    */
   toggle: function () {
     // Don't animate multiple times.
@@ -96,11 +95,11 @@ $.extend(CollapsibleFieldset.prototype, {
       return;
     }
     if (this.$node.is('.collapsed')) {
-      var $content = this.$node.find('> .fieldset-wrapper').hide();
+      var $content = this.$node.find('> .details-wrapper').hide();
       this.$node
         .removeClass('collapsed')
         .trigger({ type:'collapsed', value:false })
-        .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
+        .find('> summary span.details-summary-prefix').html(Drupal.t('Hide'));
       $content.slideDown(
         $.extend(this.settings, {
           complete:$.proxy(this.onCompleteSlideDown, this)
@@ -109,7 +108,7 @@ $.extend(CollapsibleFieldset.prototype, {
     }
     else {
       this.$node.trigger({ type:'collapsed', value:true });
-      this.$node.find('> .fieldset-wrapper').slideUp(
+      this.$node.find('> .details-wrapper').slideUp(
         $.extend(this.settings, {
           complete:$.proxy(this.onCompleteSlideUp, this)
         })
@@ -117,19 +116,19 @@ $.extend(CollapsibleFieldset.prototype, {
     }
   },
   /**
-   * Completed opening fieldset.
+   * Completed opening details element.
    */
   onCompleteSlideDown: function () {
     this.$node.trigger('completeSlideDown');
     this.animating = false;
   },
   /**
-   * Completed closing fieldset.
+   * Completed closing details element.
    */
   onCompleteSlideUp: function () {
     this.$node
       .addClass('collapsed')
-      .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
+      .find('> summary span.details-summary-prefix').html(Drupal.t('Show'));
     this.$node.trigger('completeSlideUp');
     this.animating = false;
   }
@@ -137,16 +136,16 @@ $.extend(CollapsibleFieldset.prototype, {
 
 Drupal.behaviors.collapse = {
   attach: function (context, settings) {
-    var $collapsibleFieldsets = $(context).find('fieldset.collapsible').once('collapse');
-    if ($collapsibleFieldsets.length) {
-      for (var i = 0; i < $collapsibleFieldsets.length; i++) {
-        CollapsibleFieldset.fieldsets.push(new CollapsibleFieldset($collapsibleFieldsets[i], settings.collapsibleFieldset));
+    var $collapsibleDetails = $(context).find('details.collapsible').once('collapse');
+    if ($collapsibleDetails.length) {
+      for (var i = 0; i < $collapsibleDetails.length; i++) {
+        CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i], settings.collapsibleDetails));
       }
     }
   }
 };
 
 // Expose constructor in the public space.
-Drupal.CollapsibleFieldset = CollapsibleFieldset;
+Drupal.CollapsibleDetails = CollapsibleDetails;
 
 })(jQuery, Drupal);
diff --git a/core/misc/states.js b/core/misc/states.js
index afd922c..171bac5 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -538,7 +538,7 @@ $(document).bind('state:checked', function(e) {
 $(document).bind('state:collapsed', function(e) {
   if (e.trigger) {
     if ($(e.target).is('.collapsed') !== e.value) {
-      $(e.target).find('> legend a').click();
+      $(e.target).find('> summary a').click();
     }
   }
 });
diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c946503..e749668 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -11,12 +11,11 @@ div.vertical-tabs {
   margin: -1px 0 -1px -15em; /* LTR */
   float: left; /* LTR */
 }
-.vertical-tabs fieldset.vertical-tabs-pane {
-  margin: 0 !important;
-  padding: 0 1em;
+.vertical-tabs .vertical-tabs-pane {
+  margin: 0;
   border: 0;
 }
-fieldset.vertical-tabs-pane > legend {
+.vertical-tabs-pane > summary {
   display: none;
 }
 
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 303840a..f8c20ed 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -3,13 +3,13 @@
 "use strict";
 
 /**
- * This script transforms a set of fieldsets into a stack of vertical
+ * This script transforms a set of details into a stack of vertical
  * tabs. Another tab pane can be selected by clicking on the respective
  * tab.
  *
  * Each tab may have a summary which can be updated by another
- * script. For that to work, each fieldset has an associated
- * 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
+ * script. For that to work, each details element has an associated
+ * 'verticalTabCallback' (with jQuery.data() attached to the details),
  * which is called every time the user performs an update to a form
  * element inside the tab pane.
  */
@@ -25,9 +25,9 @@ Drupal.behaviors.verticalTabs = {
       var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
       var tab_focus;
 
-      // Check if there are some fieldsets that can be converted to vertical-tabs
-      var $fieldsets = $this.find('> fieldset');
-      if ($fieldsets.length === 0) {
+      // Check if there are some details that can be converted to vertical-tabs
+      var $details = $this.find('> details');
+      if ($details.length === 0) {
         return;
       }
 
@@ -35,12 +35,12 @@ Drupal.behaviors.verticalTabs = {
       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 () {
+      // Transform each details into a tab.
+      $details.each(function () {
         var $this = $(this);
         var vertical_tab = new Drupal.verticalTab({
-          title: $this.find('> legend').text(),
-          fieldset: $this
+          title: $this.find('> summary').text(),
+          details: $this
         });
         tab_list.append(vertical_tab.item);
         $this
@@ -79,7 +79,7 @@ Drupal.behaviors.verticalTabs = {
  * @param settings
  *   An object with the following keys:
  *   - title: The name of the tab.
- *   - fieldset: The jQuery object of the fieldset that is the tab pane.
+ *   - details: The jQuery object of the details element that is the tab pane.
  */
 Drupal.verticalTab = function (settings) {
   var self = this;
@@ -96,12 +96,12 @@ Drupal.verticalTab = function (settings) {
     event.preventDefault();
     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();
+      // Set focus on the first input field of the visible details/tab pane.
+      $(".vertical-tabs-pane :input:visible:enabled:first").focus();
     }
   });
 
-  this.fieldset
+  this.details
     .bind('summaryUpdated', function () {
       self.updateSummary();
     })
@@ -113,17 +113,17 @@ Drupal.verticalTab.prototype = {
    * Displays the tab's content pane.
    */
   focus: function () {
-    this.fieldset
-      .siblings('fieldset.vertical-tabs-pane')
+    this.details
+      .siblings('.vertical-tabs-pane')
         .each(function () {
           var tab = $(this).data('verticalTab');
-          tab.fieldset.hide();
+          tab.details.hide();
           tab.item.removeClass('selected');
         })
         .end()
       .show()
       .siblings(':hidden.vertical-tabs-active-tab')
-        .val(this.fieldset.attr('id'));
+        .val(this.details.attr('id'));
     this.item.addClass('selected');
     // Mark the active tab for screen readers.
     $('#active-vertical-tab').remove();
@@ -134,7 +134,7 @@ Drupal.verticalTab.prototype = {
    * Updates the tab's summary.
    */
   updateSummary: function () {
-    this.summary.html(this.fieldset.drupalGetSummary());
+    this.summary.html(this.details.drupalGetSummary());
   },
 
   /**
@@ -148,8 +148,8 @@ Drupal.verticalTab.prototype = {
     // method.
     this.item.parent().children('.vertical-tab-button').removeClass('first')
       .filter(':visible:first').addClass('first');
-    // Display the fieldset.
-    this.fieldset.removeClass('vertical-tab-hidden').show();
+    // Display the details element.
+    this.details.removeClass('vertical-tab-hidden').show();
     // Focus this tab.
     this.focus();
     return this;
@@ -166,10 +166,10 @@ Drupal.verticalTab.prototype = {
     // method.
     this.item.parent().children('.vertical-tab-button').removeClass('first')
       .filter(':visible:first').addClass('first');
-    // Hide the fieldset.
-    this.fieldset.addClass('vertical-tab-hidden').hide();
+    // Hide the details element.
+    this.details.addClass('vertical-tab-hidden').hide();
     // Focus the first visible tab (if there is one).
-    var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
+    var $firstTab = this.details.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
     if ($firstTab.length) {
       $firstTab.data('verticalTab').focus();
     }
diff --git a/core/modules/book/book.js b/core/modules/book/book.js
index 301c67f..d1c54c8 100644
--- a/core/modules/book/book.js
+++ b/core/modules/book/book.js
@@ -8,9 +8,9 @@
 
 "use strict";
 
-Drupal.behaviors.bookFieldsetSummaries = {
+Drupal.behaviors.bookDetailsSummaries = {
   attach: function (context) {
-    $(context).find('fieldset.book-outline-form').drupalSetSummary(function (context) {
+    $(context).find('.book-outline-form').drupalSetSummary(function (context) {
       var $select = $(context).find('.book-title-select');
       var val = $select.val();
 
diff --git a/core/modules/comment/comment-node-form.js b/core/modules/comment/comment-node-form.js
index 0249d96..67800da 100644
--- a/core/modules/comment/comment-node-form.js
+++ b/core/modules/comment/comment-node-form.js
@@ -7,15 +7,15 @@
 
 "use strict";
 
-Drupal.behaviors.commentFieldsetSummaries = {
+Drupal.behaviors.commentDetailsSummaries = {
   attach: function (context) {
     var $context = $(context);
-    $context.find('fieldset.comment-node-settings-form').drupalSetSummary(function (context) {
+    $context.find('.comment-node-settings-form').drupalSetSummary(function (context) {
       return Drupal.checkPlain($(context).find('.form-item-comment input:checked').next('label').text());
     });
 
     // Provide the summary for the node type form.
-    $context.find('fieldset.comment-node-type-settings-form').drupalSetSummary(function(context) {
+    $context.find('.comment-node-type-settings-form').drupalSetSummary(function(context) {
       var $context = $(context);
       var vals = [];
 
diff --git a/core/modules/filter/filter.admin-rtl.css b/core/modules/filter/filter.admin-rtl.css
index c49481b..10620bf 100644
--- a/core/modules/filter/filter.admin-rtl.css
+++ b/core/modules/filter/filter.admin-rtl.css
@@ -7,10 +7,6 @@
 /**
  * Filter information under field.
  */
-.filter-wrapper .form-item {
-  float: right;
-  padding: 0 1.5em 0.5em 0;
-}
 .filter-help {
   float: left;
 }
diff --git a/core/modules/filter/filter.admin.css b/core/modules/filter/filter.admin.css
index fdb2eff..db3898e 100644
--- a/core/modules/filter/filter.admin.css
+++ b/core/modules/filter/filter.admin.css
@@ -7,18 +7,16 @@
 /**
  * Filter information under field.
  */
-.text-format-wrapper .form-item {
+.text-format-wrapper > .form-item {
   margin-bottom: 0;
 }
 
 .filter-wrapper {
   border-top: 0;
   margin: 0;
-  padding: 1.5em 0;
 }
 .filter-wrapper .form-item {
-  float: left; /* LTR */
-  padding: 0 0 0.5em 1.5em; /* LTR */
+  margin-top: 0;
 }
 .filter-wrapper .form-item label {
   display: inline;
@@ -26,7 +24,6 @@
 
 .filter-help {
   float: right; /* LTR */
-  padding: 0 1.5em 0.5em;
 }
 .filter-help p {
   margin: 0;
@@ -36,10 +33,6 @@
   padding: 0 20px;
 }
 
-.filter-guidelines {
-  clear: left;
-  padding: 0 1.5em;
-}
 .text-format-wrapper .description {
   margin-top: 0.5em;
 }
diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.js
index b2d7c6e..f55159a 100644
--- a/core/modules/filter/filter.admin.js
+++ b/core/modules/filter/filter.admin.js
@@ -38,7 +38,7 @@ Drupal.behaviors.filterStatus = {
 
       // Attach summary for configurable filters (only for screen-readers).
       if (tab) {
-        tab.fieldset.drupalSetSummary(function (tabContext) {
+        tab.details.drupalSetSummary(function (tabContext) {
           return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled');
         });
       }
diff --git a/core/modules/filter/filter.module b/core/modules/filter/filter.module
index b55066f..edf5f91 100644
--- a/core/modules/filter/filter.module
+++ b/core/modules/filter/filter.module
@@ -967,7 +967,7 @@ function filter_process_format($element) {
 
   // Setup child container for the text format widget.
   $element['format'] = array(
-    '#type' => 'fieldset',
+    '#type' => 'details',
     '#attributes' => array('class' => array('filter-wrapper')),
   );
 
diff --git a/core/modules/locale/locale.admin.css b/core/modules/locale/locale.admin.css
index 4b252b6..e5ccd61 100644
--- a/core/modules/locale/locale.admin.css
+++ b/core/modules/locale/locale.admin.css
@@ -37,7 +37,7 @@
   position: absolute;
 }
 
-#locale-translate-filter-form fieldset.form-wrapper {
+#locale-translate-filter-form .form-wrapper {
   margin-bottom:0;
 }
 
diff --git a/core/modules/menu/menu.admin.js b/core/modules/menu/menu.admin.js
index d6a228a..530c8b6 100644
--- a/core/modules/menu/menu.admin.js
+++ b/core/modules/menu/menu.admin.js
@@ -13,10 +13,10 @@ Drupal.behaviors.menuChangeParentItems = {
  * Function to set the options of the menu parent item dropdown.
  */
 Drupal.menuUpdateParentList = function () {
-  var $menuFieldset = $('#edit-menu');
+  var $menu = $('#edit-menu');
   var values = [];
 
-  $menuFieldset.find('input:checked').each(function () {
+  $menu.find('input:checked').each(function () {
     // Get the names of all checked menus.
     values.push(Drupal.checkPlain($.trim($(this).val())));
   });
diff --git a/core/modules/menu/menu.js b/core/modules/menu/menu.js
index 1990374..77baddb 100644
--- a/core/modules/menu/menu.js
+++ b/core/modules/menu/menu.js
@@ -2,9 +2,9 @@
 
 "use strict";
 
-Drupal.behaviors.menuFieldsetSummaries = {
+Drupal.behaviors.menuDetailsSummaries = {
   attach: function (context) {
-    $(context).find('fieldset.menu-link-form').drupalSetSummary(function (context) {
+    $(context).find('.menu-link-form').drupalSetSummary(function (context) {
       var $context = $(context);
       if ($context.find('.form-item-menu-enabled input').is(':checked')) {
         return Drupal.checkPlain($context.find('.form-item-menu-link-title input').val());
@@ -22,7 +22,7 @@ Drupal.behaviors.menuFieldsetSummaries = {
 Drupal.behaviors.menuLinkAutomaticTitle = {
   attach: function (context) {
     var $context = $(context);
-    $context.find('fieldset.menu-link-form').each(function () {
+    $context.find('.menu-link-form').each(function () {
       var $this = $(this);
       // Try to find menu settings widget elements as well as a 'title' field in
       // the form, but play nicely with user permissions and form alterations.
@@ -53,7 +53,7 @@ Drupal.behaviors.menuLinkAutomaticTitle = {
           $link_title.val('');
           $link_title.removeData('menuLinkAutomaticTitleOveridden');
         }
-        $checkbox.closest('fieldset.vertical-tabs-pane').trigger('summaryUpdated');
+        $checkbox.closest('.vertical-tabs-pane').trigger('summaryUpdated');
         $checkbox.trigger('formUpdated');
       });
       // Take over any title change.
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js
index d2a63b6..f85ba7b 100644
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@@ -6,12 +6,12 @@ Drupal.behaviors.contentTypes = {
   attach: function (context) {
     var $context = $(context);
     // Provide the vertical tab summaries.
-    $context.find('fieldset#edit-submission').drupalSetSummary(function(context) {
+    $context.find('#edit-submission').drupalSetSummary(function(context) {
       var vals = [];
       vals.push(Drupal.checkPlain($(context).find('#edit-title-label').val()) || Drupal.t('Requires a title'));
       return vals.join(', ');
     });
-    $context.find('fieldset#edit-workflow').drupalSetSummary(function(context) {
+    $context.find('#edit-workflow').drupalSetSummary(function(context) {
       var vals = [];
       $(context).find("input[name^='node_options']:checked").parent().each(function() {
         vals.push(Drupal.checkPlain($(this).text()));
@@ -21,7 +21,7 @@ Drupal.behaviors.contentTypes = {
       }
       return vals.join(', ');
     });
-    $('fieldset#edit-language', context).drupalSetSummary(function(context) {
+    $('#edit-language', context).drupalSetSummary(function(context) {
       var vals = [];
 
       vals.push($(".form-item-language-configuration-langcode select option:selected", context).text())
@@ -32,7 +32,7 @@ Drupal.behaviors.contentTypes = {
 
       return vals.join(', ');
     });
-    $context.find('fieldset#edit-display').drupalSetSummary(function(context) {
+    $context.find('#edit-display').drupalSetSummary(function(context) {
       var vals = [];
       var $context = $(context);
       $context.find('input:checked').next('label').each(function() {
diff --git a/core/modules/node/node.js b/core/modules/node/node.js
index 0899d3c..d4c5dc7 100644
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@@ -2,10 +2,10 @@
 
 "use strict";
 
-Drupal.behaviors.nodeFieldsetSummaries = {
+Drupal.behaviors.nodeDetailsSummaries = {
   attach: function (context) {
     var $context = $(context);
-    $context.find('fieldset.node-form-revision-information').drupalSetSummary(function (context) {
+    $context.find('.node-form-revision-information').drupalSetSummary(function (context) {
       var $context = $(context);
       var revisionCheckbox = $context.find('.form-item-revision input');
 
@@ -20,7 +20,7 @@ Drupal.behaviors.nodeFieldsetSummaries = {
       return Drupal.t('No revision');
     });
 
-    $context.find('fieldset.node-form-author').drupalSetSummary(function (context) {
+    $context.find('.node-form-author').drupalSetSummary(function (context) {
       var $context = $(context);
       var name = $context.find('.form-item-name input').val() || Drupal.settings.anonymous,
         date = $context.find('.form-item-date input').val();
@@ -29,7 +29,7 @@ Drupal.behaviors.nodeFieldsetSummaries = {
         Drupal.t('By @name', { '@name': name });
     });
 
-    $context.find('fieldset.node-form-options').drupalSetSummary(function (context) {
+    $context.find('.node-form-options').drupalSetSummary(function (context) {
       var $context = $(context);
       var vals = [];
 
diff --git a/core/modules/path/path.js b/core/modules/path/path.js
index 41b6e8f..7349d12 100644
--- a/core/modules/path/path.js
+++ b/core/modules/path/path.js
@@ -6,9 +6,9 @@
 
 "use strict";
 
-Drupal.behaviors.pathFieldsetSummaries = {
+Drupal.behaviors.pathDetailsSummaries = {
   attach: function (context) {
-    $(context).find('fieldset.path-form').drupalSetSummary(function (context) {
+    $(context).find('.path-form').drupalSetSummary(function (context) {
       var path = $('.form-item-path-alias input').val();
 
       return path ?
diff --git a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
index 8abc198..9f7f42a 100644
--- a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
+++ b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
@@ -276,10 +276,10 @@ function assertAssertion($message, $type, $status, $file, $function) {
   function getTestResults() {
     $results = array();
     if ($this->parse()) {
-      if ($fieldset = $this->getResultFieldSet()) {
+      if ($fieldset = $this->getResultFieldSet()) { // @todo   
         // Code assumes this is the only test in group.
         $results['summary'] = $this->asText($fieldset->div->div[1]);
-        $results['name'] = $this->asText($fieldset->legend);
+        $results['name'] = $this->asText($fieldset->legend); // @todo   
 
         $results['assertions'] = array();
         $tbody = $fieldset->div->table->tbody;
@@ -303,7 +303,7 @@ function getTestResults() {
    * Get the fieldset containing the results for group this test is in.
    */
   function getResultFieldSet() {
-    $fieldsets = $this->xpath('//fieldset');
+    $fieldsets = $this->xpath('//fieldset'); // @todo   
     $info = $this->getInfo();
     foreach ($fieldsets as $fieldset) {
       if ($this->asText($fieldset->legend) == $info['name']) {
diff --git a/core/modules/simpletest/simpletest.pages.inc b/core/modules/simpletest/simpletest.pages.inc
index 337a62c..8300289 100644
--- a/core/modules/simpletest/simpletest.pages.inc
+++ b/core/modules/simpletest/simpletest.pages.inc
@@ -437,7 +437,7 @@ function simpletest_result_status_image($status) {
 function simpletest_settings_form($form, &$form_state) {
   $config = config('simpletest.settings');
   $form['general'] = array(
-    '#type' => 'fieldset',
+    '#type' => 'details',
     '#title' => t('General'),
   );
   $form['general']['simpletest_clear_results'] = array(
@@ -454,7 +454,7 @@ function simpletest_settings_form($form, &$form_state) {
   );
 
   $form['httpauth'] = array(
-    '#type' => 'fieldset',
+    '#type' => 'details',
     '#title' => t('HTTP authentication'),
     '#description' => t('HTTP auth settings to be used by the SimpleTest browser during testing. Useful when the site requires basic HTTP authentication.'),
     '#collapsible' => TRUE,
diff --git a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
index adc35ba..67e0200 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
@@ -246,7 +246,7 @@ function testDrupalRenderFormElements() {
     $this->assertRenderedElement($element, '//fieldset/legend[contains(., :title)]', array(
       ':title' => $element['#title'],
     ));
-
+ // @todo   
     $element = array(
       '#type' => 'fieldset',
       '#title' => $this->randomName(),
diff --git a/core/modules/system/system.base.css b/core/modules/system/system.base.css
index c50b085..39b454d 100644
--- a/core/modules/system/system.base.css
+++ b/core/modules/system/system.base.css
@@ -38,25 +38,13 @@
 }
 
 /**
- * Collapsible fieldsets.
+ * Collapsible details.
  *
  * @see collapse.js
  */
-.js fieldset.collapsed {
-  border-bottom-width: 0;
-  border-left-width: 0;
-  border-right-width: 0;
-  height: 1em;
-}
-.js fieldset.collapsed .fieldset-wrapper {
+.js details.collapsed .details-wrapper {
   display: none;
 }
-fieldset.collapsible {
-  position: relative;
-}
-fieldset.collapsible .fieldset-legend {
-  display: block;
-}
 
 /**
  * Resizable textareas.
@@ -192,8 +180,8 @@ tr .ajax-progress-throbber .throbber {
 .container-inline label {
   display: inline;
 }
-/* Fieldset contents always need to be rendered as block. */
-.container-inline .fieldset-wrapper {
+/* Details contents always need to be rendered as block. */
+.container-inline .details-wrapper {
   display: block;
 }
 
@@ -216,7 +204,7 @@ tr .ajax-progress-throbber .throbber {
  * Hide elements from all users.
  *
  * Used for elements which should not be immediately displayed to any user. An
- * example would be a collapsible fieldset that will be expanded with a click
+ * example would be collapsible details that will be expanded with a click
  * from a user. The effect of this class can be toggled with the jQuery show()
  * and hide() functions.
  */
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index a9d951b..50884c4 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -530,6 +530,14 @@ function system_element_info() {
     '#pre_render' => array('form_pre_render_fieldset'),
     '#theme_wrappers' => array('fieldset'),
   );
+  $types['details'] = array(
+    '#collapsible' => FALSE,
+    '#collapsed' => FALSE,
+    '#value' => NULL,
+    '#process' => array('form_process_details', 'ajax_process_form'),
+    '#pre_render' => array('form_pre_render_details'),
+    '#theme_wrappers' => array('details'),
+  );
   $types['vertical_tabs'] = array(
     '#theme_wrappers' => array('vertical_tabs'),
     '#default_tab' => '',
diff --git a/core/modules/system/system.theme-rtl.css b/core/modules/system/system.theme-rtl.css
index b13345a..de30fbe 100644
--- a/core/modules/system/system.theme-rtl.css
+++ b/core/modules/system/system.theme-rtl.css
@@ -39,16 +39,19 @@ th {
 }
 
 /**
- * Collapsible fieldsets.
+ * Collapsible details.
  */
-.js fieldset.collapsible > legend .fieldset-legend {
-  background-position: 98% 75%;
-  padding-left: 0;
-  padding-right: 15px;
+.js .collapsible > summary:before {
+  background-position: 100% 100%;
+  float: right;
 }
-.js fieldset.collapsed > legend .fieldset-legend {
-  background-image: url(../../misc/menu-collapsed-rtl.png);
-  background-position: 98% 50%;
+.js .collapsed > summary:before {
+  background-position: 75% 35%;
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 /**
diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css
index 483c89d..83b104d 100644
--- a/core/modules/system/system.theme.css
+++ b/core/modules/system/system.theme.css
@@ -8,7 +8,8 @@
  * HTML elements.
  */
 fieldset {
-  margin-bottom: 1em;
+  border: 1px solid #ccc;
+  margin: 1em 0;
   padding: 0.5em;
 }
 form {
@@ -179,22 +180,40 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {
 }
 
 /**
- * Collapsible fieldsets.
+ * Collapsible details.
  *
  * @see collapse.js
+ * @thanks http://nicolasgallagher.com/css-background-image-hacks/
  */
-.js fieldset.collapsible > legend .fieldset-legend a {
-  background: url(../../misc/menu-expanded.png) 5px 65% no-repeat; /* LTR */
-  padding-left: 15px; /* LTR */
-}
-.js fieldset.collapsed > legend .fieldset-legend a {
-  background-image: url(../../misc/menu-collapsed.png); /* LTR */
-  background-position: 5px 50%; /* LTR */
+details {
+  border: 1px solid #ccc;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
-.fieldset-legend span.summary {
-  color: #999;
-  font-size: 0.9em;
-  margin-left: 0.5em;
+details > .details-wrapper {
+  padding: 0.5em 1.5em;
+}
+summary {
+  padding: 0.2em 1.5em;
+}
+.collapsible > summary {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.js .collapsible > summary:before {
+  background: url(../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */
+  content: "";
+  float: left;
+  height: 1em;
+  width: 1em;
+}
+.js .collapsed > summary:before {
+  background-position: 25% 35%; /* LTR */
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
 
 /**
diff --git a/core/modules/system/tests/modules/design_test/design_test.info b/core/modules/system/tests/modules/design_test/design_test.info
new file mode 100644
index 0000000..ff7159c
--- /dev/null
+++ b/core/modules/system/tests/modules/design_test/design_test.info
@@ -0,0 +1,6 @@
+name = Design test
+description = Support module for design, markup, JavaScript, and CSS testing.
+package = Testing
+version = VERSION
+core = 8.x
+;hidden = TRUE
diff --git a/core/modules/system/tests/modules/design_test/design_test.module b/core/modules/system/tests/modules/design_test/design_test.module
new file mode 100644
index 0000000..b0dc5a1
--- /dev/null
+++ b/core/modules/system/tests/modules/design_test/design_test.module
@@ -0,0 +1,144 @@
+<?php
+
+/**
+ * @file
+ * Support module for design, markup, JavaScript, and CSS testing.
+ */
+
+/**
+ * Implements hook_menu().
+ *
+ * This implementation turns every subdirectory of this module into a category
+ * that is exposed as a menu link. Each subdirectory contains include files that
+ * consist of a callback function that maps to the semantics of the category.
+ * The following categories are supported:
+ * - form: Used for Form API element tests.
+ * - page: Used for theme function tests.
+ *
+ * For example, given an include file:
+ * @code
+ * ./page/list-operations.inc
+ * @endcode
+ * A menu router item with the path 'design_test/page/list-operations' will be
+ * auto-generated. Upon access, the function design_test_page_list_operations()
+ * will be called.
+ *
+ * The 'form' category behaves identically; e.g., for an include file
+ * './form/details.inc' a menu item for the path 'design_test/form/details' is
+ * created and the form constructor function design_test_form_details() will be
+ * called.
+ *
+ * Each resulting test page is enhanced with local actions that allow to quickly
+ * switch between enabled themes for verifying the expected output.
+ */
+function design_test_menu() {
+  // Turn each include file in the module directory into a local task.
+  $categories = array();
+  $module_path = drupal_get_path('module', 'design_test');
+  $tests = file_scan_directory($module_path, '/\.inc$/', array('key' => 'name', 'recurse' => TRUE));
+  foreach ($tests as $name => $file) {
+    // Build include file path and category.
+    $filepath = strtr($file->uri, array($module_path . '/' => ''));
+    list($category) = explode('/', $filepath, 2);
+    $categories[$category] = $category;
+
+    // Build router item path.
+    $path = preg_replace('@[^a-zA-Z0-9-]@', '-', $name);
+    // Build page callback function name.
+    $callback = "design_test_{$category}_" . strtr($path, '-', '_');
+
+    // Build router item callback.
+    if ($category == 'form') {
+      $page_callback = 'drupal_get_form';
+    }
+    else {
+      $page_callback = $callback;
+    }
+
+    $items["design_test/{$category}/{$path}"] = array(
+      'title' => drupal_ucfirst($name),
+      'page callback' => $page_callback,
+      'page arguments' => array($callback),
+      'file' => $filepath,
+      'access callback' => TRUE,
+      'type' => MENU_LOCAL_TASK | MENU_VISIBLE_IN_TREE,
+    );
+  }
+
+  // Now add some theme local tasks black magic...
+  $themes = array();
+  $list = list_themes();
+  foreach ($list as $name => $theme) {
+    if ($theme->status && !isset($theme->info['hidden'])) {
+      $themes[$name] = $theme->info['name'];
+    }
+  }
+  foreach ($items as $path => $item) {
+    foreach ($themes as $name => $theme) {
+      $items[$path . '/' . $name] = array(
+        'title' => $theme,
+        'type' => MENU_LOCAL_ACTION,
+        'theme callback' => '_block_custom_theme',
+        'theme arguments' => array($name),
+        'access callback' => TRUE,
+      );
+    }
+  }
+
+  $items['design_test'] = array(
+    'title' => 'Design test',
+    'page callback' => 'design_test_category_page',
+    'page arguments' => array(1),
+    'access callback' => TRUE,
+  );
+  $items['design_test/list'] = array(
+    'title' => 'List',
+    'type' => MENU_DEFAULT_LOCAL_TASK,
+    'weight' => -10,
+  );
+  // Lastly, add the category containers.
+  foreach ($categories as $category) {
+    $items["design_test/{$category}"] = array(
+      'title' => drupal_ucfirst($category),
+      'page callback' => 'design_test_category_page',
+      'page arguments' => array(1),
+      'access callback' => TRUE,
+      'type' => MENU_LOCAL_TASK | MENU_VISIBLE_IN_TREE,
+    );
+  }
+
+  return $items;
+}
+
+/**
+ * Menu page callback for a category listing page.
+ *
+ * This is a specialized version of system_admin_menu_block_page(), which
+ * retrieves all direct child menu links of the current page, regardless of
+ * their type, skips default local tasks, and outputs them as a simple menu
+ * tree as the main page content.
+ *
+ * @param string $category
+ *   The design test category being currently accessed. Maps to the subdirectory
+ *   names of this module.
+ *
+ * @return array
+ *   A render array containing a menu link tree.
+ */
+function design_test_category_page($category) {
+  $link = menu_link_get_preferred();
+  $tree = menu_build_tree($link['menu_name'], array(
+    'expanded' => array($link['mlid']),
+    'min_depth' => $link['depth'] + 1,
+    'max_depth' => $link['depth'] + 2,
+  ));
+  // Local tasks are hidden = -1, so normally not rendered in menu trees.
+  foreach ($tree as &$data) {
+    // Exclude default local tasks.
+    if (!($data['link']['type'] & MENU_LINKS_TO_PARENT)) {
+      $data['link']['hidden'] = 0;
+    }
+  }
+  $build = menu_tree_output($tree);
+  return $build;
+}
diff --git a/core/modules/system/tests/modules/design_test/form/details.inc b/core/modules/system/tests/modules/design_test/form/details.inc
new file mode 100644
index 0000000..6d7ac68
--- /dev/null
+++ b/core/modules/system/tests/modules/design_test/form/details.inc
@@ -0,0 +1,148 @@
+<?php
+
+/**
+ * @file
+ * Details design test.
+ */
+
+/**
+ * Form constructor for testing theme_details().
+ */
+function design_test_form_details($form, &$form_state) {
+  $form['collapsible'] = array(
+    '#type' => 'details',
+    '#title' => 'Collapsible details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => FALSE,
+  );
+
+  $form['collapsed'] = array(
+    '#type' => 'details',
+    '#title' => 'Collapsed details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+  $form['collapsed']['textfield'] = array(
+    '#type' => 'textfield',
+    '#title' => 'Textfield',
+    '#default_value' => '',
+    '#description' => 'Textfield description',
+    '#required' => TRUE,
+  );
+  $form['collapsed']['textarea'] = array(
+    '#type' => 'textarea',
+    '#title' => 'Textarea',
+    '#default_value' => '',
+    '#description' => 'Textarea description',
+    '#required' => TRUE,
+  );
+
+  $form['collapsed2'] = array(
+    '#type' => 'details',
+    '#title' => 'Details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+  $form['collapsed2']['collapsible'] = array(
+    '#type' => 'details',
+    '#title' => 'Collapsible details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => FALSE,
+  );
+  $form['collapsed2']['collapsed'] = array(
+    '#type' => 'details',
+    '#title' => 'Collapsed details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+  $form['collapsed2']['regular'] = array(
+    '#type' => 'details',
+    '#title' => 'Details',
+    '#description' => 'Details description',
+    '#collapsible' => FALSE,
+  );
+
+  $form['regular'] = array(
+    '#type' => 'details',
+    '#title' => 'Details',
+    '#description' => 'Details description',
+    '#collapsible' => FALSE,
+  );
+
+  #$form['#attributes'] = array('class' => array('search-form'));
+  $form['basic'] = array(
+    '#type' => 'details',
+    '#title' => 'Filter aliases',
+    '#attributes' => array('class' => array('container-inline')),
+  );
+  $form['basic']['filter'] = array(
+    '#type' => 'textfield',
+    '#title' => '',
+    '#default_value' => '',
+    '#maxlength' => 128,
+    '#size' => 25,
+  );
+  $form['basic']['actions'] = array(
+    '#type' => 'actions',
+  );
+  $form['basic']['actions']['submit'] = array(
+    '#type' => 'submit',
+    '#value' => 'Filter',
+  );
+  $form['basic']['actions']['reset'] = array(
+    '#type' => 'submit',
+    '#value' => 'Reset',
+  );
+
+  // Vertical tabs.
+  // Replicate the entire form; some more black magic.
+  $subform = array_diff_key($form, array('group' => 0, 'tabs' => 0));
+
+  $form['group'] = array(
+    '#type' => 'vertical_tabs',
+  );
+  $form['tabs'][0] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 1',
+    '#description' => 'Description',
+    '#group' => 'group',
+  );
+  $form['tabs'][0] += $subform;
+
+  $form['tabs'][1] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 2',
+    '#description' => '<p>Description</p><p>Description</p>',
+    '#group' => 'group',
+  );
+  $form['tabs'][1] += $subform;
+
+  // In case you didn't know, vertical tabs are supported recursively.
+  $form['tabs'][0]['subgroup'] = array(
+    '#type' => 'vertical_tabs',
+  );
+
+  $form['subtabs'][0] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 1',
+    '#description' => 'Description',
+    '#group' => 'subgroup',
+  );
+  $form['subtabs'][0] += $subform;
+
+  $form['subtabs'][1] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 2',
+    '#description' => '<p>Description</p><p>Description</p>',
+    '#group' => 'subgroup',
+  );
+  $form['subtabs'][1] += $subform;
+
+  return $form;
+}
+
diff --git a/core/modules/system/tests/modules/design_test/form/fieldset.inc b/core/modules/system/tests/modules/design_test/form/fieldset.inc
new file mode 100644
index 0000000..4ab07fd
--- /dev/null
+++ b/core/modules/system/tests/modules/design_test/form/fieldset.inc
@@ -0,0 +1,101 @@
+<?php
+
+/**
+ * @file
+ * Fieldset design test.
+ */
+
+/**
+ * Form constructor for testing theme_fieldset().
+ */
+function design_test_form_fieldset($form, &$form_state) {
+  $form['regular'] = array(
+    '#type' => 'fieldset',
+    '#title' => 'Fieldset',
+    '#description' => 'Fieldset description',
+  );
+
+  $form['collapsible'] = array(
+    '#type' => 'details',
+    '#title' => 'Collapsible details',
+    '#description' => 'Details description',
+    '#collapsible' => TRUE,
+    '#collapsed' => FALSE,
+  );
+  $form['collapsible']['fieldset'] = array(
+    '#type' => 'fieldset',
+    '#title' => 'Fieldset title',
+    '#description' => 'Fieldset description',
+  );
+  $form['collapsible']['fieldset']['textfield'] = array(
+    '#type' => 'textfield',
+    '#title' => 'Textfield',
+    '#description' => 'Textfield description',
+    '#required' => TRUE,
+  );
+  $form['collapsible']['fieldset']['textarea'] = array(
+    '#type' => 'textarea',
+    '#title' => 'Textarea',
+    '#description' => 'Textarea description',
+  );
+
+  $form['collapsed'] = $form['collapsible'];
+  $form['collapsed']['#title'] = 'Collapsed details';
+  $form['collapsed']['#collapsed'] = TRUE;
+
+  $form['uncollapsible'] = $form['collapsible'];
+  $form['uncollapsible']['#title'] = 'Uncollapsible details';
+  $form['uncollapsible']['#collapsible'] = FALSE;
+
+  $form['nested'] = $form['regular'];
+  $form['nested']['#title'] = 'Parent fieldset';
+  $form['nested']['nested'] = $form['nested'];
+  $form['nested']['nested']['#title'] = 'Nested fieldset';
+
+  // Vertical tabs.
+  // Replicate the entire form; some more black magic.
+  $subform = array_diff_key($form, array('group' => 0, 'tabs' => 0));
+
+  $form['group'] = array(
+    '#type' => 'vertical_tabs',
+  );
+  $form['tabs'][0] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 1',
+    '#description' => 'Description',
+    '#group' => 'group',
+  );
+  $form['tabs'][0] += $subform;
+
+  $form['tabs'][1] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 2',
+    '#description' => '<p>Description</p><p>Description</p>',
+    '#group' => 'group',
+  );
+  $form['tabs'][1] += $subform;
+
+  // In case you didn't know, vertical tabs are supported recursively.
+  $form['tabs'][0]['subgroup'] = array(
+    '#type' => 'vertical_tabs',
+  );
+
+  $form['subtabs'][0] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 1',
+    '#description' => 'Description',
+    '#group' => 'subgroup',
+  );
+  $form['subtabs'][0] += $subform;
+
+  $form['subtabs'][1] = array(
+    '#type' => 'details',
+    '#title' => 'Vertical tab 2',
+    '#description' => '<p>Description</p><p>Description</p>',
+    '#group' => 'subgroup',
+  );
+  $form['subtabs'][1] += $subform;
+
+  return $form;
+}
+
diff --git a/core/modules/system/tests/modules/design_test/page/list-operations.inc b/core/modules/system/tests/modules/design_test/page/list-operations.inc
new file mode 100644
index 0000000..7675e49
--- /dev/null
+++ b/core/modules/system/tests/modules/design_test/page/list-operations.inc
@@ -0,0 +1,84 @@
+<?php
+
+/**
+ * @file
+ * Tests Operations.
+ */
+
+/**
+ * Page callback for manual testing of operation links.
+ */
+function design_test_page_list_operations() {
+  $build = array(
+    '#theme' => 'table',
+    '#header' => array('Label', 'Created', 'Operations'),
+    '#rows' => array(),
+  );
+  // Add an item with a very long label, using common operations.
+  $build['#rows']['long']['label'] = l('An item with a very insanely long label, which offers quite a couple of common operations', 'item/long');
+  $build['#rows']['long']['created'] = format_interval(3200);
+  $build['#rows']['long']['operations'] = array(
+    'data' => array(
+      '#type' => 'operations',
+      '#subtype' => 'node',
+      '#links' => array(
+        'edit' => array(
+          'title' => 'edit',
+          'href' => 'item/long/edit',
+        ),
+        'disable' => array(
+          'title' => 'disable',
+          'href' => 'item/long/disable',
+        ),
+        'clone' => array(
+          'title' => 'clone',
+          'href' => 'item/long/clone',
+        ),
+        'delete' => array(
+          'title' => 'delete',
+          'href' => 'item/long/delete',
+        ),
+      ),
+    ),
+  );
+
+  // Add another item, using common operations.
+  $build['#rows']['another']['label'] = l('Another item, using common operations', 'item/another');
+  $build['#rows']['another']['created'] = format_interval(8600);
+  $build['#rows']['another']['operations'] = $build['#rows']['long']['operations'];
+
+  // Add an item with only one operation.
+  $build['#rows']['one']['label'] = l('An item with only one operation', 'item/one');
+  $build['#rows']['one']['created'] = format_interval(12400);
+  $build['#rows']['one']['operations'] = array(
+    'data' => array(
+      '#type' => 'operations',
+      '#subtype' => 'node',
+      '#links' => array(
+        'edit' => array(
+          'title' => 'edit',
+          'href' => 'item/long/edit',
+        ),
+      ),
+    ),
+  );
+
+  // Add an item that can only be viewed.
+  $build['#rows']['view']['label'] = l('An item that can only be viewed', 'item/view');
+  $build['#rows']['view']['created'] = format_interval(12400);
+  $build['#rows']['view']['operations'] = array(
+    'data' => array(
+      '#type' => 'operations',
+      '#subtype' => 'node',
+      '#links' => array(),
+    ),
+  );
+
+  // Add an item for which the default operation is denied.
+  $build['#rows']['denied']['label'] = l('An item for which the default operation is denied', 'item/denied');
+  $build['#rows']['denied']['created'] = format_interval(18600);
+  $build['#rows']['denied']['operations'] = $build['#rows']['long']['operations'];
+  unset($build['#rows']['denied']['operations']['data']['#links']['edit']);
+
+  return $build;
+}
diff --git a/core/modules/system/tests/modules/theme_test/theme_test.module b/core/modules/system/tests/modules/theme_test/theme_test.module
index a05bc46..73dbb4b 100644
--- a/core/modules/system/tests/modules/theme_test/theme_test.module
+++ b/core/modules/system/tests/modules/theme_test/theme_test.module
@@ -58,19 +58,6 @@ function theme_test_menu() {
     'access callback' => TRUE,
     'type' => MENU_CALLBACK,
   );
-
-  $items['theme-test'] = array(
-    'title' => 'Theme test',
-    'page callback' => 'system_admin_menu_block_page',
-    'access callback' => TRUE,
-    'file path' => drupal_get_path('module', 'system'),
-    'file' => 'system.admin.inc',
-  );
-  $items['theme-test/list/operations'] = array(
-    'title' => 'Operations',
-    'page callback' => '_theme_test_list_operations',
-    'access callback' => TRUE,
-  );
   return $items;
 }
 
@@ -160,80 +147,3 @@ function theme_theme_test_foo($variables) {
   return $variables['foo'];
 }
 
-/**
- * Page callback for manual testing of operation links.
- */
-function _theme_test_list_operations() {
-  $build = array(
-    '#theme' => 'table',
-    '#header' => array('Label', 'Created', 'Operations'),
-    '#rows' => array(),
-  );
-  // Add an item with a very long label, using common operations.
-  $build['#rows']['long']['label'] = l('An item with a very insanely long label, which offers quite a couple of common operations', 'item/long');
-  $build['#rows']['long']['created'] = format_interval(3200);
-  $build['#rows']['long']['operations'] = array(
-    'data' => array(
-      '#type' => 'operations',
-      '#subtype' => 'node',
-      '#links' => array(
-        'edit' => array(
-          'title' => 'edit',
-          'href' => 'item/long/edit',
-        ),
-        'disable' => array(
-          'title' => 'disable',
-          'href' => 'item/long/disable',
-        ),
-        'clone' => array(
-          'title' => 'clone',
-          'href' => 'item/long/clone',
-        ),
-        'delete' => array(
-          'title' => 'delete',
-          'href' => 'item/long/delete',
-        ),
-      ),
-    ),
-  );
-
-  // Add another item, using common operations.
-  $build['#rows']['another']['label'] = l('Another item, using common operations', 'item/another');
-  $build['#rows']['another']['created'] = format_interval(8600);
-  $build['#rows']['another']['operations'] = $build['#rows']['long']['operations'];
-
-  // Add an item with only one operation.
-  $build['#rows']['one']['label'] = l('An item with only one operation', 'item/one');
-  $build['#rows']['one']['created'] = format_interval(12400);
-  $build['#rows']['one']['operations'] = array(
-    'data' => array(
-      '#type' => 'operations',
-      '#subtype' => 'node',
-      '#links' => array(
-        'edit' => array(
-          'title' => 'edit',
-          'href' => 'item/long/edit',
-        ),
-      ),
-    ),
-  );
-
-  // Add an item that can only be viewed.
-  $build['#rows']['view']['label'] = l('An item that can only be viewed', 'item/view');
-  $build['#rows']['view']['created'] = format_interval(12400);
-  $build['#rows']['view']['operations'] = array(
-    'data' => array(
-      '#type' => 'operations',
-      '#subtype' => 'node',
-      '#links' => array(),
-    ),
-  );
-
-  // Add an item for which the default operation is denied.
-  $build['#rows']['denied']['label'] = l('An item for which the default operation is denied', 'item/denied');
-  $build['#rows']['denied']['created'] = format_interval(18600);
-  $build['#rows']['denied']['operations'] = $build['#rows']['long']['operations'];
-  unset($build['#rows']['denied']['operations']['data']['#links']['edit']);
-
-  return $build;
-}
diff --git a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
index 9c518d7..399c62e 100644
--- a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
+++ b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
@@ -162,9 +162,9 @@ function testRegistrationDefaultValues() {
     variable_set('date_default_timezone', 'Europe/Brussels');
 
     // Check that the account information fieldset's options are not displayed
-    // is a fieldset if there is not more than one fieldset in the form.
+    // as a fieldset if there is not more than one fieldset in the form.
     $this->drupalGet('user/register');
-    $this->assertNoRaw('<fieldset id="edit-account"><legend>Account information</legend>', 'Account settings fieldset was hidden.');
+    $this->assertNoRaw('<fieldset id="edit-account"><legend>Account information</legend>', 'Account settings fieldset was hidden.'); // @todo   
 
     $edit = array();
     $edit['name'] = $name = $this->randomName();
diff --git a/core/modules/user/user.css b/core/modules/user/user.css
index 866ee40..29b5aae 100644
--- a/core/modules/user/user.css
+++ b/core/modules/user/user.css
@@ -9,7 +9,7 @@
 #permissions tr.even .form-item {
   white-space: normal;
 }
-#user-admin-settings fieldset .fieldset-description {
+#user-admin-settings .details-description {
   font-size: 0.85em;
   padding-bottom: .5em;
 }
diff --git a/core/themes/bartik/css/style-rtl.css b/core/themes/bartik/css/style-rtl.css
index 90638eb..a95c50e 100644
--- a/core/themes/bartik/css/style-rtl.css
+++ b/core/themes/bartik/css/style-rtl.css
@@ -210,9 +210,6 @@ ul.action-links li a {
 
 /* -------------- Form Elements   ------------- */
 
-.fieldset-legend span.summary {
-  margin-left: 0;
-}
 #user-profile-form input#edit-submit {
   margin-left: 0;
 }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 6f4cb14..906aa00 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -1113,83 +1113,34 @@ a.button:active {
 
 /* -------------- Form Elements   ------------- */
 
+details,
 fieldset {
-  background: #ffffff;
-  border: 1px solid #cccccc;
-  margin-top: 10px;
-  margin-bottom: 32px;
-  padding: 0 0 10px;
-  position: relative;
-  top: 12px; /* Offsets the negative margin of legends */
   border-radius: 4px;
 }
-.fieldset-wrapper {
-  margin-top: 25px;
-}
-.node-form .vertical-tabs .fieldset-wrapper {
-  margin-top: 0;
-}
 .filter-wrapper {
-  top: 0;
-  padding: 1em 0 0.2em;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 .filter-help a {
   font-size: 0.857em;
-  padding: 2px 20px 0;
 }
 .filter-wrapper .form-item label {
   margin-right: 10px;
 }
-.filter-wrapper .form-item {
-  padding: 0 0 0.5em 0.5em;
-}
-.filter-guidelines {
-  padding: 0 1.5em 0 0.5em;
-}
-fieldset.collapsed {
-  background: transparent;
-  border-radius: 0;
-}
-fieldset legend {
+summary {
   background: #dbdbdb;
-  border: 1px solid #ccc;
-  border-bottom: none;
   color: #3b3b3b;
-  display: block;
-  height: 2em;
-  left: -1px; /* LTR */
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
-  line-height: 2;
-  padding: 0;
-  position: absolute;
-  text-indent: 10px;
   text-shadow: 0 1px 0 #fff;
-  top: -12px;
-  width: 100%;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
 }
-fieldset.collapsed legend {
-  border-radius: 4px;
-}
-fieldset legend a {
+details summary a {
   color: #3b3b3b;
 }
-fieldset legend a:hover,
-fieldset legend a:focus,
-fieldset legend a:active {
+details summary a:hover,
+details summary a:focus,
+details summary a:active {
   color: #000;
 }
-fieldset .fieldset-wrapper {
-  padding: 0 10px;
-}
-fieldset .fieldset-description {
-  margin-top: 5px;
-  margin-bottom: 1em;
-  line-height: 1.4;
-  color: #3c3c3c;
+details .details-description {
   font-style: italic;
 }
 input {
@@ -1225,10 +1176,6 @@ input.form-submit:focus {
 .password-suggestions ul li {
   margin-left: 1.2em; /* LTR */
 }
-.form-item {
-  margin-bottom: 1em;
-  margin-top: 2px;
-}
 .form-item label {
   font-size: 0.929em;
 }
@@ -1340,7 +1287,7 @@ input.form-button-disabled:active,
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-.comment-form fieldset.filter-wrapper .fieldset-wrapper,
+.comment-form details.filter-wrapper .details-wrapper,
 .comment-form .text-format-wrapper .form-item {
   margin-top: 0;
   margin-bottom: 0;
@@ -1352,7 +1299,7 @@ input.form-button-disabled:active,
 .filter-wrapper .form-select {
   min-width: 120px;
 }
-.comment-form fieldset.filter-wrapper .tips {
+.comment-form details.filter-wrapper .tips {
   font-size: 0.786em;
 }
 #comment-body-add-more-wrapper .form-type-textarea label {
@@ -1371,9 +1318,6 @@ div.password-suggestions {
   background: #222222;
   opacity: 0.7;
 }
-div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
-  padding: 1em;
-}
 #forum .name {
   font-size: 1.083em;
 }
@@ -1491,10 +1435,10 @@ div.add-or-remove-shortcuts {
   margin: 0 5px;
 }
 /* Fix spacing when Seven is used in the overlay. */
-#system-theme-settings fieldset {
+#system-theme-settings details {
   padding: 0;
 }
-#system-theme-settings fieldset .fieldset-legend {
+#system-theme-settings details summary {
   margin-top: 0;
 }
 /* Configuration. */
diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css
index d1a71ce..21252de 100644
--- a/core/themes/seven/ie.css
+++ b/core/themes/seven/ie.css
@@ -1,9 +1,3 @@
-/* IE renders absolute positioned legend where fieldset content starts. */
-fieldset .fieldset-legend {
-  left: 0;
-  top: 0;
-}
-
 /* IE renders monospace font too big. */
 code,
 pre,
diff --git a/core/themes/seven/reset.css b/core/themes/seven/reset.css
index 507955e..936198f 100644
--- a/core/themes/seven/reset.css
+++ b/core/themes/seven/reset.css
@@ -56,13 +56,11 @@ dd,
 ol,
 ul,
 li,
-fieldset,
 form,
 input,
 select,
 textarea,
 label,
-legend,
 table,
 caption,
 tbody,
diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css
index 788aa36..73cfbbc 100644
--- a/core/themes/seven/style-rtl.css
+++ b/core/themes/seven/style-rtl.css
@@ -111,26 +111,7 @@ tr td:last-child {
   border-right: none;
 }
 
-/**
- * Fieldsets.
- */
-fieldset {
-  padding: 2.5em 0 0 0;
-}
-fieldset .fieldset-legend {
-  padding-right: 15px;
-  right: 0;
-}
-fieldset .fieldset-wrapper {
-  padding: 0 15px 13px 13px;
-}
-
 /* Filter */
-.filter-wrapper .form-item,
-.filter-wrapper .filter-guidelines,
-.filter-wrapper .filter-help {
-  padding: 2px 0 0 0;
-}
 ul.tips li {
   margin: 0.25em 1.5em 0.25em 0;
 }
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 7b8ae1b..e07a693 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -20,8 +20,10 @@ hr {
   height: 1px;
   background: #cccccc;
 }
+summary,
 legend {
   font-weight: bold;
+  text-transform: uppercase;
 }
 h1,
 h2,
@@ -504,50 +506,21 @@ tr td:last-child {
     display: none;
   }
 }
+
 /**
- * Fieldsets.
- *
- * Fieldset legends are displayed like containers in Seven. However, several
- * browsers do not support styling of LEGEND elements. To achieve the desired
- * styling:
- * - All fieldsets use 'position: relative'.
- * - All legend labels are wrapped in a single span.fieldset-legend that uses
- *   'position: absolute', which means that the LEGEND element itself is not
- *   rendered by browsers.
- * - Due to using 'position: absolute', collapsed fieldsets do not have a
- *   height; the fieldset requires a 'padding-top' to make the absolute
- *   positioned .fieldset-legend appear as though it would have a height.
- * - Various browsers are positioning the legend differently if there is a
- *   'padding-left'/'padding-right' applied on a fieldset and inherit the
- *   positioning even to absolute positioned elements within; we therefore have
- *   to apply all padding to the inner .fieldset-wrapper instead.
+ * Collapsible details.
  */
-fieldset {
-  border: 1px solid #ccc;
-  padding: 2.5em 0 0 0; /* LTR */
-  position: relative;
-  margin: 1em 0;
-}
-fieldset .fieldset-legend {
-  margin-top: 0.5em;
-  padding-left: 15px; /* LTR */
-  position: absolute;
-  text-transform: uppercase;
-}
-fieldset .fieldset-wrapper {
-  padding: 0 13px 13px 15px; /* LTR */
+details {
+  line-height: 1.295em;
 }
-fieldset.collapsed {
-  background-color: transparent;
+details summary {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }
-.js fieldset.collapsed {
-  border-width: 1px;
-  height: auto;
-}
-fieldset fieldset {
+details details {
   background-color: #fff;
 }
-fieldset fieldset fieldset {
+details details details {
   background-color: #f8f8f8;
 }
 
@@ -555,22 +528,11 @@ fieldset fieldset fieldset {
  * Form elements.
  */
 .form-item {
-  padding: 9px 0;
-  margin: 0 0 10px;
-}
-.filter-wrapper .form-item,
-div.teaser-checkbox .form-item,
-.form-item .form-item {
-  padding: 5px 0;
-  margin: 0;
-  border: 0;
+  margin: 1em 0;
 }
 .form-type-checkbox {
   padding: 0;
 }
-.text-format-wrapper .form-item {
-  padding-bottom: 0;
-}
 .form-item label {
   margin: 0;
   padding: 0;
@@ -599,17 +561,7 @@ div.teaser-checkbox .form-item,
 
 /* Filter */
 .filter-wrapper {
-  border-top: 0;
-  padding: 10px 2px;
-}
-.filter-wrapper .fieldset-wrapper {
-  padding: 0 6px;
-}
-.filter-wrapper .form-item,
-.filter-wrapper .filter-guidelines,
-.filter-wrapper .filter-help {
   font-size: 0.923em;
-  padding: 2px 0 0 0; /* LTR */
 }
 ul.tips,
 div.description,
@@ -788,7 +740,7 @@ ul.action-links a {
     margin-bottom: 2px;
     width: 100%;
   }
-  fieldset .fieldset-legend {
+  details summary {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/core/themes/seven/vertical-tabs-rtl.css b/core/themes/seven/vertical-tabs-rtl.css
index a9598c3..cff18cb 100644
--- a/core/themes/seven/vertical-tabs-rtl.css
+++ b/core/themes/seven/vertical-tabs-rtl.css
@@ -16,6 +16,5 @@ div.vertical-tabs ul li.selected a:active {
   border-left-color: #fff;
 }
 div.vertical-tabs .vertical-tabs-panes {
-  margin: 0 265px 0 0;
-  padding: 10px 0 10px 15px;
+  margin: 0 245px 0 0;
 }
diff --git a/core/themes/seven/vertical-tabs.css b/core/themes/seven/vertical-tabs.css
index e89f3f5..fa265ab 100644
--- a/core/themes/seven/vertical-tabs.css
+++ b/core/themes/seven/vertical-tabs.css
@@ -8,7 +8,7 @@ div.vertical-tabs {
   margin: 10px 0;
   position: relative;
 }
-fieldset.vertical-tabs-pane {
+.vertical-tabs-pane {
   border: 0;
   padding: 0;
   margin: 0;
@@ -66,15 +66,11 @@ div.vertical-tabs ul li.selected a:focus strong {
   text-decoration: underline;
 }
 div.vertical-tabs .vertical-tabs-panes {
-  margin: 0 0 0 265px; /* LTR */
-  padding: 10px 15px 10px 0; /* LTR */
+  margin: 0 0 0 245px; /* LTR */
 }
-fieldset.vertical-tabs-pane > legend {
+.vertical-tabs-pane > summary {
   display: none;
 }
-.vertical-tabs-pane .fieldset-wrapper > div:first-child {
-  padding-top: 5px;
-}
 
 /**
  * Prevent text inputs from overflowing when container is too narrow. "width" is