diff --git a/docs/_layouts/index.html b/docs/_layouts/index.html
index c3813d710..7a8f9c87d 100644
--- a/docs/_layouts/index.html
+++ b/docs/_layouts/index.html
@@ -5,56 +5,8 @@
 		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 		<title>{{ site.appname }}</title>
-		<link rel="stylesheet" type="text/css" href="/css/style.css" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
 		<link rel="shortcut icon" href="favicon.ico" />
-
-		<style>
-			body 
-			{ 
-				font-family: Segoe UI, Segoe WP, Helvetica, Arial, FreeSans, san-serif;
-				margin:0; 
-				padding:0; 
-				background: url('background_image.png') repeat-x top;
-				font-size:1.1em;
-			}
-			h1 { font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; font-weight: lighter; font-size:3em; margin-top:0px;}
-			a, a:visited { color: #{{site.accent}}; text-decoration:none;}
-			a:hover { color: #{{site.darkaccent}}; text-decoration:underline;}
-			img { border: none;}
-
-			#code52 { color: #41b1e1; font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; }
-			#code52 a, #code52 a:visited { color: #41b1e1; text-decoration:none; }
-			#code52 a:hover { text-decoration:underline; }
-			#apptitle { font-family: Segoe UI; font-weight:bold;}
-			#container {  width: 900px; margin-left:auto; margin-right:auto;  margin-top:25px; }
-			#features { margin-top:25px; margin-bottom:25px;}
-			#screenshot { text-align:center; }
-			.screenshotborder
-			{
-				width:790px;
-				display:block;
-				margin-left:auto;
-				margin-right:auto;
-			}
-			#screenshotbordertop {margin-top:-22px;}
-			#screenshotborderbottom {margin-bottom:20px;}
-			#downloads { margin-left:auto; margin-right:auto; width:435px;font-size:2em; }
-			#downloads a { text-align:left;}
-			#downloads div {text-align:center;}
-			#downloads a img {margin-right:15px; margin-bottom:-5px;}
-			.accent { color: #{{site.accent}};}
-			.feature { float:left; width: 245px; margin-right:50px;}
-			.feature h2 { font-size: 1.15em; margin-top:0px; margin-bottom:0px;}
-			.twitter-share-button {margin-top:50px;}
-			
-			@media screen and (max-width:900px)
-			{
-				body { width:auto; padding:10px;}
-				#container { width : 100%;  }
-				img { max-width:100%; }
-				.screenshotborder { display:none; }
-			}
-		</style>
 	</head>
 	<body>
 		<div id="container">
@@ -89,6 +41,7 @@ <h2>{{ site.feature3title}}</h2>
 			<a href="https://twitter.com/share" class="twitter-share-button" data-via="Code_52">Tweet</a>
 			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 		</div>
+		<div class="footer"><a href="https://thenounproject.com/noun/pretzel/#icon-No555">Pretzel</a> symbol by <a href="https://thenounproject.com/edward/">Edward Boatman</a> on <a href="https://thenounproject.com/">The Noun Project</a>, from The Noun Project collection.</div>
 		<div style="clear:both">&nbsp;</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/css/styles.css b/docs/css/styles.css
new file mode 100644
index 000000000..a37c5ea2a
--- /dev/null
+++ b/docs/css/styles.css
@@ -0,0 +1,67 @@
+body 
+{ 
+    font-family: Segoe UI, Segoe WP, Helvetica, Arial, FreeSans, san-serif;
+    margin:0; 
+    padding:0; 
+    background: url('background_image.png') repeat-x top;
+    font-size:1.1em;
+}
+      
+h1 { font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; font-weight: lighter; font-size:3em; margin-top:0px;}
+			
+a, a:visited { color: #{{site.accent}}; text-decoration:none;}
+			
+a:hover { color: #{{site.darkaccent}}; text-decoration:underline;}
+			
+img { border: none;}
+			
+#code52 { color: #41b1e1; font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; }
+#code52 a, #code52 a:visited { color: #41b1e1; text-decoration:none; }
+#code52 a:hover { text-decoration:underline; }
+			
+#apptitle { font-family: Segoe UI; font-weight:bold;}
+			
+#container {  width: 900px; margin-left:auto; margin-right:auto;  margin-top:25px; }
+			
+#features { margin-top:25px; margin-bottom:25px;}
+			
+#screenshot { text-align:center; }
+			
+.screenshotborder
+{
+    width:790px;
+    display:block;
+    margin-left:auto;
+    margin-right:auto;
+}
+			
+#screenshotbordertop {margin-top:-22px;}
+#screenshotborderbottom {margin-bottom:20px;}
+			
+#downloads { margin-left:auto; margin-right:auto; width:435px;font-size:2em; }
+#downloads a { text-align:left;}
+#downloads div {text-align:center;}
+#downloads a img {margin-right:15px; margin-bottom:-5px;}
+			
+.accent { color: #{{site.accent}};}
+			
+.feature { float:left; width: 245px; margin-right:50px;}
+			
+.feature h2 { font-size: 1.15em; margin-top:0px; margin-bottom:0px;}
+			
+.twitter-share-button {margin-top:50px;}
+
+.footer {
+    margin-top: 20px;
+    color: #aaa;
+    font-size: 0.9em;
+    text-align: center;
+}
+
+@media screen and (max-width:900px)
+{
+    body { width:auto; padding:10px;}
+    #container { width : 100%;  }
+    img { max-width:100%; }
+    .screenshotborder { display:none; }
+}
