+/* HeroesComponent's private CSS styles */
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+}
+.heroes li {
+ position: relative;
+ 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 a {
+ color: #333;
+ text-decoration: none;
+ position: relative;
+ display: block;
+ width: 250px;
+}
+
+.heroes a:hover {
+ color:#607D8B;
+}
+
+.heroes .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color:#405061;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ min-width: 16px;
+ text-align: right;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}