diff --git a/_layouts/default.html b/_layouts/default.html
index ae864b2c78..716e478fce 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -22,7 +22,7 @@
   </app-drawer>
 
   <scroll-area sidebar unresolved>
-    <site-banner type="{{page.type}}" navgroup="{{page.navgroup}}" shortname="{{page.shortname}}" unresolved>
+    <site-banner type="{{page.type}}" shortname="{{page.shortname}}" unresolved>
       {% include top-nav.html %}
       <header>
         <h1>{{page.title}}</h1>
diff --git a/articles/accessible-web-components.md b/articles/accessible-web-components.md
index e9a877798e..1c99a5a646 100644
--- a/articles/accessible-web-components.md
+++ b/articles/accessible-web-components.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Accessible Web Components - Part 1"
 subtitle: Improving the accessibility of Web Components
@@ -39,21 +38,21 @@ When designing for accessibility, there are four key areas of disability to cons
 
 * Ensure all user interface elements can be used with assistive technologies such as screen readers, magnifiers and braille displays. This entails ensuring that elements are marked up such that accessibility APIs can programmatically determine the *role*, *state*, *value* and *title* of any element.
 
-**Hearing** issues mean a user may have issues hearing sound emitted from a page. 
+**Hearing** issues mean a user may have issues hearing sound emitted from a page.
 
