giving examples some style

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7095 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-05-08 08:15:07 +00:00
parent c36ac497dd
commit c350fd6810
110 changed files with 469 additions and 1185 deletions
--- a/examples/GMLParser.html
+++ b/examples/GMLParser.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers GML Parser</title>
+    <title>OpenLayers GML Parser</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        function parseData(req) {
--- a/examples/KMLParser.html
+++ b/examples/KMLParser.html
@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers KML Parser Example</title>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        function parseData(req) {
--- a/examples/accessible.html
+++ b/examples/accessible.html
@@ -2,13 +2,8 @@
    <head>
        <title>OpenLayers Accessible Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid #eee;
-            }
            table {
                border: 1 px solid white;
                padding: 0;
@@ -90,7 +85,7 @@
                            pan <em>w</em>est
                        </a>
                    </td>
-                    <td id="map"></td>
+                    <td id="map" class="smallmap"></td>
                    <td>
                        <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
                           accesskey="e">
--- a/examples/animated_panning.html
+++ b/examples/animated_panning.html
@@ -2,18 +2,7 @@
  <head>
    <title>Animated Panning of the Map via map.panTo</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid black;
-        }
-        #map2 {
-            width: 512px;
-            height: 256px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer, running = false;
@@ -86,7 +75,7 @@
    <h1 id="title">map.panTo Example</h1>
    <div id="tags">map.panTo</div>
    <div id="shortdesc">Show animated panning effects in the map</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
        <p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br />
        The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
@@ -94,7 +83,7 @@
        </p>
    </div>
    <button onclick="setCenterInterval()">Start/stop random recenter</button>
-     <div id="map2"></div>
+    <div id="map2" class="smallmap"></div>
    <div>    
    <p>To turn off Animated Panning, create a map with an panMethod set to
        null. </p>
--- a/examples/attribution.html
+++ b/examples/attribution.html
@@ -2,14 +2,7 @@
    <head>
        <title>OpenLayers Attribution Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>

        <script type="text/javascript">
@@ -48,7 +41,7 @@
          Shows the use of the attribution layer option on a number of layer types.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs">
            This is an example of how to add an attribution block to the OpenLayers window.  In order to use an
--- a/examples/baseLayers.html
+++ b/examples/baseLayers.html
@@ -3,13 +3,8 @@
        <title>OpenLayers Base Layers Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512;
-                height: 512px;
-                border: 1px solid black;
-                background-color: blue;
-            }
            #controls
            {
                width: 512px;
@@ -89,7 +84,7 @@
        </p>

        <div id="controls">
-            <div id="map"></div>
+            <div id="map" class="smallmap"></div>

            <div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
            <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
--- a/examples/boxes-vector.html
+++ b/examples/boxes-vector.html
@@ -2,13 +2,7 @@
    <head>
        <title>OpenLayers Boxes Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var box_extents = [
@@ -53,7 +47,7 @@
            Demonstrate marker and box type annotations on a map.
        </p>
        
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
--- a/examples/boxes.html
+++ b/examples/boxes.html
@@ -2,13 +2,7 @@
    <head>
        <title>OpenLayers Boxes Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var box_extents = [
@@ -52,7 +46,7 @@
            Demonstrate marker and box type annotations on a map.
        </p>
        
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
--- a/examples/browser-name.html
+++ b/examples/browser-name.html
@@ -0,0 +1,89 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        // making this a global variable so that it is accessible for
+        // debugging/inspecting in Firebug
+        var map = null;
+
+        function init(){
+
+            //set title name to include Browser Detection
+            // this is the only way to test the functionality
+            // of the getBrowserName() function
+            //
+            var header = OpenLayers.Util.getElement("browserHeader");
+            header.innerHTML = "(browser: ";
+            var browserCode = OpenLayers.Util.getBrowserName();
+            switch (browserCode) {
+                case "opera":
+                    browserName = "Opera";
+                    break;
+                case "msie":
+                    browserName = "Internet Explorer";
+                    break;
+                case "safari":
+                    browserName = "Safari";
+                    break;
+                case "firefox":
+                    browserName = "FireFox";
+                    break;
+                case "mozilla":
+                    browserName = "Mozilla";
+                    break;
+                default:
+                    browserName = "detection error"
+                    break;
+            }
+            header.innerHTML += browserName + ")";
+
+            map = new OpenLayers.Map('map');
+
+            var options = {
+                            resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
+            };
+
+            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
+                options);
+
+            var options2 = {
+                            resolutions: [0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
+            };
+            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
+                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                {layers: "landsat7"}, options2);
+
+            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
+                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
+                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
+                         "prov_bound,fedlimit,rail,road,popplace",
+                 transparent: "true", format: "image/png"},
+                 {minResolution: 0.17578125,
+                  maxResolution: 0.703125});
+
+            map.addLayers([ol_wms, jpl_wms, dm_wms]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.zoomToMaxExtent();
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title" style="display:inline;">Example Showing Browser Name</h1>
+    <h3 id="browserHeader" style="display:inline;"></h3>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate a simple map that shows the browser name.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
+  </body>
+</html>
--- a/examples/buffer.html
+++ b/examples/buffer.html
@@ -2,13 +2,7 @@
    <head>
        <title>OpenLayers Buffer Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var lon = 0;
@@ -45,7 +39,7 @@
            This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs">
            Use the buffer property to control how many tiles are included
--- a/examples/click-handler.html
+++ b/examples/click-handler.html
@@ -3,6 +3,7 @@
        <title>OpenLayers Click Handler Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
            #map {
                width: 340px;
@@ -161,7 +162,7 @@
                This example shows the use of the click handler.
            </p>
    
-            <div id="map"></div>
+            <div id="map" class="smallmap"></div>
            <p>
                The click handler can be used to gain more flexibility over handling
                click events.  The handler can be constructed with options to handle
--- a/examples/click.html
+++ b/examples/click.html
@@ -3,16 +3,10 @@
        <title>OpenLayers Click Event Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
-OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
@@ -78,7 +72,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {

        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
    
        <div id="docs">
            Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get two alerts.) This example click control shows you how to use it. 
--- a/examples/controls.html
+++ b/examples/controls.html
@@ -3,28 +3,27 @@
        <title>OpenLayers Map Controls Example</title>

        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var map;
            function init(){
-                map = new OpenLayers.Map('map', { controls: [] });
+                map = new OpenLayers.Map('map', {
+                    controls: [
+                        new OpenLayers.Control.PanZoomBar(),
+                        new OpenLayers.Control.MouseToolbar(),
+                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+                        new OpenLayers.Control.Permalink(),
+                        new OpenLayers.Control.ScaleLine(),
+                        new OpenLayers.Control.Permalink('permalink'),
+                        new OpenLayers.Control.MousePosition(),
+                        new OpenLayers.Control.OverviewMap(),
+                        new OpenLayers.Control.KeyboardDefaults()
+                    ],
+                    numZoomLevels: 6
+                    
+                });
    
-                map.addControl(new OpenLayers.Control.PanZoomBar());
-                map.addControl(new OpenLayers.Control.MouseToolbar());
-                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-                map.addControl(new OpenLayers.Control.Permalink());
-                map.addControl(new OpenLayers.Control.ScaleLine());
-                map.addControl(new OpenLayers.Control.Permalink('permalink'));
-                map.addControl(new OpenLayers.Control.MousePosition());
-                map.addControl(new OpenLayers.Control.OverviewMap());
-                map.addControl(new OpenLayers.Control.KeyboardDefaults());

                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0",
@@ -57,7 +56,7 @@
        </p>

        <a style="float:right" href="" id="permalink">Permalink</a>
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
--- a/examples/custom-control-point.html
+++ b/examples/custom-control-point.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers Custom Control Point Examle</title>
+    <title>OpenLayers Custom Control Point Examle</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -54,7 +48,7 @@
          Demonstrate the addition of a point reporting control to the OpenLayers window.
      </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="bounds"></div>

    <div id="docs"></div>
--- a/examples/custom-control.html
+++ b/examples/custom-control.html
@@ -2,13 +2,7 @@
    <head>
        <title>Custom Control Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var lon = 5;
@@ -58,7 +52,7 @@
            Demonstrate the addition of a draggable rectangle to the OpenLayers window.
        </p>
      
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
--- a/examples/custom-style.html
+++ b/examples/custom-style.html
@@ -3,12 +3,8 @@
        <title>Custom Style Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid gray;
-            }
            p {
                width: 500px;
            }
@@ -47,7 +43,7 @@
            Demonstrate changing CSS styles on controls in the OpenLayers window.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs">
           <p>If you care to modify the style of any OpenLayers element, include
--- a/examples/debug.html
+++ b/examples/debug.html
@@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers Debug Example</title>
-        
+        <link rel="stylesheet" href="style.css" type="text/css" />        
        <script src="../lib/Firebug/firebug.js"></script>
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
--- a/examples/doubleSetCenter.html
+++ b/examples/doubleSetCenter.html
@@ -4,12 +4,7 @@
       
        <script src="../lib/OpenLayers.js"></script>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width:512px;
-                height:521px;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <h1 id="title">Double Set Center Example</h1>
@@ -20,7 +15,7 @@
            Demonstrate the behavior of two calls to set the center after instatiating the layer object.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
    
        <script defer="defer" type="text/javascript">
            var map = new OpenLayers.Map('map');
--- a/examples/drag-feature.html
+++ b/examples/drag-feature.html
@@ -3,12 +3,8 @@
        <title>Drag Feature Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid gray;
-            }
            #controls {
                width: 512px;
            }
