diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css
index b5fddefe30..054b417f6f 100644
--- a/public/docs/_examples/styles.css
+++ b/public/docs/_examples/styles.css
@@ -125,7 +125,7 @@ nav a.router-link-active {
display: inline-block;
font-size: small;
color: white;
- padding: 0.8em 0.7em 0em 0.7em;
+ padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 74b5c4bb89..4548b606e5 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -1,16 +1,30 @@
include ../../../../_includes/_util-fns
:marked
- In most applications, users navigate from one [view](./glossary.html#view) to the next
- as they perform application tasks.
-
+ The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next
+ as users perform application tasks.
+
+ We cover the router's primary features in this chapter, illustrating them through the evolution
+ of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html).
+.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
+ 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:
+:marked
+
+
+.l-main-section
+:marked
+ ## Overview
+
The browser is a familiar model of application navigation.
We enter a URL in the address bar and the browser navigates to a corresponding page.
We click links on the page and the browser navigates to a new page.
We click the browser's back and forward buttons and the browser navigates
backward and forward through the history of pages we've seen.
- The Angular "**Component Router**" ("the router") borrows from this model.
+ The Angular ***Component Router*** ("the router") borrows from this model.
It can interpret a browser URL as an instruction
to navigate to a client-generated view and pass optional parameters along to the supporting view component
to help it decide what specific content to present.
@@ -37,14 +51,6 @@ include ../../../../_includes/_util-fns
We proceed in phases marked by milestones building from a simple two-pager with placeholder views
up to a modular, multi-view design with child routes.
- Try that [live final version](/resources/live-examples/router/ts/plnkr.html).
-.l-sub-section
- :marked
- In plunker, to see routing changes in the browser address bar,
- pop out the preview window by clicking this blue button in the upper right corner:
-
-
-:marked
But first, an overview of router basics.
.l-main-section
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index ae17d4b68c..167e565e56 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -20,11 +20,10 @@ figure.image-display
:marked
[Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
.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
- In plunker, to see routing changes in the browser address bar,
- pop out the preview window by clicking this blue button in the upper right corner:
-
-
+ 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:
.l-main-section
:marked
diff --git a/public/resources/images/devguide/plunker-separate-window-button.png b/public/resources/images/devguide/plunker-separate-window-button.png
index c428796583..bc8cc9ae28 100644
Binary files a/public/resources/images/devguide/plunker-separate-window-button.png and b/public/resources/images/devguide/plunker-separate-window-button.png differ