diff --git a/dist/framework.css b/dist/framework.css
index 43eae6806b..3fa899d3c0 100644
--- a/dist/framework.css
+++ b/dist/framework.css
@@ -233,7 +233,7 @@ a.list-item {
   display: block;
   width: 270px; }
 
-header, main, footer {
+.bar-header, .content, .bar-footer {
   z-index: 100;
   left: 0;
   right: 0;
@@ -244,9 +244,9 @@ header, main, footer {
   -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-.ion-panel-opened > section > header,
-.ion-panel-opened > section > main,
-.ion-panel-opened > section > footer {
+.ion-panel-opened .bar-header,
+.ion-panel-opened .content,
+.ion-panel-opened .bar-footer {
   -webkit-transform: translate3d(270px, 0, 0);
   -moz-transform: translate3d(270px, 0, 0);
   transform: translate3d(270px, 0, 0); }
diff --git a/example/panels.html b/example/panels.html
index bc84405965..4837527f0b 100644
--- a/example/panels.html
+++ b/example/panels.html
@@ -18,7 +18,7 @@
         <h1 class="title">Panels</h1>
       </header>
 
-      <main class="content-padded has-header">
+      <main class="content content-padded has-header">
         <p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p>
         <p id="event-log"></p>
       </main>
diff --git a/example/panels.html.orig b/example/panels.html.orig
deleted file mode 100644
index 29e5c76a06..0000000000
--- a/example/panels.html.orig
+++ /dev/null
@@ -1,57 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Panels</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
-    <link rel="stylesheet" href="../../dist/framework.css">
-
-  </head>
-  <body>
-
-<<<<<<< HEAD
-    <section data-default-panel="my-left-panel">
-=======
-    <section class="panel-page-container">
-
-      <section id="this-panel" data-panel="left-panel" class="panel-content">
-        Panel!
-      </section>
->>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
-
-      <header class="bar bar-header bar-dark">
-        <button class="button" data-toggle-panel="my-left-panel"></button>
-        <h1 class="title">Panels</h1>
-      </header>
-
-      <main class="content-padded has-header">
-<<<<<<< HEAD
-        <p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p>
-        <p id="event-log"></p>
-=======
-        <p>A whole bunch of content</p>
-        <a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
->>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
-      </main>
-
-      <footer class="bar bar-footer bar-dark">
-        <h3 class="title">Panels</h3>
-      </footer>
-
-    </section>
-
-
-    <section data-panel="my-left-panel">
-      This is my default left side panel!
-    </section>
-
-    <section data-panel="my-other-left-panel">
-      This is my other left side panel!
-    </section>
-
-
-    <script src="../../js/framework/framework-panel.js"></script>
-  </body>
-</html>
diff --git a/scss/framework/structure/_panel.scss b/scss/framework/structure/_panel.scss
index 1110dcaa24..ba1c75f3d7 100644
--- a/scss/framework/structure/_panel.scss
+++ b/scss/framework/structure/_panel.scss
@@ -12,7 +12,7 @@
   width: $panelOpenWidth;
 }
 
-header, main, footer {
+.bar-header, .content, .bar-footer {
   z-index: 100;
   left: 0;
   right: 0;
@@ -26,9 +26,9 @@ header, main, footer {
   transform: translate3d(0, 0, 0);
 }
 
-.ion-panel-opened > section > header,
-.ion-panel-opened > section > main,
-.ion-panel-opened > section > footer 
+.ion-panel-opened .bar-header,
+.ion-panel-opened .content,
+.ion-panel-opened .bar-footer
 {
   -webkit-transform: translate3d($panelOpenWidth, 0,0 );
   -moz-transform: translate3d($panelOpenWidth, 0,0 );
