--- 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;
+}