chore(docs): re-skin main documentation

13 files changed, 94 insertions, 101 deletions

diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc
index 1190aaf2..9bbe9e2f 100644
--- a/docs/content/tutorial/index.ngdoc
+++ b/docs/content/tutorial/index.ngdoc
@@ -7,7 +7,7 @@ the construction of an AngularJS web app. The app you will build is a catalog th
 of Android devices, lets you filter the list to see only devices that interest you, and then view
 details for any device.
 
-<img src="img/tutorial/catalog_screen.png" width="488" height="413">
+<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
 
 Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
 or plug-ins. As you work through the tutorial, you will:
@@ -52,22 +52,22 @@ code management or to use scripts that copy snapshots of project files into your
 (`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your
 computer for your preferred option.
 
-<doc:tutorial-instructions show="true">
-  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+<div class="tabbable" show="true">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
     <ol>
       <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
 following command in a terminal window:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
       <p>You will need Java to run unit tests.</p></li>
       <li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p>
       <p>You can build Git from source or use the pre-compiled package.</p></li>
       <li><p>Clone the angular-phonecat repository located at <a
 href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
       <p>This command creates the <code>angular-phonecat</code> directory in your current
 directory.</p></li>
       <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
-      <pre><code>cd angular-phonecat</code></pre>
+      <pre>cd angular-phonecat</pre>
       <p>The tutorial instructions assume you are running all commands from the angular-phonecat
 directory.</p></li>
       <li><p>You will need an http server running on your system. Mac and Linux machines typically
@@ -75,22 +75,22 @@ have Apache pre-installed, but If you don't already have one installed, you can
 href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run
 <code>scripts/web-server.js</code>,  a simple bundled http server.</p></li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
-  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+  <div class="tab-pane well" id="git-win" title="Git on Windows">
     <ol>
       <li><p>You will need Java to run unit tests, so run the following command to verify that you
 have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on
 your <code>PATH</code>.</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
       <p></p></li>
       <li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li>
       <li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
 href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
       <p>This command creates the angular-phonecat directory in your current directory.</p></li>
       <li><p>Change your current directory to angular-phonecat.</p>
-      <pre><code>cd angular-phonecat</code></pre>
+      <pre>cd angular-phonecat</pre>
       <p>The tutorial instructions assume you are running all commands from the angular-phonecat
 directory.</p>
       <p>You should run all <code>git</code> commands from msysGit bash.</p>
@@ -101,18 +101,18 @@ already installed, you can install <a href="http://nodejs.org/#download">node.js
 <code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
 <code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
-  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux">
     <ol>
       <li><p>You need Java to run unit tests, so verify that you have <a
 href="http://java.com/">Java</a> installed by running the following command in a terminal
 window:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
        <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
 containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
       <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
-      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <pre>cd [tutorial-dir]/sandbox</pre>
       <p>The tutorial instructions assume you are running all commands from your
 <code>sandbox</code> directory.</p></li>
       <li><p>You need an http server running on your system and Mac and Linux machines typically
@@ -120,29 +120,29 @@ have Apache pre-installed. If you don't have an http server installed, you can <
 href="http://nodejs.org/#download">install node.js</a> and use it to run
 <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
-  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows">
     <ol>
       <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
 <code>java</code> executable is on your <code>PATH</code> by running the following command in the
 Windows command line:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
       <p>You need Java to run unit tests, so download the <a
 href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
 and unzip the files into the [tutorial-dir] directory</p></li>
       <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
-      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <pre>cd [tutorial-dir]/sandbox</pre>
       <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
       <li><p>You need an http server running on your system, but if you don't already have one
 already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
 <code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
 <code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
     </ol>
-  </doc:tutorial-instruction>
-</doc:tutorial-instructions>
+  </div>
+</divs>
 
 The last thing to do is to make sure your computer has a web browser and a good text editor
 installed. Now, let's get some cool stuff done!
 
-{@link step_00 <span class="tutorial-start">Get Started!</span>}
+{@link step_00 <span class="btn btn-primary">Get Started!</span>}
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc
index 3cf1c172..714f983e 100644
--- a/docs/content/tutorial/step_00.ngdoc
+++ b/docs/content/tutorial/step_00.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 0 - Bootstrapping
 @description
 
-<ul doc:tutorial-nav="0"></ul>
+<ul doc-tutorial-nav="0"></ul>
 
 
 You are now ready to build the AngularJS phonecat app. In this step, you will become familiar
@@ -10,11 +10,11 @@ with the most important source code files, learn how to start the development se
 angular-seed, and run the application in the browser.
 
 
-<doc:tutorial-instructions show="true">
-  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
     <ol>
       <li><p>In angular-phonecat directory, run this command:</p>
-      <pre><code>git checkout -f step-0</code></pre>
+      <pre>git checkout -f step-0</pre>
       <p>This resets your workspace to step 0 of the tutorial app.</p>
       <p>You must repeat this for every future step in the tutorial and change the number to
       the number of the step you are on. This will cause any changes you made within
@@ -41,13 +41,13 @@ directory.</li>
         </ul>
       </li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
 
-  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+  <div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
     <ol>
       <li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
-      <pre><code>git checkout -f step-0</code></pre>
+      <pre>git checkout -f step-0</pre>
       <p>This resets your workspace to step 0 of the tutorial app.</p>
       <p>You must repeat this for every future step in the tutorial and change the number to
       the number of the step you are on. This will cause any changes you made within
@@ -73,13 +73,13 @@ directory.</li>
         </ul>
       </li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
 
-  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix">
     <ol>
       <li><p>In the angular-phonecat directory, run this command:</p>
-      <pre><code>./goto_step.sh 0</code></pre>
+      <pre>./goto_step.sh 0</pre>
       <p>This resets your workspace to step 0 of the tutorial app.</p>
       <p>You must repeat this for every future step in the tutorial and change the number to
       the number of the step you are on. This will cause any changes you made within
@@ -105,13 +105,13 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html
         </ul>
       </li>
     </ol>
-  </doc:tutorial-instruction>
+  </div>
 
 
-  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin">
     <ol>
       <li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
-      <pre><code>goto_step.bat 0</code></pre>
+      <pre>goto_step.bat 0</pre>
       <p>This resets your workspace to step 0 of the tutorial app.</p>
       <p>You must repeat this for every future step in the tutorial and change the number to
       the number of the step you are on. This will cause any changes you made within
@@ -137,8 +137,8 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html
         </ul>
       </li>
     </ol>
-  </doc:tutorial-instruction>
-</doc:tutorial-instructions>
+  </div>
+</div>
 
 
 You can now see the page in your browser. It's not very exciting, but that's OK.
@@ -233,7 +233,7 @@ in the view by updating all of the affected bindings.
 The structure of our application is currently very simple. The template contains just one directive
 and one static binding, and our model is empty. That will soon change!
 
-<img src="img/tutorial/tutorial_00.png">
+<img class="diagram" src="img/tutorial/tutorial_00.png">
 
 
 ## What are all these files in my working directory?
@@ -265,7 +265,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
 Now let's go to {@link step_01 step 1} and add some content to the web app.
 
 
-<ul doc:tutorial-nav="0"></ul>
+<ul doc-tutorial-nav="0"></ul>
 
 <div style="display: none">
 Note: During the bootstrap the injector and the root scope will then be associated with the
diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc
index 11725031..a664c951 100644
--- a/docs/content/tutorial/step_01.ngdoc
+++ b/docs/content/tutorial/step_01.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 1 - Static Template
 @description
 
-<ul doc:tutorial-nav="1"></ul>
+<ul doc-tutorial-nav="1"></ul>
 
 
 In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML
@@ -12,7 +12,7 @@ dynamically display the same result with any set of data.
 In this step you will add some basic information about two cell phones to an HTML page.
 
 
-<doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions>
+<div doc-tutorial-reset="1"></div>
 
 
 The page now contains a list with information about two phones.
@@ -22,7 +22,6 @@ https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
 
 __`app/index.html`:__
 <pre>
-...
   <ul>
     <li>
       <span>Nexus S</span>
@@ -37,7 +36,6 @@ __`app/index.html`:__
       </p>
     </li>
   </ul>
-...
 </pre>
 
 
@@ -54,4 +52,4 @@ This addition to your app uses static HTML to display the list. Now, let's go to
 step 2} to learn how to use AngularJS to dynamically generate the same list.
 
 
-<ul doc:tutorial-nav="1"></ul>
+<ul doc-tutorial-nav="1"></ul>
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc
index d7e6a93f..bf7dc661 100644
--- a/docs/content/tutorial/step_02.ngdoc
+++ b/docs/content/tutorial/step_02.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 2 - Angular Templates
 @description
 
-<ul doc:tutorial-nav="2"></ul>
+<ul doc-tutorial-nav="2"></ul>
 
 
 Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the
@@ -14,7 +14,7 @@ design pattern} to decouple the code and to separate concerns. With that in mind
 little Angular and JavaScript to add model, view, and controller components to our app.
 
 
-<doc:tutorial-instructions step="2"></doc:tutorial-instructions>
+<div doc-tutorial-reset="2"></div>
 
 
 The app now contains a list with three phones.
@@ -64,7 +64,7 @@ tag as the template.
 bindings. As opposed to evaluating constants, these expression are refering to our application
 model, which was set up in our `PhoneListCtrl` controller.
 
-      <img src="img/tutorial/tutorial_02.png">
+      <img class="diagram" src="img/tutorial/tutorial_02.png">
 
 
 ## Model and Controller
@@ -209,4 +209,4 @@ are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to a
 to the app.
 
 
-<ul doc:tutorial-nav="2"></ul>
+<ul doc-tutorial-nav="2"></ul>
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc
index 60b4173b..26bb9d5f 100644
--- a/docs/content/tutorial/step_03.ngdoc
+++ b/docs/content/tutorial/step_03.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 3 - Filtering Repeaters
 @description
 
-<ul doc:tutorial-nav="3"></ul>
+<ul doc-tutorial-nav="3"></ul>
 
 
 We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
@@ -11,7 +11,7 @@ test, because a good end-to-end test is a good friend. It stays with your app, k
 and quickly detects regressions.
 
 
-<doc:tutorial-instructions step="3"></doc:tutorial-instructions>
+<div doc-tutorial-reset="3"></div>
 
 
 The app now has a search box. Notice that the phone list on the page changes depending on what a
@@ -31,7 +31,6 @@ We made no changes to the controller.
 
 __`app/index.html`:__
 <pre>
-...
   <div class="container-fluid">
     <div class="row-fluid">
       <div class="span2">
@@ -53,7 +52,6 @@ __`app/index.html`:__
       </div>
     </div>
   </div>
-...
 </pre>
 
 We added a standard HTML `<input>` tag and used angular's
@@ -71,7 +69,7 @@ available as a filter input in the list repeater (`phone in phones | filter:`__`
 changes to the data model cause the repeater's input to change, the repeater efficiently updates
 the DOM to reflect the current state of the model.
 
-      <img src="img/tutorial/tutorial_03.png">
+      <img  class="diagram" src="img/tutorial/tutorial_03.png">
 
 * Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the
 `query` value to create a new array that contains only those records that match the `query`.
@@ -192,5 +190,5 @@ We have now added full text search and included a test to verify that search wor
 to {@link step_04 step 4} to learn how to add sorting capability to the phone app.
 
 
-<ul doc:tutorial-nav="3"></ul>
+<ul doc-tutorial-nav="3"></ul>
 
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>
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc
index d485e8bc..321f60c3 100644
--- a/docs/content/tutorial/step_05.ngdoc
+++ b/docs/content/tutorial/step_05.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 5 - XHRs & Dependency Injection
 @description
 
-<ul doc:tutorial-nav="5"></ul>
+<ul doc-tutorial-nav="5"></ul>
 
 
 Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
@@ -11,7 +11,7 @@ api/angular.module.ng.$http $http}. We will use angular's {@link guide/dev_guide
 injection (DI)} to provide the service to the `PhoneListCtrl` controller.
 
 
