diff --git a/tools/droiddoc/src/ClassInfo.java b/tools/droiddoc/src/ClassInfo.java
index 094159583c..81804361a0 100644
--- a/tools/droiddoc/src/ClassInfo.java
+++ b/tools/droiddoc/src/ClassInfo.java
@@ -863,6 +863,7 @@ public class ClassInfo extends DocInfo implements ContainerInfo, Comparable, Sco
         data.setValue(base + ".kind", this.kind());
         TagInfo.makeHDF(data, base + ".shortDescr", this.firstSentenceTags());
         TagInfo.makeHDF(data, base + ".deprecated", deprecatedTags());
+        data.setValue(base + ".since", getSince());
     }
 
     /**
diff --git a/tools/droiddoc/src/DroidDoc.java b/tools/droiddoc/src/DroidDoc.java
index a8b9c73092..4ff26bc10b 100644
--- a/tools/droiddoc/src/DroidDoc.java
+++ b/tools/droiddoc/src/DroidDoc.java
@@ -56,6 +56,7 @@ public class DroidDoc
     public static ArrayList<String[]> mHDFData = new ArrayList<String[]>();
     public static Map<Character,String> escapeChars = new HashMap<Character,String>();
     public static String title = "";
+    public static SinceTagger sinceTagger = new SinceTagger();
 
     public static boolean checkLevel(int level)
     {
@@ -97,7 +98,6 @@ public class DroidDoc
         String apiFile = null;
         String debugStubsFile = "";
         HashSet<String> stubPackages = null;
-        SinceTagger sinceTagger = new SinceTagger();
 
         root = r;
 
@@ -518,6 +518,7 @@ public class DroidDoc
             i++;
         }
 
+        sinceTagger.writeVersionNames(data);
         return data;
     }
 
diff --git a/tools/droiddoc/src/NavTree.java b/tools/droiddoc/src/NavTree.java
index 9eef0ceacc..0469fdc1b8 100644
--- a/tools/droiddoc/src/NavTree.java
+++ b/tools/droiddoc/src/NavTree.java
@@ -25,7 +25,7 @@ public class NavTree {
         for (PackageInfo pkg: DroidDoc.choosePackages()) {
             children.add(makePackageNode(pkg));
         }
-        Node node = new Node("Reference", dir + "packages.html", children);
+        Node node = new Node("Reference", dir + "packages.html", children, null);
 
         StringBuilder buf = new StringBuilder();
         if (false) {
@@ -46,7 +46,7 @@ public class NavTree {
     private static Node makePackageNode(PackageInfo pkg) {
         ArrayList<Node> children = new ArrayList();
 
-        children.add(new Node("Description", pkg.fullDescriptionHtmlPage(), null));
+        children.add(new Node("Description", pkg.fullDescriptionHtmlPage(), null, null));
 
         addClassNodes(children, "Interfaces", pkg.interfaces());
         addClassNodes(children, "Classes", pkg.ordinaryClasses());
@@ -54,7 +54,7 @@ public class NavTree {
         addClassNodes(children, "Exceptions", pkg.exceptions());
         addClassNodes(children, "Errors", pkg.errors());
 
-        return new Node(pkg.name(), pkg.htmlPage(), children);
+        return new Node(pkg.name(), pkg.htmlPage(), children, pkg.getSince());
     }
 
     private static void addClassNodes(ArrayList<Node> parent, String label, ClassInfo[] classes) {
@@ -62,12 +62,12 @@ public class NavTree {
 
         for (ClassInfo cl: classes) {
             if (cl.checkLevel()) {
-                children.add(new Node(cl.name(), cl.htmlPage(), null));
+                children.add(new Node(cl.name(), cl.htmlPage(), null, cl.getSince()));
             }
         }
 
         if (children.size() > 0) {
-            parent.add(new Node(label, null, children));
+            parent.add(new Node(label, null, children, null));
         }
     }
 
@@ -75,11 +75,13 @@ public class NavTree {
         private String mLabel;
         private String mLink;
         ArrayList<Node> mChildren;
+        private String mSince;
 
-        Node(String label, String link, ArrayList<Node> children) {
+        Node(String label, String link, ArrayList<Node> children, String since) {
             mLabel = label;
             mLink = link;
             mChildren = children;
+            mSince = since;
         }
 
         static void renderString(StringBuilder buf, String s) {
@@ -136,6 +138,8 @@ public class NavTree {
             renderString(buf, mLink);
             buf.append(", ");
             renderChildren(buf);
+            buf.append(", ");
+            renderString(buf, mSince);
             buf.append(" ]");
         }
     }
diff --git a/tools/droiddoc/src/PackageInfo.java b/tools/droiddoc/src/PackageInfo.java
index bcf3cf36f0..18c636eb3b 100644
--- a/tools/droiddoc/src/PackageInfo.java
+++ b/tools/droiddoc/src/PackageInfo.java
@@ -123,6 +123,7 @@ public class PackageInfo extends DocInfo implements ContainerInfo
         ClassInfo.makeLinkListHDF(data, base + ".enums", enums());
         ClassInfo.makeLinkListHDF(data, base + ".exceptions", exceptions());
         ClassInfo.makeLinkListHDF(data, base + ".errors", errors());
+        data.setValue(base + ".since", getSince());
     }
 
     public ClassInfo[] interfaces()
diff --git a/tools/droiddoc/src/SinceTagger.java b/tools/droiddoc/src/SinceTagger.java
index a34814c00e..fb69c04b61 100644
--- a/tools/droiddoc/src/SinceTagger.java
+++ b/tools/droiddoc/src/SinceTagger.java
@@ -4,6 +4,8 @@ import com.android.apicheck.*;
 
 import java.util.*;
 
+import org.clearsilver.HDF;
+
 /**
  * Applies version information to the DroidDoc class model from apicheck XML
  * files. Sample usage:
@@ -45,6 +47,17 @@ public class SinceTagger {
         }
     }
 
+    /**
+     * Writes an index of the version names to {@code data}. 
+     */
+    public void writeVersionNames(HDF data) {
+        int index = 1;
+        for (String version : xmlToName.values()) {
+            data.setValue("since." + index + ".name", version);
+            index++;
+        }
+    }
+
     /**
      * Applies the version information to {@code classDocs} where not already
      * present.
diff --git a/tools/droiddoc/templates-sdk/customization.cs b/tools/droiddoc/templates-sdk/customization.cs
index 79fc2829d7..6bdb992066 100644
--- a/tools/droiddoc/templates-sdk/customization.cs
+++ b/tools/droiddoc/templates-sdk/customization.cs
@@ -47,34 +47,51 @@ def:custom_masthead() ?>
       <div id="headerRight">
           <div id="headerLinks">
           <?cs if:template.showLanguageMenu ?>
-              <img src="<?cs var:toroot ?>assets/images/icon_world.jpg" alt="" /> 
-              <span id="language">
+            <img src="<?cs var:toroot ?>assets/images/icon_world.jpg" alt="Language:" /> 
+            <span id="language">
              	<select name="language" onChange="changeLangPref(this.value, true)">
-    			<option value="en">English&nbsp;&nbsp;&nbsp;</option>
-    			<option value="ja">日本語</option>
-    			<?cs # 
-			<option value="de">Deutsch</option> 
-    			<option value="es">Español</option>
-    			<option value="fr">Français</option>
-    			<option value="it">Italiano</option>
-    			<option value="zh-CN">中文 (简体)</option>
-    			<option value="zh-TW">中文 (繁體)</option>
-			?>
+          			<option value="en">English&nbsp;&nbsp;&nbsp;</option>
+          			<option value="ja">日本語</option>
+          			<?cs # 
+      			    <option value="de">Deutsch</option> 
+          			<option value="es">Español</option>
+          			<option value="fr">Français</option>
+          			<option value="it">Italiano</option>
+          			<option value="zh-CN">中文 (简体)</option>
+          			<option value="zh-TW">中文 (繁體)</option>
+      			    ?>
              	</select>	
              	<script type="text/javascript">
              	  <!--  
                   loadLangPref();  
              	   //-->
              	</script>
-             </span>
+            </span>
           <?cs /if ?>
           <a href="http://www.android.com">Android.com</a>
           </div><?cs 
-          call:default_search_box() ?>
+          call:default_search_box() ?><?cs 
+    	 	  if:reference ?>
+    			  <div id="api-level-toggle">
+    			    <label for="apiLevelControl"><a href="<?cs var:toroot ?>guide/appendix/api-levels.html">Filter by API Level</a>: </label>
+    			    <select id="apiLevelControl">
+    			      <!-- option elements added by buildApiLevelToggle() -->
+    			    </select>
+    			  </div>
+    	 	    <script>
+              var SINCE_DATA = [ <?cs 
+                each:since = since ?>'<?cs 
+                  var:since.name ?>'<?cs 
+                  if:!last(since) ?>, <?cs /if ?><?cs
+                /each 
+              ?> ];
+              buildApiLevelToggle();
+            </script><?cs 
+    			/if ?>
       </div><!-- headerRight -->
       <script type="text/javascript">
         <!--  
-        changeTabLang(getLangPref());  
+        changeTabLang(getLangPref());
         //-->
       </script>
   </div><!-- header --><?cs 
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.css b/tools/droiddoc/templates/assets/android-developer-docs.css
index e5489e68a7..726694dc5e 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.css
+++ b/tools/droiddoc/templates/assets/android-developer-docs.css
@@ -276,9 +276,9 @@
 
 /* summary tables for reference pages */
 .jd-sumtable {
-margin: .5em 1em 1em 1em;
-width:99%;
-font-size:.9em;
+  margin: .5em 1em 1em 1em;
+  width:95%; /* consistent table widths; within IE's quirks */
+  font-size:.9em;
 }
 
 .jd-sumtable a {
@@ -330,8 +330,7 @@ font-size:.9em;
 links to summary tables) */
 #api-info-block {
   font-size:.8em;
