From 886906d4e88ef2fdf4ce4beaac3567d754c9119c Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Fri, 21 Oct 2016 11:41:39 +0300
Subject: [PATCH 1/3] Updates

---
 bower.json                   |  6 +++++-
 src/pages/page-section1.html | 37 +++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 7b663a8..93232d0 100644
--- a/bower.json
+++ b/bower.json
@@ -32,7 +32,11 @@
     "etools-dexiejs": "^1.0.0",
     "paper-toast": "^1.3.0",
     "paper-tabs": "^1.6.2",
-    "paper-listbox": "^1.1.2"
+    "paper-listbox": "^1.1.2",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
+    "paper-fab": "PolymerElements/paper-fab#^1.2.1",
+    "etools-dialog": "^1.0.0",
+    "etools-loading": "^1.0.3"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"
diff --git a/src/pages/page-section1.html b/src/pages/page-section1.html
index 31c9646..1d9bb49 100644
--- a/src/pages/page-section1.html
+++ b/src/pages/page-section1.html
@@ -4,6 +4,8 @@
 
 <link rel="import" href="../../styles/shared-styles.html">
 
+<link rel="import" href="../../bower_components/etools-repetable-field-set/etools-repetable-field-set.html">
+
 <dom-module id="page-section1">
 
   <template>
@@ -60,7 +62,19 @@
       <div id="pageContent">
 
         <paper-material elevation="1">
-          <h1 hidden$="{{!tab1Active}}">Tab 1 Content</h1>
+          <div hidden$="{{!tab1Active}}">
+            <h1>Tab 1 Content</h1>
+
+            <etools-repetable-field-set title="Repeatable field set 2" model="{{fieldSets}}" elevation="1" hide-plus hide-vertical-divider>
+              <template is="dom-repeat" items="{{fieldSets}}">
+                <div class$="layout horizontal flex data-row-{{index}}">
+                  <paper-input label="First Name" value="{{item.firstName}}"></paper-input>
+                  <paper-input label="Last Name" value="{{item.lastName}}"></paper-input>
+                </div>
+              </template>
+            </etools-repetable-field-set>
+          </div>
+
           <h1 hidden$="{{!tab2Active}}">Tab 2 Content</h1>
         </paper-material>
 
@@ -96,6 +110,27 @@ <h1 hidden$="{{!tab2Active}}">Tab 2 Content</h1>
         } else {
           this.fire('404');
         }
+      },
+
+      ready: function() {
+        this.fieldSets = [
+          {
+            firstName: 'John',
+            lastName: 'Doe'
+          },
+          {
+            firstName: 'Jane',
+            lastName: 'Doe'
+          },
+          {
+            firstName: 'Mike',
+            lastName: 'Yo'
+          },
+          {
+            firstName: 'Chris',
+            lastName: 'Morocanosu'
+          }
+        ];
       }
 
     });

From 526f8ac4d14d37ecb824e07cb93e29d1227c68ad Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Fri, 21 Oct 2016 15:19:29 +0300
Subject: [PATCH 2/3] testing

---
 src/pages/page-section1.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/page-section1.html b/src/pages/page-section1.html
index 1d9bb49..7c9eda8 100644
--- a/src/pages/page-section1.html
+++ b/src/pages/page-section1.html
@@ -65,7 +65,7 @@
           <div hidden$="{{!tab1Active}}">
             <h1>Tab 1 Content</h1>
 
-            <etools-repetable-field-set title="Repeatable field set 2" model="{{fieldSets}}" elevation="1" hide-plus hide-vertical-divider>
+            <etools-repetable-field-set title="Repeatable field set 2" model="{{fieldSets}}" elevation="1" show-counter>
               <template is="dom-repeat" items="{{fieldSets}}">
                 <div class$="layout horizontal flex data-row-{{index}}">
                   <paper-input label="First Name" value="{{item.firstName}}"></paper-input>

From c10d1cb430568188c2e4ff7d9adaf659553732ca Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Mon, 31 Oct 2016 11:58:03 +0200
Subject: [PATCH 3/3] layout changes

