timeline/css/timeline.css
changeset 68 4def147b1604
parent 67 5d1ac260d3ee
child 70 43012525c832
--- a/timeline/css/timeline.css	Thu May 24 19:02:39 2012 +0200
+++ b/timeline/css/timeline.css	Fri May 25 16:32:31 2012 +0200
@@ -1,5 +1,5 @@
 .Tl-Main {
-    border: 1px solid #ccc;
+    overflow: hidden; border: 1px solid #ccc;
 }
 
 .Tl-TopBar {
@@ -72,7 +72,7 @@
 }
 
 .Tl-MainPart {
-    position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid #ccc; right: 0; top: 0; bottom: 0; overflow: hidden;
+    position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid #ccc; right: 0; top: 0; bottom: 0;
 }
 
 .Tl-UniversLabels {
@@ -104,7 +104,15 @@
 }
 
 .Tl-Occurrence, .Tl-Cluster {
-    position: absolute; width: 19px; height: 22px; background: url(../img/sprites.png); margin-left: -9px; margin-top: -1px; cursor: pointer;
+    width: 19px; height: 22px; background: url(../img/sprites.png); cursor: pointer;
+}
+
+.Tl-OccOnGrid, .Tl-Cluster {
+    position: absolute; margin-left: -9px; margin-top: -1px;
+}
+
+.Tl-OccInCluster {
+    float: left;
 }
 
 .Tl-Occnarrative {
@@ -132,6 +140,10 @@
     padding: 1px 2px; font-size: 9px; color: #ffffff; border-radius: 5px;
 }
 
+.Tl-ClusterOverlay {
+    position: absolute; margin-top: -20px; height: 30px; background: url(../img/cluster-overlay.png) center;
+}
+
 .Tl-Overlay-Container {
     position: absolute; top: 0;
 }
@@ -141,13 +153,37 @@
 }
 
 .Tl-Overlay {
-    position: absolute; left: -105px; bottom: 0; width: 210px;
+    position: absolute; left: -105px; width: 210px;
+}
+
+.Tl-Overlay-Up .Tl-Overlay {
+     bottom: 0;
+}
+
+.Tl-Overlay-Down .Tl-Overlay {
+     top: 22px;
 }
 
 .Tl-Overlay-Main {
-    width: 190px; padding: 10px 10px 0; background: url(../img/tooltip.png) top;
+    width: 190px;
+}
+
+.Tl-Overlay-Up .Tl-Overlay-Main {
+    background: url(../img/tooltip.png) top; padding: 10px 10px 0;
+}
+
+.Tl-Overlay-Down .Tl-Overlay-Main {
+    background: url(../img/tooltip-down.png) bottom; padding: 0 10px 10px;
 }
 
-.Tl-Overlay-Tip {
+.Tl-Overlay-Up .Tl-Overlay-Tip-Bottom  {
     width: 210px; height: 20px; background: url(../img/tooltip.png) bottom;
 }
+
+.Tl-Overlay-Down .Tl-Overlay-Tip-Top {
+    width: 210px; height: 20px; background: url(../img/tooltip-down.png) top;
+}
+
+.Tl-Overlay-Up .Tl-Overlay-Tip-Top, .Tl-Overlay-Down .Tl-Overlay-Tip-Bottom {
+    display: none;
+}