@@ -72,7 +68,7 @@
            Demonstrates point, line and polygon creation and editing.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
        
        <div id="controls">
            <ul id="controlToggle">
--- a/examples/draw-feature.html
+++ b/examples/draw-feature.html
@@ -3,12 +3,8 @@
        <title>Draw Feature Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid gray;
-            }
            #controlToggle li {
                list-style: none;
            }
@@ -74,7 +70,7 @@
            Demonstrate on-screen digitizing tools for point, line, and polygon creation.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
    
        <ul id="controlToggle">
            <li>
--- a/examples/editingtoolbar-outside.html
+++ b/examples/editingtoolbar-outside.html
@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        .olControlEditingToolbar  {
            float:left;
@@ -9,11 +10,6 @@
            height: 30px; 
            width: 150px;
        }
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid gray;
-        }
    </style>
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
@@ -45,8 +41,8 @@
    </script>
  </head>
  <body onload="init()">
-    <h3>OpenLayers EditingToolbar Outside Viewport</h3>
-    <div id="map"></div>
+    <h1 id="title">OpenLayers EditingToolbar Outside Viewport</h1>
+    <div id="map" class="smallmap"></div>
    <div id="panel" class="olControlEditingToolbar"></div>
  </body>
 </html>
--- a/examples/editingtoolbar.html
+++ b/examples/editingtoolbar.html
@@ -4,13 +4,7 @@
        <title>OpenLayers Editing Toolbar Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script src="../lib/Firebug/debug.js"></script>
        <script type="text/javascript">
@@ -44,7 +38,7 @@
        </p>

        <div id="panel"></div>
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
--- a/examples/events.html
+++ b/examples/events.html
@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers Event Handling</title>
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 256px;
-                border: 1px solid gray;
-            }
            #panel {
                margin: 5px;
                height: 30px; 
@@ -146,7 +142,7 @@
            Demonstrating various styles of event handling in OpenLayers.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
        <div id="panel"></div>
        <textarea id="output"></textarea>
        <div id="docs"></div>
--- a/examples/example.html
+++ b/examples/example.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        // making this a global variable so that it is accessible for
@@ -17,79 +11,46 @@

        function init(){

-            //set title name to include Browser Detection
-            // this is the only way to test the functionality
-            // of the getBrowserName() function
-            //
-            var header = OpenLayers.Util.getElement("browserHeader");
-            header.innerHTML = "(browser: ";
-            var browserCode = OpenLayers.Util.getBrowserName();
-            switch (browserCode) {
-                case "opera":
-                    browserName = "Opera";
-                    break;
-                case "msie":
-                    browserName = "Internet Explorer";
-                    break;
-                case "safari":
-                    browserName = "Safari";
-                    break;
-                case "firefox":
-                    browserName = "FireFox";
-                    break;
-                case "mozilla":
-                    browserName = "Mozilla";
-                    break;
-                default:
-                    browserName = "detection error"
-                    break;
-            }
-            header.innerHTML += browserName + ")";
-
            map = new OpenLayers.Map('map');

-            var options = {
-                            resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
-            };
+            var ol_wms = new OpenLayers.Layer.WMS(
+                "OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0",
+                {layers: 'basic'}
+            );

-            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
-                options);
-
-            var options2 = {
-                            resolutions: [0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
-            };
-            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
+            var jpl_wms = new OpenLayers.Layer.WMS(
+                "NASA Global Mosaic",
                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"}, options2);
+                {layers: "landsat7"}
+            );

-            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
+            var dm_wms = new OpenLayers.Layer.WMS(
+                "DM Solutions Demo",
                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
-                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
-                         "prov_bound,fedlimit,rail,road,popplace",
-                 transparent: "true", format: "image/png"},
-                 {minResolution: 0.17578125,
-                  maxResolution: 0.703125});
+                {
+                    layers: "bathymetry,land_fn,park,drain_fn,drainage," +
+                            "prov_bound,fedlimit,rail,road,popplace",
+                    transparent: "true", format: "image/png"},
+                {
+                    minResolution: 0.17578125,
+                    maxResolution: 0.703125
+                }
+            );

            map.addLayers([ol_wms, jpl_wms, dm_wms]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
            map.zoomToMaxExtent();
        }
    </script>
  </head>
  <body onload="init()">
-    <h1 id="title" style="display:inline;">OpenLayers Example</h1>
-    <h3 id="browserHeader" style="display:inline;"></h3>
-
+    <h1 id="title">OpenLayers Example</h1>
    <div id="tags"></div>
-
    <p id="shortdesc">
        Demonstrate a simple map with an overlay that includes layer switching controls.
    </p>
-
-    <div id="map"></div>
-
+    <div id="map" class="smallmap"></div>
    <div id="docs"></div>
  </body>
 </html>