---
 bower.json                                    |   4 +-
 .../countries-dropdown.html                   |  32 ++++--
 .../page-elements/page-with-sidebar.html      |  38 +++++++
 .../page-elements/simple-page.html            |  32 ++++++
 src/app-elements/page-header/page-header.html |  77 +++++++++++++
 src/app-shell.html                            |  30 ++---
 src/pages/page-section1.html                  | 103 ++++++------------
 src/pages/page-section2.html                  |  33 +++---
 src/pages/page-section3.html                  |  39 +++----
 styles/page-layout-styles.html                |  33 ++++++
 styles/shared-styles.html                     |  53 ++-------
 11 files changed, 300 insertions(+), 174 deletions(-)
 create mode 100644 src/app-elements/page-elements/page-with-sidebar.html
 create mode 100644 src/app-elements/page-elements/simple-page.html
 create mode 100644 src/app-elements/page-header/page-header.html
 create mode 100644 styles/page-layout-styles.html

diff --git a/bower.json b/bower.json
index 93232d0..ff833d0 100644
--- a/bower.json
+++ b/bower.json
@@ -36,7 +36,9 @@
     "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
     "paper-fab": "PolymerElements/paper-fab#^1.2.1",
     "etools-dialog": "^1.0.0",
-    "etools-loading": "^1.0.3"
+    "etools-loading": "^1.0.3",
+    "etools-page-refresh": "^1.0.0",
+    "etools-content-panel": "^1.0.1"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"
diff --git a/src/app-elements/countries-dropdown/countries-dropdown.html b/src/app-elements/countries-dropdown/countries-dropdown.html
index 04e633a..69368e2 100644
--- a/src/app-elements/countries-dropdown/countries-dropdown.html
+++ b/src/app-elements/countries-dropdown/countries-dropdown.html
@@ -4,6 +4,8 @@
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../../styles/countries-flags/country-flag-styles.html">
 
+<link rel="import" href="../countries-data/countries-data.html">
+
 <dom-module id="countries-dropdown">
   <template>
     <style include="country-flag-styles">
@@ -12,18 +14,24 @@
         display: block;
       }
 
