docs(router): replace princess w/ procrastination; update images

public/docs/_examples/router/ts/app/app.component.3.ts

@@ -31,17 +31,17 @@ import {HeroService}           from './heroes/hero.service';
   // #enddocregion cc-anchor-no-default
   */
   /* Crisis Center Detail link
-  // #docregion princess-anchor
+  // #docregion Dragon-anchor
-  <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Princess Crisis</a>
+  <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
-  // #enddocregion princess-anchor
+  // #enddocregion Dragon-anchor
   */
 // #docregion template
   template: `
     <h1 class="title">Component Router</h1>
     <nav>
       <a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
-      <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Princess Crisis</a>
+      <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
-      <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:2}]">Dragon Crisis</a>
+      <a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:2}]">Shark Crisis</a>
     </nav>
     <router-outlet></router-outlet>
   `,

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -21,8 +21,10 @@ import {DialogService} from '../dialog.service';
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
     </div>
-    <button (click)="save()">Save</button>
+    <p>
-    <button (click)="cancel()">Cancel</button>
+      <button (click)="save()">Save</button>
+      <button (click)="cancel()">Cancel</button>
+    </p>
   </div>
   `,
   // #enddocregion template

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -17,8 +17,10 @@ import {DialogService} from '../dialog.service';
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
     </div>
-    <button (click)="save()">Save</button>
+    <p>
-    <button (click)="cancel()">Cancel</button>
+      <button (click)="save()">Save</button>
+      <button (click)="cancel()">Cancel</button>
+    </p>
   </div>
   `,
   styles: ['input {width: 20em}']

public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts

@@ -31,10 +31,10 @@ export class CrisisService {
 }
 
 var crises = [
-  new Crisis(1, 'Princess Held Captive'),
+  new Crisis(1, 'Dragon Burning Cities'),
-  new Crisis(2, 'Dragon Burning Cities'),
+  new Crisis(2, 'Sky Rains Great White Sharks'),  
   new Crisis(3, 'Giant Asteroid Heading For Earth'),
-  new Crisis(4, 'Release Deadline Looms')
+  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
 ];
 
 var crisesPromise = Promise.resolve(crises);

public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts

@@ -14,7 +14,9 @@ import {RouteParams, Router} from 'angular2/router';
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
     </div>
-    <button (click)="gotoHeroes()">Back</button>
+    <p>
+      <button (click)="gotoHeroes()">Back</button>
+    </p>
   </div>
   `,
 })

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -14,7 +14,9 @@ import {RouteParams, Router} from 'angular2/router';
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
     </div>
-    <button (click)="gotoHeroes()">Back</button>
+    <p>
+      <button (click)="gotoHeroes()">Back</button>
+    </p>
   </div>
   `,
 })

public/docs/ts/latest/guide/router.jade

@@ -10,10 +10,8 @@ include ../../../../_includes/_util-fns
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
     To see the URL changes in the browser address bar, 
-    pop out the preview window by clicking the blue 'X' button in the upper right corner:
+    pop out the preview window by clicking the blue 'X' button in the upper right corner.
-:marked
+
-  
-  
 .l-main-section
 :marked
   ## Overview
@@ -289,9 +287,6 @@ figure.image-display
   the Angular core script.
 <a id="base-href"></a>
 +makeExample('router/ts/index.html','router-lib')(format=".")
-.l-sub-section
-  :marked
-    Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills)
 :marked
   <a id="base-href"></a>
   ### Set the *&lt;base href>*