--- a/examples/fractional-zoom.html
+++ b/examples/fractional-zoom.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid gray;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -51,7 +45,7 @@
            Shows the use of a map with fractional (or non-discrete) zoom levels.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
        <input type="checkbox" name="fractional"
               id="fractional" checked="checked" onclick="update(this)" />
        <label for="fractional">Fractional Zoom</label>
--- a/examples/fullScreen.html
+++ b/examples/fullScreen.html
@@ -1,19 +1,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
-        <title>Full Screen Example</title>
-        
+        <title>Full Screen Example</title>        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
+            body {
+                margin: 0;
+            }
            #map {
                width: 100%;
                height: 100%;
-                border: 1px solid black;
            }

            #text {
                position: absolute;
-                bottom: 0px;
-                left:0px;
+                bottom: 1em;
+                left: 1em;
                width: 512px;
            }
        </style>
--- a/examples/fullScreen2.html
+++ b/examples/fullScreen2.html
@@ -1,52 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <title>Full Screen Example 2</title>
-        
-        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-                border: 1px solid black;
-            }
-        </style>
-        <script src="../lib/OpenLayers.js"></script>
-        <script type="text/javascript">
-            var map;
-            function init(){
-                map = new OpenLayers.Map('map');
-
-                var options = {numZoomLevels: 3};
-
-                var docImage = new OpenLayers.Layer.Image(
-                    'Full Screen',
-                    'fullscreen.jpg',
-                    new OpenLayers.Bounds(-156, -90, 156, 90),
-                    new OpenLayers.Size(1121, 650),
-                    options);
-
-                map.addLayers([docImage]);
-                // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-                map.zoomToMaxExtent();
-            }
-        </script>
-    </head>
-    <body onload="init()">
-        <div id="map"></div>
-
-        <div id="text">
-            <h1 id="title">Full Screen Example</h1>
-
-            <div id="tags"></div>
-
-            <p id="shortdesc">
-                Demonstrate a map that fill the entire browser window.
-            </p>
-
-            <div id="docs">
-                This example uses CSS to define the dimensions of the map element in order to fill the screen.
-                When the user resizes the window, the map size changes correspondingly. No scroll bars!
-            </div>
-        </div>
-    </body>
-</html>
--- a/examples/fullscreen.jpg
+++ b/examples/fullscreen.jpg
--- a/examples/geojson.html
+++ b/examples/geojson.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -62,6 +56,7 @@
    </script>
  </head>
  <body onload="init()">
-    <div id="map"></div>
+    <h1 id="title">GeoJSON Example</h1>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/georss-flickr.html
+++ b/examples/georss-flickr.html
@@ -1,13 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-        
        .olPopupContent {
            font-size: smaller;
        }
@@ -108,8 +103,8 @@
    </script>
  </head>
  <body onload="init()">
-    <h1>GeoRSS from Flickr in OpenLayers</h1>
+    <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
    <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</tt> property for each item. An extended <tt>createFeatureFromItem()</tt> function is used to add this attribute to the attributes hash of each feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is configured with a style to render each item with its thumbnail image. Also, to show how rules work, we defined a rule that if the title of an rss item contains "powder", it will be rendered larger than the others.</p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/georss-markers.html
+++ b/examples/georss-markers.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers GeoRSS Marker Example</title>
+    <title>OpenLayers GeoRSS Marker Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -38,7 +32,7 @@
        Demonstrate loading a GeoRSS feed using the GeoRSS parser.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/georss-serialize.html
+++ b/examples/georss-serialize.html
@@ -1,58 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-      <title>OpenLayers GeoRSS Serialize Example</title>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid gray;
-        }
-    </style>
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, drawControl, g;
-        function serialize(feature) {
-            feature.attributes = {};
-            var name = prompt("Title for feature?");
-            feature.attributes['title'] = name;
-            var data = g.write(feature.layer.features);
-            OpenLayers.Util.getElement("gml").value = data;
-        }
-        function init(){
-            g = new OpenLayers.Format.GeoRSS();
-            map = new OpenLayers.Map('map');
-
-            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
-
-            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
-            pointLayer.onFeatureInsert = serialize;
-
-            map.addLayers([wmsLayer, pointLayer]);
-            map.addControl(new OpenLayers.Control.EditingToolbar(pointLayer));
-            map.addControl(new OpenLayers.Control.MousePosition());
-
-
-            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">Draw Point Example</h1>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Demonstrate serialization of features in a Vector layer to GeoRSS.
-    </p>
-
-    <div style="float:right;width:50%">
-        <textarea id="gml" style="width:100%" rows="30"></textarea>
-    </div>
-
-    <div id="map"></div>
-
-    <div id="docs"></div>
-  </body>
-</html>
--- a/examples/georss.html
+++ b/examples/georss.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers GeoRSS Example</title>
+    <title>OpenLayers GeoRSS Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -41,7 +35,7 @@
        Display a couple of locally cached georss feeds on an a basemap.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are
--- a/examples/getfeatureinfo.html
+++ b/examples/getfeatureinfo.html
@@ -3,6 +3,7 @@
    <title>OpenLayers Feature Info Example</title>
    <script src="../lib/OpenLayers.js"></script>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        ul, li { padding-left: 0px; margin-left: 0px; }
    </style>
@@ -24,7 +25,7 @@
        <div id="nodeList">
        </div>
    </div>
-      <div id="map" style="width:512px; height:512px"></div>
+      <div id="map" class="smallmap"></div>

  <script defer="defer" type="text/javascript">
    OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
--- a/examples/gml-layer.html
+++ b/examples/gml-layer.html
@@ -2,13 +2,7 @@
  <head>
      <title>OpenLayers GML Layer Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -35,7 +29,7 @@
          Loads locally stored GML vector data on a basemap. Includes GML example file.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/gml-serialize.html
+++ b/examples/gml-serialize.html
@@ -1,97 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-      <title>OpenLayers GML Serialization Example</title>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
-    </style>
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, drawControl, g;
-        function serialize(feature) {
-            feature.attributes = {};
-            var name = prompt("Name for feature?");
-            feature.attributes['name'] = name;
-            var data = g.write(feature.layer.features);
-            OpenLayers.Util.getElement("gml").value = data;
-        }
-        function init(){
-            g = new OpenLayers.Format.GML();
-            map = new OpenLayers.Map('map');
-
-            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
-
-            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
-            pointLayer.onFeatureInsert = serialize;
-
-            map.addLayers([wmsLayer, pointLayer]);
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            map.addControl(new OpenLayers.Control.MousePosition());
-
-            drawControls = {
-                point: new OpenLayers.Control.DrawFeature(pointLayer,
-                            OpenLayers.Handler.Point),
-                line: new OpenLayers.Control.DrawFeature(pointLayer,
-                            OpenLayers.Handler.Path)
-            };
-
-            for(var key in drawControls) {
-                map.addControl(drawControls[key]);
-            }
-
-            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-        }
-
-        function toggleControl(element) {
-            for(key in drawControls) {
-                var control = drawControls[key];
-                if(element.value == key && element.checked) {
-                    control.activate();
-                } else {
-                    control.deactivate();
-                }
-            }
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">GML Serialization Example</h1>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Demonstrate the serialization of features drawn in the OpenLayers window.
-    </p>
-
-    <div style="float:right">
-        <ul id="controlToggle">
-            <li>
-                <input type="radio" name="type" value="none" id="noneToggle"
-                       onclick="toggleControl(this);" checked="checked" />
-                <label for="noneToggle">navigate</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
-                <label for="pointToggle">draw point</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
-                <label for="lineToggle">draw line</label>
-            </li>
-        </ul>
-
-        <p>Check the box to draw points.  Uncheck to navigate normally.</p>
-
-        <textarea id="gml" cols="80" rows="30"></textarea>
-    </div>
-
-    <div id="map"></div>
-
-    <div id="docs"></div>
-  </body>
-</html>
--- a/examples/google-reproject.html
+++ b/examples/google-reproject.html
@@ -2,14 +2,7 @@
  <head>
    <title>OpenLayers Google with Overlay Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
-
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="../lib/OpenLayers.js"></script>
@@ -38,7 +31,6 @@

            map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
-            map.addControl( new OpenLayers.Control.PanZoomBar() );
        }
    </script>
  </head>
@@ -51,7 +43,7 @@
        Demonstrate a Google basemap used with boundary overlay layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        An overlay in a Geographic projection can be stretched to somewhat
--- a/examples/google.html
+++ b/examples/google.html
@@ -2,14 +2,7 @@
  <head>
    <title>OpenLayers Google Layer Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
-
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="../lib/OpenLayers.js"></script>
@@ -52,7 +45,7 @@
        Demonstrate use of the various types of Google layers.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        For best performance, you must be using a version of the Google Maps
--- a/examples/gutter.html
+++ b/examples/gutter.html
@@ -2,12 +2,8 @@
  <head>
      <title>OpenLayers Gutter Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 521px;
-            height: 512px;
-            border: 1px solid gray;
-        }
        p.caption {
            width: 512px;
        }
