diff --git a/codelab-style.html b/codelab-style.html
index f8b6dea..cbeb899 100644
--- a/codelab-style.html
+++ b/codelab-style.html
@@ -20,14 +20,6 @@
   <template strip-whitespace>
     <style>
 
-:root {
-  --google-codelab-background: var(--paper-grey-100);
-  --google-codelab-header-background: var(--paper-blue-600);
-  --google-codelab-fab-background: var(--paper-blue-700);
-  --google-codelab-footer-text-color: #777;
-  --google-codelab-width: 800px;
-}
-
 :host {
   display: block;
   line-height: 24px;
@@ -38,25 +30,32 @@
     padding: 0;
   };
   --paper-drawer-panel-left-drawer-container: {
-    background: var(--google-codelab-background);
+    background: var(--google-codelab-background, --paper-grey-100);
     overflow-y: auto;
   };
   --paper-drawer-panel-main-container: {
-    background: var(--paper-grey-300);
+    background: var(--google-codelab-background, --paper-grey-300);
   };
 }
 
-[drawer] {
+
+:host([theme="minimal"]) {
+  position: relative;
+}
+
+:host(:not([theme="minimal"])) [drawer] {
   height: auto !important; /* override default styling */
   margin: 16px 16px 16px 12px;
 }
 
+
 #drawer[narrow] #controls {
   width: 100%;
 }
 
 paper-toolbar {
-  background: var(--google-codelab-header-background);
+  background: var(--google-codelab-header-background, --paper-blue-600);
+  color: #fff;
 }
 
 paper-toolbar .title {
@@ -68,35 +67,39 @@
 }
 
 paper-fab {
-  --paper-fab-keyboard-focus-background: var(--google-codelab-fab-background);
-  --paper-fab-background: var(--google-codelab-fab-background);
+  --paper-fab-keyboard-focus-background: var(--google-codelab-fab-background, --paper-blue-700);
+  --paper-fab-background: var(--google-codelab-fab-background, --paper-blue-700);
   flex-shrink: 0;
 }
 
-h1 {
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 1em;
-  color: white;
-  padding: 0;
-  margin: 0.67em 8px;
+/* override external styles */
+:host([theme="minimal"]) #resumeDialog > * {
+  margin-top: 20px;
+  padding: 0 24px;
 }
 
-#countdown {
-  text-align: right;
-  vertical-align: bottom;
-  font-weight: 400;
-  min-width: 80px;
-  color: white;
+:host([theme="minimal"]) #resumeDialog .buttons {
+  padding: 8px 8px 8px 24px;
+  margin: 0;
 }
 
-#countdown iron-icon {
+.countdown iron-icon {
   margin-right: 3px;
-  --iron-icon-fill-color: rgba(255, 255, 255, 0.8);
+}
+
+:host(:not([theme="minimal"])) [drawer] .countdown {
+  display: none;
+}
+
+:host([theme="minimal"]) [drawer] .countdown {
+  padding: 0 16px 16px 16px;
+  font-style: italic;
+  color: var(--paper-blue-500);
 }
 
 #controls {
-  position: fixed;
+  position: absolute;
+  right: 0;
   bottom: 16px;
   padding: 0 16px;
   width: calc(100% - 256px); /* width of drawer */
@@ -134,6 +137,7 @@
   overflow: hidden;
   border-radius: 4px;
   padding: 6px 16px;
+  box-sizing: content-box; /* override users that set * selector box-sizing. */
 }
 
 .toc-item i {
@@ -195,26 +199,25 @@
   display: none;
 }
 
-#feedback {
-  color: var(--google-codelab-footer-text-color);
-  font-size: 0.9em;
-  position: fixed;
-  bottom: 16px;
+#metadata {
+  color: var(--google-codelab-footer-text-color, #777);
+  font-size: 0.7em;
 }
 
-#last-updated {
-  color: var(--google-codelab-footer-text-color);
-  font-size: 0.9em;
+:host(:not([theme="minimal"])) #metadata {
   position: fixed;
