some more design changes

[e-DoKo.git] / standard.css

diff --git a/standard.css b/standard.css
index ff055c888e4018464e2105cef22b4d2ec71f8dc3..3a08cbf6a059973dca88d6cb7ba0536ce3a59e12 100644 (file)
--- a/standard.css
+++ b/standard.css
@@ -1,29 +1,213 @@
-.trick 
+
+.trick
+{
+  position:relative;
+//  border: 1px solid green;
+  height:500px;
+  width:500px;
+}
+
+img
+{
+  height:80px;
+}
+
+.oldtrick
 {
+  position:relative;
   //border: 1px solid green;
-  clear:both;
+  height:280px;
+  width: 280px;
+  float:right;
+  clear:right;
 }
 
-.trick div div
+.oldtrick img
+{ 
+  height:50px;
+}
+
+.oldtrick div.table
+{
+  position:absolute;
+  height:180px;;
+  width:180px;
+  left:50px;
+  top:50px;
+  //border:1px solid black;
+}
+.trick div.table
+{
+  position:absolute;
+  
+  height:340px;;
+  width:340px;
+  left:80px;
+  top:80px;
+ // border:1px solid black;
+}
+
+div.card0>span
+{ 
+  position:absolute;
+  left:-70px;
+  //border:1px solid black;
+}
+
+div.card1>span
+{ 
+  position:absolute;
+  top:-30px;
+  //border:1px solid black;
+}
+
+
+div.card2>span
+{ 
+  position:absolute;
+  left:40px;
+ // border:1px solid black;
+}
+
+div.card3>span
+{ 
+  position:absolute;
+  bottom:-40px;
+  //border:1px solid black;
+}
+
+div.card0
+{
+  position:absolute;
+  top:50px;
+  left: 0px;
+  //border:2px solid;
+}
+div.card1
+{
+  position:absolute;
+  top:0px;
+  left:70px
+}
+div.card2
+{
+  position:absolute;
+  top:50px;
+  right:0px;
+  text-align:right;
+}
+div.card3
+{
+  position:absolute;
+
+  bottom:0px;
+  left:70px;
+}
+
+.trick div.card0
+{
+  position:absolute;
+  top:110px;
+  left: 0px;
+}
+.trick div.card1
+{
+  position:absolute;
+  top:0px;
+  left:140px
+}
+.trick div.card2
+{
+  position:absolute;
+  top:110px;
+  right:0px;
+  text-align:right;
+}
+.trick div.card3
+{
+  position:absolute;
+
+  bottom:0px;
+  left:140px;
+}
+
+.card2 span span
+{
+   position:relative;
+   left:-80px;
+}
+
+.card3 span span
+{ 
+  position:relative;
+  top:-40px;
+}
+
+span.comment
+{
+  text-decoration:underline;
+}
+
+.comment span span
+{
+  text-decoration:none;
+}
+
+/* hide comments */
+.table div span span
 {
   position: absolute;
-  width:    65px;
-  background-color: red;
+  width:    100px;
+  background-color: white;
+  border:1px solid black;
   display:  none;
 }
 
-.trick div
+.table div
 {
   float:left;
   margin-bottom:10px;
 }
 
-.trick div:hover div
+.table div:hover span span
 {
  display:block;
 }
 
-.comment
+
+/* background image for the table */
+.background0
+{
+   background:url(pics/stable0.png) no-repeat 60px 60px;
+}
+.background1
+{
+   background:url(pics/stable1.png) no-repeat 60px 60px;
+}
+.background2
+{
+   background:url(pics/stable2.png) no-repeat 60px 60px;
+}
+.background3
+{
+   background:url(pics/stable3.png) no-repeat 60px 60px;
+}
+
+div.back0
 {
-  background-color:green;
-}
\ No newline at end of file
+   background:url(pics/table0.png) no-repeat 100px 100px;
+}
+div.back1
+{
+   background:url(pics/table1.png) no-repeat 100px 100px;
+}
+div.back2
+{
+   background:url(pics/table2.png) no-repeat 100px 100px;
+}
+div.back3
+{
+   background:url(pics/table3.png) no-repeat 100px 100px;
+}
+
+