@@ -43,7 +39,7 @@
        Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p class="caption">
--- a/examples/hover-handler.html
+++ b/examples/hover-handler.html
@@ -2,7 +2,7 @@
    <head>
        <title>OpenLayers Hover Handler Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        
+        <link rel="stylesheet" href="style.css" type="text/css" />        
        <style type="text/css">
            #map {
                width: 340px;
@@ -149,7 +149,7 @@
                This example shows the use of the hover handler.
            </p>
    
-            <div id="map"></div>
+            <div id="map" class="smallmap"></div>
            <p>
                The hover handler is to be used to emulate mouseovers on
                objects on the map that aren't DOM elements. For example
--- a/examples/image-layer.html
+++ b/examples/image-layer.html
@@ -2,15 +2,11 @@
  <head>
      <title>OpenLayers Image Layer Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        p {
+        p.caption {
            width: 512px;
        }
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid gray;
-        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -46,10 +42,10 @@
        Demonstrate a single non-tiled image as a selectable base layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
-        <p>
+        <p class="caption">
            The "City Lights" layer above is created from a single web accessible
            image.  If you construct it without any resolution related options,
            the layer will be given a single resolution based on the extent/size.
--- a/examples/intersects.html
+++ b/examples/intersects.html
@@ -2,6 +2,7 @@
  <head>
    <title>Geometry Intersections</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        html, body {
            margin: 0;
@@ -159,8 +160,8 @@
  </head>
  <body onload="init()">
    <div id="leftcol">
-        <h2>OpenLayers Geometry Intersection Example</h2>
-        <div id="map"></div>
+        <h1 id="title">OpenLayers Geometry Intersection Example</h1>
+        <div id="map" class="smallmap"></div>
        <div id="input">
            <textarea id="text"></textarea> 
            <input type="button" value="add feature" onclick="deserialize();" />
--- a/examples/kamap.html
+++ b/examples/kamap.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers KaMap Example</title>
+    <title>OpenLayers KaMap Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -38,7 +32,7 @@
        Demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/kml-layer.html
+++ b/examples/kml-layer.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -41,7 +35,7 @@
          Demonstrates loading and displaying a KML file on top of a basemap.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/layer-opacity.html
+++ b/examples/layer-opacity.html
@@ -2,15 +2,11 @@
  <head>
      <title>OpenLayers Layer Opacity Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        body {
            font-family: sans-serif;
        }
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid lightgray;
-        }
        p {
            width: 512px;
        }
@@ -75,7 +71,7 @@
        Demonstrate a change in the opacity for an overlay layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>
--- a/examples/layerLoadMonitoring.html
+++ b/examples/layerLoadMonitoring.html
@@ -1,13 +1,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers Layer Load Monitoring Example</title>
+    <title>OpenLayers Layer Load Monitoring Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
        #controls {
            float: left;
            text-align: right;
--- a/examples/layerswitcher.html
+++ b/examples/layerswitcher.html
@@ -2,13 +2,7 @@
  <head>
      <title>OpenLayers Layer Switcher Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -50,8 +44,8 @@
        Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
    </p>

-    <div id="layerswitcher" style="float:right; width: 20em;"></div>
-    <div id="map"></div>
+    <div id="layerswitcher"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
      <p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use
         of the displayInLayerSwitcher option on the Layer to cause it to not display in the
--- a/examples/lite.html
+++ b/examples/lite.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Basic Single WMS Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -29,7 +23,7 @@

    <div id="shortdesc">Show a Simple Map</div>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        This example shows a very simple layout with minimal controls.  This example uses a single WMS base layer.
--- a/examples/mapguide.html
+++ b/examples/mapguide.html
@@ -1,5 +1,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 400px;
@@ -104,7 +105,7 @@
  </head>
  <body onload="initUntiled(); initTiled()">
    <p>If prompted for a password, username is Anonymous and an empty password</p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="map2"></div>
  </body>
 </html>
--- a/examples/mapserver.html
+++ b/examples/mapserver.html
@@ -2,13 +2,7 @@
  <head>
    <title>MapServer Layer</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -33,7 +27,7 @@
    <div id="title">MapServer Layer</div>
    <div id="tags"></div>
    <div id="shortdesc">Shows MapServer Layer</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
        This is an example of using a MapServer Layer with a gutter parameter.  The gutter parameter is used to try to limit the edge effects between tiles.
    </div>
--- a/examples/mapserver_untiled.html
+++ b/examples/mapserver_untiled.html
@@ -2,6 +2,7 @@
  <head>
    <title>MapServer Single Tile Mode</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 100%;
@@ -26,7 +27,7 @@
    <div id="title">MapServer Single Tile Mode</div>
    <div id="tags"></div>
    <div id="shortdesc">Shows single tile MapServer Layer</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
        This shows an example of using a MapServer Layer in single tile mode.  Single tile mode can be useful when pulling data from dynamic sources.
    </div>
--- a/examples/markerResize.html
+++ b/examples/markerResize.html
@@ -2,13 +2,7 @@
  <head>
    <title>Resize a Marker</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -48,7 +42,7 @@
    <div id="title">Resize a Marker</div>
    <div id="tags"></div>
    <div id="shortdesc">Dynamically resize a marker</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
        This example shows how to create a OpenLayers.Layer.Markers layer, add an icon, put it into a marker, and add the marker to the layer.  Once the marker has been added it is possible to use setSize() on the icon in order to resize the marker.
    </div>
--- a/examples/markers.html
+++ b/examples/markers.html
@@ -2,13 +2,7 @@
  <head>
    <title>Markers Layer Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -51,7 +45,7 @@
    <div id="title">Markers Layer Example</div>
    <div id="tags"></div>
    <div id="shortdesc">Show markers layer with different markers</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
        This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers.  Also demonstrated is registering a mousedown effect on a marker.
    </div>
--- a/examples/markersTextLayer.html
+++ b/examples/markersTextLayer.html
@@ -2,13 +2,7 @@
  <head>
    <title>Using a Layer.Text to display markers</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -35,6 +29,6 @@
      The Layer.Text class reads a Tab seperated values file and displays it as markers on
      the map.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/mm.html
+++ b/examples/mm.html
@@ -2,6 +2,7 @@
  <head>
    <title>MultiMap</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 100%;
@@ -52,7 +53,7 @@
    <p id="shortdesc">
      An example of using the Layer.MultiMap class.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
    <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
  </body>
--- a/examples/modify-feature.html
+++ b/examples/modify-feature.html
@@ -2,12 +2,8 @@
  <head>
    <title>Modify Feature</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
        #controls {
            width: 512px;
        }
