CLEANUP: merged normal css file and the one for mobile phones into one file

[e-DoKo.git] / css / standard.css

diff --git a/css/standard.css b/css/standard.css
index bff7d8a6830891b0e112f7bcfbd2d2b275177979..626c21814a4bd59e7ea85e6a573f3457a8c05fc0 100644 (file)
--- a/css/standard.css
+++ b/css/standard.css
@@ -17,38 +17,15 @@
  *
  */
 
-/* reset CSS (taken from blueprint and modified a bit) */
-
-html, body, div, span,
-h1, h2, h3, h4, h5, h6, p,
-a,img,  dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  vertical-align: baseline;
-}
-table { border-collapse: separate; border-spacing: 0; }
-caption, th, td { text-align: left; font-weight: normal; }
-table, td, th { vertical-align: middle; }
-
-/*  end reset */
-
-/* some general layout */
-h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;}
-
 body { background-color: #ddd; }
 
-
 /* the header, footer, etc */
 header {
   background-color: #fff;
   text-align:       center;
   height:           4em;
   padding-top: 1.5em;
-  margin-left: 3em;
-  margin-right: 3em;
+  margin: 0em 3em;
   border-bottom:    3px solid gray;
 }
 
@@ -61,8 +38,8 @@ header {
 
 .main {
   background-color: #fff;
-  margin-left: 3em;
-  margin-right: 3em;
+  margin: 0em 3em;
+  padding: 1em 0em;
   min-height: 40em;
 }
 
@@ -133,7 +110,7 @@ footer .left  { float:left;  font-size:smaller; }
 }
 
 /* all kind of message that should appear in the middle of the page/table */
-.joingame,.sickness,.poverty,.total,.message {
+.message {
  position: absolute;
  background-color: #fff;
  width: 20%;
@@ -141,9 +118,27 @@ footer .left  { float:left;  font-size:smaller; }
  left:40%;
  right:40%;
  text-align: center;
- z-index:22
+ z-index:33;
+}
+.message >div { border: 2px solid black; }
+.message div div {
+    width: 100%;
+    text-align: right;
+    font-size: smaller;
 }
 
+.joingame,.sickness,.poverty,.total {
+ position: absolute;
+ background-color: #fff;
+ width: 20%;
+ top:19em;
+ left:40%;
+ right:40%;
+ text-align: center;
+ z-index:22;
+}
+
+
 .total {
     top:11em;
     width: 14%;
@@ -207,26 +202,26 @@ div.table img.table {
 div.table div {
   /*background-color:green;*/
   position:absolute;
-  width:12.5%;
+  width:10.5%;
   text-align:center;
   z-index:20;
 }
 
 div.table div.table0 {
   top:45%;
-  right:62.5%;
+  right:63.5%;
 }
 div.table div.table1 {
-  top:0%;
-  left:43.75%;
+  top:2%;
+  left:44.75%;
 }
 div.table div.table2 {
   top:45%;
-  left:62.5%;
+  left:63.5%;
 }
 div.table div.table3 {
-  bottom:0%;
-  left: 43.75%;
+  bottom:2%;
+  left: 44.75%;
 }
 
 /* display the card tricks */
@@ -508,6 +503,7 @@ ul.tricks li div div span.comment span{
 
 div.user ul {
   list-style:none;
+  padding: 0px;
 }
 
 div.user ul li {
@@ -725,6 +721,7 @@ div.table div img.gravatar, img.gravatar  {
     width:  4em;
     height: 4em;
     border: 3px solid #aaa;
+    float:left;
 }
 
 div img.button {
@@ -732,6 +729,12 @@ div img.button {
     width: 2em;
 }
 
+div span.numberoftricks {
+    text-align:center;
+    clear:both;
+    display:block;
+}
+
 .highcall {
     background-color: #fc3;
 }
@@ -767,3 +770,81 @@ div img.button {
 .about .translation {
     background-color: #fce94f;
 }
+
+
+/* special layout for mobile devices */
+@media only screen and (max-width: 900px) {
+.main {
+  background-color: #fff;
+  margin-left: 0em;
+  margin-right: 0em;
+  min-height: 0em;
+}
+
+header, footer {
+  margin-left: 0em;
+  margin-right: 0em;
+}
+
+
+.lastlogin {
+  position: relative;
+  left: 0em;
+  top: 0em;
+  width: 100%;
+  text-align: center;
+  border-top: 1px solid gray;
+}
+
+.session div.sessionscore div, .status {
+  right:0em;
+}
+
+.usermenu {
+  left: 0em;
+}
+
+.notes {
+  position:relative;
+  top:0em;
+  left:0;
+  margin:0.1em;
+  margin-top:0em;
+  margin-left:0em;
+
+  width: 100%;
+
+  border:    2px solid gray;
+
+  padding:0.3em;
+
+  background-color: #efefef;
+
+  height:100%;
+  overflow: auto;
+  z-index:0;
+}
+
+.user { margin-left:5%;margin-right:5%; }
+
+div.table img.table {
+  width:50%;
+}
+
+.message {
+ position: relative;
+ background-color: #fff;
+ width: 100%;
+ top:0em;
+ left:0%;
+ right:0%;
+ text-align: center;
+ z-index:1;
+}
+.message >div { border: 2px solid black; }
+.message div div {
+    width: 100%;
+    text-align: right;
+    font-size: smaller;
+}
+}
\ No newline at end of file