diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 76fcc4c..7a9ec55 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -1,11 +1,30 @@
 /**
- * Generic elements.
+ * @file
+ * HTML elements styling.
  */
+/*
+Generic elements
+
+Generic elements that are used in the Seven theme.
+
+Styleguide 1.0
+*/
 body {
   color: #333;
   background: #fff;
   font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
 }
+
+/*
+Link
+
+A reuseable link class is provided that can style any element as a link.
+
+Markup: <a>Link</a>
+<button class="link">Button styled as link</button>
+
+Styleguide 1.1.1
+*/
 a,
 .link {
   color: #0074bd;
@@ -18,6 +37,14 @@ a:focus,
   text-decoration: underline;
   outline: 0;
 }
+
+/*
+Horizontal rule
+
+Markup: <hr />
+
+Styleguide 1.1.2
+*/
 hr {
   margin: 0;
   padding: 0;
@@ -25,6 +52,14 @@ hr {
   height: 1px;
   background: #cccccc;
 }
+
+/*
+Summary
+
+Markup: <summary>Summary</summary>
+
+Styleguide 1.1.3
+*/
 summary,
 .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
@@ -34,10 +69,22 @@ summary,
   text-transform: none;
 }
 
-/**
- * Reusable heading classes are included to help modules change the styling of
- * headings on a page without affecting accessibility.
- */
+/*
+Headings
+
+Reusable heading classes are included to help modules control the styling of
+elements on a page without affecting accessibility.
+
+Markup: <h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+<h2 class="heading-c">A heading 2 styled as a heading 3</h2>
+
+Styleguide 1.1.4
+*/
 h1,
 .heading-a {
   font-weight: bold;
@@ -75,9 +122,85 @@ h6,
   margin: 10px 0;
   font-size: 1.077em;
 }
+
+/*
+Paragraph
+
+Markup: <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
+natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+Nullam id dolor id nibh ultricies vehicula.</p>
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
+est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
+elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+Styleguide 1.1.5
+*/
 p {
   margin: 1em 0;
 }
+
+/*
+Unordered list
+
+Markup: <ul>
+  <li>List item</li>
+  <li>List item</li>
+  <li>List item</li>
+</ul>
+
+
+Styleguide 1.1.6
+*/
+ul {
+  list-style-type: disc;
+  list-style-image: none;
+  margin: 0.25em 0 0.25em 1.5em; /* LTR */
+}
+[dir="rtl"] ul {
+  margin-left: 0;
+  margin-right: 1.5em;
+}
+/* This is required to win over specificity of [dir="rtl"] ul */
+[dir="rtl"] .messages__list {
+  margin-right: 0;
+}
+
+/*
+Ordered list
+
+Markup: <ol>
+  <li>List item</li>
+  <li>List item</li>
+  <li>List item</li>
+</ol>
+
+
+Styleguide 1.1.7
+*/
+ol {
+  list-style-type: decimal;
+  margin: 0.25em 0 0.25em 2em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] ol {
+  margin-left: 0;
+  margin-right: 2em;
+}
+
+
+/*
+Description list
+
+Markup: <dl>
+  <dt>Term</dt>
+  <dd>Description</dd>
+  <dt>Term</dt>
+  <dd>Description</dd>
+</dl>
+
+Styleguide 1.1.8
+*/
 dl {
   margin: 0 0 20px;
 }
@@ -90,27 +213,79 @@ dl dl {
 [dir="rtl"] dl dl {
   margin-right: 20px;
 }
+
+/*
+Blockquote
+
+Markup: <blockquote>Williamsburg direct trade hoodie lo-fi.</blockquote>
+
+Styleguide 1.1.9
+*/
 blockquote {
   margin: 1em 40px;
 }
+
+/*
+Address
+
+Markup: <address>Williamsburg direct trade hoodie lo-fi.</address>
+
+Styleguide 1.1.8
+*/
 address {
   font-style: italic;
 }
+
+/*
+Underline and insert
+
+Markup: <u>Williamsburg direct trade hoodie lo-fi.</u>
+<ins>Williamsburg direct trade hoodie lo-fi.</ins>
+
+Styleguide 1.1.10
+*/
 u,
 ins {
   text-decoration: underline;
 }
+
+/*
+Strikethrough and deleted
+
+Markup: <strike>Williamsburg direct trade hoodie lo-fi.</strike>
+<del>Williamsburg direct trade hoodie lo-fi.</del>
+
+Styleguide 1.1.11
+*/
 s,
 strike,
 del {
   text-decoration: line-through;
 }
+
+/*
+Big and small
+
+Markup: <big>Williamsburg direct trade hoodie lo-fi.</big>
+<small>Williamsburg direct trade hoodie lo-fi.</small>
+
+Styleguide 1.1.12
+*/
 big {
   font-size: larger;
 }
 small {
   font-size: smaller;
 }
+
+/*
+Subscript and superscript
+
+Markup: <sub>Williamsburg direct trade hoodie lo-fi.</sub>
+<sup>Williamsburg direct trade hoodie lo-fi.</sup>
+
+Styleguide 1.1.13
+*/
 sub {
   vertical-align: sub;
   font-size: smaller;
@@ -124,40 +299,58 @@ sup {
 nobr {
   white-space: nowrap;
 }
+
+/*
+Abbreviation and acronym
+
+Markup: <abbr title="Captain">Capt</abbr>
+<acronym title="Light Amplification by Stimulated Emission of Radiation">LASER</acronym>
+
+Styleguide 1.1.14
+*/
 abbr,
 acronym {
   border-bottom: dotted 1px;
 }
-ul {
-  list-style-type: disc;
-  list-style-image: none;
-  margin: 0.25em 0 0.25em 1.5em; /* LTR */
-}
-[dir="rtl"] ul {
-  margin-left: 0;
-  margin-right: 1.5em;
-}
-/* This is required to win over specificity of [dir="rtl"] ul */
-[dir="rtl"] .messages__list {
-  margin-right: 0;
-}
-ol {
-  list-style-type: decimal;
-  margin: 0.25em 0 0.25em 2em; /* LTR */
-  padding: 0;
-}
-[dir="rtl"] ol {
-  margin-left: 0;
-  margin-right: 2em;
-}
+
+/*
+Quote
+
+Markup: <quote>Quote</quote>
+
+Styleguide 1.1.15
+*/
 quote,
 code {
   margin: .5em 0;
 }
+
+/*
+Code and pre
+
+Markup: <pre><code>function initialize() {
+  var map = new google.maps.Map(document.getElementById('map-canvas'),{});
+}</code></pre>
+
+Styleguide 1.1.16
+*/
 pre {
   margin: 0.5em 0;
   white-space: pre-wrap;
 }
+
+/*
+Details
+
+Markup: <details>
+  <summary>Title</summary>
+  <div class="details-wrapper">
+      <div class="details-description">Description</div>
+  </div>
+</details>
+
+Styleguide 1.1.17
+*/
 details {
   line-height: 1.295em;
 }