+      :host(:hover) {
+        cursor: pointer;
+      }
+
       paper-dropdown-menu {
         width: 160px;
-
         --paper-menu-button-dropdown-background: var(--light-theme-content-color);
-
         --paper-input-container-color: var(--light-secondary-text-color);
-
         --paper-input-container-focus-color: var(--light-secondary-text-color);
-
         --paper-input-container-underline: {
           display: none;
         };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        --paper-input-container-underline-disabled: {
+          display: none;
+        };
 
         --paper-input-container-input: {
           color: var(--light-primary-text-color);
@@ -32,6 +40,15 @@
         --paper-dropdown-menu-icon: {
           color: var(--light-icon-color);
         };
+
+        --paper-input-container-label: {
+          top: 4px;
+        };
+        --paper-input-container-input: {
+          margin-bottom: 2px;
+          color: var(--light-primary-text-color);
+          cursor: pointer;
+        }
       }
 
       paper-listbox {
@@ -42,10 +59,11 @@
       paper-item {
         font-size: 15px;
         white-space: nowrap;
+        cursor: pointer;
       }
 
       iron-icon {
-        bottom: 3px;
+        bottom: 2px;
         min-width: 24px;
         min-height: 20px;
         margin-right: 8px;
@@ -56,20 +74,18 @@
       }
 
     </style>
+    <countries-data countries="{{countries}}"></countries-data>
 
     <iron-icon class$="[[country.imgClass]]" prefix></iron-icon>
 
     <paper-dropdown-menu id="menu" label="Country" noink no-label-float>
-
       <paper-listbox class="dropdown-content" on-iron-select="_countrySelected">
-
         <template id="repeat" is="dom-repeat" items="[[countries]]">
           <paper-item>
             <iron-icon class$="[[item.imgClass]]" item-icon></iron-icon>
             [[item.name]]
           </paper-item>
         </template>
-
       </paper-listbox>
 
     </paper-dropdown-menu>
diff --git a/src/app-elements/page-elements/page-with-sidebar.html b/src/app-elements/page-elements/page-with-sidebar.html
new file mode 100644
index 0000000..4e32dde
--- /dev/null
+++ b/src/app-elements/page-elements/page-with-sidebar.html
@@ -0,0 +1,38 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/etools-content-panel/etools-content-panel.html">
+
+<dom-module id="page-with-sidebar">
+  <template>
+    <style include="page-layout-styles">
+      :host {
+        @apply(--layout-horizontal);
+        width: 100%;
+      }
+    </style>
+
+    <div id="pageContent">
+      <etools-content-panel title="Some data">
+        <p>Tab 1 page data section...</p>
+      </etools-content-panel>
+    </div>
+
+    <div id="sidebar">
+      <etools-content-panel title="Some sidebar content">
+        <p>Synced from VISION</p>
+      </etools-content-panel>
+    </div>
+
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'page-with-sidebar'
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/src/app-elements/page-elements/simple-page.html b/src/app-elements/page-elements/simple-page.html
new file mode 100644
index 0000000..ba00675
--- /dev/null
+++ b/src/app-elements/page-elements/simple-page.html
@@ -0,0 +1,32 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/etools-content-panel/etools-content-panel.html">
+
+<dom-module id="simple-page">
+  <template>
+    <style include="page-layout-styles">
+      :host {
+        @apply(--layout-horizontal);
+        width: 100%;
+      }
+    </style>
+
+    <div id="pageContent">
+      <etools-content-panel title="Some data">
+        <p>Tab 2 page data section...</p>
+      </etools-content-panel>
+    </div>
+
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'simple-page'
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/src/app-elements/page-header/page-header.html b/src/app-elements/page-header/page-header.html
new file mode 100644
index 0000000..c35ffaf
--- /dev/null
+++ b/src/app-elements/page-header/page-header.html
@@ -0,0 +1,77 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<link rel="import" href="../../../bower_components/etools-page-refresh/etools-page-refresh.html">
+
+<link rel="import" href="../countries-dropdown/countries-dropdown.html">
+
+<link rel="import" href="../../../styles/shared-styles.html">
+
+<dom-module id="page-header">
+
+  <template>
+    <style include="shared-styles">
+      div[main-title] {
+        position: relative;
+        bottom: 1px;
+        margin-left: 24px;
+        text-transform: capitalize;
+      }
+
+      div[main-title],
+      etools-page-refresh {
+        color: var(--light-primary-text-color);
+      }
+
+      #menuButton {
+        display: block;
+      }
+
+      .right-side {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+      }
+
+      etools-page-refresh {
+        margin-left: 25px;
+      }
+
+      @media (min-width: 850px) {
+        #menuButton {
+          display: none;
+        }
+        div[main-title] {
+          margin-left: 32px;
+        }
+      }
+    </style>
+    <app-toolbar>
+      <paper-icon-button id="menuButton" class="light" icon="menu" on-tap="openDrawer"></paper-icon-button>
+      <div main-title>{{title}}</div>
+      <div class="right-side">
+        <countries-dropdown id="countries" countries="[[countries]]"></countries-dropdown>
+        <etools-page-refresh></etools-page-refresh>
+      </div>
+    </app-toolbar>
+  </template>
+
+  <script>
+    (function() {
+      Polymer({
+        is: 'page-header',
+
+        properties: {
+          title: String
+        },
+
+        openDrawer: function() {
+          this.fire('drawer');
+        }
+
+      });
+    })();
+  </script>
+
+</dom-module>
diff --git a/src/app-shell.html b/src/app-shell.html
index cc1ea84..1dfad63 100644
--- a/src/app-shell.html
+++ b/src/app-shell.html
@@ -32,6 +32,7 @@
 <link rel="import" href="app-elements/countries-data/countries-data.html">
 
 <link rel="import" href="../styles/shared-styles.html">
+<link rel="import" href="../styles/page-layout-styles.html">
 <link rel="import" href="../styles/app-theme.html">
 
 <dom-module id="app-shell">
@@ -110,8 +111,6 @@
 
     <user-data permissions="{{permissions}}"></user-data>
 
