diff --git a/examples/full-screen.html b/examples/full-screen.html
index a98b3672e2..63e3960801 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="style.css" type="text/css">
     <style type="text/css">
       html, body, #map {
         margin: 0;
@@ -11,7 +12,6 @@
       }
       .overlay {
         display: none;
-        font-family: Verdana, Arial, Helvetica, sans-serif;
         font-size: 10pt;
       }
       .ol-overlaycontainer .overlay {
@@ -29,10 +29,10 @@
       	margin-left: -107px;
       	margin-bottom: 12px;
       }
-      
-      
+
+
       /* Popup CSS generated with http://cssarrowplease.com/ */
-      
+
       .arrow_box {
       	position: relative;
       	background: #88b7d5;
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index bd9f7ebd33..0ff43d6427 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html>
     <head>
+        <link rel="stylesheet" href="../css/ol.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
         <style type="text/css">
             .map {
                 width: 400px;
                 height: 400px;
-                border: thin solid;
+                border: thin solid #cccccc;
+                margin: 1em;
             }
         </style>
-        <link rel="stylesheet" href="../css/ol.css" type="text/css">
         <title>ol3 side-by-side demo</title>
     </head>
     <body>
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index c696da15ab..1e84e7febf 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -24,7 +24,7 @@ var domMap = new ol.Map(document.getElementById('domMap'), {
   center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
   renderer: ol.RendererHint.DOM,
-  zoom: 0
+  zoom: 1
 });
 
 domMap.getControls().push(new ol.control.MousePosition({
diff --git a/examples/style.css b/examples/style.css
new file mode 100644
index 0000000000..fc4956eb66
--- /dev/null
+++ b/examples/style.css
@@ -0,0 +1,56 @@
+/**
+ * Basic Typography
+ */
+body {
+    font-family: Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    font-size: 85%;
+    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 {
+    color: #436976;
+    background-color: transparent;
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #003a6b;
+    background-color: transparent;
+    font: 100% 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;
+}
diff --git a/examples/two-layers.html b/examples/two-layers.html
index cb5c5e323b..cbad57efe9 100644
--- a/examples/two-layers.html
+++ b/examples/two-layers.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html>
     <head>
+        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
         <style type="text/css">
             .map {
                 width: 400px;
                 height: 400px;
-                border: thin solid;
+                border: thin solid #cccccc;
+                margin: 1em;
             }
         </style>
-        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
         <title>ol3 two-layers demo</title>
     </head>
     <body>
