Merge "docs: move Android Design from static HTML to JD" into ics-mr1

author: Roman Nurik <romannurik@google.com> 2012-03-06 14:39:54 -0800
committer: Android (Google) Code Review <android-gerrit@google.com> 2012-03-06 14:39:54 -0800
commit: 96c757e557ed40da4400b82fd62dfbd4bc8151d1 (patch)
tree: 5aea88b343c66bf9c47f03478ccfd3e38b325689 /docs
parent: 66895ad5f7cdb9a8a292c9e6c04347a10b4212a3 (diff)
parent: b99ae73cc53056bcd87c592489b8ab83107e37e2 (diff)
download: frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.zip
frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.tar.gz
frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.tar.bz2
285 files changed, 2709 insertions, 9554 deletions
diff --git a/docs/html/design/building-blocks/buttons.html b/docs/html/design/building-blocks/buttons.html
deleted file mode 100644
index 9f9652f9..0000000
--- a/docs/html/design/building-blocks/buttons.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Buttons
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Buttons</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>A button consists of text and/or an image that clearly communicates what action will occur when the
-user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
-buttons</em>. Both can contain text labels and/or images.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/buttons_basic.png">
-</div>
-
-<h2 id="basic">Basic Buttons</h2>
-
-<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
-basic buttons: default and small. Default buttons have slightly larger font size and are optimized
-for display outside of form content. Small buttons are intended for display alongside other content.
-They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
-align with other UI elements.</p>
-
-<img src="../static/content/buttons_default_small.png">
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-    <div class="figure-caption">
-      Default buttons in Holo Dark &amp; Light.
-    </div>
-  </div>
-  <div class="layout-content-col span-6">
-    <div class="figure-caption">
-      Small buttons in Holo Dark &amp; Light.
-    </div>
-  </div>
-</div>
-
-<h2 id="borderless">Borderless Buttons</h2>
-
-<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
-use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
-than basic buttons and integrate nicely with other content.</p>
-
-<img src="../static/content/buttons_borderless.png">
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd
new file mode 100644
index 0000000..18beab0
--- /dev/null
+++ b/docs/html/design/building-blocks/buttons.jd
@@ -0,0 +1,40 @@
+page.title=Buttons
+@jd:body
+
+<p>A button consists of text and/or an image that clearly communicates what action will occur when the
+user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
+buttons</em>. Both can contain text labels and/or images.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/buttons_basic.png">
+</div>
+
+<h2 id="basic">Basic Buttons</h2>
+
+<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
+basic buttons: default and small. Default buttons have slightly larger font size and are optimized
+for display outside of form content. Small buttons are intended for display alongside other content.
+They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
+align with other UI elements.</p>
+
+<img src="{@docRoot}design/media/buttons_default_small.png">
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <div class="figure-caption">
+      Default buttons in Holo Dark &amp; Light.
+    </div>
+  </div>
+  <div class="layout-content-col span-6">
+    <div class="figure-caption">
+      Small buttons in Holo Dark &amp; Light.
+    </div>
+  </div>
+</div>
+
+<h2 id="borderless">Borderless Buttons</h2>
+
+<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
+use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
+than basic buttons and integrate nicely with other content.</p>
+
+<img src="{@docRoot}design/media/buttons_borderless.png">
diff --git a/docs/html/design/building-blocks/dialogs.html b/docs/html/design/building-blocks/dialogs.html
deleted file mode 100644
index f03a57a..0000000
--- a/docs/html/design/building-blocks/dialogs.html
+++ /dev/null
@@ -1,269 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Dialogs
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Dialogs</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Dialogs prompt the user for decisions or additional information required by the app to continue a
-task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
-user to adjust settings or enter text.</p>
-
-<img src="../static/content/dialogs_main.png">
-
-<div class="with-callouts">
-
-<ol>
-<li>
-<h4>Optional title region</h4>
-<p>The title introduces the content of your dialog. It can, for example, identify the name of a
- setting that the user is about to change, or request a decision.</p>
-</li>
-<li>
-<h4>Content area</h4>
-<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
- sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
- settings. In other cases, such as alerts, the content may consist solely of text that provides
- further context for a user decision.</p>
-</li>
-<li>
-<h4>Action buttons</h4>
-<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
- action. However, if the options consist of specific actions such as Close or Wait rather than
- a confirmation or cancellation of the action described in the content, then all the buttons
- should be active verbs. As a rule, the dismissive action of a dialog is always on the left
- whereas the affirmative actions are on the right.</p>
-</li>
-</ol>
-
-</div>
-
-<img src="../static/content/dialogs_examples.png">
-<div class="figure-caption">
-  Samples of typical dialog use in Android.
-</div>
-
-<h2 id="alerts">Alerts</h2>
-
-<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
-proceeding. They differ slightly in appearance based upon the severity and impact of the message
-conveyed.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/dialogs_w_no_title.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Alerts without title bars</h4>
-<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
-up succinctly in a sentence or two. The content area should either ask a question (such as "Delete
-this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/dialogs_w_title.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Alerts with title bars</h4>
-<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
-potential loss of data, connectivity, extra charges, and so on requires a clear question or
-statement (the title) and some additional explanation (in the content area).</p>
-<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user
-should be able to skip the content completely and still have a clear idea of what choices are
-available based on the title and the text of the action buttons.</p>
-
-  </div>
-</div>
-
-
-<h2 id="popups">Popups</h2>
-
-<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups
-don't have have explicit buttons that accept or cancel the operation. Instead, making a selection
-advances the workflow, and simply touching outside the popup dismisses it.</p>
-
-<img src="../static/content/dialogs_popups_example.png">
-
-
-<h2 id="toasts">Toasts</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <div class="vspace size-6"></div>
-
-<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating
-away from an email before you send it triggers a "Draft saved" toast to let you know that you can
-continue editing later. Toasts automatically disappear after a timeout.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/dialogs_toasts.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd
new file mode 100644
index 0000000..9b653ee
--- /dev/null
+++ b/docs/html/design/building-blocks/dialogs.jd
@@ -0,0 +1,112 @@
+page.title=Dialogs
+@jd:body
+
+<p>Dialogs prompt the user for decisions or additional information required by the app to continue a
+task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
+user to adjust settings or enter text.</p>
+
+<img src="{@docRoot}design/media/dialogs_main.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Optional title region</h4>
+<p>The title introduces the content of your dialog. It can, for example, identify the name of a
+ setting that the user is about to change, or request a decision.</p>
+</li>
+<li>
+<h4>Content area</h4>
+<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
+ sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
+ settings. In other cases, such as alerts, the content may consist solely of text that provides
+ further context for a user decision.</p>
+</li>
+<li>
+<h4>Action buttons</h4>
+<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
+ action. However, if the options consist of specific actions such as Close or Wait rather than
+ a confirmation or cancellation of the action described in the content, then all the buttons
+ should be active verbs. As a rule, the dismissive action of a dialog is always on the left
+ whereas the affirmative actions are on the right.</p>
+</li>
+</ol>
+
+</div>
+
+<img src="{@docRoot}design/media/dialogs_examples.png">
+<div class="figure-caption">
+  Samples of typical dialog use in Android.
+</div>
+
+<h2 id="alerts">Alerts</h2>
+
+<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
+proceeding. They differ slightly in appearance based upon the severity and impact of the message
+conveyed.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/dialogs_w_no_title.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Alerts without title bars</h4>
+<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
+up succinctly in a sentence or two. The content area should either ask a question (such as "Delete
+this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/dialogs_w_title.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Alerts with title bars</h4>
+<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
+potential loss of data, connectivity, extra charges, and so on requires a clear question or
+statement (the title) and some additional explanation (in the content area).</p>
+<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user
+should be able to skip the content completely and still have a clear idea of what choices are
+available based on the title and the text of the action buttons.</p>
+
+  </div>
+</div>
+
+
+<h2 id="popups">Popups</h2>
+
+<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups
+don't have have explicit buttons that accept or cancel the operation. Instead, making a selection
+advances the workflow, and simply touching outside the popup dismisses it.</p>
+
+<img src="{@docRoot}design/media/dialogs_popups_example.png">
+
+
+<h2 id="toasts">Toasts</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <div class="vspace size-6"></div>
+
+<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating
+away from an email before you send it triggers a "Draft saved" toast to let you know that you can
+continue editing later. Toasts automatically disappear after a timeout.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/dialogs_toasts.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/grid-lists.html b/docs/html/design/building-blocks/grid-lists.html
deleted file mode 100644
index 3f60216..0000000
--- a/docs/html/design/building-blocks/grid-lists.html
+++ /dev/null
@@ -1,237 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Grid Lists
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Grid Lists</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/gridview_overview.png">
-
-<p>Grid lists are an alternative to standard list views. They are best suited for showing data sets
-that represent themselves through images. In contrast to simple lists, grid lists may scroll either
-vertically or horizontally.</p>
-
-
-
-<h2 id="generic_grid">Generic Grids</h2>
-
-
-<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling
-content. The scrolling direction dictates the ordering of the items within the grid list. Since the
-scrolling direction is not deterministic, make it easy for the user to determine the orientation by
-cutting off grid items to communicate where the overflow is located.</p>
-<p>Avoid creating grid lists that scroll in two dimensions.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_vertical.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Vertical scrolling</h4>
-<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
-left-to-right and top-down. When displaying the list, cut off the items in the bottom row to
-communicate that the user can scroll the list down to show additional items. Be sure to retain this
-scheme when the user rotates the screen.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_horizontal.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Horizontal scrolling</h4>
-<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
-scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ
-the same technique of cutting off the items in the rightmost column to indicate the scrolling
-direction.</p>
-<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid
-lists, because the horizontal gesture for view and content navigation will conflict. If you show
-scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list
-navigation.</p>
-
-  </div>
-</div>
-
-
-<h2 id="with-labels">Grid List with Labels</h2>
-
-<p>Use labels to display additional contextual information for your grid list items.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_style.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Style</h4>
-<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to
-control the contrast and ensures legibility of the labels while letting the content "shine through".</p>
-
-  </div>
-</div>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd
new file mode 100644
index 0000000..775ebcc
--- /dev/null
+++ b/docs/html/design/building-blocks/grid-lists.jd
@@ -0,0 +1,79 @@
+page.title=Grid Lists
+@jd:body
+
+<img src="{@docRoot}design/media/gridview_overview.png">
+
+<p>Grid lists are an alternative to standard list views. They are best suited for showing data sets
+that represent themselves through images. In contrast to simple lists, grid lists may scroll either
+vertically or horizontally.</p>
+
+
+
+<h2 id="generic_grid">Generic Grids</h2>
+
+
+<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling
+content. The scrolling direction dictates the ordering of the items within the grid list. Since the
+scrolling direction is not deterministic, make it easy for the user to determine the orientation by
+cutting off grid items to communicate where the overflow is located.</p>
+<p>Avoid creating grid lists that scroll in two dimensions.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_vertical.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Vertical scrolling</h4>
+<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
+left-to-right and top-down. When displaying the list, cut off the items in the bottom row to
+communicate that the user can scroll the list down to show additional items. Be sure to retain this
+scheme when the user rotates the screen.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_horizontal.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Horizontal scrolling</h4>
+<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
+scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ
+the same technique of cutting off the items in the rightmost column to indicate the scrolling
+direction.</p>
+<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid
+lists, because the horizontal gesture for view and content navigation will conflict. If you show
+scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list
+navigation.</p>
+
+  </div>
+</div>
+
+
+<h2 id="with-labels">Grid List with Labels</h2>
+
+<p>Use labels to display additional contextual information for your grid list items.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_style.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Style</h4>
+<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to
+control the contrast and ensures legibility of the labels while letting the content "shine through".</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/index.html b/docs/html/design/building-blocks/index.html
deleted file mode 100644
index 029cabf..0000000
--- a/docs/html/design/building-blocks/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Building Blocks
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 472px;
-  width: 450px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-<div class="layout-content-row content-header just-links">
-  <div class="layout-content-col span-9">&nbsp;</div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Your inventory of ready-to-use elements for creating outstanding apps.
-    <br><br>
-    <a href="../building-blocks/tabs.html" class="landing-page-link">Tabs</a>
-  </div>
-
-  <a href="../building-blocks/tabs.html">
-    <img src="../static/content/building_blocks_landing.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd
new file mode 100644
index 0000000..52b4915
--- /dev/null
+++ b/docs/html/design/building-blocks/index.jd
@@ -0,0 +1,29 @@
+page.title=Building Blocks
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 472px;
+  width: 450px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Your inventory of ready-to-use elements for creating outstanding apps.
+    <br><br>
+    <a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a>
+  </div>
+
+  <a href="{@docRoot}design/building-blocks/tabs.html">
+    <img src="{@docRoot}design/media/building_blocks_landing.png">
+  </a>
+</div>
diff --git a/docs/html/design/building-blocks/lists.html b/docs/html/design/building-blocks/lists.html
deleted file mode 100644
index dfd13d9..0000000
--- a/docs/html/design/building-blocks/lists.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Lists
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Lists</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as
-well as drilldown navigation.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row clearfix">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/lists_main.png">
-
-  </div>
-  <div class="layout-content-col span-4 with-callouts">
-
-<ol>
-<li>
-<h4>Section Divider</h4>
-<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
-</li>
-<li>
-<h4>Line Items</h4>
-<p>List items can accommodate a wide range of data types in different arrangements, including
- simple single-line items, multi-line items, and custom items with icons, checkboxes, and action
- buttons.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd
new file mode 100644
index 0000000..aaa86b8
--- /dev/null
+++ b/docs/html/design/building-blocks/lists.jd
@@ -0,0 +1,31 @@
+page.title=Lists
+@jd:body
+
+<p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as
+well as drilldown navigation.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row clearfix">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/lists_main.png">
+
+  </div>
+  <div class="layout-content-col span-4 with-callouts">
+
+<ol>
+<li>
+<h4>Section Divider</h4>
+<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
+</li>
+<li>
+<h4>Line Items</h4>
+<p>List items can accommodate a wide range of data types in different arrangements, including
+ simple single-line items, multi-line items, and custom items with icons, checkboxes, and action
+ buttons.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/pickers.html b/docs/html/design/building-blocks/pickers.html
deleted file mode 100644
index fc9989c..0000000
--- a/docs/html/design/building-blocks/pickers.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Pickers
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Pickers</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Pickers provide a simple way to select a single value from a set. In addition to touching the
-up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
-gesture.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-2">&nbsp;</div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/picker_space.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Space considerations</h4>
-<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
-display in a dialog. For inline display, consider using more compact controls such as text fields or
-spinners.</p>
-
-  </div>
-</div>
-
-<h2 id="date-time">Date and time pickers</h2>
-
-<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
-entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
-app helps ensure that a user's specification of a data or time input is valid and formatted
-correctly. The format of a time and date picker adjusts automatically to the locale.</p>
-
-<img src="../static/content/picker_datetime.png">
-
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd
new file mode 100644
index 0000000..85f2187
--- /dev/null
+++ b/docs/html/design/building-blocks/pickers.jd
@@ -0,0 +1,32 @@
+page.title=Pickers
+@jd:body
+
+<p>Pickers provide a simple way to select a single value from a set. In addition to touching the
+up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
+gesture.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-2">&nbsp;</div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/picker_space.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Space considerations</h4>
+<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
+display in a dialog. For inline display, consider using more compact controls such as text fields or
+spinners.</p>
+
+  </div>
+</div>
+
+<h2 id="date-time">Date and time pickers</h2>
+
+<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
+entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
+app helps ensure that a user's specification of a data or time input is valid and formatted
+correctly. The format of a time and date picker adjusts automatically to the locale.</p>
+
+<img src="{@docRoot}design/media/picker_datetime.png">
diff --git a/docs/html/design/building-blocks/progress.html b/docs/html/design/building-blocks/progress.html
deleted file mode 100644
index 500ccb1..0000000
--- a/docs/html/design/building-blocks/progress.html
+++ /dev/null
@@ -1,238 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Progress and Activity
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-
-
-          
-
-<div class="layout-content-row content-header">
-  <div class="layout-content-col span-9">
-    <h2 id="system">Feedback</h2>
-  </div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-<p>When an operation of interest to the user is taking place over a relatively long period of time,
-provide visual feedback that it's still happening and in the process of being completed.</p>
-<h2 id="progress">Progress</h2>
-
-<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
-to give the user a sense of how much longer it will take.</p>
-
-<img src="../static/content/progress_download.png">
-
-<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
-value than a previous value, or using the same progress bar to represent the progress of multiple
-events, since doing so makes the display meaningless. If you're not sure how long a particular
-operation will take, use an indeterminate progress indicator.</p>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<img src="../static/content/progress_themes.png">
-<div class="figure-caption">
-  Progress bar in Holo Dark and Holo Light.
-</div>
-
-<h2 id="activity">Activity</h2>
-
-<p>If you don't know how much longer an operation will continue, use an indeterminate progress
-indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
-available space.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/progress_activity.png">
-
-  </div>
-  <div class="layout-content-col span-7 with-callouts">
-
-    <ol>
-      <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
-        <p>
-
-An indeterminate activity bar is used at the start of an application download because Google Play hasn't
-been able to contact the server yet, and it's not possible to determine how long it will take for
-the download to begin.
-
-        </p>
-      </li>
-    </ol>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/progress_activity2.png">
-
-  </div>
-  <div class="layout-content-col span-7 with-callouts">
-
-    <ol>
-      <li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
-        <p>
-
-An indeterminate activity circle is used in the Gmail application when a message is being
-loaded because it's not possible to determine how long it will take to download the email.
-
-        </p>
-      </li>
-    </ol>
-
-  </div>
-</div>
-
-<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
-for the surrounding context. For example, the largest activity circle works well when displayed in a
-blank content area, but not in a smaller dialog box.</p>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd
new file mode 100644
index 0000000..dc3ded1
--- /dev/null
+++ b/docs/html/design/building-blocks/progress.jd
@@ -0,0 +1,80 @@
+page.title=Progress and Activity
+header.title=Feedback
+@jd:body
+
+<p>When an operation of interest to the user is taking place over a relatively long period of time,
+provide visual feedback that it's still happening and in the process of being completed.</p>
+<h2 id="progress">Progress</h2>
+
+<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
+to give the user a sense of how much longer it will take.</p>
+
+<img src="{@docRoot}design/media/progress_download.png">
+
+<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
+value than a previous value, or using the same progress bar to represent the progress of multiple
+events, since doing so makes the display meaningless. If you're not sure how long a particular
+operation will take, use an indeterminate progress indicator.</p>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<img src="{@docRoot}design/media/progress_themes.png">
+<div class="figure-caption">
+  Progress bar in Holo Dark and Holo Light.
+</div>
+
+<h2 id="activity">Activity</h2>
+
+<p>If you don't know how much longer an operation will continue, use an indeterminate progress
+indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
+available space.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/progress_activity.png">
+
+  </div>
+  <div class="layout-content-col span-7 with-callouts">
+
+    <ol>
+      <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
+        <p>
+
+An indeterminate activity bar is used at the start of an application download because Google Play hasn't
+been able to contact the server yet, and it's not possible to determine how long it will take for
+the download to begin.
+
+        </p>
+      </li>
+    </ol>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/progress_activity2.png">
+
+  </div>
+  <div class="layout-content-col span-7 with-callouts">
+
+    <ol>
+      <li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
+        <p>
+
+An indeterminate activity circle is used in the Gmail application when a message is being
+loaded because it's not possible to determine how long it will take to download the email.
+
+        </p>
+      </li>
+    </ol>
+
+  </div>
+</div>
+
+<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
+for the surrounding context. For example, the largest activity circle works well when displayed in a
+blank content area, but not in a smaller dialog box.</p>
diff --git a/docs/html/design/building-blocks/scrolling.html b/docs/html/design/building-blocks/scrolling.html
deleted file mode 100644
index 3599a97..0000000
--- a/docs/html/design/building-blocks/scrolling.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Scrolling
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Scrolling</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
-scrolling speed is proportional to the speed of the gesture.</p>
-<h2 id="indicator">Scroll Indicator</h2>
-
-<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
-
-<div class="framed-galaxynexus-land-span-13">
-  <video class="play-on-hover" autoplay>
-    <source src="../static/content/scroll_indicator.mp4" type="video/mp4">
-    <source src="../static/content/scroll_indicator.webm" type="video/webm">
-    <source src="../static/content/scroll_indicator.ogv" type="video/ogg">
-  </video>
-</div>
-<div class="figure-caption">
-  <div class="video-instructions">&nbsp;</div>
-</div>
-
-<h2 id="index-scrolling">Index Scrolling</h2>
-
-<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
-to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
-indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
-letter to pop up in a prominent way.</p>
-
-<div class="framed-galaxynexus-land-span-13">
-  <video class="play-on-hover" autoplay>
-    <source src="../static/content/scroll_index.mp4" type="video/mp4">
-    <source src="../static/content/scroll_index.webm" type="video/webm">
-    <source src="../static/content/scroll_index.ogv" type="video/ogg">
-  </video>
-</div>
-<div class="figure-caption">
-  <div class="video-instructions">&nbsp;</div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd
new file mode 100644
index 0000000..7695157
--- /dev/null
+++ b/docs/html/design/building-blocks/scrolling.jd
@@ -0,0 +1,37 @@
+page.title=Scrolling
+@jd:body
+
+<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
+scrolling speed is proportional to the speed of the gesture.</p>
+<h2 id="indicator">Scroll Indicator</h2>
+
+<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
+
+<div class="framed-galaxynexus-land-span-13">
+  <video class="play-on-hover" autoplay>
+    <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
+    <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
+    <source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg">
+  </video>
+</div>
+<div class="figure-caption">
+  <div class="video-instructions">&nbsp;</div>
+</div>
+
+<h2 id="index-scrolling">Index Scrolling</h2>
+
+<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
+to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
+indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
+letter to pop up in a prominent way.</p>
+
+<div class="framed-galaxynexus-land-span-13">
+  <video class="play-on-hover" autoplay>
+    <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
+    <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">
+    <source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg">
+  </video>
+</div>
+<div class="figure-caption">
+  <div class="video-instructions">&nbsp;</div>
+</div>
diff --git a/docs/html/design/building-blocks/seek-bars.html b/docs/html/design/building-blocks/seek-bars.html
deleted file mode 100644
index aef1823..0000000
--- a/docs/html/design/building-blocks/seek-bars.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Seek Bars and Sliders
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Seek Bars and Sliders</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
-by moving the slider thumb. The smallest value is to the left, the largest to the right. The
-interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
-such as volume, brightness, or color saturation.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/seekbar_example.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Example</h4>
-<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/seekbar_style.png">
-    <div class="figure-caption">
-      Seek bars in Holo Light &amp; Dark
-    </div>
-
-  </div>
-  <div class="layout-content-col span-4">&nbsp;</div>
-</div>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd
new file mode 100644
index 0000000..3407ddd
--- /dev/null
+++ b/docs/html/design/building-blocks/seek-bars.jd
@@ -0,0 +1,36 @@
+page.title=Seek Bars and Sliders
+@jd:body
+
+<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
+by moving the slider thumb. The smallest value is to the left, the largest to the right. The
+interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
+such as volume, brightness, or color saturation.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/seekbar_example.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Example</h4>
+<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/seekbar_style.png">
+    <div class="figure-caption">
+      Seek bars in Holo Light &amp; Dark
+    </div>
+
+  </div>
+  <div class="layout-content-col span-4">&nbsp;</div>
+</div>
diff --git a/docs/html/design/building-blocks/spinners.html b/docs/html/design/building-blocks/spinners.html
deleted file mode 100644
index 5ef9d04..0000000
--- a/docs/html/design/building-blocks/spinners.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Spinners
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Spinners</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
-its currently selected value. Touching the spinner displays a dropdown menu with all other available
-values, from which the user can select a new one.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/spinners_form.png">
-
-<h4>Spinners in forms</h4>
-<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
-components. Use spinners in forms for both simple data input and in combination with other input
-fields. For example, a text field might let you edit an email address for a contact, while its
-associated spinner allows you to select whether it's a Home or Work address.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/spinners_actionbar.png">
-
-<h4>Spinners in action bars</h4>
-<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
-between accounts or commonly used labels. Spinners are useful when changing the view is important to
-your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
-tabs.</p>
-
-  </div>
-</div>
-
-<img src="../static/content/spinners_hololightanddark.png">
-<div class="figure-caption">
-  Spinners in the Holo Dark and Holo Light themes, in various states.
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd
new file mode 100644
index 0000000..621a57c
--- /dev/null
+++ b/docs/html/design/building-blocks/spinners.jd
@@ -0,0 +1,37 @@
+page.title=Spinners
+@jd:body
+
+<p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
+its currently selected value. Touching the spinner displays a dropdown menu with all other available
+values, from which the user can select a new one.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/spinners_form.png">
+
+<h4>Spinners in forms</h4>
+<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
+components. Use spinners in forms for both simple data input and in combination with other input
+fields. For example, a text field might let you edit an email address for a contact, while its
+associated spinner allows you to select whether it's a Home or Work address.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/spinners_actionbar.png">
+
+<h4>Spinners in action bars</h4>
+<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
+between accounts or commonly used labels. Spinners are useful when changing the view is important to
+your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
+tabs.</p>
+
+  </div>
+</div>
+
+<img src="{@docRoot}design/media/spinners_hololightanddark.png">
+<div class="figure-caption">
+  Spinners in the Holo Dark and Holo Light themes, in various states.
+</div>
diff --git a/docs/html/design/building-blocks/switches.html b/docs/html/design/building-blocks/switches.html
deleted file mode 100644
index 09af540..0000000
--- a/docs/html/design/building-blocks/switches.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Switches
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Switches</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
-buttons, and on/off switches.</p>
-<h2 id="checkboxes">Checkboxes</h2>
-
-<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
-turn an option off or on. Instead, use an on/off switch.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_checkboxes.png">
-</div>
-
-<h2 id="radio-buttons">Radio Buttons</h2>
-
-<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
-selection if you think that the user needs to see all available options side-by-side. Otherwise,
-consider a spinner, which uses less space.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_radios.png">
-</div>
-
-<h2 id="switches">On/off Switches</h2>
-
-<p>On/off switches toggle the state of a single settings option.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_switches.png">
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd
new file mode 100644
index 0000000..607e0b6
--- /dev/null
+++ b/docs/html/design/building-blocks/switches.jd
@@ -0,0 +1,31 @@
+page.title=Switches
+@jd:body
+
+<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
+buttons, and on/off switches.</p>
+<h2 id="checkboxes">Checkboxes</h2>
+
+<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
+turn an option off or on. Instead, use an on/off switch.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_checkboxes.png">
+</div>
+
+<h2 id="radio-buttons">Radio Buttons</h2>
+
+<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
+selection if you think that the user needs to see all available options side-by-side. Otherwise,
+consider a spinner, which uses less space.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_radios.png">
+</div>
+
+<h2 id="switches">On/off Switches</h2>
+
+<p>On/off switches toggle the state of a single settings option.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_switches.png">
+</div>
diff --git a/docs/html/design/building-blocks/tabs.html b/docs/html/design/building-blocks/tabs.html
deleted file mode 100644
index 029e484..0000000
--- a/docs/html/design/building-blocks/tabs.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Tabs
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Tabs</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/tabs_overview.png">
-
-<p>Tabs in the action bar make it easy to explore and switch between different views or functional
-aspects of your app, or to browse categorized data sets.</p>
-
-
-<h2 id="scrollable">Scrollable Tabs</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
-to the next/previous view, swipe left or right.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <video width="400" class="with-shadow play-on-hover" autoplay>
-      <source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
-      <source src="../static/content/tabs_scrolly.webm" type="video/webm">
-      <source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
-    </video>
-    <div class="figure-caption">
-      Scrolling tabs on Google Play.
-      <div class="video-instructions">&nbsp;</div>
-    </div>
-
-  </div>
-</div>
-
-
-<h2 id="fixed">Fixed Tabs</h2>
-
-
-<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p>
-
-<img src="../static/content/tabs_standard.png">
-<div class="figure-caption">
-  Tabs in Holo Dark &amp; Light.
-</div>
-
-<img src="../static/content/tabs_youtube.png">
-<div class="figure-caption">
-  Tabs in the YouTube app.
-</div>
-
-
-
-<h2 id="stacked">Stacked Tabs</h2>
-
-
-<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
-permits fast view switching even on narrower screens.</p>
-
-<img src="../static/content/tabs_stacked.png">
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd
new file mode 100644
index 0000000..2c854d3
--- /dev/null
+++ b/docs/html/design/building-blocks/tabs.jd
@@ -0,0 +1,59 @@
+page.title=Tabs
+@jd:body
+
+<img src="{@docRoot}design/media/tabs_overview.png">
+
+<p>Tabs in the action bar make it easy to explore and switch between different views or functional
+aspects of your app, or to browse categorized data sets.</p>
+
+
+<h2 id="scrollable">Scrollable Tabs</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
+to the next/previous view, swipe left or right.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <video width="400" class="with-shadow play-on-hover" autoplay>
+      <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
+      <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
+      <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
+    </video>
+    <div class="figure-caption">
+      Scrolling tabs in Google Play.
+      <div class="video-instructions">&nbsp;</div>
+    </div>
+
+  </div>
+</div>
+
+
+<h2 id="fixed">Fixed Tabs</h2>
+
+
+<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p>
+
+<img src="{@docRoot}design/media/tabs_standard.png">
+<div class="figure-caption">
+  Tabs in Holo Dark &amp; Light.
+</div>
+
+<img src="{@docRoot}design/media/tabs_youtube.png">
+<div class="figure-caption">
+  Tabs in the YouTube app.
+</div>
+
+
+
+<h2 id="stacked">Stacked Tabs</h2>
+
+
+<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
+permits fast view switching even on narrower screens.</p>
+
+<img src="{@docRoot}design/media/tabs_stacked.png">
diff --git a/docs/html/design/building-blocks/text-fields.html b/docs/html/design/building-blocks/text-fields.html
deleted file mode 100644
index b9ec42d..0000000
--- a/docs/html/design/building-blocks/text-fields.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Text Fields
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Text Fields</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Text fields allow the user to type text into your app. They can be either single line or multi-line.
-Touching a text field places the cursor and automatically displays the keyboard. In addition to
-typing, text fields allow for a variety of other activities, such as text selection (cut, copy,
-paste) and data lookup via auto-completion.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-12">
-
-    <img src="../static/content/text_input_singlevsmultiline.png">
-
-  </div>
-</div>
-
-<h4>Single line and multi line</h4>
-<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches
-the right edge of the input field. Multi-line text fields automatically break to a new line for
-overflow text and scroll vertically when the cursor reaches the lower edge.</p>
-
-<img src="../static/content/text_input_typesandtypedown.png">
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Text field types</h4>
-<p>Text fields can have different types, such as number, message, or email address. The type determines
-what kind of characters are allowed inside the field, and may prompt the virtual keyboard to
-optimize its layout for frequently used characters.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Auto-complete text fields</h4>
-<p>Use auto-complete text fields to present real-time completions or search results in popups, so users
-can enter information more accurately and efficiently.</p>
-
-  </div>
-</div>
-
-<h2 id="text-selection">Text Selection</h2>
-
-<p>Users can select any word in a text field with a long press. This action triggers a text selection
-mode that facilitates extending the selection or choosing an action to perform on the selected text.
-Selection mode includes:</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/text_input_textselection.png">
-
-  </div>
-  <div class="layout-content-col span-4 with-callouts">
-
-<ol>
-<li>
-<h4>Contextual action bar</h4>
-<p>A contextual action bar (CAB) displays the actions available to perform on the selection:
- typically cut, copy, and paste, but apps can insert additional commands as needed.</p>
-</li>
-<li>
-<h4>Selection handles</h4>
-<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd
new file mode 100644
index 0000000..1b10420
--- /dev/null
+++ b/docs/html/design/building-blocks/text-fields.jd
@@ -0,0 +1,70 @@
+page.title=Text Fields
+@jd:body
+
+<p>Text fields allow the user to type text into your app. They can be either single line or multi-line.
+Touching a text field places the cursor and automatically displays the keyboard. In addition to
+typing, text fields allow for a variety of other activities, such as text selection (cut, copy,
+paste) and data lookup via auto-completion.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-12">
+
+    <img src="{@docRoot}design/media/text_input_singlevsmultiline.png">
+
+  </div>
+</div>
+
+<h4>Single line and multi line</h4>
+<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches
+the right edge of the input field. Multi-line text fields automatically break to a new line for
+overflow text and scroll vertically when the cursor reaches the lower edge.</p>
+
+<img src="{@docRoot}design/media/text_input_typesandtypedown.png">
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Text field types</h4>
+<p>Text fields can have different types, such as number, message, or email address. The type determines
+what kind of characters are allowed inside the field, and may prompt the virtual keyboard to
+optimize its layout for frequently used characters.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Auto-complete text fields</h4>
+<p>Use auto-complete text fields to present real-time completions or search results in popups, so users
+can enter information more accurately and efficiently.</p>
+
+  </div>
+</div>
+
+<h2 id="text-selection">Text Selection</h2>
+
+<p>Users can select any word in a text field with a long press. This action triggers a text selection
+mode that facilitates extending the selection or choosing an action to perform on the selected text.
+Selection mode includes:</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/text_input_textselection.png">
+
+  </div>
+  <div class="layout-content-col span-4 with-callouts">
+
+<ol>
+<li>
+<h4>Contextual action bar</h4>
+<p>A contextual action bar (CAB) displays the actions available to perform on the selection:
+ typically cut, copy, and paste, but apps can insert additional commands as needed.</p>
+</li>
+<li>
+<h4>Selection handles</h4>
+<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
new file mode 100644
index 0000000..19b58d9
--- /dev/null
+++ b/docs/html/design/design_toc.cs
@@ -0,0 +1,69 @@
+<ul id="nav">
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li>
+      <li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li>
+      <li><a href="<?cs var:toroot ?>design/get-started/ui-overview.html">UI Overview</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/themes.html">Themes</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/touch-feedback.html">Touch Feedback</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/metrics-grids.html">Metrics and Grids</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/patterns/new-4-0.html">New in Android 4.0</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/tabs.html">Tabs</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/lists.html">Lists</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/grid-lists.html">Grid Lists</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/scrolling.html">Scrolling</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/spinners.html">Spinners</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/buttons.html">Buttons</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/text-fields.html">Text Fields</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/seek-bars.html">Seek Bars</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/progress.html">Progress &amp; Activity</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/switches.html">Switches</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/dialogs.html">Dialogs</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/pickers.html">Pickers</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
+  </li>
+
+  <li>
+    <div id="back-dac-section"><a href="<?cs var:toroot ?>index.html">Developers</a></div>
+  </li>
+
+</ul>
+\ No newline at end of file
diff --git a/docs/html/design/downloads/index.html b/docs/html/design/downloads/index.html
deleted file mode 100644
index f910b29..0000000
--- a/docs/html/design/downloads/index.html
+++ /dev/null
@@ -1,278 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Downloads
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Downloads</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
-You can also download individual files listed below.</p>
-<p>You may use these materials without restriction in your apps and to develop your apps.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="stencils">Stencils and Sources</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
-rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
-phone and tablet outlines to frame your creations. Source files for icons and controls are also
-available.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_stencils.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe&reg; Photoshop&reg; Sources</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<p>Action bar icons are graphic buttons that represent the most important actions people can take
-within your app. <a href="../style/iconography.html">More on Action Bar Iconography</a></p>
-<p>The download package includes icons that are scaled for various screen densities and suitable for
-use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
-modify to match your theme, plus source files.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/iconography_actionbar_style.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="style">Style</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Roboto</h4>
-<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
-requirements of UI and high-resolution screens.</p>
-<p><a href="../style/typography.html#actionbar">More on Roboto</a></p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_roboto_specimen_preview.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
-</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Color</h4>
-<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
-shade that can be used as a complement when needed.</p>
-<p><a href="../style/color.html">More on Color</a></p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_color_swatches.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
-</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
new file mode 100644
index 0000000..618c44b
--- /dev/null
+++ b/docs/html/design/downloads/index.jd
@@ -0,0 +1,121 @@
+page.title=Downloads
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
+You can also download individual files listed below.</p>
+<p>You may use these materials without restriction in your apps and to develop your apps.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="stencils">Stencils and Sources</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
+rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
+phone and tablet outlines to frame your creations. Source files for icons and controls are also
+available.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_stencils.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe&reg; Photoshop&reg; Sources</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<p>Action bar icons are graphic buttons that represent the most important actions people can take
+within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
+<p>The download package includes icons that are scaled for various screen densities and suitable for
+use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
+modify to match your theme, plus source files.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/iconography_actionbar_style.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="style">Style</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Roboto</h4>
+<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
+requirements of UI and high-resolution screens.</p>
+<p><a href="{@docRoot}design/style/typography.html#actionbar">More on Roboto</a></p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
+</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Color</h4>
+<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
+shade that can be used as a complement when needed.</p>
+<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_color_swatches.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
+</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/creative-vision.html b/docs/html/design/get-started/creative-vision.html
deleted file mode 100644
index 154f8d0..0000000
--- a/docs/html/design/get-started/creative-vision.html
+++ /dev/null
@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Creative Vision
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Creative Vision</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/creative_vision_main.png">
-
-<div class="vspace size-1">&nbsp;</div>
-
-<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
-pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
-types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
-designed for high-resolution displays. Other big changes include framework-level action bars on
-phones and support for new phones without physical buttons.</p>
-<p>We focused the design work with three overarching goals for our core apps and the system at large.
-As you design apps to work with Android, consider these goals:</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Enchant me</h4>
-<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
-Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
-of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
-simplicity and purpose to create a magical experience that is effortless and powerful.</p>
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Simplify my life</h4>
-<p>Android apps make life easier and are easy to understand. When people use your app for the first
-time, they should intuitively grasp the most important features. The design work doesn't stop at the
-first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
-never require complex procedures, and complex tasks are tailored to the human hand and mind. People
-of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
-irrelevant flash.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<h4>Make me amazing</h4>
-<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
-and to use apps in inventive new ways. Android lets people combine applications into new workflows
-through multitasking, notifications, and sharing across apps. At the same time, your app should feel
-personal, giving people access to superb technology with clarity and grace.</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd
new file mode 100644
index 0000000..792b97d
--- /dev/null
+++ b/docs/html/design/get-started/creative-vision.jd
@@ -0,0 +1,48 @@
+page.title=Creative Vision
+@jd:body
+
+<img src="{@docRoot}design/media/creative_vision_main.png">
+
+<div class="vspace size-1">&nbsp;</div>
+
+<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
+pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
+types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
+designed for high-resolution displays. Other big changes include framework-level action bars on
+phones and support for new phones without physical buttons.</p>
+<p>We focused the design work with three overarching goals for our core apps and the system at large.
+As you design apps to work with Android, consider these goals:</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Enchant me</h4>
+<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
+Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
+of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
+simplicity and purpose to create a magical experience that is effortless and powerful.</p>
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Simplify my life</h4>
+<p>Android apps make life easier and are easy to understand. When people use your app for the first
+time, they should intuitively grasp the most important features. The design work doesn't stop at the
+first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
+never require complex procedures, and complex tasks are tailored to the human hand and mind. People
+of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
+irrelevant flash.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<h4>Make me amazing</h4>
+<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
+and to use apps in inventive new ways. Android lets people combine applications into new workflows
+through multitasking, notifications, and sharing across apps. At the same time, your app should feel
+personal, giving people access to superb technology with clarity and grace.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/principles.html b/docs/html/design/get-started/principles.html
deleted file mode 100644
index f10a90d..0000000
--- a/docs/html/design/get-started/principles.html
+++ /dev/null
@@ -1,457 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Design Principles
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Design Principles</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>These design principles were developed by and for the Android User Experience Team to keep users'
-best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
-with purpose.</p>
-
-<h2 id="enchant-me">Enchant Me</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Delight me in surprising ways</h4>
-<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
-experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
-force is at hand.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_delight.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Real objects are more fun than buttons and menus</h4>
-<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
-needed to perform a task while making it more emotionally satisfying.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_real_objects.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Let me make it mine</h4>
-<p>People love to add personal touches because it helps them feel at home and in control. Provide
-sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
-primary tasks.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_make_it_mine.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Get to know me</h4>
-<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
-over, place previous choices within easy reach.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_get_to_know_me.png">
-
-  </div>
-</div>
-
-<h2 id="simplify-my-life">Simplify My Life</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Keep it brief</h4>
-<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_keep_it_brief.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Pictures are faster than words</h4>
-<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
-than words.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_pictures.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Decide for me but let me have the final say</h4>
-<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
-unhappy. Just in case you get it wrong, allow for 'undo'.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_decide_for_me.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Only show what I need when I need it</h4>
-<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
-digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_information_when_need_it.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>I should always know where I am</h4>
-<p>Give people confidence that they know their way around. Make places in your app look distinct and
-use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_navigation.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Never lose my stuff</h4>
-<p>Save what people took time to create and let them access it from anywhere. Remember settings,
-personal touches, and creations across phones, tablets, and computers. It makes upgrading the
-easiest thing in the world.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_never_lose_stuff.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>If it looks the same, it should act the same</h4>
-<p>Help people discern functional differences by making them visually distinct rather than subtle.
-Avoid modes, which are places that look similar but act differently on the same input.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_looks_same.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Only interrupt me if it's important</h4>
-<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
-focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_important_interruption.png">
-
-  </div>
-</div>
-
-<h2 id="make-me-amazing">Make Me Amazing</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Give me tricks that work everywhere</h4>
-<p>People feel great when they figure things out for themselves. Make your app easier to learn by
-leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
-may be a good navigational shortcut.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_tricks.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>It's not my fault</h4>
-<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
-app. If something goes wrong, give clear recovery instructions but spare them the technical details.
-If you can fix it behind the scenes, even better.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_error.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Sprinkle encouragement</h4>
-<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
-even if it's just a subtle glow.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_sprinkle_encouragement.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Do the heavy lifting for me</h4>
-<p>Make novices feel like experts by enabling them to do things they never thought they could. For
-example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
-only a few steps.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_heavy_lifting.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Make important things fast</h4>
-<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
-fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_make_important_fast.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd
new file mode 100644
index 0000000..8f5b446
--- /dev/null
+++ b/docs/html/design/get-started/principles.jd
@@ -0,0 +1,300 @@
+page.title=Design Principles
+@jd:body
+
+<p>These design principles were developed by and for the Android User Experience Team to keep users'
+best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
+with purpose.</p>
+
+<h2 id="enchant-me">Enchant Me</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Delight me in surprising ways</h4>
+<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
+experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
+force is at hand.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_delight.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Real objects are more fun than buttons and menus</h4>
+<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
+needed to perform a task while making it more emotionally satisfying.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_real_objects.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Let me make it mine</h4>
+<p>People love to add personal touches because it helps them feel at home and in control. Provide
+sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
+primary tasks.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_it_mine.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Get to know me</h4>
+<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
+over, place previous choices within easy reach.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_get_to_know_me.png">
+
+  </div>
+</div>
+
+<h2 id="simplify-my-life">Simplify My Life</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Keep it brief</h4>
+<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_keep_it_brief.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Pictures are faster than words</h4>
+<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
+than words.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_pictures.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Decide for me but let me have the final say</h4>
+<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
+unhappy. Just in case you get it wrong, allow for 'undo'.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_decide_for_me.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Only show what I need when I need it</h4>
+<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
+digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_information_when_need_it.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>I should always know where I am</h4>
+<p>Give people confidence that they know their way around. Make places in your app look distinct and
+use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_navigation.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Never lose my stuff</h4>
+<p>Save what people took time to create and let them access it from anywhere. Remember settings,
+personal touches, and creations across phones, tablets, and computers. It makes upgrading the
+easiest thing in the world.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>If it looks the same, it should act the same</h4>
+<p>Help people discern functional differences by making them visually distinct rather than subtle.
+Avoid modes, which are places that look similar but act differently on the same input.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_looks_same.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Only interrupt me if it's important</h4>
+<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
+focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_important_interruption.png">
+
+  </div>
+</div>
+
+<h2 id="make-me-amazing">Make Me Amazing</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Give me tricks that work everywhere</h4>
+<p>People feel great when they figure things out for themselves. Make your app easier to learn by
+leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
+may be a good navigational shortcut.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_tricks.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>It's not my fault</h4>
+<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
+app. If something goes wrong, give clear recovery instructions but spare them the technical details.
+If you can fix it behind the scenes, even better.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_error.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Sprinkle encouragement</h4>
+<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
+even if it's just a subtle glow.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Do the heavy lifting for me</h4>
+<p>Make novices feel like experts by enabling them to do things they never thought they could. For
+example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
+only a few steps.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_heavy_lifting.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Make important things fast</h4>
+<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
+fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_important_fast.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/ui-overview.html b/docs/html/design/get-started/ui-overview.html
deleted file mode 100644
index a4881d5..0000000
--- a/docs/html/design/get-started/ui-overview.html
+++ /dev/null
@@ -1,306 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - UI Overview
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>UI Overview</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Android's system UI provides the framework on top of which you build your app. Important aspects
-include the Home screen experience, global device navigation, and notifications.</p>
-<p>Your app will play an important part in keeping the overall Android experience consistent and
-enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
-in your app.</p>
-<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
-
-<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_home_screen.png">
-
-<h4>Home screen</h4>
-<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
-different home screen panels by swiping left and right.</p>
-<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
-regardless of which panel is currently showing.</p>
-<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
-the Favorites Tray.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_all_apps.png">
-
-<h4>All apps screen</h4>
-<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
-device.</p>
-<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
-any Home screen.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_recents.png">
-
-<h4>Recents screen</h4>
-<p>Recents provides an efficient way of switching between recently used applications. It provides a
-clear navigation path between multiple ongoing tasks.</p>
-<p>The Recents button at the right side of the navigation bar displays the apps that the user has
-interacted with most recently. They are organized in reverse chronological order with the most
-recently used app at the bottom.</p>
-<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
-
-  </div>
-</div>
-
-<h2 id="system-bars">System Bars</h2>
-
-<p>The system bars are screen areas dedicated to the display of notifications, communication of device
-status, and device navigation. Typically the system bars are displayed concurrently with your app.
-Apps that display immersive content, such as movies or images, can temporarily hide the system bars
-to allow the user to enjoy full screen content without distraction.</p>
-
-<img src="../static/content/ui_overview_system_ui.png">
-
-<div class="with-callouts">
-
-<ol>
-<li>
-<h4>Status Bar</h4>
-<p>Displays pending notifications on the left and status, such as time, battery level, or signal
-  strength, on the right. Swipe down from the status bar to show notification details.</p>
-</li>
-<li>
-<h4>Navigation Bar</h4>
-<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
-  the traditional hardware keys. It houses the device navigation controls Back, Home, and
-  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
-</li>
-<li>
-<h4>Combined Bar</h4>
-<p>On tablet form factors the status and navigation bars are combined into a single bar at the
-  bottom of the screen.</p>
-</li>
-</ol>
-
-</div>
-
-<h2 id="notifications">Notifications</h2>
-
-<p>Notifications are brief messages that users can access at any time from the status bar. They
-provide updates, reminders, or information that's important, but not critical enough to warrant
-interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
-notification opens the associated app. <a href="../patterns/notifications.html">More on Notifications</a></p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_notifications.png">
-
-  </div>
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/notifications_dismiss.png">
-
-<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
-notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
-<p>Swiping a notification right or left removes it from the notification drawer.</p>
-
-  </div>
-</div>
-
-
-<h2 id="app">Common App UI</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/ui_overview_app_ui.png">
-
-  </div>
-  <div class="layout-content-col span-6 with-callouts">
-
-<p>A typical Android app consists of action bars and the app content area.</p>
-<ol>
-<li>
-<h4>Main Action Bar</h4>
-<p>The command and control center for your app. The main action bar includes elements for
-  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
-<p><a href="../patterns/actionbar.html">More on the Action Bar</a></p>
-</li>
-<li>
-<h4>View Control</h4>
-<p>Allows users to switch between the different views that your app provides. Views typically
-  consist of different arrangements of your data or different functional aspects of your app.</p>
-</li>
-<li>
-<h4>Content Area</h4>
-<p>The space where the content of your app is displayed.</p>
-</li>
-<li>
-<h4>Split Action Bar</h4>
-<p>Split action bars provide a way to distribute actions across additional bars located below
-  the main action bar or at the bottom of the screen. In this example, a split action bar moves
-  important actions that won't fit in the main bar to the bottom.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd
new file mode 100644
index 0000000..34cdd06
--- /dev/null
+++ b/docs/html/design/get-started/ui-overview.jd
@@ -0,0 +1,149 @@
+page.title=UI Overview
+@jd:body
+
+<p>Android's system UI provides the framework on top of which you build your app. Important aspects
+include the Home screen experience, global device navigation, and notifications.</p>
+<p>Your app will play an important part in keeping the overall Android experience consistent and
+enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
+in your app.</p>
+<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
+
+<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_home_screen.png">
+
+<h4>Home screen</h4>
+<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
+different home screen panels by swiping left and right.</p>
+<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
+regardless of which panel is currently showing.</p>
+<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
+the Favorites Tray.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_all_apps.png">
+
+<h4>All apps screen</h4>
+<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
+device.</p>
+<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
+any Home screen.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_recents.png">
+
+<h4>Recents screen</h4>
+<p>Recents provides an efficient way of switching between recently used applications. It provides a
+clear navigation path between multiple ongoing tasks.</p>
+<p>The Recents button at the right side of the navigation bar displays the apps that the user has
+interacted with most recently. They are organized in reverse chronological order with the most
+recently used app at the bottom.</p>
+<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
+
+  </div>
+</div>
+
+<h2 id="system-bars">System Bars</h2>
+
+<p>The system bars are screen areas dedicated to the display of notifications, communication of device
+status, and device navigation. Typically the system bars are displayed concurrently with your app.
+Apps that display immersive content, such as movies or images, can temporarily hide the system bars
+to allow the user to enjoy full screen content without distraction.</p>
+
+<img src="{@docRoot}design/media/ui_overview_system_ui.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Status Bar</h4>
+<p>Displays pending notifications on the left and status, such as time, battery level, or signal
+  strength, on the right. Swipe down from the status bar to show notification details.</p>
+</li>
+<li>
+<h4>Navigation Bar</h4>
+<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
+  the traditional hardware keys. It houses the device navigation controls Back, Home, and
+  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
+</li>
+<li>
+<h4>Combined Bar</h4>
+<p>On tablet form factors the status and navigation bars are combined into a single bar at the
+  bottom of the screen.</p>
+</li>
+</ol>
+
+</div>
+
+<h2 id="notifications">Notifications</h2>
+
+<p>Notifications are brief messages that users can access at any time from the status bar. They
+provide updates, reminders, or information that's important, but not critical enough to warrant
+interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
+notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_notifications.png">
+
+  </div>
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/notifications_dismiss.png">
+
+<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
+notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
+<p>Swiping a notification right or left removes it from the notification drawer.</p>
+
+  </div>
+</div>
+
+
+<h2 id="app">Common App UI</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+
+  </div>
+  <div class="layout-content-col span-6 with-callouts">
+
+<p>A typical Android app consists of action bars and the app content area.</p>
+<ol>
+<li>
+<h4>Main Action Bar</h4>
+<p>The command and control center for your app. The main action bar includes elements for
+  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
+</li>
+<li>
+<h4>View Control</h4>
+<p>Allows users to switch between the different views that your app provides. Views typically
+  consist of different arrangements of your data or different functional aspects of your app.</p>
+</li>
+<li>
+<h4>Content Area</h4>
+<p>The space where the content of your app is displayed.</p>
+</li>
+<li>
+<h4>Split Action Bar</h4>
+<p>Split action bars provide a way to distribute actions across additional bars located below
+  the main action bar or at the bottom of the screen. In this example, a split action bar moves
+  important actions that won't fit in the main bar to the bottom.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/index.html b/docs/html/design/index.html
deleted file mode 100644
index 8583aa4..0000000
--- a/docs/html/design/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Welcome
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 472px;
-  width: 280px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="index.html">Get Started</a></div>
-            <ul>
-              <li><a href="get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="get-started/principles.html">Design Principles</a></li>
-              <li><a href="get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="style/index.html">Style</a></div>
-            <ul>
-              <li><a href="style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="style/themes.html">Themes</a></li>
-              <li><a href="style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="style/typography.html">Typography</a></li>
-              <li><a href="style/color.html">Color</a></li>
-              <li><a href="style/iconography.html">Iconography</a></li>
-              <li><a href="style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="patterns/gestures.html">Gestures</a></li>
-              <li><a href="patterns/app-structure.html">App Structure</a></li>
-              <li><a href="patterns/navigation.html">Navigation</a></li>
-              <li><a href="patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="patterns/selection.html">Selection</a></li>
-              <li><a href="patterns/notifications.html">Notifications</a></li>
-              <li><a href="patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="building-blocks/lists.html">Lists</a></li>
-              <li><a href="building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="building-blocks/switches.html">Switches</a></li>
-              <li><a href="building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
-    <br><br>
-    <a href="get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
-  </div>
-
-  <a href="get-started/creative-vision.html">
-    <img src="static/content/index_landing_page.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '';
-    </script>
-    <script src="static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
new file mode 100644
index 0000000..d404aa6
--- /dev/null
+++ b/docs/html/design/index.jd
@@ -0,0 +1,29 @@
+page.title=
+header.hide=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 472px;
+  width: 280px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
+    <br><br>
+    <a href="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
+  </div>
+
+  <a href="{@docRoot}design/get-started/creative-vision.html">
+    <img src="{@docRoot}design/media/index_landing_page.png">
+  </a>
+</div>
diff --git a/docs/html/design/static/content/action_bar_basics.png b/docs/html/design/media/action_bar_basics.png
index 0bf3d56..0bf3d56 100644
--- a/docs/html/design/static/content/action_bar_basics.png
+++ b/docs/html/design/media/action_bar_basics.png
diff --git a/docs/html/design/static/content/action_bar_cab.png b/docs/html/design/media/action_bar_cab.png
index aa629b9..aa629b9 100644
--- a/docs/html/design/static/content/action_bar_cab.png
+++ b/docs/html/design/media/action_bar_cab.png
diff --git a/docs/html/design/static/content/action_bar_pattern_action_icons.png b/docs/html/design/media/action_bar_pattern_action_icons.png
index 66f7f87..66f7f87 100644
--- a/docs/html/design/static/content/action_bar_pattern_action_icons.png
+++ b/docs/html/design/media/action_bar_pattern_action_icons.png
diff --git a/docs/html/design/static/content/action_bar_pattern_considerations.png b/docs/html/design/media/action_bar_pattern_considerations.png
index 977e7f2..977e7f2 100644
--- a/docs/html/design/static/content/action_bar_pattern_considerations.png
+++ b/docs/html/design/media/action_bar_pattern_considerations.png
diff --git a/docs/html/design/static/content/action_bar_pattern_default_tabs.png b/docs/html/design/media/action_bar_pattern_default_tabs.png
index 69df289..69df289 100644
--- a/docs/html/design/static/content/action_bar_pattern_default_tabs.png
+++ b/docs/html/design/media/action_bar_pattern_default_tabs.png
diff --git a/docs/html/design/static/content/action_bar_pattern_overflow.png b/docs/html/design/media/action_bar_pattern_overflow.png
index 9c69cfe..9c69cfe 100644
--- a/docs/html/design/static/content/action_bar_pattern_overflow.png
+++ b/docs/html/design/media/action_bar_pattern_overflow.png
diff --git a/docs/html/design/static/content/action_bar_pattern_overview.png b/docs/html/design/media/action_bar_pattern_overview.png
index 83a986b..83a986b 100644
--- a/docs/html/design/static/content/action_bar_pattern_overview.png
+++ b/docs/html/design/media/action_bar_pattern_overview.png
diff --git a/docs/html/design/static/content/action_bar_pattern_rotation.png b/docs/html/design/media/action_bar_pattern_rotation.png
index 5b9a656..5b9a656 100644
--- a/docs/html/design/static/content/action_bar_pattern_rotation.png
+++ b/docs/html/design/media/action_bar_pattern_rotation.png
diff --git a/docs/html/design/static/content/action_bar_pattern_share_pack.png b/docs/html/design/media/action_bar_pattern_share_pack.png
index 7ae8a0a..7ae8a0a 100644
--- a/docs/html/design/static/content/action_bar_pattern_share_pack.png
+++ b/docs/html/design/media/action_bar_pattern_share_pack.png
diff --git a/docs/html/design/static/content/action_bar_pattern_spinner.png b/docs/html/design/media/action_bar_pattern_spinner.png
index 9c054b5..9c054b5 100644
--- a/docs/html/design/static/content/action_bar_pattern_spinner.png
+++ b/docs/html/design/media/action_bar_pattern_spinner.png
diff --git a/docs/html/design/static/content/action_bar_pattern_table.png b/docs/html/design/media/action_bar_pattern_table.png
index dac7e21..dac7e21 100644
--- a/docs/html/design/static/content/action_bar_pattern_table.png
+++ b/docs/html/design/media/action_bar_pattern_table.png
diff --git a/docs/html/design/static/content/action_bar_pattern_up_app_icon.png b/docs/html/design/media/action_bar_pattern_up_app_icon.png
index 11b8aa9..11b8aa9 100644
--- a/docs/html/design/static/content/action_bar_pattern_up_app_icon.png
+++ b/docs/html/design/media/action_bar_pattern_up_app_icon.png
diff --git a/docs/html/design/static/content/app_structure_book_detail_page_flip.png b/docs/html/design/media/app_structure_book_detail_page_flip.png
index 13c9c52..13c9c52 100644
--- a/docs/html/design/static/content/app_structure_book_detail_page_flip.png
+++ b/docs/html/design/media/app_structure_book_detail_page_flip.png
diff --git a/docs/html/design/static/content/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png
index e41f97e..e41f97e 100644
--- a/docs/html/design/static/content/app_structure_fixedtabs.png
+++ b/docs/html/design/media/app_structure_fixedtabs.png
diff --git a/docs/html/design/static/content/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png
index deed672..deed672 100644
--- a/docs/html/design/static/content/app_structure_gallery_filmstrip.png
+++ b/docs/html/design/media/app_structure_gallery_filmstrip.png
diff --git a/docs/html/design/static/content/app_structure_gmail.png b/docs/html/design/media/app_structure_gmail.png
index 862ac75..862ac75 100644
--- a/docs/html/design/static/content/app_structure_gmail.png
+++ b/docs/html/design/media/app_structure_gmail.png
diff --git a/docs/html/design/static/content/app_structure_gmail_swipe.png b/docs/html/design/media/app_structure_gmail_swipe.png
index 21da4ac..21da4ac 100644
--- a/docs/html/design/static/content/app_structure_gmail_swipe.png
+++ b/docs/html/design/media/app_structure_gmail_swipe.png
diff --git a/docs/html/design/static/content/app_structure_market.png b/docs/html/design/media/app_structure_market.png
index 3b0b786..3b0b786 100644
--- a/docs/html/design/static/content/app_structure_market.png
+++ b/docs/html/design/media/app_structure_market.png
diff --git a/docs/html/design/static/content/app_structure_music_lndscp.png b/docs/html/design/media/app_structure_music_lndscp.png
index 0dd400c..0dd400c 100644
--- a/docs/html/design/static/content/app_structure_music_lndscp.png
+++ b/docs/html/design/media/app_structure_music_lndscp.png
diff --git a/docs/html/design/static/content/app_structure_overview.png b/docs/html/design/media/app_structure_overview.png
index 5ba25b4..5ba25b4 100644
--- a/docs/html/design/static/content/app_structure_overview.png
+++ b/docs/html/design/media/app_structure_overview.png
diff --git a/docs/html/design/static/content/app_structure_people_detail.png b/docs/html/design/media/app_structure_people_detail.png
index b870796..b870796 100644
--- a/docs/html/design/static/content/app_structure_people_detail.png
+++ b/docs/html/design/media/app_structure_people_detail.png
diff --git a/docs/html/design/static/content/app_structure_scrolltabs.png b/docs/html/design/media/app_structure_scrolltabs.png
index ef4fca4..ef4fca4 100644
--- a/docs/html/design/static/content/app_structure_scrolltabs.png
+++ b/docs/html/design/media/app_structure_scrolltabs.png
diff --git a/docs/html/design/static/content/app_structure_shortcut_on_item.png b/docs/html/design/media/app_structure_shortcut_on_item.png
index 3874e1d4..3874e1d4 100644
--- a/docs/html/design/static/content/app_structure_shortcut_on_item.png
+++ b/docs/html/design/media/app_structure_shortcut_on_item.png
diff --git a/docs/html/design/static/content/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png
index 2da47b7..2da47b7 100644
--- a/docs/html/design/static/content/building_blocks_landing.png
+++ b/docs/html/design/media/building_blocks_landing.png
diff --git a/docs/html/design/static/content/buttons_basic.png b/docs/html/design/media/buttons_basic.png
index 7fa3d09..7fa3d09 100644
--- a/docs/html/design/static/content/buttons_basic.png
+++ b/docs/html/design/media/buttons_basic.png
diff --git a/docs/html/design/static/content/buttons_borderless.png b/docs/html/design/media/buttons_borderless.png
index 1a9d906..1a9d906 100644
--- a/docs/html/design/static/content/buttons_borderless.png
+++ b/docs/html/design/media/buttons_borderless.png
diff --git a/docs/html/design/static/content/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png
index 3e776ed..3e776ed 100644
--- a/docs/html/design/static/content/buttons_default_small.png
+++ b/docs/html/design/media/buttons_default_small.png
diff --git a/docs/html/design/static/content/color_spectrum.png b/docs/html/design/media/color_spectrum.png
index 3fd7a57..3fd7a57 100644
--- a/docs/html/design/static/content/color_spectrum.png
+++ b/docs/html/design/media/color_spectrum.png
diff --git a/docs/html/design/static/content/compatibility_legacy_apps.png b/docs/html/design/media/compatibility_legacy_apps.png
index a0400e1..a0400e1 100644
--- a/docs/html/design/static/content/compatibility_legacy_apps.png
+++ b/docs/html/design/media/compatibility_legacy_apps.png
diff --git a/docs/html/design/static/content/compatibility_physical_buttons.png b/docs/html/design/media/compatibility_physical_buttons.png
index 30d5ddd..30d5ddd 100644
--- a/docs/html/design/static/content/compatibility_physical_buttons.png
+++ b/docs/html/design/media/compatibility_physical_buttons.png
diff --git a/docs/html/design/static/content/compatibility_virtual_nav.png b/docs/html/design/media/compatibility_virtual_nav.png
index ea595a4..ea595a4 100644
--- a/docs/html/design/static/content/compatibility_virtual_nav.png
+++ b/docs/html/design/media/compatibility_virtual_nav.png
diff --git a/docs/html/design/static/content/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png
index c9d31cb..c9d31cb 100644
--- a/docs/html/design/static/content/creative_vision_main.png
+++ b/docs/html/design/media/creative_vision_main.png
diff --git a/docs/html/design/static/content/design_elements_landing.png b/docs/html/design/media/design_elements_landing.png
index d078cef..d078cef 100644
--- a/docs/html/design/static/content/design_elements_landing.png
+++ b/docs/html/design/media/design_elements_landing.png
diff --git a/docs/html/design/static/content/devices_displays_density.png b/docs/html/design/media/devices_displays_density.png
index a21b482..a21b482 100644
--- a/docs/html/design/static/content/devices_displays_density.png
+++ b/docs/html/design/media/devices_displays_density.png
diff --git a/docs/html/design/static/content/devices_displays_main.png b/docs/html/design/media/devices_displays_main.png
index fd1c645..fd1c645 100644
--- a/docs/html/design/static/content/devices_displays_main.png
+++ b/docs/html/design/media/devices_displays_main.png
diff --git a/docs/html/design/static/content/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png
index 981c5f3..981c5f3 100644
--- a/docs/html/design/static/content/dialogs_examples.png
+++ b/docs/html/design/media/dialogs_examples.png
diff --git a/docs/html/design/static/content/dialogs_main.png b/docs/html/design/media/dialogs_main.png
index b95266a..b95266a 100644
--- a/docs/html/design/static/content/dialogs_main.png
+++ b/docs/html/design/media/dialogs_main.png
diff --git a/docs/html/design/static/content/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png
index c2a66f6..c2a66f6 100644
--- a/docs/html/design/static/content/dialogs_popups_example.png
+++ b/docs/html/design/media/dialogs_popups_example.png
diff --git a/docs/html/design/static/content/dialogs_toasts.png b/docs/html/design/media/dialogs_toasts.png
index cc0b815..cc0b815 100644
--- a/docs/html/design/static/content/dialogs_toasts.png
+++ b/docs/html/design/media/dialogs_toasts.png
diff --git a/docs/html/design/static/content/dialogs_w_no_title.png b/docs/html/design/media/dialogs_w_no_title.png
index 47e2dbf..47e2dbf 100644
--- a/docs/html/design/static/content/dialogs_w_no_title.png
+++ b/docs/html/design/media/dialogs_w_no_title.png
diff --git a/docs/html/design/static/content/dialogs_w_title.png b/docs/html/design/media/dialogs_w_title.png
index 4f2b81f..4f2b81f 100644
--- a/docs/html/design/static/content/dialogs_w_title.png
+++ b/docs/html/design/media/dialogs_w_title.png
diff --git a/docs/html/design/static/content/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png
index af2b24f..af2b24f 100644
--- a/docs/html/design/static/content/downloads_color_swatches.png
+++ b/docs/html/design/media/downloads_color_swatches.png
diff --git a/docs/html/design/static/content/downloads_roboto_specimen_preview.png b/docs/html/design/media/downloads_roboto_specimen_preview.png
index 2954cbf..2954cbf 100644
--- a/docs/html/design/static/content/downloads_roboto_specimen_preview.png
+++ b/docs/html/design/media/downloads_roboto_specimen_preview.png
diff --git a/docs/html/design/static/content/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png
index 9e09319..9e09319 100644
--- a/docs/html/design/static/content/downloads_stencils.png
+++ b/docs/html/design/media/downloads_stencils.png
diff --git a/docs/html/design/static/content/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png
index 693a593..693a593 100644
--- a/docs/html/design/static/content/gesture_doubletouch.png
+++ b/docs/html/design/media/gesture_doubletouch.png
diff --git a/docs/html/design/static/content/gesture_drag.png b/docs/html/design/media/gesture_drag.png
index 6262644..6262644 100644
--- a/docs/html/design/static/content/gesture_drag.png
+++ b/docs/html/design/media/gesture_drag.png
diff --git a/docs/html/design/static/content/gesture_longtouch.png b/docs/html/design/media/gesture_longtouch.png
index 3eb3cbc..3eb3cbc 100644
--- a/docs/html/design/static/content/gesture_longtouch.png
+++ b/docs/html/design/media/gesture_longtouch.png
diff --git a/docs/html/design/static/content/gesture_pinchclose.png b/docs/html/design/media/gesture_pinchclose.png
index 471251f..471251f 100644
--- a/docs/html/design/static/content/gesture_pinchclose.png
+++ b/docs/html/design/media/gesture_pinchclose.png
diff --git a/docs/html/design/static/content/gesture_pinchopen.png b/docs/html/design/media/gesture_pinchopen.png
index b7c3ee3..b7c3ee3 100644
--- a/docs/html/design/static/content/gesture_pinchopen.png
+++ b/docs/html/design/media/gesture_pinchopen.png
diff --git a/docs/html/design/static/content/gesture_swipe.png b/docs/html/design/media/gesture_swipe.png
index f8e8a26..f8e8a26 100644
--- a/docs/html/design/static/content/gesture_swipe.png
+++ b/docs/html/design/media/gesture_swipe.png
diff --git a/docs/html/design/static/content/gesture_touch.png b/docs/html/design/media/gesture_touch.png
index 5c49b17..5c49b17 100644
--- a/docs/html/design/static/content/gesture_touch.png
+++ b/docs/html/design/media/gesture_touch.png
diff --git a/docs/html/design/static/content/gridview_example.png b/docs/html/design/media/gridview_example.png
index 850790f..850790f 100644
--- a/docs/html/design/static/content/gridview_example.png
+++ b/docs/html/design/media/gridview_example.png
diff --git a/docs/html/design/static/content/gridview_horizontal.png b/docs/html/design/media/gridview_horizontal.png
index 1d329a1..1d329a1 100644
--- a/docs/html/design/static/content/gridview_horizontal.png
+++ b/docs/html/design/media/gridview_horizontal.png
diff --git a/docs/html/design/static/content/gridview_overview.png b/docs/html/design/media/gridview_overview.png
index a831625..a831625 100644
--- a/docs/html/design/static/content/gridview_overview.png
+++ b/docs/html/design/media/gridview_overview.png
diff --git a/docs/html/design/static/content/gridview_style.png b/docs/html/design/media/gridview_style.png
index 77384f9..77384f9 100644
--- a/docs/html/design/static/content/gridview_style.png
+++ b/docs/html/design/media/gridview_style.png
diff --git a/docs/html/design/static/content/gridview_vertical.png b/docs/html/design/media/gridview_vertical.png
index f7d85a0..f7d85a0 100644
--- a/docs/html/design/static/content/gridview_vertical.png
+++ b/docs/html/design/media/gridview_vertical.png
diff --git a/docs/html/design/static/content/iconography_actionbar_colors.png b/docs/html/design/media/iconography_actionbar_colors.png
index 2ad550a..2ad550a 100644
--- a/docs/html/design/static/content/iconography_actionbar_colors.png
+++ b/docs/html/design/media/iconography_actionbar_colors.png
diff --git a/docs/html/design/static/content/iconography_actionbar_focal.png b/docs/html/design/media/iconography_actionbar_focal.png
index 49b6537..49b6537 100644
--- a/docs/html/design/static/content/iconography_actionbar_focal.png
+++ b/docs/html/design/media/iconography_actionbar_focal.png
diff --git a/docs/html/design/static/content/iconography_actionbar_size.png b/docs/html/design/media/iconography_actionbar_size.png
index 307a4fe..307a4fe 100644
--- a/docs/html/design/static/content/iconography_actionbar_size.png
+++ b/docs/html/design/media/iconography_actionbar_size.png
diff --git a/docs/html/design/static/content/iconography_actionbar_style.png b/docs/html/design/media/iconography_actionbar_style.png
index a48b448..a48b448 100644
--- a/docs/html/design/static/content/iconography_actionbar_style.png
+++ b/docs/html/design/media/iconography_actionbar_style.png
diff --git a/docs/html/design/static/content/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png
index a5db53e..a5db53e 100644
--- a/docs/html/design/static/content/iconography_launcher_example.png
+++ b/docs/html/design/media/iconography_launcher_example.png
diff --git a/docs/html/design/static/content/iconography_launcher_example2.png b/docs/html/design/media/iconography_launcher_example2.png
index 5a709e2..5a709e2 100644
--- a/docs/html/design/static/content/iconography_launcher_example2.png
+++ b/docs/html/design/media/iconography_launcher_example2.png
diff --git a/docs/html/design/static/content/iconography_launcher_focal.png b/docs/html/design/media/iconography_launcher_focal.png
index 014a340..014a340 100644
--- a/docs/html/design/static/content/iconography_launcher_focal.png
+++ b/docs/html/design/media/iconography_launcher_focal.png
diff --git a/docs/html/design/static/content/iconography_launcher_size.png b/docs/html/design/media/iconography_launcher_size.png
index 48267de..48267de 100644
--- a/docs/html/design/static/content/iconography_launcher_size.png
+++ b/docs/html/design/media/iconography_launcher_size.png
diff --git a/docs/html/design/static/content/iconography_launcher_style.png b/docs/html/design/media/iconography_launcher_style.png
index b20c91b..b20c91b 100644
--- a/docs/html/design/static/content/iconography_launcher_style.png
+++ b/docs/html/design/media/iconography_launcher_style.png
diff --git a/docs/html/design/static/content/iconography_notification_example.png b/docs/html/design/media/iconography_notification_example.png
index a8498ce..a8498ce 100644
--- a/docs/html/design/static/content/iconography_notification_example.png
+++ b/docs/html/design/media/iconography_notification_example.png
diff --git a/docs/html/design/static/content/iconography_notification_focal.png b/docs/html/design/media/iconography_notification_focal.png
index 20d5e8f..20d5e8f 100644
--- a/docs/html/design/static/content/iconography_notification_focal.png
+++ b/docs/html/design/media/iconography_notification_focal.png
diff --git a/docs/html/design/static/content/iconography_notification_size.png b/docs/html/design/media/iconography_notification_size.png
index b264e98..b264e98 100644
--- a/docs/html/design/static/content/iconography_notification_size.png
+++ b/docs/html/design/media/iconography_notification_size.png
diff --git a/docs/html/design/static/content/iconography_notification_style.png b/docs/html/design/media/iconography_notification_style.png
index a52db1f..a52db1f 100644
--- a/docs/html/design/static/content/iconography_notification_style.png
+++ b/docs/html/design/media/iconography_notification_style.png
diff --git a/docs/html/design/static/content/iconography_overview.png b/docs/html/design/media/iconography_overview.png
index 688c1b5..688c1b5 100644
--- a/docs/html/design/static/content/iconography_overview.png
+++ b/docs/html/design/media/iconography_overview.png
diff --git a/docs/html/design/static/content/iconography_small_colors.png b/docs/html/design/media/iconography_small_colors.png
index 0ac1bfd..0ac1bfd 100644
--- a/docs/html/design/static/content/iconography_small_colors.png
+++ b/docs/html/design/media/iconography_small_colors.png
diff --git a/docs/html/design/static/content/iconography_small_example.png b/docs/html/design/media/iconography_small_example.png
index 1e1400e..1e1400e 100644
--- a/docs/html/design/static/content/iconography_small_example.png
+++ b/docs/html/design/media/iconography_small_example.png
diff --git a/docs/html/design/static/content/iconography_small_focal.png b/docs/html/design/media/iconography_small_focal.png
index dff3c16..dff3c16 100644
--- a/docs/html/design/static/content/iconography_small_focal.png
+++ b/docs/html/design/media/iconography_small_focal.png
diff --git a/docs/html/design/static/content/iconography_small_size.png b/docs/html/design/media/iconography_small_size.png
index 748cf79..748cf79 100644
--- a/docs/html/design/static/content/iconography_small_size.png
+++ b/docs/html/design/media/iconography_small_size.png
diff --git a/docs/html/design/static/content/iconography_small_style.png b/docs/html/design/media/iconography_small_style.png
index 0149ac6..0149ac6 100644
--- a/docs/html/design/static/content/iconography_small_style.png
+++ b/docs/html/design/media/iconography_small_style.png
diff --git a/docs/html/design/static/content/index_landing_page.png b/docs/html/design/media/index_landing_page.png
index 3f319b0..3f319b0 100644
--- a/docs/html/design/static/content/index_landing_page.png
+++ b/docs/html/design/media/index_landing_page.png
diff --git a/docs/html/design/static/content/lists_main.png b/docs/html/design/media/lists_main.png
index d89ac79..d89ac79 100644
--- a/docs/html/design/static/content/lists_main.png
+++ b/docs/html/design/media/lists_main.png
diff --git a/docs/html/design/static/content/metrics_48.png b/docs/html/design/media/metrics_48.png
index 5e6c57e..5e6c57e 100644
--- a/docs/html/design/static/content/metrics_48.png
+++ b/docs/html/design/media/metrics_48.png
diff --git a/docs/html/design/static/content/metrics_closeup.png b/docs/html/design/media/metrics_closeup.png
index 032115a..032115a 100644
--- a/docs/html/design/static/content/metrics_closeup.png
+++ b/docs/html/design/media/metrics_closeup.png
diff --git a/docs/html/design/static/content/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png
index b5e6cd2..b5e6cd2 100644
--- a/docs/html/design/static/content/metrics_diagram.png
+++ b/docs/html/design/media/metrics_diagram.png
diff --git a/docs/html/design/static/content/metrics_forms.png b/docs/html/design/media/metrics_forms.png
index 449bd57..449bd57 100644
--- a/docs/html/design/static/content/metrics_forms.png
+++ b/docs/html/design/media/metrics_forms.png
diff --git a/docs/html/design/static/content/migrating_icons.png b/docs/html/design/media/migrating_icons.png
index 1a25867..1a25867 100644
--- a/docs/html/design/static/content/migrating_icons.png
+++ b/docs/html/design/media/migrating_icons.png
diff --git a/docs/html/design/static/content/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png
index 27751d8..27751d8 100644
--- a/docs/html/design/static/content/migrating_ios_dialers.png
+++ b/docs/html/design/media/migrating_ios_dialers.png
diff --git a/docs/html/design/static/content/migrating_ios_galleries.png b/docs/html/design/media/migrating_ios_galleries.png
index 04472fe..04472fe 100644
--- a/docs/html/design/static/content/migrating_ios_galleries.png
+++ b/docs/html/design/media/migrating_ios_galleries.png
diff --git a/docs/html/design/static/content/migrating_ios_settings.png b/docs/html/design/media/migrating_ios_settings.png
index b17cb72..b17cb72 100644
--- a/docs/html/design/static/content/migrating_ios_settings.png
+++ b/docs/html/design/media/migrating_ios_settings.png
diff --git a/docs/html/design/static/content/migrating_ui_elements.png b/docs/html/design/media/migrating_ui_elements.png
index 51c2a80..51c2a80 100644
--- a/docs/html/design/static/content/migrating_ui_elements.png
+++ b/docs/html/design/media/migrating_ui_elements.png
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_land_span13.png b/docs/html/design/media/misc_full_galaxynexus_blank_land_span13.png
index bab6aca..bab6aca 100644
--- a/docs/html/design/static/content/misc_full_galaxynexus_blank_land_span13.png
+++ b/docs/html/design/media/misc_full_galaxynexus_blank_land_span13.png
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span5.png b/docs/html/design/media/misc_full_galaxynexus_blank_port_span5.png
index bdccc2f..bdccc2f 100644
--- a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span5.png
+++ b/docs/html/design/media/misc_full_galaxynexus_blank_port_span5.png
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span9.png b/docs/html/design/media/misc_full_galaxynexus_blank_port_span9.png
index 5e0135b..5e0135b 100644
--- a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span9.png
+++ b/docs/html/design/media/misc_full_galaxynexus_blank_port_span9.png
diff --git a/docs/html/design/static/content/multipane_expand.png b/docs/html/design/media/multipane_expand.png
index bb4f371..bb4f371 100644
--- a/docs/html/design/static/content/multipane_expand.png
+++ b/docs/html/design/media/multipane_expand.png
diff --git a/docs/html/design/static/content/multipane_show.png b/docs/html/design/media/multipane_show.png
index 0231adb..0231adb 100644
--- a/docs/html/design/static/content/multipane_show.png
+++ b/docs/html/design/media/multipane_show.png
diff --git a/docs/html/design/static/content/multipane_stack.png b/docs/html/design/media/multipane_stack.png
index 7769f0c..7769f0c 100644
--- a/docs/html/design/static/content/multipane_stack.png
+++ b/docs/html/design/media/multipane_stack.png
diff --git a/docs/html/design/static/content/multipane_stretch.png b/docs/html/design/media/multipane_stretch.png
index 5075af6..5075af6 100644
--- a/docs/html/design/static/content/multipane_stretch.png
+++ b/docs/html/design/media/multipane_stretch.png
diff --git a/docs/html/design/static/content/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png
index 56a6718..56a6718 100644
--- a/docs/html/design/static/content/multipane_view_tablet.png
+++ b/docs/html/design/media/multipane_view_tablet.png
diff --git a/docs/html/design/static/content/multipane_views.png b/docs/html/design/media/multipane_views.png
index 9fdfcfd..9fdfcfd 100644
--- a/docs/html/design/static/content/multipane_views.png
+++ b/docs/html/design/media/multipane_views.png
diff --git a/docs/html/design/static/content/navigation_between_siblings_gmail.png b/docs/html/design/media/navigation_between_siblings_gmail.png
index fe01ed3..fe01ed3 100644
--- a/docs/html/design/static/content/navigation_between_siblings_gmail.png
+++ b/docs/html/design/media/navigation_between_siblings_gmail.png
diff --git a/docs/html/design/static/content/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png
index c3148f8..c3148f8 100644
--- a/docs/html/design/static/content/navigation_between_siblings_market1.png
+++ b/docs/html/design/media/navigation_between_siblings_market1.png
diff --git a/docs/html/design/static/content/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png
index 208be47..208be47 100644
--- a/docs/html/design/static/content/navigation_between_siblings_market2.png
+++ b/docs/html/design/media/navigation_between_siblings_market2.png
diff --git a/docs/html/design/static/content/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png
index 971ee57..971ee57 100644
--- a/docs/html/design/static/content/navigation_from_outside_back.png
+++ b/docs/html/design/media/navigation_from_outside_back.png
diff --git a/docs/html/design/static/content/navigation_from_outside_up.png b/docs/html/design/media/navigation_from_outside_up.png
index eaa3cdb..eaa3cdb 100644
--- a/docs/html/design/static/content/navigation_from_outside_up.png
+++ b/docs/html/design/media/navigation_from_outside_up.png
diff --git a/docs/html/design/static/content/navigation_up_vs_back_gmail.png b/docs/html/design/media/navigation_up_vs_back_gmail.png
index 71e6484..71e6484 100644
--- a/docs/html/design/static/content/navigation_up_vs_back_gmail.png
+++ b/docs/html/design/media/navigation_up_vs_back_gmail.png
diff --git a/docs/html/design/static/content/navigation_with_back_and_up.png b/docs/html/design/media/navigation_with_back_and_up.png
index 4fb6dce..4fb6dce 100644
--- a/docs/html/design/static/content/navigation_with_back_and_up.png
+++ b/docs/html/design/media/navigation_with_back_and_up.png
diff --git a/docs/html/design/static/content/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png
index 71bed4f..71bed4f 100644
--- a/docs/html/design/static/content/notifications_dismiss.png
+++ b/docs/html/design/media/notifications_dismiss.png
diff --git a/docs/html/design/static/content/notifications_pattern_additional_fail.png b/docs/html/design/media/notifications_pattern_additional_fail.png
index 3945ffb..3945ffb 100644
--- a/docs/html/design/static/content/notifications_pattern_additional_fail.png
+++ b/docs/html/design/media/notifications_pattern_additional_fail.png
diff --git a/docs/html/design/static/content/notifications_pattern_additional_win.png b/docs/html/design/media/notifications_pattern_additional_win.png
index 74472c3..74472c3 100644
--- a/docs/html/design/static/content/notifications_pattern_additional_win.png
+++ b/docs/html/design/media/notifications_pattern_additional_win.png
diff --git a/docs/html/design/static/content/notifications_pattern_anatomy.png b/docs/html/design/media/notifications_pattern_anatomy.png
index cacc183..cacc183 100644
--- a/docs/html/design/static/content/notifications_pattern_anatomy.png
+++ b/docs/html/design/media/notifications_pattern_anatomy.png
diff --git a/docs/html/design/static/content/notifications_pattern_dialog_toast.png b/docs/html/design/media/notifications_pattern_dialog_toast.png
index 517d57b..517d57b 100644
--- a/docs/html/design/static/content/notifications_pattern_dialog_toast.png
+++ b/docs/html/design/media/notifications_pattern_dialog_toast.png
diff --git a/docs/html/design/static/content/notifications_pattern_ongoing_music.png b/docs/html/design/media/notifications_pattern_ongoing_music.png
index 01039bd..01039bd 100644
--- a/docs/html/design/static/content/notifications_pattern_ongoing_music.png
+++ b/docs/html/design/media/notifications_pattern_ongoing_music.png
diff --git a/docs/html/design/static/content/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png
index 09d8a83..09d8a83 100644
--- a/docs/html/design/static/content/notifications_pattern_phone_icons.png
+++ b/docs/html/design/media/notifications_pattern_phone_icons.png
diff --git a/docs/html/design/static/content/notifications_pattern_phone_ticker.png b/docs/html/design/media/notifications_pattern_phone_ticker.png
index 601e310..601e310 100644
--- a/docs/html/design/static/content/notifications_pattern_phone_ticker.png
+++ b/docs/html/design/media/notifications_pattern_phone_ticker.png
diff --git a/docs/html/design/static/content/notifications_pattern_real_time_people.png b/docs/html/design/media/notifications_pattern_real_time_people.png
index 32e62eb..32e62eb 100644
--- a/docs/html/design/static/content/notifications_pattern_real_time_people.png
+++ b/docs/html/design/media/notifications_pattern_real_time_people.png
diff --git a/docs/html/design/static/content/notifications_pattern_social_fail.png b/docs/html/design/media/notifications_pattern_social_fail.png
index 2c8fddc..2c8fddc 100644
--- a/docs/html/design/static/content/notifications_pattern_social_fail.png
+++ b/docs/html/design/media/notifications_pattern_social_fail.png
diff --git a/docs/html/design/static/content/notifications_pattern_tablet.png b/docs/html/design/media/notifications_pattern_tablet.png
index 15637d5..15637d5 100644
--- a/docs/html/design/static/content/notifications_pattern_tablet.png
+++ b/docs/html/design/media/notifications_pattern_tablet.png
diff --git a/docs/html/design/static/content/patterns_landing.png b/docs/html/design/media/patterns_landing.png
index d9869a5..d9869a5 100644
--- a/docs/html/design/static/content/patterns_landing.png
+++ b/docs/html/design/media/patterns_landing.png
diff --git a/docs/html/design/static/content/picker_datetime.png b/docs/html/design/media/picker_datetime.png
index 9876ab2..9876ab2 100644
--- a/docs/html/design/static/content/picker_datetime.png
+++ b/docs/html/design/media/picker_datetime.png
diff --git a/docs/html/design/static/content/picker_space.png b/docs/html/design/media/picker_space.png
index 024776f..024776f 100644
--- a/docs/html/design/static/content/picker_space.png
+++ b/docs/html/design/media/picker_space.png
diff --git a/docs/html/design/static/content/principles_decide_for_me.png b/docs/html/design/media/principles_decide_for_me.png
index 2d8b883..2d8b883 100644
--- a/docs/html/design/static/content/principles_decide_for_me.png
+++ b/docs/html/design/media/principles_decide_for_me.png
diff --git a/docs/html/design/static/content/principles_delight.png b/docs/html/design/media/principles_delight.png
index 5d6e909..5d6e909 100644
--- a/docs/html/design/static/content/principles_delight.png
+++ b/docs/html/design/media/principles_delight.png
diff --git a/docs/html/design/static/content/principles_error.png b/docs/html/design/media/principles_error.png
index 9376766..9376766 100644
--- a/docs/html/design/static/content/principles_error.png
+++ b/docs/html/design/media/principles_error.png
diff --git a/docs/html/design/static/content/principles_get_to_know_me.png b/docs/html/design/media/principles_get_to_know_me.png
index 954363f..954363f 100644
--- a/docs/html/design/static/content/principles_get_to_know_me.png
+++ b/docs/html/design/media/principles_get_to_know_me.png
diff --git a/docs/html/design/static/content/principles_heavy_lifting.png b/docs/html/design/media/principles_heavy_lifting.png
index c89c0ff..c89c0ff 100644
--- a/docs/html/design/static/content/principles_heavy_lifting.png
+++ b/docs/html/design/media/principles_heavy_lifting.png
diff --git a/docs/html/design/static/content/principles_important_interruption.png b/docs/html/design/media/principles_important_interruption.png
index 0576efe..0576efe 100644
--- a/docs/html/design/static/content/principles_important_interruption.png
+++ b/docs/html/design/media/principles_important_interruption.png
diff --git a/docs/html/design/static/content/principles_information_when_need_it.png b/docs/html/design/media/principles_information_when_need_it.png
index c5ef3ca..c5ef3ca 100644
--- a/docs/html/design/static/content/principles_information_when_need_it.png
+++ b/docs/html/design/media/principles_information_when_need_it.png
diff --git a/docs/html/design/static/content/principles_keep_it_brief.png b/docs/html/design/media/principles_keep_it_brief.png
index 9c2813b..9c2813b 100644
--- a/docs/html/design/static/content/principles_keep_it_brief.png
+++ b/docs/html/design/media/principles_keep_it_brief.png
diff --git a/docs/html/design/static/content/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png
index 3a556ad..3a556ad 100644
--- a/docs/html/design/static/content/principles_looks_same.png
+++ b/docs/html/design/media/principles_looks_same.png
diff --git a/docs/html/design/static/content/principles_make_important_fast.png b/docs/html/design/media/principles_make_important_fast.png
index 26da655..26da655 100644
--- a/docs/html/design/static/content/principles_make_important_fast.png
+++ b/docs/html/design/media/principles_make_important_fast.png
diff --git a/docs/html/design/static/content/principles_make_it_mine.png b/docs/html/design/media/principles_make_it_mine.png
index 683a0b7..683a0b7 100644
--- a/docs/html/design/static/content/principles_make_it_mine.png
+++ b/docs/html/design/media/principles_make_it_mine.png
diff --git a/docs/html/design/static/content/principles_navigation.png b/docs/html/design/media/principles_navigation.png
index c23dde7..c23dde7 100644
--- a/docs/html/design/static/content/principles_navigation.png
+++ b/docs/html/design/media/principles_navigation.png
diff --git a/docs/html/design/static/content/principles_never_lose_stuff.png b/docs/html/design/media/principles_never_lose_stuff.png
index acbefea..acbefea 100644
--- a/docs/html/design/static/content/principles_never_lose_stuff.png
+++ b/docs/html/design/media/principles_never_lose_stuff.png
diff --git a/docs/html/design/static/content/principles_pictures.png b/docs/html/design/media/principles_pictures.png
index cebd162..cebd162 100644
--- a/docs/html/design/static/content/principles_pictures.png
+++ b/docs/html/design/media/principles_pictures.png
diff --git a/docs/html/design/static/content/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png
index 3889c9a..3889c9a 100644
--- a/docs/html/design/static/content/principles_real_objects.png
+++ b/docs/html/design/media/principles_real_objects.png
diff --git a/docs/html/design/static/content/principles_sprinkle_encouragement.png b/docs/html/design/media/principles_sprinkle_encouragement.png
index 8617365..8617365 100644
--- a/docs/html/design/static/content/principles_sprinkle_encouragement.png
+++ b/docs/html/design/media/principles_sprinkle_encouragement.png
diff --git a/docs/html/design/static/content/principles_tricks.png b/docs/html/design/media/principles_tricks.png
index f436ce9..f436ce9 100644
--- a/docs/html/design/static/content/principles_tricks.png
+++ b/docs/html/design/media/principles_tricks.png
diff --git a/docs/html/design/static/content/progress_activity.png b/docs/html/design/media/progress_activity.png
index 51210b4..51210b4 100644
--- a/docs/html/design/static/content/progress_activity.png
+++ b/docs/html/design/media/progress_activity.png
diff --git a/docs/html/design/static/content/progress_activity2.png b/docs/html/design/media/progress_activity2.png
index ec3df99..ec3df99 100644
--- a/docs/html/design/static/content/progress_activity2.png
+++ b/docs/html/design/media/progress_activity2.png
diff --git a/docs/html/design/static/content/progress_download.png b/docs/html/design/media/progress_download.png
index f567f74..f567f74 100644
--- a/docs/html/design/static/content/progress_download.png
+++ b/docs/html/design/media/progress_download.png
diff --git a/docs/html/design/static/content/progress_themes.png b/docs/html/design/media/progress_themes.png
index df090e5..df090e5 100644
--- a/docs/html/design/static/content/progress_themes.png
+++ b/docs/html/design/media/progress_themes.png
diff --git a/docs/html/design/static/content/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4
index 383bbd8..383bbd8 100644
--- a/docs/html/design/static/content/scroll_index.mp4
+++ b/docs/html/design/media/scroll_index.mp4
diff --git a/docs/html/design/static/content/scroll_index.ogv b/docs/html/design/media/scroll_index.ogv
index 2cd61ef..2cd61ef 100644
--- a/docs/html/design/static/content/scroll_index.ogv
+++ b/docs/html/design/media/scroll_index.ogv
diff --git a/docs/html/design/static/content/scroll_index.webm b/docs/html/design/media/scroll_index.webm
index 5a665d1..5a665d1 100644
--- a/docs/html/design/static/content/scroll_index.webm
+++ b/docs/html/design/media/scroll_index.webm
diff --git a/docs/html/design/static/content/scroll_indicator.mp4 b/docs/html/design/media/scroll_indicator.mp4
index 924852e..924852e 100644
--- a/docs/html/design/static/content/scroll_indicator.mp4
+++ b/docs/html/design/media/scroll_indicator.mp4
diff --git a/docs/html/design/static/content/scroll_indicator.ogv b/docs/html/design/media/scroll_indicator.ogv
index c037bf5..c037bf5 100644
--- a/docs/html/design/static/content/scroll_indicator.ogv
+++ b/docs/html/design/media/scroll_indicator.ogv
diff --git a/docs/html/design/static/content/scroll_indicator.webm b/docs/html/design/media/scroll_indicator.webm
index 000dc0a..000dc0a 100644
--- a/docs/html/design/static/content/scroll_indicator.webm
+++ b/docs/html/design/media/scroll_indicator.webm
diff --git a/docs/html/design/static/content/seekbar_example.png b/docs/html/design/media/seekbar_example.png
index 70b7e5e..70b7e5e 100644
--- a/docs/html/design/static/content/seekbar_example.png
+++ b/docs/html/design/media/seekbar_example.png
diff --git a/docs/html/design/static/content/seekbar_style.png b/docs/html/design/media/seekbar_style.png
index e31445d..e31445d 100644
--- a/docs/html/design/static/content/seekbar_style.png
+++ b/docs/html/design/media/seekbar_style.png
diff --git a/docs/html/design/static/content/selection_adjusting_actions.png b/docs/html/design/media/selection_adjusting_actions.png
index 0799b6b..0799b6b 100644
--- a/docs/html/design/static/content/selection_adjusting_actions.png
+++ b/docs/html/design/media/selection_adjusting_actions.png
diff --git a/docs/html/design/static/content/selection_cab_big.png b/docs/html/design/media/selection_cab_big.png
index 72567cb..72567cb 100644
--- a/docs/html/design/static/content/selection_cab_big.png
+++ b/docs/html/design/media/selection_cab_big.png
diff --git a/docs/html/design/static/content/selection_cab_example.png b/docs/html/design/media/selection_cab_example.png
index c49a2ad..c49a2ad 100644
--- a/docs/html/design/static/content/selection_cab_example.png
+++ b/docs/html/design/media/selection_cab_example.png
diff --git a/docs/html/design/static/content/selection_context_menu.png b/docs/html/design/media/selection_context_menu.png
index c711546..c711546 100644
--- a/docs/html/design/static/content/selection_context_menu.png
+++ b/docs/html/design/media/selection_context_menu.png
diff --git a/docs/html/design/static/content/spinners_actionbar.png b/docs/html/design/media/spinners_actionbar.png
index 5d07419..5d07419 100644
--- a/docs/html/design/static/content/spinners_actionbar.png
+++ b/docs/html/design/media/spinners_actionbar.png
diff --git a/docs/html/design/static/content/spinners_form.png b/docs/html/design/media/spinners_form.png
index 79ee4e4..79ee4e4 100644
--- a/docs/html/design/static/content/spinners_form.png
+++ b/docs/html/design/media/spinners_form.png
diff --git a/docs/html/design/static/content/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png
index 9b0601e..9b0601e 100644
--- a/docs/html/design/static/content/spinners_hololightanddark.png
+++ b/docs/html/design/media/spinners_hololightanddark.png
diff --git a/docs/html/design/static/content/swipe_tabs.mp4 b/docs/html/design/media/swipe_tabs.mp4
index f8a1ab5..f8a1ab5 100644
--- a/docs/html/design/static/content/swipe_tabs.mp4
+++ b/docs/html/design/media/swipe_tabs.mp4
diff --git a/docs/html/design/static/content/swipe_tabs.ogv b/docs/html/design/media/swipe_tabs.ogv
index ae3c86b..ae3c86b 100644
--- a/docs/html/design/static/content/swipe_tabs.ogv
+++ b/docs/html/design/media/swipe_tabs.ogv
diff --git a/docs/html/design/static/content/swipe_tabs.png b/docs/html/design/media/swipe_tabs.png
index f25f061..f25f061 100644
--- a/docs/html/design/static/content/swipe_tabs.png
+++ b/docs/html/design/media/swipe_tabs.png
diff --git a/docs/html/design/static/content/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm
index 86f403e..86f403e 100644
--- a/docs/html/design/static/content/swipe_tabs.webm
+++ b/docs/html/design/media/swipe_tabs.webm
diff --git a/docs/html/design/static/content/swipe_views.png b/docs/html/design/media/swipe_views.png
index 3b6ecaf..3b6ecaf 100644
--- a/docs/html/design/static/content/swipe_views.png
+++ b/docs/html/design/media/swipe_views.png
diff --git a/docs/html/design/static/content/swipe_views2.png b/docs/html/design/media/swipe_views2.png
index 2ed366c..2ed366c 100644
--- a/docs/html/design/static/content/swipe_views2.png
+++ b/docs/html/design/media/swipe_views2.png
diff --git a/docs/html/design/static/content/switches_checkboxes.png b/docs/html/design/media/switches_checkboxes.png
index 92b8d5c..92b8d5c 100644
--- a/docs/html/design/static/content/switches_checkboxes.png
+++ b/docs/html/design/media/switches_checkboxes.png
diff --git a/docs/html/design/static/content/switches_radios.png b/docs/html/design/media/switches_radios.png
index f9bf5fc..f9bf5fc 100644
--- a/docs/html/design/static/content/switches_radios.png
+++ b/docs/html/design/media/switches_radios.png
diff --git a/docs/html/design/static/content/switches_switches.png b/docs/html/design/media/switches_switches.png
index 43e2623..43e2623 100644
--- a/docs/html/design/static/content/switches_switches.png
+++ b/docs/html/design/media/switches_switches.png
diff --git a/docs/html/design/static/content/system_ui_landing.png b/docs/html/design/media/system_ui_landing.png
index 1d22920..1d22920 100644
--- a/docs/html/design/static/content/system_ui_landing.png
+++ b/docs/html/design/media/system_ui_landing.png
diff --git a/docs/html/design/static/content/tabs_overview.png b/docs/html/design/media/tabs_overview.png
index c336982..c336982 100644
--- a/docs/html/design/static/content/tabs_overview.png
+++ b/docs/html/design/media/tabs_overview.png
diff --git a/docs/html/design/static/content/tabs_scrolly.mp4 b/docs/html/design/media/tabs_scrolly.mp4
index 4329243..4329243 100644
--- a/docs/html/design/static/content/tabs_scrolly.mp4
+++ b/docs/html/design/media/tabs_scrolly.mp4
diff --git a/docs/html/design/static/content/tabs_scrolly.ogv b/docs/html/design/media/tabs_scrolly.ogv
index 345e57a..345e57a 100644
--- a/docs/html/design/static/content/tabs_scrolly.ogv
+++ b/docs/html/design/media/tabs_scrolly.ogv
diff --git a/docs/html/design/static/content/tabs_scrolly.webm b/docs/html/design/media/tabs_scrolly.webm
index 17e368e..17e368e 100644
--- a/docs/html/design/static/content/tabs_scrolly.webm
+++ b/docs/html/design/media/tabs_scrolly.webm
diff --git a/docs/html/design/static/content/tabs_stacked.png b/docs/html/design/media/tabs_stacked.png
index 09e9958..09e9958 100644
--- a/docs/html/design/static/content/tabs_stacked.png
+++ b/docs/html/design/media/tabs_stacked.png
diff --git a/docs/html/design/static/content/tabs_standard.png b/docs/html/design/media/tabs_standard.png
index 8e3ed66..8e3ed66 100644
--- a/docs/html/design/static/content/tabs_standard.png
+++ b/docs/html/design/media/tabs_standard.png
diff --git a/docs/html/design/static/content/tabs_youtube.png b/docs/html/design/media/tabs_youtube.png
index 69e9268..69e9268 100644
--- a/docs/html/design/static/content/tabs_youtube.png
+++ b/docs/html/design/media/tabs_youtube.png
diff --git a/docs/html/design/static/content/text_input_holodarkandlight.png b/docs/html/design/media/text_input_holodarkandlight.png
index aff61fc..aff61fc 100644
--- a/docs/html/design/static/content/text_input_holodarkandlight.png
+++ b/docs/html/design/media/text_input_holodarkandlight.png
diff --git a/docs/html/design/static/content/text_input_singlevsmultiline.png b/docs/html/design/media/text_input_singlevsmultiline.png
index 7bb9a5c..7bb9a5c 100644
--- a/docs/html/design/static/content/text_input_singlevsmultiline.png
+++ b/docs/html/design/media/text_input_singlevsmultiline.png
diff --git a/docs/html/design/static/content/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png
index 85689cf..85689cf 100644
--- a/docs/html/design/static/content/text_input_textselection.png
+++ b/docs/html/design/media/text_input_textselection.png
diff --git a/docs/html/design/static/content/text_input_typesandtypedown.png b/docs/html/design/media/text_input_typesandtypedown.png
index 32f761c..32f761c 100644
--- a/docs/html/design/static/content/text_input_typesandtypedown.png
+++ b/docs/html/design/media/text_input_typesandtypedown.png
diff --git a/docs/html/design/static/content/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png
index 916ad27..916ad27 100644
--- a/docs/html/design/static/content/themes_holo_dark.png
+++ b/docs/html/design/media/themes_holo_dark.png
diff --git a/docs/html/design/static/content/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png
index 72c0244..72c0244 100644
--- a/docs/html/design/static/content/themes_holo_inverse.png
+++ b/docs/html/design/media/themes_holo_inverse.png
diff --git a/docs/html/design/static/content/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png
index d4b0861..d4b0861 100644
--- a/docs/html/design/static/content/themes_holo_light.png
+++ b/docs/html/design/media/themes_holo_light.png
diff --git a/docs/html/design/static/content/touch_feedback_communication.png b/docs/html/design/media/touch_feedback_communication.png
index bb27250..bb27250 100644
--- a/docs/html/design/static/content/touch_feedback_communication.png
+++ b/docs/html/design/media/touch_feedback_communication.png
diff --git a/docs/html/design/static/content/touch_feedback_manipulation.png b/docs/html/design/media/touch_feedback_manipulation.png
index cb1f268..cb1f268 100644
--- a/docs/html/design/static/content/touch_feedback_manipulation.png
+++ b/docs/html/design/media/touch_feedback_manipulation.png
diff --git a/docs/html/design/static/content/touch_feedback_reaction_response.png b/docs/html/design/media/touch_feedback_reaction_response.png
index 5a34d7a..5a34d7a 100644
--- a/docs/html/design/static/content/touch_feedback_reaction_response.png
+++ b/docs/html/design/media/touch_feedback_reaction_response.png
diff --git a/docs/html/design/static/content/touch_feedback_states.png b/docs/html/design/media/touch_feedback_states.png
index 972198c..972198c 100644
--- a/docs/html/design/static/content/touch_feedback_states.png
+++ b/docs/html/design/media/touch_feedback_states.png
diff --git a/docs/html/design/static/content/typography_alphas.png b/docs/html/design/media/typography_alphas.png
index 4b53bd0..4b53bd0 100644
--- a/docs/html/design/static/content/typography_alphas.png
+++ b/docs/html/design/media/typography_alphas.png
diff --git a/docs/html/design/static/content/typography_defaults.png b/docs/html/design/media/typography_defaults.png
index 87f1c87..87f1c87 100644
--- a/docs/html/design/static/content/typography_defaults.png
+++ b/docs/html/design/media/typography_defaults.png
diff --git a/docs/html/design/static/content/typography_main.png b/docs/html/design/media/typography_main.png
index 8298cf6..8298cf6 100644
--- a/docs/html/design/static/content/typography_main.png
+++ b/docs/html/design/media/typography_main.png
diff --git a/docs/html/design/static/content/typography_sizes.png b/docs/html/design/media/typography_sizes.png
index eda1d99..eda1d99 100644
--- a/docs/html/design/static/content/typography_sizes.png
+++ b/docs/html/design/media/typography_sizes.png
diff --git a/docs/html/design/static/content/ui_overview_all_apps.png b/docs/html/design/media/ui_overview_all_apps.png
index 467f5ad..467f5ad 100644
--- a/docs/html/design/static/content/ui_overview_all_apps.png
+++ b/docs/html/design/media/ui_overview_all_apps.png
diff --git a/docs/html/design/static/content/ui_overview_app_ui.png b/docs/html/design/media/ui_overview_app_ui.png
index 7fc5dcd..7fc5dcd 100644
--- a/docs/html/design/static/content/ui_overview_app_ui.png
+++ b/docs/html/design/media/ui_overview_app_ui.png
diff --git a/docs/html/design/static/content/ui_overview_home_screen.png b/docs/html/design/media/ui_overview_home_screen.png
index ee0e4d6..ee0e4d6 100644
--- a/docs/html/design/static/content/ui_overview_home_screen.png
+++ b/docs/html/design/media/ui_overview_home_screen.png
diff --git a/docs/html/design/static/content/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png
index fd7438a..fd7438a 100644
--- a/docs/html/design/static/content/ui_overview_notifications.png
+++ b/docs/html/design/media/ui_overview_notifications.png
diff --git a/docs/html/design/static/content/ui_overview_recents.png b/docs/html/design/media/ui_overview_recents.png
index 4ea0583..4ea0583 100644
--- a/docs/html/design/static/content/ui_overview_recents.png
+++ b/docs/html/design/media/ui_overview_recents.png
diff --git a/docs/html/design/static/content/ui_overview_system_ui.png b/docs/html/design/media/ui_overview_system_ui.png
index ecc4b7d..ecc4b7d 100644
--- a/docs/html/design/static/content/ui_overview_system_ui.png
+++ b/docs/html/design/media/ui_overview_system_ui.png
diff --git a/docs/html/design/static/content/whats_new_action_bar.png b/docs/html/design/media/whats_new_action_bar.png
index 713187e..713187e 100644
--- a/docs/html/design/static/content/whats_new_action_bar.png
+++ b/docs/html/design/media/whats_new_action_bar.png
diff --git a/docs/html/design/static/content/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png
index 8e9c2f0..8e9c2f0 100644
--- a/docs/html/design/static/content/whats_new_multipanel.png
+++ b/docs/html/design/media/whats_new_multipanel.png
diff --git a/docs/html/design/static/content/whats_new_multiselect.png b/docs/html/design/media/whats_new_multiselect.png
index ab34b24..ab34b24 100644
--- a/docs/html/design/static/content/whats_new_multiselect.png
+++ b/docs/html/design/media/whats_new_multiselect.png
diff --git a/docs/html/design/static/content/whats_new_nav_bar.png b/docs/html/design/media/whats_new_nav_bar.png
index 46239e5..46239e5 100644
--- a/docs/html/design/static/content/whats_new_nav_bar.png
+++ b/docs/html/design/media/whats_new_nav_bar.png
diff --git a/docs/html/design/patterns/actionbar.html b/docs/html/design/patterns/actionbar.jd
index e93498e..9e3f48c 100644
--- a/docs/html/design/patterns/actionbar.html
+++ b/docs/html/design/patterns/actionbar.jd
@@ -1,112 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Action Bar
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Action Bar</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/action_bar_pattern_overview.png">
+page.title=Action Bar
+@jd:body
+
+<img src="{@docRoot}design/media/action_bar_pattern_overview.png">
 
 <p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a
 dedicated piece of real estate at the top of each screen that is generally persistent throughout the
@@ -125,7 +20,7 @@ your app's interface consistent with the core Android apps.</p>
 <h2 id="organization">General Organization</h2>
 
 <p>The action bar is split into four different functional areas that apply to most apps.</p>
-<img src="../static/content/action_bar_basics.png">
+<img src="{@docRoot}design/media/action_bar_basics.png">
 
 <div class="layout-content-row">
   <div class="layout-content-col span-7 with-callouts">
@@ -138,10 +33,10 @@ The app icon establishes your app's identity. It can be replaced with a differen
 if you wish.
 Important: If the app is currently not displaying the top-level screen, be sure to display the Up
 caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
-Up navigation, see the <a href="../patterns/navigation.html">Navigation</a> pattern.
+Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.
 
 <div class="figure">
-  <img src="../static/content/action_bar_pattern_up_app_icon.png">
+  <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
   <div class="figure-caption">
     App icon with and without "up" affordance.
   </div>
@@ -195,7 +90,7 @@ rotation on different screen sizes.</p>
 <p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
 content across multiple bars located below the main action bar or at the bottom of the screen.</p>
 
-<img src="../static/content/action_bar_pattern_rotation.png">
+<img src="{@docRoot}design/media/action_bar_pattern_rotation.png">
 <div class="figure-caption">
   Split action bar showing action buttons at the bottom of the screen in vertical orientation.
 </div>
@@ -221,7 +116,7 @@ the top bar.</p>
   </div>
   <div class="layout-content-col span-3">
 
-    <img src="../static/content/action_bar_pattern_considerations.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_considerations.png">
 
   </div>
 </div>
@@ -232,7 +127,7 @@ the top bar.</p>
 duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
 selected data or text.</p>
 
-<img src="../static/content/action_bar_cab.png">
+<img src="{@docRoot}design/media/action_bar_cab.png">
 <div class="figure-caption">
   Contextual action bar shown in Browser and Gmail
 </div>
@@ -255,7 +150,7 @@ content of a CAB in order to insert the actions you would like the user to be ab
 <p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
 if you expect your users to switch views frequently.</p>
 
-<img src="../static/content/tabs_youtube.png">
+<img src="{@docRoot}design/media/tabs_youtube.png">
 
 <p>There are two types of tabs: fixed and scrollable.</p>
 
@@ -276,12 +171,12 @@ themselves.</p>
   <div class="layout-content-col span-7">
 
     <video width="400" class="with-shadow play-on-hover" autoplay>
-      <source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
-      <source src="../static/content/tabs_scrolly.webm" type="video/webm">
-      <source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
+      <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
+      <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
+      <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
     </video>
     <div class="figure-caption">
-      Scrolling tabs on Google Play.
+      Scrolling tabs in Google Play.
       <div class="video-instructions">&nbsp;</div>
     </div>
 
@@ -298,7 +193,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_default_tabs.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png">
     <div class="figure-caption">
       Default fixed tabs shown in Holo Dark &amp; Light.
     </div>
@@ -320,7 +215,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_spinner.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_spinner.png">
     <div class="figure-caption">
       Action bar spinner from Calendar application.
     </div>
@@ -336,7 +231,7 @@ action overflow. The action bar and the action overflow should only present acti
 are available. If an action is unavailable in the current context, hide it. Do not show it as
 disabled.</p>
 
-<img src="../static/content/action_bar_pattern_action_icons.png">
+<img src="{@docRoot}design/media/action_bar_pattern_action_icons.png">
 <div class="figure-caption">
   A sampling of action buttons used throughout the Gmail application.
 </div>
@@ -403,7 +298,7 @@ display the action overflow when the user presses the key.</p>
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_overflow.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_overflow.png">
     <div class="figure-caption">
       Action overflow is pinned to the right side.
     </div>
@@ -427,7 +322,7 @@ rules:</p>
 </li>
 </ul>
 
-<img src="../static/content/action_bar_pattern_table.png">
+<img src="{@docRoot}design/media/action_bar_pattern_table.png">
 <div class="figure-caption">
   In the above table "o" denotes an action bar item and "=" an overflow icon.
 </div>
@@ -438,7 +333,7 @@ provider</em> in your action bar. The share action provider is designed to speed
 displaying the most recently used sharing service next to a spinner button that contains other
 sharing options.</p>
 
-<img src="../static/content/action_bar_pattern_share_pack.png">
+<img src="{@docRoot}design/media/action_bar_pattern_share_pack.png">
 <div class="figure-caption">
   The Gallery app's share action provider with extended spinner for additional sharing options.
 </div>
@@ -457,55 +352,3 @@ actions exceeds the capacity of the main action bar, display them separately in
 Examples are the number of unread messages in a messaging inbox view or the Now Playing information
 in a music player. Carefully plan which important information you would like to display and
 structure your action bars accordingly.</p>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/app-structure.html b/docs/html/design/patterns/app-structure.jd
index 6780594..b54b12f 100644
--- a/docs/html/design/patterns/app-structure.html
+++ b/docs/html/design/patterns/app-structure.jd
@@ -1,110 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Application Structure
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Application Structure</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
+page.title=Application Structure
+@jd:body
 
 <p>Apps come in many varieties that address very different needs. For example:</p>
 <ul>
@@ -112,7 +7,7 @@ Android Design - Application Structure
   single screen</li>
 <li>Apps such as Phone whose main purpose is to switch between different activities without deeper
   navigation</li>
-<li>Apps such as Gmail and Google Play that combine a broad set of data views with deep navigation</li>
+<li>Apps such as Gmail or Google Play that combine a broad set of data views with deep navigation</li>
 </ul>
 <p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
 <h2 id="general-structure">General Structure</h2>
@@ -123,7 +18,7 @@ deep and complex, category views connect top level and detail views.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-9">
 
-    <img src="../static/content/app_structure_overview.png">
+    <img src="{@docRoot}design/media/app_structure_overview.png">
 
   </div>
   <div class="layout-content-col span-4">
@@ -163,7 +58,7 @@ layouts that are visually engaging and appropriate for the data type and screen
   </div>
   <div class="layout-content-col span-8">
 
-    <img src="../static/content/app_structure_market.png">
+    <img src="{@docRoot}design/media/app_structure_market.png">
     <div class="figure-caption">
       The Google Play app's start screen primarily allows navigation into the stores for Apps, Music, Books,
       Movies and Games. It is also enriched with tailored recommendations and promotions that
@@ -194,7 +89,7 @@ important actions.</p>
   </div>
   <div class="layout-content-col span-8">
 
-    <img src="../static/content/app_structure_gmail.png">
+    <img src="{@docRoot}design/media/app_structure_gmail.png">
     <div class="figure-caption">
       Email is about productivity, so an efficient, easy-to-skim list with higher data density works
       well. Navigation supports switching between accounts and recent labels. Icons for creating a
@@ -216,7 +111,7 @@ monotony of simple list views.</p>
   </div>
   <div class="layout-content-col span-8">
 
-    <img src="../static/content/app_structure_music_lndscp.png">
+    <img src="{@docRoot}design/media/app_structure_music_lndscp.png">
     <div class="figure-caption">
       The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
       Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
@@ -248,7 +143,7 @@ experience than to an explicit navigation step.</p>
 items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
 minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
 
-    <img src="../static/content/app_structure_scrolltabs.png">
+    <img src="{@docRoot}design/media/app_structure_scrolltabs.png">
     <div class="figure-caption">
       Google Play uses tabs to simultaneously show category choice and content. To navigate between
       categories, users can swipe left/right on the content.
@@ -260,7 +155,7 @@ minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
 <p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
 in view at the same time.</p>
 
-    <img src="../static/content/app_structure_fixedtabs.png">
+    <img src="{@docRoot}design/media/app_structure_fixedtabs.png">
     <div class="figure-caption">
       YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
     </div>
@@ -275,7 +170,7 @@ invocation of actions for a data item from within list or grid views, display pr
 directly on list view items using drop-downs or split list items. This lets people invoke actions on
 data without having to navigate all the way down the hierarchy.</p>
 
-<img src="../static/content/app_structure_shortcut_on_item.png">
+<img src="{@docRoot}design/media/app_structure_shortcut_on_item.png">
 <div class="figure-caption">
   Music allows the user to act upon a data item (song) from within the category view (album),
   thereby removing the need to navigate all the way down to the song's detail view.
@@ -301,12 +196,12 @@ the data type being displayed, and therefore differs widely among apps.</p>
 For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
 full-screen content.</p>
 
-    <img src="../static/content/app_structure_people_detail.png">
+    <img src="{@docRoot}design/media/app_structure_people_detail.png">
 
   </div>
   <div class="layout-content-col span-9">
 
-    <img src="../static/content/app_structure_book_detail_page_flip.png">
+    <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png">
     <div class="figure-caption">
       Google Books' detail view is all about replicating the experience of reading an actual book.
       The page-flip animation reinforces that notion. To create an immersive experience the app
@@ -327,12 +222,12 @@ full-screen content.</p>
 between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
 to achieve this.</p>
 
-<img src="../static/content/app_structure_gmail_swipe.png">
+<img src="{@docRoot}design/media/app_structure_gmail_swipe.png">
 <div class="figure-caption">
   Gmail using swipe views to navigate from detail view to detail view.
 </div>
 
-<img src="../static/content/app_structure_gallery_filmstrip.png">
+<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png">
 <div class="figure-caption">
   In addition to supporting swipe gestures to move left or right through images, Gallery provides a
   filmstrip control that lets people quickly jump to specific images.
@@ -357,55 +252,3 @@ to achieve this.</p>
 <p>Allow for quick navigation between detail items with swipe views.</p>
 </li>
 </ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/compatibility.html b/docs/html/design/patterns/compatibility.html
deleted file mode 100644
index d6e59f5..0000000
--- a/docs/html/design/patterns/compatibility.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Backwards Compatibility
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Backwards Compatibility</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Significant changes in Android 3.0 included:</p>
-<ul>
-<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation
-  via virtual controls (Back, Home, Recents).</li>
-<li>Robust pattern for the use of menus in action bars.</li>
-</ul>
-<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
-
-<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Phones with virtual navigation controls</h4>
-<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
-fit in the action bar or aren't important enough to be displayed at the top level appear in the
-action overflow.</p>
-<p>Users access the action overflow by touching it in the action bar.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_virtual_nav.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Phones with physical navigation keys</h4>
-<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
-the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The
-resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_physical_buttons.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Legacy apps on phones with virtual navigation controls</h4>
-<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
-controls, an action overflow control appears at the right side of the virtual navigation bar. You
-can touch the control to display the app's actions in the traditional Android menu styling.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_legacy_apps.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd
new file mode 100644
index 0000000..84ae337
--- /dev/null
+++ b/docs/html/design/patterns/compatibility.jd
@@ -0,0 +1,61 @@
+page.title=Backwards Compatibility
+@jd:body
+
+<p>Significant changes in Android 3.0 included:</p>
+<ul>
+<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation
+  via virtual controls (Back, Home, Recents).</li>
+<li>Robust pattern for the use of menus in action bars.</li>
+</ul>
+<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
+
+<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Phones with virtual navigation controls</h4>
+<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
+fit in the action bar or aren't important enough to be displayed at the top level appear in the
+action overflow.</p>
+<p>Users access the action overflow by touching it in the action bar.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_virtual_nav.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Phones with physical navigation keys</h4>
+<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
+the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The
+resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_physical_buttons.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Legacy apps on phones with virtual navigation controls</h4>
+<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
+controls, an action overflow control appears at the right side of the virtual navigation bar. You
+can touch the control to display the app's actions in the traditional Android menu styling.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_legacy_apps.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/gestures.html b/docs/html/design/patterns/gestures.html
deleted file mode 100644
index c88817f..0000000
--- a/docs/html/design/patterns/gestures.html
+++ /dev/null
@@ -1,272 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Gestures
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Gestures</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The
-following table shows the core gesture set that is supported in Android.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_touch.png">
-
-<h4>Touch</h4>
-<p>Triggers the default functionality for a given item.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, lift</p></li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_longtouch.png">
-
-<h4>Long press</h4>
-<p>Enters data selection mode. Allows you to select one or more items in a view and act upon
-  the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, wait, lift</p></li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_swipe.png">
-
-<h4>Swipe</h4>
-<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, move, lift</p></li>
-</ul>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_drag.png">
-
-<h4>Drag</h4>
-<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Long press, move, lift</p></li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_doubletouch.png">
-
-<h4>Double touch</h4>
-<p>Zooms into content. Also used as a secondary gesture for text selection.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Two touches in quick succession</p></li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_pinchopen.png">
-
-<h4>Pinch open</h4>
-<p>Zooms into content.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>2-finger press, move outwards, lift</p></li>
-</ul>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_pinchclose.png">
-
-<h4>Pinch close</h4>
-<p>Zooms out of content.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>2-finger press, move inwards, lift</p></li>
-</ul>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd
new file mode 100644
index 0000000..9868df2
--- /dev/null
+++ b/docs/html/design/patterns/gestures.jd
@@ -0,0 +1,115 @@
+page.title=Gestures
+@jd:body
+
+<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The
+following table shows the core gesture set that is supported in Android.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_touch.png">
+
+<h4>Touch</h4>
+<p>Triggers the default functionality for a given item.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>Press, lift</p></li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_longtouch.png">
+
+<h4>Long press</h4>
+<p>Enters data selection mode. Allows you to select one or more items in a view and act upon
+  the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>Press, wait, lift</p></li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_swipe.png">
+
+<h4>Swipe</h4>
+<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>Press, move, lift</p></li>
+</ul>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_drag.png">
+
+<h4>Drag</h4>
+<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>Long press, move, lift</p></li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_doubletouch.png">
+
+<h4>Double touch</h4>
+<p>Zooms into content. Also used as a secondary gesture for text selection.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>Two touches in quick succession</p></li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_pinchopen.png">
+
+<h4>Pinch open</h4>
+<p>Zooms into content.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>2-finger press, move outwards, lift</p></li>
+</ul>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_pinchclose.png">
+
+<h4>Pinch close</h4>
+<p>Zooms out of content.</p>
+
+<ul>
+  <li class="no-bullet with-icon action">
+    <h4>Action</h4>
+    <p>2-finger press, move inwards, lift</p></li>
+</ul>
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/index.html b/docs/html/design/patterns/index.html
deleted file mode 100644
index 863baa9..0000000
--- a/docs/html/design/patterns/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Design Patterns
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 492px;
-  width: 200px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-<div class="layout-content-row content-header just-links">
-  <div class="layout-content-col span-9">&nbsp;</div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Design apps that behave in a consistent, predictable fashion.
-    <br><br>
-    <a href="../patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a>
-  </div>
-
-  <a href="../patterns/new-4-0.html">
-    <img src="../static/content/patterns_landing.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd
new file mode 100644
index 0000000..732e4db
--- /dev/null
+++ b/docs/html/design/patterns/index.jd
@@ -0,0 +1,29 @@
+page.title=Patterns
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 492px;
+  width: 200px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Design apps that behave in a consistent, predictable fashion.
+    <br><br>
+    <a href="{@docRoot}design/patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a>
+  </div>
+
+  <a href="{@docRoot}design/patterns/new-4-0.html">
+    <img src="{@docRoot}design/media/patterns_landing.png">
+  </a>
+</div>
diff --git a/docs/html/design/patterns/multi-pane-layouts.html b/docs/html/design/patterns/multi-pane-layouts.html
deleted file mode 100644
index 7925c98..0000000
--- a/docs/html/design/patterns/multi-pane-layouts.html
+++ /dev/null
@@ -1,267 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Multi-pane Layouts
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Multi-pane Layouts</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>When writing an app for Android, keep in mind that Android devices come in many different screen
-sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
-layout by adjusting its content to varying screen sizes and orientations.</p>
-<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
-one compound view when a lot of horizontal screen real estate is available and by splitting them up
-when less space is available.</p>
-<h2 id="combining-views">Combining Multiple Views Into One</h2>
-
-<p>On smaller devices your content is typically divided into a master grid or list view and a detail
-view. Touching an item in the master view opens a different screen showing that item's detail
-information.</p>
-
-<img src="../static/content/multipane_views.png">
-
-<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
-list and detail views into a single compound view. This uses the additional space more efficiently
-and makes navigating the app easier. </p>
-
-<img src="../static/content/multipane_view_tablet.png">
-
-<p>In general, use the pane on the right to present more information about the item you selected in the
-left pane. Make sure to keep the item in the left pane selected in order to establish the
-relationship between the panels.</p>
-<h2 id="orientation">Compound Views and Orientation Changes</h2>
-
-<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
-one orientation, don't split it up when the user rotates the screen. There are several techniques
-you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_stretch.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Stretch/compress</h4>
-<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_stack.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Stack</h4>
-<p>Rearrange the panels on your screen to match the orientation.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_expand.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Expand/collapse</h4>
-<p>When the device rotates, collapse the left pane view to only show the most important information.
-Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
-width and vice versa.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_show.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Show/hide</h4>
-<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
-to show the left panel and allow navigation to a different email. Hide the left panel by touching
-the content in the detail panel.</p>
-
-  </div>
-</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
-</li>
-<li>
-<p>Identify the most appropriate method for the panels in your compound views to reorganize
-  themselves when screen orientation changes.</p>
-</li>
-<li>
-<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
-</li>
-<li>
-<p>Make sure that your screens provide functional parity after the screen orientation
-  changes.</p>
-</li>
-</ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd
new file mode 100644
index 0000000..0e63e32
--- /dev/null
+++ b/docs/html/design/patterns/multi-pane-layouts.jd
@@ -0,0 +1,110 @@
+page.title=Multi-pane Layouts
+@jd:body
+
+<p>When writing an app for Android, keep in mind that Android devices come in many different screen
+sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
+layout by adjusting its content to varying screen sizes and orientations.</p>
+<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
+one compound view when a lot of horizontal screen real estate is available and by splitting them up
+when less space is available.</p>
+<h2 id="combining-views">Combining Multiple Views Into One</h2>
+
+<p>On smaller devices your content is typically divided into a master grid or list view and a detail
+view. Touching an item in the master view opens a different screen showing that item's detail
+information.</p>
+
+<img src="{@docRoot}design/media/multipane_views.png">
+
+<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
+list and detail views into a single compound view. This uses the additional space more efficiently
+and makes navigating the app easier. </p>
+
+<img src="{@docRoot}design/media/multipane_view_tablet.png">
+
+<p>In general, use the pane on the right to present more information about the item you selected in the
+left pane. Make sure to keep the item in the left pane selected in order to establish the
+relationship between the panels.</p>
+<h2 id="orientation">Compound Views and Orientation Changes</h2>
+
+<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
+one orientation, don't split it up when the user rotates the screen. There are several techniques
+you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_stretch.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Stretch/compress</h4>
+<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_stack.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Stack</h4>
+<p>Rearrange the panels on your screen to match the orientation.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_expand.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Expand/collapse</h4>
+<p>When the device rotates, collapse the left pane view to only show the most important information.
+Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
+width and vice versa.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_show.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Show/hide</h4>
+<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
+to show the left panel and allow navigation to a different email. Hide the left panel by touching
+the content in the detail panel.</p>
+
+  </div>
+</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
+</li>
+<li>
+<p>Identify the most appropriate method for the panels in your compound views to reorganize
+  themselves when screen orientation changes.</p>
+</li>
+<li>
+<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
+</li>
+<li>
+<p>Make sure that your screens provide functional parity after the screen orientation
+  changes.</p>
+</li>
+</ul>
diff --git a/docs/html/design/patterns/navigation.html b/docs/html/design/patterns/navigation.html
deleted file mode 100644
index 5d1568e..0000000
--- a/docs/html/design/patterns/navigation.html
+++ /dev/null
@@ -1,275 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Navigation with Back and Up
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Navigation with Back and Up</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
-users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
-introduced significant changes to the global navigation behavior. Thoughtfully following the
-guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
-<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
-app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
-the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
-
-<img src="../static/content/navigation_with_back_and_up.png">
-
-<h2 id="up-vs-back">Up vs. Back</h2>
-
-<p>The Up button is used to navigate within an application based on the hierarchical relationships
-between screens. For instance, if screen A displays a list of items, and selecting an item leads to
-screen B (which presents that item in more detail), then screen B should offer an Up button that
-returns to screen A.</p>
-<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
-button.</p>
-<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
-in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
-<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
-the Back key will have the same result as pressing an Up button -- this is a common occurrence.
-However, unlike the Up button, which ensures the user remains within your app, the Back key can
-return the user to the Home screen, or even to a different application.</p>
-
-<img src="../static/content/navigation_up_vs_back_gmail.png">
-
-<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
-<ul>
-<li>Back dismisses floating windows (dialogs, popups)</li>
-<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
-<li>Back hides the onscreen keyboard (IME)</li>
-</ul>
-<h2 id="within-app">Navigation Within Your App</h2>
-
-<h4>Navigating to screens with multiple entry points</h4>
-<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
-from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
-in your app. In this case, the Up button should choose to return to the referring screen, behaving
-identically to Back.</p>
-<h4>Changing view within a screen</h4>
-<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
-in the same place within the app's hierarchy, and no new navigation history is created.</p>
-<p>Examples of such view changes are:</p>
-<ul>
-<li>Switching views using tabs and/or left-and-right swipes</li>
-<li>Switching views using a dropdown (aka collapsed tabs)</li>
-<li>Filtering a list</li>
-<li>Sorting a list</li>
-<li>Changing display characteristics (e.g. zooming)</li>
-</ul>
-<h4>Navigating between sibling screens</h4>
-<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
-often desirable to support direction navigation from that item to another one which precedes or
-follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
-to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
-navigation does not change the behavior of Up or Back.</p>
-
-<img src="../static/content/navigation_between_siblings_gmail.png">
-
-<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
-together by the referring list&mdash;for example, when browsing on Google Play between apps from
-the same developer, or albums by the same artist. In these cases, following each link does create
-history, causing the Back button to step through each screen of related content which has been
-viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
-container screen.</p>
-
-<img src="../static/content/navigation_between_siblings_market1.png">
-
-<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
-view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book
-viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
-which the user had not previously navigated through.</p>
-
-<img src="../static/content/navigation_between_siblings_market2.png">
-
-<h2 id="from-outside">Navigation From Outside Your App</h2>
-
-<p>There are two categories of navigation from outside your app to screens deep within the app's
-hierarchy:</p>
-<ul>
-<li>App-to-app navigation, such as via intent completion.</li>
-<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
-</ul>
-<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
-to the compose screen. For system-to-app navigation, both a new message notification and a home
-screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
-<h4>App-to-app navigation</h4>
-<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
-return to the referring app.</p>
-<p>The Up button is handled as follows:
-- If the destination screen is typically reached from one particular screen within your app, Up
-  should navigate to that screen.
-- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
-<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to
-Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the
-typical referrer to compose, as well as the topmost screen of the app), while Back returns to
-Google Play.</p>
-
-<img src="../static/content/navigation_from_outside_up.png">
-
-<h4>System-to-app navigation</h4>
-<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up
-behaves as described for app-to-app navigation, above.</p>
-<p>For the Back key, you should make navigation more predictably by inserting into the task's back
-stack the complete upward navigation path to the app's topmost screen. This way, a user who has
-forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
-it.</p>
-<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
-After following that path, the Back key first returns to the Inbox, and from there continues to
-Home.</p>
-
-<img src="../static/content/navigation_from_outside_back.png">
-
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd
new file mode 100644
index 0000000..d35cd82
--- /dev/null
+++ b/docs/html/design/patterns/navigation.jd
@@ -0,0 +1,116 @@
+page.title=Navigation with Back and Up
+@jd:body
+
+<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
+users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
+introduced significant changes to the global navigation behavior. Thoughtfully following the
+guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
+<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
+app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
+the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
+
+<img src="{@docRoot}design/media/navigation_with_back_and_up.png">
+
+<h2 id="up-vs-back">Up vs. Back</h2>
+
+<p>The Up button is used to navigate within an application based on the hierarchical relationships
+between screens. For instance, if screen A displays a list of items, and selecting an item leads to
+screen B (which presents that item in more detail), then screen B should offer an Up button that
+returns to screen A.</p>
+<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
+button.</p>
+<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
+in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
+<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
+the Back key will have the same result as pressing an Up button -- this is a common occurrence.
+However, unlike the Up button, which ensures the user remains within your app, the Back key can
+return the user to the Home screen, or even to a different application.</p>
+
+<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png">
+
+<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
+<ul>
+<li>Back dismisses floating windows (dialogs, popups)</li>
+<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
+<li>Back hides the onscreen keyboard (IME)</li>
+</ul>
+<h2 id="within-app">Navigation Within Your App</h2>
+
+<h4>Navigating to screens with multiple entry points</h4>
+<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
+from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
+in your app. In this case, the Up button should choose to return to the referring screen, behaving
+identically to Back.</p>
+<h4>Changing view within a screen</h4>
+<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
+in the same place within the app's hierarchy, and no new navigation history is created.</p>
+<p>Examples of such view changes are:</p>
+<ul>
+<li>Switching views using tabs and/or left-and-right swipes</li>
+<li>Switching views using a dropdown (aka collapsed tabs)</li>
+<li>Filtering a list</li>
+<li>Sorting a list</li>
+<li>Changing display characteristics (e.g. zooming)</li>
+</ul>
+<h4>Navigating between sibling screens</h4>
+<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
+often desirable to support direction navigation from that item to another one which precedes or
+follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
+to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
+navigation does not change the behavior of Up or Back.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png">
+
+<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
+together by the referring list&mdash;for example, when browsing on Google Play between apps from
+the same developer, or albums by the same artist. In these cases, following each link does create
+history, causing the Back button to step through each screen of related content which has been
+viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
+container screen.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_market1.png">
+
+<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
+view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book
+viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
+which the user had not previously navigated through.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_market2.png">
+
+<h2 id="from-outside">Navigation From Outside Your App</h2>
+
+<p>There are two categories of navigation from outside your app to screens deep within the app's
+hierarchy:</p>
+<ul>
+<li>App-to-app navigation, such as via intent completion.</li>
+<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
+</ul>
+<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
+to the compose screen. For system-to-app navigation, both a new message notification and a home
+screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
+<h4>App-to-app navigation</h4>
+<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
+return to the referring app.</p>
+<p>The Up button is handled as follows:
+- If the destination screen is typically reached from one particular screen within your app, Up
+  should navigate to that screen.
+- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
+<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to
+Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the
+typical referrer to compose, as well as the topmost screen of the app), while Back returns to
+Google Play.</p>
+
+<img src="{@docRoot}design/media/navigation_from_outside_up.png">
+
+<h4>System-to-app navigation</h4>
+<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up
+behaves as described for app-to-app navigation, above.</p>
+<p>For the Back key, you should make navigation more predictably by inserting into the task's back
+stack the complete upward navigation path to the app's topmost screen. This way, a user who has
+forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
+it.</p>
+<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
+After following that path, the Back key first returns to the Inbox, and from there continues to
+Home.</p>
+
+<img src="{@docRoot}design/media/navigation_from_outside_back.png">
diff --git a/docs/html/design/patterns/new-4-0.html b/docs/html/design/patterns/new-4-0.html
deleted file mode 100644
index 2e2cbc2..0000000
--- a/docs/html/design/patterns/new-4-0.html
+++ /dev/null
@@ -1,228 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - New in Android 4.0
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>New in Android 4.0</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Navigation bar</h4>
-<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
-virtual navigation bar that houses the Back, Home and Recents buttons. Read the
-<a href="../patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to
-phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/whats_new_nav_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Action bar</h4>
-<p>The action bar is the most important structural element of an Android app. It provides consistent
-navigation across the platform and allows your app to surface actions.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/whats_new_action_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Multi-pane layouts</h4>
-<p>Creating apps that scale well across different form factors and screen sizes is important in the
-Android world. Multi-pane layouts allow you to combine different activities that show separately on
-smaller devices into richer compound views for tablets.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/whats_new_multipanel.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Selection</h4>
-<p>The long press gesture which was traditionally used to show contextual actions for objects is now
-used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/whats_new_multiselect.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd
new file mode 100644
index 0000000..91ebba7
--- /dev/null
+++ b/docs/html/design/patterns/new-4-0.jd
@@ -0,0 +1,71 @@
+page.title=New in Android 4.0
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Navigation bar</h4>
+<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
+virtual navigation bar that houses the Back, Home and Recents buttons. Read the
+<a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to
+phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/whats_new_nav_bar.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Action bar</h4>
+<p>The action bar is the most important structural element of an Android app. It provides consistent
+navigation across the platform and allows your app to surface actions.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/whats_new_action_bar.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Multi-pane layouts</h4>
+<p>Creating apps that scale well across different form factors and screen sizes is important in the
+Android world. Multi-pane layouts allow you to combine different activities that show separately on
+smaller devices into richer compound views for tablets.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/whats_new_multipanel.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Selection</h4>
+<p>The long press gesture which was traditionally used to show contextual actions for objects is now
+used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/whats_new_multiselect.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/notifications.html b/docs/html/design/patterns/notifications.jd
index 99af418..ad88a01 100644
--- a/docs/html/design/patterns/notifications.html
+++ b/docs/html/design/patterns/notifications.jd
@@ -1,110 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Notifications
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Notifications</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
+page.title=Notifications
+@jd:body
 
 <p>The notification system allows your app to keep the user informed about important events, such as
 new messages in a chat app or a calendar event.</p>
