docs: share 'styles.css' across all samples all langs; fix styles

gulpfile.js

@@ -67,7 +67,16 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
   return new Minimatch(excludePattern)
 });
 
-var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'typings.json', 'karma.conf.js', 'karma-test-shim.js' ];
+var _exampleBoilerplateFiles = [
+  'karma.conf.js', 
+  'karma-test-shim.js', 
+  'package.json', 
+  'styles.css', 
+  'tsconfig.json', 
+  'typings.json' 
+ ];
+
+var _exampleDartWebBoilerPlateFiles = ['styles.css'];
 
 // --filter may be passed in to filter/select _example app subdir names
 // i.e. gulp run-e2e-tests --filter=foo  ; would select all example apps with
@@ -241,24 +250,35 @@ gulp.task('add-example-boilerplate', function() {
     fsUtils.addSymlink(realPath, linkPath);
   });
   
-  copyExampleBoilerplate();
+  return copyExampleBoilerplate();
 });
 
 // copies boilerplate files to locations
 // where an example app is found
+// also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
 // also copies protractor.config.js file
 function copyExampleBoilerplate() {
   var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
     return path.join(EXAMPLES_PATH, fn);
   });
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
-  // copies protractor.config.js from _examples dir to each subdir that
+  
-  // contains a e2e-spec file.
+  var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
-  return copyFiles(sourceFiles, examplePaths).then(function() {
+    return path.join(EXAMPLES_PATH, fn);
-    var sourceFiles = [ path.join(EXAMPLES_PATH, 'protractor.config.js') ];
-    var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
-    return copyFiles(sourceFiles, e2eSpecPaths);
   });
