diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 5008ddf..0000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/README.markdown b/README.markdown
index 7b68fee..5efc552 100644
--- a/README.markdown
+++ b/README.markdown
@@ -1,11 +1,13 @@
 # After Dark in CSS
 
-![After Dark Icon](img/after-dark-icon.png)
+![Flying Toasters in CSS](img/flying-toasters-css.jpg)
 
 Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?
 
 If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.
 
+The animations were made with CSS alone. No animated gifs or javascript.
+
 ### [See them here!](http://bryanbraun.github.io/after-dark-css/)
 
 #### Browsers
diff --git a/base.css b/all/base.css
similarity index 89%
rename from base.css
rename to all/base.css
index ce8a3d1..543eaae 100644
--- a/base.css
+++ b/all/base.css
@@ -9,7 +9,7 @@
 
 @font-face {
   font-family: 'ChicagoFLF';
-  src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
+  src: url('../fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
 }
 
 html,
diff --git a/bouncing-ball.html b/all/bouncing-ball.html
similarity index 96%
rename from bouncing-ball.html
rename to all/bouncing-ball.html
index c277ec5..f00b4dc 100644
--- a/bouncing-ball.html
+++ b/all/bouncing-ball.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Bouncing Ball | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   
diff --git a/example.html b/all/example.html
similarity index 83%
rename from example.html
rename to all/example.html
index c5bb4b8..03b4772 100644
--- a/example.html
+++ b/all/example.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Example | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
diff --git a/fade-out.html b/all/fade-out.html
similarity index 89%
rename from fade-out.html
rename to all/fade-out.html
index 996fd75..1e97616 100644
--- a/fade-out.html
+++ b/all/fade-out.html
@@ -3,11 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>Fade Out | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
     body {
-      background: url(img/macos-desktop.png) no-repeat center center fixed; 
+      background: url(../img/macos-desktop.png) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
diff --git a/fish.html b/all/fish.html
similarity index 95%
rename from fish.html
rename to all/fish.html
index 3c67743..4ea8ef9 100644
--- a/fish.html
+++ b/all/fish.html
@@ -3,13 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <title>Fish | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
     body {
       background-color: black;
-      background-image: url(img/seafloor.jpg);
+      background-image: url(../img/seafloor.jpg);
       background-position: bottom;
       background-repeat: repeat-x;
     }
@@ -21,7 +21,7 @@
       width: 50px;
       height: 56px;
       background-repeat: no-repeat;
-      background-image: url(img/bubbles_50.png);
+      background-image: url(../img/bubbles_50.png);
       -webkit-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
       -moz-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
       -o-animation: rise 13s linear infinite, reappear 39s steps(3) linear infinite, bubble-alt 0.2s steps(2) infinite;
@@ -40,31 +40,31 @@
       top: -50%;
     }
     .butterfly {
-      background-image: url(img/fish-butterfly.png);
+      background-image: url(../img/fish-butterfly.png);
     }
     .guppy {
-      background-image: url(img/fish-guppy.png);
+      background-image: url(../img/fish-guppy.png);
     }
     .seahorse {
-      background-image: url(img/fish-seahorse.png);
+      background-image: url(../img/fish-seahorse.png);
     }
     .jelly {
-      background-image: url(img/fish-jelly.png);
+      background-image: url(../img/fish-jelly.png);
     }
     .minnow {
-      background-image: url(img/fish-minnow.png);
+      background-image: url(../img/fish-minnow.png);
     }
     .red {
-      background-image: url(img/fish-red.png);
+      background-image: url(../img/fish-red.png);
     }
     .striped {
-      background-image: url(img/fish-striped.png);
+      background-image: url(../img/fish-striped.png);
     }
     .angel {
-      background-image: url(img/fish-angel.png);
+      background-image: url(../img/fish-angel.png);
     }
     .flounder {
-      background-image: url(img/fish-flounder.png);
+      background-image: url(../img/fish-flounder.png);
     }
     
     /**
diff --git a/flying-toasters.html b/all/flying-toasters.html
similarity index 98%
rename from flying-toasters.html
rename to all/flying-toasters.html
index ccaa52d..23ed5b4 100644
--- a/flying-toasters.html
+++ b/all/flying-toasters.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Flying Toasters | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
  
@@ -11,13 +11,13 @@
       position: absolute;
       width: 64px;
       height: 64px;
-      background-image: url("img/toaster-sprite.gif");
+      background-image: url("../img/toaster-sprite.gif");
     }
     .toast {
       position: absolute;
       width: 64px;
       height: 64px;
-      background-image: url("img/toast1.gif");
+      background-image: url("../img/toast1.gif");
     }
      
     /**
diff --git a/globe.html b/all/globe.html
similarity index 95%
rename from globe.html
rename to all/globe.html
index 1649fc3..1b10228 100644
--- a/globe.html
+++ b/all/globe.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Globe | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   
@@ -18,7 +18,7 @@
       height: 240px;
       position: absolute;
       background-color: black;
-      background-image: url(img/globe_240.jpg);
+      background-image: url(../img/globe_240.jpg);
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
diff --git a/hard-rain.html b/all/hard-rain.html
similarity index 99%
rename from hard-rain.html
rename to all/hard-rain.html
index bf0c75a..04fe2a3 100644
--- a/hard-rain.html
+++ b/all/hard-rain.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Hard Rain | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
     /* shared raindrop attributes */
diff --git a/logo.html b/all/logo.html
similarity index 94%
rename from logo.html
rename to all/logo.html
index c1ae493..650a713 100644
--- a/logo.html
+++ b/all/logo.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Logo | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   
@@ -54,6 +54,6 @@
 </head>
 <body>
   <h1 class="visuallyhidden">Logo Screensaver - After Dark in CSS</h1>
-  <img src="img/logo.png">
+  <img src="../img/logo.png">
 </body>
 </html>
\ No newline at end of file
diff --git a/messages.html b/all/messages.html
similarity index 96%
rename from messages.html
rename to all/messages.html
index d132ff5..23233e7 100644
--- a/messages.html
+++ b/all/messages.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Messages | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   /**
diff --git a/messages2.html b/all/messages2.html
similarity index 96%
rename from messages2.html
rename to all/messages2.html
index 5861a7a..8fec8e9 100644
--- a/messages2.html
+++ b/all/messages2.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Messages 2 | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
diff --git a/rainstorm.html b/all/rainstorm.html
similarity index 92%
rename from rainstorm.html
rename to all/rainstorm.html
index 98c3c0e..0c5f85f 100644
--- a/rainstorm.html
+++ b/all/rainstorm.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Rainstorm | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
@@ -30,14 +30,14 @@
       -moz-animation: fall 2.2s infinite linear;
       -o-animation: fall 2.2s infinite linear;
       animation: fall 2.2s infinite linear;
-      background: url(img/rain-tile-near.png) repeat;     
+      background: url(../img/rain-tile-near.png) repeat;     
     }
     .r2 {
       -webkit-animation: fall 2.2s 1s infinite linear;
       -moz-animation: fall 2.2s 1s infinite linear;
       -o-animation: fall 2.2s 1s infinite linear;
       animation: fall 2.2s 1s infinite linear;
-      background: url(img/rain-tile-near.png) repeat;     
+      background: url(../img/rain-tile-near.png) repeat;     
     }
     
     /* Two waves of mid-distant rain */
@@ -46,14 +46,14 @@
       -moz-animation: fall 4s infinite linear;
       -o-animation: fall 4s infinite linear;
       animation: fall 4s infinite linear;
-      background: url(img/rain-tile-mid.png) repeat;  
+      background: url(../img/rain-tile-mid.png) repeat;  
     }
     .r4 {
       -webkit-animation: fall 4.5s 3.2s infinite linear;
       -moz-animation: fall 4.5s 3.2s infinite linear;
       -o-animation: fall 4.5s 3.2s infinite linear;
       animation: fall 4.5s 3.2s infinite linear;
-      background: url(img/rain-tile-mid.png) repeat;
+      background: url(../img/rain-tile-mid.png) repeat;
     } 
     
     /* Two waves of distant rain */