@@ -128,7 +23,7 @@ synchronous form of communication: there is another user actively waiting on you
 Calendar events are another good example of when to use a notification and grab the user's
 attention, because the event is imminent, and calendar events often involve other people.</p>
 
-<img src="../static/content/notifications_pattern_real_time_people.png">
+<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png">
 
 <div class="vspace size-2">&nbsp;</div>
 
@@ -172,7 +67,7 @@ develop a widget that they can choose to place on their home screen.</p>
   </div>
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_social_fail.png">
+    <img src="{@docRoot}design/media/notifications_pattern_social_fail.png">
 
   </div>
 </div>
@@ -182,7 +77,7 @@ develop a widget that they can choose to place on their home screen.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_anatomy.png">
+    <img src="{@docRoot}design/media/notifications_pattern_anatomy.png">
 
   </div>
   <div class="layout-content-col span-6">
@@ -204,7 +99,7 @@ stacked (see <em>Stacked notifications</em> below) and references multiple items
 the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's
 back stack to allow them to navigate to your app's top level using the system back key. For more
 information, see the chapter on <em>System-to-app navigation</em> in the
-<a href="../patterns/navigation.html">Navigation</a> design pattern.</p>
+<a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p>
 <h4>Timestamps for time sensitive events</h4>
 <p>By default, standard Android notifications include a timestamp in the upper right corner. Consider
 whether the timestamp is valuable in the context of your notification. If the timestamp is not
