1 files changed, 243 insertions, 0 deletions
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..ab458e3
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,243 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    margin-bottom: 42px;
+    background-color: #eee;
+}
+
+#main {
+    padding-top: 48px;
+}
+
+.spacer {
+    padding-top: 128px;
+}
+
+
+#player-box {
+    margin-bottom: 1.3em;
+}
+
+#player {
+    margin-bottom: 1em;
+}
+
+#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;
+}
+
+#player-playstop-overlay-inner {
+    width: 125px;
+    height: 125px;
+    position: absolute;
+    left: 25.5px;
+    top: 25.5px;
+    display: block;
+    background-image: url('/img/controls.png');
+    background-repeat: no-repeat;
+    background-position: 0 0; /* play button big */
+}
+
+#player-spinner-overlay {
+    width: 176px;
+    height: 176px;
+    position: absolute;
+    display: none;
+}
+
+#player-spinner-overlay-inner {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    left: 38px;
+    top: 38px;
+    display: block;
+}
+
+
+#player-ctrl {
+    margin-top: 0.3em;
+    width: 176px;
+    height: 36px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1.2em;
+    background-color: #434343;
+    padding-top: 0px;
+    padding-right: 8px;
+}
+
+#player-volume {
+    position: relative;
+    top: 3px;
+    right: -15px;
+    width: 100px;
+    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;
+}
+@-moz-document url-prefix() {
+    #player-volume {
+        top: 7px;
+    }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    #player-volume {
+        top: -8px;
+    }
+}
+@supports (-ms-ime-align: auto) {
+    #player-volume {
+        top: -8px;
+    }
+}
+
+#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: 100px;
+    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: 100px;
+    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: 100px;
+    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: 5px;
+    float: right;
+    width: 25px;
+    height: 25px;
+    background-image: url('/img/controls.png');
+    background-repeat: no-repeat;
+    background-position: -75px -150px; /* volume high */
+}
+
+#website a:hover {
+    text-decoration: underline;
+}
+
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2.3em;
+    padding-top: 0.3em;
+    background-color: #434343;
+    color: #ccc;
+}
+
+.footer img {
+    height: 1.4em;
+    border: 0;
+}
+
+.footer a {
+    color: #999;
+}
+
+.footer a:hover {
+    color: #fff;
+    text-decoration: none;
+}