-<doc:tutorial-instructions step="5"></doc:tutorial-instructions>
+<div doc-tutorial-reset="5"></div>
 
 
 You should now see a list of 20 phones.
@@ -89,7 +89,7 @@ Note that the names of arguments are significant, because the injector uses thes
 dependencies.
 
 
-<img src="img/tutorial/xhr_service_final.png">
+<img  class="diagram" src="img/tutorial/xhr_service_final.png">
 
 
 ### '$' Prefix Naming Convention
@@ -235,4 +235,4 @@ injection), go to {@link step_06 step 6}, where you will add some
 thumbnail images of phones and some links.
 
 
-<ul doc:tutorial-nav="5"></ul>
+<ul doc-tutorial-nav="5"></ul>
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index 770a47de..524b6a01 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: 6 - Templating Links & Images
 @description
 
-<ul doc:tutorial-nav="6"></ul>
+<ul doc-tutorial-nav="6"></ul>
 
 
 In this step, you will add thumbnail images for the phones in the phone list, and links that, for
@@ -10,7 +10,7 @@ now, will go nowhere. In subsequent steps you will use the links to display addi
 about the phones in the catalog.
 
 
-<doc:tutorial-instructions step="6"></doc:tutorial-instructions>
+<div doc-tutorial-reset="6"></div>
 
 
 You should now see links and images of the phones in the list.