-    <countries-data countries="{{countries}}"></countries-data>
-
     <app-location route="{{route}}"></app-location>
 
     <app-route
@@ -159,22 +158,17 @@
       </app-drawer>
 
       <!-- Main content -->
-      <div id="mainContent">
-
-        <iron-pages id="pages"
-                    selected="[[page]]"
-                    attr-for-selected="name"
-                    fallback-selection="not-found"
-                    role="main">
-          <page-section1 name="section1" route="{{subroute}}"></page-section1>
-          <page-section2 name="section2" route="{{subroute}}"></page-section2>
-          <page-section3 name="section3" route="{{subroute}}"></page-section3>
-          <page-not-found name="not-found"></page-not-found>
-        </iron-pages>
-
-        <countries-dropdown id="countries" countries="[[countries]]"></countries-dropdown>
-
-      </div>
+
+      <iron-pages id="pages"
+                  selected="[[page]]"
+                  attr-for-selected="name"
+                  fallback-selection="not-found"
+                  role="main">
+        <page-section1 name="section1" route="{{subroute}}"></page-section1>
+        <page-section2 name="section2" route="{{subroute}}"></page-section2>
+        <page-section3 name="section3" route="{{subroute}}"></page-section3>
+        <page-not-found name="not-found"></page-not-found>
+      </iron-pages>
 
     </app-drawer-layout>
 
diff --git a/src/pages/page-section1.html b/src/pages/page-section1.html
index 7c9eda8..b31d43e 100644
--- a/src/pages/page-section1.html
+++ b/src/pages/page-section1.html
@@ -2,15 +2,18 @@
 <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
-<link rel="import" href="../../styles/shared-styles.html">
+<link rel="import" href="../app-elements/page-header/page-header.html">
+<link rel="import" href="../app-elements/page-elements/page-with-sidebar.html">
+<link rel="import" href="../app-elements/page-elements/simple-page.html">
 
-<link rel="import" href="../../bower_components/etools-repetable-field-set/etools-repetable-field-set.html">
+<link rel="import" href="../../styles/page-layout-styles.html">
+<link rel="import" href="../../styles/shared-styles.html">
 
 <dom-module id="page-section1">
 
   <template>
 
