diff --git a/tools/droiddoc/src/DroidDoc.java b/tools/droiddoc/src/DroidDoc.java
index b487629a5e..a8b9c73092 100644
--- a/tools/droiddoc/src/DroidDoc.java
+++ b/tools/droiddoc/src/DroidDoc.java
@@ -512,6 +512,7 @@ public class DroidDoc
             data.setValue("reference", "true");
             data.setValue("docs.packages." + i + ".name", s);
             data.setValue("docs.packages." + i + ".link", pkg.htmlPage());
+            data.setValue("docs.packages." + i + ".since", pkg.getSince());
             TagInfo.makeHDF(data, "docs.packages." + i + ".shortDescr",
                                                pkg.firstSentenceTags());
             i++;
diff --git a/tools/droiddoc/src/PackageInfo.java b/tools/droiddoc/src/PackageInfo.java
index aac0defbde..bcf3cf36f0 100644
--- a/tools/droiddoc/src/PackageInfo.java
+++ b/tools/droiddoc/src/PackageInfo.java
@@ -112,6 +112,7 @@ public class PackageInfo extends DocInfo implements ContainerInfo
             data.setValue(base + ".link", htmlPage());
         }
         data.setValue(base + ".name", name());
+        data.setValue(base + ".since", getSince());
     }
 
     public void makeClassLinkListHDF(HDF data, String base)
diff --git a/tools/droiddoc/src/TypeInfo.java b/tools/droiddoc/src/TypeInfo.java
index c1119de5ea..5196c1355e 100644
--- a/tools/droiddoc/src/TypeInfo.java
+++ b/tools/droiddoc/src/TypeInfo.java
@@ -159,6 +159,7 @@ public class TypeInfo
         }
         else if (!isPrimitive() && cl != null && cl.isIncluded()) {
             data.setValue(base + ".link", cl.htmlPage());
+            data.setValue(base + ".since", cl.getSince());
         }
 
         if (mIsTypeVariable) {
diff --git a/tools/droiddoc/templates-sdk/customization.cs b/tools/droiddoc/templates-sdk/customization.cs
index ba0e0f6278..d6e6795a3e 100644
--- a/tools/droiddoc/templates-sdk/customization.cs
+++ b/tools/droiddoc/templates-sdk/customization.cs
@@ -117,10 +117,8 @@ def:default_left_nav() ?>
                 <a href="<?cs var:toroot ?>reference/packages.html" <?cs if:(page.title == "Package Index") ?>class="selected"<?cs /if ?> >Package Index</a> | 
                 <a href="<?cs var:toroot ?>reference/classes.html" <?cs if:(page.title == "Class Index") ?>class="selected"<?cs /if ?>>Class Index</a></nobr>
               </div>
-              <ul><?cs 
-              each:pkg=docs.packages ?>
-                <li <?cs if:(class.package.name == pkg.name) || (package.name == pkg.name)?>class="selected"<?cs /if ?>><?cs call:package_link(pkg) ?></li><?cs 
-              /each ?>
+              <ul>
+              	<?cs call:package_link_list(docs.packages) ?>
               </ul><br/>
             </div> <!-- end packages -->
           </div> <!-- end resize-packages -->
diff --git a/tools/droiddoc/templates/assets/android-developer-core.css b/tools/droiddoc/templates/assets/android-developer-core.css
index 2841398577..3bd7060ece 100644
--- a/tools/droiddoc/templates/assets/android-developer-core.css
+++ b/tools/droiddoc/templates/assets/android-developer-core.css
@@ -49,8 +49,12 @@ a:visited code {
 
 input, select,
 textarea, option {
-  font-family:inherit;
-  font-size:inherit;
+  padding:0;
+  margin:0;
+}
+
+option {
+  padding:0 4px;
 }
 
 p {
@@ -692,7 +696,6 @@ td.gsc-search-button {
 #search-button {
   margin:0 0 0 2px;
   font-size:11px;
-  height:1.8em;
 }
 
 /* search result tabs */
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.css b/tools/droiddoc/templates/assets/android-developer-docs.css
index cf44b261f2..e5489e68a7 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.css
+++ b/tools/droiddoc/templates/assets/android-developer-docs.css
@@ -321,7 +321,6 @@ font-size:.9em;
 
 /* a div that holds a short description */
 .jd-descrdiv {
-  width:100%; 
   padding:3px 1em 0 1em;
   margin:0;
   border:0;
@@ -340,6 +339,50 @@ links to summary tables) */
   max-width:70%;
 }
 
+#api-level-toggle {
+  float:right;
+  padding:0 10px;
+  font-size:11px;
+  color:#999;
+}
+
+h4.jd-details-title .api-level,
+div#jd-header .api-level { 
+  font-size:12px;
+  font-weight:normal;
+  color:#999;
+  position:absolute;
+  top:5px;
+  right:5px;
+}
+
+div#jd-header .api-level { 
+  position:relative;
+  float:right;
+  margin-top:-1.7em;
+}
+
+.absent,
+.absent a:link,
+.absent a:visited,
+.absent a:hover,
+.absent * {
+  color:#aaa !important;
+  background-color:#f6f6f6 !important;
+  cursor:default !important;
+  text-decoration:none !important;
+}
+
+#side-nav li.absent,
+#side-nav li.absent * {
+  background-color:#fff !important;
+}
+
+#side-nav li.absent.selected,
+#side-nav li.absent.selected * {
+  background-color:#eee !important;
+}
+
 /* applies to a div containing links to summary tables */
 .sum-details-links {
   margin:0 .5em;
@@ -471,6 +514,10 @@ seealso list, etc */
   margin:.5em 1em;
 }
 
