From 7ce79207e371c7d9e45729c60bf6d806a3731eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Sun, 21 Oct 2012 21:11:27 +0200
Subject: [PATCH] Better design for the full-screen examples

The text div is now placed in the top-right corner of the page. This is to avoid overlapping with the attribution div. On screens that are smaller that 600px the text div is not deplayed at all.
---
 examples/full-screen.html       | 11 ++++++++---
 examples/overlay-and-popup.html | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/examples/full-screen.html b/examples/full-screen.html
index 2e96597349..53db08f8af 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -14,12 +14,17 @@
       }
       #text {
           position: absolute;
-          bottom: 1em;
-          left: 1em;
-          width: 512px;
+          top: 8px;
+          right: 8px;
           z-index: 20000;
           background-color: white;
           padding: 0 0.5em 0.5em 0.5em;
+          border-radius: 4px;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
       }
     </style>
     <title>Full-screen example</title>
diff --git a/examples/overlay-and-popup.html b/examples/overlay-and-popup.html
index fa7968f378..067adbf8b4 100644
--- a/examples/overlay-and-popup.html
+++ b/examples/overlay-and-popup.html
@@ -14,12 +14,17 @@
       }
       #text {
           position: absolute;
-          bottom: 1em;
-          left: 1em;
-          width: 512px;
+          top: 8px;
+          right: 8px;
           z-index: 20000;
           background-color: white;
           padding: 0 0.5em 0.5em 0.5em;
+          border-radius: 4px;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
       }
       .overlay {
         display: none;