diff interfaces/AB.css @ 2816:88649008134d

Merge branch 'master' of https://github.com/BrechtDeMan/WebAudioEvaluationTool

--- a/interfaces/AB.css	Tue Apr 25 12:20:54 2017 +0100
+++ b/interfaces/AB.css	Tue Apr 25 16:21:05 2017 +0100
@@ -2,6 +2,10 @@
     /* Set the background colour (note US English spelling) to grey*/
     background-color: #fff
 }
+div#feedbackHolder {
+    display: flex;
+    flex-direction: column;
+}
 div.pageTitle {
     width: auto;
     height: 20px;
@@ -34,13 +38,20 @@
     position: inherit;
     margin: 0px 5px;
 }
+div#box-holders {
+    width: 100%;
+    text-align: center;
+}
+div#playback-holder {
+    float: none;
+}
 div.comparator-holder {
     width: 260px;
     height: 300px;
     border: black 1px solid;
-    float: left;
     padding-top: 5px;
     margin: 25px;
+    display: inline-block;
 }
 div.comparator-selector {
     width: 248px;
@@ -49,12 +60,26 @@
     position: relative;
     background-color: #FF0000;
     border-radius: 20px;
+    text-align: center;
+    display: block;
+    margin: auto;
+}
+div.comparator-image {
+    background-color: rgba(255, 255, 255, 0);
+}
+img.comparator-image {
+    width: inherit;
+    height: inherit;
+    z-index: -1;
+    position: absolute;
+    display: inline;
+    right: 0px;
 }
 div.disabled {
     background-color: #AAA;
 }
 div.selected {
-    background-color: #008000;
+    background-color: rgba(0, 200, 0, 0.4);
 }
 div.comparator-selector span {
     font-size: 4em;
@@ -72,8 +97,3 @@
     float: left;
     margin: 0px 5px;
 }
-div#master-volume-holder {
-    position: absolute;
-    top: 10px;
-    left: 120px;
-}