-  margin:0;
-  padding:6px;
+  padding:6px 10px;
   font-weight:normal;
   float:right;
   text-align:right;
@@ -346,20 +345,56 @@ links to summary tables) */
   color:#999;
 }
 
-h4.jd-details-title .api-level,
-div#jd-header .api-level { 
-  font-size:12px;
+div.api-level { 
+  font-size:.8em;
   font-weight:normal;
   color:#999;
-  position:absolute;
-  top:5px;
-  right:5px;
+  float:right;
+  padding:0 7px 0;
+  margin-top:-25px;
 }
 
-div#jd-header .api-level { 
-  position:relative;
-  float:right;
-  margin-top:-1.7em;
+#api-info-block div.api-level { 
+  font-size:1.3em;
+  font-weight:bold;
+  float:none;
+  color:#444;
+  padding:0;
+  margin:0;
+}
+
+/* Force link colors for IE6 */
+div.api-level a {
+  color:#999;
+}
+#api-info-block div.api-level a:link {
+  color:#444;
+}
+#api-level-toggle a {
+  color:#999;
+}
+
+div#naMessage {
+  display:none;
+  width:555px;
+  height:0;
+  margin:0 auto;
+}
+
+div#naMessage div {
+  width:450px;
+  position:fixed;
+  margin:50px 0;
+  padding:4em 4em 3em;
+  background:#FFF;
+  background:rgba(255,255,255,0.7);
+  border:1px solid #dddd00;
+}
+/* IE6 can't position fixed */
+* html div#naMessage div { position:absolute; }
+
+div#naMessage strong {
+  font-size:1.1em;
 }
 
 .absent,