@@ -112,7 +108,7 @@
  <body onload="init()">
    <h3 id="title">OpenLayers Modify Feature Example</h3>
    <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="controls">
        <ul id="controlToggle">
            <li>
--- a/examples/mouse-position.html
+++ b/examples/mouse-position.html
@@ -4,16 +4,7 @@
  <head>
    <title>MousePosition Control</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        #map {
-            width: 512px;
-            height: 256px;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -42,7 +33,7 @@
      Use the MousePosition Control to display the coordinates of the cursor
      inside or outside the map div.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="coords"></div>
    <p>Moving your mouse to the upper left corner of this map should return 'x=0,y=0' -- in the past, it didn't in IE. If it returns 2,2, consider it a bug, and report it.</p> 
  </body>
--- a/examples/multimap-mercator.html
+++ b/examples/multimap-mercator.html
@@ -2,6 +2,7 @@
  <head>
    <title>MultiMap SphericalMercator</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 100%;
@@ -59,6 +60,6 @@
      multimap layer does not fully support the sphericalMercator projection at
      this time.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/multiserver.html
+++ b/examples/multiserver.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -37,7 +31,7 @@
      Load your tiles faster by pointing to the same server, but with different urls
  </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
    Browsers typically limit the number of concurrent requests to the same server, based on hostname. In order to ake tiles load more quickly, it often makes sense to distribute requests over multiple hostnames to achieve more concurrency. Typically, browsers perform best with 3 different hostnames -- your performance may vary. (For example, if your server can't handle more than 2 requests simultaneously, then additional hostnames will not help you.)    
   </div>
--- a/examples/navigation-control.html
+++ b/examples/navigation-control.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Navigation Control</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -31,7 +25,7 @@

    <div id="shortdesc">Demonstrate Navigation Control features</div>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a>
    <div id="docs">
        This example demonstrates a couple features of the Navigation control. The Navigation control controls most map dragging, movement, zooming, etc. In this case, we have a demonstration of how to create a navigation control with no zoom wheel action, which can then be enabled or disabled by the user.
--- a/examples/navigation-history.html
+++ b/examples/navigation-history.html
@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers Navigation History Example</title>
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 256px;
-                border: 1px solid gray;
-            }
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <style>
            #panel {
                right: 0px;
                height: 30px; 
@@ -16,7 +12,6 @@
                float: left;
                margin: 5px;
            }
-                
        </style>
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
@@ -68,7 +63,7 @@
            A control for zooming to previous and next map extents.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
        Map navigation history controls<div id="panel"></div>
        <div id="docs"></div>
    </body>
--- a/examples/navtoolbar-outsidemap.html
+++ b/examples/navtoolbar-outsidemap.html
@@ -1,16 +1,13 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
+        #paneldiv {
+            height: 80px;
        }
-        
-        #paneldiv { float: right }
        #paneldiv div { 
-          top: 10px; 
+            top: 10px; 
        }
        
    </style>
@@ -35,8 +32,8 @@
  </head>
  <body onload="init()">
    <h1 id="title">Navigation Toolbar: Outside the Map</h1>
+    <div id="map" class="smallmap"></div>
    <div id="paneldiv" class="olControlNavToolbar"></div>
-    <div id="map"></div>
    <div id="docs">
     <p> To place the Naviation Toolbar outside the map:</p>
      <ul>
@@ -45,20 +42,6 @@
        <li>Specify the HTML element as a 'div' option in your NavToolbar constructor</li>
        <li>Add the olControlNavToolbar class to your div.</li>
      </ul>
-      <pre id="code">
-&lt;link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-&lt;style type="text/css">
-  #paneldiv { float: right; }
-  #paneldiv div { 
-    top: 10px; 
-  }
-&lt;/style>
-&lt;div id="paneldiv" class="olControlNavToolbar">&lt;/div>
-
-...
-
-var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
-</pre>
   </div> 
   
  </body>
--- a/examples/navtoolbar.html
+++ b/examples/navtoolbar.html
@@ -1,15 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-            float:right;
-        }
-        
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>NavToolbar Demo</title>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -37,6 +29,6 @@
       Demo the NavToolbar, a subclass of Control.Panel which shows icons for
       navigation.
    </p> 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/notile.html
+++ b/examples/notile.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #mapDiv {
-            width: 400px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -35,7 +29,7 @@
      Create an untiled WMS layer using the singleTile: true, option or the deprecated
      WMS.Untiled layer.
    </p>  
-    <div id="mapDiv"></div>
+    <div id="mapDiv" class="smallmap"></div>
    <p> The first layer is an old OpenLayers.Layer.WMS.Untiled layer, using 
        a default ratio value of 1.5.
    <p> The second layer is an OpenLayers.Layer.WMS layer with singleTile set
--- a/examples/openmnnd.html
+++ b/examples/openmnnd.html
@@ -1,16 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 600px;
-            height: 475px;
-            border: 1px solid black;
-        }
-        #info {
-            float: right;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -118,27 +109,8 @@
    </script>
  </head>
  <body onload="init()">
-    <div id="info">
-      <ul>
-        <li>Streams: Feature Count <span id="stream_features">0</span></li>
-        <li>Plat: Feature Count <span id="plat_features">0</span></li>
-        <li>Roads: Feature Count <span id="road_features">0</span></li>
-      </ul>
-      <div id="feature_info">
-      </div>
-      <ul>
-        <li>
-            <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
-            <label for="selectToggle">select road</label>
-        </li>
-        <li>
-            <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
-            <label for="selectToggle">select polygon</label>
-        </li>
-    </ul>
-    </div>
    <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">
            <p>
            This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
@@ -158,5 +130,24 @@
            You can also get feature attributes from the WFS services using the extractAttribute property.  View the source to see the example code.
            </p>
    </div>