-    <style include="shared-styles">
+    <style include="page-layout-styles shared-styles">
 
     :host {
       display: block;
@@ -38,47 +41,39 @@
 
       <app-header id="header" fixed shadow>
 
-        <app-toolbar class="layout horizontal">
-          <paper-icon-button class="light" icon="menu" on-tap="openDrawer"></paper-icon-button>
-          <div main-title>Section 1{{tabName}}</div>
-        </app-toolbar>
+        <page-header title$="Page section 1 - [[routeData.tab]]"></page-header>
 
-        <app-toolbar id="tabs">
+        <div id="tabsWrapper" hidden$="{{!tabsActive}}">
+          <app-toolbar id="tabs">
 
-          <paper-tabs selected="[[routeData.tab]]" attr-for-selected="name" fallback-selection="tab1" noink bottom-item>
-            <paper-tab name="tab1" link>
-              <a href="/section1/tab1" class="tab-link" tabindex="-1">tab 1</a>
-            </paper-tab>
+            <paper-tabs selected="[[routeData.tab]]" attr-for-selected="name" fallback-selection="tab1" noink bottom-item>
+              <paper-tab name="tab1" link>
+                <a href="/section1/tab1" class="tab-link" tabindex="-1">tab 1</a>
+              </paper-tab>
 
-            <paper-tab name="tab2" link>
-              <a href="/section1/tab2" class="tab-link" tabindex="-1">tab 2</a>
-            </paper-tab>
-          </paper-tabs>
+              <paper-tab name="tab2" link>
+                <a href="/section1/tab2" class="tab-link" tabindex="-1">tab 2</a>
+              </paper-tab>
+            </paper-tabs>
 
-        </app-toolbar>
+          </app-toolbar>
+        </div>
 
       </app-header>
 
-      <div id="pageContent">
-
-        <paper-material elevation="1">
-          <div hidden$="{{!tab1Active}}">
-            <h1>Tab 1 Content</h1>
-
-            <etools-repetable-field-set title="Repeatable field set 2" model="{{fieldSets}}" elevation="1" show-counter>
-              <template is="dom-repeat" items="{{fieldSets}}">
-                <div class$="layout horizontal flex data-row-{{index}}">
-                  <paper-input label="First Name" value="{{item.firstName}}"></paper-input>
-                  <paper-input label="Last Name" value="{{item.lastName}}"></paper-input>
-                </div>
-              </template>
-            </etools-repetable-field-set>
-          </div>
+      <iron-pages id="categoryPages"
+                  selected="{{routeData.tab}}"
+                  attr-for-selected="name"
+                  fallback-selection="tab1"
+                  role="main">
 
-          <h1 hidden$="{{!tab2Active}}">Tab 2 Content</h1>
-        </paper-material>
-
-      </div>
+        <div class="page" name="tab1">
+          <page-with-sidebar></page-with-sidebar>
+        </div>
+        <div class="page" name="tab2">
+          <simple-page></simple-page>
+        </div>
+      </iron-pages>
 
     </app-header-layout>
 
@@ -90,47 +85,17 @@ <h1 hidden$="{{!tab2Active}}">Tab 2 Content</h1>
 
       is: 'page-section1',
 
-      properties: {
-
-        tabName: String
-
-      },
+      properties: {},
 
       observers: [
         '_tabChanged(routeData.tab)'
       ],
 
-      openDrawer: function() {
-        this.fire('drawer');
-      },
-
       _tabChanged: function(tab) {
-        if (tab) {
-          this.tabName = ' - ' + tab;
-        } else {
+        var tabs = ['tab1', 'tab2'];
+        if (tabs.indexOf(tab) == -1) {
           this.fire('404');
         }
-      },
-
-      ready: function() {
-        this.fieldSets = [
-          {
-            firstName: 'John',
-            lastName: 'Doe'
-          },
-          {
-            firstName: 'Jane',
-            lastName: 'Doe'
-          },
-          {
-            firstName: 'Mike',
-            lastName: 'Yo'
-          },
-          {
-            firstName: 'Chris',
-            lastName: 'Morocanosu'
-          }
-        ];
       }
 
     });
diff --git a/src/pages/page-section2.html b/src/pages/page-section2.html
index 23c3775..9ac9578 100644
--- a/src/pages/page-section2.html
+++ b/src/pages/page-section2.html
@@ -1,12 +1,15 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../app-elements/page-header/page-header.html">
+
+<link rel="import" href="../../styles/page-layout-styles.html">
 <link rel="import" href="../../styles/shared-styles.html">
 
 <dom-module id="page-section2">
 
   <template>
 
-    <style include="shared-styles">
+    <style include="page-layout-styles shared-styles">
 
     :host {
       display: block;
@@ -18,17 +21,21 @@
 
       <app-header fixed shadow>
 
-        <app-toolbar>
-          <paper-icon-button class="light" icon="menu" on-tap="openDrawer"></paper-icon-button>
-          <div main-title>Section 2</div>
-        </app-toolbar>
+        <page-header title="Page section 2"></page-header>
 
       </app-header>
 
-      <div id="pageContent">
-        <paper-material elevation="1">
-          <h1>Section2</h1>
-        </paper-material>
+      <div class="page">
+        <div id="pageContent">
+            <h1>Section 2 content</h1>
+            <p>It is a long established fact that a reader will be distracted by the readable content of a page when
+              looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
+              of letters, as opposed to using 'Content here, content here', making it look like readable English.
+              Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,
+              and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
+              have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+            </p>
+        </div>
       </div>
 
     </app-header-layout>
@@ -41,13 +48,7 @@ <h1>Section2</h1>
 
       is: 'page-section2',
 
-      properties: {
-
-      },
-
-      openDrawer: function() {
-        this.fire('drawer');
-      },
+      properties: {},
 
     });
 
