Merge "docs: fix several instances of the 'sidebox' class"

10 files changed, 118 insertions, 116 deletions

diff --git a/docs/html/guide/developing/tools/draw9patch.jd b/docs/html/guide/developing/tools/draw9patch.jd
index 9607ae7..61da1e0 100644
--- a/docs/html/guide/developing/tools/draw9patch.jd
+++ b/docs/html/guide/developing/tools/draw9patch.jd
@@ -7,9 +7,8 @@ page.title=Draw 9-patch
 the section on Nine-patch in the 
 <a href="{@docRoot}guide/topics/resources/available-resources.html#ninepatch">Nine-patch Images</a> topic.</p>
 
-<div class="sidebox" style="width:auto"><br/>
-<img src="{@docRoot}images/draw9patch-norm.png" alt="" height="300" width="341" />
-</div>
+<img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341"
+/>
 
 <p>Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool.
 You'll need the PNG image with which you'd like to create a NinePatch.</p>
@@ -39,9 +38,8 @@ You'll need the PNG image with which you'd like to create a NinePatch.</p>
      A previously saved 9-patch file (<code>*.9.png</code>) will be loaded as-is, 
      with no drawing area added, because it already exists.</p>
 
-<div class="sidebox" style="width:auto"><br/>
-<img src="{@docRoot}images/draw9patch-bad.png" alt="" height="300" width="341" />
-</div>
+<img src="{@docRoot}images/draw9patch-bad.png" style="float:right" alt="" height="300" width="341"
+/>
 
 <p>Optional controls include:</p>
 <ul>
diff --git a/docs/html/guide/practices/design/responsiveness.jd b/docs/html/guide/practices/design/responsiveness.jd
index 1d5a235..8a4e7cf 100644
--- a/docs/html/guide/practices/design/responsiveness.jd
+++ b/docs/html/guide/practices/design/responsiveness.jd
@@ -23,8 +23,8 @@ level, you can think of responsiveness as a <em>class</em> problem. (Compare
 this with basic performance, which was described above as a <em>method</em>-level
 concern.)</p>
 
-<div class="sidebox" style="margin-top:1em;border:0;">
-<div style="border:0;background-color:#fff;padding:15px;padding-right:2em;margin:0;">
+<div class="sidebox-wrapper">
+<div class="sidebox">
 <img src="{@docRoot}images/anr.png" width="240" height="320" alt="Screenshot of ANR dialog box">
 <p style="margin-top:.5em;padding:.5em;">An ANR dialog displayed to the user.</p>
 </div>
diff --git a/docs/html/guide/publishing/preparing.jd b/docs/html/guide/publishing/preparing.jd
index 5357166..c1c6351 100644
--- a/docs/html/guide/publishing/preparing.jd
+++ b/docs/html/guide/publishing/preparing.jd
@@ -176,10 +176,13 @@ elements.</li>
 <h3 id="mapsApiKey">7. Register for a Maps API Key, if your application is using
 MapView elements</h3>
 
-<div class="sidebox" style="margin-bottom:.5em;padding:1em;"><p>
+<div class="sidebox-wrapper">
+<div class="sidebox"><p>
 For complete information about getting a Maps API Key, see <a
 href="http://code.google.com/android/add-ons/google-apis/mapkey.html">
-Obtaining a Maps API Key</a>.</p></div>
+Obtaining a Maps API Key</a>.</p>
+</div>
+</div>
 
 <p>If your application uses one or more Mapview elements, you will need to 
 register your application with the Google