+    <div id="info">
+      <ul>
+        <li>Streams: Feature Count <span id="stream_features">0</span></li>
+        <li>Plat: Feature Count <span id="plat_features">0</span></li>
+        <li>Roads: Feature Count <span id="road_features">0</span></li>
+      </ul>
+      <div id="feature_info">
+      </div>
+      <ul>
+        <li>
+            <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
+            <label for="selectToggle">select road</label>
+        </li>
+        <li>
+            <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
+            <label for="selectToggle">select polygon</label>
+        </li>
+    </ul>
+    </div>
  </body>
 </html>
--- a/examples/osm-layer.html
+++ b/examples/osm-layer.html
@@ -1,11 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style>
        #map {
-            width: 70%;
-            height: 475px;
-            border: 1px solid black;
+            height: 350px;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
@@ -103,7 +102,8 @@
    </script>
  </head>
  <body onload="init()">
-    <div style="width:28%; float:right" id="download">
+    <div id="map" class="smallmap"></div>
+    <div id="download">
      <ul>
       <li><a href="javascript:new_data();">Download current view</a></li>
       <li><a href="javascript:clear_data();">Clear current data</a></li>
@@ -111,7 +111,6 @@
      </ul>
    <div id="status">Loading...</div>
    </div>
-    <div id="map"></div>
    <a id="vectorlink" href="" style="display:none">Display via data: URL (FF Only)</a>
    <textarea id="vectors" style="display:none;width:100%" rows="10"></textarea>
  </body>
--- a/examples/outOfRangeMarkers.html
+++ b/examples/outOfRangeMarkers.html
@@ -2,11 +2,10 @@
 <head>
    <title>Using maxResolution to control overlays</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style>
        #map {
-            width: 650px;
-            height: 550px;
-            border: 1px solid black;
+            height: 350px;
        }
    </style>
      <!-- this gmaps key generated for http://openlayers.org/dev/ -->
@@ -20,17 +19,17 @@
        function init(){
            
            // Variables
-            map = new OpenLayers.Map('map', { controls: [] });
+            map = new OpenLayers.Map('map', {
+                controls: [
+                    new OpenLayers.Control.PanZoomBar(),
+                    new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+                    new OpenLayers.Control.MousePosition(),
+                    new OpenLayers.Control.Navigation()
+                ]
+            });
            var lon = 35;
            var lat = -6;
            var zoom = 6;
-            var map, layer;
-
-            // Map Controls
-            map.addControl(new OpenLayers.Control.PanZoomBar());
-            map.addControl(new OpenLayers.Control.MouseToolbar());
-            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-            map.addControl(new OpenLayers.Control.MousePosition());


            // Map Layers
@@ -40,8 +39,7 @@
            var MarkersLayer2 = new OpenLayers.Layer.Text( "Region info", {location: "outOfRangeMarkers.txt", maxResolution: 0.02});

            // Add Layers
-            map.addLayers([GMapsHybr, GMapsStreets, GMapsSat, MarkersLayer2]);
-            
+            map.addLayers([GMapsHybr, GMapsStreets, GMapsSat, MarkersLayer2]);            

            // Visual
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
@@ -57,7 +55,7 @@
      See how to control the maximum resolution for a markers layer, 
      causing it to not be displayed beyond a certain point.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

  </body>
 </html>
--- a/examples/overviewmap.html
+++ b/examples/overviewmap.html
@@ -2,6 +2,7 @@
    <head>
        <title>Overview Map Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js" type="text/javascript"></script>
        <style>
        #map1 {
--- a/examples/panel.html
+++ b/examples/panel.html
@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
        .olControlPanel div { 
          display:block;
          width:  24px;
@@ -94,6 +90,6 @@
      CSS, and add your own controls to it.
    </p>  
    <div id="panel"></div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/point-track-markers.html
+++ b/examples/point-track-markers.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer, rss, lineFeatures, popup;
@@ -57,13 +51,13 @@
    </script>
  </head>
  <body onload="init()">
-    <h1>GeoRSS PointTrack in OpenLayers</h1>
+    <h1 id="title">GeoRSS PointTrack in OpenLayers</h1>
    <p style="font-size:.9em;">This demo uses OpenLayers.Layer.GeoRSS and OpenLayers.Layer.PointTrack. The track is created by connecting the points of the GeoRSS feed.</a></p>
    <form onsubmit="return false;">
   GeoRSS URL: <input type="text" id="url" size="50" /><input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
    </form>  
    <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page -- for example, entering 'xml/track1.xml' will work by default.</p>
    <p>The example shows a track, displayed as a line connecting the points of the feed. It also shows markers at positions that have a title tag in the rss item. If clicked, a popup will show title and description.</p>   
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/popupMatrix.html
+++ b/examples/popupMatrix.html
@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 900px;
@@ -875,7 +876,7 @@
          All kinds of different popup configurations.
      </p>

-      <div id="map"></div>
+      <div id="map" class="smallmap"></div>

        <!-- preloading these images so the autosize will work correctly -->
        <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
--- a/examples/popups.html
+++ b/examples/popups.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -118,7 +112,7 @@
      All kinds of ways to create and interact with Popups.
  </p>

-  <div id="map"></div>
+  <div id="map" class="smallmap"></div>
    <p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p>  
    <div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
    <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>
--- a/examples/projected-map.html
+++ b/examples/projected-map.html
@@ -2,12 +2,8 @@
  <head>

    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-    body {
-    border: 0px;
-    margin: 0px;
-    padding: 0px;
-    }
    #map {
    width: 100%;
    height: 100%;
@@ -63,7 +59,7 @@
  <p id="shortdesc">
      Use different (not default) projections with your map 
  </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <p>When using alternative projections, you still use OpenLayers.LonLat objects, even though
       the properties are actually X/Y values at that point.</p>
 </body>
--- a/examples/regular-polygons.html
+++ b/examples/regular-polygons.html
@@ -2,20 +2,8 @@
  <head>
    <title>OpenLayers Regular Polygon Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        html, body {
-            margin: 0;
-            padding: 1em;
-            font: 0.9em Verdana, Arial, sans serif;
-        }
-        input, select, textarea {
-            font: 1em Verdana, Arial, sans serif;
-        }
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
        p {
            width: 512px;
        }
@@ -85,7 +73,7 @@
      Shows how to use the RegularPolygon handler to draw features with
      different numbers of sides.
    </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="config">
        
        <ul id="controls"><b>Map Controls</b>
--- a/examples/resize-features.html
+++ b/examples/resize-features.html
@@ -2,12 +2,8 @@
  <head>
    <title>OpenLayers Resize Features Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 500px;
-            height: 350px;
-            border: 1px solid #ccc;
-        }
        p {
            width: 500px;
        }
@@ -88,7 +84,7 @@
      Demonstration of how to use the geometry resize methods to
      change feature sizes programatically.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <p>This example demonstrates how features can be resized.  There is not yet
    a control built that provides a tool for resizing, but the geometry.resize
    method can be accessed to resize programmatically.</p>
--- a/examples/restricted-extent.html
+++ b/examples/restricted-extent.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Restricted Extent Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid #ccc;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -47,7 +41,7 @@
      Don't let users drag outside the map extent: instead, limit dragging such
      that the extent of the layer is the maximum viewable area.
    </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <p>
        Map navigation is limited by a combination of map and layer properties.
        The base layer resolutions array controls the resolutions (or zoom
--- a/examples/rotate-features.html
+++ b/examples/rotate-features.html
@@ -2,12 +2,8 @@
  <head>
    <title>OpenLayers Rotate Features Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 500px;
-            height: 350px;
-            border: 1px solid #ccc;
-        }
        p {
            width: 500px;
        }
@@ -104,7 +100,7 @@
      Details on how to create and rotate vector features programmatically
  </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <div id="docs">This example shows a few features rotating.  There is not yet a control
    built that provides a tool for rotating, but the geometry.rotate method
    can be accessed to rotate programmatically.</div>
--- a/examples/select-feature-openpopup.html
+++ b/examples/select-feature-openpopup.html
@@ -3,12 +3,8 @@
    <title>Open Popup on Layer.Vector</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 350px;
-            border: 1px solid gray;
-        }
        #controlToggle li {
            list-style: none;
        }
