v5

The biggest release ever!
- Complete Redesign
  - Powered by MDL from Google instead of Materialize
  - Faster, Prettier, More Stable, and works on older browsers better.
- Use TuneIn Player instead of Radionomy
  - TuneIn's resizes to fit way better
  - Moved Radionomy Link to Other Players
- No more drawer
  - As much as I like it, it's confusing and doesn't allow for single page nav.
  - Using Tabs
  - Tabs or Cards replaced most of the modals and buttons.
- Currently missing from inital version
  - Webmenu Subscribe
  - Contribute menu
  - Song Submit Link

assets/styles.css

@@ -0,0 +1,115 @@
+html, body {
+  font-family: 'Roboto', 'Helvetica', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+.mdl-demo .mdl-layout__header-row { padding-left:40px; }
+.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 { font-size:inherit; }
+.mdl-demo .mdl-layout__tab-bar-button { display:none; }
+.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button { display:none; }
+.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
+.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
+  overflow: visible;
+}
+.mdl-demo .mdl-layout__tab-bar-container { height:64px; }
+.mdl-demo .mdl-layout__tab-bar {
+  padding: 0;
+  padding-left: 16px;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab { height:64px;line-height:64px; }
+.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after { background-color: purple;height: 4px; }
+.mdl-demo main > .mdl-layout__tab-panel {padding:8px; }
+.mdl-demo .mdl-card {
+  height: auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.mdl-demo .mdl-card > * { height:auto; }
+.mdl-demo .mdl-card .mdl-card__supporting-text {
+  margin: 40px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding: 0;
+  color: inherit;
+  width: calc(100% - 80px);
+}
+.mdl-demo.mdl-demo .mdl-card__supporting-text h4 { margin-top:0;margin-bottom:20px; }
+.mdl-demo .mdl-card__actions { margin:0;padding:4px 20px;color:inherit; }
+.mdl-demo .mdl-card__actions a { color:#00BCD4;margin:0; }
+.mdl-demo .mdl-card__actions a:hover,.mdl-demo .mdl-card__actions a:active { color:inherit;background-color:transparent; }
+.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+.mdl-demo .mdl-layout__content section:not(:last-of-type) {
+  position: relative;
+  margin-bottom: 48px;
+}
+.mdl-demo section.section--center { max-width: 1000px; }
+.mdl-demo section > header{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.mdl-demo section > .section__play-btn {
+  min-height: 100px;
+}
+.mdl-demo section > button { position:absolute;z-index:99;top:8px;right:8px; }
+.mdl-demo section .section__text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+  padding-top: 8px;
+}
+.mdl-demo section .section__text h5 { font-size:inherit;margin:0;margin-bottom:0.5em; }
+.mdl-demo section .section__text a { text-decoration:none; }
+.mdl-demo section.section--footer { padding:64px 0;margin: 0 -8px -8px -8px; }
+.mdl-demo section.section--center .section__text:not(:last-child) { border-bottom:1px solid rgba(0,0,0,.13); }
+.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child { margin-bottom:24px; }
+.mdl-demo #schedule section { margin-bottom:72px; }
+.mdl-demo #schedule h4, #schedule h5 { margin-bottom:16px; }
+.mdl-demo .toc { border-left:4px solid #C1EEF4;margin:24px;padding:0;padding-left:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; }
+.mdl-demo .toc h4 { font-size:0.9rem;margin-top:0; }
+.mdl-demo .toc a { color:#4DD0E1;text-decoration:none;font-size:16px;line-height:28px;display:block; }
+.mdl-demo .mdl-menu__container { z-index:99; }
+.center { display:block;margin:0 auto; }
+h3 { text-align:center; }
+.twitter-blue {	background-color:#55acee; }
+main { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQ0lEQVQYV2OUl5eXfPjw4XMGPACkhhEkj08xTA6sEJdiZAPgCtEVo9uCohCmGESju5s8hcjW4bQam88xPENU8BAb4ACbDED3c3u/mwAAAABJRU5ErkJggg==)repeat; }
+.mdl-mini-footer { padding:5px 16px; }
+.mdl-logo { margin-bottom:0px; }
+.mdl-layout__header-row { height:43px; }
+.mdl-layout__header-row .center { margin-top:-10px; }
+@media screen and (max-width: 1024px) { .mdl-layout__header-row { height:30px; } }
+.mdi.md-18 { font-size:18px; }
+.mdi.md-24 { font-size:24px; }
+.mdi.md-36 { font-size:36px; }
+.mdi.md-48 { font-size:48px; }
+.mdi.md-dark { color:rgba(0,0,0,0.54); }
+.mdi.md-dark.md-inactive { color:rgba(0,0,0,0.26); }
+.mdi.md-light { color:rgba(255,255,255,1); }
+.mdi.md-light.md-inactive { color:rgba(255,255,255,0.3); }