diff --git a/clock/css/experiment.css b/clock/css/experiment.css
index da44ed9..b7280ed 100644
--- a/clock/css/experiment.css
+++ b/clock/css/experiment.css
@@ -4,7 +4,8 @@ Date: 24th March 2009
 Author: Paul Hayes
  */
 
-body {
+
+ body {
     background: #fff;
 }
 
@@ -13,8 +14,28 @@ body {
     font-size: 2em;
     font-weight: bold;
     margin: 0 0 2em;
+    
+}
+.start a {
+    font-family: Arial;
+    color: rgb(255, 255, 255);
+    text-decoration: none;
 }
+.start-button{
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: #078fd3 ;
+    border: 1 px;
+    border-radius: 3px;
+}
+.start-button:hover {
+    
+    filter:brightness(0.75);
+    transition: filter 0.3s;
 
+}
 #clock {
     position: relative;
     width: 378px;
diff --git a/clock/index.html b/clock/index.html
index 8e5053c..4673d16 100644
--- a/clock/index.html
+++ b/clock/index.html
@@ -20,7 +20,7 @@
         </p>
 
 <div id="experiment">
-    <p class="start"><a href="#clock" id="start">Start Clock</a></p>
+    <p class="start"><button class="start-button"><a href="#clock" id="start">Start Clock</a></button></p>
     <div id="clock">
         <div id="hour"><img src="images/hourHand.png" /></div>
         <div id="minute"><img src="images/minuteHand.png" /></div>
diff --git a/modal/css/experiment.css b/modal/css/experiment.css
index f5f05ea..85997ba 100644
--- a/modal/css/experiment.css
+++ b/modal/css/experiment.css
@@ -1,206 +1,210 @@
 /* Container */
 .modal {
 
-    /* Overlay page content */
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0,0,0,0.5);
-    z-index: 10000;
+  /* Overlay page content */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 10000;
 
-    /* Transition opacity on open */
-    -webkit-transition: opacity 500ms ease-in;
-    -moz-transition: opacity 500ms ease-in;
-    transition: opacity 500ms ease-in;
+  /* Transition opacity on open */
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
 
-    /* Hide for now */
-    opacity: 0;
-    pointer-events: none;
+  /* Hide for now */
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* Show modal */
 .modal:target {
-    opacity: 1;
-    pointer-events: auto;
-    /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
+  opacity: 1;
+  pointer-events: auto;
+  /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
 }
 
 /* Content */
 .modal > div {
-    width: 500px;
-    background: #fff;
-    position: relative;
-    margin: 10% auto;
+  width: 500px;
+  background: #fff;
+  position: relative;
+  margin: 10% auto;
 
-    /* Default minimise animation */
-    -webkit-animation: minimise 500ms linear;
-    -moz-animation: minimise 500ms linear;
-    animation: minimise 500ms linear;
+  /* Default minimise animation */
+  -webkit-animation: minimise 500ms linear;
+  -moz-animation: minimise 500ms linear;
+  animation: minimise 500ms linear;
 
-    /* Prettify */
-    padding: 30px;
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-    background: #fff;
+  /* Prettify */
+  padding: 30px;
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+  background: #fff;
 }
 
 /* Override animation on modal open */
 .modal:target > div {
-    -webkit-animation-name: bounce;
-    -moz-animation-name: bounce;
-    animation-name: bounce;
+  -webkit-animation-name: bounce;
+  -moz-animation-name: bounce;
+  animation-name: bounce;
 }
 
 .modal h2 {
-    font-size: 36px;
-    padding: 0 0 20px;
+  font-size: 36px;
+  padding: 0 0 20px;
 }
-
 @-webkit-keyframes bounce {
-  0% {
-    -webkit-transform: scale3d(0.1,0.1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
-  55% {
-    -webkit-transform: scale3d(1.08,1.08,1);
-    box-shadow: 0 10px 20px rgba(0,0,0,0);
-  }
-  75% {
-    -webkit-transform: scale3d(0.95,0.95,1);
-    box-shadow: 0 0 20px rgba(0,0,0,0.9);
-  }
-  100% {
-    -webkit-transform: scale3d(1,1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
+0% {
+  -webkit-transform: scale3d(0.1,0.1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
+55% {
+  -webkit-transform: scale3d(1.08,1.08,1);
+  box-shadow: 0 10px 20px rgba(0,0,0,0);
+}
+75% {
+  -webkit-transform: scale3d(0.95,0.95,1);
+  box-shadow: 0 0 20px rgba(0,0,0,0.9);
+}
+100% {
+  -webkit-transform: scale3d(1,1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
 }
 
 @-webkit-keyframes minimise {
-  0% {
-    -webkit-transform: scale3d(1,1,1);
-  }
-  100% {
-    -webkit-transform: scale3d(0.1,0.1,1);
-  }
+0% {
+  -webkit-transform: scale3d(1,1,1);
+}
+100% {
+  -webkit-transform: scale3d(0.1,0.1,1);
+}
 }
 
 @-moz-keyframes bounce {
-  0% {
-    -moz-transform: scale3d(0.1,0.1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
-  55% {
-    -moz-transform: scale3d(1.08,1.08,1);
-    box-shadow: 0 10px 20px rgba(0,0,0,0);
-  }
-  75% {
-    -moz-transform: scale3d(0.95,0.95,1);
-    box-shadow: 0 0 20px rgba(0,0,0,0.9);
-  }
-  100% {
-    -moz-transform: scale3d(1,1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
+0% {
+  -moz-transform: scale3d(0.1,0.1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
+55% {
+  -moz-transform: scale3d(1.08,1.08,1);
+  box-shadow: 0 10px 20px rgba(0,0,0,0);
+}
+75% {
+  -moz-transform: scale3d(0.95,0.95,1);
+  box-shadow: 0 0 20px rgba(0,0,0,0.9);
+}
+100% {
+  -moz-transform: scale3d(1,1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
 }
 
 @-moz-keyframes minimise {
-  0% {
-    -moz-transform: scale3d(1,1,1);
-  }
-  100% {
-    -moz-transform: scale3d(0.1,0.1,1);
-  }
+0% {
+  -moz-transform: scale3d(1,1,1);
+}
+100% {
+  -moz-transform: scale3d(0.1,0.1,1);
+}
 }
 
 @keyframes bounce {
-  0% {
-    transform: scale3d(0.1,0.1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
-  55% {
-    transform: scale3d(1.08,1.08,1);
-    box-shadow: 0 10px 20px rgba(0,0,0,0);
-  }
-  75% {
-    transform: scale3d(0.95,0.95,1);
-    box-shadow: 0 0 20px rgba(0,0,0,0.9);
-  }
-  100% {
-    transform: scale3d(1,1,1);
-    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-  }
+0% {
+  transform: scale3d(0.1,0.1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
+55% {
+  transform: scale3d(1.08,1.08,1);
+  box-shadow: 0 10px 20px rgba(0,0,0,0);
+}
+75% {
+  transform: scale3d(0.95,0.95,1);
+  box-shadow: 0 0 20px rgba(0,0,0,0.9);
+}
+100% {
+  transform: scale3d(1,1,1);
+  box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+}
 }
 
 @keyframes minimise {
-  0% {
-    transform: scale3d(1,1,1);
-  }
-  100% {
-    transform: scale3d(0.1,0.1,1);
-  }
+0% {
+  transform: scale3d(1,1,1);
+}
+100% {
+  transform: scale3d(0.1,0.1,1);
+}
 }
 
 /* Modal close link */
 .modal a[href="#close"] {
-    position: absolute;
-    right: 0;
-    top: 0;
-    color: transparent;
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: transparent;
 }
 
 /* Reset native styles */
 .modal a[href="#close"]:focus {
-    outline: none;
+  outline: none;
 }
 
 /* Create close button */
 .modal a[href="#close"]:after {
-    content: 'X';
-    display: block;
-
-    /* Position */
-    position: absolute;
-    right: -10px;
-    top: -10px;
-    width: 1.5em;
-    padding: 1px 1px 1px 2px;
-
-    /* Style */
-    text-decoration: none;
-    text-shadow: none;
-    text-align: center;
-    font-weight: bold;
-    background: #000;
-    color: #fff;
-    border: 3px solid #fff;
-    border-radius: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+  content: 'X';
+  display: block;
+
+  /* Position */
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  width: 1.5em;
+  padding: 1px 1px 1px 2px;
+
+  /* Style */
+  text-decoration: none;
+  text-shadow: none;
+  text-align: center;
+  font-weight: bold;
+  background: #000;
+  color: #fff;
+  border: 3px solid #fff;
+  border-radius: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 }
 
 .modal a[href="#close"]:focus:after,
 .modal a[href="#close"]:hover:after {
-    -webkit-transform: scale(1.1,1.1);
-    -moz-transform: scale(1.1,1.1);
-    transform: scale(1.1,1.1);
+  -webkit-transform: scale(1.1,1.1);
+  -moz-transform: scale(1.1,1.1);
+  transform: scale(1.1,1.1);
 }
 
 .modal a[href="#close"]:focus:after {
-    outline: 1px solid #000;
+  outline: 1px solid #000;
 }
 
 /* Open modal */
 a.openModal {
-    margin: 1em auto;
-    display: block;
-    width: 200px;
-    text-align: center;
-    padding: 10px;
-    background: #3e916e;
-    color: #fff;
+  margin: 1em auto;
+  display: block;
+  width: 200px;
+  text-align: center;
+  padding: 10px;
+  background: #3e916e;
+  color: #fff;
+  border-radius: 3px;
+  text-decoration: none;
 }
 
 a.openModal:hover,
 a.openModal:focus {
-    background: #22523e;
+  background: #2a684e;
+  text-decoration: underline;
+  color: #c3c3c3;
+  transition: color, ease-in-out 0.25s;
 }