X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tour-of-heroes;a=blobdiff_plain;f=src%2Fapp%2Fheroes%2Fheroes.component.css;h=2ad3fefb31409a5d5225cc57c91951cf2c763bd4;hp=9759a4211be6324f1917c749aa0407d80f769750;hb=50aeef7b5e0e7f75d1a1de38e2a45bf1953de785;hpb=9dd5d87bd26b5ccefbf8bb281b56798a285bcce5

diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
index 9759a42..2ad3fef 100644
--- a/src/app/heroes/heroes.component.css
+++ b/src/app/heroes/heroes.component.css
@@ -6,28 +6,33 @@
   width: 15em;
 }
 .heroes li {
-  cursor: pointer;
   position: relative;
-  left: 0;
+  cursor: pointer;
   background-color: #EEE;
   margin: .5em;
   padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
+
 .heroes li:hover {
   color: #607D8B;
   background-color: #DDD;
   left: .1em;
 }
-.heroes li.selected {
-  background-color: #CFD8DC;
-  color: white;
+
+.heroes a {
+  color: #333;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC;
-  color: white;
+
+.heroes a:hover {
+  color:#607D8B;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
@@ -39,6 +44,8 @@
   left: -1px;
   top: -4px;
   height: 1.8em;
+  min-width: 16px;
+  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }