diff -r f4a03f8bc37a -r 458cc4576415 integration/css/theend.css
--- a/integration/css/theend.css	Fri Dec 21 15:45:10 2012 +0100
+++ b/integration/css/theend.css	Fri Jan 04 18:10:03 2013 +0100
@@ -47,26 +47,6 @@
     border-spacing: 0;
 }
 
-.clearfix:after {
-    content: ".";
-    display: block;
-    clear: both;
-    visibility: hidden;
-    line-height: 0;
-    height: 0;
-}
- 
-.clearfix {
-    display: inline-block;
-}
- 
-html[xmlns] .clearfix {
-    display: block;
-}
- 
-* html .clearfix {
-    height: 1%;
-}
 .clear{
     clear: both;
 }
@@ -78,17 +58,50 @@
 
 /* END RESET.CSS */
 
+/* FONTS */
+@font-face {
+    font-family: "arial_black";
+    src: url('arial_black-webfont.eot');
+    src: url('arial_black-webfont.eot?#iefix') format('embedded-opentype'),
+         url('arial_black-webfont.woff') format('woff'),
+         url('arial_black-webfont.ttf') format('truetype'),
+         url('arial_black-webfont.svg#arial_blackregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "arial_base";
+    src: url('arial_bold-webfont.eot');
+    src: url('arial_bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('arial_bold-webfont.woff') format('woff'),
+         url('arial_bold-webfont.ttf') format('truetype'),
+         url('arial_bold-webfont.svg#arialbold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: "arial_base";
+    src: url('arial-webfont.eot');
+    src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
+         url('arial-webfont.woff') format('woff'),
+         url('arial-webfont.ttf') format('truetype')
+         url('arial-webfont.svg#arialregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+/* END FONTS */
+
 fieldset, img, button {
     border: none;
 }
 
 body {
-    font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif;
+    font-family: "arial_base", sans-serif;
     background-color: black; font-size: 12px;
     overflow: hidden;
 }
 h1 {
-    font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif;  
+    font-family: "arial_black", sans-serif;  
     font-size: 43px;
     color: #ffffff;
     text-transform: uppercase;
@@ -162,7 +175,7 @@
 footer ul {
     margin: 0;
 
-    font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; 
+    font-weight: bold; 
     font-size: 9px;
     color: #b9b9b9;
     text-transform: uppercase;
@@ -215,7 +228,7 @@
 }
 .float_sequence  li {
     display: inline-block;
-    margin: 0 3px;
+    margin: 0 6px;
 }
 .float_sequence  li a {
     display: inline-block;
@@ -224,7 +237,7 @@
     width: 100%;
     margin-bottom: 9px;
 
-    font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif;  
+    font-family: "arial_black", sans-serif;  
     font-size: 16px;
     color: #777777;
 }
@@ -235,7 +248,7 @@
 #title_sequence a:link,
 #title_sequence a:visited,
 #title_sequence a:active{
-    font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif;  
+    font-family: "arial_black", sans-serif;  
     font-size: 16px;
     color: #777777;
 }
@@ -250,15 +263,14 @@
 }
 #tag_sequence {
     margin-right: 209px;
-    
-    font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif;  
     font-size: 13px;
+    font-weight: bold;
 }
 /*----------------------------------------------*/
 /*  Search/Tag          */
 /*----------------------------------------------*/
 input {
-    font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; 
+    font-family: "arial_base", sans-serif; 
     font-size: 13px;
     color: #000000;
     height: 24px;
@@ -284,7 +296,6 @@
 input[type=submit] {
     width: 33px;
     background-color: #636363;
-    font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; 
     font-weight: bold;
     font-size: 15px;
     text-align: center;
@@ -322,7 +333,7 @@
     background: none;
 }
 #controlContainer{
-overflow: hidden;
+    overflow: hidden;
 }
 #controlbar {
     position: absolute;
@@ -330,73 +341,55 @@
     left: 0;
     right: 0;
     height: 50px;
-}
-.container_hcentering {
-    margin: 0 auto;
-    width: 620px;
+    text-align: center;
+    font-size: 0;
+    white-space: nowrap;
 }
 #progressContainer {
     width: 240px;
     padding-top: 8px;
-    margin: 0 16px;  
-}
- /* 
-    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all 0.3s ease-in-out;
-    -o-transition: all 0.3s ease-in-out;    
-    transition: all 0.3s ease-in-out;
+    margin: 0 16px;
+    display: inline-block;
+    font-size: 10px;
 }
-footer:hover #controlbar {
-    bottom: 0;
-}
-*/
-.progress_bar {
-    height: 5px;
-    border-radius: 2px;
-}
+
 #progressBar {
     position: relative;
     z-index: 1;
     width: 240px;
-    background: #cccccc; border: none;
+    background: #777777; border: none;
+    height: 5px;
+    border-radius: 2px;
 }
 
 #progressBar .ui-slider-handle {