@@ -367,25 +402,53 @@ div#jd-header .api-level {
 .absent a:visited,
 .absent a:hover,
 .absent * {
-  color:#aaa !important;
-  background-color:#f6f6f6 !important;
+  color:#bbb !important;
   cursor:default !important;
   text-decoration:none !important;
 }
 
-#side-nav li.absent,
-#side-nav li.absent * {
-  background-color:#fff !important;
+#api-level-toggle a,
+.api-level a {
+  color:inherit;
+  text-decoration:none;
+}
+
+#api-level-toggle a:hover,
+.api-level a:hover {
+  color:inherit;
+  text-decoration:underline !important;
+  cursor:pointer !important;
 }
 
 #side-nav li.absent.selected,
-#side-nav li.absent.selected * {
-  background-color:#eee !important;
+#side-nav li.absent.selected *,
+#side-nav div.label.absent.selected,
+#side-nav div.label.absent.selected * {
+  background-color:#eaeaea !important;
 }
+/* IE6 quirk (won't chain classes, so just keep background blue) */
+* html #side-nav li.selected,
+* html #side-nav li.selected *,
+* html #side-nav div.label.selected,
+* html #side-nav div.label.selected * {
+  background-color: #435a6e !important;
+}
+
+
+.absent h4.jd-details-title,
+.absent h4.jd-details-title * {
+  background-color:#f6f6f6 !important;
+}
+
+.absent img {
+  opacity: .3;
+  filter: alpha(opacity=30);
+  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+}
+
 
 /* applies to a div containing links to summary tables */
 .sum-details-links {
-  margin:0 .5em;
   padding:0;
   font-weight:normal;
 }
