Add global styles, move fonts.

Need to figure out if the path trick to load fonts from css will work in prod.
May need to load fonts from tsx file and use __static.

src/renderer/components/Frame.css

@@ -63,9 +63,9 @@
     right: -2px;
     height: 22px;
 }
-#frameButtonDockWin > .frameButton:not(:first-child) {
+/* #frameButtonDockWin > .frameButton:not(:first-child) {
     margin-left: -4px;
-}
+} */
 
 /* Darwin frame button dock: NaN; */
 #frameButtonDockDarwin {

src/renderer/components/Frame.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { remote } from 'electron';
 import './Frame.css';
 
-require('./Frame.css')
-
 function closeHandler() {
     const window = remote.getCurrentWindow();
     window.close();
@@ -48,10 +46,10 @@ const Frame = () => (
                         <svg name="TitleBarMinimize" width="10" height="10" viewBox="0 0 12 12"><rect stroke="#ffffff" fill="#ffffff" width="10" height="1" x="1" y="6"></rect></svg>
                     </button>
                     <button className="frameButton" onClick={restoreDownHandler} id="frameButton_restoredown" tabIndex={-1}>
-                        <svg name="TitleBarMaximize" width="10" height="10" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="#ffffff" stroke-width="1.4px"></rect></svg>
+                        <svg name="TitleBarMaximize" width="10" height="10" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="#ffffff" strokeWidth="1.4px"></rect></svg>
                     </button>
                     <button className="frameButton" onClick={closeHandler} id="frameButton_close" tabIndex={-1}>
-                        <svg name="TitleBarClose" width="10" height="10" viewBox="0 0 12 12"><polygon stroke="#ffffff" fill="#ffffff" fill-rule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+                        <svg name="TitleBarClose" width="10" height="10" viewBox="0 0 12 12"><polygon stroke="#ffffff" fill="#ffffff" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
                     </button>
                 </div>
             </div>

src/renderer/index.css

@@ -0,0 +1,44 @@
+/*******************************************************************************
+ *                                                                             *
+ * Fonts                                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+ @font-face {
+    font-family: 'Avenir Book';
+    src: url('../../static/fonts/Avenir-Book.ttf');
+}
+
+@font-face {
+    font-family: 'Avenir Medium';
+    src: url('../../static/fonts/Avenir-Medium.ttf');
+}
+
+@font-face {
+    font-family: 'Ringbearer';
+    src: url('../../static/fonts/Ringbearer.ttf');
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Element Styles                                                              *
+ *                                                                             *
+ ******************************************************************************/
+
+/* Reset body, html, and div presets. */
+body, html, div {
+    margin: 0;
+    padding: 0;
+}
+
+/* Reset p presets. */
+p {
+    -webkit-margin-before: 0em;
+    -webkit-margin-after: 0em;
+}
+
+/* Set default font and color. */
+body, button {
+    font-family: 'Avenir Book';
+    color: white;
+}

src/renderer/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
+import './index.css';
 
 import Application from './components/Application';