--- a/css/socialmedia.css	Fri Feb 15 12:23:01 2013 +0100
+++ b/css/socialmedia.css	Fri Feb 15 18:34:43 2013 +0100
@@ -1,12 +1,16 @@
 @font-face {
     font-family: "DIN-Mittelschrift";
-    src: url('../font/DINMittelschriftSTD.woff') format('woff');
+    src: url('../font/DINMittelschriftStd.woff') format('woff');
  }
 
 body {
     font-family: "DIN-Mittelschrift", Arial, sans-serif
 }
 
+.contents {
+    position: absolute; width: 100%; height: 100%; background: #000; color: #fff;
+}
+
 .start-head, .start-second-line {
     clear: both;
 }
@@ -16,7 +20,7 @@
 }
 
 .title-block {
-    float: left; width: 266px; margin: 0 0 8px 8px;
+    float: left; width: 248px; margin: 0 0 8px 8px;
 }
 
 .start-head h1 {
@@ -24,12 +28,12 @@
 }
 
 .play-block {
-    width: 242px; height: 66px;
+    width: 248px; height: 66px;
 }
 
 .play-button {
-    float: left; margin: 8px; font-size: 38px; color: #fff;
-    background: #aaa; border-radius: 5px; padding: 0 8px 0 10px; 
+    float: left; margin: 8px; font-size: 38px;
+    background: #aaa; padding: 0 8px 0 10px; 
     line-height: 50px;
 }
 
@@ -38,23 +42,23 @@
 }
 
 .explain-block {
-    width: 492px; height: 66px;
+    width: 494px; height: 66px; padding: 0 5px;
 }
 
 .explain-block h3 {
-    text-align: center; font-size: 18px; line-height: 66px;
+    font-size: 18px; line-height: 32px;
+}
+
+.keyword-search {
+    line-height: 26px; padding: 0 5px; border: 1px solid #999; width: 300px; font-size: 18px;
 }
 
 .shadow-block {
-    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: 0 8px 8px 0;
+    float: left; background: #333333; /*box-shadow: 1px 1px 2px #000;*/ margin: 0 8px 8px 0;
 }
 
 .description-block {
-    width: 242px; height: 166px;
+    width: 240px; height: 166px; margin-left: 8px;
 }
 
 .description-block p {
@@ -62,28 +66,36 @@
 }
 
 .topwords-block {
-    width: 486px; height: 166px; overflow: hidden; text-align: center; padding-right: 6px;
+    width: 754px; height: 166px; overflow: hidden; padding-right: 6px;
 }
 
-.topwords-block li, .topic-words li {
+.topwords-list {
+    
+}
+
+.topwords-list li, .topic-words li {
     display: inline-block; background: #999; color: #fff; padding: 0 6px; margin: 6px 0 0 6px;
-    font-size: 14px; border-radius: 4px; line-height: 26px;
+    font-size: 14px; line-height: 26px;
 }
 
 .topwords-block li {
     cursor: pointer;
 }
 
-.topwords-block li.selected {
+.topwords-block li:hover, .topwords-block li.selected, .topic-words li.selected {
     color: #000000; background: #FFFFFF;
 }
 
+.topwords-block li.selected:hover {
+    background: #999; color: #fff;
+}
+
 .start-bottom {
     position: absolute; top: 256px; bottom: 0; overflow: hidden; width: 100%;
 }
 
 .start-dataviz {
-    float: left; height: 100%; width: 266px; position: relative;
+    float: left; height: 100%; width: 240px; position: relative; margin-left: 8px;
 }
 
 .start-svg {
@@ -91,13 +103,17 @@
 }
 
 .topics-block {
-    float: left; width: 750px; padding-left: 8px;
+    float: left; width: 768px; padding-left: 8px;
 }
 
 .topic-column {
-    float: left; width: 250px;
+    float: left; width: 256px;
 }
 
 .topic {
-    width: 236px; text-align: center; padding: 0 6px 6px 0; cursor: pointer; background: #F0f0f0;
+    width: 242px; padding: 0 6px 6px 0; cursor: pointer; background: #333333;
 }
+
+.highlight {
+    color: #333333; background: #ffff00;
+}