@@ -222,11 +117,11 @@ an altogether new notification object. Instead, stack the notification.</p>
 notifications of a particular kind are pending.</p>
 <p><strong>Don't</strong>:</p>
 
-<img src="../static/content/notifications_pattern_additional_fail.png">
+<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png">
 
 <p><strong>Do</strong>:</p>
 
-<img src="../static/content/notifications_pattern_additional_win.png">
+<img src="{@docRoot}design/media/notifications_pattern_additional_win.png">
 
 <p>If you keep the summary and detail information on different screens, a stacked notification may need
 to open to a different place in the app than a single notification.</p>
@@ -252,7 +147,7 @@ hides automatically.</p>
   </div>
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_phone_ticker.png">
+    <img src="{@docRoot}design/media/notifications_pattern_phone_ticker.png">
 
   </div>
 </div>
@@ -278,7 +173,7 @@ currently pending.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_phone_icons.png">
+    <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png">
 
   </div>
   <div class="layout-content-col span-6">
@@ -301,7 +196,7 @@ notification drawer is opened by touching anywhere inside the notification area.
   </div>
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_tablet.png">
+    <img src="{@docRoot}design/media/notifications_pattern_tablet.png">
 
   </div>
 </div>
@@ -309,7 +204,7 @@ notification drawer is opened by touching anywhere inside the notification area.
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
 
