update look and feel of demo, add/remove event listeners

demo/www/css/index.css

@@ -41,22 +41,13 @@ body {
     height:100%;
     margin:0px;
     padding:0px;
-    text-transform:uppercase;
+    padding-top:20px;
     width:100%;
 }
 
 /* Portrait layout (default) */
 .app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
     text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
 }
 
 /* Landscape layout (with min-width) */
@@ -69,6 +60,19 @@ body {
     }
 }
 
+button {
+    border:solid 1px #946A4b;
+    background:#666;
+    color:#fff;
+    border-radius:4px;
+    -webkit-border-radius:4px;
+    font-size:12px;
+
+    margin:8px;
+    padding:6px;
+    width:128px;
+}
+
 h1 {
     font-size:24px;
     font-weight:normal;
@@ -102,13 +106,13 @@ h1 {
     50% { opacity: 0.4; }
     to { opacity: 1.0; }
 }
- 
+
 @-webkit-keyframes fade {
     from { opacity: 1.0; }
     50% { opacity: 0.4; }
     to { opacity: 1.0; }
 }
- 
+
 .blink {
     animation:fade 3000ms infinite;
     -webkit-animation:fade 3000ms infinite;