From 862a53ddaf56f4da0d3323ae979507093dcf1fb0 Mon Sep 17 00:00:00 2001
From: Antoine Abt <antoine@abt.im>
Date: Fri, 23 Nov 2012 14:46:45 +0100
Subject: [PATCH] =?UTF-8?q?Avoid=20!important=20when=20not=20needed.=20Thi?=
 =?UTF-8?q?s=20css=20selector=20is=20sufficient=20to=20override=20bootstra?=
 =?UTF-8?q?p=E2=80=99s=20one.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/bootstrap.html | 12 ++++++++----
 theme/default/style.css |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 7cb8a98be5..7f3b78b3e6 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -53,10 +53,12 @@
                     Note that the OpenLayers stylesheet is loaded before 
                     Bootstrap.  The Bootstrap CSS sets the maximum width for
                     images to be 100% (of their containing element).
+                </p>
 <pre><code>img {
     max-width: 100%;
 }
 </code></pre>
+                <p>
                     This causes problems for images that you might want to be
                     bigger than their containing element (e.g. big tile in small
                     map viewport).  To overcome this, the OpenLayers CSS
@@ -64,14 +66,16 @@
                     not loading the OpenLayers default CSS or are having trouble 
                     with tile sizing and Bootstrap, add the following to your
                     markup:
-<pre><code>&lt;style>
-    max-width: none !important;
-&lt;/style><code></pre>
                 </p>
+<pre><code>&lt;style>
+    img.olTileImage {
+        max-width: none;
+    }
+&lt;/style></code></pre>
             </div>
         </div>
     </div>
     <script src="../lib/OpenLayers.js"></script>
     <script src="bootstrap.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/theme/default/style.css b/theme/default/style.css
index a681a9f269..3e77544c28 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -485,5 +485,5 @@ a.olControlZoomOut {
 
 /* override any max-width image settings (e.g. bootstrap.css) */
 img.olTileImage {
-    max-width: none !important;
+    max-width: none;
 }