diff --git a/examples/mobile-drawing.html b/examples/mobile-drawing.html
index 6a91152b89..0cb9c529f1 100644
--- a/examples/mobile-drawing.html
+++ b/examples/mobile-drawing.html
@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-drawing.js"></script>
diff --git a/examples/mobile-jq.html b/examples/mobile-jq.html
index 470fd39d5d..5e16caaa68 100644
--- a/examples/mobile-jq.html
+++ b/examples/mobile-jq.html
@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-base.js"></script>
diff --git a/examples/mobile-layers.html b/examples/mobile-layers.html
index dcb27645f9..d25867477a 100644
--- a/examples/mobile-layers.html
+++ b/examples/mobile-layers.html
@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css">
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
     <script src="../lib/OpenLayers.js?mobile"></script>
     <script src="mobile-layers.js"></script>
     <style>
diff --git a/examples/mobile-navigation.html b/examples/mobile-navigation.html
index 54f7037493..6814a729e4 100644
--- a/examples/mobile-navigation.html
+++ b/examples/mobile-navigation.html
@@ -6,7 +6,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>Mobile Navigation Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css" />
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="text/javascript" src="../lib/OpenLayers.js?mobile"></script>
     <script type="text/javascript" src="mobile-navigation.js"></script>
diff --git a/examples/mobile-sencha.html b/examples/mobile-sencha.html
index 9f1513f00a..3b491b2c9e 100644
--- a/examples/mobile-sencha.html
+++ b/examples/mobile-sencha.html
@@ -6,7 +6,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>OpenLayers with Sencha Touch</title>
         <script src="../lib/OpenLayers.js?mobile"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
         <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
         <script src="mobile-sencha.js"></script>
diff --git a/examples/mobile.html b/examples/mobile.html
index 671f522b0a..b2685e0cb2 100644
--- a/examples/mobile.html
+++ b/examples/mobile.html
@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile.js"></script>
         <style>
diff --git a/notes/2.12.md b/notes/2.12.md
index 61c8b71060..1cb4aab675 100644
--- a/notes/2.12.md
+++ b/notes/2.12.md
@@ -25,6 +25,16 @@ Corresponding issues/pull requests:
  * https://github.com/openlayers/openlayers/pull/254
  * https://github.com/openlayers/openlayers/pull/261
 
+## style.mobile.css
+
+The theme/default directory now includes a mobile-specific CSS file, namely
+style.mobile.css. The OpenLayers mobile examples use this file. To use it
+in your mobile pages use tags like this:
+
+<link rel="stylesheet" href="openlayers/theme/default/style.mobile.css" type="text/css">
+
+(This file used to be in the examples/ directory).
+
 ## Sensible projection defaults
 
 The geographic and web mercator projections define default values for the maxExtent, and units. This simplifies the map and layer configuration.
diff --git a/examples/style.mobile.css b/theme/default/style.mobile.css
similarity index 100%
rename from examples/style.mobile.css
rename to theme/default/style.mobile.css