@@ -1011,7 +1006,7 @@ code-example(format="." language="bash").
   For example, the `HeroListComponent` doesn't need help to display a list of heroes. 
   But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`.
 figure.image-display
-  img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero" width="175")
+  img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero")
 :marked
   That becomes possible if we can include hero Magneta's `id` in the URL when we
   return from the `HeroDetailComponent`, a scenario we'll pursue in a moment. 
@@ -1070,17 +1065,15 @@ figure.image-display
 :marked
   The application still works. Clicking "back" returns to the hero list view. 
   
-  Look at the browser address bar. It should look something like this:
+  Look at the browser address bar.
+.l-sub-section
+  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
+  :marked
+    When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner.
+:marked
+ It should look something like this, depending on where you run it:
 code-example(format="." language="bash").
   localhost:3000/heroes?id=15&foo=foo
-.l-sub-section
-  :marked
-    Unfortunately, the browser address bar does not change when running the live example in plunker.
-    
-    You can take our word for it or 
-    download the sample from within plunker, unzip it, and browse to `index.html`.
-    You may have to launch it in a local server such as
-    [http-server](https://www.npmjs.com/package/http-server) or [lite-server](https://github.com/johnpapa/lite-server).
 :marked
   The `id` value appears in the query string (`?id=15&foo=foo`), not in the URL path.
   The path for the "Heroes" route doesn't have an `:id` token.
@@ -1130,7 +1123,7 @@ code-example(format="." language="bash").
 :marked
   When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
 figure.image-display
-  img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" width="250")
+  img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" )
 :marked
   The `foo` query string parameter is harmless and continues to be ignored.
   
@@ -1209,20 +1202,18 @@ code-example(format="." language="bash").
     .file tsconfig.json
     .file typings.json
 :marked
-  The top level application files are
+  The pertinent top level application files are
 +makeTabs(
   `router/ts/app/app.component.ts,
    router/ts/app/main.ts,
    router/ts/app/dialog.service.ts,
-   router/ts/index.html,
+   router/ts/index.html
-   router/ts/styles.css
   `,
   null,
   `app.component.ts,
    main.ts,
    dialog.service.ts,
-   index.html,
+   index.html
-   styles.css
   `)
 :marked
   <a id="crisis-center-structure-and-code"></id>
@@ -1319,16 +1310,16 @@ code-example(format="." language="bash").
 
   Let's take it a step further.
   This time we'll build a link parameters array that navigates from the root of the application
-  down to the "Princess Crisis".
+  down to the "Dragon Crisis".
 
   * The first item in the array identifies the parent route ('CrisisCenter').
   * There are no parameters for this parent route so we're done with it.
   * The second item identifies the child route for details about a particular crisis ('CrisisDetail').
   * The details child route requires an `id` route parameter
-  * We add the "Princess Crisis" id as the third item in the array (`{id:1}`)
+  * We add `id` of the *Dragon Crisis* as the third item in the array (`{id:1}`)
 
   It looks like this!
-+makeExample('router/ts/app/app.component.3.ts', 'princess-anchor')(format=".")
++makeExample('router/ts/app/app.component.3.ts', 'Dragon-anchor')(format=".")
 :marked
   If we wanted to, we could redefine our `AppComponent` template with *Crisis Center* routes exclusively:
 +makeExample('router/ts/app/app.component.3.ts', 'template')(format=".")
@@ -1340,7 +1331,7 @@ code-example(format="." language="bash").
   We can do that!
 
   We compose a 3-item link parameters array following the recipe we just created.
-  This time we set the id to the "Asteroid Crisis" (`{id:3}`).
+  This time we set the id to the *Asteroid Crisis* (`{id:3}`).
 
   We can't define a normal route because that requires setting a target component.
   We're not defining a *route to a component*. We're defining a *route to a route*. A *route to a route* is a **redirect**.
@@ -1478,17 +1469,3 @@ code-example(format=".", language="bash").
   Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
   providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:
 +makeExample('router/ts/app/main.2.ts','', 'main.ts (hash URL strategy)')
-
-<a id="ie-polyfills"></a>
-.l-main-section
-:marked
-  ## Appendix: Internet Explorer polyfills
-  A routed application relies on ES2015 promises and dynamic module loading.
-  IE needs help with that.
-  Make sure the following polyfill libraries are loaded in the `index.html`
-  ***above*** the Angular polyfill:
-+makeExample('router/ts/index.html','ie-polyfills')(format=".")
-:marked
-  We could substitute the following libraries from a CDN:
-+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
-:marked