diff --git a/src/pages/page-section3.html b/src/pages/page-section3.html
index 48bc0e3..8de3537 100644
--- a/src/pages/page-section3.html
+++ b/src/pages/page-section3.html
@@ -1,16 +1,19 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../app-elements/page-header/page-header.html">
+
+<link rel="import" href="../../styles/page-layout-styles.html">
 <link rel="import" href="../../styles/shared-styles.html">
 
 <dom-module id="page-section3">
 
   <template>
 
-    <style include="shared-styles">
+    <style include="page-layout-styles shared-styles">
 
-    :host {
-      display: block;
-    }
+      :host {
+        display: block;
+      }
 
     </style>
 
@@ -18,17 +21,21 @@
 
       <app-header fixed shadow>
 
-        <app-toolbar>
-          <paper-icon-button class="light" icon="menu" on-tap="openDrawer"></paper-icon-button>
-          <div main-title>Section 3</div>
-        </app-toolbar>
+        <page-header title="Page section 2"></page-header>
 
       </app-header>
 
-      <div id="pageContent">
-        <paper-material elevation="1">
-          <h1>Section3</h1>
-        </paper-material>
+      <div class="page">
+        <div id="pageContent">
+          <h1>Section 3 content</h1>
+          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
+            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
+            of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
+            Aldus PageMaker including versions of Lorem Ipsum.
+          </p>
+        </div>
       </div>
 
     </app-header-layout>
@@ -41,13 +48,7 @@ <h1>Section3</h1>
 
       is: 'page-section3',
 
-      properties: {
-
-      },
-
-      openDrawer: function() {
-        this.fire('drawer');
-      },
+      properties: {},
 
     });
 
diff --git a/styles/page-layout-styles.html b/styles/page-layout-styles.html
new file mode 100644
index 0000000..e1bf3dd
--- /dev/null
+++ b/styles/page-layout-styles.html
@@ -0,0 +1,33 @@
+<!-- This file will be dedicated to page layout and related layout elements. -->
+
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<dom-module id="page-layout-styles">
+  <template>
+    <style>
+      app-header-layout {
+        position: inherit;
+      }
+
+      app-header {
+        background-color: var(--primary-background-color);
+      }
+
+      .page {
+        @apply(--layout-horizontal);
+        @apply(--layout-wrap);
+        padding: 25px;
+      }
+
+      #pageContent {
+        @apply(--layout-flex-9);
+      }
+
+      #sidebar {
+        @apply(--layout-flex-3);
+        padding-left: 25px;
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/styles/shared-styles.html b/styles/shared-styles.html
index 3d12c70..0870b66 100644
--- a/styles/shared-styles.html
+++ b/styles/shared-styles.html
@@ -1,13 +1,3 @@
-<!--
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <!-- shared styles for all views -->
@@ -32,38 +22,6 @@
         outline: inherit;
       }
 
-      app-header {
-        background-color: var(--primary-background-color);
-      }
-
-      app-header div[main-title] {
-        position: relative;
-        bottom: 1px;
-        margin-left: 24px;
-        text-transform: capitalize;
-        color: var(--light-primary-text-color);
-      }
-
-      app-header paper-icon-button[icon="menu"] {
-        display: block;
-      }
-
-      #pageContent {
-        padding: 48px 15px;
-      }
-
-      @media (min-width: 850px) {
-        app-header paper-icon-button[icon="menu"] {
-          display: none;
-        }
-        app-header div[main-title] {
-          margin-left: 32px;
-        }
-        #pageContent {
-          padding: 48px 62px;
-        }
-      }
-
       app-toolbar {
         height: var(--toolbar-height);
       }
@@ -94,8 +52,12 @@
         @apply(--layout-center-center);
       }
 
+      iron-pages[hidden] {
+        display: none;
+      }
+
       paper-material {
-        padding: 10px 20px;
+        padding: 15px 20px;
         background-color: var(--light-theme-content-color);
       }
 
@@ -117,6 +79,11 @@
         --paper-icon-button-ink-color: var(--light-ink-color);
       }
 
+      /* responsive css rules */
+      @media (min-width: 850px) {
+
+      }
+
     </style>
   </template>
 </dom-module>