-  bottom: 32px;
+  bottom: 8px;
+  background-color: var(--paper-grey-100);
+  padding: 4px 8px;
 }
 
 #feedback a {
   color: currentcolor;
+  text-decoration: underline;
 }
 
 @media (min-width: 641px) {
-  #pages {
+  :host(:not([theme="minimal"])) #pages {
     margin-top: 32px;
   }
   #controls {
diff --git a/demo/codelab.html b/demo/codelab.html
index bd1ab93..76054a7 100644
--- a/demo/codelab.html
+++ b/demo/codelab.html
@@ -21,9 +21,16 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>codelab demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
+  <style>
+  body {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+  }
+  </style>
 </head>
 <body unresolved class="fullbleed">
 
diff --git a/demo/embed.html b/demo/embed.html
index 9a6df3a..43a21ca 100644
--- a/demo/embed.html
+++ b/demo/embed.html
@@ -19,18 +19,55 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>codelab demo</title>
+  <title>Embeddable codelab demo</title>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons">
+  <link rel="stylesheet"
+      href="https://developers.google.com/_static/80c6b067d5/css/devsite-google-blue.css">
+  <link rel="stylesheet" href="https://developers.google.com/maps/styles/common.css">
+
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
+  <style is="custom-style">
+    #container {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    google-codelab {
+      height: 700px;
+      /*background-color: #eee;*/
+    }
+    :root {
+      --google-codelab-background: transparent;
+
+      /* Other customizations */
+      /*--google-codelab-step-link-color: initial;*/
+      /*--google-codelab-fab-background: red;*/
+      /*--google-codelab-footer-text-color: green;*/
+    }
+  </style>
 </head>
-<body unresolved class="fullbleed">
+<body unresolved>
+
+<div id="container">
+
+<h1>Codelabs  > Build Google Maps Using Web Components & No Code!</h1>
 
-  <google-codelab title="Build Google Maps Using Web Components & No Code!"
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>
+
+  <google-codelab theme="minimal"
+                  title="Build Google Maps Using Web Components & No Code!"
                   feedback-link="https://github.com/googlecodelabs"
                   environment="web"
-                  hide-toolbar>
+                  last-updated="2015-01-28"
+                  no-toolbar
+                  no-arrows
+                  no-highlight>
 
     <google-codelab-step label="Overview" duration="2">
 
@@ -146,5 +183,9 @@ <h3 class="faq">Frequently Asked Questions</h3>
 
   </google-codelab>
 
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>
+
+</div>
+
 </body>
 </html>
