<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.html">New in Android</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/confirming-acknowledging.html">Confirming &amp; Acknowledging</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/help.html">Help</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/accessibility.html">Accessibility</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 class="nav-section">
    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></div>
  </li>

</ul>