1 files changed, 193 insertions, 14 deletions
diff --git a/contrib/site/style.css b/contrib/site/style.css
index f09f5c5..dc65fc7 100644
--- a/contrib/site/style.css
+++ b/contrib/site/style.css
@@ -54,6 +54,7 @@ td span a {
   font-size: 0.8em;
   text-decoration: none;
   padding: 0 0.2em;
+  white-space: nowrap;
 }
 
 td span a:hover {
@@ -64,20 +65,13 @@ td span.selected {
   font-weight: bold;
 }
 
-#video-overlay-inner {
-   background-image: url('images/play-big.png');
-   background-repeat: no-repeat;
-   background-position: center;
-   width: 100%;
-   height: 100%;
-}
-
-video {
-   background-image: url('images/elevate-turm.png');
-   background-repeat: no-repeat;
-   background-position: center;
-   width: 100%;
-   height: 100%;
+video, .turm {
+  background-color: #FFE924;
+  background-image: url('images/elevate-turm.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  height: 100%;
 }
 
 div#controls {
@@ -111,3 +105,188 @@ table#logos {
   background-color: rgba(51,51,51,0.4);
 }
 */
+
+
+
+
+
+
+/*
+helsinki player styles
+*/
+#player-box {
+    margin-bottom: 1.3em;
+}
+
+#player {
+    margin-bottom: 1em;
+}
+
+#player a {
+    color: black;
+}
+
+#player-playstop {
+    margin-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 176px;
+    height: 176px;
+}
+
+#player-playstop-overlay {
+    width: 176px;
+    height: 176px;
+    background-color: rgba(255,255,255,0.5);
+    position: absolute;
+    display: block;
+}
+
+#video-overlay-inner {
+    width: 125px;
+    height: 125px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: 0 0; /* play button big */
+}
+
+#player-ctrl {
+    margin-top: 0.3em;
+    width: 260px;
+    height: 32px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #434343;
+    padding: 10px;
+}
+
+#player-state {
+    position: relative;
+    top: 3px;
+    float: left;
+    width: 25px;
+    height: 25px;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: 0px -125px; /* play button */
+}
+
+#player-volume {
+    position: relative;
+    top: 2px;
+    right: -16px;
+    width: 150px;
+    background: transparent;
+    /*fix for FF unable to apply focus style bug */
+    /*    border: 1px solid #434343; */
+    border: none;
+    -webkit-appearance: none;
+    -webkit-box-shadow: none!important;
+    -moz-box-shadow: none!important;
+    box-shadow: none!important;
+}
+#player-volume:focus {
+    outline: none;
+    -webkit-box-shadow: none!important;
+    -moz-box-shadow: none!important;
+    box-shadow: none!important;
+}
+/* webkit based browser */
+#player-volume::-webkit-slider-runnable-track {
+    width: 150px;
+    height: 5px;
+    background: #888;
+    border: 0;
+    border-radius: 3px;
+}
+#player-volume:disabled::-webkit-slider-runnable-track {
+    background: #545454;
+}
+#player-volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+    margin-top: -5px;
+}
+#player-volume:disabled::-webkit-slider-thumb {
+    background: #656565;
+}
+/* mozilla firefox */
+#player-volume::-moz-range-track {
+    width: 150px;
+    height: 5px;
+    background: #888;
+    border: 0;
+    border-radius: 3px;
+}
+#player-volume:disabled::-moz-range-track {
+    background: #545454;
+}
+#player-volume::-moz-range-thumb {
+    border: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+}
+#player-volume:disabled::-moz-range-thumb {
+    background: #656565;
+}
+#player-volume::-moz-focus-outer {
+    border: 0;
+}
+/* microsoft browser */
+#player-volume::-ms-track {
+    width: 150px;
+    height: 5px;
+    background: transparent;
+    border-color: transparent;
+    border-width: 6px 0;
+    color: transparent;
+}
+#player-volume::-ms-fill-lower {
+    background: #888;
+    border-radius: 10px;
+}
+#player-volume:disabled::-ms-fill-lower {
+    background: #545454;
+}
+#player-volume::-ms-fill-upper {
+    background: #888;
+    border-radius: 10px;
+}
+#player-volume:disabled::-ms-fill-upper {
+    background: #545454;
+}
+#player-volume::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+}
+#player-volume:disabled::-ms-thumb {
+    background: #656565;
+}
+#player-volume::-ms-tooltip {
+    display: none;
+}
+
+#player-mute {
+    position: relative;
+    top: 3px;
+    float: right;
+    width: 25px;
+    height: 25px;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: -75px -150px; /* volume high */
+}