diff --git a/google-codelab-step.html b/google-codelab-step.html
index 7a24a57..21e1235 100644
--- a/google-codelab-step.html
+++ b/google-codelab-step.html
@@ -122,6 +122,13 @@ <h2 id="title"><span>{{step}}</span>. <span>{{label}}</span></h2>
       _isHighlighted: false,
 
       _activeChanged: function() {
+        var codelab = Polymer.dom(this).parentNode;
+
+        // Don't syntax highlight code if google-codelab requests it.
+        if (codelab.localName === 'google-codelab' && codelab.noHighlight) {
+          return;
+        }
+
         if (this.active && !this._isHighlighted) {
 
           // Minimize jank by waiting one click to do syntax highlighting.
diff --git a/google-codelab.html b/google-codelab.html
index 0f7617d..c505755 100644
--- a/google-codelab.html
+++ b/google-codelab.html
@@ -18,7 +18,6 @@
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-localstorage/iron-localstorage.html">
-<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="../neon-animation/neon-animated-pages.html">
 <link rel="import" href="../neon-animation/animations/slide-from-right-animation.html">
 <link rel="import" href="../neon-animation/animations/slide-from-left-animation.html">
@@ -34,7 +33,7 @@
 <link rel="import" href="../paper-menu/paper-menu.html">
 <link rel="import" href="../paper-item/paper-item.html">
 
-<link rel="import" href="shared-style.html">
+<link rel="import" href="layout-style.html">
 <link rel="import" href="codelab-style.html">
 <link rel="import" href="analytics-behavior.html">
 
@@ -44,7 +43,8 @@
 
 Example:
 
-    <google-codelab title="Awesome codelab" feedback-link="http://example.org">
+    <google-codelab title="Awesome codelab" feedback-link="http://example.org"
+                    last-updated="2015-01-28">
       <google-codelab-step label="One" step="1" duration="10">
         ...
       </google-codelab-step>
@@ -53,23 +53,35 @@
       </google-codelab-step>
     </google-codelab>
 
+The element can also be used in a minimalistic mode where less styling is
+applied. Use the `theme="minimal"` attribute and combine with the
+`noToolbar`, `noArrows`, and `noHighlight` properties to turn off the top nav and
+prevent syntax highlighting code blocks, respectively:
+
+    <google-codelab theme="minimal" no-toolbar no-arrows no-highlight>
+
 @demo demo/codelab.html
 @demo demo/embed.html
 -->
 <dom-module id="google-codelab">
   <template strip-whitespace>
-    <style include="shared-style"></style>
+    <style include="layout-style"></style>
     <style include="codelab-style"></style>
 
-    <iron-localstorage name="{{title}}" value="{{state}}"
+    <iron-localstorage name="{{title}}" value="{{state}}" hidden
         on-iron-localstorage-load-empty="_stateInit"
         on-iron-localstorage-load="_stateLoaded">
     </iron-localstorage>
 
-    <paper-drawer-panel narrow="{{_narrow}}" selected="{{currDrawer}}" id="drawer">
+    <paper-drawer-panel id="drawer" narrow="{{_narrow}}" selected="{{currDrawer}}">
 
-      <div drawer>
-        <paper-menu id="toc" selected="{{selected}}"
+      <div drawer class="layout vertical">
+        <div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
+             class="countdown layout horizontal">
+          <iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
+        </div>
+
+        <paper-menu id="toc" class="flex" selected="{{selected}}"
                     on-iron-select="_allowCodelabComplete">
           <template is="dom-repeat" items="{{steps}}" strip-whitespace>
             <paper-item class$="{{_tocItemClass(selected, index)}}">
@@ -78,23 +90,23 @@
           </template>
         </paper-menu>
 
-        <template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
-          <div id="feedback">
-            Did you find a mistake?
-            <a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
-          </div>
-        </template>
+        <div id="metadata">
+          <template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
+            <div id="feedback">
+              Did you find a mistake?
+              <a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
+            </div>
+          </template>
 
-        <template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
-          <div id="last-updated">
-            Last updated on {{lastUpdated}}.
-          </div>
-        </template>
+          <template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
+            <div id="last-updated">Last updated on {{lastUpdated}}.</div>
+          </template>
+        </div>
 
       </div>
 
       <paper-scroll-header-panel id="headerpanel" fixed main>
-        <paper-toolbar hidden$="[[hideToolbar]]">
+        <paper-toolbar hidden$="[[noToolbar]]">
           <template is="dom-if" if="{{_narrow}}" strip-whitespace>
             <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
           </template>
@@ -102,8 +114,8 @@
             <paper-icon-button icon="arrow-back" on-tap="_goToHome"></paper-icon-button>
           </template>
           <h1 class="title">{{title}}</h1>
-          <div id="countdown" title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
-               class="layout horizontal">
+          <div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
+               class="countdown layout horizontal">
             <iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
           </div>
         </paper-toolbar>
@@ -114,35 +126,35 @@ <h1 class="title">{{title}}</h1>
           <content select="google-codelab-step"></content>
         </neon-animated-pages>
 
-        <footer id="controls">
-          <div class="fabs layout horizontal justified">
-            <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
-              on-tap="selectPrevious"
-              title="Previous step"
-              disabled$="{{_isFirstStep(selected)}}">
-            </paper-fab>
-
-            <div>
-              <template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
-                <paper-fab icon="chevron-right" raised class="navbutton nextbutton"
-                  title="{{_nextFabTitle(selected)}}"
-                  on-tap="selectNext">
-                </paper-fab>
-              </template>
-
-              <template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
-                <paper-fab icon="done" raised class="navbutton donebutton"
-                  on-tap="_goToHome" title="Complete codelab">
-                </paper-fab>
-              </template>
-            </div>
-          </div>
-        </footer>
-
       </paper-scroll-header-panel>
 
     </paper-drawer-panel>
 
+    <footer id="controls" hidden$="[[noArrows]]">
+      <div class="fabs layout horizontal justified">
+        <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
+          on-tap="selectPrevious"
+          title="Previous step"
+          disabled$="{{_isFirstStep(selected)}}">
+        </paper-fab>
+
+        <div>
+          <template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
+            <paper-fab icon="chevron-right" raised class="navbutton nextbutton"
+              title="{{_nextFabTitle(selected)}}"
+              on-tap="selectNext">
+            </paper-fab>
+          </template>
+
+          <template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
+            <paper-fab icon="done" raised class="navbutton donebutton"
+              on-tap="_goToHome" title="Complete codelab">
+            </paper-fab>
+          </template>
+        </div>
+      </div>
+    </footer>
+
     <paper-dialog id="resumeDialog" modal>
       <h2>Would you like to resume where you left off?</h2>
       <p>Step <span>{{_storedStep.step}}</span>: <span>{{_storedStep.label}}</span></p>
@@ -267,10 +279,26 @@ <h2>Would you like to resume where you left off?</h2>
           value: null
         },
 
+        /**
+         * Hides the topnav toolbar.
+         */
+        noToolbar: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Hides the forward/background navigation arrows.
+         */
+        noArrows: {
+          type: Boolean,
+          value: false
+        },
+
         /**
          * Property determines whether the toolbar is hidden.
          */
-        hideToolbar: {
+        noHighlight: {
           type: Boolean,
           value: false,
           reflectToAttribute: true
diff --git a/layout-style.html b/layout-style.html
new file mode 100644
index 0000000..1d5da78
--- /dev/null
+++ b/layout-style.html
@@ -0,0 +1,61 @@
+<!--
+Copyright (c) 2016 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+
+<dom-module id="layout-style">
+  <template>
+    <style>
+      .layout {
+        @apply(--layout);
+      }
+      .layout.horizontal {
+        @apply(--layout-horizontal);
+      }
+      .layout.vertical {
+        @apply(--layout-vertical);
+      }
+      .layout.center {
+        @apply(--layout-center);
+      }
+      .layout.center-center {
+        @apply(--layout-center-center);
+      }
+      .flex {
+        @apply(--layout-flex);
+      }
+      .two {
+        @apply(--layout-flex-2);
+      }
+      .end-justified {
+        @apply(--layout-end-justified);
+      }
+      .end {
+        @apply(--layout-end);
+      }
+      .justified {
+        @apply(--layout-justified);
+      }
+      .self-center {
+        @apply(--layout-self-center);
+      }
+      .wrap {
+         @apply(--layout-wrap);
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/shared-style.html b/shared-style.html
index 4995e1e..b0f32c9 100644
--- a/shared-style.html
+++ b/shared-style.html
@@ -1,5 +1,5 @@
 <!--
-Copyright (c) 2015 Google Inc.
+Copyright (c) 2016 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License. You may obtain a copy of
@@ -22,25 +22,6 @@
         --paper-radio-button-checked-ink-color: #4285f4;
         --paper-radio-button-checked-color: #4285f4;
         --paper-radio-button-unchecked-color: #4285f4;
-
-        --text-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-        --text-font-size: 14px;
-        --text-font-weight: 200;
-      }
-
-      /* Components' shared styles */
-      :host {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
-      }
-
-      /* Document styles */
-      /* TODO: Consider moving to site and preview projects. */
-      body {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
       }
     </style>
   </template>
diff --git a/step-style.html b/step-style.html
index ff78f5b..0b6438d 100644
--- a/step-style.html
+++ b/step-style.html
@@ -1,5 +1,5 @@
 <!--
-Copyright (c) 2015 Google Inc.
+Copyright (c) 2016 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License. You may obtain a copy of
@@ -18,8 +18,6 @@
   <template>
     <style>
       :host {
-        --google-codelab-step-background: #fff;
-        --google-codelab-step-link-color: #0097A7;
         --google-codelab-step-note: {};
         --google-codelab-step-tip: {};
         --google-codelab-step-warn: {};
@@ -39,9 +37,9 @@
         margin: 0 0 30px;
       }
 
-      .instructions {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions {
         box-shadow: 1px 1px 16px #ccc;
-        background: var(--google-codelab-step-background);
+        background: var(--google-codelab-step-background, #fff);
         max-width: 800px;
         font-size: 14px;
         margin: 0 auto;
@@ -52,76 +50,80 @@
         padding: 24px;
       }
 
+      :host-context(google-codelab[theme="minimal"]) .instructions .inner {
+        padding: 0 24px;
+      }
+
       @media (max-width: 800px) {
         .instructions {
           margin: 0 0 16px 0;
         }
       }
 
-      .instructions ::content a,
-      .instructions ::content a:visited {
-        color: var(--google-codelab-step-link-color);
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a:visited {
+        color: var(--google-codelab-step-link-color, #0097A7);
       }
 
-      .instructions ::content h2,
-      .instructions ::content h3,
-      .instructions ::content h4 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h4 {
         font-weight: 400;
         margin: 0;
       }
 
-      .instructions ::content h2 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
         font-weight: 300;
         line-height: 1em;
         font-size: 22px;
       }
 
-      .instructions ::content {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content {
         line-height: 24px;
       }
 
-      .instructions ::content li {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content li {
         margin: 0.5em 0;
       }
 
-      .instructions ::content h2 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
         font-weight: 500;
         margin: 1.5em 0 0 0;
         font-size: 20px;
       }
 
-      .instructions ::content h3 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3 {
         font-weight: 500;
         margin: 20px 0 0 0;
       }
 
-      .instructions ::content aside {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside {
         padding: 0.5em 1em;
         margin: 2em 0;
         border-left: 4px solid;
       }
 
-      .instructions ::content aside p {
+      :host-context(google-codelab:not([theme="minimal"]))  :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside p {
         margin: 0.5em 0;
       }
 
-      .instructions ::content aside.note,
-      .instructions ::content aside.notice {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.note,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.notice {
         border-color: #fca;
         background: #fed;
         color: #842;
         @apply(--google-codelab-step-note);
       }
 
-      .instructions ::content aside.tip,
-      .instructions ::content aside.special {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.tip,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.special {
         border-color: #6a6;
         background: #ded;
         color: #464;
         @apply(--google-codelab-step-tip);
       }
 
-      .instructions ::content aside.warning {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.warning {
         border-color: #DB8A61;
         background: #fed;
         color: #842;
@@ -169,6 +171,7 @@
 
       .instructions ::content paper-button a {
         text-decoration: none;
+        color: inherit !important;
       }
 
       .instructions ::content paper-button.colored {
@@ -176,11 +179,6 @@
         color: #fff;
       }
 
-      .instructions ::content paper-button.colored a,
-      .instructions ::content paper-button.colored a:visited {
-        color: #fff;
-      }
-
       .instructions ::content paper-button.red {
         background-color: #DB4437;
       }
@@ -205,26 +203,26 @@
         margin: 0;
       }
 
-      .instructions ::content h3.faq {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3.faq {
         border-bottom: 1px solid #ddd;
       }
 
-      .instructions ::content ul.faq {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content ul.faq {
         list-style: none;
         padding-left: 1em;
       }
 
-      .instructions ::content .faq li {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq li {
         font-size: 1.1em;
         margin-bottom: 0.8em;
       }
 
-      .instructions ::content .faq a {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a {
         color: inherit;
         text-decoration: none;
       }
 
-      .instructions ::content .faq a:hover {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a:hover {
         text-decoration: underline;
       }
 
diff --git a/test/codelab.html b/test/codelab.html
index 0485d60..a476129 100644
--- a/test/codelab.html
+++ b/test/codelab.html
@@ -34,7 +34,8 @@
 
   <test-fixture id="codelab">
     <template>
-      <google-codelab title="Test title" feedback-link="http://codelab.example.org">
+      <google-codelab title="Test title" feedback-link="http://codelab.example.org"
+          last-updated="2015-01-28">
         <google-codelab-step label="First" duration="2">
           First step body
         </google-codelab-step>
@@ -54,7 +55,10 @@
       function verifySecondSelected(codelab) {
         assert.equal(codelab.selected, 1, 'selected');
         assert.equal(codelab.remaining, '3 min remaining', 'remaining');
-        assert.match(codelab.$.countdown.textContent.trim(), /3 min/);
+        var countdowns = codelab.root.querySelectorAll('.countdown');
+        for (var i = 0, countdown; countdown = countdowns[i]; ++i) {
+          assert.match(countdown.textContent.trim(), /3 min/);
+        }
         assert.equal(location.hash, '#1', 'location.hash');
         assert.equal(codelab.$.toc.selected, 1, '$.toc.selected');
         assert(!codelab.querySelector('.prevbutton').disabled, 'prev fab is disabled');
@@ -101,6 +105,7 @@
           assert.equal(codelab.feedbackLink, 'http://codelab.example.org');
           assert.equal(codelab.steps[0].step, 1);
           assert.equal(codelab.steps[1].step, 2);
+          assert.equal(codelab.lastUpdated, '2015-01-28');
 
           assert.equal(codelab.querySelector('h1').textContent, 'Test title');
 
@@ -191,7 +196,12 @@
           async.nextTick(function() {
             assert.equal(codelab.selected, 0, 'selected');
             assert.equal(codelab.remaining, '5 min remaining', 'remaining');
-            assert.match(codelab.$.countdown.textContent.trim(), /5 min/);
+
+            var countdowns = codelab.root.querySelectorAll('.countdown');
+            for (var i = 0, countdown; countdown = countdowns[i]; ++i) {
+              assert.match(codelab.$.countdown.textContent.trim(), /5 min/);
+            }
+
             assert.equal(codelab.$.toc.selected, 0, '$.toc.selected');
             assert(location.hash === '#0' || location.hash === '', 'location.hash');
             assert(codelab.querySelector('.prevbutton').disabled, 'prev fab is not disabled');
diff --git a/test/embed.html b/test/embed.html
new file mode 100644
index 0000000..eb01d30
--- /dev/null
+++ b/test/embed.html
@@ -0,0 +1,75 @@
+<!--
+Copyright (c) 2015 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>embed tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../google-codelab-step.html">
+  <link rel="import" href="../google-codelab.html">
+</head>
+<body>
+
+  <test-fixture id="codelab">
+    <template>
+      <google-codelab title="Test title" feedback-link="http://codelab.example.org"
+                      no-toolbar no-highlight no-arrows>
+        <google-codelab-step label="First" duration="2">
+<pre><code language="">&lt;head&gt;
+  ....
+  &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
+  &lt;link rel="import" href="bower_components/google-map/google-map.html"&gt;
+&lt;/head&gt;</code></pre>
+        </google-codelab-step>
+      </google-codelab>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('ui toggles', function() {
+
+      test('test properties', function(done) {
+        var codelab = fixture('codelab');
+
+        var toolbar = codelab.$.headerpanel.querySelector('paper-toolbar');
+        assert.equal(toolbar.hidden, true, 'toolbar hidden');
+        assert.equal(getComputedStyle(toolbar).display,
+                     'none', 'toolbar not displayed');
+
+        assert.equal(codelab.$.controls.hidden, true, 'arrows hidden');
+        assert.equal(getComputedStyle(
+            codelab.$.controls).display, 'none', 'arrows not displayed');
+
+        var higlighted = codelab.querySelector('code span');
+        async.nextTick(function() {
+          assert.equal(higlighted, null, 'code was not syntax higlighted');
+          done();
+        });
+      });
+
+    });
+  </script>
+
+</body>