Move styles from sample.css to heroes.component.css.

Move additional styles from `sample.css` to `hero-search.component.css`.
Edit tutorial to reflect the removal of `sample.css` and the change to `heroes.component.css`.
Edit tutorial to reflect the addition of `hero-search.component.css` file.
Edit `hero-search.component.ts` to include styles from `hero-search.component.css`.
Remove reference to `/public/docs/_examples/toh-6/ts/sample.css` from `/public/docs/_examples/toh-6/ts/index.html`.

Author: Adam-Meisen

public/docs/_examples/toh-6/ts/sample.css renamed to public/docs/_examples/toh-6/ts/app/hero-search.component.css

@@ -1,11 +1,4 @@
 /* #docregion */
-.error {color:red;}
-button.delete-button{
-  float:right;
-  background-color: gray !important;
-  color:white;
-}
-
 .search-result{
   border-bottom: 1px solid gray;
   border-left: 1px solid gray;
@@ -21,4 +14,3 @@ button.delete-button{
   width: 200px;
   height: 20px;
 }
-

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

@@ -11,6 +11,7 @@ import { Hero } from './hero';
 @Component({
   selector: 'hero-search',
   templateUrl: 'app/hero-search.component.html',
+  styleUrls:  ['app/hero-search.component.css'],
   providers: [HeroSearchService]
 })
 export class HeroSearchComponent implements OnInit {

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

@@ -1,3 +1,4 @@
+/* #docregion */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -57,3 +58,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
+/* #docregion additions */
+.error {color:red;}
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}

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

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

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

@@ -316,7 +316,9 @@ block add-new-hero-via-detail-comp
   The user can *delete* an existing hero by clicking a delete button next to the hero's name.
   Add the following to the heroes component HTML right after the hero name in the repeated `<li>` tag:
 +makeExample('app/heroes.component.html', 'delete')
-
+:marked
+  Add the following CSS to the bottom of `heroes.component.css`.
++makeExcerpt('toh-6/ts/app/heroes.component.css', 'additions', '')(format=".")
 :marked
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
   Let's start with *add*.
@@ -396,7 +398,7 @@ block observables-section
     We start by creating `HeroSearchService` that sends search queries to our server's web api.
 
   +makeExample('toh-6/ts/app/hero-search.service.ts', null, 'app/hero-search.service.ts')(format=".")
-
+  
   :marked
     The `http.get` call in `HeroSearchService` is similar to the `http.get` call in the `HeroService`.
     The notable difference: we no longer call `toPromise`. 
@@ -407,6 +409,9 @@ block observables-section
 
     The component template is simple - just a textbox and a list of matching search results.
   +makeExample('toh-6/ts/app/hero-search.component.html', null,'hero-search.component.html')
+  :marked
+    We'll also want to add styles for the new component.
+  +makeExample('toh-6/ts/app/hero-search.component.css', null,'hero-search.component.css')
   :marked
     As the user types in the search box, a *keyup* event binding calls the component's `search` with the new search box value.
 
@@ -535,6 +540,7 @@ block filetree
         .file hero-detail.component.html
         .file hero-detail.component.ts
         .file hero-search.component.html
+        .file hero-search.component.css
         .file hero-search.component.ts
         .file hero-search.service.ts
         .file rxjs-operators.ts
@@ -548,7 +554,6 @@ block filetree
       .file typings ...
       .file index.html
       .file package.json
-      .file sample.css (new)
       .file styles.css
       .file systemjs.config.json
       .file tsconfig.json
@@ -573,30 +578,32 @@ block file-summary
     `toh-6/ts/app/app.component.ts,
      toh-6/ts/app/heroes.component.ts,
      toh-6/ts/app/heroes.component.html,
+     toh-6/ts/app/heroes.component.css,
      toh-6/ts/app/hero-detail.component.ts,
      toh-6/ts/app/hero-detail.component.html,
      toh-6/ts/app/hero.service.ts,
-     toh-6/ts/app/in-memory-data.service.ts,
-     toh-6/ts/sample.css`,
+     toh-6/ts/app/in-memory-data.service.ts`,
     null,
     `app.comp...ts,
      heroes.comp...ts,
      heroes.comp...html,
+     heroes.comp...css,
      hero-detail.comp...ts,
      hero-detail.comp...html,
      hero.service.ts,
-     in-memory-data.service.ts,
-     sample.css`
+     in-memory-data.service.ts`
   )
 
   +makeTabs(
     `toh-6/ts/app/hero-search.service.ts,
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
+    toh-6/ts/app/hero-search.component.css,
     toh-6/ts/app/rxjs-operators.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
     hero-search.service.html,
+    hero-search.component.css,
     rxjs-operators.ts`
 )