+  var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
+
+  return copyFiles(sourceFiles, examplePaths)
+    .then(function() {
+      return copyFiles(dartWebSourceFiles, dartExampleWebPaths);
+    })
+    // copy protractor.config.js from _examples dir to each subdir that
+    // contains a e2e-spec file.
+    .then(function() {
+      var sourceFiles = [ path.join(EXAMPLES_PATH, 'protractor.config.js') ];
+      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
+      return copyFiles(sourceFiles, e2eSpecPaths);
+    });
 }
 
 gulp.task('remove-example-boilerplate', function() {
@@ -273,10 +293,16 @@ gulp.task('remove-example-boilerplate', function() {
   });  
   
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
-  return deleteFiles(_exampleBoilerplateFiles, examplePaths).then(function() {
+  var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
-    var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
+  
-    return deleteFiles(['protractor.config.js'], e2eSpecPaths);
+  return deleteFiles(_exampleBoilerplateFiles, examplePaths)
-  })
+    .then(function() {
+      return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
+    })
+    .then(function() {
+      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
+      return deleteFiles(['protractor.config.js'], e2eSpecPaths);
+    })
 });
 
 gulp.task('serve-and-sync', ['build-docs'], function (cb) {
@@ -300,7 +326,9 @@ gulp.task('build-and-serve', ['build-docs'], function (cb) {
   watchAndSync({localFiles: true}, cb);
 });
 
-gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
+gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers']);
+// Stop zipping examples Feb 28, 2016
+//gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
 
 gulp.task('build-api-docs', ['build-js-api-docs', 'build-ts-api-docs', 'build-dart-cheatsheet']);
 
@@ -317,7 +345,10 @@ gulp.task('build-js-api-docs', ['_shred-api-examples'], function() {
 });
 
 gulp.task('build-plunkers', function() {
-  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+  return copyExampleBoilerplate()  
+    .then(function() {
+      return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+    });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {
@@ -557,6 +588,11 @@ function getExamplePaths(basePath, includeBase) {
   return getPaths(basePath, "example-config.json", includeBase)
 }
 
+function getDartExampleWebPaths(basePath) {
+  var paths = globby.sync([path.join(basePath,"**/dart/**/web")])
+  return paths;
+}
+
 function getPaths(basePath, filename, includeBase) {
   var filenames = getFilenames(basePath, filename, includeBase);
   var paths = filenames.map(function(fileName) {

public/docs/_examples/.gitignore

@@ -1,3 +1,4 @@
+styles.css
 typings
 typings.json
 *.js.map

public/docs/_examples/architecture/dart/web/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Intro to Angular 2</title>
+  <link rel="stylesheet" href="styles.css">  
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/architecture/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Intro to Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/attribute-directives/dart/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Attribute Directives</title>
+    <link rel="stylesheet" href="styles.css">    
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/attribute-directives/ts/index.html

@@ -4,7 +4,8 @@
   <head>
     <title>Attribute Directives</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-          
+    <link rel="stylesheet" href="styles.css">
+
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css

@@ -1,9 +1,3 @@
-/* route-link anchor tags */
-nav a {padding: 5px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
-nav a:visited, a:link {color: #444;}
-nav a:hover {color: white; background-color: #1171a3; }
-nav a.router-link-active {color: white; background-color: #52b9e9; }
-
 .active {font-style: italic;}
 .shazam {font-weight: bold;}
 

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css

@@ -7,7 +7,7 @@ table {
   font-family:Arial, Helvetica, sans-serif;
   color:#666;
   font-size:14px;
-  text-shadow: 1px 1px 0px #fff;
+  text-shadow: 1px 1px 0 #fff;
   margin:20px;
   border:#ccc 1px solid;
 

public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html

@@ -4,6 +4,9 @@
     <base href="/">
     <title>Angular 1 to Angular 2 Quick Reference</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+    <!-- #enddocregion style -->
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/cb-component-communication/ts/index.html

@@ -6,6 +6,7 @@
     <style>
       .to-top {margin-top: 8px; display: block;}
     </style>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/dependency-injection/dart/web/index.html

@@ -4,7 +4,7 @@
 <head>
   <title>Dependency Injection</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
+  <link rel="stylesheet" href="styles.css">
   <script type="application/dart" src="main.dart"></script>
 </head>
 <body>

public/docs/_examples/dependency-injection/ts/index.html

@@ -4,6 +4,7 @@
  <head>
     <title>Dependency Injection</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/displaying-data/dart/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Displaying Data</title>
+    <link rel="stylesheet" href="styles.css">    
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/displaying-data/ts/index.1.html

@@ -3,6 +3,7 @@
   <head>
     <title>Displaying Data</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/displaying-data/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Displaying Data</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/forms/dart/web/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="bootstrap.min.css">
 	  <!-- #enddocregion bootstrap-and-script -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="forms.css">    
 	  <!-- #enddocregion styles -->
 	  <!-- #docregion initial -->
 	  <!-- #docregion bootstrap-and-script -->

public/docs/_examples/forms/dart/web/styles.css

@@ -1,7 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
-    border-left: 5px solid #42A948; /* green */
-}
-.ng-invalid, .ng-invalid:focus {
-    border-left: 5px solid #a94442; /* red */
-}

public/docs/_examples/forms/js/index.html

@@ -11,6 +11,7 @@
     <!-- #enddocregion bootstrap -->
     <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="form.css">
     <!-- #enddocregion styles -->
 
    <!-- IE required polyfill -->

public/docs/_examples/forms/ts/forms.css

@@ -0,0 +1,9 @@
+/* #docregion */
+.ng-valid[required] {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid {
+  border-left: 5px solid #a94442; /* red */
+}
+/* #enddocregion */

public/docs/_examples/forms/ts/index.html

@@ -10,6 +10,7 @@
      <!-- #enddocregion bootstrap -->
      <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="forms.css">
      <!-- #enddocregion styles -->
      
     <!-- IE required polyfills, in this exact order -->

public/docs/_examples/hierarchical-dependency-injection/dart/web/index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hierarchical Injector</title>
+    <link rel="stylesheet" href="styles.css">
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/hierarchical-dependency-injection/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Hierarchical Injectors</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/homepage-hello-world/ts/index.1.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Hello World</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/homepage-hello-world/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Hello World</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/homepage-tabs/ts/index.1.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Tabs</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/homepage-tabs/ts/index.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Tabs</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
     
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/homepage-todo/ts/index.1.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Todos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/homepage-todo/ts/index.html

@@ -4,9 +4,9 @@
   <head>
     <title>Angular 2 Todos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-        
+    <link rel="stylesheet" href="styles.css">
+
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

public/docs/_examples/lifecycle-hooks/dart/web/index.html

@@ -4,6 +4,7 @@
 
 <head>
   <title>Angular 2 Lifecycle Hooks</title>
+  <link rel="stylesheet" href="styles.css">
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/lifecycle-hooks/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Lifecycle Hooks</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/pipes/dart/web/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Pipes Example</title>
+  <link rel="stylesheet" href="styles.css">
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/pipes/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Pipes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/quickstart/dart/ex1/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Getting Started</title>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- #docregion loaddart -->
     <script async src="main.dart" type="application/dart"></script>

public/docs/_examples/quickstart/dart/ex2/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Getting Started</title>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- #docregion loaddart -->
     <script async src="main.dart" type="application/dart"></script>

public/docs/_examples/quickstart/js/index.html

@@ -4,7 +4,8 @@
   <head>
     <title>Angular 2 QuickStart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    
+    <link rel="stylesheet" href="styles.css">
+
     <!-- 1. Load libraries -->
     <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->

public/docs/_examples/quickstart/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 QuickStart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">    
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- #docregion libraries -->    

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

@@ -8,7 +8,7 @@ import {Router} from 'angular2/router';
 @Component({
   // #docregion template
   template: `
-    <ul>
+    <ul class="items">
       <li *ngFor="#crisis of crises"
         (click)="onSelect(crisis)">
         <span class="badge">{{crisis.id}}</span> {{crisis.name}}

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

@@ -7,7 +7,7 @@ import {Router, RouteParams} from 'angular2/router';
 
 @Component({
   template: `
-    <ul>
+    <ul class="items">
       <li *ngFor="#crisis of crises"
         [class.selected]="isSelected(crisis)"
         (click)="onSelect(crisis)">

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

@@ -10,7 +10,7 @@ import {Router}              from 'angular2/router';
   // #docregion template
   template: `
     <h2>HEROES</h2>
-    <ul>
+    <ul class="items">
       <li *ngFor="#hero of heroes"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}

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

@@ -12,7 +12,7 @@ import {Router, RouteParams} from 'angular2/router';
   // #docregion template
   template: `
     <h2>HEROES</h2>
-    <ul>
+    <ul class="items">
       <li *ngFor="#hero of heroes"
         [class.selected]="isSelected(hero)"
         (click)="onSelect(hero)">

public/docs/_examples/router/ts/index.1.html

@@ -8,11 +8,13 @@
     <title>Router Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
-<!-- #docregion ie-cdn-polyfills -->
+
+    <!-- #docregion ie-cdn-polyfills -->
     <!-- IE required polyfills (from CDN), in this exact order -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
-<!-- #enddocregion ie-cdn-polyfills -->
+    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
+    <!-- #enddocregion ie-cdn-polyfills -->
    
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>

public/docs/_examples/router/ts/index.2.html

@@ -8,6 +8,12 @@
     <title>Router Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

public/docs/_examples/router/ts/index.3.html

@@ -8,6 +8,12 @@
     <title>Router Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

public/docs/_examples/router/ts/index.html

@@ -10,14 +10,14 @@
     <title>Router Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
-    
+
     <!-- #docregion ie-polyfills -->
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
     <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
     <!-- #enddocregion ie-polyfills -->
-    
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

public/docs/_examples/router/ts/styles.css

@@ -1,38 +0,0 @@
-/* #docregion */
-/* #docregion heroes */
-/* #docregion starter */
-h1 {color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;}
-h2 { color: #369; font-family: Arial, Helvetica, sans-serif;  }
-h3 { color: #444; font-weight: lighter; }
-body { margin: 2em; }
-body, input[text], button { color: #888; font-family: Cambria, Georgia; }
-button {padding: 0.2em; font-size: 14px}
-
-ul {list-style-type: none; margin-left: 1em; padding: 0; width: 20em;}
-
-li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
-li:hover {color: #369; background-color: #EEE; left: .2em;}
-
-/* route-link anchor tags */
-a {padding: 5px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
-a:visited, a:link {color: #444;}
-a:hover {color: white; background-color: #1171a3; }
-a.router-link-active {color: white; background-color: #52b9e9; }
-
-/* #enddocregion starter */
-/* #docregion selected */
-.selected { background-color: #EEE; color: #369; }
-/* #enddocregion selected */
-
-.badge {
-  font-size: small;
-  color: white;
-  padding: 0.1em 0.7em;
-  background-color: #369;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -1px;
-}
-/* #enddocregion heroes */
-/* #enddocregion */

public/docs/_examples/server-communication/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Http Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/structural-directives/dart/web/index.html

@@ -4,6 +4,7 @@
 
 <head>
   <title>Angular 2 Structural Directives</title>
+  <link rel="stylesheet" href="styles.css">
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/structural-directives/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Structural Directives</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/styles.css

@@ -0,0 +1,142 @@
+/* Master Styles */
+h1 {
+  color: #369; 
+  font-family: Arial, Helvetica, sans-serif;   
+  font-size: 250%;
+}
+h2, h3 { 
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;   
+  font-weight: lighter;
+}
+body { 
+  margin: 2em; 
+}
+body, input[text], button { 
+  color: #888; 
+  font-family: Cambria, Georgia; 
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa; 
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0em 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+/* everywhere else */
+* { 
+  font-family: Arial, Helvetica, sans-serif; 
+}

public/docs/_examples/template-syntax/dart/web/index.html

@@ -4,6 +4,8 @@
   <head>
     <title>Template Syntax</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="template-syntax.css">
+
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/template-syntax/ts/index.html

@@ -4,7 +4,8 @@
     <title>Template Syntax</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
-    
+    <link rel="stylesheet" href="template-syntax.css">
+ 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

public/docs/_examples/toh-1/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/toh-2/ts/app/app.component.ts

@@ -45,16 +45,17 @@ interface Hero {
       left: 0;
       background-color: #EEE;
       margin: .5em;
-      padding: .3em 0em;
+      padding: .3em 0;
       height: 1.6em;
       border-radius: 4px;
     }
     .heroes li.selected:hover {
+      background-color: #BBD8DC !important;
       color: white;
     }
     .heroes li:hover {
       color: #607D8B;
-      background-color: #EEE;
+      background-color: #DDD;
       left: .1em;
     }
     .heroes .text {
@@ -65,7 +66,7 @@ interface Hero {
       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;
@@ -73,7 +74,7 @@ interface Hero {
       top: -4px;
       height: 1.8em;
       margin-right: .8em;
-      border-radius: 4px 0px 0px 4px;
+      border-radius: 4px 0 0 4px;
     }
   `]
 // #enddocregion styles-1

public/docs/_examples/toh-2/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Angular 2 Tour of Heros</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/toh-3/ts/app/app.component.ts

@@ -40,16 +40,17 @@ import {HeroDetailComponent} from './hero-detail.component';
       left: 0;
       background-color: #EEE;
       margin: .5em;
-      padding: .3em 0em;
+      padding: .3em 0;
       height: 1.6em;
       border-radius: 4px;
     }
     .heroes li.selected:hover {
+      background-color: #BBD8DC !important;
       color: white;
     }
     .heroes li:hover {
       color: #607D8B;
-      background-color: #EEE;
+      background-color: #DDD;
       left: .1em;
     }
     .heroes .text {
@@ -60,7 +61,7 @@ import {HeroDetailComponent} from './hero-detail.component';
       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;
@@ -68,7 +69,7 @@ import {HeroDetailComponent} from './hero-detail.component';
       top: -4px;
       height: 1.8em;
       margin-right: .8em;
-      border-radius: 4px 0px 0px 4px;
+      border-radius: 4px 0 0 4px;
     }
   `],
 // #docregion directives

public/docs/_examples/toh-3/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/toh-4/ts/app/app.component.ts

@@ -40,16 +40,17 @@ import {HeroService} from './hero.service';
       left: 0;
       background-color: #EEE;
       margin: .5em;
-      padding: .3em 0em;
+      padding: .3em 0;
       height: 1.6em;
       border-radius: 4px;
     }
     .heroes li.selected:hover {
+      background-color: #BBD8DC !important;
       color: white;
     }
     .heroes li:hover {
       color: #607D8B;
-      background-color: #EEE;
+      background-color: #DDD;
       left: .1em;
     }
     .heroes .text {
@@ -60,7 +61,7 @@ import {HeroService} from './hero.service';
       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;
@@ -68,7 +69,7 @@ import {HeroService} from './hero.service';
       top: -4px;
       height: 1.8em;
       margin-right: .8em;
-      border-radius: 4px 0px 0px 4px;
+      border-radius: 4px 0 0 4px;
     }
   `],
   directives: [HeroDetailComponent],

public/docs/_examples/toh-4/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/toh-5/ts/app/dashboard.component.css

@@ -19,7 +19,7 @@ h3 {
   padding-right: 0;
 }
 .grid {
-  margin: 0 0em;
+  margin: 0;
 }
 .col-1-4 {
   width: 25%;

public/docs/_examples/toh-5/ts/app/hero-detail.component.css

@@ -22,4 +22,9 @@ button {
 }
 button:hover {
   background-color: #cfd8dc;
-}
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}

public/docs/_examples/toh-5/ts/app/heroes.component.css

@@ -1,4 +1,3 @@
-/* #docregion */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -15,18 +14,19 @@
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0em;
+  padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
-.heroes li.selected:hover {
-  color: white;
-}
 .heroes li:hover {
   color: #607D8B;
-  background-color: #EEE;
+  background-color: #DDD;
   left: .1em;
 }
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
 .heroes .text {
   position: relative;
   top: -3px;
@@ -35,7 +35,7 @@
   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;
@@ -43,5 +43,17 @@
   top: -4px;
   height: 1.8em;
   margin-right: .8em;
-  border-radius: 4px 0px 0px 4px;
+  border-radius: 4px 0 0 4px;
-}
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}

public/docs/_examples/toh-5/ts/styles.1.css

@@ -0,0 +1,34 @@
+/* #docregion */
+h2 { 
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;   
+  font-weight: lighter;
+}
+body { 
+  margin: 2em; 
+}
+body, input[text], button { 
+  color: #888; 
+  font-family: Cambria, Georgia; 
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa; 
+  cursor: auto;
+}
+/* everywhere else */
+* { 
+  font-family: Arial, Helvetica, sans-serif; 
+}

public/docs/_examples/toh-5/ts/styles.css

@@ -1,7 +0,0 @@
-/* #docplaster */
-/* #docregion */
-h2 { color: #444; font-weight: lighter; }
-body { margin: 2em; }
-body, input[text], button { color: #888; font-family: Cambria, Georgia; }
-button { padding: 0.2em; font-size: 14px}
-* { font-family: Arial; }

public/docs/_examples/tutorial/ts/app/app.component.css

@@ -1,4 +1,4 @@
-a {
+nav a {
   padding: 5px 10px;
   text-decoration: none;
   margin-top: 10px;
@@ -6,14 +6,14 @@ a {
   background-color: #eee;
   border-radius: 4px;
 }
-a:visited, a:link {
+nav a:visited, a:link {
   color: #607D8B;
 }
-a:hover {
+nav a:hover {
   color: #039be5;
   background-color: #CFD8DC;
 }
-a.router-link-active {
+nav a.router-link-active {
   color: #039be5;
 }
 h1 {

public/docs/_examples/tutorial/ts/app/app.component.ts

@@ -9,8 +9,10 @@ import {HeroService} from './hero.service';
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
-    <a [routerLink]="['Dashboard']">Dashboard</a>
+    <nav>
-    <a [routerLink]="['Heroes']">Heroes</a>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
     <router-outlet></router-outlet>
   `,
   styleUrls: ['app/app.component.css'],

public/docs/_examples/tutorial/ts/app/dashboard.component.css

@@ -17,7 +17,7 @@ h3 {
   padding-right: 0;
 }
 .grid {
-  margin: 0 0em;
+  margin: 0;
 }
 .col-1-4 {
   width: 25%;

public/docs/_examples/tutorial/ts/app/hero-detail.component.css

@@ -21,4 +21,9 @@ button {
 }
 button:hover {
   background-color: #cfd8dc;
-}
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}

public/docs/_examples/tutorial/ts/app/heroes.component.css

@@ -14,16 +14,17 @@
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0em;
+  padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
 .heroes li:hover {
   color: #607D8B;
-  background-color: #EEE;
+  background-color: #DDD;
   left: .1em;
 }
 .heroes li.selected:hover {
+  background-color: #BBD8DC !important;
   color: white;
 }
 .heroes .text {
@@ -34,7 +35,7 @@
   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;
@@ -42,7 +43,7 @@
   top: -4px;
   height: 1.8em;
   margin-right: .8em;
-  border-radius: 4px 0px 0px 4px;
+  border-radius: 4px 0 0 4px;
 }
 button {
   font-family: Arial;
@@ -55,4 +56,4 @@ button {
 }
 button:hover {
   background-color: #cfd8dc;
-}
+}

public/docs/_examples/tutorial/ts/styles.css

@@ -1,5 +0,0 @@
-h2 { color: #444; font-weight: lighter; }
-body { margin: 2em; }
-body, input[text], button { color: #888; font-family: Cambria, Georgia; }
-button { padding: 0.2em; font-size: 14px}
-* { font-family: Arial; }

public/docs/_examples/user-input/dart/web/index.html

@@ -3,6 +3,9 @@
 <html>
   <head>
     <title>User Input</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="user-input-styles.css">
+
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/user-input/ts/index.html

@@ -4,6 +4,7 @@
     <title>User Input</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="user-input-styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
@@ -16,7 +17,7 @@
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
     <script>
       System.config({
-        packages: {        
+        packages: {
           app: {
             format: 'register',
             defaultExtension: 'js'

public/docs/_examples/user-input/ts/user-input-styles.css

@@ -0,0 +1,9 @@
+fieldset {border-style:none}
+img {height: 100px;}
+.box {border: 1px solid black; padding:3px}
+.child-div {margin-left: 1em; font-weight: normal}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold;}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }

public/docs/dart/latest/guide/forms.jade

@@ -465,16 +465,16 @@ figure.image-display
   img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form")
 
 :marked
-  We achieve this effect by adding two styles to a new `styles.css` file
+  We achieve this effect by adding two styles to a new `forms.css` file
   (under `web/`).
 
-+makeExample('forms/dart/web/styles.css', null, 'web/styles.css')
++makeExample('forms/dart/web/forms.css', null, 'web/forms.css')
 :marked
   These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
 
   To add the styles to the app,
-  update the `<head>` of `index.html` to link to `styles.css`.
+  update the `<head>` of `index.html` to link to `forms.css`.
-- var stylePattern = { otl: /(.*styles.css.*$)/gm };
+- var stylePattern = { otl: /(.*forms.css.*$)/gm };
 +makeExample('forms/dart/web/index.html', 'styles', 'web/index.html (excerpt)', stylePattern)(format=".")
 
 
@@ -653,7 +653,7 @@ figure.image-display
    forms/dart/pubspec.yaml,
    forms/dart/web/index.html,
    forms/dart/web/main.dart,
-   forms/dart/web/styles.css`,
+   forms/dart/web/forms.css`,
   'no-todo,,all,,,,',
   `lib/hero_form_component.dart,
    lib/hero_form_component.html,
@@ -661,4 +661,4 @@ figure.image-display
    pubspec.yaml,
    web/index.html,
    web/main.dart,
-   web/styles.css`)
+   web/forms.css`)

public/docs/dart/latest/guide/template-syntax-NEW.jade

@@ -400,7 +400,7 @@ code-example(format="" language="html").
 //
   NOTE: Intentionally skip ugly null checking you wouldn't do in Dart.
   +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-6')
-  +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-5')(format=".")
+  +make---dashed-so-does-not-show-as-fragment-error---Example('template-syntax/dart/lib/app_component.html', 'elvis-5')(format=".")
   +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-7')
 :marked
   This approach has merit but can be cumbersome, especially if the property path is long.

public/docs/js/latest/guide/forms.jade

@@ -438,10 +438,10 @@ figure.image-display
   img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form")
 
 :marked
-  We achieve this effect by adding two styles to a new `styles.css` file
+  We achieve this effect by adding two styles to a new `forms.css` file
   that we add to our project as a sibling to `index.html`.
 
-+makeExample('forms/js/styles.css',null,'styles.css')(format=".")
++makeExample('forms/js/forms.css',null,'forms.css')(format=".")
 :marked
   These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
 
@@ -631,7 +631,7 @@ figure.image-display
    forms/js/app/app.component.js,
    forms/js/app/main.js,   
    forms/js/index.html,
-   forms/js/styles.css`,
+   forms/js/forms.css`,
   'final, final,,,,,',
   `hero-form.component.js,
    hero-form.component.html,   
@@ -639,5 +639,5 @@ figure.image-display
    app.component.js,
    main.js,
    index.html,
-   styles.css`)
+   forms.css`)
 :marked

public/docs/ts/latest/guide/dependency-injection.jade

@@ -727,8 +727,7 @@ code-example(format, language="html").
   We rarely work directly with an injector.
   Here's an `InjectorComponent` that does.
 
-+makeExample('dependency-injection/ts/app/injector.component.ts', 'injector',
++makeExample('dependency-injection/ts/app/injector.component.ts', 'injector', 'app/injector.component.ts')
-             'app/injector.component.ts')
 :marked
   The `Injector` is itself an injectable service.
 

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

@@ -436,10 +436,10 @@ figure.image-display
   img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form")
 
 :marked
-  We achieve this effect by adding two styles to a new `styles.css` file
+  We achieve this effect by adding two styles to a new `forms.css` file
   that we add to our project as a sibling to `index.html`.
 
-+makeExample('forms/ts/styles.css',null,'styles.css')(format=".")
++makeExample('forms/ts/forms.css',null,'forms.css')(format=".")
 :marked
   These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
 
@@ -691,7 +691,7 @@ figure.image-display
    forms/ts/app/app.component.ts,
    forms/ts/app/main.ts,   
    forms/ts/index.html,
-   forms/ts/styles.css`,
+   forms/ts/forms.css`,
   'final, final,,,,,',
   `hero-form.component.ts,
    hero-form.component.html,   
@@ -699,5 +699,5 @@ figure.image-display
    app.component.ts,
    main.ts,
    index.html,
-   styles.css`)
+   forms.css`)
 :marked

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

@@ -1117,13 +1117,10 @@ code-example(format="." language="bash").
   We add an `isSelected` method that returns true when a hero's id matches the selected id.
 +makeExample('router/ts/app/heroes/hero-list.component.ts','isSelected', 'hero-list.component.ts (constructor)')(format=".")
 :marked
-  We update our template with a [Class Binding](template-syntax.html#class-binding) to that `isSelected` method. 
+  Finally, we update our template with a [Class Binding](template-syntax.html#class-binding) to that `isSelected` method. 
   The binding adds the `selected` CSS class when the method returns `true` and removes it when `false`.
   Look for it within the repeated `<li>` tag as shown here:
 +makeExample('router/ts/app/heroes/hero-list.component.ts','template', 'hero-list.component.ts (template)')(format=".")
-:marked
-  Finally, we add the `selected` class to our CSS styles
-+makeExample('router/ts/styles.css','selected', 'styles.css (selected class)')(format=".")
 :marked
   When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
 figure.image-display

public/docs/ts/latest/guide/template-syntax.jade

@@ -1446,7 +1446,7 @@ figure.image-display
   These directive properties must be declared as **inputs** or **outputs**.
 
 .alert.is-important
-  :markdown
+  :marked
     Remember: All **components** are **directives**.
 :marked
 .l-sub-section

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -622,7 +622,7 @@ figure.image-display
 
   Our designers provided some basic styles to apply to elements across the entire app. 
   Add the following to a new file named `styles.css` in the root folder.
-+makeExample('toh-5/ts/styles.css', '', 'styles.css (App Styles)')(format=".")
++makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
 
 :marked
   Reference this stylesheet within the `index.html` in the traditional manner.
@@ -664,6 +664,7 @@ figure.image-display
     .file typings ...      
     .file index.html
     .file package.json
+    .file styles.css
     .file tsconfig.json
     .file typings.json
 :marked