css/playscreen.css
changeset 11 9833f3e24105
parent 9 5b743d461f99
child 17 8ee8c9ea2a9f
--- a/css/playscreen.css	Tue Mar 19 12:27:34 2013 +0100
+++ b/css/playscreen.css	Thu Mar 21 18:48:12 2013 +0100
@@ -16,20 +16,31 @@
 }
 
 .play-block {
-    width: 248px; height: 30px;
+    width: 402px; height: 30px;
+}
+
+.play-button, .next-button {
+    float: left; width: 30px; margin: 5px; font-size: 18px;
+    line-height: 20px; height: 20px; cursor: pointer;
 }
 
-.play-button {
-    float: left; margin: 5px; font-size: 18px;
-    line-height: 20px;
+.duration, .time-separator, .current-time {
+    float: left; height: 30px;
+    font-size: 20px; line-height: 30px;
 }
 
-.duration {
-    float: right; font-size: 20px; margin: 0 8px; line-height: 30px;
+.time-separator {
+	width: 10px; text-align: center;
+}
+.duration, .current-time {
+	width: 140px; margin: 0 8px;
+}
+.current-time {
+	text-align: right; color: #CCCCCC;
 }
 
 .explain-block {
-    width: 494px; height: 30px; padding: 0 5px;
+    width: 340px; height: 30px; padding: 0 5px;
 }
 
 .keyword-search {
@@ -50,11 +61,7 @@
 }
 
 .play-bottom {
-    position: absolute; top: 86px; bottom: 8px; overflow: hidden; width: 100%;
-}
-
-.play-dataviz {
-    float: left; height: 672px; width: 100%; position: relative; margin-left: 8px; overflow: hidden;
+    position: absolute; left: 8px; top: 86px; bottom: 8px; right: 8px; overflow: hidden;
 }
 
 .play-svg {
@@ -129,3 +136,15 @@
 	margin-top: 10px;
 }
 
+.local-position, .global-position {
+	position: absolute; height: 1px;
+	background: #FF00FC;
+}
+
+.global-position {
+	left: 0; width: 125px;
+}
+
+.local-position {
+	left: 155px; width: 215px;
+}