-    background: transparent url(../img/controls.png) no-repeat top left;
-    width: 21px; 
-    height: 22px;
+    width: 12px; 
+    height: 12px;
+    background: #000000;
+    border-radius: 2px;
+    border: 2px solid #777777;
+    -moz-box-shadow: 0 0 5px 3px #000000;
+    -webkit-box-shadow: 0 0 5px 3px #000000;
+    box-shadow: 0 0 5px 3px #000000;
     background-position: -72px 0;
-    margin-left: -10px;
+    margin-left: -8px;
     margin-top: -2px;
-    border: none;
-    border-radius: 0;
-    padding: 0;
     cursor: hand;
-    /*
-     * width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; top: -4px;
-     */
 }
 
 #progressBar .ui-slider-range {
-    background: #777777; border: none;
-}
-
-#progressBar .ui-slider-handle.pause {
-    background-position: -72px -22px;
-}
-
-#progressBar a.ui-state-focus {
-    border: none;
+    background: #ffffff; border: none;
+    border-radius: 2px;
 }
 
 #btnPlayPause {
-    width: 21px; 
-    height: 22px;
-    background-position: -72px 0;
+    width: 16px; 
+    height: 18px;
+    background-position: -77px 0;
     margin-top: 2px;
 }
 #btnPlayPause.pause {
-    background-position: -72px -22px;
+    background-position: -77px -17px;
 }
 
 footer ul#progressTime{
@@ -410,7 +403,7 @@
 
 .btn, .sdhdbtn {
     background: transparent url(../img/controls.png) no-repeat top left;
-    float: left;
+    display: inline-block; vertical-align: top;
 }
 
 .btn, .sdhdgroup {
@@ -419,7 +412,7 @@
 
 .sdhdgroup {
     margin-top: 5px;
-    float: left;
+    display: inline-block; vertical-align: top;
 }
 
 .sdhdbtn {
@@ -507,3 +500,38 @@
     height: 46px; min-height: 46px; max-height: 46px; text-align: center;
     overflow: hidden; vertical-align: middle;
 }
+
+/* ARROWS */
+
+.arrow {
+    position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; background: url(../img/arrows.png);
+    cursor: pointer;
+}
+
+.arrow_left {
+    left: 0; top: 50%; margin-left: 0; background-position: top left;
+}
+
+.arrow_right {
+    right: 0; top: 50%; margin-left: 0; background-position: top right;
+}
+
+.arrow_top {
+    top: 0; left: 50%; margin-top: 0; background-position: bottom left;
+}
+
+.arrow_bottom {
+    bottom: 0; left: 50%; margin-top: 0; background-position: bottom right;
+}
+
+/* AUTOCOMPLETE */
+
+.ui-autocomplete {
+    max-height: 100px;
+    max-width: 170px;
+    overflow: auto;
+}
+.home .ui-autocomplete {
+    max-width: 210px;
+    max-height: 500px;
+}