@@ -64,7 +64,7 @@ We also added phone images next to each record using an image tag with the {@lin
 api/angular.module.ng.$compileProvider.directive.ngSrc ngSrc} directive. That directive prevents the
 browser from treating the angular `{{ expression }}` markup literally, and initiating a request to
 invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only
-specified an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`).
+specified an attribute binding in a regular `src` attribute (`<img  class="diagram" src="{{phone.imageUrl}}">`).
 Using `ngSrc` (`ng-src`) prevents the browser from making an http request to an invalid location.
 
 
@@ -103,4 +103,4 @@ Now that you have added phone images and links, go to {@link step_07 step 7} to
 layout templates and how angular makes it easy to create applications that have multiple views.
 
 
-<ul doc:tutorial-nav="6"></ul>
+<ul doc-tutorial-nav="6"></ul>
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index dbbf010d..f8b5cf52 100644
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -2,14 +2,14 @@
 @name Tutorial: 7 - Routing & Multiple Views
 @description
 
-<ul doc:tutorial-nav="7"></ul>
+<ul doc-tutorial-nav="7"></ul>
 
 
 In this step, you will learn how to create a layout template and how to build an app that has
 multiple views by adding routing.
 
 
-<doc:tutorial-instructions step="7"></doc:tutorial-instructions>
+<div doc-tutorial-reset="7"></div>
 
 
 Note that when you now navigate to `app/index.html`, you are redirected to `app/index.html#/phones`
