chore(docs): re-skin main documentation

1 files changed, 18 insertions, 21 deletions

diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
index 900a0340..ca452b59 100644
--- a/docs/content/tutorial/step_04.ngdoc
+++ b/docs/content/tutorial/step_04.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 4 - Two-way Data Binding
 @description
 
-<ul doc:tutorial-nav="4"></ul>
+<ul doc-tutorial-nav="4"></ul>
 
 
 In this step, you will add a feature to let your users control the order of the items in the phone
@@ -10,7 +10,7 @@ list. The dynamic ordering is implemented by creating a new model property, wiri
 the repeater, and letting the data binding magic do the rest of the work.
 
 
-<doc:tutorial-instructions step="4"></doc:tutorial-instructions>
+<div doc-tutorial-reset="4"></div>
 
 
 You should see that in addition to the search box, the app displays a drop down menu that allows
@@ -24,23 +24,20 @@ The most important differences between Steps 3 and 4 are listed below. You can s
 
 __`app/index.html`:__
 <pre>
-...
-        Search: <input ng-model="query">
-        Sort by:
-        <select ng-model="orderProp">
-          <option value="name">Alphabetical</option>
-          <option value="age">Newest</option>
-        </select>
-
-...
-
-        <ul class="phones">
-          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
-            {{phone.name}}
-            <p>{{phone.snippet}}</p>
-          </li>
-        </ul>
-...
+  Search: <input ng-model="query">
+  Sort by:
+  <select ng-model="orderProp">
+    <option value="name">Alphabetical</option>
+    <option value="age">Newest</option>
+  </select>
+
+
+  <ul class="phones">
+    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
+      {{phone.name}}
+      <p>{{phone.snippet}}</p>
+    </li>
+  </ul>
 </pre>
 
 We made the following changes to the `index.html` template:
@@ -48,7 +45,7 @@ We made the following changes to the `index.html` template:
 * First, we added a `<select>` html element named `orderProp`, so that our users can pick from the
 two provided sorting options.
 
-      <img src="img/tutorial/tutorial_04.png">
+      <img  class="diagram" src="img/tutorial/tutorial_04.png">
 
 * We then chained the `filter` filter with {@link api/angular.module.ng.$filter.orderBy `orderBy`}
 filter to further process the input into the repeater. `orderBy` is a filter that takes an input
@@ -191,4 +188,4 @@ Now that you have added list sorting and tested the app, go to {@link step_05 st
 about Angular services and how Angular uses dependency injection.
 
 
-<ul doc:tutorial-nav="4"></ul>
+<ul doc-tutorial-nav="4"></ul>