From 55f544dd14430b29d1ed4f20b6bb183e1dfec854 Mon Sep 17 00:00:00 2001
From: "Hilmer, Carsten" <carsten_hilmer@hilmerarts.de>
Date: Thu, 8 Sep 2016 09:19:22 +0200
Subject: [PATCH] Style-sheets angepasst Typen

---
 www/css/custom_style.css                      | 1104 ++---------------
 .../pokemonliste/html/pokemon-list.html       |    4 +-
 www/test.html                                 |   67 +
 3 files changed, 171 insertions(+), 1004 deletions(-)
 create mode 100644 www/test.html

diff --git a/www/css/custom_style.css b/www/css/custom_style.css
index fa4d87e..e58d601 100644
--- a/www/css/custom_style.css
+++ b/www/css/custom_style.css
@@ -40,703 +40,108 @@ md-input-container {
     text-align: center;
 }
 
-.pokemontyp1 {
+
+/* Typ Pflanze */
+.pokemontyp1{
+    background-color: #78C850;
+}
+/* Typ Feuer */
+.pokemontyp2{
+    background-color: #F08030;
+}
+/* Typ Wasser */
+.pokemontyp3{
+    background-color: #6890F0;
+}
+/* Typ Käfer */
+.pokemontyp4{
+    background-color: #A8B820;
+}
+/* Typ Normal */
+.pokemontyp5{
+    background-color: #A8A878;
+}
+/* Typ Gift */
+.pokemontyp6{
+    background-color: #A040A0;
+}
+/* Typ Elektro */
+.pokemontyp7{
+    background-color: #F8D030;
+}
+/* Typ Boden */
+.pokemontyp8{
+    background-color: #E0C068;
+}
+/* Typ Fee */
+.pokemontyp9{
+    background-color: #FF79E7;
+}
+/* Typ Kampf */
+.pokemontyp10{
+    background-color: #C03028;
+}
+/* Typ Psycho */
+.pokemontyp11{
+    background-color: #F85888;
+}
+/* Typ Gestein */
+.pokemontyp12{
+    background-color: #B8A038;
+}
+/* Typ Geist */
+.pokemontyp13{
+    background-color: #705898;
+}
+/* Typ Eis */
+.pokemontyp14{
+    background-color: #98D8D8;
+}
+/* Typ Drache */
+.pokemontyp15{
+    background-color: #7038F8;
+}
+/* Typ Unlicht */
+.pokemontyp16{
+    background-color: #705848;
+}
+/* Typ Stahl */
+.pokemontyp18{
+    background-color: #B8B8D0;
+}
+/* Typ Flug */
+.pokemontyp18{
+    background-color: #A890F0;
+}
+
+.pokemontypsx {
     display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #D50000;
-    color: white;
-}
-
-.pokemontyp1 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp2 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #C51162;
-    color: white;
-}
-
-.pokemontyp2 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp3 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #AA00FF;
-    color: white;
-}
-
-.pokemontyp3 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp4 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #6200EA;
-    color: white;
-}
-
-.pokemontyp4 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp5 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #304FFE;
-    color: white;
-}
-
-.pokemontyp5 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp6 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #2962FF;
-    color: white;
-}
-
-.pokemontyp6 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp7 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #0091EA;
-    color: white;
-}
-
-.pokemontyp7 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp8 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #00B8D4;
-    color: white;
-}
-
-.pokemontyp8 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp9 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #00BFA5;
-    color: white;
-}
-
-.pokemontyp9 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp10 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #1B5E20;
-    color: white;
-}
-
-.pokemontyp10 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp11 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #33691E;
-    color: white;
-}
-
-.pokemontyp11 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp12 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #827717;
-    color: white;
-}
-
-.pokemontyp12 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp13 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #F57F17;
-    color: white;
-}
-
-.pokemontyp13 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp14 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #FF6F00;
-    color: white;
-}
-
-.pokemontyp14 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp15 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #E65100;
-    color: white;
-}
-
-.pokemontyp15 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp16 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #BF360C;
-    color: white;
-}
-
-.pokemontyp16 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp17 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #3E2723;
-    color: white;
-}
-
-.pokemontyp17 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.pokemontyp18 {
-    display: inline-block;
-    padding: 0 25px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    border-radius: 25px;
-    background-color: #212121;
-    color: white;
-}
-
-.pokemontyp18 img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-
-.pokemontyp1sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #D50000;
-    color: white;
-}
-
-.pokemontyp1sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp2sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #C51162;
-    color: white;
-}
-
-.pokemontyp2sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp3sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #AA00FF;
-    color: white;
-}
-
-.pokemontyp3sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp4sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #6200EA;
-    color: white;
-}
-
-.pokemontyp4sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp5sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #304FFE;
-    color: white;
-}
-
-.pokemontyp5sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp6sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #2962FF;
-    color: white;
-}
-
-.pokemontyp6sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp7sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #0091EA;
-    color: white;
-}
-
-.pokemontyp7sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp8sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #00B8D4;
-    color: white;
-}
-
-.pokemontyp8sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp9sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #00BFA5;
-    color: white;
-}
-
-.pokemontyp9sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp10sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #1B5E20;
-    color: white;
-}
-
-.pokemontyp10sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp11sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #33691E;
-    color: white;
-}
-
-.pokemontyp11sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp12sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #827717;
-    color: white;
-}
-
-.pokemontyp12sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp13sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #F57F17;
-    color: white;
-}
-
-.pokemontyp13sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp14sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #FF6F00;
-    color: white;
-}
-
-.pokemontyp14sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp15sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #E65100;
-    color: white;
-}
-
-.pokemontyp15sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp16sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #BF360C;
-    color: white;
-}
-
-.pokemontyp16sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp17sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #3E2723;
-    color: white;
-}
-
-.pokemontyp17sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp18sm {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 10px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #212121;
-    color: white;
-}
-
-.pokemontyp18sm img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp1sx {
-    display: inline-block;
-    padding: 0 25px;
+    padding: 0 10px;
     height: 16px;
     font-size: 8px;
     line-height: 16px;
     border-radius: 5px;
-    background-color: #D50000;
+    color: white;
+}
+.pokemontypsx img {
+    float: left;
+    margin: 0 5px 0 -10px;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+}
+
+.pokemontypsm {
+    display: inline-block;
+    padding: 0 25px;
+    height: 16px;
+    font-size: 10px;
+    line-height: 16px;
+    border-radius: 5px;
     color: white;
 }
 
