diff --git a/css/events.scss b/css/events.scss
index beb57a9..7fc3934 100644
--- a/css/events.scss
+++ b/css/events.scss
@@ -24,6 +24,10 @@ $eventItemW: 40px;
     text-align: center;
     vertical-align: baseline;
     width: $eventItemW + 2 * $eventItemP;
+
+    &.active .event-year {
+        display: none;
+    }
 }
 
 .event-year {
@@ -47,11 +51,7 @@ $eventItemW: 40px;
 }
 
 .event-item:hover  {
-    // filter: grayscale(0%);
-    // opacity: 0.8;
-
     .event-year {
-        // top: -$eventItemH;
         opacity: 0;
     }
 }
diff --git a/css/rounds.scss b/css/rounds.scss
index 911bd30..24fc4ee 100644
--- a/css/rounds.scss
+++ b/css/rounds.scss
@@ -20,14 +20,18 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
     line-height: $roundH;
     margin-top: 5px;
     opacity: 0.2;
-}
 
-.round-item.active {
-    opacity: 1;
-}
+    &:hover {
+        opacity: 0.6;
+    }
 
-.round-item:hover {
-    background: yellow;
+    &.active {
+        opacity: 1;
+
+        .round-icon {
+            visibility: visible;
+        }
+    }
 }
 
 .round-text {
@@ -47,9 +51,9 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
 }
 
 .round-icon {
-    display: inline-block;
     height: $iconW;
     margin: ($roundH - $iconW) / 2 $iconM;
     vertical-align: top;
+    visibility: hidden;
     width: $iconW;
 }
diff --git a/css/sort.scss b/css/sort.scss
index bac19f8..9477c26 100644
--- a/css/sort.scss
+++ b/css/sort.scss
@@ -19,15 +19,20 @@ $iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;
     font-size: 0;
     line-height: $sortH;
     margin-bottom: 5px;
+    opacity: 0.2;
     width: $sortW;
-}
 
-.sort-item:hover {
-    background: yellow;
-}
+    &:hover {
+        opacity: 0.6;
+    }
 
-.sort-item.active {
-    background: red;
+    &.active {
+        opacity: 1;
+
+        .sort-icon {
+            visibility: visible;
+        }
+    }
 }
 
 .sort-text {
@@ -50,9 +55,9 @@ $iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;
 }
 
 .sort-icon {
-    display: inline-block;
     height: $iconW;
     margin: ($sortH - $iconW) / 2 $iconM;
     vertical-align: top;
+    visibility: hidden;
     width: $iconW;
 }
diff --git a/css/style.css b/css/style.css
index 6dedcd5..3627c99 100644
--- a/css/style.css
+++ b/css/style.css
@@ -28,6 +28,8 @@ body {
   text-align: center;
   vertical-align: baseline;
   width: 48px; }
+  .event-item.active .event-year {
+    display: none; }
 
 .event-year {
   background: #fff;
@@ -102,13 +104,14 @@ body {
   font-size: 0;
   line-height: 40px;
   margin-bottom: 5px;
+  opacity: 0.2;
   width: 200px; }
-
-.sort-item:hover {
-  background: yellow; }
-
-.sort-item.active {
-  background: red; }
+  .sort-item:hover {
+    opacity: 0.6; }
+  .sort-item.active {
+    opacity: 1; }
+    .sort-item.active .sort-icon {
+      visibility: visible; }
 
 .sort-text {
   display: inline-block;
@@ -128,10 +131,10 @@ body {
   width: 50px; }
 
 .sort-icon {
-  display: inline-block;
   height: 18px;
   margin: 11px 5px;
   vertical-align: top;
+  visibility: hidden;
   width: 18px; }
 .schemes {
   font-size: 0;
@@ -180,12 +183,12 @@ body {
   line-height: 40px;
   margin-top: 5px;
   opacity: 0.2; }
-
-.round-item.active {
-  opacity: 1; }
-
-.round-item:hover {
-  background: yellow; }
+  .round-item:hover {
+    opacity: 0.6; }
+  .round-item.active {
+    opacity: 1; }
+    .round-item.active .round-icon {
+      visibility: visible; }
 
 .round-text {
   display: inline-block;
@@ -202,8 +205,8 @@ body {
   width: 50px; }
 
 .round-icon {
-  display: inline-block;
   height: 18px;
   margin: 11px 5px;
   vertical-align: top;
+  visibility: hidden;
   width: 18px; }
diff --git a/index.html b/index.html
index a79271b..27d6ad4 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,7 @@
         1974 two germanies?
         update ribbon hover
         // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
+        No finals in 1954 or 1962
 
         change initState to `foo = foo || "default"`
         color scheme pane
diff --git a/js/bundle.js b/js/bundle.js
index 0730c3f..e21f270 100644
--- a/js/bundle.js
+++ b/js/bundle.js
@@ -719,6 +719,7 @@
 	        var ribbons = document.querySelectorAll('.ribbon');
 	        ribbons.forEach(function (ribbon) {
 	            var name = allRounds[ribbon.getAttribute("data-round-id")];
+	            console.warn(name);
 	            var type = UI.getRoundType(name);
 
 	            roundsToShow.indexOf(type) === -1 ? ribbon.style.display = 'none' : ribbon.style.display = 'inline';
diff --git a/js/ui.js b/js/ui.js
index 41af7e3..d77c043 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -137,6 +137,7 @@ const UI = {
         const ribbons = document.querySelectorAll('.ribbon');
         ribbons.forEach(ribbon => {
             const name = allRounds[ribbon.getAttribute("data-round-id")];
+            console.warn(name)
             const type = UI.getRoundType(name);
 
             roundsToShow.indexOf(type) === -1