@@ -62,14 +62,14 @@
       -moz-animation: fall 6s infinite linear;
       -o-animation: fall 6s infinite linear;
       animation: fall 6s infinite linear;
-      background: url(img/rain-tile-distant.png) repeat;  
+      background: url(../img/rain-tile-distant.png) repeat;  
     }
     .r6 {
       -webkit-animation: fall 6s 4s infinite linear;
       -moz-animation: fall 6s 4s infinite linear;
       -o-animation: fall 6s 4s infinite linear;
       animation: fall 6s 4s infinite linear;
-      background: url(img/rain-tile-distant.png) repeat;
+      background: url(../img/rain-tile-distant.png) repeat;
     }
     
     /**
diff --git a/spotlight.html b/all/spotlight.html
similarity index 91%
rename from spotlight.html
rename to all/spotlight.html
index a5c9822..2bb03d9 100644
--- a/spotlight.html
+++ b/all/spotlight.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Spotlight | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
     /**
@@ -13,7 +13,7 @@
      * me know!
      */
     body {
-      background: url(img/macos-desktop.png) no-repeat center center fixed; 
+      background: url(../img/macos-desktop.png) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
@@ -61,6 +61,6 @@
 <body>
   <h1 class="visuallyhidden">Spotlight Screensaver - After Dark in CSS</h1>
   <!-- <b id="spotlight"></b> -->
-  <img class="spotlight" src="img/spotlight_bg.png" />
+  <img class="spotlight" src="../img/spotlight_bg.png" />
 </body>
 </html>
\ No newline at end of file
diff --git a/warp.html b/all/warp.html
similarity index 90%
rename from warp.html
rename to all/warp.html
index c554783..3ed9771 100644
--- a/warp.html
+++ b/all/warp.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Warp | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
 
@@ -29,63 +29,63 @@
     }
 
     .stars:nth-child(1) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
       animation-delay: 0s;
     }
     .stars:nth-child(2) {
-      background: url(img/stars2.png) no-repeat center center fixed;
+      background: url(../img/stars2.png) no-repeat center center fixed;
       -webkit-animation-delay: 500ms;
       -moz-animation-delay: 500ms;
       -o-animation-delay: 500ms;
       animation-delay: 500ms;
     }
     .stars:nth-child(3) {
-      background: url(img/stars3.png) no-repeat center center fixed;
+      background: url(../img/stars3.png) no-repeat center center fixed;
       -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
       animation-delay: 1s;
     }
     .stars:nth-child(4) {
-      background: url(img/stars4.png) no-repeat center center fixed;
+      background: url(../img/stars4.png) no-repeat center center fixed;
       -webkit-animation-delay: 1500ms;
       -moz-animation-delay: 1500ms;
       -o-animation-delay: 1500ms;
       animation-delay: 1500ms;
     }
     .stars:nth-child(5) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 2s;
       -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
       animation-delay: 2s;
     }
     .stars:nth-child(6) {
-      background: url(img/stars2.png) no-repeat center center fixed;
+      background: url(../img/stars2.png) no-repeat center center fixed;
       -webkit-animation-delay: 2500ms;
       -moz-animation-delay: 2500ms;
       -o-animation-delay: 2500ms;
       animation-delay: 2500ms;
     }
     .stars:nth-child(7) {
-      background: url(img/stars3.png) no-repeat center center fixed;
+      background: url(../img/stars3.png) no-repeat center center fixed;
       -webkit-animation-delay: 3s;
       -moz-animation-delay: 3s;
       -o-animation-delay: 3s;
       animation-delay: 3s;
     }
     .stars:nth-child(8) {
-      background: url(img/stars4.png) no-repeat center center fixed;
+      background: url(../img/stars4.png) no-repeat center center fixed;
       -webkit-animation-delay: 3500ms;
       -moz-animation-delay: 3500ms;
       -o-animation-delay: 3500ms;
       animation-delay: 3500ms;
     }
     .stars:nth-child(9) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 4s;
       -moz-animation-delay: 4s;
       -o-animation-delay: 4s;