-.pokemontyp1sx img {
+.pokemontypsm img {
     float: left;
     margin: 0 10px 0 -25px;
     height: 16px;
@@ -744,325 +149,20 @@ md-input-container {
     border-radius: 50%;
 }
 
-.pokemontyp2sx {
+.pokemontypnor {
     display: inline-block;
     padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #C51162;
+    height: 22px;
+    font-size: 16px;
+    line-height: 22px;
+    border-radius: 6px;
     color: white;
 }
 
-.pokemontyp2sx img {
+.pokemontypnor img {
     float: left;
     margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp3sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #AA00FF;
-    color: white;
-}
-
-.pokemontyp3sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp4sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #6200EA;
-    color: white;
-}
-
-.pokemontyp4sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp5sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #304FFE;
-    color: white;
-}
-
-.pokemontyp5sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp6sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #2962FF;
-    color: white;
-}
-
-.pokemontyp6sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp7sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #0091EA;
-    color: white;
-}
-
-.pokemontyp7sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp8sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #00B8D4;
-    color: white;
-}
-
-.pokemontyp8sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp9sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #00BFA5;
-    color: white;
-}
-
-.pokemontyp9sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp10sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #1B5E20;
-    color: white;
-}
-
-.pokemontyp10sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp11sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #33691E;
-    color: white;
-}
-
-.pokemontyp11sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp12sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #827717;
-    color: white;
-}
-
-.pokemontyp12sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp13sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #F57F17;
-    color: white;
-}
-
-.pokemontyp13sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp14sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #FF6F00;
-    color: white;
-}
-
-.pokemontyp14sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp15sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #E65100;
-    color: white;
-}
-
-.pokemontyp15sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp16sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #BF360C;
-    color: white;
-}
-
-.pokemontyp16sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp17sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #3E2723;
-    color: white;
-}
-
-.pokemontyp17sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-}
-
-.pokemontyp18sx {
-    display: inline-block;
-    padding: 0 25px;
-    height: 16px;
-    font-size: 8px;
-    line-height: 16px;
-    border-radius: 5px;
-    background-color: #212121;
-    color: white;
-}
-
-.pokemontyp18sx img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 16px;
-    width: 16px;
+    height: 22px;
+    width: 22px;
     border-radius: 50%;
 }