@@ -79,7 +75,7 @@
    <p id="shortdesc">
      Using a Control.SelectFeature, open a popup on click.
    </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
--- a/examples/select-feature.html
+++ b/examples/select-feature.html
@@ -2,12 +2,8 @@
  <head>
    <title>SelectFeature Control on Layer.Vector</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
        #controlToggle li {
            list-style: none;
        }
@@ -87,7 +83,7 @@
      Select a feature on hover or click with the Control.SelectFeature on a
      vector layer.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
--- a/examples/setextent.html
+++ b/examples/setextent.html
@@ -2,6 +2,7 @@
 <head>
 <title>Setting a visual Extent</title>
 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
 <script src="../lib/OpenLayers.js"></script>
 </head>
 <body>
--- a/examples/sld.html
+++ b/examples/sld.html
@@ -1,14 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-            background: #ccddff;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -97,7 +90,8 @@
    </script>
  </head>
  <body onload="init()">
-    <div id="map"></div>
+    <h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
+    <div id="map" class="smallmap"></div>
    <p>This example uses a <a target="_blank" href="tasmania/sld-tasmania.xml">SLD
    file</a> to style the vector features. To construct layers that use styles
    from SLD, create a StyleMap for the layer that uses one of the userStyles in the
--- a/examples/smoothDragging.html
+++ b/examples/smoothDragging.html
@@ -1,14 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 100%;
-            height: 512px;
-            border: 1px solid gray;
-        }
-    </style>
-
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>
    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
@@ -76,8 +69,8 @@
    </script>
  </head>
  <body onload="init()">
-    <h2>OpenLayers With Responsive Dragging</h3>
+    <h1 id="title">OpenLayers With Responsive Dragging</h1>
    <h3>Uses Google Maps v2.82</h2>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/spherical-mercator.html
+++ b/examples/spherical-mercator.html
@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid gray;
-        }
        .olControlAttribution { bottom: 0px!important }
    </style>

@@ -150,7 +146,7 @@
        Shows the use of the Spherical Mercator Layers, for overlaying 
        Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
    </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
    </div>
--- a/examples/style.css
+++ b/examples/style.css
@@ -0,0 +1,82 @@
+/**
+ * CSS Reset
+ * From Blueprint reset.css
+ * http://blueprintcss.googlecode.com
+ */
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+body {line-height:1.5;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;}
+table, td, th {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:"";}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+
+/**
+ * Basic Typography
+ */
+body {
+    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    font-size: 80%;
+    color: #222;
+    background: #fff;
+    margin: 1em 1.5em;
+}
+pre, code {
+    margin: 1.5em 0;
+    white-space: pre;
+}
+pre, code {
+    font: 1em 'andale mono', 'lucida console', monospace;
+    line-height:1.5;
+}
+a[href] {
+    color: #436976;
+    background-color: transparent;
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #003a6b;
+    background-color: transparent;
+    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding-top: 0.5em;
+}
+h1 {
+    font-size: 130%;
+    margin-bottom: 0.5em;
+    border-bottom: 1px solid #fcb100;
+}
+h2 {
+    font-size: 120%;
+    margin-bottom: 0.5em;
+    border-bottom: 1px solid #aaa;
+}
+h3 {
+    font-size: 110%;
+    margin-bottom: 0.5em;
+    text-decoration: underline;
+}
+h4 {
+    font-size: 100%;
+    font-weight: bold;
+}
+h5 {
+    font-size: 100%;
+    font-weight: bold;
+}
+h6 {
+    font-size: 80%;
+    font-weight: bold;
+}
+
+/**
+ * Map Examples Specific
+ */
+.smallmap {
+    width: 512px;
+    height: 256px;
+    border: 1px solid #ccc;
+}
+#tags {
+    display: none;
+}
--- a/examples/styles-context.html
+++ b/examples/styles-context.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Vector Styles</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -93,7 +87,7 @@
        Shows how to create a feature styles.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>Features in the northern hemisphere are styled according to their
--- a/examples/styles-unique.html
+++ b/examples/styles-unique.html
@@ -2,13 +2,7 @@
  <head>
    <title>OpenLayers Styles Unique Value Styles Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -65,7 +59,7 @@
      Shows how to create a style based on unique feature attribute values.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/sundials.html
+++ b/examples/sundials.html
@@ -2,6 +2,7 @@
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />

    <style type="text/css">
        #map {
@@ -68,7 +69,7 @@
          Demonstrates loading and displaying a KML file on top of a basemap.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
--- a/examples/tilecache.html
+++ b/examples/tilecache.html
@@ -1,13 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers TileCache Example</title>
+    <title>OpenLayers TileCache Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -51,7 +46,7 @@
        accessible disk-based cache only.
      </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        This layer should be used for web accessible disk-based caches only.
--- a/examples/tms.html
+++ b/examples/tms.html
@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
-      <title>OpenLayers Tiled Map Service Example</title>
+    <title>OpenLayers Tiled Map Service Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
@@ -46,7 +40,7 @@
        Demonstrate the initialization and modification of a Tiled Map Service layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://labs.metacarta.com/wms-c/Basic.py/" /> layer_name <input type="text" id="layer" value="satellite" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit" onclick="addTMS()"/><br />
--- a/examples/transition.html
+++ b/examples/transition.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Transitions Example</title>
-    <style type="text/css">
-        #mapDiv {
-            width: 400px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -50,7 +44,7 @@
    <p id="shortdesc">
        Demonstrates the use of transition effects in tiled and untiled layers.
    </p>
-    <div id="mapDiv"></div>
+    <div id="mapDiv" class="smallmap"></div>
    <div id="docs">
        There are two transitions that are currently implemented: null (the
        default) and 'resize'.  The default transition effect is used when no
--- a/examples/urban.html
+++ b/examples/urban.html
@@ -2,13 +2,7 @@
  <head>
      <title>OpenLayers WorldWind Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
@@ -36,7 +30,7 @@
        Demonstrate the use of a NASA WorldWind base layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>
--- a/examples/ve.html
+++ b/examples/ve.html
@@ -2,15 +2,7 @@
  <head>
      <title>OpenLayers Virtual Earth Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
-
-
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>

    <script src="../lib/OpenLayers.js"></script>
@@ -66,7 +58,7 @@
        Demonstrates the use of a Virtual Earth base layer.
    </p>