-    <img src="../static/content/notifications_pattern_ongoing_music.png">
+    <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png">
 
   </div>
   <div class="layout-content-col span-6">
@@ -338,57 +233,4 @@ and toasts can echo back that an action has been successfully taken.</p>
 
 <div class="vspace size-1">&nbsp;</div>
 
-<img src="../static/content/notifications_pattern_dialog_toast.png">
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
+<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png">
diff --git a/docs/html/design/patterns/pure-android.html b/docs/html/design/patterns/pure-android.html
deleted file mode 100644
index f5a8042..0000000
--- a/docs/html/design/patterns/pure-android.html
+++ /dev/null
@@ -1,292 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Pure Android
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Pure Android</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
-Android, keep in mind that different platforms play by different rules and conventions. Design
-decisions that make perfect sense on one platform will look and feel misplaced in the context of a
-different platform. While a "design once, ship anywhere" approach might save you time up-front, you
-run the very real risk of creating inconsistent apps that alienate users. Consider the following
-guidelines to avoid the most common traps and pitfalls.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't mimic UI elements from other platforms</h4>
-<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
-distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
-use gradients in their title bars. In some cases, elements may have the same purpose, but are
-designed to work a bit differently.</p>
-<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
-don't mimic their specific behaviors. Review the <a href="../building-
-blocks/index.html">Building Blocks</a> section in this styleguide to learn about Android's most important UI elements
-and the way they look in the system default themes. Also examine Android's platform apps to get a
-sense of how elements are applied in the context of an app. If you want to customize the theme of UI
-elements, customize carefully according to your specific branding - and not according to the
-conventions of a different platform.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ui_elements.png">
-    <div class="figure-caption">
-      Sampling of UI elements from Android, iOS and Windows Phone 7.
-    </div>
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't carry over platform-specific icons</h4>
-<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
-document or deleting.</p>
-<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
-counterparts.</p>
-<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_icons.png">
-    <div class="figure-caption">
-      Sampling of icons from Android, iOS and Windows Phone 7.
-    </div>
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use bottom tab bars</h4>
-<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
-Android's tabs for view control are shown in action bars at the top of the screen instead. In
-addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
-<p>You should follow this guideline to create a consistent experience with other apps on the Android
-platform and to avoid confusion between actions and view switching on Android.</p>
-<p>For more information on how to properly use action bars for view control, see
-<a href="../patterns/actionbar.html">Action Bars</a>.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_dialers.png">
-    <div class="figure-caption">
-      Android dialer with tabs in an action bar vs. bottom tabs in iOS.
-    </div>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use labeled back buttons on action bars</h4>
-<p>Other platforms use an explicit back button with label to allow the user to navigate up the
-application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
-navigation and the navigation bar's back button for temporal navigation. For more information,
-please review the <a href="../patterns/navigation.html">Navigation</a> pattern.</p>
-<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_galleries.png">
-    <div class="figure-caption">
-      Android action bar with up caret vs. iOS labeled "Back" button.
-    </div>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use right-pointing carets on line items</h4>
-<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
-the user to drill deeper into additional content.</p>
-<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
-the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_settings.png">
-    <div class="figure-caption">
-      Android settings without right-pointing carets in line items vs. iOS settings.
-    </div>
-
-  </div>
-</div>
-
-<h2 id="device-independence">Device Independence</h2>
-
-<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
-for different screen sizes and densities and make use of concepts such as multi-pane layouts to
-appropriately scale your UI on different device form factors.</p>
-<p>For more information, read <a href="../style/devices-displays.html">Devices and Displays</a> as
-well as <a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd
new file mode 100644
index 0000000..8ed1347
--- /dev/null
+++ b/docs/html/design/patterns/pure-android.jd
@@ -0,0 +1,136 @@
+page.title=Pure Android
+@jd:body
+
+<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
+Android, keep in mind that different platforms play by different rules and conventions. Design
+decisions that make perfect sense on one platform will look and feel misplaced in the context of a
+different platform. While a "design once, ship anywhere" approach might save you time up-front, you
+run the very real risk of creating inconsistent apps that alienate users. Consider the following
+guidelines to avoid the most common traps and pitfalls.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't mimic UI elements from other platforms</h4>
+<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
+distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
+use gradients in their title bars. In some cases, elements may have the same purpose, but are
+designed to work a bit differently.</p>
+<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
+don't mimic their specific behaviors. Review the
+<a href="{@docRoot}design/building-blocks/index.html">Building Blocks</a>
+section in this styleguide to learn about Android's most important UI elements
+and the way they look in the system default themes. Also examine Android's platform apps to get a
+sense of how elements are applied in the context of an app. If you want to customize the theme of UI
+elements, customize carefully according to your specific branding - and not according to the
+conventions of a different platform.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ui_elements.png">
+    <div class="figure-caption">
+      Sampling of UI elements from Android, iOS and Windows Phone 7.
+    </div>
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't carry over platform-specific icons</h4>
+<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
+document or deleting.</p>
+<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
+counterparts.</p>
+<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_icons.png">
+    <div class="figure-caption">
+      Sampling of icons from Android, iOS and Windows Phone 7.
+    </div>
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use bottom tab bars</h4>
+<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
+Android's tabs for view control are shown in action bars at the top of the screen instead. In
+addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
+<p>You should follow this guideline to create a consistent experience with other apps on the Android
+platform and to avoid confusion between actions and view switching on Android.</p>
+<p>For more information on how to properly use action bars for view control, see
+<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_dialers.png">
+    <div class="figure-caption">
+      Android dialer with tabs in an action bar vs. bottom tabs in iOS.
+    </div>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use labeled back buttons on action bars</h4>
+<p>Other platforms use an explicit back button with label to allow the user to navigate up the
+application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
+navigation and the navigation bar's back button for temporal navigation. For more information,
+please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.</p>
+<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_galleries.png">
+    <div class="figure-caption">
+      Android action bar with up caret vs. iOS labeled "Back" button.
+    </div>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use right-pointing carets on line items</h4>
+<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
+the user to drill deeper into additional content.</p>
+<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
+the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_settings.png">
+    <div class="figure-caption">
+      Android settings without right-pointing carets in line items vs. iOS settings.
+    </div>
+
+  </div>
+</div>
+
+<h2 id="device-independence">Device Independence</h2>
+
+<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
+for different screen sizes and densities and make use of concepts such as multi-pane layouts to
+appropriately scale your UI on different device form factors.</p>
+<p>For more information, read <a href="{@docRoot}design/style/devices-displays.html">Devices and Displays</a> as
+well as <a href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
diff --git a/docs/html/design/patterns/selection.html b/docs/html/design/patterns/selection.html
deleted file mode 100644
index 44c6a84..0000000
--- a/docs/html/design/patterns/selection.html
+++ /dev/null
@@ -1,257 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Selection
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Selection</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Android 3.0 introduced the <em>long press</em> gesture&mdash;that is, a touch that's held in the same
-position for a moment&mdash;as the global gesture to select data. This affects the way you should
-handle multi-select and contextual actions in your apps.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>What has changed?</h4>
-<p>In previous versions of Android, the long press gesture was universally used to display contextual
-actions for a given data item in a contextual menu.</p>
-<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining
-contextual actions and selection management functions for selected data into a new element called
-the contextual action bar (CAB).</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_context_menu.png">
-    <div class="figure-caption">
-      Traditional use of the long press gesture to show contextual menus.
-    </div>
-
-  </div>
-</div>
-
-<h4>Using the contextual action bar (CAB)</h4>
-<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data
-is selected. It appears after the user long presses on a selectable data item.</p>
-
-<img src="../static/content/selection_cab_big.png">
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<p>From here the user can:</p>
-<ul>
-<li>Select additional data items by touching them.</li>
-<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then
-  automatically dismisses itself.</li>
-<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
-  the CAB along with all selection highlights.</li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_cab_example.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Selecting CAB actions</h4>
-<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
-pattern</a> to decide which items to surface at the top level and which to move to the
-action overflow.</p>
-<h4>Dynamically adjust CAB actions</h4>
-<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to
-the selection. Actions that apply to a single selected data item don't necessarily apply to multiple
-selected data items of the same kind.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_adjusting_actions.png">
-    <div class="figure-caption">
-      Adjusting actions in the CAB as additional items are selected.
-    </div>
-
-  </div>
-</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
-  bar (CAB).</p>
-</li>
-<li>
-<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional
-  contextual menus.</p>
-</li>
-<li>
-<p>If you don't support multi-selection within a list, long press should do nothing.</p>
-</li>
-<li>
-<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions
-  inside your app's action bar.</p>
-</li>
-</ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd
new file mode 100644
index 0000000..e3ee90e
--- /dev/null
+++ b/docs/html/design/patterns/selection.jd
@@ -0,0 +1,100 @@
+page.title=Selection
+@jd:body
+
+<p>Android 3.0 introduced the <em>long press</em> gesture&mdash;that is, a touch that's held in the same
+position for a moment&mdash;as the global gesture to select data. This affects the way you should
+handle multi-select and contextual actions in your apps.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>What has changed?</h4>
+<p>In previous versions of Android, the long press gesture was universally used to display contextual
+actions for a given data item in a contextual menu.</p>
+<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining
+contextual actions and selection management functions for selected data into a new element called
+the contextual action bar (CAB).</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_context_menu.png">
+    <div class="figure-caption">
+      Traditional use of the long press gesture to show contextual menus.
+    </div>
+
+  </div>
+</div>
+
+<h4>Using the contextual action bar (CAB)</h4>
+<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data
+is selected. It appears after the user long presses on a selectable data item.</p>
+
+<img src="{@docRoot}design/media/selection_cab_big.png">
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<p>From here the user can:</p>
+<ul>
+<li>Select additional data items by touching them.</li>
+<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then
+  automatically dismisses itself.</li>
+<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
+  the CAB along with all selection highlights.</li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_cab_example.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Selecting CAB actions</h4>
+<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
+pattern</a> to decide which items to surface at the top level and which to move to the
+action overflow.</p>
+<h4>Dynamically adjust CAB actions</h4>
+<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to
+the selection. Actions that apply to a single selected data item don't necessarily apply to multiple
+selected data items of the same kind.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_adjusting_actions.png">
+    <div class="figure-caption">
+      Adjusting actions in the CAB as additional items are selected.
+    </div>
+
+  </div>
+</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
+  bar (CAB).</p>
+</li>
+<li>
+<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional
+  contextual menus.</p>
+</li>
+<li>
+<p>If you don't support multi-selection within a list, long press should do nothing.</p>
+</li>
+<li>
+<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions
+  inside your app's action bar.</p>
+</li>
+</ul>
diff --git a/docs/html/design/patterns/swipe-views.html b/docs/html/design/patterns/swipe-views.html
deleted file mode 100644
index acc9f39..0000000
--- a/docs/html/design/patterns/swipe-views.html
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Swipe Views
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Swipe Views</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
-built in a hierarchical fashion, there are instances where horizontal navigation can flatten
-vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
-allow the user to efficiently move from item to item using a simple gesture and thereby make
-browsing and consuming data a more fluent experience.</p>
-<h2 id="detail-views">Swiping Between Detail Views</h2>
-
-<p>An app's data is often organized in a master/detail relationship: The user can view a list of
-related data items, such as images, chats, or emails, and then pick one of the items to see the
-detail contents in a separate screen.</p>
-
-<img src="../static/content/swipe_views.png">
-<div class="figure-caption">
-  Master (left) and detail (right) views.
-</div>
-
-<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
-jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
-<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
-using the swipe gesture to navigate to the next/previous detail view.</p>
-
-<img src="../static/content/swipe_views2.png">
-<div class="figure-caption">
-  Navigating between consecutive Email messages using the swipe gesture.
-</div>
-
-<h2 id="between-tabs">Swiping Between Tabs</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-    <div class="framed-galaxynexus-port-span-5">
-      <video class="play-on-hover" autoplay>
-        <source src="../static/content/swipe_tabs.mp4" type="video/mp4">
-        <source src="../static/content/swipe_tabs.webm" type="video/webm">
-        <source src="../static/content/swipe_tabs.ogv" type="video/ogg">
-      </video>
-    </div>
-    <div class="figure-caption">
-      People app with swipe gesture navigation between top-level screens.
-      <div class="video-instructions">&nbsp;</div>
-    </div>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
-<div class="vspace size-2">&nbsp;</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Use swipe to quickly navigate between detail views or tabs.</p>
-</li>
-<li>
-<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
-  gesture to complete and then transition between views.</p>
-</li>
-<li>
-<p>If you used buttons in the past for previous/next navigation, replace them with
-  the swipe gesture.</p>
-</li>
-<li>
-<p>Consider adding contextual information in your detail view that informs the user about the
-  relative list position of the currently visible item.</p>
-</li>
-</ul>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
new file mode 100644
index 0000000..95d65dd
--- /dev/null
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -0,0 +1,74 @@
+page.title=Swipe Views
+@jd:body
+
+<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
+built in a hierarchical fashion, there are instances where horizontal navigation can flatten
+vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
+allow the user to efficiently move from item to item using a simple gesture and thereby make
+browsing and consuming data a more fluent experience.</p>
+<h2 id="detail-views">Swiping Between Detail Views</h2>
+
+<p>An app's data is often organized in a master/detail relationship: The user can view a list of
+related data items, such as images, chats, or emails, and then pick one of the items to see the
+detail contents in a separate screen.</p>
+
+<img src="{@docRoot}design/media/swipe_views.png">
+<div class="figure-caption">
+  Master (left) and detail (right) views.
+</div>
+
+<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
+jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
+<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
+using the swipe gesture to navigate to the next/previous detail view.</p>
+
+<img src="{@docRoot}design/media/swipe_views2.png">
+<div class="figure-caption">
+  Navigating between consecutive Email messages using the swipe gesture.
+</div>
+
+<h2 id="between-tabs">Swiping Between Tabs</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+    <div class="framed-galaxynexus-port-span-5">
+      <video class="play-on-hover" autoplay>
+        <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4">
+        <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm">
+        <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg">
+      </video>
+    </div>
+    <div class="figure-caption">
+      People app with swipe gesture navigation between top-level screens.
+      <div class="video-instructions">&nbsp;</div>
+    </div>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
+<div class="vspace size-2">&nbsp;</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Use swipe to quickly navigate between detail views or tabs.</p>
+</li>
+<li>
+<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
+  gesture to complete and then transition between views.</p>
+</li>
+<li>
+<p>If you used buttons in the past for previous/next navigation, replace them with
+  the swipe gesture.</p>
+</li>
+<li>
+<p>Consider adding contextual information in your detail view that informs the user about the
+  relative list position of the currently visible item.</p>
+</li>
+</ul>
+
+  </div>
+</div>
diff --git a/docs/html/design/static/callout.png b/docs/html/design/static/callout.png
deleted file mode 100644
index 5d49f34..0000000
--- a/docs/html/design/static/callout.png
+++ /dev/null
diff --git a/docs/html/design/static/default.css b/docs/html/design/static/default.css
deleted file mode 100644
index 3aa1db3..0000000
--- a/docs/html/design/static/default.css
+++ /dev/null
@@ -1,633 +0,0 @@
-/* color definitions */
-/* 16 column layout */
-/* clearfix idiom */
-/* common mixins */
-/* page layout + top-level styles */
-::-webkit-selection,
-::-moz-selection,
-::selection {
-  background-color: #0099cc;
-  color: #fff; }
-
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background: #eee none no-repeat fixed top left;
-  background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#dddddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#dddddd));
-  background-image: -moz-linear-gradient(top, #dddddd, #f2f2f2, #f2f2f2, #dddddd);
-  -webkit-font-smoothing: antialiased;
-  /* prevent subpixel antialiasing, which thickens the text */
-  text-rendering: optimizeLegibility;
-  /* opentype ftw */ }
-
-body {
-  color: #555555;
-  font: 14px/20px Roboto, sans-serif;
-  font-weight: 400; }
-
-#page-container {
-  width: 940px;
-  margin: 0 40px; }
-
-#page-header {
-  height: 80px;
-  margin-bottom: 20px;
-  font-size: 48px;
-  line-height: 48px;
-  font-weight: 100;
-  padding-left: 10px; }
-  #page-header a {
-    display: block;
-    position: relative;
-    top: 20px;
-    text-decoration: none;
-    color: #555555 !important; }
-
-#main-row {
-  display: inline-block; }
-  #main-row:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden; }
-  * html #main-row {
-    height: 1px; }
-
-#page-footer {
-  margin-left: 190px;
-  margin-top: 80px;
-  color: #999999;
-  padding-bottom: 40px;
-  font-size: 12px;
-  line-height: 15px; }
-  #page-footer a {
-    color: #777777; }
-  #page-footer #copyright {
-    margin-bottom: 10px; }
-
-#nav {
-  width: 160px;
-  margin-right: 20px;
-  float: left; }
-
-#content {
-  width: 760px;
-  float: left; }
-
-a,
-a:visited {
-  color: #333333; }
-
-a:hover,
-acronym:hover {
-  color: #7aa1b0 !important; }
-
-a:focus,
-a:active {
-  color: #33b5e5 !important; }
-
-img {
-  border: none; }
-
-ul {
-  margin: 0;
-  padding: 0; }
-
-strong {
-  font-weight: 500; }
-
-em {
-  font-style: italic; }
-
-code {
-  font-family: Courier New, monospace; }
-
-acronym {
-  border-bottom: 1px dotted #555555;
-  cursor: help; }
-
-acronym:hover {
-  border-bottom-color: #7aa1b0; }
-
-img.with-shadow,
-video.with-shadow {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
-
-/* disclosures mixin */
-/* content layout */
-.layout-content-row {
-  display: inline-block;
-  margin-bottom: 10px; }
-  .layout-content-row:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden; }
-  * html .layout-content-row {
-    height: 1px; }
-
-.layout-content-col {
-  float: left;
-  margin-left: 20px; }
-  .layout-content-col:first-child {
-    margin-left: 0; }
-
-.layout-content-col.span-1 {
-  width: 40px; }
-
-.layout-content-col.span-2 {
-  width: 100px; }
-
-.layout-content-col.span-3 {
-  width: 160px; }
-
-.layout-content-col.span-4 {
-  width: 220px; }
-
-.layout-content-col.span-5 {
-  width: 280px; }
-
-.layout-content-col.span-6 {
-  width: 340px; }
-
-.layout-content-col.span-7 {
-  width: 400px; }
-
-.layout-content-col.span-8 {
-  width: 460px; }
-
-.layout-content-col.span-9 {
-  width: 520px; }
-
-.layout-content-col.span-10 {
-  width: 580px; }
-
-.layout-content-col.span-11 {
-  width: 640px; }
-
-.layout-content-col.span-12 {
-  width: 700px; }
-
-.layout-content-col.span-13 {
-  width: 760px; }
-
-.vspace.size-1 {
-  height: 10px; }
-
-.vspace.size-2 {
-  height: 20px; }
-
-.vspace.size-3 {
-  height: 30px; }
-
-.vspace.size-4 {
-  height: 40px; }
-
-.vspace.size-5 {
-  height: 50px; }
-
-.vspace.size-6 {
-  height: 60px; }
-
-.vspace.size-7 {
-  height: 70px; }
-
-.vspace.size-8 {
-  height: 80px; }
-
-.vspace.size-9 {
-  height: 90px; }
-
-.vspace.size-10 {
-  height: 100px; }
-
-.vspace.size-11 {
-  height: 110px; }
-
-.vspace.size-12 {
-  height: 120px; }
-
-.vspace.size-13 {
-  height: 130px; }
-
-.vspace.size-14 {
-  height: 140px; }
-
-.vspace.size-15 {
-  height: 150px; }
-
-.vspace.size-16 {
-  height: 160px; }
-
-/* nav */
-#nav {
-  /* section header divs */
-  /* expanded section header divs */
-  /* sublinks */ }
-  #nav li {
-    list-style-type: none;
-    font-size: 14px;
-    line-height: 10px; }
-  #nav a {
-    color: #555555;
-    text-decoration: none; }
-  #nav li.selected > a,
-  #nav li.selected .nav-section-header a {
-    font-weight: 500;
-    color: #0099cc !important; }
-  #nav .nav-section-header {
-    position: relative;
-    padding: 10px;
-    margin-bottom: 1px;
-    /* section header links */ }
-    #nav .nav-section-header a {
-      color: #333333;
-      font-weight: 500;
-      text-transform: uppercase; }
-    #nav .nav-section-header:after {
-      content: '';
-      background: transparent url(disclosure_down.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: block;
-      position: absolute;
-      top: 10px;
-      right: 10px; }
-    #nav .nav-section-header.empty:after {
-      display: none; }
-  #nav li.expanded .nav-section-header {
-    background: rgba(0, 0, 0, 0.05); }
-    #nav li.expanded .nav-section-header:after {
-      content: '';
-      background: transparent url(disclosure_up.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px; }
-  #nav > li > ul {
-    height: 0;
-    overflow: hidden;
-    margin-bottom: 0; }
-    #nav > li > ul.animate-height {
-      -webkit-transition: height 0.25s ease-in;
-      -moz-transition: height 0.25s ease-in;
-      transition: height 0.25s ease-in; }
-    #nav > li > ul li {
-      padding: 10px 10px 11px 10px; }
-  #nav > li.expanded > ul {
-    height: auto; }
-    #nav > li.expanded > ul li {
-      background: rgba(0, 0, 0, 0.03); }
-  #nav #back-dac-section {
-    padding: 10px;
-    border-top: 1px solid #ddd; }
-    #nav #back-dac-section a {
-      color: #333333;
-      font-weight: 500;
-      text-transform: uppercase; }
-
-/* content header */
-.content-header {
-  border-bottom: 1px solid #33b5e5;
-  height: 30px; }
-  .content-header h2 {
-    border-bottom: 0; }
-  .content-header.just-links {
-    border-bottom: 0; }
-
-.content-footer {
-  border-top: 1px solid #33b5e5;
-  margin-top: 10px;
-  height: 30px; }
-
-.paging-links {
-  position: relative; }
-  .paging-links a {
-    position: absolute;
-    font-size: 14px;
-    line-height: 30px;
-    color: #555555;
-    text-decoration: none;
-    text-transform: uppercase; }
-  .paging-links .prev-page-link {
-    display: none;
-    left: -5px; }
-    .paging-links .prev-page-link:before {
-      content: '';
-      background: transparent url(disclosure_left.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: inline-block;
-      margin-right: 5px; }
-  .paging-links .next-page-link {
-    display: none;
-    right: 10px; }
-    .paging-links .next-page-link:after {
-      content: '';
-      background: transparent url(disclosure_right.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: inline-block;
-      margin-left: 5px; }
-
-/* content body */
-@-webkit-keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-@-moz-keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-@keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-#content p,
-#content ul,
-#content ol,
-#content h3 {
-  margin: 0 10px 10px 10px; }
-#content h2 {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-bottom: 10px;
-  font-size: 16px;
-  line-height: 30px;
-  font-weight: 500;
-  color: #33b5e5;
-  border-bottom: 1px solid #33b5e5;
-  height: 30px; }
-  #content h2:target {
-    -webkit-animation-name: glowheader;
-    -moz-animation-name: glowheader;
-    animation-name: glowheader;
-    -webkit-animation-duration: 0.7s;
-    -moz-animation-duration: 0.7s;
-    animation-duration: 0.7s;
-    -webkit-animation-timing-function: ease-out;
-    -moz-animation-timing-function: ease-out;
-    animation-timing-function: ease-out; }
-#content hr {
-  border: 0;
-  border-bottom: 1px solid #33b5e5;
-  margin-bottom: 20px; }
-#content h3 {
-  color: #33b5e5;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500; }
-#content h4 {
-  margin: 0 10px;
-  color: #333333;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px; }
-#content strong {
-  color: #333333; }
-#content ul li,
-#content ol li {
-  margin-left: 20px; }
-  #content ul li h4,
-  #content ol li h4 {
-    margin: 0; }
-  #content ul li p,
-  #content ol li p {
-    margin-left: 0; }
-#content ul li {
-  list-style-type: square;
-  list-style-type: none;
-  position: relative; }
-  #content ul li:before {
-    content: '\2022';
-    font-family: verdana;
-    font-size: 14px;
-    line-height: 20px;
-    position: absolute;
-    left: -20px;
-    top: -1px; }
-#content ol {
-  counter-reset: item; }
-  #content ol li {
-    font-size: 14px;
-    line-height: 20px;
-    list-style-type: none;
-    position: relative; }
-    #content ol li:before {
-      content: counter(item) ". ";
-      counter-increment: item;
-      position: absolute;
-      left: -20px;
-      top: 0; }
-    #content ol li.value-1:before {
-      content: "1. "; }
-    #content ol li.value-2:before {
-      content: "2. "; }
-    #content ol li.value-3:before {
-      content: "3. "; }
-    #content ol li.value-4:before {
-      content: "4. "; }
-    #content ol li.value-5:before {
-      content: "5. "; }
-    #content ol li.value-6:before {
-      content: "6. "; }
-    #content ol li.value-7:before {
-      content: "7. "; }
-    #content ol li.value-8:before {
-      content: "8. "; }
-    #content ol li.value-9:before {
-      content: "9. "; }
-    #content ol li.value-10:before {
-      content: "10. "; }
-#content .with-callouts ol li {
-  list-style-position: inside;
-  margin-left: 0; }
-  #content .with-callouts ol li:before {
-    position: static;
-    display: inline;
-    left: 0;
-    float: left;
-    width: 17px;
-    color: #33b5e5;
-    font-weight: 500; }
-
-/* special list items */
-li.no-bullet {
-  list-style-type: none !important; }
-
-#content li.with-icon {
-  position: relative;
-  margin-left: 40px;
-  min-height: 30px; }
-  #content li.with-icon p {
-    margin-left: 0 !important; }
-  #content li.with-icon:before {
-    position: absolute;
-    left: -40px;
-    top: 0;
-    content: '';
-    width: 30px;
-    height: 30px; }
-  #content li.with-icon.tablet:before {
-    background-image: url(ico_phone_tablet.png); }
-  #content li.with-icon.web:before {
-    background-image: url(ico_web.png); }
-  #content li.with-icon.checklist:before {
-    background-image: url(ico_checklist.png); }
-  #content li.with-icon.action:before {
-    background-image: url(ico_action.png); }
-  #content li.with-icon.use:before {
-    background-image: url(ico_use.png); }
-
-/* figures and callouts */
-.figure {
-  position: relative; }
-  .figure.pad-below {
-    margin-bottom: 20px; }
-  .figure .figure-callout {
-    position: absolute;
-    color: #fff;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 23px;
-    text-align: center;
-    background: transparent url(callout.png) no-repeat scroll 50% 50%;
-    padding-right: 2px;
-    width: 30px;
-    height: 29px;
-    z-index: 1000; }
-    .figure .figure-callout.top {
-      top: -9px; }
-    .figure .figure-callout.right {
-      right: -5px; }
-
-.figure-caption {
-  margin: 0 10px 20px 10px;
-  font-size: 14px;
-  line-height: 20px;
-  font-style: italic; }
-
-/* rows of figures */
-.figure-row {
-  font-size: 0;
-  line-height: 0;
-  /* to prevent space between figures */ }
-  .figure-row .figure {
-    display: inline-block;
-    vertical-align: top; }
-  .figure-row .figure + .figure {
-    margin-left: 10px;
-    /* reintroduce space between figures */ }
-
-/* video  containers */
-.framed-galaxynexus-land-span-13 {
-  background: transparent url(content/misc_full_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
-  padding: 42px 122px 62px 126px;
-  overflow: hidden; }
-  .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, .framed-galaxynexus-land-span-13 img {
-    width: 512px;
-    height: 286px; }
-
-.framed-galaxynexus-port-span-9 {
-  background: transparent url(content/misc_full_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
-  padding: 95px 122px 107px 124px;
-  overflow: hidden; }
-  .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, .framed-galaxynexus-port-span-9 img {
-    width: 274px;
-    height: 488px; }
-
-.framed-galaxynexus-port-span-5 {
-  background: transparent url(content/misc_full_galaxynexus_blank_port_span5.png) no-repeat scroll top left;
-  padding: 75px 31px 76px 33px;
-  overflow: hidden; }
-  .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video, .framed-galaxynexus-port-span-5 img {
-    width: 216px;
-    height: 384px; }
-
-/* landing page disclosures */
-.landing-page-link {
-  text-decoration: none;
-  font-weight: 500;
-  color: #333333; }
-  .landing-page-link:after {
-    content: '';
-    background: transparent url(disclosure_right.png) no-repeat scroll top left;
-    width: 10px;
-    height: 10px;
-    display: inline-block;
-    margin-left: 5px; }
-
-/* tooltips */
-.tooltip-box {
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.9);
-  border-radius: 2px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #fff;
-  padding: 6px 10px;
-  max-width: 250px;
-  z-index: 10000; }
-  .tooltip-box.below:after {
-    position: absolute;
-    content: '';
-    line-height: 0;
-    display: block;
-    top: -10px;
-    left: 5px;
-    border: 5px solid transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.9); }
-
-/* video note */
-.video-instructions {
-  margin-top: 10px;
-  margin-bottom: 10px; }
-  .video-instructions:before {
-    content: '';
-    background: transparent url(ico_movie_inline.png) no-repeat scroll top left;
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin-right: 8px; }
-  .video-instructions:after {
-    content: 'Click to replay movie.'; }
-
-/* download buttons */
-.download-button {
-  display: block;
-  margin-bottom: 5px;
-  text-decoration: none;
-  background-color: #33b5e5;
-  color: #fff !important;
-  font-weight: 500;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
-  padding: 6px 12px;
-  border-radius: 2px; }
-  .download-button:hover, .download-button:focus {
-    background-color: #0099cc;
-    color: #fff !important; }
-  .download-button:active {
-    background-color: #006699; }
diff --git a/docs/html/design/static/default.js b/docs/html/design/static/default.js
deleted file mode 100644
index b213dd9..0000000
--- a/docs/html/design/static/default.js
+++ /dev/null
@@ -1,169 +0,0 @@
-$(document).ready(function() {
-  // prep nav expandos
-  var pagePath = document.location.pathname;
-  if (pagePath.indexOf(SITE_ROOT) == 0) {
-    pagePath = pagePath.substr(SITE_ROOT.length);
-    if (pagePath == '' || pagePath.charAt(pagePath.length - 1) == '/') {
-      pagePath += 'index.html';
-    }
-  }
-
-  if (SITE_ROOT.match(/\.\.\//) || SITE_ROOT == '') {
-    // If running locally, SITE_ROOT will be a relative path, so account for that by
-    // finding the relative URL to this page. This will allow us to find links on the page
-    // leading back to this page.
-    var pathParts = pagePath.split('/');
-    var relativePagePathParts = [];
-    var upDirs = (SITE_ROOT.match(/(\.\.\/)+/) || [''])[0].length / 3;
-    for (var i = 0; i < upDirs; i++) {
-      relativePagePathParts.push('..');
-    }
-    for (var i = 0; i < upDirs; i++) {
-      relativePagePathParts.push(pathParts[pathParts.length - (upDirs - i) - 1]);
-    }
-    relativePagePathParts.push(pathParts[pathParts.length - 1]);
-    pagePath = relativePagePathParts.join('/');
-  } else {
-    // Otherwise the page path should be an absolute URL.
-    pagePath = SITE_ROOT + pagePath;
-  }
-
-  // select current page in sidenav and set up prev/next links if they exist
-  var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]');
-  if ($selNavLink.length) {
-    $selListItem = $selNavLink.closest('li');
-
-    $selListItem.addClass('selected');
-    $selListItem.closest('li.nav-section').addClass('expanded');
-
-    // set up prev links
-    var $prevLink = [];
-    var $prevListItem = $selListItem.prev('li');
-    if ($prevListItem.length) {
-      if ($prevListItem.hasClass('nav-section')) {
-        // jump to last topic of previous section
-        $prevLink = $prevListItem.find('a:last');
-      } else {
-        // jump to previous topic in this section
-        $prevLink = $prevListItem.find('a:eq(0)');
-      }
-    } else {
-      // jump to this section's index page (if it exists)
-      $prevLink = $selListItem.parents('li').find('a');
-    }
-
-    if ($prevLink.length) {
-      var prevHref = $prevLink.attr('href');
-      if (prevHref == SITE_ROOT + 'index.html') {
-        // Don't show Previous when it leads to the homepage
-        $('.prev-page-link').hide();
-      } else {
-        $('.prev-page-link').attr('href', prevHref).show();
-      }
-    } else {
-      $('.prev-page-link').hide();
-    }
-
-    // set up next links
-    var $nextLink = [];
-    if ($selListItem.hasClass('nav-section')) {
-      // we're on an index page, jump to the first topic
-      $nextLink = $selListItem.find('ul').find('a:eq(0)')
-    } else {
-      // jump to the next topic in this section (if it exists)
-      $nextLink = $selListItem.next('li').find('a:eq(0)');
-      if (!$nextLink.length) {
-        // no more topics in this section, jump to the first topic in the next section
-        $nextLink = $selListItem.parents('li').next('li.nav-section').find('a:eq(0)');
-      }
-    }
-    if ($nextLink.length) {
-      $('.next-page-link').attr('href', $nextLink.attr('href')).show();
-    } else {
-      $('.next-page-link').hide();
-    }
-  }
-
-  // Set up expand/collapse behavior
-  $('#nav li.nav-section').click(function() {
-    if ($(this).hasClass('expanded')) {
-      return;
-    }
-
-    // hide other
-    var $old = $('#nav li.nav-section.expanded');
-    if ($old.length) {
-      var $oldUl = $old.children('ul');
-      $oldUl.css('height', $oldUl.height() + 'px');
-      window.setTimeout(function() {
-        $oldUl
-            .addClass('animate-height')
-            .css('height', '');
-      }, 0);
-      $old.removeClass('expanded');
-    }
-
-    // show me
-    $(this).addClass('expanded');
-    var $ul = $(this).children('ul');
-    var expandedHeight = $ul.height();
-    $ul
-        .removeClass('animate-height')
-        .css('height', 0);
-    window.setTimeout(function() {
-      $ul
-          .addClass('animate-height')
-          .css('height', expandedHeight + 'px');
-    }, 0);
-  });
-
-  // Stop expand/collapse behavior when clicking on nav section links (since we're navigating away
-  // from the page)
-  $('.nav-section-header').find('a:eq(0)').click(function(evt) {
-    window.location.href = $(this).attr('href');
-    return false;
-  });
-
-  // Set up play-on-hover <video> tags.
-  $('video.play-on-hover').bind('click', function(){
-    $(this).get(0).load(); // in case the video isn't seekable
-    $(this).get(0).play();
-  });
-
-  // Set up tooltips
-  var TOOLTIP_MARGIN = 10;
-  $('acronym').each(function() {
-    var $target = $(this);
-    var $tooltip = $('<div>')
-        .addClass('tooltip-box')
-        .text($target.attr('title'))
-        .hide()
-        .appendTo('body');
-    $target.removeAttr('title');
-
-    $target.hover(function() {
-      // in
-      var targetRect = $target.offset();
-      targetRect.width = $target.width();
-      targetRect.height = $target.height();
-
-      $tooltip.css({
-        left: targetRect.left,
-        top: targetRect.top + targetRect.height + TOOLTIP_MARGIN
-      });
-      $tooltip.addClass('below');
-      $tooltip.show();
-    }, function() {
-      // out
-      $tooltip.hide();
-    });
-  });
-
-  // Set up <h2> deeplinks
-  $('h2').click(function() {
-    var id = $(this).attr('id');
-    if (id) {
-      document.location.hash = id;
-    }
-  });
-});
-\ No newline at end of file
diff --git a/docs/html/design/static/disclosure_down.png b/docs/html/design/static/disclosure_down.png
deleted file mode 100644
index 4b3ff4d..0000000
--- a/docs/html/design/static/disclosure_down.png
+++ /dev/null
diff --git a/docs/html/design/static/disclosure_left.png b/docs/html/design/static/disclosure_left.png
deleted file mode 100644
index 607845e..0000000
--- a/docs/html/design/static/disclosure_left.png
+++ /dev/null
diff --git a/docs/html/design/static/disclosure_right.png b/docs/html/design/static/disclosure_right.png
deleted file mode 100644
index f3bceb1..0000000
--- a/docs/html/design/static/disclosure_right.png
+++ /dev/null
diff --git a/docs/html/design/static/disclosure_up.png b/docs/html/design/static/disclosure_up.png
deleted file mode 100644
index 5ff6d9d..0000000
--- a/docs/html/design/static/disclosure_up.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_action.png b/docs/html/design/static/ico_action.png
deleted file mode 100644
index 30e4cc7..0000000
--- a/docs/html/design/static/ico_action.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_good.png b/docs/html/design/static/ico_good.png
deleted file mode 100644
index afebe1c..0000000
--- a/docs/html/design/static/ico_good.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_movie_inline.png b/docs/html/design/static/ico_movie_inline.png
deleted file mode 100644
index 7cfb5c5..0000000
--- a/docs/html/design/static/ico_movie_inline.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_phone_tablet.png b/docs/html/design/static/ico_phone_tablet.png
deleted file mode 100644
index 003b876..0000000
--- a/docs/html/design/static/ico_phone_tablet.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_use.png b/docs/html/design/static/ico_use.png
deleted file mode 100644
index 9d868b3..0000000
--- a/docs/html/design/static/ico_use.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_web.png b/docs/html/design/static/ico_web.png
deleted file mode 100644
index 0848e3c..0000000
--- a/docs/html/design/static/ico_web.png
+++ /dev/null
diff --git a/docs/html/design/static/ico_wrong.png b/docs/html/design/static/ico_wrong.png
deleted file mode 100644
index b7d04ce..0000000
--- a/docs/html/design/static/ico_wrong.png
+++ /dev/null
diff --git a/docs/html/design/static/jquery-1.6.2.min.js b/docs/html/design/static/jquery-1.6.2.min.js
deleted file mode 100644
index 8cdc80e..0000000
--- a/docs/html/design/static/jquery-1.6.2.min.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/*!
- * jQuery JavaScript Library v1.6.2
- * http://jquery.com/
- *
- * Copyright 2011, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * Includes Sizzle.js
- * http://sizzlejs.com/
- * Copyright 2011, The Dojo Foundation
- * Released under the MIT, BSD, and GPL Licenses.
- *
- * Date: Thu Jun 30 14:16:56 2011 -0400
- */
-(function(a,b){function cv(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cs(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cr(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cq(){cn=b}function cp(){setTimeout(cq,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function bZ(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bY(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bC.test(a)?d(a,e):bY(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)bY(a+"["+e+"]",b[e],c,d);else d(a,b)}function bX(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bR,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=bX(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bX(a,c,d,e,"*",g));return l}function bW(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bN),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bA(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bv:bw;if(d>0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bx(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function bm(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(be,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bl(a){f.nodeName(a,"input")?bk(a):"getElementsByTagName"in a&&f.grep(a.getElementsByTagName("input"),bk)}function bk(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bj(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bi(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bh(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i<j;i++)f.event.add(b,h+(g[h][i].namespace?".":"")+g[h][i].namespace,g[h][i],g[h][i].data)}}}}function bg(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function W(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(R.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function V(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function N(a,b){return(a&&a!=="*"?a+".":"")+b.replace(z,"`").replace(A,"&")}function M(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;i<s.length;i++)g=s[i],g.origType.replace(x,"")===a.type?q.push(g.selector):s.splice(i--,1);e=f(a.target).closest(q,a.currentTarget);for(j=0,k=e.length;j<k;j++){m=e[j];for(i=0;i<s.length;i++){g=s[i];if(m.selector===g.selector&&(!n||n.test(g.namespace))&&!m.elem.disabled){h=m.elem,d=null;if(g.preType==="mouseenter"||g.preType==="mouseleave")a.type=g.preType,d=f(a.relatedTarget).closest(g.selector)[0],d&&f.contains(h,d)&&(d=h);(!d||d!==h)&&p.push({elem:h,handleObj:g,level:m.level})}}}for(j=0,k=p.length;j<k;j++){e=p[j];if(c&&e.level>c)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function K(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function E(){return!0}function D(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(j,"$1-$2").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(g){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z])/ig,x=function(a,b){return b.toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6.2",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!A){A=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1;var c;for(c in a);return c===b||D.call(a,c)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(b,c,d){a.DOMParser?(d=new DOMParser,c=d.parseFromString(b,"text/xml")):(c=new ActiveXObject("Microsoft.XMLDOM"),c.async="false",c.loadXML(b)),d=c.documentElement,(!d||!d.nodeName||d.nodeName==="parsererror")&&e.error("Invalid XML: "+b);return c},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b){if(H)return H.call(b,a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g="done fail isResolved isRejected promise then always pipe".split(" "),h=[].slice;f.extend({_Deferred:function(){var a=[],b,c,d,e={done:function(){if(!d){var c=arguments,g,h,i,j,k;b&&(k=b,b=0);for(g=0,h=c.length;g<h;g++)i=c[g],j=f.type(i),j==="array"?e.done.apply(e,i):j==="function"&&a.push(i);k&&e.resolveWith(k[0],k[1])}return this},resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this},resolve:function(){e.resolveWith(this,arguments);return this},isResolved:function(){return!!c||!!b},cancel:function(){d=1,a=[];return this}};return e},Deferred:function(a){var b=f._Deferred(),c=f._Deferred(),d;f.extend(b,{then:function(a,c){b.done(a).fail(c);return this},always:function(){return b.done.apply(b,arguments).fail.apply(this,arguments)},fail:c.done,rejectWith:c.resolveWith,reject:c.resolve,isRejected:c.isResolved,pipe:function(a,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[c,"reject"]},function(a,c){var e=c[0],g=c[1],h;f.isFunction(e)?b[a](function(){h=e.apply(this,arguments),h&&f.isFunction(h.promise)?h.promise().then(d.resolve,d.reject):d[g](h)}):b[a](d[g])})}).promise()},promise:function(a){if(a==null){if(d)return d;d=a={}}var c=g.length;while(c--)a[g[c]]=b[g[c]];return a}}),b.done(c.cancel).fail(b.cancel),delete b.cancel,a&&a.call(b,b);return b},when:function(a){function i(a){return function(c){b[a]=arguments.length>1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c<d;c++)b[c]&&f.isFunction(b[c].promise)?b[c].promise().then(i(c),g.reject):--e;e||g.resolveWith(g,b)}else g!==a&&g.resolveWith(g,d?[a]:[]);return g.promise()}}),f.support=function(){var a=c.createElement("div"),b=c.documentElement,d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;a.setAttribute("className","t"),a.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55$/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.firstChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0},m&&f.extend(p,{position:"absolute",left:-1e3,top:-1e3});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0),o.innerHTML="",n.removeChild(o);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([a-z])([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g=f.expando,h=typeof c=="string",i,j=a.nodeType,k=j?f.cache:a,l=j?a[f.expando]:a[f.expando]&&f.expando;if((!l||e&&l&&!k[l][g])&&h&&d===b)return;l||(j?a[f.expando]=l=++f.uuid:l=f.expando),k[l]||(k[l]={},j||(k[l].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?k[l][g]=f.extend(k[l][g],c):k[l]=f.extend(k[l],c);i=k[l],e&&(i[g]||(i[g]={}),i=i[g]),d!==b&&(i[f.camelCase(c)]=d);if(c==="events"&&!i[c])return i[g]&&i[g].events;return h?i[f.camelCase(c)]||i[c]:i}},removeData:function(b,c,d){if(!!f.acceptData(b)){var e=f.expando,g=b.nodeType,h=g?f.cache:b,i=g?b[f.expando]:f.expando;if(!h[i])return;if(c){var j=d?h[i][e]:h[i];if(j){delete j[c];if(!l(j))return}}if(d){delete h[i][e];if(!l(h[i]))return}var k=h[i][e];f.support.deleteExpando||h!=a?delete h[i]:h[i]=null,k?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=k):g&&(f.support.deleteExpando?delete b[f.expando]:b.removeAttribute?b.removeAttribute(f.expando):b[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h<i;h++)g=e[h].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),k(this[0],g,d[g]))}}return d}if(typeof a=="object")return this.each(function(){f.data(this,a)});var j=a.split(".");j[1]=j[1]?"."+j[1]:"";if(c===b){d=this.triggerHandler("getData"+j[1]+"!",[j[0]]),d===b&&this.length&&(d=f.data(this[0],a),d=k(this[0],a,d));return d===b&&j[1]?this.data(j[0]):d}return this.each(function(){var b=f(this),d=[j[0],c];b.triggerHandler("setData"+j[1]+"!",d),f.data(this,a,c),b.triggerHandler("changeData"+j[1]+"!",d)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,c){a&&(c=(c||"fx")+"mark",f.data(a,c,(f.data(a,c,b,!0)||0)+1,!0))},_unmark:function(a,c,d){a!==!0&&(d=c,c=a,a=!1);if(c){d=d||"fx";var e=d+"mark",g=a?0:(f.data(c,e,b,!0)||1)-1;g?f.data(c,e,g,!0):(f.removeData(c,e,!0),m(c,d,"mark"))}},queue:function(a,c,d){if(a){c=(c||"fx")+"queue";var e=f.data(a,c,b,!0);d&&(!e||f.isArray(d)?e=f.data(a,c,f.makeArray(d),!0):e.push(d));return e||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e;d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),d.call(a,function(){f.dequeue(a,b)})),c.length||(f.removeData(a,b+"queue",!0),m(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(){var c=this;setTimeout(function(){f.dequeue(c,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f._Deferred(),!0))h++,l.done(m);m();return d.promise()}});var n=/[\n\t\r]/g,o=/\s+/,p=/\r/g,q=/^(?:button|input)$/i,r=/^(?:button|input|object|select|textarea)$/i,s=/^a(?:rea)?$/i,t=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,u=/\:|^on/,v,w;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(o);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(o);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(n," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(o);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ";for(var c=0,d=this.length;c<d;c++)if((" "+this[c].className+" ").replace(n," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;d=e.value;return typeof d=="string"?d.replace(p,""):d==null?"":d}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c=a.selectedIndex,d=[],e=a.options,g=a.type==="select-one";if(c<0)return null;for(var h=g?c:0,i=g?c+1:e.length;h<i;h++){var j=e[h];if(j.selected&&(f.support.optDisabled?!j.disabled:j.getAttribute("disabled")===null)&&(!j.parentNode.disabled||!f.nodeName(j.parentNode,"optgroup"))){b=f(j).val();if(g)return b;d.push(b)}}if(g&&!d.length&&e.length)return f(e[c]).val();return d},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);var h,i,j=g!==1||!f.isXMLDoc(a);j&&(c=f.attrFix[c]||c,i=f.attrHooks[c],i||(t.test(c)?i=w:v&&c!=="className"&&(f.nodeName(a,"form")||u.test(c))&&(i=v)));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j&&(h=i.get(a,c))!==null)return h;h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){var c;a.nodeType===1&&(b=f.attrFix[b]||b,f.support.getSetAttribute?a.removeAttribute(b):(f.attr(a,b,""),a.removeAttributeNode(a.getAttributeNode(b))),t.test(b)&&(c=f.propFix[b]||b)in a&&(a[c]=!1))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},tabIndex:{get:function(a){var c=a.getAttributeNode("tabIndex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}},value:{get:function(a,b){if(v&&f.nodeName(a,"button"))return v.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(v&&f.nodeName(a,"button"))return v.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);i&&(c=f.propFix[c]||c,h=f.propHooks[c]);return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==b?g:a[c]},propHooks:{}}),w={get:function(a,c){return f.prop(a,c)?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},f.support.getSetAttribute||(f.attrFix=f.propFix,v=f.attrHooks.name=f.attrHooks.title=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&d.nodeValue!==""?d.nodeValue:b},set:function(a,b,c){var d=a.getAttributeNode(c);if(d){d.nodeValue=b;return b}}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var x=/\.(.*)$/,y=/^(?:textarea|input|select)$/i,z=/\./g,A=/ /g,B=/[^\w\s.|`]/g,C=function(a){return a.replace(B,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=D;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=D);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),C).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j<p.length;j++){q=p[j];if(l||n.test(q.namespace))f.event.remove(a,r,q.handler,j),p.splice(j--,1)}continue}o=f.event.special[h]||{};for(j=e||0;j<p.length;j++){q=p[j];if(d.guid===q.guid){if(l||n.test(q.namespace))e==null&&p.splice(j--,1),o.remove&&o.remove.call(a,q);if(e!=null)break}}if(p.length===0||e!=null&&p.length===1)(!o.teardown||o.teardown.call(a,m)===!1)&&f.removeEvent(a,h,s.handle),g=null,delete t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.
-shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,N(a.origType,a.selector),f.extend({},a,{handler:M,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,N(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?E:D):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=E;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=E;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=E,this.stopPropagation()},isDefaultPrevented:D,isPropagationStopped:D,isImmediatePropagationStopped:D};var F=function(a){var b=a.relatedTarget,c=!1,d=a.type;a.type=a.data,b!==this&&(b&&(c=f.contains(this,b)),c||(f.event.handle.apply(this,arguments),a.type=d))},G=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?G:F,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?G:F)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=b.type;(c==="submit"||c==="image")&&f(b).closest("form").length&&K("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=b.type;(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&K("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var H,I=function(a){var b=a.type,c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},J=function(c){var d=c.target,e,g;if(!!y.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=I(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:J,beforedeactivate:J,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&J.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&J.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",I(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in H)f.event.add(this,c+".specialChange",H[c]);return y.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return y.test(this.nodeName)}},H=f.event.special.change.filters,H.focus=H.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var L={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||D,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=x.exec(h),k="",j&&(k=j[0],h=h.replace(x,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,L[h]?(a.push(L[h]+k),h=h+k):h=(L[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+N(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+N(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){if(a===b){g=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var O=/Until$/,P=/^(?:parents|prevUntil|prevAll)/,Q=/,/,R=/^.[^:#\[\.,]*$/,S=Array.prototype.slice,T=f.expr.match.POS,U={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(W(this,a,!1),"not",a)},filter:function(a){return this.pushStack(W(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=T.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=T.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a||typeof a=="string")return f.inArray(this[0],a?f(a):this.parent().children());return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(V(c[0])||V(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=S.call(arguments);O.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!U[a]?f.unique(e):e,(this.length>1||Q.test(d))&&P.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var X=/ jQuery\d+="(?:\d+|null)"/g,Y=/^\s+/,Z=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,$=/<([\w:]+)/,_=/<tbody/i,ba=/<|&#?\w+;/,bb=/<(?:script|object|embed|option|style)/i,bc=/checked\s*(?:[^=]|=\s*.checked.)/i,bd=/\/(java|ecma)script/i,be=/^\s*<!(?:\[CDATA\[|\-\-)/,bf={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};bf.optgroup=bf.option,bf.tbody=bf.tfoot=bf.colgroup=bf.caption=bf.thead,bf.th=bf.td,f.support.htmlSerialize||(bf._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(X,""):null;if(typeof a=="string"&&!bb.test(a)&&(f.support.leadingWhitespace||!Y.test(a))&&!bf[($.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Z,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bc.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bg(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bm)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i;b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!bb.test(a[0])&&(f.support.checkClone||!bc.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j
-)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bi(a,d),e=bj(a),g=bj(d);for(h=0;e[h];++h)bi(e[h],g[h])}if(b){bh(a,d);if(c){e=bj(a),g=bj(d);for(h=0;e[h];++h)bh(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!ba.test(k))k=b.createTextNode(k);else{k=k.replace(Z,"<$1></$2>");var l=($.exec(k)||["",""])[1].toLowerCase(),m=bf[l]||bf._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=_.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&Y.test(k)&&o.insertBefore(b.createTextNode(Y.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bl(k[i]);else bl(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bd.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bn=/alpha\([^)]*\)/i,bo=/opacity=([^)]*)/,bp=/([A-Z]|^ms)/g,bq=/^-?\d+(?:px)?$/i,br=/^-?\d/,bs=/^[+\-]=/,bt=/[^+\-\.\de]+/g,bu={position:"absolute",visibility:"hidden",display:"block"},bv=["Left","Right"],bw=["Top","Bottom"],bx,by,bz;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bx(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d;if(h==="number"&&isNaN(d)||d==null)return;h==="string"&&bs.test(d)&&(d=+d.replace(bt,"")+parseFloat(f.css(a,c)),h="number"),h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bx)return bx(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bA(a,b,d);f.swap(a,bu,function(){e=bA(a,b,d)});return e}},set:function(a,b){if(!bq.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bo.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle;c.zoom=1;var e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.filter=bn.test(g)?g.replace(bn,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bx(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(by=function(a,c){var d,e,g;c=c.replace(bp,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bz=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bq.test(d)&&br.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bx=by||bz,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bB=/%20/g,bC=/\[\]$/,bD=/\r?\n/g,bE=/#.*$/,bF=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bG=/^(?:color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bH=/^(?:about|app|app\-storage|.+\-extension|file|widget):$/,bI=/^(?:GET|HEAD)$/,bJ=/^\/\//,bK=/\?/,bL=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bM=/^(?:select|textarea)/i,bN=/\s+/,bO=/([?&])_=[^&]*/,bP=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bQ=f.fn.load,bR={},bS={},bT,bU;try{bT=e.href}catch(bV){bT=c.createElement("a"),bT.href="",bT=bT.href}bU=bP.exec(bT.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bQ)return bQ.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bL,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bM.test(this.nodeName)||bG.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bD,"\r\n")}}):{name:b.name,value:c.replace(bD,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?f.extend(!0,a,f.ajaxSettings,b):(b=a,a=f.extend(!0,f.ajaxSettings,b));for(var c in{context:1,url:1})c in b?a[c]=b[c]:c in f.ajaxSettings&&(a[c]=f.ajaxSettings[c]);return a},ajaxSettings:{url:bT,isLocal:bH.test(bU[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":"*/*"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML}},ajaxPrefilter:bW(bR),ajaxTransport:bW(bS),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a?4:0;var o,r,u,w=l?bZ(d,v,l):b,x,y;if(a>=200&&a<300||a===304){if(d.ifModified){if(x=v.getResponseHeader("Last-Modified"))f.lastModified[k]=x;if(y=v.getResponseHeader("Etag"))f.etag[k]=y}if(a===304)c="notmodified",o=!0;else try{r=b$(d,w),c="success",o=!0}catch(z){c="parsererror",u=z}}else{u=c;if(!c||a)c="error",a<0&&(a=0)}v.status=a,v.statusText=c,o?h.resolveWith(e,[r,c,v]):h.rejectWith(e,[v,c,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,c]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bF.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bE,"").replace(bJ,bU[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bN),d.crossDomain==null&&(r=bP.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bU[1]&&r[2]==bU[2]&&(r[3]||(r[1]==="http:"?80:443))==(bU[3]||(bU[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bX(bR,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bI.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bK.test(d.url)?"&":"?")+d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bO,"$1_="+x);d.url=y+(y===d.url?(bK.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", */*; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bX(bS,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){status<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bB,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn,co=a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cr("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cs(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cr("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cr("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=cs(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block"))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],cj.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=ck.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[i]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cr("show",1),slideUp:cr("hide",1),slideToggle:cr("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function h(a){return d.step(a)}var d=this,e=f.fx,g;this.startTime=cn||cp(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,h.elem=this.elem,h()&&f.timers.push(h)&&!cl&&(co?(cl=!0,g=function(){cl&&(co(g),e.tick())},co(g)):cl=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=cn||cp(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b<a.length;++b)a[b]()||a.splice(b--,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cl),cl=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var ct=/^t(?:able|d|h)$/i,cu=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cv(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!ct.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cu.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cu.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cv(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cv(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c];return e.document.compatMode==="CSS1Compat"&&g||e.document.body["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var h=f.css(e,d),i=parseFloat(h);return f.isNaN(i)?h:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
-\ No newline at end of file
diff --git a/docs/html/design/static/open_new_page.png b/docs/html/design/static/open_new_page.png
deleted file mode 100644
index 6197e3a..0000000
--- a/docs/html/design/static/open_new_page.png
+++ /dev/null
diff --git a/docs/html/design/static/yui-3.3.0-reset-min.css b/docs/html/design/static/yui-3.3.0-reset-min.css
deleted file mode 100644
index 00c3892..0000000
--- a/docs/html/design/static/yui-3.3.0-reset-min.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-Copyright (c) 2010, Yahoo! Inc. All rights reserved.
-Code licensed under the BSD License:
-http://developer.yahoo.com/yui/license.html
-version: 3.3.0
-build: 3167
-*/
-html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
-\ No newline at end of file
diff --git a/docs/html/design/style/color.html b/docs/html/design/style/color.html
deleted file mode 100644
index bca3c45..0000000
--- a/docs/html/design/style/color.html
+++ /dev/null
@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Color
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-  .color-row {
-    width: 740px;
-    margin-left: 10px !important;
-    margin-right: 10px !important;
-
-    display:         box;
-    display: -webkit-box;
-    display:    -moz-box;
-
-            box-orient: horizontal;
-    -webkit-box-orient: horizontal;
-       -moz-box-orient: horizontal;
-
-    cursor: pointer;
-
-            user-select: none;
-    -webkit-user-select: none;
-    /* nested user-select in FF is broken as of Jan 2012, don't use it */
-  }
-
-  .color-row-container {
-    line-height: 0; /* to remove more top space in FF for -moz-box elements */
-  }
-
-  .color-row-container + .color-row-container {
-    margin-top: -10px !important;
-  }
-
-  .color-row li {
-    margin-left: 0 !important;
-    position: relative;
-    list-style-type: none;
-    height: 80px;
-    display: block;
-
-            box-flex: 1;
-    -webkit-box-flex: 1;
-       -moz-box-flex: 1;
-  }
-
-  .color-row li:before {
-    display: none;
-  }
-
-  .color-row li.thin {
-    height: 40px;
-  }
-
-  .color-row li span {
-    display: none;
-    position: absolute;
-    top: -30px;
-    left: 50%;
-    margin-left: -2.5em;
-    width: 5em;
-    background-color: #fff;
-    padding: 10px;
-    font-weight: 600;
-    line-height: 20px;
-    text-align: center;
-    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
-    cursor: text;
-
-            user-select: text;
-    -webkit-user-select: text;
-    /* nested user-select in FF is broken as of Jan 2012, don't use it */
-  }
-
-  .color-row li:hover span {
-    display: block;
-  }
-
-  /*.color-row li span:before {
-    color: #999;
-    content: 'copy ';
-  }*/
-
-  /* triangle callout */
-  .color-row li span:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 50%;
-    bottom: -16px;
-    border: 8px solid transparent;
-    border-top-color: #fff;
-    width: 0;
-    height: 0;
-    margin-left: -8px;
-  }
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Color</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
-between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
-
-    <div class="color-row-container">
-      <ul class="color-row">
-        <li><span>#33b5e5</span></li>
-        <li><span>#aa66cc</span></li>
-        <li><span>#99cc00</span></li>
-        <li><span>#ffbb33</span></li>
-        <li><span>#ff4444</span></li>
-      </ul>
-    </div>
-
-    <div class="color-row-container">
-      <ul class="color-row">
-        <li class="thin"><span>#0099cc</span></li>
-        <li class="thin"><span>#9933cc</span></li>
-        <li class="thin"><span>#669900</span></li>
-        <li class="thin"><span>#ff8800</span></li>
-        <li class="thin"><span>#cc0000</span></li>
-      </ul>
-    </div>
-
-<h2 id="palette">Palette</h2>
-
-<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
-shade that can be used as a complement when needed.</p>
-<p><a href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
-
-<img src="../static/content/color_spectrum.png">
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-<script>
-  $(document).ready(function() {
-    $('.color-row li').each(function() {
-      var color = $(this).text();
-      $(this).css('background-color', color);
-      $(this).find('span')
-          .css('color', color)
-          .text(color.toUpperCase());
-    });
-    
-  });
-</script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd
new file mode 100644
index 0000000..e25f7c6
--- /dev/null
+++ b/docs/html/design/style/color.jd
@@ -0,0 +1,134 @@
+page.title=Color
+@jd:body
+
+<style>
+  .color-row {
+    width: 740px;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+
+    display: -webkit-box;
+    display:    -moz-box;
+    display:         box;
+
+    -webkit-box-orient: horizontal;
+       -moz-box-orient: horizontal;
+            box-orient: horizontal;
+
+    cursor: pointer;
+
+    -webkit-user-select: none;
+            user-select: none;
+    /* nested user-select in FF is broken as of Jan 2012, don't use it */
+  }
+
+  .color-row-container {
+    line-height: 0; /* to remove more top space in FF for -moz-box elements */
+  }
+
+  .color-row-container + .color-row-container {
+    margin-top: -10px !important;
+  }
+
+  .color-row li {
+    margin-left: 0 !important;
+    position: relative;
+    list-style-type: none;
+    height: 80px;
+    display: block;
+
+    -webkit-box-flex: 1;
+       -moz-box-flex: 1;
+            box-flex: 1;
+  }
+
+  .color-row li:before {
+    display: none;
+  }
+
+  .color-row li.thin {
+    height: 40px;
+  }
+
+  .color-row li span {
+    display: none;
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    margin-left: -2.5em;
+    width: 5em;
+    background-color: #fff;
+    padding: 10px;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: center;
+    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
+    cursor: text;
+
+    -webkit-user-select: text;
+            user-select: text;
+    /* nested user-select in FF is broken as of Jan 2012, don't use it */
+  }
+
+  .color-row li:hover span {
+    display: block;
+  }
+
+  /* triangle callout */
+  .color-row li span:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 50%;
+    bottom: -16px;
+    border: 8px solid transparent;
+    border-top-color: #fff;
+    width: 0;
+    height: 0;
+    margin-left: -8px;
+  }
+</style>
+
+<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
+between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
+
+    <div class="color-row-container">
+      <ul class="color-row">
+        <li><span>#33b5e5</span></li>
+        <li><span>#aa66cc</span></li>
+        <li><span>#99cc00</span></li>
+        <li><span>#ffbb33</span></li>
+        <li><span>#ff4444</span></li>
+      </ul>
+    </div>
+
+    <div class="color-row-container">
+      <ul class="color-row">
+        <li class="thin"><span>#0099cc</span></li>
+        <li class="thin"><span>#9933cc</span></li>
+        <li class="thin"><span>#669900</span></li>
+        <li class="thin"><span>#ff8800</span></li>
+        <li class="thin"><span>#cc0000</span></li>
+      </ul>
+    </div>
+
+<h2 id="palette">Palette</h2>
+
+<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
+shade that can be used as a complement when needed.</p>
+<p><a href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
+
+<img src="{@docRoot}design/media/color_spectrum.png">
+
+<script>
+  $(document).ready(function() {
+    $('.color-row li').each(function() {
+      var color = $(this).text();
+      $(this).css('background-color', color);
+      $(this).find('span')
+          .css('color', color)
+          .text(color.toUpperCase());
+    });
+    
+  });
+</script>
diff --git a/docs/html/design/style/devices-displays.html b/docs/html/design/style/devices-displays.html
deleted file mode 100644
index 89e0876..0000000
--- a/docs/html/design/style/devices-displays.html
+++ /dev/null
@@ -1,202 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Devices and Displays
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Devices and Displays</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and
-form factors. By taking advantage of Android's flexible layout system, you can create apps that
-gracefully scale from large tablets to smaller phones.</p>
-
-<img src="../static/content/devices_displays_main.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Be flexible</h4>
-<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Optimize layouts</h4>
-<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
-multiple views to reveal more content and ease navigation.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<h4>Assets for all</h4>
-<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
-ensure that your app looks great on any device.</p>
-
-  </div>
-</div>
-
-<div style="text-align:center">
-  <img src="../static/content/devices_displays_density.png">
-</div>
-
-<h4>Strategies</h4>
-<p>So where do you begin when designing for multiple screens? One approach is to work in the base
-standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
-down for the other buckets. Another approach is to start with the device with the largest screen
-size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
-<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple
-Screens</a>.</p>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
new file mode 100644
index 0000000..e5fe26d
--- /dev/null
+++ b/docs/html/design/style/devices-displays.jd
@@ -0,0 +1,45 @@
+page.title=Devices and Displays
+@jd:body
+
+<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and
+form factors. By taking advantage of Android's flexible layout system, you can create apps that
+gracefully scale from large tablets to smaller phones.</p>
+
+<img src="{@docRoot}design/media/devices_displays_main.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Be flexible</h4>
+<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Optimize layouts</h4>
+<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
+multiple views to reveal more content and ease navigation.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<h4>Assets for all</h4>
+<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
+ensure that your app looks great on any device.</p>
+
+  </div>
+</div>
+
+<div style="text-align:center">
+  <img src="{@docRoot}design/media/devices_displays_density.png">
+</div>
+
+<h4>Strategies</h4>
+<p>So where do you begin when designing for multiple screens? One approach is to work in the base
+standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
+down for the other buckets. Another approach is to start with the device with the largest screen
+size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
+<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple
+Screens</a>.</p>
diff --git a/docs/html/design/style/iconography.html b/docs/html/design/style/iconography.jd
index 0b2852e..775e45d 100644
--- a/docs/html/design/style/iconography.html
+++ b/docs/html/design/style/iconography.jd
@@ -1,112 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Iconography
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Iconography</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/iconography_overview.png">
+page.title=Iconography
+@jd:body
+
+<img src="{@docRoot}design/media/iconography_overview.png">
 
 <p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick,
 intuitive representation of an action, a status, or an app.</p>
@@ -122,17 +17,17 @@ any type of background.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_launcher_size.png">
+    <img src="{@docRoot}design/media/iconography_launcher_size.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_launcher_focal.png">
+    <img src="{@docRoot}design/media/iconography_launcher_focal.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_launcher_style.png">
+    <img src="{@docRoot}design/media/iconography_launcher_style.png">
 
   </div>
 </div>
@@ -177,7 +72,7 @@ from above, so that users perceive some depth.</p>
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/iconography_launcher_example.png">
+    <img src="{@docRoot}design/media/iconography_launcher_example.png">
 
   </div>
   <!-- 2 free columns -->
@@ -186,7 +81,7 @@ from above, so that users perceive some depth.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-12">
 
-    <img src="../static/content/iconography_launcher_example2.png">
+    <img src="{@docRoot}design/media/iconography_launcher_example2.png">
 
     <div class="vspace size-2">&nbsp;</div>
 
@@ -222,17 +117,17 @@ files for further customization.
 <div class="layout-content-row">
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_actionbar_size.png">
+    <img src="{@docRoot}design/media/iconography_actionbar_size.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_actionbar_focal.png">
+    <img src="{@docRoot}design/media/iconography_actionbar_focal.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_actionbar_style.png">
+    <img src="{@docRoot}design/media/iconography_actionbar_style.png">
 
   </div>
 </div>
@@ -287,7 +182,7 @@ Disabled: <strong>30%</strong> opacity</p>
   </div>
   <div class="layout-content-col span-9">
 
-    <img src="../static/content/iconography_actionbar_colors.png">
+    <img src="{@docRoot}design/media/iconography_actionbar_colors.png">
 
   </div>
 </div>
@@ -303,17 +198,17 @@ important.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_small_size.png">
+    <img src="{@docRoot}design/media/iconography_small_size.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_small_focal.png">
+    <img src="{@docRoot}design/media/iconography_small_focal.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_small_style.png">
+    <img src="{@docRoot}design/media/iconography_small_style.png">
 
   </div>
 </div>
@@ -354,7 +249,7 @@ metaphor so that a user can easily recognize and understand its purpose.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_small_colors.png">
+    <img src="{@docRoot}design/media/iconography_small_colors.png">
 
     <div class="vspace size-2">&nbsp;</div>
 
@@ -366,7 +261,7 @@ the background.</p>
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/iconography_small_example.png">
+    <img src="{@docRoot}design/media/iconography_small_example.png">
 
   </div>
   <!-- 2 free columns -->
@@ -382,17 +277,17 @@ whenever a new notification is available.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_notification_size.png">
+    <img src="{@docRoot}design/media/iconography_notification_size.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_notification_focal.png">
+    <img src="{@docRoot}design/media/iconography_notification_focal.png">
 
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="../static/content/iconography_notification_style.png">
+    <img src="{@docRoot}design/media/iconography_notification_style.png">
 
   </div>
 </div>
@@ -438,60 +333,8 @@ whenever a new notification is available.</p>
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/iconography_notification_example.png">
+    <img src="{@docRoot}design/media/iconography_notification_example.png">
 
   </div>
   <!-- 2 free columns -->
 </div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/index.html b/docs/html/design/style/index.html
deleted file mode 100644
index c7ac58f..0000000
--- a/docs/html/design/style/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Design Elements
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 402px;
-  width: 220px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-<div class="layout-content-row content-header just-links">
-  <div class="layout-content-col span-9">&nbsp;</div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Build visually compelling apps that look great on any device. 
-    <br><br>
-    <a href="../style/devices-displays.html" class="landing-page-link">Devices and Displays</a>
-  </div>
-
-  <a href="../style/devices-displays.html">
-    <img src="../static/content/design_elements_landing.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/index.jd b/docs/html/design/style/index.jd
new file mode 100644
index 0000000..d346aea
--- /dev/null
+++ b/docs/html/design/style/index.jd
@@ -0,0 +1,29 @@
+page.title=Style
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 402px;
+  width: 220px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Build visually compelling apps that look great on any device. 
+    <br><br>
+    <a href="{@docRoot}design/style/devices-displays.html" class="landing-page-link">Devices and Displays</a>
+  </div>
+
+  <a href="{@docRoot}design/style/devices-displays.html">
+    <img src="{@docRoot}design/media/design_elements_landing.png">
+  </a>
+</div>
diff --git a/docs/html/design/style/metrics-grids.html b/docs/html/design/style/metrics-grids.html
deleted file mode 100644
index 7bb9dd0..0000000
--- a/docs/html/design/style/metrics-grids.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Metrics and Grids
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Metrics and Grids</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
-inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
-falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than
-600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi
-screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym
-title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
-dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title
-="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing
-alternative layouts for some of the different size buckets, and provide alternative bitmap images
-for different density buckets.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/metrics_diagram.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Space considerations</h4>
-<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>
-<p>To see more, visit the
-<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank">
-Screen Sizes and Densities Device Dashboard</a>.</p>
-
-  </div>
-</div>
-
-<h2 id="48dp-rhythm">48dp Rhythm</h2>
-
-<p>Touchable UI components are generally laid out along 48dp units.</p>
-
-<img src="../static/content/metrics_48.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Why 48dp?</h4>
-<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is
-comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users
-will be able to reliably and accurately target them with their fingers.</p>
-<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p>
-<ul>
-<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of
-  what screen they are displayed on.</li>
-<li>you strike a good compromise between overall information density on the one hand, and
-  targetability of UI elements on the other.</li>
-</ul>
-
-<img src="../static/content/metrics_closeup.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Mind the gaps</h4>
-<p>Spacing between each UI element is 8dp.</p>
-
-<h2 id="examples">Examples</h2>
-
-<img src="../static/content/metrics_forms.png">
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
new file mode 100644
index 0000000..e2b9ab5
--- /dev/null
+++ b/docs/html/design/style/metrics-grids.jd
@@ -0,0 +1,61 @@
+page.title=Metrics and Grids
+@jd:body
+
+<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
+inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
+falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than
+600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi
+screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym
+title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
+dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title
+="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing
+alternative layouts for some of the different size buckets, and provide alternative bitmap images
+for different density buckets.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/metrics_diagram.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Space considerations</h4>
+<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>
+<p>To see more, visit the
+<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank">
+Screen Sizes and Densities Device Dashboard</a>.</p>
+
+  </div>
+</div>
+
+<h2 id="48dp-rhythm">48dp Rhythm</h2>
+
+<p>Touchable UI components are generally laid out along 48dp units.</p>
+
+<img src="{@docRoot}design/media/metrics_48.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Why 48dp?</h4>
+<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is
+comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users
+will be able to reliably and accurately target them with their fingers.</p>
+<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p>
+<ul>
+<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of
+  what screen they are displayed on.</li>
+<li>you strike a good compromise between overall information density on the one hand, and
+  targetability of UI elements on the other.</li>
+</ul>
+
+<img src="{@docRoot}design/media/metrics_closeup.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Mind the gaps</h4>
+<p>Spacing between each UI element is 8dp.</p>
+
+<h2 id="examples">Examples</h2>
+
+<img src="{@docRoot}design/media/metrics_forms.png">
diff --git a/docs/html/design/style/themes.html b/docs/html/design/style/themes.html
deleted file mode 100644
index a629978..0000000
--- a/docs/html/design/style/themes.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Themes
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Themes</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-    <img src="../static/content/themes_holo_light.png">
-    <div class="figure-caption">
-      Gmail in Holo Light.
-    </div>
-
-    <img src="../static/content/themes_holo_dark.png">
-    <div class="figure-caption">
-      Settings in Holo Dark.
-    </div>
-
-    <img src="../static/content/themes_holo_inverse.png">
-    <div class="figure-caption">
-      Talk in Holo Light with dark action bar.
-    </div>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
-specifies the visual properties of the elements that make up your user interface, such as color,
-height, padding and font size. To promote greater cohesion between all apps on the platform, Android
-provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
-<ul>
-<li>Holo Light</li>
-<li>Holo Dark</li>
-<li>Holo Light with dark action bars</li>
-</ul>
-<p>Applying these themes will go a long way in helping you to build apps that fit right into the
-general visual language of Android.</p>
-<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your
-desire is to have a more distinct look for your app, using one of the system themes as a starting
-point for your customizations is a good idea. The system themes provide a solid foundation on top
-of which you can selectively implement your own visual stylings.</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
new file mode 100644
index 0000000..d4a6acf
--- /dev/null
+++ b/docs/html/design/style/themes.jd
@@ -0,0 +1,42 @@
+page.title=Themes
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+    <img src="{@docRoot}design/media/themes_holo_light.png">
+    <div class="figure-caption">
+      Gmail in Holo Light.
+    </div>
+
+    <img src="{@docRoot}design/media/themes_holo_dark.png">
+    <div class="figure-caption">
+      Settings in Holo Dark.
+    </div>
+
+    <img src="{@docRoot}design/media/themes_holo_inverse.png">
+    <div class="figure-caption">
+      Talk in Holo Light with dark action bar.
+    </div>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
+specifies the visual properties of the elements that make up your user interface, such as color,
+height, padding and font size. To promote greater cohesion between all apps on the platform, Android
+provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
+<ul>
+<li>Holo Light</li>
+<li>Holo Dark</li>
+<li>Holo Light with dark action bars</li>
+</ul>
+<p>Applying these themes will go a long way in helping you to build apps that fit right into the
+general visual language of Android.</p>
+<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your
+desire is to have a more distinct look for your app, using one of the system themes as a starting
+point for your customizations is a good idea. The system themes provide a solid foundation on top
+of which you can selectively implement your own visual stylings.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/style/touch-feedback.html b/docs/html/design/style/touch-feedback.html
deleted file mode 100644
index d1c08f8..0000000
--- a/docs/html/design/style/touch-feedback.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Touch Feedback
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Touch Feedback</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row" style="margin-bottom: -100px">
-  <div class="layout-content-col span-7">
-
-<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and
-indicate what actions are enabled and disabled.</p>
-<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the
-user know which object was touched and that your app is "listening".</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/touch_feedback_reaction_response.png">
-
-  </div>
-</div>
-
-<h4>States</h4>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<img src="../static/content/touch_feedback_states.png">
-<div class="figure-caption">
-  Most of Android's UI elements have touch-feedback built in, including states that indicate
-  whether touching the element will have any effect.
-</div>
-
-<div class="vspace size-4">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Communication</h4>
-<p>When your objects react to more complex gestures, help users understand what the outcome of the
-operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
-starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
-
-  </div>
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/touch_feedback_manipulation.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/touch_feedback_communication.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<div class="vspace size-3">&nbsp;</div>
-
-<h4>Boundaries</h4>
-<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
-boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
-panel, the screen content tilts to the right to indicate that further navigation in this direction
-is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
-support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
-and provide it from within your app.</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
new file mode 100644
index 0000000..5fe72a7
--- /dev/null
+++ b/docs/html/design/style/touch-feedback.jd
@@ -0,0 +1,67 @@
+page.title=Touch Feedback
+@jd:body
+
+<div class="layout-content-row" style="margin-bottom: -100px">
+  <div class="layout-content-col span-7">
+
+<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and
+indicate what actions are enabled and disabled.</p>
+<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the
+user know which object was touched and that your app is "listening".</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/touch_feedback_reaction_response.png">
+
+  </div>
+</div>
+
+<h4>States</h4>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<img src="{@docRoot}design/media/touch_feedback_states.png">
+<div class="figure-caption">
+  Most of Android's UI elements have touch-feedback built in, including states that indicate
+  whether touching the element will have any effect.
+</div>
+
+<div class="vspace size-4">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Communication</h4>
+<p>When your objects react to more complex gestures, help users understand what the outcome of the
+operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
+starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
+
+  </div>
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/touch_feedback_manipulation.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/touch_feedback_communication.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<div class="vspace size-3">&nbsp;</div>
+
+<h4>Boundaries</h4>
+<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
+boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
+panel, the screen content tilts to the right to indicate that further navigation in this direction
+is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
+support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
+and provide it from within your app.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/style/typography.html b/docs/html/design/style/typography.html
deleted file mode 100644
index d9b6d4b..0000000
--- a/docs/html/design/style/typography.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Typography
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Typography</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/typography_main.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
-and alignment with an underlying grid. Successful deployment of these tools is essential to help
-users quickly understand a screen of information. To support such use of typography, Ice Cream
-Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI
-and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold
-italic weights by default.</p>
-
-    <img src="../static/content/typography_alphas.png">
-
-<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
-<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
-
-  </div>
-</div>
-
-<hr>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Default type colors</h4>
-<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
-<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
-<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
-touch feedback states when used inside UI elements.</p>
-
-    <img src="../static/content/typography_defaults.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Typographic Scale</h4>
-<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
-many different sizes in the same UI can be messy. The Android framework uses the following limited
-set of type sizes:</p>
-
-<img src="../static/content/typography_sizes.png">
-
-<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
-these accessibility features, type should be specified in scale-independent pixels
-(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>)
-wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
-
-  </div>
-</div>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
new file mode 100644
index 0000000..db2fb5f
--- /dev/null
+++ b/docs/html/design/style/typography.jd
@@ -0,0 +1,56 @@
+page.title=Typography
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/typography_main.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
+and alignment with an underlying grid. Successful deployment of these tools is essential to help
+users quickly understand a screen of information. To support such use of typography, Ice Cream
+Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI
+and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold
+italic weights by default.</p>
+
+    <img src="{@docRoot}design/media/typography_alphas.png">
+
+<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
+<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
+
+  </div>
+</div>
+
+<hr>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Default type colors</h4>
+<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
+<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
+<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
+touch feedback states when used inside UI elements.</p>
+
+    <img src="{@docRoot}design/media/typography_defaults.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Typographic Scale</h4>
+<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
+many different sizes in the same UI can be messy. The Android framework uses the following limited
+set of type sizes:</p>
+
+<img src="{@docRoot}design/media/typography_sizes.png">
+
+<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
+these accessibility features, type should be specified in scale-independent pixels
+(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>)
+wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/style/writing.html b/docs/html/design/style/writing.jd
index 146ce88..80fd03e 100644
--- a/docs/html/design/style/writing.html
+++ b/docs/html/design/style/writing.jd
@@ -1,15 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Writing Style
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
+page.title=Writing Style
+@jd:body
 
 <style>
 
@@ -54,110 +44,15 @@ Android Design - Writing Style
 }
 
 .example_label.bad {
-  background-image: url(../static/ico_wrong.png);
+  background-image: url({@docRoot}assets/design/ico_wrong.png);
 }
 
 .example_label.good {
-  background-image: url(../static/ico_good.png);
+  background-image: url({@docRoot}assets/design/ico_good.png);
 }
 
 </style>
 
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Writing Style</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
 <p>When choosing words for your app:</p>
 <ol>
 <li>
@@ -433,55 +328,3 @@ crashes:</ol>
 
   </div>
 </div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
author	Roman Nurik <romannurik@google.com>	2012-03-06 14:39:54 -0800
committer	Android (Google) Code Review <android-gerrit@google.com>	2012-03-06 14:39:54 -0800
commit	96c757e557ed40da4400b82fd62dfbd4bc8151d1 (patch)
tree	5aea88b343c66bf9c47f03478ccfd3e38b325689 /docs
parent	66895ad5f7cdb9a8a292c9e6c04347a10b4212a3 (diff)
parent	b99ae73cc53056bcd87c592489b8ab83107e37e2 (diff)
download	frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.zip frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.tar.gz frameworks_base-96c757e557ed40da4400b82fd62dfbd4bc8151d1.tar.bz2