g-page: modified to use an external stylesheet

src/css/g-page.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+}

src/g-page.html

@@ -5,29 +5,30 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-page">
+<element name="g-page" attributes="nofit">
 <link rel="components" href="g-component.html">
+<link rel="stylesheet" href="css/g-page.css" />
 <template>
-  <content></content>
 </template>
 <script>
   this.component({
-    shadowRootCreated: function() {
-      this.makeFittable();
+    shadowRootCreated: function(inRoot) {
+      this.makeFittable(inRoot);
     },
     prototype: {
-      makeFittable: function() {
-        var sheet = document.querySelector('style[fittable]');
+     makeFittable: function(inRoot) {
+        var sheet = document.querySelector('style[g-page]');
         if (!sheet) {
-          sheet = document.createElement('style');
-          sheet.setAttribute('fittable', '');
-          sheet.textContent = 'html, body { ' +
-              'height: 100%;' +
-              'margin: 0;' +
-              '}';
+          sheet = inRoot.querySelector('style');
+          sheet.setAttribute('g-page', '');
+          sheet.removeAttribute('scoped');
           document.head.appendChild(sheet);
         }
+        if (!this.nofit) {
+          sheet.textContent += '\n' + this.tagName.toLowerCase() + ' {height: 100%;}\n';
+        }
       }
+     
     }
   });
 </script>