-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
    <input type="button" onClick="javascript:add()"value="Add the marker from the map">
    <input type="button" onClick="javascript:remove()" value="Remove the marker from the map">
    <div id="docs">This example demonstrates the ability to add VirtualEarth and the and remove markers.</div>
--- a/examples/vector-features.html
+++ b/examples/vector-features.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
@@ -114,7 +108,7 @@
    Shows the use of the shows drawing simple vector features, in different styles.
 </p>

-<div id="map"></div>
+<div id="map" class="smallmap"></div>

 <div id="docs">
    <p>This example shows drawing simple vector features -- point, line, polygon
--- a/examples/vector-formats.html
+++ b/examples/vector-formats.html
@@ -2,19 +2,11 @@
  <head>
    <title>Vector Formats</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
-        html, body {
-            margin: 0;
-            padding: 1em;
-            font: 0.9em Verdana, Arial, sans serif;
-        }
        input, select, textarea {
            font: 0.9em Verdana, Arial, sans-serif;
        }
-        h2 {
-            margin-top: 0.75em;
-            font-size: 1.6em;
-        }
        #leftcol {
            position: absolute;
            top: 0;
@@ -167,7 +159,7 @@
            Shows the wide variety of vector formats that open layers supports.
        </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
        <div id="input">
            <p>Use the drop-down below to select the input/output format
            for vector features.  New features can be added by using the drawing
--- a/examples/wfs-reprojection.html
+++ b/examples/wfs-reprojection.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 550px;
-            height: 450px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script type="text/javascript">
@@ -84,7 +78,7 @@
        Shows the use of the WFS layer reprojection support 
  </p>

-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>

  <div id="docs">
    <p>This example shows automatic WFS reprojection, displaying an 'unprojected'
--- a/examples/wfs-scribble.html
+++ b/examples/wfs-scribble.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Scribble on a WFS</title>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -70,7 +64,7 @@
   <p id="shortdesc">
        Shows how you can draw features and save to GeoServer.
   </p>
-   <div id="map"></div>
+   <div id="map" class="smallmap"></div>

   <div id="docs">
   Using GeoServer and the WFS-T support in OpenLayers, draw on a map, save the results, reload the page and see the results still there!
--- a/examples/wfs-states.html
+++ b/examples/wfs-states.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>WFS: United States (GeoServer)</title>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
@@ -40,7 +34,7 @@
    Shows the use of the WFS United States (GeoServer) 
 </p>

-<div id="map"></div>
+<div id="map" class="smallmap"></div>

 <div id="docs">see:
    See <a href="WFS-js.html">WFS</a> for more info on Geoserver and WFS</div>
--- a/examples/wfs-t.html
+++ b/examples/wfs-t.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -74,7 +68,7 @@

    <a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br />
    <a href="#" onclick="map.layers[3].commit();return false">Save Cities</a><br />
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>

  <div id="docs">
      This is an example of using a WFS layer type. Note that it requires a 
--- a/examples/wfs.html
+++ b/examples/wfs.html
@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
@@ -35,6 +29,6 @@
      Using a Layer.WFS with a featureClass, one can take in XML data
      from a WFS class and display it any way you like.
    </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
  </body>
 </html>
--- a/examples/wkt.html
+++ b/examples/wkt.html
@@ -1,160 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>WKT</title>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #info {
-            position: absolute;
-            top: 70px;
-            left: 550px;
-            width: 350px;
-        }
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid gray;
-        }
-        #controls {
-            width: 512px;
-        }
-        #wktInput {
-            float: right;
-        }
-        #controlToggle {
-            padding-left: 1em;
-        }
-        #controlToggle li {
-            list-style: none;
-        }
-    </style>
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, vectors, drawControls, wkt;
-        function init(){
-            map = new OpenLayers.Map('map');
-            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
-
-            vectors = new OpenLayers.Layer.Vector("Vector Layer");
-
-            map.addLayers([wms, vectors]);
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            map.addControl(new OpenLayers.Control.MousePosition());
-
-            var options = {
-                hover: true,
-                onSelect: displayWKT
-            };
-
-            drawControls = {
-                point: new OpenLayers.Control.DrawFeature(vectors,
-                            OpenLayers.Handler.Point),
-                line: new OpenLayers.Control.DrawFeature(vectors,
-                            OpenLayers.Handler.Path),
-                polygon: new OpenLayers.Control.DrawFeature(vectors,
-                            OpenLayers.Handler.Polygon),
-                hover: new OpenLayers.Control.SelectFeature(vectors, options)
-            };
-
-            for(var key in drawControls) {
-                map.addControl(drawControls[key]);
-            }
-
-            wkt = new OpenLayers.Format.WKT();
-
-            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-            document.getElementById('noneToggle').checked = true;
-        }
-
-        function toggleControl(element) {
-            for(key in drawControls) {
-                var control = drawControls[key];
-                if(element.value == key && element.checked) {
-                    control.activate();
-                } else {
-                    control.deactivate();
-                }
-            }
-        }
-
-        function displayWKT(feature) {
-            var str = wkt.write(feature);
-            // not a good idea in general, just for this demo
-            str = str.replace(/,/g, ', ');
-            document.getElementById('info').innerHTML = str;
-        }
-
-        function parseWKT() {
-            var element = document.getElementById('wkt');
-            var features = wkt.read(element.value);
-            var bounds;
-            if(features) {
-                if(features.constructor != Array) {
-                    features = [features];
-                }
-                for(var i=0; i<features.length; ++i) {
-                    if (!bounds) {
-                        bounds = features[i].geometry.getBounds();
-                    } else {
-                        bounds.extend(features[i].geometry.getBounds());
-                    }
-
-                }
-                vectors.addFeatures(features);
-                map.zoomToExtent(bounds);
-                var plural = (features.length > 1) ? 's' : '';
-                element.value = 'Feature' + plural + ' added'
-            } else {
-                element.value = 'Bad WKT';
-            }
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">WKT Example</h1>
-    <div id="info"></div>
-        <p id="shortdesc">
-            Shows the use of WKT (Well known text) to draw features in openlayers
-    </p>
-    <div id="map"></div>
-    <div id="tags"></div>
-
-
-
-    <div id="docs">
-      <div id="controls">
-        <p>See <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects">Wikipedia</a>
-        for a description and examples of WKT.</p>
-        <div id="wktInput">
-            <textarea id="wkt" rows="6" cols="30">paste WKT here...</textarea>
-            <br />
-            <input type="button" value="add feature" onclick="parseWKT();" />
-        </div>
-        <ul id="controlToggle">
-            <li>
-                <input type="radio" name="type" value="none" id="noneToggle"
-                       onclick="toggleControl(this);" checked="checked" />
-                <label for="noneToggle">navigate</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
-                <label for="pointToggle">draw point</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
-                <label for="lineToggle">draw line</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
-                <label for="polygonToggle">draw polygon</label>
-            </li>
-            <li>
-                <input type="radio" name="type" value="hover" id="hoverToggle"
-                       onclick="toggleControl(this);" />
-                <label for="hoverToggle">view WKT for feature</label>
-            </li>
-        </ul>
-      </div>
-    </div>
-  </body>
-</html>
--- a/Show More
+++ b/Show More