@@ -554,8 +617,7 @@ h4.jd-details-title {
   font-size:1.15em;
   background-color: #E2E2E2;
   margin:1.5em 0 .6em;
-  padding:3px;
-  position:relative; /* so the api level can be absolute */
+  padding:3px 95px 3px 3px; /* room for api-level */
 }
 
 h4.jd-tagtitle {
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.js b/tools/droiddoc/templates/assets/android-developer-docs.js
index 2edf39d546..b16ed0d8db 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.js
+++ b/tools/droiddoc/templates/assets/android-developer-docs.js
@@ -31,16 +31,9 @@ if ((agent.indexOf("Mobile") != -1) ||
   addLoadEvent(mobileSetup);
 }
 
-/* loads the lists.js file to the page.
-Loading this in the head was slowing page load time */
-addLoadEvent( function() {
-  var lists = document.createElement("script");
-  lists.setAttribute("type","text/javascript");
-  lists.setAttribute("src", toRoot+"reference/lists.js");
-  $("head").append($(lists));
-} );
-
+addLoadEvent(function() {
 window.onresize = resizeAll;
+});
 
 function mobileSetup() {
   $("body").css({'overflow':'auto'});
@@ -51,6 +44,15 @@ function mobileSetup() {
   $("#nav-tree").css({'overflow-y': 'auto'});
 }
 
+/* loads the lists.js file to the page.
+Loading this in the head was slowing page load time */
+addLoadEvent( function() {
+  var lists = document.createElement("script");
+  lists.setAttribute("type","text/javascript");
+  lists.setAttribute("src", toRoot+"reference/lists.js");
+  $("head").append($(lists));
+} );
+
 function setToRoot(root) {
   toRoot = root;
   // note: toRoot also used by carousel.js
diff --git a/tools/droiddoc/templates/assets/navtree.js b/tools/droiddoc/templates/assets/android-developer-reference.js
similarity index 64%
rename from tools/droiddoc/templates/assets/navtree.js
rename to tools/droiddoc/templates/assets/android-developer-reference.js
index 33a4f81c79..44fa903f60 100644
--- a/tools/droiddoc/templates/assets/navtree.js
+++ b/tools/droiddoc/templates/assets/android-developer-reference.js
@@ -1,5 +1,65 @@
 
-function new_node(me, mom, text, link, children_data)
+/* API LEVEL TOGGLE */
+addLoadEvent(changeApiLevel);
+var API_LEVEL_COOKIE = "api_level";
+var minLevel = 1;
+
+function buildApiLevelToggle() {
+	var maxLevel = SINCE_DATA.length;
+	var userApiLevel = readCookie(API_LEVEL_COOKIE);
+	
+	if (userApiLevel != 0) {
+		selectedLevel = userApiLevel;
+	} else {
+	  selectedLevel = maxLevel;
+	}
+	
+  minLevel = $("body").attr("class");
+	var select = $("#apiLevelControl").html("").change(changeApiLevel);
+	for (var i = maxLevel-1; i >= 0; i--) {
+		var option = $("<option />").attr("value",""+SINCE_DATA[i]).append(""+SINCE_DATA[i]);
+//		if (SINCE_DATA[i] < minLevel) option.addClass("absent"); // always false for strings (codenames)
+		select.append(option);
+	}
+	
+  // get the DOM element and use setAttribute cuz IE6 fails when using jquery .attr('selected',true)
+	var selectedLevelItem = $("#apiLevelControl option[value='"+selectedLevel+"']").get(0); 
+  selectedLevelItem.setAttribute('selected',true); 
+}
+
+function changeApiLevel() {
+	var selectedLevel = $("#apiLevelControl option:selected").val();
+	var apis = $(".api");
+	apis.each(function(i) {
+		var obj = $(this);
+		var className = obj.attr("class");
+		var apiLevelIndex = className.lastIndexOf("-")+1;
+		var apiLevelEndIndex = className.indexOf(" ", apiLevelIndex);
+		apiLevelEndIndex = apiLevelEndIndex != -1 ? apiLevelEndIndex : className.length;
+		var apiLevel = className.substring(apiLevelIndex, apiLevelEndIndex);
+		if (apiLevel > selectedLevel) obj.addClass("absent").attr("title","Requires API Level "+apiLevel+" or higher");
+		else obj.removeClass("absent").removeAttr("title");
+	});
+
+  var date = new Date();
+  date.setTime(date.getTime()+(50*365*24*60*60*1000)); // keep this for 50 years
+  writeCookie(API_LEVEL_COOKIE, selectedLevel, null, date);
+  
+	if (selectedLevel < minLevel) {
+	  var thing = ($("#jd-header").html().indexOf("package") != -1) ? "package" : "class";
+	  $("#naMessage").show().html("<div><p><strong>This " + thing + " is not available with API Level " + selectedLevel + ".</strong></p>"
+                              + "<p>To use this " + thing + ", your application must specify API Level " + minLevel + " or higher in its manifest "
+                              + "and be compiled against a version of the Android library that supports an equal or higher API Level. To reveal this "
+                              + "document, change the value of the API Level filter above.</p>"
+                              + "<p><a href='" +toRoot+ "guide/appendix/api-levels.html'>What is the API Level?</a></p></div>");
+	} else {
+    $("#naMessage").hide();
+  }
+}
+
+/* NAVTREE */
+
+function new_node(me, mom, text, link, children_data, api_level)
 {
   var node = new Object();
   node.children = Array();
@@ -10,9 +70,13 @@ function new_node(me, mom, text, link, children_data)
   mom.get_children_ul().appendChild(node.li);
 
   node.label_div = document.createElement("div");
+  node.label_div.className = "label";
+  if (api_level != null) {
+    $(node.label_div).addClass("api");
+    $(node.label_div).addClass("api-level-"+api_level);
+  }
   node.li.appendChild(node.label_div);
   node.label_div.style.paddingLeft = 10*node.depth + "px";
-  node.label_div.className = "label";
 
   if (children_data == null) {
     // 12 is the width of the triangle and padding extra space
@@ -81,6 +145,7 @@ function expand_node(me, node)
       $(node.get_children_ul()).slideDown("fast");
     } else {
       get_node(me, node);
+      if ($(node.label_div).hasClass("absent")) $(node.get_children_ul()).addClass("absent");
       $(node.get_children_ul()).slideDown("fast");
     }
     node.plus_img.src = me.toroot + "assets/images/triangle-opened-small.png";
@@ -94,7 +159,7 @@ function get_node(me, mom)
   for (var i in mom.children_data) {
     var node_data = mom.children_data[i];
     mom.children[i] = new_node(me, mom, node_data[0], node_data[1],
-        node_data[2]);
+        node_data[2], node_data[3]);
   }
 }
 
@@ -104,8 +169,7 @@ function this_page_relative(toroot)
   var file = "";
   if (toroot.substr(0, 1) == "/") {
     if (full.substr(0, toroot.length) == toroot) {
-      var basePath = getBaseUri(full);
-      return basePath.substring(toroot.length);
+      return full.substr(toroot.length);
     } else {
       // the file isn't under toroot.  Fail.
       return null;
@@ -150,15 +214,14 @@ function load_navtree_data(toroot) {
   navtreeData.setAttribute("type","text/javascript");
   navtreeData.setAttribute("src", toroot+"navtree_data.js");
   $("head").append($(navtreeData));
-} 
+}
 
 function init_default_navtree(toroot) {
-  load_navtree_data(toroot);
   init_navtree("nav-tree", toroot, NAVTREE_DATA);
 }
 
 function init_navtree(navtree_id, toroot, root_nodes)
-{  
+{
   var me = new Object();
   me.toroot = toroot;
   me.node = new Object();
@@ -189,4 +252,3 @@ function init_navtree(navtree_id, toroot, root_nodes)
       });
   }
 }
-
diff --git a/tools/droiddoc/templates/class.cs b/tools/droiddoc/templates/class.cs
index 90e14721fb..9bc2ba0a8d 100644
--- a/tools/droiddoc/templates/class.cs
+++ b/tools/droiddoc/templates/class.cs
@@ -2,7 +2,7 @@
 <?cs include:"macros.cs" ?>
 <html>
 <?cs include:"head_tag.cs" ?>
-<body>
+<body class="<?cs var:class.since ?>">
 <script type="text/javascript">
 function toggleInherited(linkObj, expand) {
     var base = linkObj.getAttribute("id");
@@ -26,7 +26,6 @@ function toggleInherited(linkObj, expand) {
     return false;
 }
 </script>
-
 <?cs include:"header.cs" ?>
 
 <div class="g-unit" id="doc-content">
@@ -106,7 +105,9 @@ Summary:
 &#124; <a href="#" onclick="return toggleAllSummaryInherited(this)">[Expand All]</a>
 <?cs /if ?>
 </div><!-- end sum-details-links -->
-
+<div class="api-level">
+  <?cs call:since_tags(class) ?>
+</div>
 </div><!-- end api-info-block -->
 
 <?cs # this next line must be exactly like this to be parsed by eclipse ?>
@@ -134,12 +135,11 @@ Summary:
   <?cs set:colspan = colspan-1 ?>
 <?cs /each ?>
 
-<div class="api-level"><?cs call:since_tags(class) ?></div>
-
 </div><!-- end header -->
 
+<div id="naMessage"></div>
 
-<div id="jd-content" class="apilevel-<?cs var:class.since ?>">
+<div id="jd-content" class="api apilevel-<?cs var:class.since ?>">
 <table class="jd-inheritance-table">
 <?cs set:colspan = subcount(class.inheritance) ?>
 <?cs each:supr = class.inheritance ?>
@@ -215,7 +215,7 @@ Summary:
 <?cs def:write_field_summary(fields) ?>
 <?cs set:count = #1 ?>
     <?cs each:field=fields ?>
-      <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+      <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" >
           <td class="jd-typecol"><nobr>
           <?cs var:field.scope ?>
           <?cs var:field.static ?>
@@ -231,7 +231,7 @@ Summary:
 <?cs def:write_constant_summary(fields) ?>
 <?cs set:count = #1 ?>
     <?cs each:field=fields ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" >
         <td class="jd-typecol"><?cs call:type_link(field.type) ?></td>
         <td class="jd-linkcol"><a href="<?cs var:toroot ?><?cs var:field.href ?>"><?cs var:field.name ?></a></td>
         <td class="jd-descrcol" width="100%"><?cs call:short_descr(field) ?></td>
@@ -248,7 +248,7 @@ Summary:
         <td><nobr><em>Description</em></nobr></td>
     </tr>
     <?cs each:attr=attrs ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:attr.since ?>" >
         <td class="jd-linkcol"><a href="<?cs var:toroot ?><?cs var:attr.href ?>"><?cs var:attr.name ?></a></td>
         <td class="jd-linkcol"><?cs each:m=attr.methods ?>
             <a href="<?cs var:toroot ?><?cs var:m.href ?>"><?cs var:m.name ?></a>
@@ -263,13 +263,13 @@ Summary:
 <?cs def:write_inners_summary(classes) ?>
 <?cs set:count = #1 ?>
   <?cs each:cl=class.inners ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:cl.since ?>" >
       <td class="jd-typecol"><nobr>
-        <?cs var:class.scope ?>
-        <?cs var:class.static ?> 
-        <?cs var:class.final ?> 
-        <?cs var:class.abstract ?>
-        <?cs var:class.kind ?></nobr></td>
+        <?cs var:cl.scope ?>
+        <?cs var:cl.static ?> 
+        <?cs var:cl.final ?> 
+        <?cs var:cl.abstract ?>
+        <?cs var:cl.kind ?></nobr></td>
       <td class="jd-linkcol"><?cs call:type_link(cl.type) ?></td>
       <td class="jd-descrcol" width="100%"><?cs call:short_descr(cl) ?>&nbsp;</td>
     </tr>
@@ -305,7 +305,8 @@ Summary:
   <div style="clear:left;">Inherited XML Attributes</div></th></tr>
 <?cs each:cl=class.inherited ?>
 <?cs if:subcount(cl.attrs) ?>
-<tr><td colspan="12">
+<tr class="api apilevel-<?cs var:cl.since ?>" >
+<td colspan="12">
 <?cs call:expando_trigger("inherited-attrs-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?>
 <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a>
 <div id="inherited-attrs-<?cs var:cl.qualified ?>">
@@ -329,7 +330,7 @@ Summary:
 <table id="enumconstants" class="jd-sumtable"><tr><th colspan="12">Enum Values</th></tr>
 <?cs set:count = #1 ?>
     <?cs each:field=class.enumConstants ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" >
         <td class="jd-descrcol"><?cs call:type_link(field.type) ?>&nbsp;</td>
         <td class="jd-linkcol"><a href="<?cs var:toroot ?><?cs var:field.href ?>"><?cs var:field.name ?></a>&nbsp;</td>
         <td class="jd-descrcol" width="100%"><?cs call:short_descr(field) ?>&nbsp;</td>
@@ -355,7 +356,8 @@ Summary:
   <div style="clear:left;">Inherited Constants</div></th></tr>
 <?cs each:cl=class.inherited ?>
 <?cs if:subcount(cl.constants) ?>
-<tr><td colspan="12">
+<tr class="api apilevel-<?cs var:cl.since ?>" >
+<td colspan="12">
 <?cs call:expando_trigger("inherited-constants-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?>
 <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a>
 <div id="inherited-constants-<?cs var:cl.qualified ?>">
@@ -390,7 +392,8 @@ Summary:
   <div style="clear:left;">Inherited Fields</div></th></tr>
 <?cs each:cl=class.inherited ?>
 <?cs if:subcount(cl.fields) ?>
-<tr><td colspan="12">
+<tr class="api apilevel-<?cs var:cl.since ?>" >
+<td colspan="12">
 <?cs call:expando_trigger("inherited-fields-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?>
 <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a>
 <div id="inherited-fields-<?cs var:cl.qualified ?>">
@@ -449,7 +452,8 @@ Summary:
   <div style="clear:left;">Inherited Methods</div></th></tr>
 <?cs each:cl=class.inherited ?>
 <?cs if:subcount(cl.methods) ?>
-<tr><td colspan="12"><?cs call:expando_trigger("inherited-methods-"+cl.qualified, "closed") ?>
+<tr class="api apilevel-<?cs var:cl.since ?>" >
+<td colspan="12"><?cs call:expando_trigger("inherited-methods-"+cl.qualified, "closed") ?>
 From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a>
 <div id="inherited-methods-<?cs var:cl.qualified ?>">
   <div id="inherited-methods-<?cs var:cl.qualified ?>-list"
@@ -485,11 +489,12 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
         <?cs call:type_link(field.type) ?>
       </span>
         <?cs var:field.name ?>
-      <span class="api-level">
-        <?cs call:since_tags(field) ?>
-      </span>
     </h4>
-    <div class="jd-details-descr"><?cs call:description(field) ?>
+      <div class="api-level">
+        <?cs call:since_tags(field) ?>
+      </div>
+    <div class="jd-details-descr">
+      <?cs call:description(field) ?>
     <?cs if:subcount(field.constantValue) ?>
         <div class="jd-tagdata">
         <span class="jd-tagtitle">Constant Value: </span>
@@ -525,11 +530,13 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
       </span>
       <span class="sympad"><?cs var:method.name ?></span>
       <span class="normal">(<?cs call:parameter_list(method.params) ?>)</span>
-      <span class="api-level">
-        <?cs call:since_tags(method) ?>
-      </span>
     </h4>
-    <div class="jd-details-descr"><?cs call:description(method) ?></div>
+      <div class="api-level">
+        <?cs call:since_tags(method) ?>
+      </div>
+    <div class="jd-details-descr">
+      <?cs call:description(method) ?>
+    </div>
 </div>
 <?cs /each ?>
 <?cs /def ?>
@@ -541,10 +548,10 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
 <?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?>
 <div class="jd-details api apilevel-<?cs var:attr.since ?>"> 
     <h4 class="jd-details-title"><?cs var:attr.name ?>
-      <span class="api-level">
-        <?cs call:since_tags(attr) ?>
-      </span>
     </h4>
+      <div class="api-level">
+        <?cs call:since_tags(attr) ?>
+      </div>
     <div class="jd-details-descr">
         <?cs call:description(attr) ?>
 
diff --git a/tools/droiddoc/templates/classes.cs b/tools/droiddoc/templates/classes.cs
index abe8e4e0f1..5a8315f1b8 100644
--- a/tools/droiddoc/templates/classes.cs
+++ b/tools/droiddoc/templates/classes.cs
@@ -22,7 +22,7 @@
 <table class="jd-sumtable">
     <?cs set:cur_row = #0 ?>
     <?cs each:cl = letter ?>
-        <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+        <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:cl.since ?>" >
             <td class="jd-linkcol"><?cs call:type_link(cl.type) ?></td>
             <td class="jd-descrcol" width="100%"><?cs call:short_descr(cl) ?>&nbsp;</td>
         </tr>
diff --git a/tools/droiddoc/templates/head_tag.cs b/tools/droiddoc/templates/head_tag.cs
index f721403e23..a2ea30a998 100644
--- a/tools/droiddoc/templates/head_tag.cs
+++ b/tools/droiddoc/templates/head_tag.cs
@@ -17,7 +17,8 @@ else ?>
   setToRoot("<?cs var:toroot ?>");
 </script><?cs 
 if:reference ?>
-<script src="<?cs var:toroot ?>assets/navtree.js" type="text/javascript"></script><?cs 
+<script src="<?cs var:toroot ?>assets/android-developer-reference.js" type="text/javascript"></script>
+<script src="<?cs var:toroot ?>navtree_data.js" type="text/javascript"></script><?cs 
 /if ?>
 <noscript>
   <style type="text/css">
diff --git a/tools/droiddoc/templates/macros.cs b/tools/droiddoc/templates/macros.cs
index 9f0e5ac94d..14dc90e290 100644
--- a/tools/droiddoc/templates/macros.cs
+++ b/tools/droiddoc/templates/macros.cs
@@ -117,7 +117,7 @@ def:see_also_tags(also) ?><?cs
 
 <?cs # print the API Level ?><?cs
 def:since_tags(obj) ?>
-  Since: API Level <?cs var:obj.since ?>
+  Since: <a href="<?cs var:toroot ?>guide/appendix/api-levels.html#level<?cs var:obj.since ?>">API Level <?cs var:obj.since ?></a>
 <?cs /def ?>
 
 <?cs # Print the long-form description for something.
@@ -203,7 +203,7 @@ def:list(label, classes) ?><?cs
     <li><h2><?cs var:label ?></h2>
       <ul><?cs 
       each:cl=classes ?>
-          <li class="<?cs if:class.name == cl.label?>selected<?cs /if ?> api apilevel-<?cs var:cl.since ?>"><?cs call:type_link(cl) ?></li><?cs 
+          <li class="<?cs if:class.name == cl.label?>selected <?cs /if ?>api apilevel-<?cs var:cl.since ?>"><?cs call:type_link(cl) ?></li><?cs 
       /each ?>
       </ul>
     </li><?cs 
@@ -213,7 +213,7 @@ def:list(label, classes) ?><?cs
 <?cs # A list of links to packages, for use in the side navigation of packages (panel nav) ?><?cs 
 def:package_link_list(packages) ?><?cs 
   each:pkg=packages ?>
-    <li class="<?cs if:(class.package.name == pkg.name) || (package.name == pkg.name)?>selected<?cs /if ?> api apilevel-<?cs var:pkg.since ?>"><?cs call:package_link(pkg) ?></li><?cs 
+    <li class="<?cs if:(class.package.name == pkg.name) || (package.name == pkg.name)?>selected <?cs /if ?>api apilevel-<?cs var:pkg.since ?>"><?cs call:package_link(pkg) ?></li><?cs 
   /each ?><?cs
 /def ?>
 
diff --git a/tools/droiddoc/templates/package-descr.cs b/tools/droiddoc/templates/package-descr.cs
index 112db4b6d5..08fee18b36 100644
--- a/tools/droiddoc/templates/package-descr.cs
+++ b/tools/droiddoc/templates/package-descr.cs
@@ -2,26 +2,31 @@
 <?cs include:"macros.cs" ?>
 <html>
 <?cs include:"head_tag.cs" ?>
+<body class="<?cs var:package.since ?>">
 <?cs include:"header.cs" ?>
 
 <div class="g-unit" id="doc-content">
 
+<div id="api-info-block">
+<div class="api-level">
+  <?cs call:since_tags(package) ?>
+</div>
+</div>
+
 <div id="jd-header">
-  <strong>
-    <div class="jd-page_title-prefix">package</div>
-  </strong>
+  package
   <h1><?cs var:package.name ?></b></h1>
   <div class="jd-nav">
-      <a class="jd-navlink" href="package-summary.html">Classes</a> |
-      Description
+      <a class="jd-navlink" href="package-summary.html">Classes</a> | Description
   </div>
 </div><!-- end header -->
 
-<div id="jd-content">
+<div id="naMessage"></div>
+
+<div id="jd-content" class="api apilevel-<?cs var:package.since ?>">
 <div class="jd-descr">
 <p><?cs call:tag_list(package.descr) ?></p>
 </div>
-<?cs call:since_tags(package) ?>
 
 <?cs include:"footer.cs" ?>
 </div><!-- end jd-content -->
diff --git a/tools/droiddoc/templates/package.cs b/tools/droiddoc/templates/package.cs
index 5ef3e0cc9b..b29bc77344 100644
--- a/tools/droiddoc/templates/package.cs
+++ b/tools/droiddoc/templates/package.cs
@@ -2,25 +2,30 @@
 <?cs include:"macros.cs" ?>
 <html>
 <?cs include:"head_tag.cs" ?>
+<body class="<?cs var:package.since ?>">
 <?cs include:"header.cs" ?>
 
 <div class="g-unit" id="doc-content">
 
+<div id="api-info-block">
+<div class="api-level">
+  <?cs call:since_tags(package) ?>
+</div>
+</div>
+
 <div id="jd-header">
   package
   <h1><?cs var:package.name ?></h1>
   <div class="jd-nav">
       <?cs if:subcount(package.shortDescr) ?>
-      Classes |
-      <a class="jd-navlink" href="package-descr.html">Description</a>
+        Classes | <a class="jd-navlink" href="package-descr.html">Description</a>
       <?cs /if ?>
   </div>
-  <span class="api-level">
-    <?cs call:since_tags(package) ?>
-  </span>
-</div>
+</div><!-- end header -->
 
-<div id="jd-content">
+<div id="naMessage"></div>
+
+<div id="jd-content" class="api apilevel-<?cs var:package.since ?>">
 
 <?cs if:subcount(package.shortDescr) ?>
   <div class="jd-descr">
diff --git a/tools/droiddoc/templates/packages.cs b/tools/droiddoc/templates/packages.cs
index a358dca9f5..c2d8c75ff8 100644
--- a/tools/droiddoc/templates/packages.cs
+++ b/tools/droiddoc/templates/packages.cs
@@ -20,7 +20,7 @@
 <?cs set:count = #1 ?>
 <table class="jd-sumtable">
 <?cs each:pkg = docs.packages ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:pkg.since ?>" >
         <td class="jd-linkcol"><?cs call:package_link(pkg) ?></td>
         <td class="jd-descrcol" width="100%"><?cs call:tag_list(pkg.shortDescr) ?>&nbsp;</td>
     </tr>