diff --git a/img/.DS_Store b/img/.DS_Store
deleted file mode 100644
index 5008ddf..0000000
Binary files a/img/.DS_Store and /dev/null differ
diff --git a/img/flying-toasters-css.jpg b/img/flying-toasters-css.jpg
new file mode 100644
index 0000000..fad015c
Binary files /dev/null and b/img/flying-toasters-css.jpg differ
diff --git a/index.html b/index.html
index b06dc1e..b605627 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>After Dark in CSS</title>
   <link rel="shortcut icon" href="img/favicon.png" />
-  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="all/base.css">
   <style>
     html,
     body {
@@ -201,23 +201,23 @@
     <h1 class="title">After Dark in CSS</h1>
     <div class="ad"><img src="img/after-dark-icon.png" /></div>
     <ul>
-      <li><a class="s" href="flying-toasters.html">Flying Toasters</a></li>
-      <li><a class="s" href="fish.html">Fish</a></li>
-      <li><a class="s" href="globe.html">Globe</a></li>
-      <li><a href="hard-rain.html">Hard Rain</a></li>
-      <li><a class="s" href="bouncing-ball.html">Bouncing Ball</a></li>
-      <li><a class="s" href="warp.html">Warp</a></li>
-      <li><a class="s" href="messages.html">Messages</a></li>
-      <li><a class="s" href="messages2.html">Messages 2</a></li>
-      <li><a href="fade-out.html" class="s">Fade Out</a></li>
-      <li><a class="s" href="logo.html">Logo</a></li>
-      <li><a class="s" href="rainstorm.html">Rainstorm</a></li>
-      <li><a class="s" href="spotlight.html">Spotlight</a></li>
+      <li><a class="s" href="all/flying-toasters.html">Flying Toasters</a></li>
+      <li><a class="s" href="all/fish.html">Fish</a></li>
+      <li><a class="s" href="all/globe.html">Globe</a></li>
+      <li><a href="all/hard-rain.html">Hard Rain</a></li>
+      <li><a class="s" href="all/bouncing-ball.html">Bouncing Ball</a></li>
+      <li><a class="s" href="all/warp.html">Warp</a></li>
+      <li><a class="s" href="all/messages.html">Messages</a></li>
+      <li><a class="s" href="all/messages2.html">Messages 2</a></li>
+      <li><a href="all/fade-out.html" class="s">Fade Out</a></li>
+      <li><a class="s" href="all/logo.html">Logo</a></li>
+      <li><a class="s" href="all/rainstorm.html">Rainstorm</a></li>
+      <li><a class="s" href="all/spotlight.html">Spotlight</a></li>
       <li><a id="randomizer" href="#">Randomizer</a></li>
     </ul>
   </div>
   <footer class="footer">
-    <a href="https://twitter.com/share" class="twitter-share-button" data-text="&quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
+    <a href="https://twitter.com/share" class="twitter-share-button" data-text="Classic &quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
   
   </footer>