worked on simulation browser, looks are different

www/app/view/List.js

@@ -18,14 +18,15 @@ Ext.define("app.view.List",
 		navigationBar:
 		{
 			title: 'simulations',
-			ui: 'darker_blue',
+			ui: 'charcoal',
             items : [{
     	          id: 'simulationOptions',
 	              xtype: 'button',
-                  text: 'simulations',
+                  iconCls: 'list',
+                  iconMask: true,
                   left: '100%',
                   top: 7,
-                  ui: ['square','blue'],
+                  ui: ['square'],
             }]
 		},
 

www/app/view/Simulation.js

@@ -8,7 +8,7 @@ Ext.define('app.view.Simulation', {
         {   
             docked: 'top',
             xtype: 'toolbar',
-            ui: 'darker_blue',
+            ui: 'charcoal',
             title: 'Flood Simulation Browser',
         },
         {

www/app/view/StepsOverlay.js

@@ -5,9 +5,10 @@ Ext.define('app.view.StepsOverlay', {
 	
     
     config: {
-    	style: "background: none",
+    	// style: "background-image: url(resources/images/bg.png) x-repeat y-repeat !important",
     	id: 'overlay',
-    	html: 'Controls',
+    	style: 'background: none;',
+    	html: '<div id="controls_title"><h2>Controls<h2></div>',
     	showAnimation: {
     		type: 'slideIn',
     		direction:'left',
@@ -26,18 +27,17 @@ Ext.define('app.view.StepsOverlay', {
 	    {
 	        xtype: 'button',
 	        id: 'closebutton',
-	        iconCls: 'delete',
-	        iconMask: true,
-	        height: 10,   
-	        ui: 'red',               
-	        top: 0,
+	        top: -10,
 	        right: 0,
+	        ui:'plain',
 	        border: 'solid',
+	        style: 'color: white; background: none',
+	        html: 'x',
 	        handler: this.closebutton,
 	        scope: this,
 	    },
 	    {
-	        top: 10,
+	        top: 30,
 	        left: 35,
 	        align: 'center',
 	        items : [

www/build/package/index.html

@@ -83,12 +83,41 @@
             border: solid;
             border-width: 1px;
             border-color: #a9a9a9;
+            background-image: url('resources/images/bg.png');
+        }
+
+        .x-list .x-list-inner {
+            background-image: url('resources/images/bg.png');
+        }
+
+        .x-list-item {
+
         }
 
         .x-button-icon.down.x-icon-mask {
             background: url(up.png);
         }
 
+        #controls_title {
+            
+        }
+
+        .x-back-button {
+            
+        }
+
+        #controls_title h2 {
+            color: white;
+            border: white;
+            background: rgb(169,3,41); /* Old browsers */
+        background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
+        background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
+        background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
+        }
 
     </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

www/index.html

@@ -83,12 +83,41 @@
             border: solid;
             border-width: 1px;
             border-color: #a9a9a9;
+            background-image: url('resources/images/bg.png');
+        }
+
+        .x-list .x-list-inner {
+            background-image: url('resources/images/bg.png');
+        }
+
+        .x-list-item {
+
         }
 
         .x-button-icon.down.x-icon-mask {
             background: url(up.png);
         }
 
+        #controls_title {
+            
+        }
+
+        .x-back-button {
+            
+        }
+
+        #controls_title h2 {
+            color: white;
+            border: white;
+            background: rgb(169,3,41); /* Old browsers */
+        background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
+        background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
+        background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
+        }
 
     </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

www/resources/sass/app.scss

@@ -2,11 +2,12 @@
 @include pictos-iconmask('close_overlay');
 @include pictos-iconmask('play1');
 @include pictos-iconmask('pause');
+@include pictos-iconmask('list');
 @include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
 @include sencha-toolbar-ui('lighter_blue', #00538F, 'glossy');
 @include sencha-button-ui('blue', #003F69, 'glossy');
 @include sencha-button-ui('red', #C40000, 'glossy');
-
+@include sencha-toolbar-ui('charcoal', #111111,'glossy');
 
 // You may remove any of the following modules that you
 // do not use in order to create a smaller css file.
@@ -26,9 +27,22 @@
 
 
 x-list-item {
-// needs latest Compass, add '@import "compass"' to your scss
-@include filter-gradient(#00000000, #a6000000, horizontal); // IE6-9
-@include background-image(linear-gradient(left, rgba(0,0,0,0) 0%,rgba(132,2,2,0.77) 76%,rgba(5,0,0,1) 99%,rgba(0,0,0,0.65) 100%));
-✔ copied to clipboard copy
+	// needs latest Compass, add '@import "compass"' to your scss
+	@include filter-gradient(#000, #a60000, horizontal); // IE6-9
+	@include background-image(linear-gradient(left, rgba(0,0,0,0) 0%,rgba(132,2,2,0.77) 76%,rgba(5,0,0,1) 99%,rgba(0,0,0,0.65) 100%));
+}
+
+.x-list {
+
+}
+
+.x-button-back {
+	// needs latest Compass, add '@import "compass"' to your scss
+	background-color: rgb(109,179,242); // Old browsers
+	@include filter-gradient(#6db3f2, #1e69de, vertical); // IE6-9
+	@include background-image(linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%));
+}
+
+#overlay {
 
 }
\ No newline at end of file