+.jd-tagdata p {
+  margin:0 0 1em 1em;
+}
+
 /* API reference: adjustments to
 the detailed description block */
 .jd-tagdescr {
@@ -508,6 +555,7 @@ h4.jd-details-title {
   background-color: #E2E2E2;
   margin:1.5em 0 .6em;
   padding:3px;
+  position:relative; /* so the api level can be absolute */
 }
 
 h4.jd-tagtitle {
diff --git a/tools/droiddoc/templates/class.cs b/tools/droiddoc/templates/class.cs
index 41d34dde28..90e14721fb 100644
--- a/tools/droiddoc/templates/class.cs
+++ b/tools/droiddoc/templates/class.cs
@@ -102,12 +102,12 @@ Summary:
 <?cs if:inhmethods ?>
   <?cs if:linkcount ?>&#124; <?cs /if ?><a href="#inhmethods">Inherited Methods</a>
 <?cs /if ?>
-</nobr>
 <?cs if:inhattrs || inhconstants || inhfields || inhmethods || subcount(class.subclasses.direct) || subcount(class.subclasses.indirect) ?>
 &#124; <a href="#" onclick="return toggleAllSummaryInherited(this)">[Expand All]</a>
 <?cs /if ?>
-</div>
-</div>
+</div><!-- end sum-details-links -->
+
+</div><!-- end api-info-block -->
 
 <?cs # this next line must be exactly like this to be parsed by eclipse ?>
 <!-- ======== START OF CLASS DATA ======== -->
@@ -134,10 +134,12 @@ Summary:
   <?cs set:colspan = colspan-1 ?>
 <?cs /each ?>
 
+<div class="api-level"><?cs call:since_tags(class) ?></div>
+
 </div><!-- end header -->
 
 
-<div id="jd-content">
+<div id="jd-content" class="apilevel-<?cs var:class.since ?>">
 <table class="jd-inheritance-table">
 <?cs set:colspan = subcount(class.inheritance) ?>
 <?cs each:supr = class.inheritance ?>
@@ -180,7 +182,6 @@ Summary:
 <?cs /if ?>
 
 <?cs call:see_also_tags(class.seeAlso) ?>
-<?cs call:since_tags(class) ?>
 
 </div><!-- jd-descr -->
 
@@ -190,7 +191,8 @@ Summary:
 <?cs def:write_method_summary(methods) ?>
 <?cs set:count = #1 ?>
 <?cs each:method = methods ?>
-    <tr <?cs if:count % #2 ?>class="alt-color"<?cs /if ?> >
+	 <?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?>
+    <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:method.since ?>" >
         <td class="jd-typecol"><nobr>
             <?cs var:method.abstract ?>
             <?cs var:method.synchronized ?>
@@ -473,7 +475,8 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
 <?cs # this next line must be exactly like this to be parsed by eclipse ?>
 <?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?>
 <A NAME="<?cs var:field.anchor ?>"></A>
-<div class="jd-details"> 
+<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?>
+<div class="jd-details api apilevel-<?cs var:field.since ?>"> 
     <h4 class="jd-details-title">
       <span class="normal">
         <?cs var:field.scope ?> 
@@ -482,6 +485,9 @@ 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) ?>
     <?cs if:subcount(field.constantValue) ?>
@@ -506,7 +512,8 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
 <?cs each:method=methods ?>
 <?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?>
 <A NAME="<?cs var:method.anchor ?>"></A>
-<div class="jd-details"> 
+<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?>
+<div class="jd-details api apilevel-<?cs var:method.since ?>"> 
     <h4 class="jd-details-title">
       <span class="normal">
         <?cs var:method.scope ?> 
@@ -518,6 +525,9 @@ 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>
@@ -528,8 +538,13 @@ From <?cs var:cl.kind ?> <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs va
 <?cs each:attr=attrs ?>
 <?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?>
 <A NAME="<?cs var:attr.anchor ?>"></A>
-<div class="jd-details">
-    <h4 class="jd-details-title"><?cs var:attr.name ?></h4>
+<?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="jd-details-descr">
         <?cs call:description(attr) ?>
 
diff --git a/tools/droiddoc/templates/macros.cs b/tools/droiddoc/templates/macros.cs
index 1ca2f8b1e8..9f0e5ac94d 100644
--- a/tools/droiddoc/templates/macros.cs
+++ b/tools/droiddoc/templates/macros.cs
@@ -115,11 +115,9 @@ def:see_also_tags(also) ?><?cs
   /if ?>
 <?cs /def ?>
 
-<?cs # print the Since: section ?><?cs
+<?cs # print the API Level ?><?cs
 def:since_tags(obj) ?>
-  <div class="jd-tagdata">
-      <h5 class="jd-tagtitle">Since <?cs var:obj.since ?></h5>
-  </div>
+  Since: API Level <?cs var:obj.since ?>
 <?cs /def ?>
 
 <?cs # Print the long-form description for something.
@@ -170,8 +168,7 @@ def:description(obj) ?><?cs
       </table>
   </div><?cs 
   /if ?><?cs 
-  call:see_also_tags(obj.seeAlso) ?><?cs 
-  call:since_tags(obj) ?><?cs
+  call:see_also_tags(obj.seeAlso) ?><?cs
 /def ?>
 
 <?cs # A table of links to classes with descriptions, as in a package file or the nested classes ?><?cs
@@ -179,7 +176,7 @@ def:class_link_table(classes) ?><?cs
   set:count = #1 ?>
   <table class="jd-sumtable-expando"><?cs
       each:cl=classes ?>
-        <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.type.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><?cs set:count = count + #1 ?><?cs
@@ -187,32 +184,39 @@ def:class_link_table(classes) ?><?cs
   </table><?cs 
 /def ?>
 
-<?cs # A list of links to classes, for use in the side navigation of packages ?><?cs 
+<?cs # A list of links to classes, for use in the side navigation of classes when viewing a package (panel nav) ?><?cs 
 def:class_link_list(label, classes) ?><?cs 
   if:subcount(classes) ?>
     <li><h2><?cs var:label ?></h2>
       <ul><?cs 
       each:cl=classes ?>
-        <li><?cs call:type_link(cl.type) ?></li><?cs 
+        <li class="api apilevel-<?cs var:cl.type.since ?>"><?cs call:type_link(cl.type) ?></li><?cs 
       /each ?>
       </ul>
     </li><?cs 
   /if ?><?cs 
 /def ?>
 
-<?cs # A list of links to classes, for use in the side navigation of classes ?><?cs 
+<?cs # A list of links to classes, for use in the side navigation of classes when viewing a class (panel nav) ?><?cs 
 def:list(label, classes) ?><?cs 
   if:subcount(classes) ?>
     <li><h2><?cs var:label ?></h2>
       <ul><?cs 
       each:cl=classes ?>
-          <li <?cs if:class.name == cl.label?>class="selected"<?cs /if ?>><?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 
   /if ?><?cs 
 /def ?>
 
+<?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 
+  /each ?><?cs
+/def ?>
+
 <?cs # An expando trigger ?><?cs 
 def:expando_trigger(id, default) ?>
   <a href="#" onclick="return toggleInherited(this, null)" id="<?cs var:id ?>" class="jd-expando-trigger closed"
diff --git a/tools/droiddoc/templates/package.cs b/tools/droiddoc/templates/package.cs
index 7d1936d582..5ef3e0cc9b 100644
--- a/tools/droiddoc/templates/package.cs
+++ b/tools/droiddoc/templates/package.cs
@@ -9,21 +9,23 @@
 <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>
       <?cs /if ?>
   </div>
+  <span class="api-level">
+    <?cs call:since_tags(package) ?>
+  </span>
 </div>
 
 <div id="jd-content">
 
 <?cs if:subcount(package.shortDescr) ?>
   <div class="jd-descr">
-  <p><?cs call:tag_list(package.shortDescr) ?>
-  <span class="jd-more"><a href="package-descr.html">more...</a></span></p>
+  <p><?cs call:tag_list(package.shortDescr) ?></p>
+  <p><span class="jd-more"><a href="package-descr.html">more...</a></span></p>
   </div>
 <?cs /if ?>