2 files changed, 75 insertions, 77 deletions
diff --git a/index.html b/index.html
index b8f7b2d..4b2747d 100644
--- a/index.html
+++ b/index.html
@@ -2,87 +2,12 @@
 <html>
 <head>
 <link href='https://fonts.googleapis.com/css?family=Sarpanch:800,400' rel='stylesheet' type='text/css'>
-<style>
-
-html,body {
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-}
-
-body {
-        color: #bbb;
-        background: #444;
-        font-family: sans-serif;
-}
-
-h1 {
-        font-family: 'Sarpanch', sans-serif;
-        font-size: 32pt;
-        border-bottom: 2px solid #f80;
-        padding: 2.1em 1.5em 0.1em 1.5em;
-        box-shadow: inset 0 0 60px 10px #111;
-        margin: 0 -1em 0 -1em;
-        position: relative;
-        top: -2em;
-}
-
-h1>em {
-        font-style: normal;
-        color: #ddd;
-}
-
-h1>span {
-        font-style: normal;
-        color: #777;
-}
-
-.box {
-        color: black;
-        float: left;
-        padding: 1em;
-        margin: 1.4em;
-        box-shadow:6px 6px 10px 2px #111;
-        border-radius: 0.5em;
-}
-
-.pass {
-        background: #77ee77;
-        border: 2px solid #00dd00;
-}
-
-.fail {
-        background: #ff8888;
-        border: 2px solid #ff0000;
-}
-
-.active {
-        -webkit-animation:active 1s linear infinite;
-        animation:active 1s linear infinite;
-}
-
-@-webkit-keyframes active {
-          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
-        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
-}
-
-@keyframes active {
-          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
-        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
-}
-
-.visulisation {
-        margin-left: auto;
-        margin-right: auto;
-        display: table;
-}
-
-</style>
+<link href='style.css' rel='stylesheet' type='text/css'>
 </head>
 <body>
 <h1><em>Baserock</em> <span>|</span> CIAT</h1>
 
-<div class="visulisation">
+<div class="visualisation">
 <div class="box pass">Firehose</div>
 <div class="box pass active">Build</div>
 <div class="box fail">Deploy</div>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..71dc528
--- /dev/null
+++ b/style.css
@@ -0,0 +1,73 @@
+html,body {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+}
+
+body {
+        color: #bbb;
+        background: #444;
+        font-family: sans-serif;
+}
+
+h1 {
+        font-family: 'Sarpanch', sans-serif;
+        font-size: 32pt;
+        border-bottom: 2px solid #f80;
+        padding: 2.1em 1.5em 0.1em 1.5em;
+        box-shadow: inset 0 0 60px 10px #111;
+        margin: 0 -1em 0 -1em;
+        position: relative;
+        top: -2em;
+}
+
+h1>em {
+        font-style: normal;
+        color: #ddd;
+}
+
+h1>span {
+        font-style: normal;
+        color: #777;
+}
+
+.box {
+        color: black;
+        float: left;
+        padding: 1em;
+        margin: 1.4em;
+        box-shadow:6px 6px 10px 2px #111;
+        border-radius: 0.5em;
+}
+
+.pass {
+        background: #77ee77;
+        border: 2px solid #00dd00;
+}
+
+.fail {
+        background: #ff8888;
+        border: 2px solid #ff0000;
+}
+
+.active {
+        -webkit-animation:active 1s linear infinite;
+        animation:active 1s linear infinite;
+}
+
+@-webkit-keyframes active {
+          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
+        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
+}
+
+@keyframes active {
+          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
+        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
+}
+
+.visualisation {
+        margin-left: auto;
+        margin-right: auto;
+        display: table;
+}
+