diff --git a/node_modules/material-design-lite/dist/components/typography/demo.css b/node_modules/material-design-lite/dist/components/typography/demo.css
new file mode 100644
index 0000000..d1ae151
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/typography/demo.css
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.demo-page--typography {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.demo-page--typography table th {
+  padding-right: 80px;
+
+  vertical-align: top;
+  text-align: left;
+}
+
+.demo-typography--white {
+  background-color: white;
+  color: black;
+}
+
+.demo-typography--black {
+  background-color: black;
+  color: white;
+}
+
+.demo-typography--white,
+.demo-typography--black,
+.demo-typography--img-1,
+.demo-typography--img-2 {
+  width: 360px;
+  height: 272px;
+
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.demo-typography--img-1 {
+  background-image: url(../demo-images/img-1.png);
+  color: white;
+}
+
+.demo-typography--img-2 {
+  background-image: url(../demo-images/img-2.png);
+  color: white;
+}
diff --git a/node_modules/material-design-lite/dist/components/typography/demo.html b/node_modules/material-design-lite/dist/components/typography/demo.html
new file mode 100644
index 0000000..12f4ac8
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/typography/demo.html
@@ -0,0 +1,327 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>typography test</title>
+
+        <!-- Fonts -->
+    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+
+    <!-- Page styles -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
+    <link rel="stylesheet" href="../../material.min.css">
+    <link rel="stylesheet" href="../../components/demos.css">
+    <script src="../../material.min.js"></script>
+
+    
+    <style>
+      /**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.demo-page--typography {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.demo-page--typography table th {
+  padding-right: 80px;
+
+  vertical-align: top;
+  text-align: left;
+}
+
+.demo-typography--white {
+  background-color: white;
+  color: black;
+}
+
+.demo-typography--black {
+  background-color: black;
+  color: white;
+}
+
+.demo-typography--white,
+.demo-typography--black,
+.demo-typography--img-1,
+.demo-typography--img-2 {
+  width: 360px;
+  height: 272px;
+
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.demo-typography--img-1 {
+  background-image: url(../demo-images/img-1.png);
+  color: white;
+}
+
+.demo-typography--img-2 {
+  background-image: url(../demo-images/img-2.png);
+  color: white;
+}
+
+    </style>
+
+  </head>
+  <body>
+
+    <div style="padding-top: 24px;">
+      
+        
+  <h2>Scale &amp; Basic Styles</h2>
+
+  <div class="demo-preview-block demo-page--typography">
+    <table>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Display 4</th>
+        <td class="mdl-typography--display-4">Light 112px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Display 3</th>
+        <td class="mdl-typography--display-3">Regular 56px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Display 2</th>
+        <td class="mdl-typography--display-2">Regular 45px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Display 1</th>
+        <td class="mdl-typography--display-1">Regular 34px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Headline</th>
+        <td class="mdl-typography--headline">Regular 24px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Title</th>
+        <td class="mdl-typography--title">Medium 20px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Subhead</th>
+        <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Body 2</th>
+        <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Body 1</th>
+        <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Body 2 (force preferred font)</th>
+        <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Body 1 (force preferred font)</th>
+        <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Caption</th>
+        <td class="mdl-typography--caption">Regular 12px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Menu</th>
+        <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">Button</th>
+        <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+      </tr>
+    </table>
+  </div>
+
+  <h2>HTML Elements</h2>
+
+  <div class="demo-preview-block">
+
+    <h3>Headings</h3>
+
+    <h1>&lt;h1&gt;</h1>
+    <h2>&lt;h2&gt;</h2>
+    <h3>&lt;h3&gt;</h3>
+    <h4>&lt;h4&gt;</h4>
+    <h5>&lt;h5&gt;</h5>
+    <h6>&lt;h6&gt;</h6>
+
+    <h3>Formatting</h3>
+
+    <p><u>&lt;u&gt;Underlined&lt;u&gt;</u></p>
+
+    <p><b>&lt;b&gt;Bold&lt;b&gt;</b></p>
+
+    <p><strong>&lt;strong&gt;Strong&lt;strong&gt;</strong></p>
+
+    <p><i>&lt;italic&gt;Italic&lt;italic&gt;</i></p>
+
+    <p><em>&lt;em&gt;Em&lt;em&gt;</em></p>
+
+    <p><s>&lt;s&gt;Strikethrough&lt;s&gt;</s></p>
+
+    <p><small>&lt;small&gt;Small&lt;small&gt;</small></p>
+
+    <p><mark>&lt;mark&gt;Mark&lt;mark&gt;</mark></p>
+
+    <h3>Body Text</h3>
+
+    <p>&lt;p&gt;</p>
+
+    <p class="mdl-typography--body-2">&lt;p class="mdl-typography-body-2"&gt;</p>
+
+    <p class="mdl-typography--caption">&lt;p class="mdl-typography-caption"&gt;</p>
+
+    <p class="mdl-typography--menu">&lt;p class="mdl-typography-menu"&gt;</p>
+
+    <p class="mdl-typography--button">&lt;p class="mdl-typography-button"&gt;</p>
+
+    <h3>Subtitles</h3>
+
+    <h1>&lt;h1&gt; <small>Subtitle</small></h1>
+    <h2>&lt;h2&gt; <small>Subtitle</small></h2>
+    <h3>&lt;h3&gt; <small>Subtitle</small></h3>
+    <h4>&lt;h4&gt; <small>Subtitle</small></h4>
+    <h5>&lt;h5&gt; <small>Subtitle</small></h5>
+    <h6>&lt;h6&gt; <small>Subtitle</small></h6>
+
+    <h3>Description</h3>
+
+    <dl>
+      <dt>Description lists</dt>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dt>Euismod</dt>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+      <dt>Malesuada porta</dt>
+      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+    </dl>
+  </div>
+
+  <h2>Quotes</h2>
+
+  <div class="demo-preview-block">
+    <blockquote>&lt;blockquote&gt;</blockquote>
+  </div>
+
+  <h2>Alignment</h2>
+
+  <p class="mdl-typography--text-left">Left aligned text.</p>
+  <p class="mdl-typography--text-center">Center aligned text.</p>
+  <p class="mdl-typography--text-right">Right aligned text.</p>
+  <p class="mdl-typography--text-justify">Justified text.</p>
+  <p class="mdl-typography--text-nowrap">No wrap text.</p>
+
+  <h2>Transformations</h2>
+  <p class="mdl-typography--text-lowercase">Lowercased text.</p>
+  <p class="mdl-typography--text-uppercase">Uppercased text.</p>
+  <p class="mdl-typography--text-capitalize">Capitalized text.</p>
+
+  <h2>Addresses</h2>
+
+  <address>
+    <strong>Googleplex</strong><br>
+    1600 Amphitheatre Pkwy<br>
+    Mountain View, CA 94043<br>
+    <abbr title="Phone">P:</abbr> (650) 253-0000
+  </address>
+
+  <h2>Code</h2>
+
+  <h3>Multi-line code blocks</h3>
+  <p>
+    Use &lt;pre&gt; for multi-line code blocks.
+    <pre>
+&lt;p&gt;This is the first line of code&lt;/p&gt;
+&lt;p&gt;This is the second line of code&lt;/p&gt;
+  </pre>
+  </p>
+
+  <h3>Inline code blocks</h3>
+  <p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
+
+
+  <h2>Color Contrasts</h2>
+
+  <div class="demo-preview-block">
+    <div class="demo-typography--white">
+      <p class="mdl-typography--caption-color-contrast">Caption</p>
+
+      <p class="mdl-typography--body-2-color-contrast">Body</p>
+
+      <p class="mdl-typography--subhead-color-contrast">Subhead</p>
+
+      <p class="mdl-typography--title-color-contrast">Title</p>
+
+      <p class="mdl-typography--display-1-color-contrast">Display</p>
+    </div>
+  </div>
+
+  <div class="demo-preview-block">
+    <div class="demo-typography--black">
+        <p class="mdl-typography--caption-color-contrast">Caption</p>
+
+        <p class="mdl-typography--body-2-color-contrast">Body</p>
+
+        <p class="mdl-typography--subhead-color-contrast">Subhead</p>
+
+        <p class="mdl-typography--title-color-contrast">Title</p>
+
+        <p class="mdl-typography--display-1-color-contrast">Display</p>
+    </div>
+  </div>
+
+  <div class="demo-preview-block">
+    <div class="demo-typography--img-1">
+        <p class="mdl-typography--caption-color-contrast">Caption</p>
+
+        <p class="mdl-typography--body-2-color-contrast">Body</p>
+
+        <p class="mdl-typography--subhead-color-contrast">Subhead</p>
+
+        <p class="mdl-typography--title-color-contrast">Title</p>
+
+        <p class="mdl-typography--display-1-color-contrast">Display</p>
+    </div>
+  </div>
+
+  <div class="demo-preview-block">
+    <div class="demo-typography--img-2">
+      <p class="mdl-typography--caption-color-contrast">Caption</p>
+
+      <p class="mdl-typography--body-2-color-contrast">Body</p>
+
+      <p class="mdl-typography--subhead-color-contrast">Subhead</p>
+
+      <p class="mdl-typography--title-color-contrast">Title</p>
+
+      <p class="mdl-typography--display-1-color-contrast">Display</p>
+    </div>
+  </div>
+
+      
+    </div>
+    <!-- Built with love using Material Design Lite -->
+
+    
+    <script>
+      
+    </script>
+  </body>
+</html>
diff --git a/node_modules/material-design-lite/dist/components/typography/index.html b/node_modules/material-design-lite/dist/components/typography/index.html
new file mode 100755
index 0000000..924e4a8
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/typography/index.html
@@ -0,0 +1,209 @@
+
+
+
+<h2 id="introduction">Introduction</h2>
+<p>The Material Design Lite (MDL) <strong>typography</strong> component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose.</p>
+<p>The &quot;Roboto&quot; typeface is the standard for MDL display; it can easily be integrated into a web page using the CSS3 <code>@font-face</code> rule. However, Roboto is most simply accessed and included using a single standard HTML <code>&lt;link&gt;</code> element, which can be obtained at <a href="http://www.google.com/fonts#UsePlace:use/Collection:Roboto">this Google fonts page</a>.</p>
+<p>Because of the many possible variations in font display characteristics in HTML and CSS, MDL typography aims to provide simple and intuitive styles that use the Roboto font and produce visually attractive and internally consistent text results. See the typography component&#39;s <a href="http://www.google.com/design/spec/style/typography.html">Material Design specifications page</a> for details.</p>
+<h2 id="basic-use">Basic use</h2>
+<p>Include a link to the Google stylesheet that accesses the font and its desired variations.</p>
+<pre><code class="lang-html">&lt;head&gt;
+&lt;link
+ href=&#39;http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic&#39;
+ rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;
+...
+&lt;/head&gt;
+</code></pre>
+<h3 id="to-include-an-mdl-typography-component-">To include an MDL <strong>typography</strong> component:</h3>
+<p>&nbsp;1. Code any element (<code>&lt;div&gt;</code>,<code>&lt;p&gt;</code>,<code>&lt;span&gt;</code>, etc.) that can contain text, including whatever content is appropriate.</p>
+<pre><code class="lang-html">&lt;p&gt;This is a standard paragraph.&lt;/p&gt;
+</code></pre>
+<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the element using the <code>class</code> attribute.</p>
+<pre><code class="lang-html">&lt;p class=&quot;mdl-typography--body-1&quot;&gt;This is a standard paragraph.&lt;/p&gt;
+</code></pre>
+<p>The typography component is ready for use.</p>
+<h4 id="examples">Examples</h4>
+<p>A &quot;headline&quot; paragraph.</p>
+<pre><code class="lang-html">&lt;p class=&quot;mdl-typography--headline&quot;&gt;Regular 24px&lt;/p&gt;
+</code></pre>
+<p>A &quot;title&quot; paragraph.</p>
+<pre><code class="lang-html">&lt;p class=&quot;mdl-typography--title&quot;&gt;Medium 20px&lt;/p&gt;
+</code></pre>
+<p>A &quot;caption&quot; span.</p>
+<pre><code class="lang-html">&lt;span class=&quot;mdl-typography--caption&quot;&gt;Regular 12px&lt;/span&gt;
+</code></pre>
+<p>A &quot;button&quot; span.</p>
+<pre><code class="lang-html">&lt;span class=&quot;mdl-typography--button&quot;&gt;Medium (All Caps) 14px&lt;/span&gt;
+</code></pre>
+<p>A &quot;display 1&quot; table cell.</p>
+<pre><code class="lang-html">&lt;td class=&quot;mdl-typography--display-1&quot;&gt;Regular 34px&lt;/td&gt;
+</code></pre>
+<p>A &quot;body-1&quot; paragraph, also uppercased.</p>
+<pre><code class="lang-html">&lt;p class=&quot;mdl-typography--body-1 mdl-typography--text-uppercase&quot;&gt;
+ This is a standard paragraph, but uppercased.
+&lt;/p&gt;
+</code></pre>
+<blockquote>
+<p><strong>Note:</strong> Because the Roboto font is intended to apply to the entire page, standard &quot;unclassed&quot; HTML elements (e.g., heading levels, divs, paragraphs, spans, tables, etc. with no <code>class</code> attribute) and text modifiers (e.g., strong, em, small, etc.) will use Roboto, while also retaining their inherent and/or inherited characteristics.</p>
+<p>Also note that MDL typography provides some automatic adjustments based on its display environment. For example, the <code>body-1</code> style renders at 14px on a mobile device, but 13px on a desktop. You need not do anything to activate these self-modifiers; they are built into the MDL styles.</p>
+</blockquote>
+<h2 id="configuration-options">Configuration options</h2>
+<p>The MDL CSS classes specify the style to use. The table below lists the available classes and their effects.</p>
+<table>
+<thead>
+<tr>
+<th>MDL class</th>
+<th>Effect</th>
+<th>Remarks</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>mdl-typography--body-1</code></td>
+<td>Regular 14px (Device), Regular 13px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--body-1-force-preferred-font</code></td>
+<td>Regular 14px (Device), Regular 13px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--body-2</code></td>
+<td>Medium 14px (Device), Medium 13px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--body-2</code></td>
+<td>mdl-typography-body-2</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--body-2-color-contrast</code></td>
+<td>Body with color contrast</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--body-2-force-preferred-font</code></td>
+<td>Medium 14px (Device), Medium 13px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--button</code></td>
+<td>Medium (All Caps) 14px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--caption</code></td>
+<td>Regular 12px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--caption-color-contrast</code></td>
+<td>Caption with color contrast</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--display-1</code></td>
+<td>Regular 34px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--display-1-color-contrast</code></td>
+<td>Display with color contrast</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--display-2</code></td>
+<td>Regular 45px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--display-3</code></td>
+<td>Regular 56px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--display-4</code></td>
+<td>Light 112px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--headline</code></td>
+<td>Regular 24px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--menu</code></td>
+<td>Medium 14px (Device), Medium 13px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--subhead</code></td>
+<td>Regular 16px (Device), Regular 15px (Desktop)</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--subhead-color-contrast</code></td>
+<td>Subhead with color contrast</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--table-striped</code></td>
+<td>Striped table</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-capitalize</code></td>
+<td>Capitalized text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-center</code></td>
+<td>Center aligned text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-justify</code></td>
+<td>Justified text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-left</code></td>
+<td>Left aligned text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-lowercase</code></td>
+<td>Lowercased text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-nowrap</code></td>
+<td>No wrap text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-right</code></td>
+<td>Right aligned text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--text-uppercase</code></td>
+<td>Uppercased text</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--title</code></td>
+<td>Medium 20px</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-typography--title-color-contrast</code></td>
+<td>Title with color contrast</td>
+<td>Optional</td>
+</tr>
+</tbody>
+</table>
+
+