diff -r 1f574d93e195 -r 0d947d167ec5 css/socialmedia.css
--- a/css/socialmedia.css	Mon Feb 04 18:54:17 2013 +0100
+++ b/css/socialmedia.css	Thu Feb 07 17:14:46 2013 +0100
@@ -1,13 +1,22 @@
+@font-face {
+    font-family: "DIN-Mittelschrift";
+    src: url('../font/DINMittelschriftSTD.woff') format('woff');
+ }
+
 body {
-    font-family: "DIN 1451 Std Mittelschrift", Arial, sans-serif
+    font-family: "DIN-Mittelschrift", Arial, sans-serif
 }
 
 .start-head, .start-second-line {
     clear: both;
 }
 
+.start-head {
+    margin-top: 8px;
+}
+
 .title-block {
-    float: left; width: 258px; margin: 8px 0 0 8px;
+    float: left; width: 266px; margin: 0 0 8px 8px;
 }
 
 .start-head h1 {
@@ -37,11 +46,11 @@
 }
 
 .shadow-block {
-    float: left; background: #DDDDDD; box-shadow: 1px 1px 2px #000; margin: 8px 0 0 8px;
+    float: left; background: #DDDDDD; box-shadow: 1px 1px 2px #000; margin: 0 8px 8px 0;
 }
 
 .video-block {
-    float: left; background: #000000; width: 266px; height: 166px; margin-top: 8px;
+    float: left; background: #000000; width: 266px; height: 166px; margin: 0 8px 8px 0;
 }
 
 .description-block {
@@ -53,23 +62,36 @@
 }
 
 .topwords-block {
-    width: 492px; height: 166px; overflow: hidden; text-align: center;
+    width: 486px; height: 166px; overflow: hidden; text-align: center; padding-right: 6px;
 }
 
 .topwords-block li, .topic-words li {
-    display: inline-block; background: #999; color: #fff; padding: 6px; margin: 6px 0 0 6px; font-size: 14px; border-radius: 4px;
+    display: inline-block; background: #999; color: #fff; padding: 0 6px; margin: 6px 0 0 6px;
+    font-size: 14px; border-radius: 4px; line-height: 26px;
+}
+
+.topwords-block li {
+    cursor: pointer;
+}
+
+.topwords-block li.selected {
+    color: #000000; background: #FFFFFF;
 }
 
 .start-bottom {
-    position: absolute; top: 248px; bottom: 0; overflow: hidden;
+    position: absolute; top: 256px; bottom: 0; overflow: hidden; width: 100%;
 }
 
 .start-dataviz {
-    float: left; height: 100%; width: 266px;
+    float: left; height: 100%; width: 266px; position: relative;
+}
+
+.start-svg {
+    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
 }
 
 .topics-block {
-    float: left; width: 750px;
+    float: left; width: 750px; padding-left: 8px;
 }
 
 .topic-column {
@@ -77,5 +99,5 @@
 }
 
 .topic {
-    width: 242px; text-align: center;
+    width: 236px; text-align: center; padding: 0 6px 6px 0; cursor: pointer; background: #F0f0f0;
 }