\ No newline at end of file
diff --git a/www/templates/pokemonliste/html/pokemon-list.html b/www/templates/pokemonliste/html/pokemon-list.html
index 41d0547..4509f48 100644
--- a/www/templates/pokemonliste/html/pokemon-list.html
+++ b/www/templates/pokemonliste/html/pokemon-list.html
@@ -100,11 +100,11 @@
                 <div class="col-75">
                     <h4>{{ pokemon.pokemonname }}</h4>
                     <h5>Pokedex-Id: {{ pokemon.pokedexidString }}</h5>
-                    <div ng-if="pokemon.pokemontypa > 0" class="pokemontyp{{ pokemon.pokemontypa }}">
+                    <div ng-if="pokemon.pokemontypa > 0" class="pokemontypnor pokemontyp{{ pokemon.pokemontypa }}">
                         <img src="img/typbilder/{{ pokemon.pokemontypa }}.png" alt="PokemonTyp" width="32" height="32">
                         {{ pokemon.pokemontypaString }}
                     </div>
-                    <div ng-if="pokemon.pokemontypb > 0" class="pokemontyp{{ pokemon.pokemontypb }}">
+                    <div ng-if="pokemon.pokemontypb > 0" class="pokemontypnor pokemontyp{{ pokemon.pokemontypb }}">
                         <img src="img/typbilder/{{ pokemon.pokemontypb }}.png" alt="PokemonTyp" width="32" height="32">
                         {{ pokemon.pokemontypbString }}
                     </div>
diff --git a/www/test.html b/www/test.html
new file mode 100644
index 0000000..61ff168
--- /dev/null
+++ b/www/test.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<!--head section This is a place of all reference of css and javascript lib-->
+<head>
+    <!-- Meta section -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <meta name="format-detection" content="telephone=no"> <!-- To disable phone number typing.-->
+    <!-- end Meta section -->
+    <title></title>
+    <!-- Font reference section -->
+    <link href="lib/robotodraft/robotodraft.css">
+    <!-- end Font reference section -->
+
+    <!-- CSS reference section -->
+    <link rel="stylesheet" href="css/ionic.app.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/custom_style.css">
+    <link rel="stylesheet prefetch" href="lib/angular-material/angular-material.css">
+    <link rel="stylesheet" href="lib/font-awesome-4.4.0/css/font-awesome.css">
+    <!-- end CSS reference section -->
+
+    <!-- Ionic javascript lib -->
+    <script src="lib/ionic/js/ionic.bundle.js"></script>
+    <!-- end Ionic javascript lib -->
+
+    <!-- Angular javascript lib -->
+    <script src="lib/angular-messages/angular-messages.js"></script>
+    <script src="lib/angular-aria/angular-aria.js"></script>
+    <script src="lib/angular-material/angular-material.js"></script>
+    <!-- end Angular javascript lib -->
+
+    <!-- Cordova script (this will be a 404 during development) -->
+    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
+    <script src="cordova.js"></script>
+    <!-- end Cordova script -->
+
+    <!--ionic framework ngIOS9UIWebViewPatch-->
+    <!--Learn more about ngIOS9UIWebViewPatch at : http://blog.ionic.io/ios-9-potential-breaking-change/-->
+    <script src="lib/ngIOS9UIWebViewPatch/angular-ios9-uiwebview.patch.js"></script>
+    <!--end ionic framework ngIOS9UIWebViewPatch-->
+    <!-- end CSS reference section -->
+    <!-- end jQuery section-->
+
+</head><!-- end head section-->
+
+<!--body section-->
+<body>
+
+    <div class="pokemontypnor pokemontyp18">
+        <img src="img/typbilder/1.png" alt="PokemonTyp" width="32" height="32">
+         Unlicht
+    </div>
+
+    <div class="pokemontypsm pokemontyp1">
+        <img src="img/typbilder/1.png" alt="PokemonTyp" width="32" height="32">
+         Unlicht
+    </div>
+
+    <div class="pokemontypsx pokemontyp18">
+        <img src="img/typbilder/1.png" alt="PokemonTyp" width="32" height="32">
+         Unlicht
+    </div>
+
+</body><!-- end body section-->
+</html>
\ No newline at end of file