@@ -191,7 +191,7 @@ __`app/partials/phone-list.html`:__
 
 <div style="display:none">
 TODO!
-<img src="img/tutorial/tutorial_07_final.png">
+<img  class="diagram" src="img/tutorial/tutorial_07_final.png">
 </div>
 
 We also added a placeholder template for the phone details view:
@@ -258,4 +258,4 @@ With the routing set up and the phone list view implemented, we're ready to go t
 step 8} to implement the phone details view.
 
 
-<ul doc:tutorial-nav="7"></ul>
+<ul doc-tutorial-nav="7"></ul>
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index 9ccaf9b4..3892abdf 100644
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -2,14 +2,14 @@
 @name Tutorial: 8 - More Templating
 @description
 
-<ul doc:tutorial-nav="8"></ul>
+<ul doc-tutorial-nav="8"></ul>
 
 
 In this step, you will implement the phone details view, which is displayed when a user clicks on a
 phone in the phone list.
 
 
-<doc:tutorial-instructions step="8"></doc:tutorial-instructions>
+<div doc-tutorial-reset="8"></div>
 
 
 Now when you click on a phone on the list, the phone details page with phone-specific information
@@ -113,7 +113,7 @@ __`app/partials/phone-details.html`:__
 
 <div style="display: none">
 TODO!
