Cherrypick from ics-mr1 Change-Id: I2f63aef72962990afeb2bf236e0cce3bac3af738

docs: Remove side padding built into Design images to improve alignment.
a few HTML adjustments for alignment as well

Change-Id: I432e25128a90b0376a2a469859b0ad49b035a2df

docs/html/design/building-blocks/buttons.jd

@@ -5,9 +5,7 @@ page.title=Buttons
 user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
 buttons</em>. Both can contain text labels and/or images.</p>
 
-<div style="text-align: center">
-  <img src="{@docRoot}design/media/buttons_basic.png">
-</div>
+<img src="{@docRoot}design/media/buttons_basic.png">
 
 <h2 id="basic">Basic Buttons</h2>
 

docs/html/design/building-blocks/pickers.jd

@@ -6,13 +6,12 @@ up/down arrow buttons, it's possible to set the desired value from the keyboard
 gesture.</p>
 
 <div class="layout-content-row">
-  <div class="layout-content-col span-2">&nbsp;</div>
   <div class="layout-content-col span-6">
 
     <img src="{@docRoot}design/media/picker_space.png">
 
   </div>
-  <div class="layout-content-col span-5">
+  <div class="layout-content-col span-6">
 
 <h4>Space considerations</h4>
 <p>Pickers can be used inline on a form, but their relatively large footprint is best suited for

docs/html/design/building-blocks/switches.jd

@@ -8,9 +8,7 @@ buttons, and on/off switches.</p>
 <p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
 turn an option off or on. Instead, use an on/off switch.</p>
 
-<div style="text-align: center">
   <img src="{@docRoot}design/media/switches_checkboxes.png">
-</div>
 
 <h2 id="radio-buttons">Radio Buttons</h2>
 
@@ -18,14 +16,10 @@ turn an option off or on. Instead, use an on/off switch.</p>
 selection if you think that the user needs to see all available options side-by-side. Otherwise,
 consider a spinner, which uses less space.</p>
 
-<div style="text-align: center">
   <img src="{@docRoot}design/media/switches_radios.png">
-</div>
 
 <h2 id="switches">On/off Switches</h2>
 
 <p>On/off switches toggle the state of a single settings option.</p>
 
-<div style="text-align: center">
   <img src="{@docRoot}design/media/switches_switches.png">
-</div>

docs/html/design/patterns/actionbar.jd

@@ -34,15 +34,13 @@ if you wish.
 Important: If the app is currently not displaying the top-level screen, be sure to display the Up
 caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
 Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.
+        </p>
 
-<div class="figure">
-  <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
-  <div class="figure-caption">
-    App icon with and without "up" affordance.
-  </div>
+<img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
+<div class="figure-caption">
+  App icon with and without "up" affordance.
 </div>
 
-        </p>
       </li>
     </ol>
 
@@ -114,7 +112,7 @@ the top bar.</p>
 <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p>
 
   </div>
-  <div class="layout-content-col span-3">
+  <div class="layout-content-col span-5">
 
     <img src="{@docRoot}design/media/action_bar_pattern_considerations.png">
 

docs/html/design/patterns/gestures.jd

@@ -82,7 +82,7 @@ following table shows the core gesture set that is supported in Android.</p>
   </div>
   <div class="layout-content-col span-4">
 
-    <img src="{@docRoot}design/media/gesture_pinchopen.png">
+    <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
 
 <h4>Pinch open</h4>
 <p>Zooms into content.</p>

docs/html/design/style/color.jd

@@ -3,9 +3,8 @@ page.title=Color
 
 <style>
   .color-row {
-    width: 740px;
-    margin-left: 10px !important;
-    margin-right: 10px !important;
+    width: 760px;
+    margin:0;
 
     display: -webkit-box;
     display:    -moz-box;

docs/html/design/style/devices-displays.jd

@@ -32,9 +32,7 @@ ensure that your app looks great on any device.</p>
   </div>
 </div>
 
-<div style="text-align:center">
   <img src="{@docRoot}design/media/devices_displays_density.png">
-</div>
 
 <h4>Strategies</h4>
 <p>So where do you begin when designing for multiple screens? One approach is to work in the base