diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss
index 23a6443e62..8280bcae9a 100644
--- a/example/styleguide/res/sass/_style-guide-base.scss
+++ b/example/styleguide/res/sass/_style-guide-base.scss
@@ -37,7 +37,7 @@
         //border-bottom: 1px solid $colorInteriorBorder;
         font-size: 0.9em;
         margin: $interiorMargin 0;
-        &:not(first-child) { margin-top: $interiorMargin * 2; }
+        &:not(:first-child) { margin-top: $interiorMarginLg * 2; }
         text-transform: uppercase;
     }
 
@@ -45,7 +45,7 @@
     pre {
         background-color: pushBack($colorBodyBg, 20%);
         display: inline-block;
-        font-size: 0.8em;
+        font-size: 0.8rem;
     }
 
     code {
@@ -55,8 +55,11 @@
 
     pre {
         border-radius: $interiorMargin;
+        display: block;
         margin: 0;
+        overflow: auto;
         padding: $interiorMargin $interiorMarginLg;
+        white-space: pre;
     }
 
     .doc-title {
diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html
index 60fdacb256..387da83e25 100644
--- a/example/styleguide/res/templates/controls.html
+++ b/example/styleguide/res/templates/controls.html
@@ -37,7 +37,8 @@
 <a class="s-button">Edit</a>
 <a class="s-button icon-pencil">
     <span class="title-label">Edit</span>
-</a></mct-example>
+</a>
+</mct-example>
         </div>
     </div>
 
@@ -47,15 +48,9 @@
             <div class="col">
                 <p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
             </div>
-            <div class="col">
-                <h3>Markup</h3>
-                <pre>
-&lt;a class="s-button major"&gt;Ok&lt;/a&gt;
-&lt;a class="s-button"&gt;Cancel&lt;/a&gt;</pre>
-                <h3>Example</h3>
-                <a class="s-button major">Ok</a>
-                <a class="s-button">Cancel</a>
-            </div>
+<mct-example><a class="s-button major">Ok</a>
+<a class="s-button">Cancel</a>
+</mct-example>
         </div>
     </div>
 
@@ -66,22 +61,13 @@
                 <p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
                 <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
             </div>
-            <div class="col">
-                <h3>Markup</h3>
-                <pre>
-&lt;span class="l-btn-set"&gt;
-    &lt;a class="s-button icon-magnify"&gt;&lt;/a&gt;
-    &lt;a class="s-button icon-magnify-in"&gt;&lt;/a&gt;
-    &lt;a class="s-button icon-magnify-out"&gt;&lt;/a&gt;
-&lt;/span&gt;</pre>
-                <h3>Example</h3>
-                <span class="l-btn-set">
-                    <a class="s-button icon-magnify"></a>
-                    <a class="s-button icon-magnify-in"></a>
-                    <a class="s-button icon-magnify-out"></a>
-                </span>
+<mct-example><span class="l-btn-set">
+    <a class="s-button icon-magnify"></a>
+    <a class="s-button icon-magnify-in"></a>
+    <a class="s-button icon-magnify-out"></a>
+</span>
+</mct-example>
             </div>
-        </div>
     </div>
 
     <div class="l-section">
@@ -91,28 +77,20 @@
                 <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
                 <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
             </div>
-            <div class="col">
-                <h3>Markup</h3>
-                <pre>
-
-                </pre>
-
-                <h3>Example</h3>
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" />
-                    <em></em>
-                </label>
-                <br />
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" checked />
-                    <em></em>
-                </label>
-                <br />
-                <label class="checkbox custom">Here's one with a label
-                    <input type="checkbox" />
-                    <em></em>
-                </label>
-            </div>
+<mct-example><label class="checkbox custom no-text">
+    <input type="checkbox" />
+    <em></em>
+</label>
+<br />
+<label class="checkbox custom no-text">
+    <input type="checkbox" checked />
+    <em></em>
+</label>
+<br />
+<label class="checkbox custom">Checkbox with a text in the label
+    <input type="checkbox" />
+    <em></em>
+</label></mct-example>
         </div>
     </div>
 
@@ -122,28 +100,40 @@
             <div class="col">
                 <p>Radio buttons use the same technique as checkboxes above.</p>
             </div>
+<mct-example><label class="radio custom">Red
+    <input name="Alarm Status" type="radio" />
+    <em></em>
+</label>
+<br>
+<label class="radio custom">Orange
+    <input name="Alarm Status" type="radio" checked />
+    <em></em>
+</label>
+<br>
+<label class="radio custom">Yellow
+    <input name="Alarm Status" type="radio" />
+    <em></em>
+</label>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Selects</h2>
+        <div class="cols cols1-1">
             <div class="col">
-                <h3>Markup</h3>
-                <pre>
-
-                </pre>
-
-                <h3>Example</h3>
-                <label class="checkbox custom no-text">
-                    <input type="radio" />
-                    <em></em>
-                </label>
-                <br />
-                <label class="checkbox custom no-text">
-                    <input type="radio" checked />
-                    <em></em>
-                </label>
-                <br />
-                <label class="checkbox custom">Here's one with a label
-                    <input type="radio" />
-                    <em></em>
-                </label>
+                <p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
             </div>
+<mct-example><div class="select">
+    <select>
+        <option value="" selected="selected">- Select One -</option>
+        <option value="Colussus">Colussus</option>
+        <option value="HAL 9000">HAL 9000</option>
+        <option value="Mother">Mother</option>
+        <option value="Skynet">Skynet</option>
+    </select>
+</div>
+</mct-example>
         </div>
     </div>