-<img src="img/tutorial/tutorial_08-09_final.png">
+<img  class="diagram" src="img/tutorial/tutorial_08-09_final.png">
 </div>
 
 ## Test
@@ -194,4 +194,4 @@ Now that the phone details view is in place, proceed to {@link step_09 step 9} t
 write your own custom display filter.
 
 
-<ul doc:tutorial-nav="8"></ul>
+<ul doc-tutorial-nav="8"></ul>
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
index 45418cec..86e4ffc6 100644
--- a/docs/content/tutorial/step_09.ngdoc
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -2,13 +2,13 @@
 @name Tutorial: 9 - Filters
 @description
 
-<ul doc:tutorial-nav="9"></ul>
+<ul doc-tutorial-nav="9"></ul>
 
 
 In this step you will learn how to create your own custom display filter.
 
 
-<doc:tutorial-instructions step="9"></doc:tutorial-instructions>
+<div doc-tutorial-reset="9"></div>
 
 
 Navigate to one of the detail pages.
@@ -140,4 +140,4 @@ Now that you have learned how to write and test a custom filter, go to {@link st
 learn how we can use angular to enhance the phone details page further.
 
 
-<ul doc:tutorial-nav="9"></ul>
+<ul doc-tutorial-nav="9"></ul>
diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc
index 1d60de06..85c14072 100644
--- a/docs/content/tutorial/step_10.ngdoc
+++ b/docs/content/tutorial/step_10.ngdoc
@@ -2,13 +2,13 @@
 @name Tutorial: 10 - Event Handlers
 @description
 
-<ul doc:tutorial-nav="10"></ul>
+<ul doc-tutorial-nav="10"></ul>
 
 
 In this step, you will add a clickable phone image swapper to the phone details page.
 
 
-<doc:tutorial-instructions step="10"></doc:tutorial-instructions>
+<div doc-tutorial-reset="10"></div>
 
 
 The phone details view displays one large image of the current phone and several smaller thumbnail
@@ -70,7 +70,7 @@ url of the thumbnail image.
 
 <div style="display: none">
 TODO!
-<img src="img/tutorial/tutorial_10-11_final.png">
+<img  class="diagram" src="img/tutorial/tutorial_10-11_final.png">
 </div>
 
 ## Test
@@ -138,4 +138,4 @@ With the phone image swapper in place, we're ready for {@link step_11 step 11} (
 learn an even better way to fetch data.
 
 
-<ul doc:tutorial-nav="10"></ul>
+<ul doc-tutorial-nav="10"></ul>
diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc
index acad5467..0efc5bfb 100644
--- a/docs/content/tutorial/step_11.ngdoc
+++ b/docs/content/tutorial/step_11.ngdoc
@@ -2,13 +2,13 @@
 @name Tutorial: 11 - REST and Custom Services
 @description
 
-<ul doc:tutorial-nav="11"></ul>
+<ul doc-tutorial-nav="11"></ul>
 
 
 In this step, you will improve the way our app fetches data.
 
 
-<doc:tutorial-instructions step="11"></doc:tutorial-instructions>
+<div doc-tutorial-reset="11"></div>
 
 
 The last improvement we will make to our app is to define a custom service that represents a {@link
@@ -220,4 +220,4 @@ There you have it!  We have created a web app in a relatively short amount of ti
 the_end closing notes} we'll cover were to go from here.
 
 
-<ul doc:tutorial-nav="11"></ul>
+<ul doc-tutorial-nav="11"></ul>