LAYOUT: moved output of all game message after the tricks and table

this should make the html layout more consistent and easier to manage for different screen sizes, e.g. for mobile phones

2 files changed, 38 insertions, 3 deletions

diff --git a/css/narrow.css b/css/narrow.css
index 29aad6b..dc69296 100644
--- a/css/narrow.css
+++ b/css/narrow.css
@@ -53,4 +53,21 @@ header, footer {
 
 div.table img.table {
   width:50%;
-}
\ No newline at end of file
+}
+
+.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;
+}
diff --git a/css/standard.css b/css/standard.css
index 593eeb1..b23516d 100644
--- a/css/standard.css
+++ b/css/standard.css
@@ -110,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%;
@@ -118,8 +118,26 @@ 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;