-* Make the content understandable using [text alternatives](http://www.w3.org/TR/WCAG20/#media-equiv-av-only-alt) for all content that is not strictly text. 
+* Make the content understandable using [text alternatives](http://www.w3.org/TR/WCAG20/#media-equiv-av-only-alt) for all content that is not strictly text.
 
 * Ensure you test that your elements are still functional [without sound](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-understanding).
 
-**Mobility** issues can include the inability to operate a mouse, a keyboard or touch-screen. 
+**Mobility** issues can include the inability to operate a mouse, a keyboard or touch-screen.
 
 * Make the content of your elements [functionally accessible from a keyboard](http://www.w3.org/TR/wai-aria-practices/#keyboard) for any actions one would otherwise use a mouse for.
 
 * Ensure user interface elements are correctly marked up for assistive technologies; these users may use technologies such as voice control software and physical switch controls, which tend to use the same APIs as other assistive technologies like screen readers.
 
-**Cognitive** issues mean a user may require assistive technologies to help them with reading text, so it’s important to ensure text alternatives exist. 
+**Cognitive** issues mean a user may require assistive technologies to help them with reading text, so it’s important to ensure text alternatives exist.
 
-* Avoid a visual presentation that is [repetitive](http://www.w3.org/TR/WCAG20/#time-limits) or flashing as this can cause some users [issues](http://www.w3.org/TR/WCAG20/#seizure). 
+* Avoid a visual presentation that is [repetitive](http://www.w3.org/TR/WCAG20/#time-limits) or flashing as this can cause some users [issues](http://www.w3.org/TR/WCAG20/#seizure).
 
 * Avoid interactions that are timing-based.
 
@@ -79,13 +78,13 @@ Native controls (such as `<button>` and `<select>`) have accessibility built-in
 
 Custom elements (with the exception of elements that extend native elements like `<button>`) do not have any built-in functionality, including accessibility, so this needs to be provided by you. A good place to start when implementing accessibility is to compare your custom element to an analogous native element (or a combination of several native elements, depending on how complex your component is).
 
-The following is a list of questions you can ask yourself when attempting to make your custom elements more accessible. 
+The following is a list of questions you can ask yourself when attempting to make your custom elements more accessible.
 
-### Can your element be used with the keyboard alone? 
+### Can your element be used with the keyboard alone?
 
-Ideally, ensure that all functionality in your element can be reached by a keyboard. During your UX design, think about how you would use your element with the keyboard alone, and figure out a consistent set of keyboard interactions. 
+Ideally, ensure that all functionality in your element can be reached by a keyboard. During your UX design, think about how you would use your element with the keyboard alone, and figure out a consistent set of keyboard interactions.
 
-Firstly, ensure that you have a sensible **focus** target for each element. For example, a complex element like a menu may be one focus target within a page, but should then manage focus within itself so that the active menu item always takes focus. 
+Firstly, ensure that you have a sensible **focus** target for each element. For example, a complex element like a menu may be one focus target within a page, but should then manage focus within itself so that the active menu item always takes focus.
 
 ![Menu displaying how to manage focus](/articles/images/accessible-web-components/image_0.png)
 
@@ -136,7 +135,7 @@ Any element which displays an image should provide a mechanism for providing alt
 
 Assistive technology conveys semantic information which is otherwise expressed to sighted users via visual cues such as formatting, cursor style, or position. Native elements have this semantic information built-in by the browser, but for custom elements you need to use [ARIA](http://www.w3.org/WAI/PF/aria/) to add this information in.
 
-One technology which is critical for custom element accessibility is [WAI-ARIA](http://www.w3.org/WAI/PF/aria/). ARIA is a specification defining support for accessible web apps. It defines markup extensions (implemented as attributes on elements), which can be used to provide additional information about the semantics of elements to assistive technologies like screen readers. 
+One technology which is critical for custom element accessibility is [WAI-ARIA](http://www.w3.org/WAI/PF/aria/). ARIA is a specification defining support for accessible web apps. It defines markup extensions (implemented as attributes on elements), which can be used to provide additional information about the semantics of elements to assistive technologies like screen readers.
 
 As a rule of thumb, any element which listens to a mouse click or hover event should not only have some kind of keyboard event listener, but also an ARIA role and potentially ARIA states and attributes.
 
@@ -156,7 +155,7 @@ Color shouldn’t be used as the only means of conveying information, such as in
 
 Any text content displayed in your element should meet the [minimum (AA) contrast bar](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast). Consider providing a high-contrast theme which meets the [higher (AAA) bar](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast7), and also ensure that user agent style sheets can be applied if users require extreme contrast or different colors. You can use this [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) as an aid when doing design.
 
-### Is the moving or flashing content in your elements stoppable and safe? 
+### Is the moving or flashing content in your elements stoppable and safe?
 
 Content that moves, scrolls or blinks that lasts for anything more than 5 seconds should be able to be paused, stopped or hidden. In general, try to flash no more than three times per second.
 
diff --git a/articles/communication.md b/articles/communication.md
index b808c7b698..ef2fff8cdc 100644
--- a/articles/communication.md
+++ b/articles/communication.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Communication & Message Passing"
 subtitle: Common techniques for sharing information between custom elements
@@ -50,7 +49,7 @@ We'll cover the following techniques:
 1. [Data binding](#binding)
 1. [Changed watchers](#changedwatchers)
 1. [Custom events](#events)
-1. [Using an element's API](#api) 
+1. [Using an element's API](#api)
 
 ### 1. Data binding {#binding}
 
@@ -114,7 +113,7 @@ When a {{site.project_title}} element [publishes](/docs/polymer/polymer.html#pub
 `<td-model>.items` and `<core-localstorage>.value` are bound together with "list":
 
 {% raw %}
-    <td-model items="{{list}}"></td-model> 
+    <td-model items="{{list}}"></td-model>
     <core-localstorage name="myapplist" value="{{list}}"></core-localstorage>
 {% endraw %}
 
@@ -271,7 +270,7 @@ a user of `<say-hello>` can setup a handler for the event:
 
 As with normal DOM events outside of {{site.project_title}}, you can attach additional data to a custom event. This makes **events an ideal way to distribute arbitrary information to other elements**.
 
-**Example:** include the `name` property as part of the payload: 
+**Example:** include the `name` property as part of the payload:
 
     sayHi: function() {
       this.fire('said-hello', {name: this.name});
@@ -348,7 +347,7 @@ Things become very interesting when several elements need to respond to an event
             first: function(e, detail, sender) {
               logger('first():', detail, sender);
             },
-            second: function(e, detail, sender) { 
+            second: function(e, detail, sender) {
               logger('second():', detail, sender);
             },
             third: function(e, detail, sender) {
@@ -398,7 +397,7 @@ sibling or child elements. That is:
 When `<say-hello>` fires `said-hello`, it bubbles and `sayHi()` handles it.
 However, suppose `<say-bye>` has setup an internal listener for the same event.
 It wants in on the action! Unfortunately, this means we can no longer exploit
-the benefits of event bubbling...by itself. 
+the benefits of event bubbling...by itself.
 
 This particular problem isn't new to the web but you can easily handle it in
 {{site.project_title}}. Just use event delegation and manually fire the event
@@ -492,7 +491,7 @@ other frameworks for a long time, so technically it's not a new concept.
 Whether you're inside or outside a `<polymer-element>`, there are plenty of
 ways to send instructions/messages/data to other web components. Hopefully,
 you're seeing that nothing has changed in the world of custom elements. That's
-the point :) It's the same web we've always known...just more powerful! 
+the point :) It's the same web we've always known...just more powerful!
 
 <script>
 (function() {
diff --git a/articles/concatenating-web-components.md b/articles/concatenating-web-components.md
index 7450876a34..3d0814342e 100644
--- a/articles/concatenating-web-components.md
+++ b/articles/concatenating-web-components.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Concatenating Web Components with Vulcanize"
 subtitle: Reduce network requests by flattening HTML Imports
@@ -25,7 +24,7 @@ tags:
 
 We all know that reducing network requests is important. In the {{site.project_title}} world, [Vulcanize](https://github.com/Polymer/vulcanize) is the name given to a build tool that lets you **concatenate** a set of elements and their HTML imported dependencies into a single file. If your app has lots of top-level imports, consider squashing them into a single file and importing it instead!
 
-Vulcanize recursively pulls in all your imports, flattens their dependencies and spits out something that can potentially **reduce the number of network requests** your app makes. 
+Vulcanize recursively pulls in all your imports, flattens their dependencies and spits out something that can potentially **reduce the number of network requests** your app makes.
 
 In the future, we will hopefully have the tech to do away with needing Vulcanize using advanced HTTP techniques (e.g HTTP 2.0). In the mean time, it's an excellent tool for cutting down on the network requests made by your {{site.project_title}} apps.
 
@@ -52,7 +51,7 @@ The output file can be specified using the `--output` or `-o` flag:
 
     vulcanize -o build.html index.html
 
-No additional configuration is necessary. build.html now contains a version of index.html with all imports inlined and dependencies flattened. Paths to any URLs are automatically adjusted for the new output location, with the exception of those set in JavaScript. 
+No additional configuration is necessary. build.html now contains a version of index.html with all imports inlined and dependencies flattened. Paths to any URLs are automatically adjusted for the new output location, with the exception of those set in JavaScript.
 
 If no output is specified, vulcanized.html is used by default.
 
@@ -132,7 +131,7 @@ Inline the imported requests with the `--inline` flag.
 
     vulcanize -o build.html index.html --inline
 
-Vulcanize also supports the opposite of this process, extracting inline scripts to external files for the purposes of CSP. 
+Vulcanize also supports the opposite of this process, extracting inline scripts to external files for the purposes of CSP.
 
 ## Content Security Policy
 
@@ -220,13 +219,13 @@ For more information on how to configure the `grunt-vulcanize` task, read the [o
 
 ### Is concatenation a good idea?
 
-This depends on how large your application is. Excessive requests are often far worse than filesize. Hypothetically, let's say you have 20 HTML files/imports of 0.5MB each. Out of which only 2 (1MB) are required on the first page. You might want to keep them separate and combine others or load others in a deferred mode while on the first page. 
+This depends on how large your application is. Excessive requests are often far worse than filesize. Hypothetically, let's say you have 20 HTML files/imports of 0.5MB each. Out of which only 2 (1MB) are required on the first page. You might want to keep them separate and combine others or load others in a deferred mode while on the first page.
 
 Some of the things that you should think about before combining a large number of imports are when you combine 100 files together, you're cutting down on 99 requests, but you're also doing the following:
 
 * Increasing how long it takes to download that single file (and potentially block loading of an important page)
 
-* Accounting for the additional time spent parsing and rendering that additional code we just pulled from the server, which may not be required at this point. 
+* Accounting for the additional time spent parsing and rendering that additional code we just pulled from the server, which may not be required at this point.
 
 The short answer is "don't guess it, test it". There is always a trade-off when it comes to concatenation but tools like [WebPageTest](http://webpagetest.org) can be useful for determining what your true bottlenecks are.
 
diff --git a/articles/distributing-components-with-bower.md b/articles/distributing-components-with-bower.md
index 37a36353cc..1a0d5dd07e 100644
--- a/articles/distributing-components-with-bower.md
+++ b/articles/distributing-components-with-bower.md
@@ -1,10 +1,9 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Distributing Components With Bower"
-subtitle: How to package your elements for broader sharing 
+subtitle: How to package your elements for broader sharing
 
 article:
   author: addyosmani
@@ -47,7 +46,7 @@ Run `bower init` to generate a valid bower.json manifest to lock down your proje
     [?] name: polymer-demo
     [?] version: 0.0.1
     [?] description: An awesome {{site.project_title}} element
-    [?] main file: 
+    [?] main file:
     [?] keywords: {{site.project_title}}, web-components
     [?] authors: John Smith
     [?] license: MIT
@@ -85,7 +84,7 @@ This will produce a bower.json file containing something like:
 
 ### 2. Adding the Polymer dependencies {#add-dependencies}
 
-Next, you will want to install webcomponents.js (the Web Component polyfills) and polymer.html so that your {{site.project_title}} elements can consume them. This can be done by running the following one-liner: 
+Next, you will want to install webcomponents.js (the Web Component polyfills) and polymer.html so that your {{site.project_title}} elements can consume them. This can be done by running the following one-liner:
 
     bower install --save polymer
 
@@ -150,9 +149,9 @@ Your element should now be available on the [bower registry](http://bower.io/sea
 
 ### How do I install Bower? {#bower-install}
 
-Bower depends on [Node](http://nodejs.com) and [npm](http://npmjs.org) and is generally used via the command-line. 
+Bower depends on [Node](http://nodejs.com) and [npm](http://npmjs.org) and is generally used via the command-line.
 
-You can download and install Node from [nodejs.org](http://nodejs.org). npm comes bundled with each binary package, so when you install Node, npm should automatically be installed at the same time. You’ll also need to have Git installed, as Bower uses Git endpoints to locate packages. If you don’t have Git installed, you can download it from [http://git-scm.com/downloads](git-scm.com/downloads). 
+You can download and install Node from [nodejs.org](http://nodejs.org). npm comes bundled with each binary package, so when you install Node, npm should automatically be installed at the same time. You’ll also need to have Git installed, as Bower uses Git endpoints to locate packages. If you don’t have Git installed, you can download it from [http://git-scm.com/downloads](git-scm.com/downloads).
 
 You can then install Bower using npm:
 
@@ -176,7 +175,7 @@ To list what packages you have installed in the current project, pass the `list`
 
 This won’t display any information until a package has been installed, but you can do this with the `install` command:
 
-    bower install {{site.project_title}}/platform 
+    bower install {{site.project_title}}/platform
 
 Uninstalling packages is just as easy as installing them. In this case we use the `bower uninstall` command.
 
diff --git a/articles/index.md b/articles/index.md
index 241860e730..497744fcd3 100644
--- a/articles/index.md
+++ b/articles/index.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Articles
 subtitle: Core concepts of build apps on top of Polymer and web components
diff --git a/articles/polymer-xtag-vanilla.md b/articles/polymer-xtag-vanilla.md
index 7665c3a7e0..df659284b0 100644
--- a/articles/polymer-xtag-vanilla.md
+++ b/articles/polymer-xtag-vanilla.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Custom Element Interoperability"
 subtitle: Using Polymer, X-Tag, and Vanilla Custom Elements
diff --git a/articles/spa.md b/articles/spa.md
index 0427727703..9ddd6d1606 100644
--- a/articles/spa.md
+++ b/articles/spa.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Building single page apps using web components"
 subtitle: The Polymer approach to building single page applications
diff --git a/articles/styling-elements.md b/articles/styling-elements.md
index ef9037d3e7..e76f54c65b 100644
--- a/articles/styling-elements.md
+++ b/articles/styling-elements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: A Guide to Styling Elements
 
@@ -50,7 +49,7 @@ As with any HTML element, users of your Custom Element can define styles on it:
 
     <x-foo></x-foo>
 
-However, it's common for a Custom Element to define its own look. 
+However, it's common for a Custom Element to define its own look.
 
 ### Element-defined styles
 
@@ -78,7 +77,7 @@ rule that targets the host if it matches `<selector>`: For example:
 matches
 
     :host(.different) {
-      ...  
+      ...
     }
 
 #### Reacting to user states
@@ -115,7 +114,7 @@ The `:host-context(<selector>)` pseudo class matches the host element if it or a
       color: red;
     }
 
-One reason you might find `:host-context()` useful is for theming. For example, many people do theming by applying a class to `<html>` or `<body>`. 
+One reason you might find `:host-context()` useful is for theming. For example, many people do theming by applying a class to `<html>` or `<body>`.
 
     <body class="different">
       <x-foo></x-foo>
@@ -137,7 +136,7 @@ One reason you might find `:host-context()` useful is for theming. For example,
 
 #### Programmatically modifying styles
 
-You can dynamically change an element's styling by, you guessed it, modifying 
+You can dynamically change an element's styling by, you guessed it, modifying
 its `.style` property.
 
 From the outside:
@@ -162,7 +161,7 @@ From within the element:
       <script>
         Polymer('x-foo', {
           changeBg: function() {
-            this.style.background = 'blue'; 
+            this.style.background = 'blue';
           }
         });
       </script>
@@ -255,7 +254,7 @@ event that signifies all elements have been upgraded.
 
     <style>
       x-foo[unresolved] {
-        /* custom styling */ 
+        /* custom styling */
       }
     </style>
     <x-foo unresolved></x-foo>
@@ -341,7 +340,7 @@ see [styling distributed nodes](#style-distributed).
         <span>I'm black</span>
       </footer>
     </x-foo>
-    
+
 **Note**: For complex styling like distribute nodes, {{site.project_title}} provides the `polyfill-*`
 selectors to polyfill certain Shadow DOM features. See the [Styling reference](/docs/polymer/styling.html#directives) for more information on the directives.
 {: .alert .alert-info }
@@ -353,7 +352,7 @@ selectors to polyfill certain Shadow DOM features. See the [Styling reference](/
         color: green;
       }
       .red {
-        color: red; 
+        color: red;
       }
     </style>
 
@@ -373,7 +372,7 @@ selectors to polyfill certain Shadow DOM features. See the [Styling reference](/
     color: green;
   }
   .red {
-    color: red; 
+    color: red;
   }
 </style>
 
@@ -394,14 +393,14 @@ The `::shadow` pseudo-element and the `/deep/` combinator pierce through Shadow
 
 #### The `::shadow` pseudo-element {#hat}
 
-If an element has at least one shadow tree, the `::shadow` pseudo-element matches the shadow roots themselves. 
-For example, say you wanted to style x-foo's internal `p` element. Writing `x-foo::shadow` selects x-foo's shadow root. From there, you can write a normal descendant selector to get at the `p`: 
+If an element has at least one shadow tree, the `::shadow` pseudo-element matches the shadow roots themselves.
+For example, say you wanted to style x-foo's internal `p` element. Writing `x-foo::shadow` selects x-foo's shadow root. From there, you can write a normal descendant selector to get at the `p`:
 
     <style>
       x-foo::shadow p {
         color: red;
       }
-      /* Equivalent to previous rule (in this case). */ 
+      /* Equivalent to previous rule (in this case). */
       x-foo::shadow > p {
         color: red;
       }
@@ -462,7 +461,7 @@ A more full fledged example is styling a tabs component, say `<x-tabs>`. It has
 
 #### The `/deep/` combinator {#cat}
 
-The `/deep/` combinator is similar to `::shadow`, but more powerful. It completely **ignores all shadow boundaries and crosses into any number of shadow trees**. 
+The `/deep/` combinator is similar to `::shadow`, but more powerful. It completely **ignores all shadow boundaries and crosses into any number of shadow trees**.
 
 **Example** style all `h2` elements that are descendants of an `<x-tabs>`, anywhere in a shadow tree:
 
diff --git a/articles/unit-testing-elements.md b/articles/unit-testing-elements.md
index d756cc8ca2..c9c64a95a5 100644
--- a/articles/unit-testing-elements.md
+++ b/articles/unit-testing-elements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Articles
 title: "Unit Testing Polymer Elements"
 subtitle: Authoring Unit Tests for your elements
@@ -61,7 +60,7 @@ Out of the box, web-component-tester also includes [Lodash](https://lodash.com/)
 
 ### Why create a new tool?
 
-Great question. When working with Web Components, we regularly find ourselves wanting to write tests within .html sources. A large number of tests require that you write HTML and we wanted something more convenient than two files per suite - your fixtures and tests. We also wanted a test runner that didn't have configuration hooks for running server-executable code to allow for environments like [Travis CI](https://travis-ci.org/). 
+Great question. When working with Web Components, we regularly find ourselves wanting to write tests within .html sources. A large number of tests require that you write HTML and we wanted something more convenient than two files per suite - your fixtures and tests. We also wanted a test runner that didn't have configuration hooks for running server-executable code to allow for environments like [Travis CI](https://travis-ci.org/).
 
 We considered both [Karma](http://karma-runner.github.io/0.12/index.html) and [Protractor](https://github.com/angular/protractor) while evaluating our tooling options. Karma unfortunately didn't support [WebDriver](http://docs.seleniumhq.org/projects/webdriver/) commands outside of lauching and lacked first-class support for .html sources. Protractor had a similar JS-centric view of the world and focused more on integration style testing rather than unit style testing.
 
@@ -77,7 +76,7 @@ WCT includes a number of helpful utilities meant to ease testing Web Components.
 
 `testImmediate()` allows you to run your test at declaration time before Mocha has begun tests. It's handy when you need to test document initialization. `testImmediate(name, testFn)` accepts a test name and test function. If an argument is accepted to `testFn`, the test will be treated as async, similar to Mocha tests.
 
-Note that with `testImmediate()`, should any errors be thrown asynchronously cannot be tied to your test. If you wish to catch them and pass them to the `done` event instead, a [safeStep()](https://github.com/Polymer/web-component-tester/blob/master/browser/environment/helpers.js#L19) utility is available to help. 
+Note that with `testImmediate()`, should any errors be thrown asynchronously cannot be tied to your test. If you wish to catch them and pass them to the `done` event instead, a [safeStep()](https://github.com/Polymer/web-component-tester/blob/master/browser/environment/helpers.js#L19) utility is available to help.
 
 ### Mocha helpers
 
@@ -336,7 +335,7 @@ First, setup a counter that will be incremented each time the `core-select event
 
 If this is the case two properties - `s.selectedItem` and `e.detail.item` (returned by the event) should be the same. Hooking this up to the `core-select` event, we get:
 
-    test('if core-select is fired when a different item in a list is selected', 
+    test('if core-select is fired when a different item in a list is selected',
     function() {
       s.addEventListener('core-select', function(e) {
           if (e.detail.isSelected){
@@ -348,7 +347,7 @@ If this is the case two properties - `s.selectedItem` and `e.detail.item` (retur
 
 Great. Now to set the `selected` item in the list to "2" we can write:
 
-    test('if core-select is fired when a different item in a list is selected', 
+    test('if core-select is fired when a different item in a list is selected',
     function() {
       // ...
       s.selected = 2;
@@ -393,7 +392,7 @@ Finally, let's check that the selected item has the correct CSS class (the "core
 
 And of course, we then run `wct` to ensure everything runs as expected.
 
-**Note:** You may want to test outside usage of your element as part of `polymer-ready`. Code written outside of `test` functions will execute immediately, including `suite` functions such as the one above. By default, WCT will wait until `polymer-ready` has completed to run your tests to ensure everything behaves as expected. However, you may not have upgraded elements outside of them. For scenarious like this, the [testImmedate](https://github.com/Polymer/web-component-tester/blob/master/browser/environment/helpers.js#L41) helper is useful for running tests before `polymer-ready`. 
+**Note:** You may want to test outside usage of your element as part of `polymer-ready`. Code written outside of `test` functions will execute immediately, including `suite` functions such as the one above. By default, WCT will wait until `polymer-ready` has completed to run your tests to ensure everything behaves as expected. However, you may not have upgraded elements outside of them. For scenarious like this, the [testImmedate](https://github.com/Polymer/web-component-tester/blob/master/browser/environment/helpers.js#L41) helper is useful for running tests before `polymer-ready`.
 
 **That's it!** We now have some simple assertion tests to test the attributes and events for a Polymer element work as expected. For a more complete reference to how we've gone about unit testing some of our elements, including `<core-selector>`, take a look at [`<core-tests>`](https://github.com/Polymer/core-tests).
 
diff --git a/build/index.md b/build/index.md
index 85ea7de8a3..342994ed62 100644
--- a/build/index.md
+++ b/build/index.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Build status
-type: resources
-navgroup: resources
+type: guide
 shortname: Resources
 
 add_permalinks: false
diff --git a/css/elements/docs-menu.css b/css/elements/docs-menu.css
index c8b01e12f3..50c8834094 100644
--- a/css/elements/docs-menu.css
+++ b/css/elements/docs-menu.css
@@ -1 +1 @@
-h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}:host{display:block}#mainmenu{display:block;overflow:auto;-webkit-overflow-scrolling:touch;margin:0}#mainmenu>core-submenu::shadow core-item{font-weight:500}#mainmenu>core-submenu{border-top:1px solid #ccc;padding:0 24px}#mainmenu>core-submenu:last-of-type{border-bottom:1px solid #ccc}#mainmenu>core-submenu.core-selected::shadow core-item{color:currentcolor}#mainmenu>core-submenu.core-selected::shadow core-item::shadow core-icon{color:currentcolor}core-submenu /deep/ core-item,core-item{font-size:13px !important;line-height:32px !important;padding:0;color:initial;height:48px}core-submenu /deep/ core-item.core-selected,core-item.core-selected{font-weight:500 !important}core-submenu::shadow core-item::shadow core-icon{margin:0 16px 0 0 !important;color:#757575}core-submenu core-submenu::shadow core-item::shadow core-icon{-webkit-order:2;order:2;color:#aaa;margin:0 !important}core-submenu core-submenu::shadow core-item::shadow #label{-ms-flex:1 1 0.000000001px;-webkit-flex:1;flex:1;-webkit-flex-basis:0.000000001px;flex-basis:0.000000001px}core-submenu core-submenu::shadow core-menu{margin-left:24px !important}core-submenu /deep/ core-menu{margin:0 !important}
+h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}:host{display:block}#mainmenu{display:block;overflow:auto;-webkit-overflow-scrolling:touch;margin:0}#mainmenu>core-submenu::shadow core-item{font-weight:500}polyfill-rule{content:"#mainmenu > core-submenu core-item";font-weight:normal}#mainmenu>core-submenu{border-top:1px solid #ccc;padding:0 24px}#mainmenu>core-submenu:last-of-type{border-bottom:1px solid #ccc}#mainmenu>core-submenu.core-selected::shadow core-item{color:currentcolor}#mainmenu>core-submenu.core-selected::shadow core-item::shadow core-icon{color:currentcolor}polyfill-rule{content:"#mainmenu > core-submenu.core-selected core-item";color:initial}polyfill-rule{content:"#mainmenu > core-submenu.core-selected > #submenuItem:first-of-type";color:currentcolor !important}core-submenu /deep/ core-item,core-item{font-size:13px !important;line-height:32px !important;padding:0;color:initial;height:48px}core-submenu /deep/ core-item.core-selected,core-item.core-selected{font-weight:500 !important}core-submenu::shadow core-item::shadow core-icon{margin:0 16px 0 0 !important;color:#757575}core-submenu core-submenu::shadow core-item::shadow core-icon{-webkit-order:2;order:2;color:#aaa;margin:0 !important}core-submenu core-submenu::shadow core-item::shadow #label{-ms-flex:1 1 0.000000001px;-webkit-flex:1;flex:1;-webkit-flex-basis:0.000000001px;flex-basis:0.000000001px}core-submenu core-submenu::shadow core-menu{margin-left:24px !important}core-submenu /deep/ core-menu{margin:0 !important}
diff --git a/css/homepage.css b/css/homepage.css
index a8c38abc4e..ecf738abc9 100644
--- a/css/homepage.css
+++ b/css/homepage.css
@@ -1 +1 @@
-.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg,#apps .box{background-color:#eee !important}.main-purple,section .bar.main-purple{background-color:#1f2036}.main-purple paper-button,section .bar.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg,#apps .box{background-color:#eee !important}.main-purple,section .bar.main-purple{background-color:#1f2036}.main-purple paper-button,section .bar.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.material-purple{background-color:#3e50b4}.material-purple-light{background-color:#c4c9e8}.material-orange{background-color:#ff5621}.material-orange-light{background-color:#ffcbbb}.material-pink{background-color:#e81d62}.material-pink-light{background-color:#f7bacf}.material-yellow{background-color:#f3b300}.material-yellow-light{background-color:#fbe7b1}.material-green{background-color:#00bea4}.material-green-light{background-color:#a6ffea}.material-teal{background-color:#00bbd3}.material-teal-light{background-color:#b1eaf1}.material-blue{background-color:#4184f3}.material-blue-light{background-color:#c5d9fb}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}img{border:0}summary{display:block}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}body.hide-on-hash .hide-on-hash{display:none}img{max-width:100%}pre,code{white-space:pre;word-wrap:normal;overflow-x:auto}pre b,pre strong,code b,code strong{font-weight:700}a code{color:currentcolor}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:500;line-height:48px}b,strong{font-weight:500}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:500}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error{border-color:#ff4120;fill:#ff4120}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}paper-button{color:#666;font-size:14px;white-space:nowrap}paper-button>core-icon{margin-right:4px}paper-button[raised]{background:#fafafa}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0,0,0,0)),color-stop(40%, rgba(0,0,0,0.08)));background:-moz-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar a{text-decoration:none !important}app-bar .paper-button{font-size:14px;letter-spacing:normal;margin:5px}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer .links{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner :host([type="guide"]){background-color:#ff4080 !important}scroll-area[sidebar] site-banner :host([type="elements"]){background-color:#7986cb !important}scroll-area[sidebar] site-banner :host([type="start"]){background-color:#536dfe !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[sidebar]{padding-left:0 !important}scroll-area[unresolved] site-banner{height:60px;overflow:hidden}scroll-area[unresolved] app-bar{display:none}scroll-area[unresolved] header{display:none}scroll-area[unresolved] article{padding-left:15px;padding-right:15px}}#sidebar #sidebar-content{height:100%}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;padding-left:24px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:500;cursor:pointer}.video iframe{width:853px;max-width:100%;height:480px}.yt-embed{width:100%;max-width:576px}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3;fill:black;height:35px;width:35px}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:15px}footer .links{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:500}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img,#apps .box .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:15px}}@media only screen and (min-width: 851px) and (max-width: 990px){footer .links{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer .links .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}.h1heading,#apps h1{font-size:35px}.h5heading,#apps h5{font-size:14px;font-weight:500;color:#999;line-height:24px;letter-spacing:0.01em;margin-top:6px;margin-bottom:18px}section{border-bottom:1px solid #eee}.main-purple,section .bar.main-purple{color:white}section .bar{-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;-ms-justify-content:flex-end;-o-justify-content:flex-end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;border-top:1px solid #eee;border-bottom:1px solid #eee;background-color:#fafafa;height:auto}section .bar.main-purple{border-color:rgba(255,255,255,0.3)}section .bar.main-purple a{color:white}section .bar a{color:inherit;font-size:16px;text-align:right;-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;opacity:0.6}section .bar a:after{content:'\0025BE';margin:0 10px}site-banner{height:80px;-webkit-transition:box-shadow 200ms ease-in-out, opacity 300ms ease-in !important;transition:box-shadow 200ms ease-in-out, opacity 300ms ease-in !important}site-banner[unresolved]{opacity:0;visibility:hidden}feature-carousel{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;position:relative;height:310px}feature-carousel[unresolved]{visibility:hidden;opacity:0}site-banner .logo{z-index:200}.panel{padding:75px 16px}.panel.left img{margin-right:88px}.panel.right img{margin-left:88px}.panel summary+summary{margin-left:25px}.panel summary p{margin:20px 0;line-height:32px}.panel img{-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;-o-align-self:center;align-self:center}.panel img.cover{object-fit:cover;object-position:50% 0;-webkit-box-flex:1;-webkit-flex:1 0 auto;-moz-flex:1 0 auto;-ms-flex:1 0 auto;-o-flex:1 0 auto;flex:1 0 auto;margin-top:1em;height:300px;width:100%;-webkit-mask-box-image:-webkit-linear-gradient(bottom, transparent, #fff 20%);-moz-mask-box-image:-moz-linear-gradient(bottom, transparent, #fff 20%);-ms-mask-box-image:-ms-linear-gradient(bottom, transparent, #fff 20%);mask-box-image:linear-gradient(to top, rgba(0,0,0,0),#ffffff 20%)}@supports not (object-fit: cover){img.cover{height:auto !important;width:100% !important}}#future .panel{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;padding-top:125px;min-height:505px}#future summary{-webkit-box-flex:1;-webkit-flex:1 1 0.0px;-moz-flex:1 1 0.0px;-ms-flex:1 1 0.0px;-o-flex:1 1 0.0px;flex:1 1 0.0px}#future a{text-decoration:none}#future a:not(:last-of-type){margin-right:12px}@media only screen and (max-width: 850px){#future{padding-top:30px}#future .panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}#future summary{-webkit-box-flex:1;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;-o-flex:1 1 auto;flex:1 1 auto}}#featured .video iframe{width:525px;height:273px}#featured .panel feature-carousel summary{margin-left:40px}#featured .panel img{width:525px;height:273px;border:1px solid #eee;margin-left:0;margin-top:0;object-fit:cover;object-position:50% 0}@media only screen and (max-width: 850px){#featured .panel feature-carousel summary{margin-left:0 !important;margin-top:15px !important}}#designer summary h3{margin:1em 0}#learn{min-height:536px}#learn summary,#everything-element summary{color:#fff}#everything-element code{color:currentcolor}#everything-element .panel img{max-width:312px}#apps .panel{padding:56px 16px 24px 16px}#apps .panel .columns{margin-top:32px}#apps .panel summary{margin-bottom:32px}#apps .box{margin-bottom:28px;border-radius:2px;width:200px;height:200px;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}#apps img{height:100%;width:100%}#apps p{margin:10px 0;line-height:24px}@media only screen and (max-width: 850px){#apps .columns{display:block}#apps .columns summary{-webkit-box-flex:1;-webkit-flex:initial;-moz-flex:initial;-ms-flex:initial;-o-flex:initial;flex:initial}}
+.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg,#apps .box{background-color:#eee !important}.main-purple,section .bar.main-purple{background-color:#1f2036}.main-purple paper-button,section .bar.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg,#apps .box{background-color:#eee !important}.main-purple,section .bar.main-purple{background-color:#1f2036}.main-purple paper-button,section .bar.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.material-purple{background-color:#3e50b4}.material-purple-light{background-color:#c4c9e8}.material-orange{background-color:#ff5621}.material-orange-light{background-color:#ffcbbb}.material-pink{background-color:#e81d62}.material-pink-light{background-color:#f7bacf}.material-yellow{background-color:#f3b300}.material-yellow-light{background-color:#fbe7b1}.material-green{background-color:#00bea4}.material-green-light{background-color:#a6ffea}.material-teal{background-color:#00bbd3}.material-teal-light{background-color:#b1eaf1}.material-blue{background-color:#4184f3}.material-blue-light{background-color:#c5d9fb}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}img{border:0}summary{display:block}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}body.hide-on-hash .hide-on-hash{display:none}img{max-width:100%}pre,code{white-space:pre;word-wrap:normal;overflow-x:auto}pre b,pre strong,code b,code strong{font-weight:700}a code{color:currentcolor}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:500;line-height:48px}b,strong{font-weight:500}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:500}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error{border-color:#ff4120;fill:#ff4120}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}paper-button{color:#666;font-size:14px;white-space:nowrap}paper-button>core-icon{margin-right:4px}paper-button[raised]{background:#fafafa}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0,0,0,0)),color-stop(40%, rgba(0,0,0,0.08)));background:-moz-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar a{text-decoration:none !important}app-bar .paper-button{font-size:14px;letter-spacing:normal;margin:5px}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer .links{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner[type="guide"]{background-color:#ff4080 !important}scroll-area[sidebar] site-banner[type="elements"]{background-color:#7986cb !important}scroll-area[sidebar] site-banner[type="start"]{background-color:#536dfe !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[sidebar]{padding-left:0 !important}scroll-area[unresolved] site-banner{height:60px;overflow:hidden}scroll-area[unresolved] app-bar{display:none}scroll-area[unresolved] header{display:none}scroll-area[unresolved] article{padding-left:15px;padding-right:15px}}#sidebar #sidebar-content{height:100%}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;padding-left:24px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:500;cursor:pointer}.video iframe{width:853px;max-width:100%;height:480px}.yt-embed{width:100%;max-width:576px}.content-padding,footer>:first-child,.panel{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3;fill:black;height:35px;width:35px}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:15px}footer .links{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:500}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img,#apps .box .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:15px}}@media only screen and (min-width: 851px) and (max-width: 990px){footer .links{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer .links .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}.h1heading,#apps h1{font-size:35px}.h5heading,#apps h5{font-size:14px;font-weight:500;color:#999;line-height:24px;letter-spacing:0.01em;margin-top:6px;margin-bottom:18px}section{border-bottom:1px solid #eee}.main-purple,section .bar.main-purple{color:white}section .bar{-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;-ms-justify-content:flex-end;-o-justify-content:flex-end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;border-top:1px solid #eee;border-bottom:1px solid #eee;background-color:#fafafa;height:auto}section .bar.main-purple{border-color:rgba(255,255,255,0.3)}section .bar.main-purple a{color:white}section .bar a{color:inherit;font-size:16px;text-align:right;-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;opacity:0.6}section .bar a:after{content:'\0025BE';margin:0 10px}site-banner{height:80px;-webkit-transition:box-shadow 200ms ease-in-out, opacity 300ms ease-in !important;transition:box-shadow 200ms ease-in-out, opacity 300ms ease-in !important}site-banner[unresolved]{opacity:0;visibility:hidden}feature-carousel{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;position:relative;height:310px}feature-carousel[unresolved]{visibility:hidden;opacity:0}site-banner .logo{z-index:200}.panel{padding:75px 16px}.panel.left img{margin-right:88px}.panel.right img{margin-left:88px}.panel summary+summary{margin-left:25px}.panel summary p{margin:20px 0;line-height:32px}.panel img{-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;-o-align-self:center;align-self:center}.panel img.cover{object-fit:cover;object-position:50% 0;-webkit-box-flex:1;-webkit-flex:1 0 auto;-moz-flex:1 0 auto;-ms-flex:1 0 auto;-o-flex:1 0 auto;flex:1 0 auto;margin-top:1em;height:300px;width:100%;-webkit-mask-box-image:-webkit-linear-gradient(bottom, transparent, #fff 20%);-moz-mask-box-image:-moz-linear-gradient(bottom, transparent, #fff 20%);-ms-mask-box-image:-ms-linear-gradient(bottom, transparent, #fff 20%);mask-box-image:linear-gradient(to top, rgba(0,0,0,0),#ffffff 20%)}@supports not (object-fit: cover){img.cover{height:auto !important;width:100% !important}}#future .panel{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;padding-top:125px;min-height:505px}#future summary{-webkit-box-flex:1;-webkit-flex:1 1 0.0px;-moz-flex:1 1 0.0px;-ms-flex:1 1 0.0px;-o-flex:1 1 0.0px;flex:1 1 0.0px}#future a{text-decoration:none}#future a:not(:last-of-type){margin-right:12px}@media only screen and (max-width: 850px){#future{padding-top:30px}#future .panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}#future summary{-webkit-box-flex:1;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;-o-flex:1 1 auto;flex:1 1 auto}}#featured .video iframe{width:525px;height:273px}#featured .panel feature-carousel summary{margin-left:40px}#featured .panel img{width:525px;height:273px;border:1px solid #eee;margin-left:0;margin-top:0;object-fit:cover;object-position:50% 0}@media only screen and (max-width: 850px){#featured .panel feature-carousel summary{margin-left:0 !important;margin-top:15px !important}}#designer summary h3{margin:1em 0}#learn{min-height:536px}#learn summary,#everything-element summary{color:#fff}#everything-element code{color:currentcolor}#everything-element .panel img{max-width:312px}#apps .panel{padding:56px 16px 24px 16px}#apps .panel .columns{margin-top:32px}#apps .panel summary{margin-bottom:32px}#apps .box{margin-bottom:28px;border-radius:2px;width:200px;height:200px;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}#apps img{height:100%;width:100%}#apps p{margin:10px 0;line-height:24px}@media only screen and (max-width: 850px){#apps .columns{display:block}#apps .columns summary{-webkit-box-flex:1;-webkit-flex:initial;-moz-flex:initial;-ms-flex:initial;-o-flex:initial;flex:initial}}
diff --git a/css/site2.css b/css/site2.css
index 6e0880e1fc..b0ec152f47 100644
--- a/css/site2.css
+++ b/css/site2.css
@@ -1 +1 @@
-.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.material-purple{background-color:#3e50b4}.material-purple-light{background-color:#c4c9e8}.material-orange{background-color:#ff5621}.material-orange-light{background-color:#ffcbbb}.material-pink{background-color:#e81d62}.material-pink-light{background-color:#f7bacf}.material-yellow{background-color:#f3b300}.material-yellow-light{background-color:#fbe7b1}.material-green{background-color:#00bea4}.material-green-light{background-color:#a6ffea}.material-teal{background-color:#00bbd3}.material-teal-light{background-color:#b1eaf1}.material-blue{background-color:#4184f3}.material-blue-light{background-color:#c5d9fb}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}img{border:0}summary{display:block}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}body.hide-on-hash .hide-on-hash{display:none}img{max-width:100%}pre,code{white-space:pre;word-wrap:normal;overflow-x:auto}pre b,pre strong,code b,code strong{font-weight:700}a code{color:currentcolor}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:500;line-height:48px}b,strong{font-weight:500}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:500}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error{border-color:#ff4120;fill:#ff4120}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}paper-button{color:#666;font-size:14px;white-space:nowrap}paper-button>core-icon{margin-right:4px}paper-button[raised]{background:#fafafa}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0,0,0,0)),color-stop(40%, rgba(0,0,0,0.08)));background:-moz-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar a{text-decoration:none !important}app-bar .paper-button{font-size:14px;letter-spacing:normal;margin:5px}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer .links{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner :host([type="guide"]){background-color:#ff4080 !important}scroll-area[sidebar] site-banner :host([type="elements"]){background-color:#7986cb !important}scroll-area[sidebar] site-banner :host([type="start"]){background-color:#536dfe !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[sidebar]{padding-left:0 !important}scroll-area[unresolved] site-banner{height:60px;overflow:hidden}scroll-area[unresolved] app-bar{display:none}scroll-area[unresolved] header{display:none}scroll-area[unresolved] article{padding-left:15px;padding-right:15px}}#sidebar #sidebar-content{height:100%}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;padding-left:24px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:500;cursor:pointer}.video iframe{width:853px;max-width:100%;height:480px}.yt-embed{width:100%;max-width:576px}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3;fill:black;height:35px;width:35px}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:15px}footer .links{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:500}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:15px}}@media only screen and (min-width: 851px) and (max-width: 990px){footer .links{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer .links .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}
+.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"RobotoDraft",Helvetica,Arial,sans-serif;font-weight:300;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:500}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:500}h5{font-size:12px;font-weight:500}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:500}.start{color:#536dfe}.elements{color:#7986cb}.guide{color:#ff4080}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}.main-purple paper-button{background:#262742 !important;color:white;fill:currentcolor}.main-purple paper-button:hover{background:#3a3b56 !important}code,pre{color:#9f499b;font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}.polymer-status-badge{height:20px;background-color:rgba(0,0,0,0.26);text-transform:uppercase;border-radius:2px;font-size:11px;padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;line-height:1;color:#fff;box-sizing:border-box;margin:0 24px}.material-purple{background-color:#3e50b4}.material-purple-light{background-color:#c4c9e8}.material-orange{background-color:#ff5621}.material-orange-light{background-color:#ffcbbb}.material-pink{background-color:#e81d62}.material-pink-light{background-color:#f7bacf}.material-yellow{background-color:#f3b300}.material-yellow-light{background-color:#fbe7b1}.material-green{background-color:#00bea4}.material-green-light{background-color:#a6ffea}.material-teal{background-color:#00bbd3}.material-teal-light{background-color:#b1eaf1}.material-blue{background-color:#4184f3}.material-blue-light{background-color:#c5d9fb}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}img{border:0}summary{display:block}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}body.hide-on-hash .hide-on-hash{display:none}img{max-width:100%}pre,code{white-space:pre;word-wrap:normal;overflow-x:auto}pre b,pre strong,code b,code strong{font-weight:700}a code{color:currentcolor}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:500;line-height:48px}b,strong{font-weight:500}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:500}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error{border-color:#ff4120;fill:#ff4120}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}paper-button{color:#666;font-size:14px;white-space:nowrap}paper-button>core-icon{margin-right:4px}paper-button[raised]{background:#fafafa}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0,0,0,0)),color-stop(40%, rgba(0,0,0,0.08)));background:-moz-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar a{text-decoration:none !important}app-bar .paper-button{font-size:14px;letter-spacing:normal;margin:5px}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer .links{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner[type="guide"]{background-color:#ff4080 !important}scroll-area[sidebar] site-banner[type="elements"]{background-color:#7986cb !important}scroll-area[sidebar] site-banner[type="start"]{background-color:#536dfe !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[sidebar]{padding-left:0 !important}scroll-area[unresolved] site-banner{height:60px;overflow:hidden}scroll-area[unresolved] app-bar{display:none}scroll-area[unresolved] header{display:none}scroll-area[unresolved] article{padding-left:15px;padding-right:15px}}#sidebar #sidebar-content{height:100%}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;padding-left:24px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:500;cursor:pointer}.video iframe{width:853px;max-width:100%;height:480px}.yt-embed{width:100%;max-width:576px}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3;fill:black;height:35px;width:35px}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:15px}footer .links{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:500}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:15px}}@media only screen and (min-width: 851px) and (max-width: 990px){footer .links{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer .links .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}
diff --git a/discuss.md b/discuss.md
index d83f2cd8cb..89d35e00c4 100644
--- a/discuss.md
+++ b/discuss.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: community
+type: guide
 shortname: Community
 title: Discussion
 ---
diff --git a/docs/elements/core-elements.md b/docs/elements/core-elements.md
index aadd3b90d5..35c38283c4 100644
--- a/docs/elements/core-elements.md
+++ b/docs/elements/core-elements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: elements
-navgroup: elements
 shortname: Elements
 title: Polymer core elements
 #subtitle: non-visual utility elements
diff --git a/docs/elements/icons.md b/docs/elements/icons.md
index 03a17dea16..78b73b065e 100644
--- a/docs/elements/icons.md
+++ b/docs/elements/icons.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: elements
-navgroup: elements
 shortname: Elements
 title: Using core icons
 subtitle: Guide
@@ -54,7 +53,7 @@ Produces: <core-icon src="/images/icons/android.svg"></core-icon>
 
 The source image is scaled to fit the icon size, which defaults to 24px square, and is used as the icon element’s background.
 
-You can set the size of the icon using CSS. 
+You can set the size of the icon using CSS.
 
     <core-icon src="/images/icons/android.svg" style="width: 24px; height: 24px;"></core-icon>
     <core-icon src="/images/icons/android.svg" style="width: 32px; height: 32px;"></core-icon>
@@ -64,8 +63,8 @@ Produces: <core-icon src="/images/icons/android.svg" style="width: 24px; height:
 <core-icon src="/images/icons/android.svg" style="width: 32px; height: 32px;"></core-icon>
 <core-icon src="/images/icons/android.svg" style="width: 48px; height: 48px;"></core-icon>
 
-**Note:** In {{site.project_title}} 0.3.4 and earlier, `core-icon` included a 
-`size` attribute and didn't support sizing using CSS. 
+**Note:** In {{site.project_title}} 0.3.4 and earlier, `core-icon` included a
+`size` attribute and didn't support sizing using CSS.
 {: .alert .alert-info }
 
 The `src` attribute works well when you want to use a single icon. However, most of the time you need more than one, so {{site.project_title}} makes it easy to work with *icon sets*.
@@ -84,7 +83,7 @@ a whole range of predefined icon sets. To use an icon from an icon set, use the
 This loads the *polymer* icon from the default iconset: <core-icon icon="polymer"></core-icon>
 
 You can find more interesting icon sets in the `core-icons` directory.
-To use an icon from one of these icon sets, first import the icon set. 
+To use an icon from one of these icon sets, first import the icon set.
 Specify the icon as <em>iconset-name</em><b>&#8239;:&#8239;</b><em>icon-name</em>.
 
 For example:
@@ -97,16 +96,16 @@ For example:
 This displays the *cake* icon from the *social* iconset: <core-icon icon="social:cake"></core-icon>
 
 You can browse available icon sets on the
-[core-icons demo page](/components/core-icons/demo.html). 
+[core-icons demo page](/components/core-icons/demo.html).
 
 ## Styling icons with CSS {#styling-with-css}
 
 Because icons in {{site.project_title}} iconsets are SVG-based, you can control their appearance
-with CSS. In addition to setting standard CSS properties like sizes and background colors, 
+with CSS. In addition to setting standard CSS properties like sizes and background colors,
 you can set SVG-specific CSS properties like `fill`, `stroke` and `stroke-width` for your icons.
 
 By default, icons use `fill: currentcolor`, so they match the current text color.
-The easiest way to override the icon color is to set the `color` property. (You 
+The easiest way to override the icon color is to set the `color` property. (You
 can also set the `fill` property directly, but it requires a more specific CSS selector.)
 
     <style>
@@ -174,7 +173,7 @@ the fancy circles even more fancy by adding some color:
       }
     </style>
 
-Now you can display the icon with `core-icon` using the same 
+Now you can display the icon with `core-icon` using the same
 <em>iconset-name</em><b>&#8239;:&#8239;</b><em>icon-name</em>
 format used for built-in icon sets. For example, to display the icon
 defined above use `custom-icons:fancy-circles` as the `icon` attribute.
@@ -235,8 +234,8 @@ Produces: <core-icon icon="custom-icons-png:place"></core-icon>
 
 ## Using icons with other elements {#icons-in-other-core-components}
 
-You can use icons on their own, but also use them with other elements, such as buttons. You can use the built-in 
-and custom icon sets with any `core-` or `paper-` element that has an `icon` attribute. Remember to include the 
+You can use icons on their own, but also use them with other elements, such as buttons. You can use the built-in
+and custom icon sets with any `core-` or `paper-` element that has an `icon` attribute. Remember to include the
 appropriate icon set before referring to an icon, otherwise the icon will not render.
 
 The following examples use `core-icon-button`, `core-menu-button` and `core-item` with
@@ -254,7 +253,7 @@ Produces: <core-icon-button icon="av:play-arrow"></core-icon-button>
   <core-item icon="settings" label="Settings"></core-item>
 </core-menu-button>
 
-There are two ways to style the icons inside another element. Since `color` is an 
+There are two ways to style the icons inside another element. Since `color` is an
 inherited property, you can set `color` on the parent element:
 
     <style>
diff --git a/docs/elements/layout-elements.md b/docs/elements/layout-elements.md
index 81c9d22711..b271b63653 100644
--- a/docs/elements/layout-elements.md
+++ b/docs/elements/layout-elements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: elements
-navgroup: elements
 shortname: Elements
 title: Layout elements
 subtitle: Guide
diff --git a/docs/elements/material.md b/docs/elements/material.md
index af11dbac0d..98dc9328c3 100644
--- a/docs/elements/material.md
+++ b/docs/elements/material.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: elements
-navgroup: elements
 shortname: Elements
 title: Material design with Polymer
 subtitle: Guide
@@ -98,13 +97,13 @@ few examples:
 <div class="icondemo" layout horizontal>
 </div>
 
-For details on using `<core-icon>` and its relatives, see 
+For details on using `<core-icon>` and its relatives, see
 [Using core icons](icons.html).
 
 ## Material controls
 
 The paper elements collection includes a number of material-themed controls
-for all common areas of your application. The following table shows the common 
+for all common areas of your application. The following table shows the common
 controls.
 
 <table class="demo-table">
@@ -230,7 +229,7 @@ hide it.
 
 ### Snackbars & toasts
 
-A `<paper-toast>` element appears at the bottom of the screen or on the 
+A `<paper-toast>` element appears at the bottom of the screen or on the
 lower-left on mobile. Use the `text` attribute to specify the text to display.
 
     <paper-toast id="toast" text="Your draft has been discarded."></paper-toast>
@@ -256,7 +255,7 @@ When designing your own components or using generic HTML elements such as
 
 Material responds to input events with an touch ripple effect: an animation
 that moves out radially from the origin of the event. These effects are built
-into the 
+into the
 [paper elements collection](paper-elements.html):
 
 <paper-button class="purpleRipple" raised>Show me the ripple</paper-button>
@@ -299,22 +298,22 @@ Touch the cards and icon below to see ripple effects.
 
 The `<paper-ripple>` should be `position: absolute` and sized to fit the
 parent element. In  this example, the `fit` layout attribute is used to
-position the ripple appropriately.  (See 
-[layout attributes](/docs/polymer/layout-attrs.html) for information on `fit` 
+position the ripple appropriately.  (See
+[layout attributes](/docs/polymer/layout-attrs.html) for information on `fit`
 and other layout attributes.)
 
 You can clip the ripple to a circle by adding the `circle` class to the
 ripple's `classlist`. Circular ripples are used for small buttons used in a grid
 layout (for example, icon buttons, number pads).
 
-You can set the color of the ripple using the `color` CSS property. 
+You can set the color of the ripple using the `color` CSS property.
 
     paper-ripple {
       color: red;
     }
 
-When using a paper element, check the element API doc to find the CSS selector 
-to style the ripple. Elements that have a ripple have a `<paper-ripple>` 
+When using a paper element, check the element API doc to find the CSS selector
+to style the ripple. Elements that have a ripple have a `<paper-ripple>`
 in the shadow DOM. For example, to style a  button:
 
     paper-button::shadow paper-ripple {
@@ -340,8 +339,8 @@ are arbitrary values ranging from 0 (no elevation) to 5 (maximum elevation), and
 correspond to DIPs.
 {: .alert .alert-info }
 
-The `paper-elements` have shadow effects built-in. For example, a 
-`<paper-button>` declared  with the `raised` attribute appears raised 
+The `paper-elements` have shadow effects built-in. For example, a
+`<paper-button>` declared  with the `raised` attribute appears raised
 above the surface it rests on, and raises  up when touched.
 
     <paper-button raised>Raised button</paper-button>
@@ -351,7 +350,7 @@ above the surface it rests on, and raises  up when touched.
 When building your own elements or using standard DOM elements, you can use
 the `<paper-shadow>`  element to create the appropriate shadow effect.
 
-To apply a shadow to an element, simply use a `<paper-shadow>` element as a 
+To apply a shadow to an element, simply use a `<paper-shadow>` element as a
 container. The `<paper-shadow>` element automatically adds a shadow around its contents.
 The `<paper-shadow>` element is `display: block` by default.
 
@@ -376,7 +375,7 @@ The `<paper-shadow>` element is `display: block` by default.
 </paper-shadow>
 
 You can set the **initial** z-height of the target element by setting the `z` attribute on the
-`<paper-shadow>`  element. Z values range from 0 (no shadow) to 5. 
+`<paper-shadow>`  element. Z values range from 0 (no shadow) to 5.
 
 <div layout horizontal>
   <paper-shadow z="1" class="demo-card">
@@ -401,9 +400,9 @@ regardless of the z-heights of  the background elements. In addition, the
 z-height does not affect the stacking order of  elements. To change stacking
 order of sibling elements, use the `z-index` CSS property as  usual.
 
-**Note:** 
+**Note:**
 The `<paper-shadow>` element's behavior changed in version 0.5.0.
-Prior to 0.5.0, the `<paper-shadow>` element added a shadow to its 
+Prior to 0.5.0, the `<paper-shadow>` element added a shadow to its
 _parent element_, and supported changing the z-height by setting the
 `z` property directly.
 {: .alert .alert-info }
@@ -415,33 +414,33 @@ _parent element_, and supported changing the z-height by setting the
 ## Transitions
 
 Support for transitions is rapidly evolving. The `<core-animated-pages>`
-element displays a single child element at a time, and provides support for 
+element displays a single child element at a time, and provides support for
 sophisticated transitions between two children, or _pages_.
 
 You can define a set of transitions to be executed when transitioning between
 pages. To provide visual continuity across transitions, animated pages support
 _hero transitions_, where a selected element on the starting page appears to
 morph into a related element on the ending page. Use hero transitions to link
-important elements together, while using a simpler transition such as a 
+important elements together, while using a simpler transition such as a
 cross-fade for the remaining elements.
 
-For example transitions, see the [`<core-animated-pages>` demos](/components/core-animated-pages/demo.html). 
-The <a href="/apps/topeka/" target="_blank">Topeka sample app</a> also 
+For example transitions, see the [`<core-animated-pages>` demos](/components/core-animated-pages/demo.html).
+The <a href="/apps/topeka/" target="_blank">Topeka sample app</a> also
 demonstrates a number of transitions in context.
 
 ## Scrolling techniques
 
-The [`<core-scroll-header-panel>`](/docs/elements/core-elements.html#core-scroll-header-panel) 
-element supports a number of scrolling effects described in the material 
-design spec, including condensing and expanding the toolbar as the user 
-scrolls and hiding or showing the toolbar. 
+The [`<core-scroll-header-panel>`](/docs/elements/core-elements.html#core-scroll-header-panel)
+element supports a number of scrolling effects described in the material
+design spec, including condensing and expanding the toolbar as the user
+scrolls and hiding or showing the toolbar.
 
-For resizing toolbars, `<core-scroll-header-panel>` lets you define how to 
-transition the toolbar's contents between states &mdash; resizing text, 
-showing or hiding /components, and cross-fading between backgrounds, for 
+For resizing toolbars, `<core-scroll-header-panel>` lets you define how to
+transition the toolbar's contents between states &mdash; resizing text,
+showing or hiding /components, and cross-fading between backgrounds, for
 example.
 
-See the [`<core-scroll-header-panel>` demos](/components/core-scroll-header-panel/demo.html) 
+See the [`<core-scroll-header-panel>` demos](/components/core-scroll-header-panel/demo.html)
 for some examples of the effects possible.
 
 <script>
diff --git a/docs/elements/paper-elements.md b/docs/elements/paper-elements.md
index b711c007b4..285f98020e 100644
--- a/docs/elements/paper-elements.md
+++ b/docs/elements/paper-elements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: elements
-navgroup: elements
 shortname: Elements
 title: Polymer paper elements
 subtitle: material design
@@ -18,7 +17,7 @@ add_permalinks: false
 <div class="hide-on-hash">
 
 
-  <p>The Paper elements are a set of UI elements that implement the 
+  <p>The Paper elements are a set of UI elements that implement the
     <a href="http://google.com/design/spec">material design system</a>.</p>
 
   <component-download-button org="Polymer" component="paper-elements" label="GET THE PAPER ELEMENTS">
diff --git a/docs/polymer/binding-types.md b/docs/polymer/binding-types.md
index 6bc59269e3..1d6b45a3af 100644
--- a/docs/polymer/binding-types.md
+++ b/docs/polymer/binding-types.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Types of bindings
 subtitle: Data-binding
@@ -76,7 +75,7 @@ The simplest format for a repeating template is:
 {% endraw %}
 
 Refer to the current item in `array` using an empty binding expression {%raw%}`{{}}`{%endraw%}, which matches
-the current binding scope. Refer to a property of the current item as {%raw%}`{{<var>propertyname</var>}}`{%endraw%}. 
+the current binding scope. Refer to a property of the current item as {%raw%}`{{<var>propertyname</var>}}`{%endraw%}.
 
 Like the `bind` attribute, the `repeat` attribute supports named scopes:
 
@@ -88,7 +87,7 @@ Like the `bind` attribute, the `repeat` attribute supports named scopes:
     </template>
 {% endraw %}
 
-When using named scopes with the `repeat` attribute, the index value for each 
+When using named scopes with the `repeat` attribute, the index value for each
 item in the array is also available by using the following syntax:
 
 {% raw %}
diff --git a/docs/polymer/databinding-advanced.md b/docs/polymer/databinding-advanced.md
index 2bce8b4d7a..91a6bb089d 100644
--- a/docs/polymer/databinding-advanced.md
+++ b/docs/polymer/databinding-advanced.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Advanced topics
 subtitle: Data-binding
@@ -29,16 +28,16 @@ The entire set of nodes is destroyed and recreated, even if only a few values ch
 
 In contrast, {{site.project_title}} data binding **makes the smallest changes to the DOM necessary**. The DOM nodes representing a template instance are maintained as long as the corresponding model data is in place.
 
-Consider the following DOM, which represents a template and the template instances it manages: 
+Consider the following DOM, which represents a template and the template instances it manages:
 
 {% raw %}
     <table>
         <template repeat="{{item in items}}">
           <tr><td> {{item.name}} </td><td> {{item.count}} </td></tr>
         </template>
-       <tr><td> Bass </td><td> 7 </td></tr>  
-       <tr><td> Catfish </td><td> 8 </td></tr> 
-       <tr><td> Trout </td><td> 0 </td></tr>   
+       <tr><td> Bass </td><td> 7 </td></tr>
+       <tr><td> Catfish </td><td> 8 </td></tr>
+       <tr><td> Trout </td><td> 0 </td></tr>
     </table>
 {% endraw %}
 
@@ -50,9 +49,9 @@ If you re-sort the array by `item.count`, {{site.project_title}} simply swaps th
     &lt;template repeat="{{item in items}}">
       &lt;tr>&lt;td> {{item.name}} &lt;/td>&lt;td> {{item.count}} &lt;/td>&lt;/tr>
     &lt;/template>
-   <span class="nocode"><strong>&lt;tr>&lt;td> Catfish &lt;/td>&lt;td> 8 &lt;/td>&lt;/tr> 
+   <span class="nocode"><strong>&lt;tr>&lt;td> Catfish &lt;/td>&lt;td> 8 &lt;/td>&lt;/tr>
    &lt;tr>&lt;td> Bass &lt;/td>&lt;td> 7 &lt;/td>&lt;/tr></strong></span>
-   &lt;tr>&lt;td> Trout &lt;/td>&lt;td> 0 &lt;/td>&lt;/tr>   
+   &lt;tr>&lt;td> Trout &lt;/td>&lt;td> 0 &lt;/td>&lt;/tr>
 &lt;/table>
 </pre>
 {% endraw %}
@@ -65,9 +64,9 @@ If you change `item.count` for one of the objects, the only thing that changes i
     &lt;template repeat="{{item in items}}">
       &lt;tr>&lt;td> {{item.name}} &lt;/td>&lt;td> {{item.count}} &lt;/td>&lt;/tr>
     &lt;/template>
-   &lt;tr>&lt;td> Catfish &lt;/td>&lt;td> 8 &lt;/td>&lt;/tr> 
-   &lt;tr>&lt;td> Bass &lt;/td>&lt;td> 7 &lt;/td>&lt;/tr>  
-   &lt;tr>&lt;td> Trout &lt;/td>&lt;td><span class="nocode"><strong> 2 </strong></span>&lt;/td>&lt;/tr>   
+   &lt;tr>&lt;td> Catfish &lt;/td>&lt;td> 8 &lt;/td>&lt;/tr>
+   &lt;tr>&lt;td> Bass &lt;/td>&lt;td> 7 &lt;/td>&lt;/tr>
+   &lt;tr>&lt;td> Trout &lt;/td>&lt;td><span class="nocode"><strong> 2 </strong></span>&lt;/td>&lt;/tr>
 &lt;/table>
 </pre>
 {% endraw %}
@@ -87,7 +86,7 @@ The following diagram represents the DOM for a template and its instances:
     &lt;template repeat="{{item in myList}}">
        &lt;img>
       &lt;span>{{item.name}}&lt;/span>
-    &lt;/template>                  
+    &lt;/template>
     &lt;img>
     &lt;span>foo&lt;/span>   <span class="nocode" style="color: red"><em>⇐ terminating node in template instance</em></span>
     &lt;img>
@@ -185,7 +184,7 @@ something like this:
 {% endraw %}
 
 **Note:** In practice, it would be easier and cleaner to set a value on the model and use a conditional
-template. This example just demonstrates how the data binding system handles mutation. 
+template. This example just demonstrates how the data binding system handles mutation.
 {: .alert .alert-info }
 
 
@@ -211,7 +210,7 @@ Clicking on a row results in a DOM change like this (whitespace added for readab
     </section>
 {% endraw %}
 
-Because the template identifies each instance by the terminating node, changes to the 
+Because the template identifies each instance by the terminating node, changes to the
 instance’s state persist even if the template has to reorder its instances:
 
 {% raw %}
@@ -244,16 +243,16 @@ underlying model data changes. The two-way data binding only registers DOM chang
 This {{site.project_title}} data binding works  _inside_ a {{site.project_title}} element. If you
 want to use data binding elsewhere, there are two options:
 
-*   If you're using {{site.project_title}}, use an [auto-binding template](#autobinding) 
+*   If you're using {{site.project_title}}, use an [auto-binding template](#autobinding)
     to take advantage of data binding without creating a new custom element.
 
-*   If you _aren't_ using the rest of {{site.project_title}}, use the 
-    [Template Binding](/docs/polymer/template.html) library directly. The template binding library is 
-    used internally by {{site.project_title}}, and can be used directly, with or without the rest of    
+*   If you _aren't_ using the rest of {{site.project_title}}, use the
+    [Template Binding](/docs/polymer/template.html) library directly. The template binding library is
+    used internally by {{site.project_title}}, and can be used directly, with or without the rest of
     {{site.project_title}}. (Note that if you use template binding by itself, you cannot use {{site.project_title}}
     expressions.)
 
-**Note:** Earlier versions of {{site.project_title}} included an element called `<polymer-body>`. 
+**Note:** Earlier versions of {{site.project_title}} included an element called `<polymer-body>`.
 If you were using `<polymer-body>` previously, the closest substitute is an auto-binding template.
 {: .alert .alert-info }
 
@@ -266,18 +265,18 @@ templates support a subset of the features available when you create your own cu
 
 -   Full-featured data binding, with {{site.project_title}} expressions.
 -   [Declarative event mapping](polymer.html#declarative-event-mapping).
--   [Automatic node finding](/polymer/polymer.html#automatic-node-finding). 
+-   [Automatic node finding](/polymer/polymer.html#automatic-node-finding).
 
-For an auto-binding template, the data model is on the template itself. For example, to use data 
+For an auto-binding template, the data model is on the template itself. For example, to use data
 binding at the top level of a page:
 
-{% include samples/databinding/auto-binding.html %} 
+{% include samples/databinding/auto-binding.html %}
 
 The auto-binding template inserts the instances it creates immediately after
-itself in the DOM tree (_not_ in its shadow DOM). In this case, the quotes are 
+itself in the DOM tree (_not_ in its shadow DOM). In this case, the quotes are
 inserted as children of the `body` element.
 
-After adding the instances, the auto-binding template fires the `template-bound` 
+After adding the instances, the auto-binding template fires the `template-bound`
 event.
 
 The `auto-binding` element is currently included automatically when you load the
diff --git a/docs/polymer/databinding-compat.md b/docs/polymer/databinding-compat.md
index 0378f4ff02..7e035b5167 100644
--- a/docs/polymer/databinding-compat.md
+++ b/docs/polymer/databinding-compat.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Compatibility notes
 subtitle: Data-binding
@@ -12,12 +11,12 @@ subtitle: Data-binding
 
 A few features of native templates can’t be replicated perfectly with the polyfill library, and require some workarounds. These include:
 
-Some browsers don’t allow  `<template>` elements inside certain elements like `<select>` or `<table>`. 
+Some browsers don’t allow  `<template>` elements inside certain elements like `<select>` or `<table>`.
 Binding to certain attributes (such as the `<img>` tag’s `src` attribute) doesn’t work correctly on some browsers that don’t support templates.
 
 ## Elements that can’t contain a template
 
-Until the addition of HTML `<template>`, the `<select>` and `<table>` elements had 
+Until the addition of HTML `<template>`, the `<select>` and `<table>` elements had
 special parser rules to limit the types of children they could contain. Because of these legacy rules, browsers that don't support `<template>` will lift unexpected elements out of context and make them siblings, including `<template>` itself!
 
 For example, the following won't work correctly in browsers that don't support `<template>`:
@@ -68,7 +67,7 @@ Another example using `<select>`/`<option>`:
 
 If your users are using browsers that don't support `<template>`, use the `template`
 attribute on these special elements:
-    
+
 * `caption`
 * `col`
 * `colgroup`
@@ -83,7 +82,7 @@ attribute on these special elements:
 
 **Note:** browsers with native support for `<template>` allow it to be a child
 of elements `<select>` and `<table>`. If you know your users are using a browser
-with support, you can use the standard template 
+with support, you can use the standard template
 {: .alert .alert-info }
 
 
@@ -97,7 +96,7 @@ with support, you can use the standard template
 
 ## Binding to attributes
 
-Binding expressions to certain attributes can produce side effects in browsers that don't implement `<template>` natively. 
+Binding expressions to certain attributes can produce side effects in browsers that don't implement `<template>` natively.
 For example, running {% raw %}`<img src="/users/{{id}}.jpg">`{% endraw %} under the polyfill produces a network request that 404s.
 
 In addition, browsers such as IE sanitize certain attributes, disallowing {% raw %}`{{}}`{% endraw %} replacements in their text.
diff --git a/docs/polymer/databinding.md b/docs/polymer/databinding.md
index 3d7157dda4..3144702dcc 100644
--- a/docs/polymer/databinding.md
+++ b/docs/polymer/databinding.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Data binding overview
 subtitle: Data-binding
@@ -42,33 +41,33 @@ This is **June**'s name-tag element.
 
 ## The `<template>` element {#template}
 
-The HTML Template element allows you to declare chunks of inert HTML that can be cloned and used at some later point. The contents of the `<template>` element are _hidden_ in the sense that they aren't rendered in the browser and can't be retrieved by `querySelector`; and _inactive_ in the sense that they don't cause resources to be loaded or scripts to be run. 
+The HTML Template element allows you to declare chunks of inert HTML that can be cloned and used at some later point. The contents of the `<template>` element are _hidden_ in the sense that they aren't rendered in the browser and can't be retrieved by `querySelector`; and _inactive_ in the sense that they don't cause resources to be loaded or scripts to be run.
 
 In {{site.project_title}}, templates have two special purposes:
 
-*   In a {{site.project_title}} element declaration, the first (top-level) `<template>` element is used 
-    to define the custom element's shadow DOM. 
+*   In a {{site.project_title}} element declaration, the first (top-level) `<template>` element is used
+    to define the custom element's shadow DOM.
 
-*   Inside a {{site.project_title}} element, you can use templates with data binding to render dynamic 
-   content. 
+*   Inside a {{site.project_title}} element, you can use templates with data binding to render dynamic
+   content.
 
 **Note:** The `<template>` element is a new element in the HTML standard. For information on using templates
-_outside_ of {{site.project_title}}, see [HTML's New  Template Tag](http://www.html5rocks.com/tutorials/webcomponents/template/) 
-on HTML5Rocks. 
+_outside_ of {{site.project_title}}, see [HTML's New  Template Tag](http://www.html5rocks.com/tutorials/webcomponents/template/)
+on HTML5Rocks.
 {: .alert .alert-info }
 
 ## Templates with data binding
 
-Templates by themselves are useful. {{site.project_title}} adds declarative, two-way data 
+Templates by themselves are useful. {{site.project_title}} adds declarative, two-way data
 binding to templates. Data binding lets you assign, or bind, a JavaScript object as the template’s _data model_.  A bound template can:
 
-*   Maintain a single copy of the template’s contents (a _template instance_). The template 
+*   Maintain a single copy of the template’s contents (a _template instance_). The template
     instance is inserted in the DOM tree as a sibling of the original template.
 
-*   Maintain  a _set of template instances_ for each item in an array, where each instance is 
+*   Maintain  a _set of template instances_ for each item in an array, where each instance is
     bound to an item in the array.
 
-*   Maintain two-way _bindings_ inside each template instance between values in DOM nodes 
+*   Maintain two-way _bindings_ inside each template instance between values in DOM nodes
      and the model data bound to the instance.
 
 To see how this works, here's an example {{site.project_title}} element that uses data binding:
@@ -103,7 +102,7 @@ To see how this works, here's an example {{site.project_title}} element that use
 
 As usual, this custom element includes an outer `<template>` element to define its shadow DOM, as shown in [Element declaration](polymer.html#element-declaration).
 
-Inside that template, there's a second template that contains 
+Inside that template, there's a second template that contains
 expressions surrounded by double-mustache {%raw%}`{{`&nbsp;`}}`{%endraw%} symbols:
 
 {%raw%}
@@ -114,17 +113,17 @@ expressions surrounded by double-mustache {%raw%}`{{`&nbsp;`}}`{%endraw%} symbol
 
 What's going on in this template?
 
-*  The {%raw%}`repeat="{{s in salutations}}"`{%endraw%} tells the template to 
-    generate a DOM fragment (or instance) for each element in the `salutations` 
-    array. 
+*  The {%raw%}`repeat="{{s in salutations}}"`{%endraw%} tells the template to
+    generate a DOM fragment (or instance) for each element in the `salutations`
+    array.
 
-*   The contents of the template define what each instance looks like. 
-    In this case, it contains a `<li>` with a text node and an `<input>` as its children. 
+*   The contents of the template define what each instance looks like.
+    In this case, it contains a `<li>` with a text node and an `<input>` as its children.
 
-*   The expressions {%raw%}`{{s.what}}`{%endraw%} and {%raw%}`{{s.who}}`{%endraw%} create 
-    data bindings to objects in the `salutations` array. 
+*   The expressions {%raw%}`{{s.what}}`{%endraw%} and {%raw%}`{{s.who}}`{%endraw%} create
+    data bindings to objects in the `salutations` array.
 
-The values inside the {%raw%}`{{`&nbsp;`}}`{%endraw%} are <em>{{site.project_title}} expressions</em>. In the examples in this section, the expressions are either  JavaScript objects (like `salutations`) or paths (like `salutations.who`). (Expressions can also include literal values and some operators -- 
+The values inside the {%raw%}`{{`&nbsp;`}}`{%endraw%} are <em>{{site.project_title}} expressions</em>. In the examples in this section, the expressions are either  JavaScript objects (like `salutations`) or paths (like `salutations.who`). (Expressions can also include literal values and some operators --
 see [Expressions](#expressions) for details.)
 
 When you create a `<greeting-tag>` element, it initializes the `salutations` array:
@@ -136,7 +135,7 @@ When you create a `<greeting-tag>` element, it initializes the `salutations` arr
       {what: 'Goodbye', who: 'Imperative'}
     ];
 
-Notice that this is just JavaScript data: **there's no need to import your data into special observable objects**. The `this.salutations` array serves as the _model_ for the template. 
+Notice that this is just JavaScript data: **there's no need to import your data into special observable objects**. The `this.salutations` array serves as the _model_ for the template.
 
 The template is set in motion when you create or modify the model. Here's the result:
 
@@ -146,7 +145,7 @@ and here's what the DOM looks like:
 
 ![ScreenShot](/images/databinding/example-1-dom.png)
 
-You can see that the template created four instances immediately following its position in the document. 
+You can see that the template created four instances immediately following its position in the document.
 
 
 ## Dynamic, two-way data binding
@@ -160,24 +159,24 @@ However, the DOM doesn't just observe data in the model. When you bind a DOM ele
 
 ![ScreenShot](/images/databinding/input-to-model.png)
 
-**Note:** You can use [change watchers and observe blocks](polymer.html#observeprops) to trigger 
-custom behavior when the model data changes. 
+**Note:** You can use [change watchers and observe blocks](polymer.html#observeprops) to trigger
+custom behavior when the model data changes.
 {: .alert .alert-info }
 
 Lastly, see what happens when you add and remove items from the `salutations` array:
 
 ![ScreenShot](/images/databinding/update-model-array.png)
 
-The `repeat` attribute ensures there is one instance for each item in the 
-array. We removed two elements from the middle of `salutations` and inserted one in their place. The 
+The `repeat` attribute ensures there is one instance for each item in the
+array. We removed two elements from the middle of `salutations` and inserted one in their place. The
 `<template>` responded by removing the two corresponding instances and creating a new one in the right location.
 
-Getting the idea? Data binding allows you author your HTML _using_ HTML which contains information about 
+Getting the idea? Data binding allows you author your HTML _using_ HTML which contains information about
 _where data goes_ and directives which _control the document's structure_ -- all depending on the data you provide it.
 
 ## Event handling and data binding
 
-With data binding, it’s easy to add event handlers using the 
+With data binding, it’s easy to add event handlers using the
 [declarative event mapping](polymer.html#declarative-event-mapping) (on-_event_ handlers):
 
 {%raw%}
@@ -190,12 +189,12 @@ With data binding, it’s easy to add event handlers using the
     </template>
 {%endraw%}
 
-Often, you’ll want to identify the event with the model data used to generate 
-the template instance, either to update the model data or to access a piece 
+Often, you’ll want to identify the event with the model data used to generate
+the template instance, either to update the model data or to access a piece
 of data that isn’t rendered by the template.
 
-You can get the model data from the event’s `target.templateInstance.model` 
-property. Any identifiers that you could access inside the template are 
+You can get the model data from the event’s `target.templateInstance.model`
+property. Any identifiers that you could access inside the template are
 available as properties on the `.model` object.
 
 For example, the  `selectStory` method might look like this:
diff --git a/docs/polymer/debugging.md b/docs/polymer/debugging.md
index 7c1f2141df..d74c0301c8 100644
--- a/docs/polymer/debugging.md
+++ b/docs/polymer/debugging.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Debugging tips and tricks
 subtitle: Guide
@@ -29,7 +28,7 @@ Many of the techniques described here can be used on browsers without native web
 
 ## Inspecting HTML imports
 
-To see the contents of an HTML import in the **Elements** panel, expand the `<link>` tag in the DOM tree view. 
+To see the contents of an HTML import in the **Elements** panel, expand the `<link>` tag in the DOM tree view.
 The import contents appear as a nested `#document` node.
 
 ![HTML import link expanded in DevTools Elements panel](/images/debugging/html-import.png)
@@ -38,7 +37,7 @@ To open the imported file in the **Sources** panel, click the URL in the link.
 
 ![HTML import link with URL highlighted](/images/debugging/html-import-link.png)
 
-For elements with separate script files, the script file should be alongside the HTML file in the **Sources** panel.  
+For elements with separate script files, the script file should be alongside the HTML file in the **Sources** panel.
 
 You can set breakpoints in inline scripts inside an HTML import.
 
@@ -61,7 +60,7 @@ In Chrome, the resulting DOM tree looks like this:
 
 ![DevTools showing DOM for custom element](/images/debugging/custom-element.png)
 
-The template contents show up inside the shadow tree, under `#shadow-root`. 
+The template contents show up inside the shadow tree, under `#shadow-root`.
 
 On a browser that doesn't support shadow DOM, there is no `#shadow-root` node. The nodes that would be in the shadow tree appear as direct children of the custom element in the element or inspector view.
 
@@ -83,17 +82,17 @@ For more details, see [Shadow DOM polyfill](#shadowdom).
 
 When debugging Polymer applications, one frequent problem is unregistered elements. There are two common problems that cause unregistered elements:
 
--   Missing or incorrect HTML import statement for a custom element. In this case, the element 
+-   Missing or incorrect HTML import statement for a custom element. In this case, the element
     shows up in the DOM as a simple element, with no shadow DOM. The element may still be rendered,
     but without the custom element's styling and behavior. The rest of the page should render normally.
 
--   Missing call to `Polymer` or an incorrect tag name in the `Polymer` call. By design, Polymer waits 
-    until all element definitions are complete before registering any elements. This ensures that all 
+-   Missing call to `Polymer` or an incorrect tag name in the `Polymer` call. By design, Polymer waits
+    until all element definitions are complete before registering any elements. This ensures that all
     elements have been registered before the `polymer-ready` event fires, _even if some calls to `Polymer` are
     made in asynchronous scripts._
-    
-    However, if the `Polymer` call is missing for one element, none of the Polymer elements are registered. 
-    The `polymer-ready` event never fires, and the screen is frequently blank, since none of the Polymer elements render properly. 
+
+    However, if the `Polymer` call is missing for one element, none of the Polymer elements are registered.
+    The `polymer-ready` event never fires, and the screen is frequently blank, since none of the Polymer elements render properly.
 
 For example, the mismatched tag name in the following element causes Polymer to block element registration:
 
@@ -105,10 +104,10 @@ For example, the mismatched tag name in the following element causes Polymer to
            Polymer('wrong-name', { … });
          </script>
      </polymer-element>
-                 
+
 There are several things you can do to reduce the amount of time you spend looking for unregistered elements.
 
-### Avoid mismatched tag names 
+### Avoid mismatched tag names
 
 Wherever possible, omit the tag name from the `Polymer` call. Since Polymer 0.4.0, the tag name can be omitted whenever the `<script>` tag that invokes `Polymer` is inside the `<polymer-element>` tag. Removing the duplicate tag name avoids many potential errors.
 
@@ -123,9 +122,9 @@ The bookmarklet checks for element that look like custom elements, but have the
     <paper-button>Button</paper-button>
     <form is="ajax-form"></form>
 
-Since this method doesn't use any Polymer APIs, it works for any custom element, Polymer or otherwise. 
+Since this method doesn't use any Polymer APIs, it works for any custom element, Polymer or otherwise.
 
-To add the bookmarklet to your browser, drag the <a class="bookmarklet" href="javascript:(function(){function isUnregisteredCustomElement(el){if(el.constructor==HTMLElement){console.error('Found unregistered custom element:',el);return true;}return false;}function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}var allCustomElements=document.querySelectorAll('html /deep/ *');allCustomElements=Array.prototype.slice.call(allCustomElements).filter(function(el){return isCustomEl(el);});var foundSome=false;for(var i=0,el;el=allCustomElements[i];++i){if(isUnregisteredCustomElement(el)){foundSome=true;}}if(foundSome){alert('Oops: found one or more unregistered custom elements in use! Check the console.');}else{alert('Good: All custom elements are registered :)');}})();"><core-icon icon="bookmark"></core-icon> Unregistered Elements Bookmarklet</a> 
+To add the bookmarklet to your browser, drag the <a class="bookmarklet" href="javascript:(function(){function isUnregisteredCustomElement(el){if(el.constructor==HTMLElement){console.error('Found unregistered custom element:',el);return true;}return false;}function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}var allCustomElements=document.querySelectorAll('html /deep/ *');allCustomElements=Array.prototype.slice.call(allCustomElements).filter(function(el){return isCustomEl(el);});var foundSome=false;for(var i=0,el;el=allCustomElements[i];++i){if(isUnregisteredCustomElement(el)){foundSome=true;}}if(foundSome){alert('Oops: found one or more unregistered custom elements in use! Check the console.');}else{alert('Good: All custom elements are registered :)');}})();"><core-icon icon="bookmark"></core-icon> Unregistered Elements Bookmarklet</a>
 link to the bookmarks toolbar or Favorites bar. (The bookmarks toolbar or Favorites bar must already be displayed.)
 
 
@@ -134,15 +133,15 @@ You can see the complete code for the bookmarklet here:
 [https://gist.github.com/ebidel/cea24a0c4fdcda8f8af2](https://gist.github.com/ebidel/cea24a0c4fdcda8f8af2)
 
 
-Click the bookmark to check the current page for unregistered elements. The bookmarklet displays an alert showing the 
+Click the bookmark to check the current page for unregistered elements. The bookmarklet displays an alert showing the
 page status. In the case of missing imports, more detailed information is logged to the console.
 
 -   In the case of a missing HTML import, the bookmarklet lists the element with a missing import.
 
--   In the case of a missing `Polymer` call, the bookmarklet lists _all_ of the Polymer elements, since none of them are registered. 
+-   In the case of a missing `Polymer` call, the bookmarklet lists _all_ of the Polymer elements, since none of them are registered.
     (The next section describes how to use the new `Polymer.waitingFor` method to pinpoint exactly which element is causing the problems.)
 
-**Note:** The bookmarklet returns false positives for tags that include a dash but _aren't_ custom elements, such as Angular directives. 
+**Note:** The bookmarklet returns false positives for tags that include a dash but _aren't_ custom elements, such as Angular directives.
 {: .alert .alert-info }
 
 ### Polymer waitingFor and forceReady methods
@@ -151,11 +150,11 @@ Polymer 0.4.1 introduced a pair of new methods, `Polymer.waitingFor` and `Polyme
 
 ![DevTools console showing Polymer.waitingFor call and output](/images/debugging/waitingfor.png)
 
-Note that `waitingFor` returns a list of _elements_, not element names. 
+Note that `waitingFor` returns a list of _elements_, not element names.
 
-The `waitingFor` method does not report elements that are missing HTML imports, or misspelled tags. 
+The `waitingFor` method does not report elements that are missing HTML imports, or misspelled tags.
 
-`Polymer.forceReady` causes Polymer to stop waiting and immediately register any elements that are ready to register. 
+`Polymer.forceReady` causes Polymer to stop waiting and immediately register any elements that are ready to register.
 
 When debugging, you could add a script that logs unregistered elements, then forces the ready state, like this:
 
@@ -180,9 +179,9 @@ If page loading stalls, you can invoke this from the console:
 
 ## Inspecting data-bound nodes
 
-When working with [data binding](/docs/polymer/databinding.html), a lot of data is available if you know where to look. The examples in this section show DevTools, but with minor modifications, will work in Firefox, 
+When working with [data binding](/docs/polymer/databinding.html), a lot of data is available if you know where to look. The examples in this section show DevTools, but with minor modifications, will work in Firefox,
 
-DOM nodes generated by data binding appear immediately after the generating template. 
+DOM nodes generated by data binding appear immediately after the generating template.
 
 In the case of nested templates, copies of the inner templates appear in the DOM before their generated content. For example, consider the following element:
 
@@ -200,7 +199,7 @@ In the case of nested templates, copies of the inner templates appear in the DOM
       <script>
         Polymer({
           created: function() {
-            this.list = [ 
+            this.list = [
               {name: 'hits', fields: [1, 2, 3]},
               {name: 'misses', fields: [7, 0, 10]}
             ];
@@ -217,10 +216,10 @@ This generates a DOM structure like the following:
 
 The numbers in the diagram identify elements of the DOM structure:
 
-1.  Root of the element's shadow DOM tree. 
-2.  Outer `<template repeat>`. 
+1.  Root of the element's shadow DOM tree.
+2.  Outer `<template repeat>`.
 3.  DOM nodes generated by the outer `<template repeat>`. Highlighted box shows the nodes representing the first item.
-4.  Inner `<template repeat>`. Note that one copy appears in the DOM for each item in the outer `<template repeat>`. 
+4.  Inner `<template repeat>`. Note that one copy appears in the DOM for each item in the outer `<template repeat>`.
 5.  Generated DOM nodes from the inner `<template repeat>`.
 
 To inspect the data bound to a template:
@@ -263,7 +262,7 @@ The following sections provide some hints for debugging Polymer elements on brow
 
 ### HTML Imports polyfill
 
-The HTML Imports polyfill loads imports using `XMLHttpRequest`. External scripts inside an import are loaded normally. Inline scripts inside an import are transformed into data URLs. Each debugger displays these data URLs differently. For example, in Safari Web Inspector, look in the **Resources** tab for URLs starting with `data:text/javascript;`. 
+The HTML Imports polyfill loads imports using `XMLHttpRequest`. External scripts inside an import are loaded normally. Inline scripts inside an import are transformed into data URLs. Each debugger displays these data URLs differently. For example, in Safari Web Inspector, look in the **Resources** tab for URLs starting with `data:text/javascript;`.
 
 To debug a custom element from an HTML import, find and open the corresponding script file or data URL. You can then set breakpoints, watch expressions, and so forth.
 
@@ -274,7 +273,7 @@ The Shadow DOM polyfill wraps each DOM node with a wrapper object. The wrapper e
 The debugger typically returns references to the un-wrapped native DOM nodes, so you cannot invoke the Polymer methods directly from the Console.
 Some rarely-used native DOM methods and properties aren't exposed on the wrapped object.
 
-The Shadow DOM polyfill provides `wrap` and `unwrap` functions to transform between wrapped and unwrapped nodes. 
+The Shadow DOM polyfill provides `wrap` and `unwrap` functions to transform between wrapped and unwrapped nodes.
 
 For example, when examining a Polymer element, you can use `wrap` in the console to access Polymer properties and methods:
 
diff --git a/docs/polymer/expressions.md b/docs/polymer/expressions.md
index bcf7b886af..a4ca7b2cf8 100644
--- a/docs/polymer/expressions.md
+++ b/docs/polymer/expressions.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Expressions
 subtitle: Data-binding
diff --git a/docs/polymer/filters.md b/docs/polymer/filters.md
index 4ec26b4774..4bd40341e5 100644
--- a/docs/polymer/filters.md
+++ b/docs/polymer/filters.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Filters
 subtitle: Data-binding
diff --git a/docs/polymer/helpers.md b/docs/polymer/helpers.md
index 3aa44b084a..8052322f53 100644
--- a/docs/polymer/helpers.md
+++ b/docs/polymer/helpers.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Polymer helper methods
 subtitle: Guide
@@ -15,7 +14,7 @@ element, such as dynamically importing files, using mixins, and managing element
 
 ## Using dynamic HTML imports
 
-The `Polymer.import` method can be used to dynamically import one or more HTML files: 
+The `Polymer.import` method can be used to dynamically import one or more HTML files:
 
 <pre>
 Polymer.import(<var>urls</var>, <var>callback</var>);
@@ -69,19 +68,19 @@ You can dynamically load it like this:
     </html>
 
 The `<dynamic-element>` in `index.html` is parsed as a generic `HTMLElement`.
-When you click the button, the import is loaded and the `<dynamic-element>` 
+When you click the button, the import is loaded and the `<dynamic-element>`
 instance is upgraded to a custom element.
 
-You can think of the `import` callback as equivalent to the `polymer-ready` event on page load. 
+You can think of the `import` callback as equivalent to the `polymer-ready` event on page load.
 When the callback is invoked, all of the newly-imported elements are ready to use.
 
-As on initial page load, if any element is lacking a corresponding `Polymer` call, it 
-blocks registration of _all_ elements, which means the callback is never invoked. See 
+As on initial page load, if any element is lacking a corresponding `Polymer` call, it
+blocks registration of _all_ elements, which means the callback is never invoked. See
 [Hunting down unregistered elements](/docs/polymer/debugging.html#unregistered) for information
 on diagnosing problems with element registration.
 
-**Note:** {{site.project_title}} provides a related mechanism: `HTMLImports.whenReady(callback)`. 
-The callback is invoked when all of the imports in the document have finished loading. 
+**Note:** {{site.project_title}} provides a related mechanism: `HTMLImports.whenReady(callback)`.
+The callback is invoked when all of the imports in the document have finished loading.
 (Not including any imports added to the document _after_ calling `whenReady`.)
 {: .alert .alert-info }
 
@@ -100,7 +99,7 @@ You can use `mixin` to share functionality between custom elements, by creating
         // ...
       }
     }
-     
+
     <polymer-element name="my-element">
     <script>
       Polymer(Polymer.mixin({
@@ -111,8 +110,8 @@ You can use `mixin` to share functionality between custom elements, by creating
 
 The `mixin` method makes a shallow copy of the mixin objects, and doesn't attempt to merge nested objects.
 
-Since mixin objects are ordinary JavaScript objects, you can do anything with them that you'd do with an 
-ordinary object. For example, to share a mixin across multiple custom elements in separate HTML imports, 
+Since mixin objects are ordinary JavaScript objects, you can do anything with them that you'd do with an
+ordinary object. For example, to share a mixin across multiple custom elements in separate HTML imports,
 place the mixin in an HTML import and assign the mixin to a global variable:
 
 `shared-mixin.html`:
@@ -135,7 +134,7 @@ place the mixin in an HTML import and assign the mixin to a global variable:
     </script>
     </polymer-element>
 
-## Forcing element registration  
+## Forcing element registration
 
 By default, {{site.project_title}} waits until all elements are ready before registering and upgrading them.
 If one `<polymer-element>` tag is missing its corresponding `Polymer` call (and doesn't have the `noscript` attribute),
@@ -143,7 +142,7 @@ it blocks all elements from registering.
 
 The `Polymer.waitingFor` helper returns a list of `<polymer-element>` tags that are blocking registration.
 
-`Polymer.forceReady` notifies {{site.project_title}} to register all available elements immediately, ignoring any 
+`Polymer.forceReady` notifies {{site.project_title}} to register all available elements immediately, ignoring any
 incomplete elements.
 
 For more details and example usage, see [Hunting down unregistered elements](/docs/polymer/debugging.html#unregistered).
diff --git a/docs/polymer/layout-attrs.md b/docs/polymer/layout-attrs.md
index e55bd0bc25..f9b00b00fc 100644
--- a/docs/polymer/layout-attrs.md
+++ b/docs/polymer/layout-attrs.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Layout attributes
 subtitle: Guide
@@ -58,7 +57,7 @@ You can specify `horizontal`, `vertical` to change the orientation:
   <div>Two</div>
   <div>Three</div>
 </div>
-    
+
 ### Flexible children
 
 Children of an element using the `layout` attribute can use `flex` attributes to control their own sizing. For example:
@@ -150,7 +149,7 @@ By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching i
   <div>Stretch Fill</div>
 </div>
 
-Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout) 
+Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout)
 by adding `center`.
 
     <div horizontal layout center>
@@ -174,7 +173,7 @@ You can also position at the top/bottom (or left/right in `vertical` layouts) us
     <div horizontal layout end>
       <div>end</div>
     </div>
-    
+
 <div horizontal layout end class="demo tall">
   <div>end</div>
 </div>
@@ -302,7 +301,7 @@ up the entire viewport by adding the `fullbleed` attribute:
 
 <iframe src="/samples/layout-attr.html" style="width: 100%; height: 150px;border:1px solid black"></iframe>
 
-This removes its margins and maximizes its height to the viewport. 
+This removes its margins and maximizes its height to the viewport.
 
 ## General purpose attributes
 
diff --git a/docs/polymer/node_bind.md b/docs/polymer/node_bind.md
index 2f058e3553..e335fdac5a 100644
--- a/docs/polymer/node_bind.md
+++ b/docs/polymer/node_bind.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Node.bind()
 subtitle: Library
@@ -43,7 +42,7 @@ When the value in `path.to.value` changes, `Node.bind()` keeps `.textContent` up
 The meaning of the binding name is interpreted by the node on which `bind()` is called.
 Some elements have special properties which can be two-way data bound:
 
-- `Text` node - only handles bindings on its `textContent` property. 
+- `Text` node - only handles bindings on its `textContent` property.
 - `HTMLInputElement` - handles bindings on its `value` and `checked` properties.
 - `HTMLTextareaElement` - handles bindings on its `value` property.
 - `HTMLSelectElement` - handles bindings on its `value` and `selectedIndex` properties.
diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index 571190c853..0b7b49ca72 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: API developer guide
 subtitle: Guide
@@ -266,12 +265,12 @@ techniques like anonymous self-calling functions:
 There are times when you may want to define properties of an application globally,
 and then make them available inside all of your elements. For example:
 
-- A single easing curve for all animations. 
+- A single easing curve for all animations.
 - Information about the currently logged-in user that you consider "global".
 
-To achieve this, you can use the [MonoState Pattern](http://c2.com/cgi/wiki?MonostatePattern). 
-When defining a {{site.project_title}} element, define a closure that closes over the variables 
-in question, and then provide accessors on the object's prototype or copy them over to individual 
+To achieve this, you can use the [MonoState Pattern](http://c2.com/cgi/wiki?MonostatePattern).
+When defining a {{site.project_title}} element, define a closure that closes over the variables
+in question, and then provide accessors on the object's prototype or copy them over to individual
 instances in the `ready` callback.
 
     <polymer-element name="app-globals">
@@ -292,7 +291,7 @@ instances in the `ready` callback.
       </script>
     </polymer-element>
 
-Then use the `<app-globals>` element as you would any other. You can access its properties 
+Then use the `<app-globals>` element as you would any other. You can access its properties
 using {{site.project_title}} data binding or plain JavaScript:
 
     <polymer-element name="my-component">
@@ -303,8 +302,8 @@ using {{site.project_title}} data binding or plain JavaScript:
       </template>
       <script>
         Polymer({
-          ready: function() { 
-            console.log('Last name: ' + this.$.globals.lastName); 
+          ready: function() {
+            console.log('Last name: ' + this.$.globals.lastName);
           }
         });
       </script>
@@ -336,13 +335,13 @@ The main page configures the globals by passing attributes:
     <app-globals firstname="Addy" lastname="Osmani"></app-globals>
 
 This second version of `app-globals` has a slightly different API than
-the first. The global variables are properties of the `values` object instead of 
-direct properties of `app-globals`. Setting values using attributes imposes two 
+the first. The global variables are properties of the `values` object instead of
+direct properties of `app-globals`. Setting values using attributes imposes two
 limitations: the values must be strings, and the variable names are lowercase.
-(See [Attribute case sensitivity](#attrcase) for more information.) 
+(See [Attribute case sensitivity](#attrcase) for more information.)
 
 To use this `<app-globals>` element with the previous `<my-component>` example,
-you'd need to update the paths that refer to the global variables (for example 
+you'd need to update the paths that refer to the global variables (for example
 `$.globals.values.lastname` instead of `$.globals.lastName`).
 
 ### Element lifecycle methods {#lifecyclemethods}
@@ -480,7 +479,7 @@ By default, properties defined in `attributes` are initialized to `undefined`:
 
 Specifically, {{site.project_title}} adds `foo` to the element's prototype with a value of `undefined`.
 
-**Note:** Prior to {{site.project_title}} 0.3.5, properties were initialized to 
+**Note:** Prior to {{site.project_title}} 0.3.5, properties were initialized to
 `null` by default.
 {: .alert .alert-info }
 
@@ -711,7 +710,7 @@ For more information see the [Data binding overview](databinding.html).
 
 ### Computed properties
 
-Computed properties are dynamic properties that are computed 
+Computed properties are dynamic properties that are computed
 based on other property values. You can also publish a computed
 property, so it can be data bound outside the element.
 
@@ -724,27 +723,27 @@ element's prototype:
 }</b>
 </pre>
 
-Each computed property is defined by a property name and a 
+Each computed property is defined by a property name and a
 [Polymer expression](/docs/polymer/expressions.html). The value
-of the computed property is updated dynamically whenever one of 
-the input values in the expression changes. 
+of the computed property is updated dynamically whenever one of
+the input values in the expression changes.
 
 In the following example, when you update the input value,
 `num`, the computed property `square` updates automatically.
 
 {% include samples/computed-property.html %}
 
-Computed properties are read-only: for example, setting 
+Computed properties are read-only: for example, setting
 the `square` property on `square-element` has no effect.
 
 You can publish a computed property like any other property,
 by adding it to the `attributes` list or to the `publish` object.
 Any default value specified in the `publish` object is ignored.
 
-**Limitations**: In {{site.project_title}} 0.4.0 and earlier, computed properties 
+**Limitations**: In {{site.project_title}} 0.4.0 and earlier, computed properties
 couldn't be published.
 For example, you couldn't bind to the `square` property on `square-element` using
- `<square-element square="{%raw%}{{value}}{%endraw%}>`. 
+ `<square-element square="{%raw%}{{value}}{%endraw%}>`.
 {: .alert .alert-warning }
 
 ### Declarative event mapping
@@ -928,12 +927,12 @@ It's important to note that **{{site.project_title}} does not call the <code><em
 
 ### Automatic node finding
 
-Another useful feature of {{site.project_title}} is automatic node finding. 
-Nodes in a component's shadow DOM that are tagged with an 
+Another useful feature of {{site.project_title}} is automatic node finding.
+Nodes in a component's shadow DOM that are tagged with an
 `id` attribute are automatically referenced in the component's `this.$` hash.
 
-**Note:** Nodes created dynamically using data binding are _not_ added to the 
-`this.$` hash. The hash includes only _statically_ created shadow DOM nodes 
+**Note:** Nodes created dynamically using data binding are _not_ added to the
+`this.$` hash. The hash includes only _statically_ created shadow DOM nodes
 (that is, the nodes defined in the element's outermost template).
 {: .alert .alert-warning }
 
@@ -952,7 +951,7 @@ For example, the following defines a component whose template contains an `<inpu
       </script>
     </polymer-element>
 
-To locate other nodes inside the element's shadow DOM, you can create a 
+To locate other nodes inside the element's shadow DOM, you can create a
 container element with a known ID and use `querySelector` to retrieve
 descendants. For example, if your element's template looks like this:
 
diff --git a/docs/polymer/runtime-config.md b/docs/polymer/runtime-config.md
index 77bbc98070..1869f99d4d 100644
--- a/docs/polymer/runtime-config.md
+++ b/docs/polymer/runtime-config.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Runtime configuration
 ---
@@ -15,7 +14,7 @@ Flags can be used in combination with each other and settable three different wa
 
 1. as attributes on the `<script>` tag that loads `webcomponents.js`
 2. as URL query parameter
-3. directly on the `Platform.flags` object before loading `webcomponents.js`. 
+3. directly on the `Platform.flags` object before loading `webcomponents.js`.
 
 ## Debug flags
 
diff --git a/docs/polymer/styling.md b/docs/polymer/styling.md
index 1a6d6a85d1..b949d7a6df 100644
--- a/docs/polymer/styling.md
+++ b/docs/polymer/styling.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Styling elements
 subtitle: Guide
diff --git a/docs/polymer/template.md b/docs/polymer/template.md
index ed04413d61..208398dc7b 100644
--- a/docs/polymer/template.md
+++ b/docs/polymer/template.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Template Binding
 subtitle: Library
@@ -112,7 +111,7 @@ a model set using the `bind` attribute, call `template.unbind('bind')`:
         salutations: { what: 'GoodBye', who: 'Imperative' }
       };
       t.model = model;
-        
+
       function removeGo() {
         t.unbind('bind');
       }
@@ -123,4 +122,4 @@ a model set using the `bind` attribute, call `template.unbind('bind')`:
 
 Please refer to the [HowTo examples](https://github.com/Polymer/TemplateBinding/tree/master/examples/how_to).
 
-{% include other-resources.html %}
\ No newline at end of file
+{% include other-resources.html %}
diff --git a/docs/polymer/touch.md b/docs/polymer/touch.md
index a4c53e6c45..19db923f19 100644
--- a/docs/polymer/touch.md
+++ b/docs/polymer/touch.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: core
-navgroup: docs
+type: guide
 shortname: Docs
 title: Touch &amp; gestures
 subtitle: Guide
diff --git a/docs/start/creatingelements.md b/docs/start/creatingelements.md
index 6ac59af25a..2fbd032f56 100644
--- a/docs/start/creatingelements.md
+++ b/docs/start/creatingelements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: start
-navgroup: start
 shortname: Start
 title: Creating elements
 subtitle: Polymer from the inside
diff --git a/docs/start/customelements.md b/docs/start/customelements.md
index 0361dda15a..d0fdd2375a 100644
--- a/docs/start/customelements.md
+++ b/docs/start/customelements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: start
-navgroup: start
 shortname: Start
 title: Custom elements 101
 subtitle: Learn about the foundation of Polymer-based apps
@@ -64,7 +63,7 @@ The `<core-selector>` element is a good example of a basic custom element. It's
 Polymer divides its custom  elements into two categories based on their use and behavior:
 
 - UI elements, which render UI to the screen.
-- Non-UI elements, which provide other utilities. 
+- Non-UI elements, which provide other utilities.
 
 ###  UI elements {#uielements}
 
@@ -76,7 +75,7 @@ Elements like `<select>` and `<core-selector>` are _UI elements_. They render UI
       <paper-tab>Three</paper-tab>
     </paper-tabs>
 
-<!-- 
+<!--
 <iframe src="/components/paper-tabs/demo.html" style="border:none;height:80px;width:100%;"></iframe> -->
 
 ### Non-UI elements {#nonuielements}
diff --git a/docs/start/everything.md b/docs/start/everything.md
index d7e36f0cd4..f4e240e9e6 100644
--- a/docs/start/everything.md
+++ b/docs/start/everything.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: concepts
-navgroup: start
+type: start
 shortname: Concepts
 title: Understanding Polymer
 subtitle: The concepts and layering
@@ -17,7 +16,7 @@ The philosophy that "_Everything is an element_" is core to understanding {{site
 
 Ever since the beginning of the web, browsers have shipped with a default set of elements. Most of them, like `<div>`, didn't do very much. But some elements are quite powerful. Consider the humble `<select>`. We take it for granted, but it's actually pretty impressive:
 
-- **Functional**. The browser already knows what to do with a `<select>` element. When it encounters `<select>` in markup it creates an interactive control for the user. 
+- **Functional**. The browser already knows what to do with a `<select>` element. When it encounters `<select>` in markup it creates an interactive control for the user.
 - **Reusable**. The `<select>` element is a reusable package of functionality that you don’t have to implement yourself.
 - **Interoperable**. Every JavaScript library knows how to interact with DOM elements.
 - **Encapsulated**. It keeps its internals all tucked away, so including one won't break the rest of your page.
diff --git a/docs/start/getting-the-code.md b/docs/start/getting-the-code.md
index df79977b71..3f0943bf34 100644
--- a/docs/start/getting-the-code.md
+++ b/docs/start/getting-the-code.md
@@ -2,7 +2,6 @@
 layout: default
 type: start
 shortname: Start
-navgroup: start
 title: Getting the code
 ---
 
diff --git a/docs/start/platform.md b/docs/start/platform.md
index 8b9bfb2c9b..bf74c7598c 100644
--- a/docs/start/platform.md
+++ b/docs/start/platform.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: concepts
-navgroup: start
+type: start
 shortname: Concepts
 title: The Platform
 subtitle: Supporting new web technologies today
diff --git a/docs/start/reusableelements.md b/docs/start/reusableelements.md
index e8e4b81a56..8446d78754 100644
--- a/docs/start/reusableelements.md
+++ b/docs/start/reusableelements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: start
-navgroup: start
 shortname: Start
 author: addyosmani
 title: Creating reusable elements
@@ -43,8 +42,8 @@ commands:
     $ cd ..  # You'll want to run the web server from the parent directory.
     $ python -m SimpleHTTPServer
 
-This starts a web server on port 8000, so you can test your new element by navigating a browser 
-to the URL `localhost:8000/test-element/demo.html`. 
+This starts a web server on port 8000, so you can test your new element by navigating a browser
+to the URL `localhost:8000/test-element/demo.html`.
 
 ## Deploy
 
@@ -58,29 +57,29 @@ Next, follow the steps below:
 
     # Inside your development folder, navigate to your element directory
     cd test-element
-    
+
     # Initialize a new Git repository for test-element
     git init
-    
+
     # Add the commits for your current code
     git add .
     git commit -m 'My initial version'
-    
-    # Add a remote pointing to the GitHub repository you created. 
+
+    # Add a remote pointing to the GitHub repository you created.
     git remote add origin https://github.com/<username>/test-element.git
-    
-    # Push your code to master by running 
+
+    # Push your code to master by running
     git push -u origin master
 
 
-Next, you’ll want to tag a version of your element on GitHub. You can either do this directly through the GitHub UI **or** via the terminal. 
+Next, you’ll want to tag a version of your element on GitHub. You can either do this directly through the GitHub UI **or** via the terminal.
 
 ####Via the terminal
 
     # Once you feel you have a version of your element you can release, tag it
     # Below we’re tagging version 0.0.1
     git tag -a v0.0.1 -m '0.0.1'
-    
+
     # Then, push your tag to GitHub
     git push --tags
 
@@ -91,13 +90,13 @@ Navigate to the main GitHub page for your element and click the "releases" link
 
 ![Preview of the GitHub navigation bar for a repository listing four navigation items - commits, branches, releases, contributors. The releases link is highlighted](/images/publishing-polymer-elements/image_2.png)
 
-This will navigate you to the *Releases* page. For a project without any releases, this page will display a message similar to the one below. 
+This will navigate you to the *Releases* page. For a project without any releases, this page will display a message similar to the one below.
 
 ![GitHub Releases page message stating that there aren't any releases here yet. The Create a new release button is highlighted](/images/publishing-polymer-elements/image_3.png)
 
-Click the ‘Create a new release’ button to proceed. 
+Click the ‘Create a new release’ button to proceed.
 
-This will display a Release drafting page where you can enter in version and release information for your element. Below, we’ve entered in v0.0.1 as the tag we would like to create and set the `master` branch as our target. 
+This will display a Release drafting page where you can enter in version and release information for your element. Below, we’ve entered in v0.0.1 as the tag we would like to create and set the `master` branch as our target.
 
 ![The GitHub releases form displaying an input field for entering in a version number, a drop-down box for selecting the target branch, a release titles field and a description field](/images/publishing-polymer-elements/image_4.png)
 
@@ -126,19 +125,19 @@ Once `demo.html` and the docs in `index.html` look good locally, make sure that
 
     # Navigate back to your development directory
     cd ..
-    
+
     # git clone the {{site.project_title}} tools repository
     git clone git://github.com/Polymer/tools.git
-    
+
     # Create a temporary directory for publishing your element and cd into it
     mkdir temp && cd temp
-    
-    # Run the gp.sh script. This will allow you to push a demo-friendly 
-    # version of your page and its dependencies to a GitHub pages branch 
-    # of your repository (gh-pages). Below, we pass in a GitHub username 
+
+    # Run the gp.sh script. This will allow you to push a demo-friendly
+    # version of your page and its dependencies to a GitHub pages branch
+    # of your repository (gh-pages). Below, we pass in a GitHub username
     # and the repo name for our element
     ../tools/bin/gp.sh <username> test-element
-    
+
     # Finally, clean-up your temporary directory as you no longer require it
     cd ..
     rm -rf temp
diff --git a/docs/start/tutorial/intro.md b/docs/start/tutorial/intro.md
index 15612af2f2..e300713dac 100644
--- a/docs/start/tutorial/intro.md
+++ b/docs/start/tutorial/intro.md
@@ -1,10 +1,9 @@
 ---
 layout: default
 type: start
-navgroup: docs
 shortname: Start
 title: Getting Started
-subtitle: Your first Polymer application 
+subtitle: Your first Polymer application
 ---
 
 <style>
@@ -57,25 +56,25 @@ To get started, download the starter project. This starter project includes all
   </a>
 </p>
 
-Unzip the starter project somewhere on your local drive. 
+Unzip the starter project somewhere on your local drive.
 
-The starter includes an initial version of the project you'll be working with. It also includes incremental versions of the project so you can check your work along the way. 
+The starter includes an initial version of the project you'll be working with. It also includes incremental versions of the project so you can check your work along the way.
 
 While you're working, you'll need a basic HTTP server to serve your pages. If you have Python installed, you can run one of the following commands in the top level of the starter project.
 
 Python 2.x:
 
-    python -m SimpleHTTPServer 
+    python -m SimpleHTTPServer
 
 Python 3.x:
 
-    python -m http.server 
+    python -m http.server
 
 Test out the web server by loading the finished version of the project. For example:
 
 -  [http://localhost:8000/finished/](http://localhost:8000/finished/)
 
-URLs in this tutorial assume your local server is listening on port 8000. 
+URLs in this tutorial assume your local server is listening on port 8000.
 If you're using a different port, substitute the port you're using.
 
 **Note:** On Windows, Python's simple HTTP server may not provide the correct MIME type for SVG images.
diff --git a/docs/start/tutorial/step-1.md b/docs/start/tutorial/step-1.md
index 730cb7a4af..54de4c1e00 100644
--- a/docs/start/tutorial/step-1.md
+++ b/docs/start/tutorial/step-1.md
@@ -1,10 +1,9 @@
 ---
 layout: default
 type: start
-navgroup: docs
 shortname: Start
 title: "Step 1: Creating the app structure"
-subtitle: Your first Polymer application 
+subtitle: Your first Polymer application
 ---
 
 <link rel="import" href="/elements/side-by-side.html">
@@ -36,13 +35,13 @@ Go to the `starter` directory and open the `index.html` file in your favorite ed
 
   &lt;title>unquote&lt;/title>
 
-  &lt;meta name="viewport" 
+  &lt;meta name="viewport"
     content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   &lt;script src="../components/webcomponentsjs/webcomponents.js">
   &lt;/script>
 
-  &lt;link rel="import" 
+  &lt;link rel="import"
     href="../components/font-roboto/roboto.html">
   ...
 </pre>
@@ -55,11 +54,11 @@ Go to the `starter` directory and open the `index.html` file in your favorite ed
 </aside>
 </side-by-side>
 
-**Note:** The `font-roboto` import loads the `RobotoDraft` font using the 
+**Note:** The `font-roboto` import loads the `RobotoDraft` font using the
 [Google Fonts API](https://developers.google.com/fonts/). If you're working
 offline or cannot access the Google Fonts API for any reason, this can block
-rendering of the web page. If you experience this problem, comment out the 
-import for `font-roboto`. 
+rendering of the web page. If you experience this problem, comment out the
+import for `font-roboto`.
 {: .alert .alert-info }
 
 
@@ -76,8 +75,8 @@ Skipping over the styles for now, at the end of the file you'll find something n
 <aside>
   <h4>Key information</h4>
   <ul>
-    <li>The <code>unresolved</code> attribute on the <code>&lt;body></code> element is used to prevent a flash of unstyled content 
-        (FOUC) on browsers that lack native support for custom elements. For details, see the 
+    <li>The <code>unresolved</code> attribute on the <code>&lt;body></code> element is used to prevent a flash of unstyled content
+        (FOUC) on browsers that lack native support for custom elements. For details, see the
         <a href="/docs/polymer/styling.html#fouc-prevention">Polymer styling reference</a>.</li>
   </ul>
 </aside>
@@ -91,11 +90,11 @@ Add HTML import links to import the `<core-header-panel>`, `<core-toolbar>`, and
 
 <side-by-side>
 <pre>
-&lt;script 
+&lt;script
   src="../components/webcomponentsjs/webcomponents.js">
 &lt;/script>
 
-&lt;link rel="import" 
+&lt;link rel="import"
   href="../components/font-roboto/roboto.html">
 <strong class="highlight nocode">&lt;link rel="import"
   href="../components/core-header-panel/core-header-panel.html">
@@ -110,7 +109,7 @@ Add HTML import links to import the `<core-header-panel>`, `<core-toolbar>`, and
     <ul>
       <li>
         Polymer uses <a href="/platform/html-imports.html">HTML imports</a> to load components.
-        HTML imports provide dependency management, ensuring that your elements and all of their dependencies are loaded 
+        HTML imports provide dependency management, ensuring that your elements and all of their dependencies are loaded
         before you use them.
       </li>
       <li>
@@ -125,7 +124,7 @@ Add HTML import links to import the `<core-header-panel>`, `<core-toolbar>`, and
 </div>
 
 To add a toolbar, add the following code inside the `<body>` tag.
- 
+
 <side-by-side>
 <pre>
 <strong class="highlight nocode">&lt;core-header-panel>
@@ -133,7 +132,7 @@ To add a toolbar, add the following code inside the `<body>` tag.
   &lt;core-toolbar>
   &lt;/core-toolbar>
 
-  &lt;!-- main page content will go here --> 
+  &lt;!-- main page content will go here -->
 
 &lt;/core-header-panel></strong>
 </pre>
@@ -141,13 +140,13 @@ To add a toolbar, add the following code inside the `<body>` tag.
     <h4>Key information</h4>
 
     <ul>
-      <li>The 
-          <code><a href="/docs/elements/core-elements.html#core-header-panel">&lt;core-header-panel&gt;</a></code> 
-          element is a simple container that holds a 
-          header (in this case a <code>&lt;core-toolbar></code> element), and some content. By 
-          default, the header stays at the top of the screen, but it can also be 
+      <li>The
+          <code><a href="/docs/elements/core-elements.html#core-header-panel">&lt;core-header-panel&gt;</a></code>
+          element is a simple container that holds a
+          header (in this case a <code>&lt;core-toolbar></code> element), and some content. By
+          default, the header stays at the top of the screen, but it can also be
           set to scroll with the content.</li>
-      <li>The <code><a href="/docs/elements/core-elements.html#core-toolbar">&lt;core-toolbar></a></code> element serves 
+      <li>The <code><a href="/docs/elements/core-elements.html#core-toolbar">&lt;core-toolbar></a></code> element serves
           as a container for tabs, menu buttons, and other controls.</li>
     </ul>
   </aside>
@@ -160,7 +159,7 @@ To add a toolbar, add the following code inside the `<body>` tag.
 Add the tabs.
 
 The application will use tabs for navigating between two different views,
-a list of all messages and a list of favorites. The 
+a list of all messages and a list of favorites. The
 <code><a href="/docs/elements/paper-elements.html#paper-tabs">&lt;paper-tabs&gt;</a></code>
 element works much like a `<select>` element, but it's styled as a set of
 tabs.
@@ -202,7 +201,7 @@ tabs.
 
 <div class="divider" layout horizontal center center-justified>
   <core-icon icon="polymer"></core-icon>
-</div> 
+</div>
 
 Add styles for the new elements. Add the following CSS rules inside the `<style>` element.
 
@@ -217,7 +216,7 @@ html,body {
 <strong class="highlight nocode">core-header-panel {
   height: 100%;
   overflow: auto;
-  -webkit-overflow-scrolling: touch; 
+  -webkit-overflow-scrolling: touch;
 }
 core-toolbar {
   background: #03a9f4;
@@ -236,10 +235,10 @@ core-toolbar {
 <aside>
   <h4>Key information</h4>
   <ul>
-    <li>The <code>&lt;core-header-panel&gt;</code> is a generic element that can be used as either a 
+    <li>The <code>&lt;core-header-panel&gt;</code> is a generic element that can be used as either a
         full-page layout or for a card with a toolbar. To use it as a full-page, scrollable container,
         set its height explicitly. </li>
-    <li>Here, the height is set to 100%. This works because the existing style rules ensure that its 
+    <li>Here, the height is set to 100%. This works because the existing style rules ensure that its
         parent elements,
         <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code>, take up 100% of the viewport height.</li>
     <li>The <code>overflow</code> and <code>-webkit-overflow-scrolling</code> properties ensure that
@@ -252,7 +251,7 @@ core-toolbar {
 
 <div class="divider" layout horizontal center center-justified>
   <core-icon icon="polymer"></core-icon>
-</div> 
+</div>
 
 Add a `<script>` tag near the end of the file to handle the tab switching
     event.
@@ -268,14 +267,14 @@ Add a `<script>` tag near the end of the file to handle the tab switching
   });
 &lt;/script>
 </strong>&lt;/body>
-</pre> 
+</pre>
   <aside>
     <h4>Key information</h4>
     <ul>
       <li>
-        The <code>&lt;paper-tabs></code> element fires a <code>core-select</code> event when you select a 
+        The <code>&lt;paper-tabs></code> element fires a <code>core-select</code> event when you select a
         tab. You can interact with the element just like a built-in element.
-      </li> 
+      </li>
       <li>
         Right now there's nothing to switch; you'll finish hooking it up later.
       </li>
@@ -284,16 +283,16 @@ Add a `<script>` tag near the end of the file to handle the tab switching
 </side-by-side>
 
 
-Save the file and open the project in your browser (for example, [http://localhost:8000/starter/](http://localhost:8000/starter/)). You have a Polymer app! 
+Save the file and open the project in your browser (for example, [http://localhost:8000/starter/](http://localhost:8000/starter/)). You have a Polymer app!
 
 
 <div layout vertical center>
   <img class="sample" src="/images/tutorial/step-1.png">
 </div>
 
-**Note:** If you have the console open, you'll notice that you get two `core-select` 
-events each time you switch tabs &mdash; one for the previously-selected tab and one 
-for the newly-selected tab. The `<paper-tabs>` element inherits this behavior from 
+**Note:** If you have the console open, you'll notice that you get two `core-select`
+events each time you switch tabs &mdash; one for the previously-selected tab and one
+for the newly-selected tab. The `<paper-tabs>` element inherits this behavior from
 <code><a href="/docs/elements/core-elements.html#core-selector">&lt;core-selector&gt;</a></code>, which supports
 both single and multiple selections.
 {: .alert .alert-info }
diff --git a/docs/start/tutorial/step-3.md b/docs/start/tutorial/step-3.md
index ec14713f00..5ac4a6879e 100644
--- a/docs/start/tutorial/step-3.md
+++ b/docs/start/tutorial/step-3.md
@@ -1,10 +1,9 @@
 ---
 layout: default
 type: start
-navgroup: docs
 shortname: Start
 title: "Step 3: Using data binding"
-subtitle: Your first Polymer application 
+subtitle: Your first Polymer application
 ---
 
 <link rel="import" href="/elements/side-by-side.html">
@@ -17,7 +16,7 @@ subtitle: Your first Polymer application
 
 ## Step 3: Using data binding
 
-One post is nice, but the app looks a little empty. In this step, you'll pull data from a web service and use Polymer's data binding to render it as a series of cards. 
+One post is nice, but the app looks a little empty. In this step, you'll pull data from a web service and use Polymer's data binding to render it as a series of cards.
 
 To get the data, you'll use the `<post-service>` element provided as part of the starter app. This element provides a very simple API for an imaginary social network. In this section, you'll use the `posts` property, which returns an array of `post` objects like this:
 
@@ -55,7 +54,7 @@ Open the `post-list.html` file in your editor.
       margin-bottom: 30px;
     }
     &lt;/style>
-    
+
     &lt;!-- add markup here -->
 ...
 </pre>
@@ -64,7 +63,7 @@ Open the `post-list.html` file in your editor.
     <ul>
       <li>The file already includes an import for the <code>&lt;post-service&gt;</code>
       element, so it's ready to use.</li>
-      <li>The <code>attributes="show"</code> attribute creates a 
+      <li>The <code>attributes="show"</code> attribute creates a
       <a href="/docs/polymer/polymer.html#published-properties">
       <em>published property</em></a> named <code>show</code>.
       </li>
@@ -95,19 +94,19 @@ Add a `<post-service>` element inside the element's `<template>`:
   <h4>Key information</h4>
     <ul>
       <li>
-        The <code>posts="{%raw%}{{posts}}{%endraw%}"</code> attribute adds a two-way data binding between 
+        The <code>posts="{%raw%}{{posts}}{%endraw%}"</code> attribute adds a two-way data binding between
         the <code>&lt;post-service&gt;</code> element and the <code>&lt;post-list&gt;</code> element.
       </li>
     </ul>
   </aside>
 </side-by-side>
 
-The [_data binding_](/docs/polymer/databinding.html) links the service element's `posts` property to a local property (also called 
+The [_data binding_](/docs/polymer/databinding.html) links the service element's `posts` property to a local property (also called
 `posts` here). Any methods you define on your custom element can access the response as `this.posts`.
 
 <div class="divider" layout horizontal center center-justified>
   <core-icon icon="polymer"></core-icon>
-</div> 
+</div>
 
 Render a dynamic list of cards.
 
@@ -129,19 +128,19 @@ Add the following `<div>` and `<template>` tag:
       &lt;p>{{post.text}}&lt;/p>
     &lt;/post-card>
   &lt;/template>
-  
+
 &lt;/div></strong>
 ...
 </pre>
 {%endraw%}
 <aside>
  <h4>Key information</h4>
-       
+
  <ul>
    <li>This new syntax <code>repeat="{%raw%}{{post in posts}}{%endraw%}"</code>, tells the template to
    create a new instance for each item in the <code>posts</code> array.</li>
    <li>In each template instance, the individual bindings (such as
-   <code>{%raw%}{{post.avatar}}{%endraw%}</code>) are replaced by the corresponding values for that 
+   <code>{%raw%}{{post.avatar}}{%endraw%}</code>) are replaced by the corresponding values for that
    item.</li>
  </ul>
 </aside>
@@ -152,7 +151,7 @@ Add the following `<div>` and `<template>` tag:
 
 Import the `<post-list>` element into `index.html`.
 
-Open `index.html` and add an import link for `post-list.html`. You can   
+Open `index.html` and add an import link for `post-list.html`. You can
 replace the existing link for `post-card`:
 
 <pre>
@@ -161,14 +160,14 @@ replace the existing link for `post-card`:
 <strong class="highlight nocode">&lt;link rel="import" href="post-list.html"></strong>
 ...
 </pre>
-    
+
 <div class="divider" layout horizontal center center-justified>
   <core-icon icon="polymer"></core-icon>
 </div>
 
 Use the `<post-list>` element.
 
-Find the `<post-card>` element you added in the last step and replace it 
+Find the `<post-card>` element you added in the last step and replace it
 with a `<post-list>`:
 
 <pre>
diff --git a/docs/start/tutorial/step-4.md b/docs/start/tutorial/step-4.md
index a0be467d68..be2ed437f0 100644
--- a/docs/start/tutorial/step-4.md
+++ b/docs/start/tutorial/step-4.md
@@ -1,10 +1,9 @@
 ---
 layout: default
 type: start
-navgroup: docs
 shortname: Start
 title: "Step 4: Finishing touches"
-subtitle: Your first Polymer application 
+subtitle: Your first Polymer application
 ---
 
 <link rel="import" href="/elements/side-by-side.html">
@@ -74,12 +73,12 @@ element:
   <core-icon icon="polymer"></core-icon>
 </div>
 
-Add the `favorite` property and `favoriteTapped` method to the element's   
-prototype. 
+Add the `favorite` property and `favoriteTapped` method to the element's
+prototype.
 
 <side-by-side>
 <pre>
-&lt;script><strong class="highlight nocode">   
+&lt;script><strong class="highlight nocode">
 Polymer({
   publish: {
     favorite: {
@@ -109,8 +108,8 @@ Polymer({
   </aside>
 </side-by-side>
 
-The net result of these changes is that when the favorite button is 
-tapped, the favorite property is updated and its corresponding attribute 
+The net result of these changes is that when the favorite button is
+tapped, the favorite property is updated and its corresponding attribute
 is set or unset.
 
 Right now, there's no visual indication that the button is pressed.
@@ -148,13 +147,13 @@ core-icon-button {
 </div>
 
 Save `post-card.html`.
-   
-At this point, you can reload the page and your favorite buttons should 
+
+At this point, you can reload the page and your favorite buttons should
 work, but there are still a few steps left to finish the app.
 
 ### Edit index.html
 
-Open `index.html` and update the tab event handler to switch views in 
+Open `index.html` and update the tab event handler to switch views in
 `<post-list>` when the user switches tabs:
 
 <pre>
@@ -174,7 +173,7 @@ Save `index.html`.
 
 Open `post-list.html` in your editor.
 
-Update the template that creates the `<post-card>` elements to wire up the 
+Update the template that creates the `<post-card>` elements to wire up the
 favorites:
 
 <side-by-side>
@@ -195,7 +194,7 @@ favorites:
   {% endraw %}
   <aside>
     <ul>
-      <li><code>favorite=<wbr>"{%raw%}{{post.favorite}}{%endraw%}"</code> binds the 
+      <li><code>favorite=<wbr>"{%raw%}{{post.favorite}}{%endraw%}"</code> binds the
       card's <code>favorite</code> value to the
       value in the array owned by the <code>&lt;post-service&gt;</code>.</li>
       <li>The <code>on-favorite-tap</code> attribute sets up a handler for the
@@ -207,10 +206,10 @@ favorites:
   </aside>
 </side-by-side>
 
-The binding expression for `hidden` actually does the work of switching 
-between the All and Favorites tabs. The `hidden` attribute is a 
-standard HTML5 attribute. The default {{site.project_title}} style sheet includes 
-a rule to style `hidden` as `display: none` for those browsers that don't support 
+The binding expression for `hidden` actually does the work of switching
+between the All and Favorites tabs. The `hidden` attribute is a
+standard HTML5 attribute. The default {{site.project_title}} style sheet includes
+a rule to style `hidden` as `display: none` for those browsers that don't support
 `hidden` natively.
 
 <div class="divider" layout horizontal center center-justified>
diff --git a/docs/start/usingelements.md b/docs/start/usingelements.md
index bdd3445ffa..d2333124fc 100644
--- a/docs/start/usingelements.md
+++ b/docs/start/usingelements.md
@@ -1,7 +1,6 @@
 ---
 layout: default
 type: start
-navgroup: start
 shortname: Start
 title: Using elements
 subtitle: Polymer from the outside
diff --git a/js/app.js b/js/app.js
index 97740ebc03..84d2e1dc37 100644
--- a/js/app.js
+++ b/js/app.js
@@ -181,7 +181,9 @@ function initPage(opt_inDoc) {
 function ajaxifySite() {
   document.addEventListener('polymer-ready', function(e) {
     docsMenu.ajaxify = true;
-    dropdownPanel.ajaxify = true;
+    if (dropdownPanel) {
+      dropdownPanel.ajaxify = true;
+    }
   });
 
   document.addEventListener('click', function(e) {
@@ -253,7 +255,7 @@ document.addEventListener('polymer-ready', function(e) {
     sidebar.toggle();
   });
 
-  dropdownToggle.addEventListener('click', function(e) {
+  dropdownToggle && dropdownToggle.addEventListener('click', function(e) {
     dropdownPanel.openPanel();
     // dropdownPanel listens to clicks on the document and autocloses
     // so no need to add any more handlers
diff --git a/platform/custom-elements.md b/platform/custom-elements.md
index 180cb775ee..9725ce585a 100644
--- a/platform/custom-elements.md
+++ b/platform/custom-elements.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Custom Elements
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
@@ -10,7 +9,7 @@ feature:
   spec: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
   code: https://github.com/Polymer/webcomponentsjs
   summary: Enables authors to define and use new types of DOM elements in a document.
-  
+
 links:
 - "Custom Elements - defining new elements in HTML": http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
 ---
diff --git a/platform/html-imports.md b/platform/html-imports.md
index a045b645bd..a8962bd777 100644
--- a/platform/html-imports.md
+++ b/platform/html-imports.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: HTML Imports
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
diff --git a/platform/mutation-observers.md b/platform/mutation-observers.md
index d2dd1756db..00aa1d6674 100644
--- a/platform/mutation-observers.md
+++ b/platform/mutation-observers.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Mutation Observers
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
@@ -23,4 +22,4 @@ TODO
 {% include_external polymer/platform/MutationObservers/README.md %}
 {% endcomment %}
 
-{% include other-resources.html %}
\ No newline at end of file
+{% include other-resources.html %}
diff --git a/platform/pointer-events.md b/platform/pointer-events.md
index b9468cde85..a0b3bb932f 100644
--- a/platform/pointer-events.md
+++ b/platform/pointer-events.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Pointer Events
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
@@ -18,4 +17,4 @@ feature:
 
 {% include_external components/PointerEvents/README.md %}
 
-{% include other-resources.html %}
\ No newline at end of file
+{% include other-resources.html %}
diff --git a/platform/shadow-dom.md b/platform/shadow-dom.md
index 8fb2b556a4..8cc9327fdf 100644
--- a/platform/shadow-dom.md
+++ b/platform/shadow-dom.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Shadow DOM
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
diff --git a/platform/web-animations.md b/platform/web-animations.md
index 48b796b96f..181655548f 100644
--- a/platform/web-animations.md
+++ b/platform/web-animations.md
@@ -1,8 +1,7 @@
 ---
 layout: default
 title: Web Animations
-type: platform
-navgroup: docs
+type: guide
 shortname: Platform
 subtitle: polyfill
 
@@ -22,4 +21,4 @@ feature:
 
 {% include_external components/web-animations-js/README.md %}
 
-{% include other-resources.html %}
\ No newline at end of file
+{% include other-resources.html %}
diff --git a/resources/changelog.md b/resources/changelog.md
index df58e8c486..9a65e2488d 100644
--- a/resources/changelog.md
+++ b/resources/changelog.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: resources
+type: guide
 shortname: Resources
 title: Releases
 ---
@@ -407,7 +406,7 @@ with the standard methods like anonymous self calling functions.
 #### HTML Imports
 
 - Scripts within `<template>` content are now executed. Fixes [#22](https://github.com/Polymer/HTMLImports/issues/22).
-- Non-JS script tags are no longer parsed ([commit](https://github.com/Polymer/HTMLImports/commit/0f35bd21fab3e0e9b99b525581d1135f27787dd1)) 
+- Non-JS script tags are no longer parsed ([commit](https://github.com/Polymer/HTMLImports/commit/0f35bd21fab3e0e9b99b525581d1135f27787dd1))
 
 #### MDV
 
@@ -600,7 +599,7 @@ See the [full list of changes](https://github.com/Polymer/polymer/pull/135).
 
 #### MDV
 
-* Correct event type for checkbox bindings ([commit](https://github.com/Polymer/mdv/commit/2c675cab75aea2ef3d1b981a616469587b9210fe)) 
+* Correct event type for checkbox bindings ([commit](https://github.com/Polymer/mdv/commit/2c675cab75aea2ef3d1b981a616469587b9210fe))
 
 #### HTML Imports
 
@@ -662,7 +661,7 @@ as numbers, srings as strings, dates as `Date`, etc. ([commit](https://github.co
 
   * Added `.unbind()` and additional machinery for MDV bindings ([commit](https://github.com/polymer/polymer/commit/197d6f3c6fe08953fd915e243ce2cf8861347ee1))
 
-  * MDV bindings are more comprehensive, with Node, Text, and `<input>` elements ([commit](https://github.com/polymer/polymer/commit/2e11ba658916df02c8ba87ead037ce0104a6b205)) 
+  * MDV bindings are more comprehensive, with Node, Text, and `<input>` elements ([commit](https://github.com/polymer/polymer/commit/2e11ba658916df02c8ba87ead037ce0104a6b205))
 
 * `Toolkit.getBinding(element, name)` no longer generates an exception if element is null [[commit](https://github.com/polymer/polymer/commit/a270417d136b6f00205ea60d451be9d296e9745d))
 
@@ -740,7 +739,7 @@ See the [full list of changes](https://github.com/polymer/ShadowDOM/pull/139)
 ### Toolkit
 
 * If you're writing a [Toolkit component](/polymer.html), there's
-no longer need to include `webcomponents.js` alongside `toolkit.js`. `toolkit.js` now loads `webcomponents.js` under the hood. 
+no longer need to include `webcomponents.js` alongside `toolkit.js`. `toolkit.js` now loads `webcomponents.js` under the hood.
 
 ### Platform
 
diff --git a/resources/compatibility.md b/resources/compatibility.md
index 59329f1d0b..1f08173fc3 100644
--- a/resources/compatibility.md
+++ b/resources/compatibility.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: resources
+type: guide
 shortname: Resources
 title: Browser Compatibility
 ---
diff --git a/resources/faq.md b/resources/faq.md
index 40c8b7527d..1150d8a8e6 100644
--- a/resources/faq.md
+++ b/resources/faq.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: resources
+type: guide
 shortname: Resources
 title: FAQ
 ---
@@ -86,7 +85,7 @@ polymer.dart is a Dart port of {{site.project_title}} created and maintained by
 
 ### Is the code hosted on a CDN?
 
-There is no official CDN version of {{site.project_title}}. Some community members 
+There is no official CDN version of {{site.project_title}}. Some community members
 maintain a copy of {{site.project_title}} on [cdnjs](http://cdnjs.com/):
 
 <pre>
@@ -102,7 +101,7 @@ There are a number of reasons why we recommend you use Bower instead of the CDN:
 - There are many elements which are not hosted on the CDN so it might be tricky to include all of them in your project.
 - You will not be able to [Vulcanize your code](/articles/concatenating-web-components.html).
 
-For testing and reproducing bugs, you can link to the current versions of the `webcomponents.js` 
+For testing and reproducing bugs, you can link to the current versions of the `webcomponents.js`
 and `polymer.html` files on `polymer-project.org`:
 
     <script src="//polymer-project.org/webcomponents.js"></script>
diff --git a/resources/tooling-strategy.md b/resources/tooling-strategy.md
index 78ce5514d7..909eb792aa 100644
--- a/resources/tooling-strategy.md
+++ b/resources/tooling-strategy.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: resources
+type: guide
 shortname: Resources
 title: Tools & Testing
 ---
@@ -33,13 +32,13 @@ After reloading the DevTools, user agent Shadow DOM should be inspectable. It wi
 
 {{site.project_title}}  polyfills the [HTML Imports](/platform/html-imports.html) specification. In order for code to be debuggable at run-time, scripts embedded in components are injected into `<head>` in the main document. Tools/browsers that support [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) will identify these scripts as belonging to their source components.
 
-## Building &amp; testing 
+## Building &amp; testing
 
 To run build individual polyfills or run tests, you need `node` and `grunt-cli` on your system.
 
 * install [NodeJS](http://nodejs.org) using the instructions on their website
 * use `npm` to install the [GruntJS](http://gruntjs.com) task runner for the command-line
-  
+
       npm install -g grunt-cli
 
 ### Building individual polyfills
@@ -79,7 +78,7 @@ Once things are installed, you may run the tests or use `grunt` to perform tasks
 Build minified project files (default):
 
     grunt
-    
+
 Run tests:
 
     grunt test
@@ -195,7 +194,7 @@ A meta repository compiling the list of utility elements.
 A meta repository compiling the list of paper (UI) elements.
 
 
-<!-- 
+<!--
 **/polymer-elements** - [github.com/PolymerLabs/polymer-elements](https://github.com/Polymer/polymer-elements)
 
 A meta repository compiling the list of utility elements that do not render UI.
@@ -206,6 +205,6 @@ A meta repository compiling the list of basic labs UI elements.
 
 **/more-elements** - [github.com/Polymer/more-elements](https://github.com/Polymer/more-elements)
 
-A meta repository compiling the list of extra components and wrappers for third-party code. 
+A meta repository compiling the list of extra components and wrappers for third-party code.
 Examples include Bootstrap, topcoat, Chart.js, pdf.js, x-tags, and AceEditor.
  -->
diff --git a/resources/video.md b/resources/video.md
index 18b6426a90..cf78c956bb 100644
--- a/resources/video.md
+++ b/resources/video.md
@@ -1,7 +1,6 @@
 ---
 layout: default
-type: resources
-navgroup: resources
+type: guide
 shortname: Videos
 title: Videos and presentations
 subtitle: Go deeper, learn more
diff --git a/sass/elements/docs-menu.scss b/sass/elements/docs-menu.scss
index 84c0d1aba7..cd32b5126c 100644
--- a/sass/elements/docs-menu.scss
+++ b/sass/elements/docs-menu.scss
@@ -21,14 +21,16 @@
   margin: 0;
 }
 
-// core-menu > core-submenu::shadow core-item {
-//   color: inherit;
-// }
-
 #mainmenu > core-submenu::shadow core-item {
   font-weight: 500;
 }
 
+polyfill-rule {
+  content: "#mainmenu > core-submenu core-item";
+  font-weight: normal;
+}
+
+
 #mainmenu > core-submenu {
   $leftPadding: 24px;
   border-top: 1px solid #ccc;
@@ -47,6 +49,17 @@
    color: currentcolor;
 }
 
+polyfill-rule {
+  content: "#mainmenu > core-submenu.core-selected core-item";
+  color: initial;
+}
+
+polyfill-rule {
+  content: "#mainmenu > core-submenu.core-selected > #submenuItem:first-of-type";
+  color: currentcolor !important;
+}
+
+
 core-submenu /deep/ core-item,
 core-item {
   font-size: 13px !important;
diff --git a/sass/elements/site-banner.scss b/sass/elements/site-banner.scss
index 658f045416..069daaeeb9 100644
--- a/sass/elements/site-banner.scss
+++ b/sass/elements/site-banner.scss
@@ -27,18 +27,6 @@
   // @include transform(translate3d(0,0,0));
 }
 
-// :host([type="platform"]) {
-//   background-color: $platform-color !important;
-// }
-
-// :host([type="core"]) {
-//   background-color: $creating-elements-color !important;
-// }
-
-// :host([type="elements"]) {
-//   background-color: $using-elements-color !important;
-// }
-
 :host([type="guide"]) {
   background-color: $guides-resources-color !important;
 }
diff --git a/sass/site2.scss b/sass/site2.scss
index ef746e990e..69faec1561 100644
--- a/sass/site2.scss
+++ b/sass/site2.scss
@@ -376,27 +376,15 @@ footer {
         transition: opacity 300ms ease-in;
       }
 
-      // &[type="platform"] {
-      //   background-color: $platform-color !important;
-      // }
-
-      // &[type="core"] {
-      //   background-color: $creating-elements-color  !important;
-      // }
-
-      // &[type="elements"] {
-      //   background-color: $using-elements-color !important;
-      // }
-
-      :host([type="guide"]) {
+      &[type="guide"] {
         background-color: $guides-resources-color !important;
       }
 
-      :host([type="elements"]) {
+      &[type="elements"] {
         background-color: $elements-color !important;
       }
 
-      :host([type="start"]) {
+      &[type="start"] {
         background-color: $getting-started-color !important;
       }