MAPG-20 merge guessMap and resultMap into one map

public/static/css/mapguesser.css

@@ -97,25 +97,19 @@ div.buttonContainer.bottom {
     z-index: 2;
 }
 
+#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
+    display: none;
+}
+
 #guessMap {
     width: 100%;
     border-radius: 3px;
 }
 
-#result {
-    position: absolute;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-    background-color: #ffffff;
-    border-radius: 3px;
-}
-
-#resultMap {
+#guess.result > #guessMap {
     height: 70%;
-    width: 100%;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 #resultInfo {
@@ -124,6 +118,12 @@ div.buttonContainer.bottom {
     padding: 10px 20px;
     text-align: center;
     box-sizing: border-box;
+    background-color: #ffffff;
+    display: none;
+}
+
+#guess.result > #resultInfo {
+    display: block;
 }
 
 #resultInfo > div {
@@ -186,13 +186,6 @@ div.buttonContainer.bottom {
         height: calc(100% - 90px);
     }
 
-    #result {
-        top: 20px;
-        left: 20px;
-        right: 20px;
-        bottom: 30px;
-    }
-
     #scoreBarBase {
         width: 100%;
     }
@@ -200,7 +193,7 @@ div.buttonContainer.bottom {
 
 @media screen and (min-width: 600px) {
     #showGuessButtonContainer {
-        visibility: hidden;
+        display: none;
     }
 
     #guess {
@@ -234,7 +227,9 @@ div.buttonContainer.bottom {
         height: calc(100% - 45px);
     }
 
-    #result {
+    #guess.result {
+        width: initial;
+        height: initial;
         top: 50px;
         left: 50px;
         right: 50px;
@@ -245,7 +240,7 @@ div.buttonContainer.bottom {
         width: 60%;
     }
 
-     @media screen and (max-height: 424px) {
+    @media screen and (max-height: 424px) {
         #guess {
             top: 20px;
             height: initial;