diff --git a/docs/html/guide/topics/ui/declaring-layout.jd b/docs/html/guide/topics/ui/declaring-layout.jd
index 662efbf..f114895 100644
--- a/docs/html/guide/topics/ui/declaring-layout.jd
+++ b/docs/html/guide/topics/ui/declaring-layout.jd
@@ -41,6 +41,7 @@ application can create View and ViewGroup objects (and manipulate their properti
 
 <p>The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI. For example, you could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time. </p>
 
+<div class="sidebox-wrapper">
 <div class="sidebox">
   <ul>
   <li>The <a href="{@docRoot}sdk/eclipse-adt.html">ADT
@@ -54,6 +55,7 @@ application can create View and ViewGroup objects (and manipulate their properti
   <li>The <a href="{@docRoot}guide/developing/tools/layoutopt.html">layoutopt</a> tool lets
   you quickly analyze your layouts and hierarchies for inefficiencies or other problems.</li>
 </div>
+</div>
 
 <p>The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. For example, you can create XML layouts for different screen orientations, different device screen sizes, and different languages. Additionally, declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems. As such, this document focuses on teaching you how to declare your layout in XML. If you're
 interested in instantiating View objects at runtime, refer to the {@link android.view.ViewGroup} and 
@@ -69,10 +71,15 @@ Layout Objects</a>. There are also a collection of tutorials on building various
 
 <h2 id="write">Write the XML</h2>
 
-<div class="sidebox"><p>For your convenience, the API reference documentation for UI related classes lists the available XML attributes that correspond to the class methods, including inherited attributes.</p>
+<div class="sidebox-wrapper">
+<div class="sidebox">
+<p>For your convenience, the API reference documentation for UI related classes
+lists the available XML attributes that correspond to the class methods, including inherited
+attributes.</p>
 <p>To learn more about the available XML elements and attributes, as well as the format of the XML file, see <a
 href="{@docRoot}guide/topics/resources/available-resources.html#layoutresources">Layout Resources</a>.</p>
- </div>
+</div>
+</div>
 
 <p>Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML &mdash; with a series of nested elements. </p>
 
diff --git a/docs/html/guide/topics/ui/how-android-draws.jd b/docs/html/guide/topics/ui/how-android-draws.jd
index efb55a2..3a57afa 100644
--- a/docs/html/guide/topics/ui/how-android-draws.jd
+++ b/docs/html/guide/topics/ui/how-android-draws.jd
@@ -18,12 +18,14 @@ and each View is responsible for drawing itself.
    siblings drawn in the order they appear in the tree.
    </p>
 
+<div class="sidebox-wrapper">
 <div class="sidebox">
   <p>The framework will not draw Views that are not in the invalid region, and also 
    will take care of drawing the Views background for you.</p>
    <p>You can force a View to draw, by calling <code>{@link android.view.View#invalidate()}</code>.
    </p>
 </div>
+</div>
 
 <p>
    Drawing the layout is a two pass process: a measure pass and a layout pass. The measuring
@@ -50,11 +52,13 @@ and each View is responsible for drawing itself.
   as to how much space they each get, the parent will intervene and set the rules on the second pass).
    </p>
    
-   <div class="sidebox"><p>
+<div class="sidebox-wrapper">
+<div class="sidebox"><p>
    To initiate a layout, call <code>{@link android.view.View#requestLayout}</code>. This method is typically
    called by a View on itself when it believes that is can no longer fit within
    its current bounds.</p>
-   </div>
+</div>
+</div>
 
    <p>
    The measure pass uses two classes to communicate dimensions. The
diff --git a/docs/html/guide/topics/views/ui-xml.jd b/docs/html/guide/topics/views/ui-xml.jd
index 8ae599c..bcfa562 100644
--- a/docs/html/guide/topics/views/ui-xml.jd
+++ b/docs/html/guide/topics/views/ui-xml.jd
@@ -21,11 +21,16 @@ parent.link=index.html
 example, the EditText element has a <code>text</code> attribute that corresponds to
 EditText.setText. </p>
 
-<div class="sidebox"><p>For your convenience, the API reference documentation for UI related classes lists the available XML attributes that correspond to the class methods, including inherited attributes.</p>
+<div class="sidebox-wrapper">
+<div class="sidebox">
+<p>For your convenience, the API reference documentation for UI related classes
+lists the available XML attributes that correspond to the class methods, including inherited
+attributes.</p>
 
 <p>To learn more about the available XML elements and attributes, as well as the format of the XML file, see <a
 href="{@docRoot}reference/available-resources.html#layoutresources">Layout Resources</a>.</p>
- </div>
+</div>
+</div>
 
 <p>Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create HTML files &mdash; as a series of nested tags. </p>
 
diff --git a/docs/html/resources/tutorials/hello-world.jd b/docs/html/resources/tutorials/hello-world.jd
index 58d1a16..2b515a1 100644
--- a/docs/html/resources/tutorials/hello-world.jd
+++ b/docs/html/resources/tutorials/hello-world.jd
@@ -357,12 +357,14 @@ short for "resources" and the directory contains all the non-code assets that
 your application requires. In addition to layout files, resources also include assets
 such as images, sounds, and localized strings.</p>
 
+<div class="sidebox-wrapper">
 <div class="sidebox">
   <h2>Landscape layout</h2>
   <p>When you want a different design for landscape, put your layout XML file
   inside /res/layout-land. Android will automatically look here when the layout changes.
   Without this special landscape layout defined, Android will stretch the default layout.</p>
 </div>
+</div>
 
 <p>The Eclipse plugin automatically creates one of these layout files for you: main.xml. 
 In the "Hello World" application you just completed, this file was ignored and you created a 
diff --git a/docs/html/resources/tutorials/notepad/notepad-ex1.jd b/docs/html/resources/tutorials/notepad/notepad-ex1.jd
index b26440b..cf7765e 100644
--- a/docs/html/resources/tutorials/notepad/notepad-ex1.jd
+++ b/docs/html/resources/tutorials/notepad/notepad-ex1.jd
@@ -64,23 +64,22 @@ selections. </em></li>
 
   <h2>Step 2</h2>
 
-  <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">Accessing and modifying data</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">For this
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>Accessing and modifying data</h2>
+    <p>For this
     exercise, we are using a SQLite database to store our data. This is useful
     if only <em>your</em> application will need to access or modify the data. If you wish for
     other activities to access or modify the data, you have to expose the data using a 
     {@link android.content.ContentProvider ContentProvider}.</p>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">If you are interested, you can find out more about 
-    <a href="{@docRoot}guide/topics/providers/content-providers.html">content providers</a> or the whole 
+    <p>If you are interested, you can find out more about
+    <a href="{@docRoot}guide/topics/providers/content-providers.html">content providers</a> or the
+whole
     subject of <a href="{@docRoot}guide/topics/data/data-storage.html">Data Storage</a>.
     The NotePad sample in the <code>samples/</code> folder of the SDK also has an example of how
     to create a ContentProvider.</p>
   </div>
+  </div>
 
     <p>Take a look at the <code>NotesDbAdapter</code> class &mdash; this class is provided to
     encapsulate data access to a SQLite database that will hold our notes data
@@ -137,17 +136,13 @@ selections. </em></li>
    
 <h2 style="clear:right;">Step 3</h2>
 
-	<div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">Layouts and activities</h2>
-      <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">Most Activity classes will have a layout associated with them. The layout
+	<div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>Layouts and activities</h2>
+      <p>Most Activity classes will have a layout associated with them. The layout
     will be the "face" of the Activity to the user. In this case our layout will
     take over the whole screen and provide a list of notes.</p>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">Full screen layouts are not the only option for an Activity however. You
+    <p>Full screen layouts are not the only option for an Activity however. You
     might also want to use a <a
 href="{@docRoot}resources/faq/commontasks.html#floatingorfull">floating 
     layout</a> (for example, a <a
@@ -155,7 +150,8 @@ href="{@docRoot}resources/faq/commontasks.html#dialogsandalerts">dialog
     or alert</a>), 
     or perhaps you don't need a layout at all (the Activity will be invisible 
     to the user unless you specify some kind of layout for it to use).</p>
-    </div>
+  </div>
+  </div>
     
     <p>Open the <code>notepad_list.xml</code> file in <code>res/layout</code>
 and 
@@ -233,23 +229,22 @@ and
 
   <h2 style="clear:right;">Step 5</h2>
 
-	  <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">Resources and the R class</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">The folders under res/ in the Eclipse project are for resources. 
-     There is a <a href="{@docRoot}resources/faq/commontasks.html#filelist">specific structure</a> to the
+	<div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>Resources and the R class</h2>
+    <p>The folders under res/ in the Eclipse project are for resources.
+     There is a <a href="{@docRoot}resources/faq/commontasks.html#filelist">specific structure</a>
+to the
      folders and files under res/.</p>
-    <p style="padding-left:.5em;font-size:12px;
-margin:0; padding:.0em .5em .5em 1em;">Resources defined in these folders and files will have
+    <p>Resources defined in these folders and files will have
     corresponding entries in the R class allowing them to be easily accessed
     and used from your application. The R class is automatically generated using the contents
     of the res/ folder by the eclipse plugin (or by aapt if you use the command line tools).
     Furthermore, they will be bundled and deployed for you as part of the application.</p>
     </p>
   </div>
+  </div>
+
     <p>To make the list of notes in the ListView, we also need to define a View for each row:</p>
   <ol>
     <li>
@@ -373,20 +368,18 @@ Notepadv1
 
   <h2>Step 9</h2>
 
-      <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">More on menus</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">The notepad application we are constructing only scratches the 
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>More about menus</h2>
+    <p>The notepad application we are constructing only scratches the
      surface with <a href="{@docRoot}resources/faq/commontasks.html#addmenuitems">menus</a>. </p>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">You can also <a href="{@docRoot}resources/faq/commontasks.html#menukeyshortcuts">add
-shortcut keys for menu items</a>, <a href="{@docRoot}resources/faq/commontasks.html#menukeyshortcuts">create
+    <p>You can also <a href="{@docRoot}resources/faq/commontasks.html#menukeyshortcuts">add
+shortcut keys for menu items</a>, <a
+href="{@docRoot}resources/faq/commontasks.html#menukeyshortcuts">create
 submenus</a> and even <a href="{@docRoot}resources/faq/commontasks.html#addingtoothermenus">add
 menu items to other applications!</a>. </p>
   </div>
+  </div>
 
 <p>Fill out the body of the <code>onCreateOptionsMenu()</code> method.</p>
 
@@ -486,19 +479,17 @@ We will simply
 
 
 <h2>Step 12</h2>
-      <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">List adapters</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0; 
-     padding:.0em .5em .5em 1em;">Our example uses a {@link android.widget.SimpleCursorAdapter 
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>List adapters</h2>
+    <p>Our example uses a {@link android.widget.SimpleCursorAdapter
      SimpleCursorAdapter} to bind a database {@link android.database.Cursor Cursor}
      into a ListView, and this is a common way to use a {@link android.widget.ListAdapter 
      ListAdapter}. Other options exist like {@link android.widget.ArrayAdapter ArrayAdapter} which 
      can be used to take a List or Array of in-memory data and bind it in to
      a list as well.</p>
   </div>
+  </div>
   
   <p>Define the <code>fillData()</code> method:</p>
    <p>This
diff --git a/docs/html/resources/tutorials/notepad/notepad-ex2.jd b/docs/html/resources/tutorials/notepad/notepad-ex2.jd
index 44a04ab..a945a62 100644
--- a/docs/html/resources/tutorials/notepad/notepad-ex2.jd
+++ b/docs/html/resources/tutorials/notepad/notepad-ex2.jd
@@ -63,12 +63,13 @@ Tools</strong> &gt; <strong>Fix Project Properties</strong>.</p>
 
 
 <h2>Step 2</h2>
-
+<div class="sidebox-wrapper">
 <div class="sidebox">
 <p>Context menus should always be used when performing actions upon specific elements in the UI.
 When you register a View to a context menu, the context menu is revealed by performing a "long-click"
 on the UI component (press and hold the touchscreen or highlight and hold down the selection key for about two seconds).</p>
 </div>
+</div>
 
 <p>First, let's create the context menu that will allow users to delete individual notes.
 Open the Notepadv2 class.</p>
@@ -122,26 +123,23 @@ method of our NotesDbAdapter and the note is deleted. That's it for the context
 can now be deleted.</p>
 
 <h2 style="clear:right;">Step 4</h2>
-<div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-     background-color:#FFFFEE;margin-right:0px;
-     margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">Starting Other Activities</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">In this example our Intent uses a class name specifically.
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>Starting Other Activities</h2>
+    <p>In this example our Intent uses a class name specifically.
      As well as
      <a href="{@docRoot}resources/faq/commontasks.html#intentexamples">starting intents</a> in
     classes we already know about, be they in our own application or another
     application, we can also create Intents without knowing exactly which
     application will handle it.</p>
-    <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">For example, we might want to open a page in a
+    <p>For example, we might want to open a page in a
     browser, and for this we still use
     an Intent. But instead of specifying a class to handle it, we use
     a predefined Intent constant, and a content URI that describes what we
     want to do. See {@link android.content.Intent
     android.content.Intent} for more information.</p>
-</div>
+  </div>
+  </div>
 
 	<p>Fill in the body of the <code>createNote()</code> method:
     <p>Create a new <code>Intent</code> to create a note
@@ -292,25 +290,23 @@ case ACTIVITY_EDIT:
 
 <h2>Step 7</h2>
 
-  <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">The Art of Layout</h2>
-    <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">The provided
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>The Art of Layout</h2>
+    <p>The provided
     note_edit.xml layout file is the most sophisticated one in the application we will be building,
     but that doesn't mean it is even close to the kind of sophistication you will be likely to want
     in real Android applications.</p>
-    <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">Creating a
+    <p>Creating a
     good UI is part art and part science, and the rest is work. Mastery of <a
     href="{@docRoot}guide/topics/ui/declaring-layout.html">Declaring Layout</a> is an essential part of creating
     a good looking Android application.</p>
-    <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">Take a look at the
+    <p>Take a look at the
     <a href="{@docRoot}resources/tutorials/views/index.html">Hello Views</a>
     for some example layouts and how to use them. The ApiDemos sample project is also a
     great resource from which to learn how to create different layouts.</p>
   </div>
+  </div>
 
 <p>Open the file <code>note_edit.xml</code> that has been provided and take a
     look at it. This is the UI code for the Note Editor.</p>
@@ -565,20 +561,18 @@ protected void onCreate(Bundle savedInstanceState) {
 
 <h2>Step 11</h2>
 
-<div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;
-      margin-bottom:.5em;margin-top:1em;padding:0em;width:240px;">
-    <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">The All-Important Android Manifest File</h2>
-  <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">The AndroidManifest.xml file is the way in which Android sees your
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>The All-Important Android Manifest File</h2>
+  <p>The AndroidManifest.xml file is the way in which Android sees your
     application. This file defines the category of the application, where
     it shows up (or even if it shows up) in the launcher or settings, what
     activities, services, and content providers it defines, what intents it can
     receive, and more. </p>
-    <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">For more information, see the reference document
-    <a href="{@docRoot}guide/topics/manifest/manifest-intro.html">The AndroidManifest.xml File</a></p>
+    <p>For more information, see the reference document
+    <a href="{@docRoot}guide/topics/manifest/manifest-intro.html">The AndroidManifest.xml
+File</a></p>
+  </div>
   </div>
 
 <p>Finally, the new Activity has to be defined in the manifest file:</p>
diff --git a/docs/html/resources/tutorials/notepad/notepad-ex3.jd b/docs/html/resources/tutorials/notepad/notepad-ex3.jd
index 2da113f..573500f 100644
--- a/docs/html/resources/tutorials/notepad/notepad-ex3.jd
+++ b/docs/html/resources/tutorials/notepad/notepad-ex3.jd
@@ -189,30 +189,28 @@ and populate the View elements with them.</p>
 
 <h2>Step 7</h2>
 
-    <div class="sidebox" style="border:2px solid #FFFFDD;float:right;
-      background-color:#FFFFEE;margin-right:0px;margin-bottom:.5em;
-      margin-top:1em;padding:0em;width:240px;">
-      <h2 style="border:0;font-size:12px;padding:.5em .5em .5em 1em;margin:0;
-      background-color:#FFFFDD;">Why handling life-cycle events is important</h2>
-      <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">If you are used to always having control in your applications, you
-      might not understand why all this life-cycle work is necessary. The reason
-      is that in Android, you are not in control of your Activity, the
-      operating system is!</p>
-      <p style="padding-left:.5em;font-size:12px;margin:0;
-     padding:.0em .5em .5em 1em;">As we have already seen, the Android model is based around activities
-      calling each other. When one Activity calls another, the current Activity
-      is paused at the very least, and may be killed altogether if the
-      system starts to run low on resources. If this happens, your Activity will
-      have to store enough state to come back up later, preferably in the same
-      state it was in when it was killed.</p>
-      <p style="padding-left:.5em;font-size:12px;margin:0;padding:.0em .5em .5em 1em;">
-      Android has a <a href="{@docRoot}guide/topics/fundamentals.html#lcycles">well-defined life cycle</a>.
-      Lifecycle events can happen even if you are not handing off control to
-      another Activity explicitly. For example, perhaps a call comes in to the
-      handset. If this happens, and your Activity is running, it will be swapped
-      out while the call Activity takes over.</p>
-    </div>
+  <div class="sidebox-wrapper">
+  <div class="sidebox">
+    <h2>Why handling life-cycle events is important</h2>
+    <p>If you are used to always having control in your applications, you
+    might not understand why all this life-cycle work is necessary. The reason
+    is that in Android, you are not in control of your Activity, the
+    operating system is!</p>
+    <p>As we have already seen, the Android model is based around activities
+    calling each other. When one Activity calls another, the current Activity
+    is paused at the very least, and may be killed altogether if the
+    system starts to run low on resources. If this happens, your Activity will
+    have to store enough state to come back up later, preferably in the same
+    state it was in when it was killed.</p>
+    <p>
+    Android has a <a href="{@docRoot}guide/topics/fundamentals.html#lcycles">well-defined life
+cycle</a>.
+    Lifecycle events can happen even if you are not handing off control to
+    another Activity explicitly. For example, perhaps a call comes in to the
+    handset. If this happens, and your Activity is running, it will be swapped
+    out while the call Activity takes over.</p>
+  </div>
+  </div>
 
 <p>Still in the <code>NoteEdit</code> class, we now override the methods
    <code>onSaveInstanceState()</code>, <code>onPause()</code> and