diff --git a/tools/droiddoc/templates/assets/android-developer-docs.css b/tools/droiddoc/templates/assets/android-developer-docs.css
index e5489e6..726694d 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 @@
 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 @@
   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 @@
 .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 @@
   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 2edf39d..b16ed0d 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.js
+++ b/tools/droiddoc/templates/assets/android-developer-docs.js
@@ -31,16 +31,9 @@
   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 @@
   $("#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 33a4f81..44fa903 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 @@
   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 @@
       $(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 @@
   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 @@
   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 @@
   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 @@
       });
   }
 }
-
diff --git a/tools/droiddoc/templates/class.cs b/tools/droiddoc/templates/class.cs
index 90e1472..9bc2ba0 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 @@
     return false;
 }
 </script>
-
 <?cs include:"header.cs" ?>
 
 <div class="g-unit" id="doc-content">
@@ -106,7 +105,9 @@
 &#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 @@
   <?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 @@
 <?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 @@
 <?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 @@
         <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 @@
 <?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 @@
   <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 @@
 <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 @@
   <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 @@
   <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 @@
   <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 @@
         <?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 @@
       </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 @@
 <?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 abe8e4e..5a8315f 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 f721403..a2ea30a 100644
--- a/tools/droiddoc/templates/head_tag.cs
+++ b/tools/droiddoc/templates/head_tag.cs
@@ -17,7 +17,8 @@
   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 9f0e5ac..14dc90e 100644
--- a/tools/droiddoc/templates/macros.cs
+++ b/tools/droiddoc/templates/macros.cs
@@ -117,7 +117,7 @@
 
 <?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 @@
     <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 @@
 <?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 112db4b..08fee18 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 5ef3e0c..b29bc77 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 a358dca..c2d8c75 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>