changeset 79:e4db7d4d1d08

major UI fixes for martin version interface
author Rob Canning <rob@foo.net>
date Tue, 15 Jul 2014 23:49:44 +0100
parents 0bcba76683f2
children df5128a86598
files www/martin/css/chat-tablet.css www/martin/css/chat.css www/martin/css/nodescore.css www/martin/css/svg-stylesheet.css www/martin/index.html www/martin/js/controlseq.js www/martin/js/nodescore-client.js www/martin/js/nodescore-slides.js www/martin/svg/svg-stylesheet.css www/martin/transport.html
diffstat 10 files changed, 270 insertions(+), 271 deletions(-) [+]
line wrap: on
line diff
--- a/www/martin/css/chat-tablet.css	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/css/chat-tablet.css	Tue Jul 15 23:49:44 2014 +0100
@@ -6,7 +6,7 @@
 #chat {
   position: relative;
   border: 0px solid #ccc;
-  background: black;
+  background: white;
   border-radius: 15px;
 }
 #nickname,
@@ -16,11 +16,11 @@
   z-index: 100;
   left: 0;
   top: 0;
-  background: black;
+  background: white;
   text-align: center;
   width: 250px;
   font: 15px Georgia;
-  color: white;
+  color: black;
   display: block;
 }
 #nickname .wrap,
@@ -30,40 +30,40 @@
 #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; }
 .connected #connecting { display: none; }
 .nickname-set #nickname { display: none; }
-#messages { height: 100px; background: black; }
-#messages em { color: white; }
+#messages { height: 100px; background: white; }
+#messages em { color: black; }
 #messages p {
   padding: 0;
   margin: 0;
   font: 14px Helvetica, Arial;
   padding: 0px 10px;
-  color: white;
+  color: black;
 }
 #messages p b {
   display: inline-block;
   padding-right: 10px;
-  color: white;
+  color: black;
 }
 
 #messages p:nth-child(even) {
-  background: black;
-  color: white;
+  background: white;
+  color: black;
 }
 #messages #nicknames {
-  background: black;
+  background: white;
   padding: 2px 4px 4px;
   font: 11px Helvetica;
-  color: white;
+  color: black;
 }
 #messages #nicknames span {
   color: #000;
-  color: white;
+  color: black;
 }
 #messages #nicknames b {
   display: inline-block;
-  background: black;
+  background: white;
   margin-right: 5px;
-  color: yellow;
+  color: black;
 }
 #messages #lines {
   height: 80px;
@@ -98,7 +98,7 @@
   -webkit-border-radius: 3px;
 }
 #send-message {
-  background: black;
+  background: white;
   position: relative;
   border-radius:5px;
 }
@@ -109,8 +109,8 @@
   line-height: 20px;
   vertical-align: middle;
   width: 200px;
-  background:black;
-  color: yellow;
+  background:white;
+  color: black;
   border-radius:5px;
   border: 1px solid white;
 }
--- a/www/martin/css/chat.css	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/css/chat.css	Tue Jul 15 23:49:44 2014 +0100
@@ -6,7 +6,7 @@
 #chat {
   position: relative;
   border: 0px solid #ccc;
-  background: black;
+  background: white;
   border-radius: 15px;
 }
 #nickname,
@@ -16,7 +16,7 @@
   z-index: 100;
   left: 0;
   top: 0;
-  background: black;
+  background: white;
   text-align: center;
   width: 350px;
   font: 15px Georgia;
@@ -49,7 +49,7 @@
 #messages {
   height: 160px;
   !background: #eee;
-  background: black;
+  background: white;
 }
 #messages em {
   !text-shadow: 0 1px 0 #fff;
@@ -70,22 +70,22 @@
 }
 #messages p:nth-child(even) {
   !background: #fafafa;
-  background: black;
+  background: white;
   color: white;
 }
 #messages #nicknames {
-  background: black;
+  background: white;
   padding: 2px 4px 4px;
   font: 11px Helvetica;
   color: white;
 }
 #messages #nicknames span {
-  color: #000;
+  
   color: white;
 }
 #messages #nicknames b {
   display: inline-block;
-  background: black;
+  background: white;
   margin-right: 5px;
   color: yellow;
 }
--- a/www/martin/css/nodescore.css	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/css/nodescore.css	Tue Jul 15 23:49:44 2014 +0100
@@ -1,6 +1,4 @@
 body{
-    !background-color: white;
-    !color: white;
     font: 12px Helvetica, Arial;      
     margin-left:0px;
     height:100%;
@@ -9,36 +7,30 @@
 
 h3,h4,h5,h6 {
     width: 400px;
-    ! background-color: white;
     display: inline;
     color: #666;
     z-index: 2;
 }
 
-h1{ !background-color: black; 
-    !color:white;
+h1{ 
     font: 44px Helvetica, Arial; 
-   
 }
 
-h2 { font: 28px Helvetica, Arial; 
-  !color:white
+h2 { font: 18px Helvetica, Arial; 
 }
 
 h3{ font: 12px Helvetica, Arial; 
-    !color:white 
   }
 
-h4{ !background-color: black; 
+h4{ 
     font: 19px Helvetica, Arial; 
     text-align: center;  margin-left:auto; margin-right:auto; 
-    !color:white
   }
 
 a:link { color:#666;}
 a:visited { color: #666;}
 a:hover { color: black; background-color:orange; }
-a:active { color: black;background-color:white; } 
+a:active { color: black; background-color:white; } 
 
 ul, li, h4, h3, h2, h1, p{
     padding:0;
@@ -48,14 +40,12 @@
 
 .outermaster{
     float:right;
-    !margin-top:50px;
     height: 580px;
     width: 1020px;
     border-radius: 15px;
     position: absolute;
-    top:130px;
+    top:30px;
     left: 3000px;
-    !+filter: invert(100%);
     margin: 0 auto;
 }
 
@@ -64,20 +54,20 @@
     width: 100%;
     text-align: center;
     border-radius: 15px;
-    background-color:black;
     border: 0px solid blue;
-    position: absolute;
-    color: white;
-    top: 0px;
-    +filter: invert(100%);
-    z-index:1111;
+    !position: absolute;
+    !top: 10px;
+    !z-index:1111;
+    min-height:470px;
     margin-left: 0px;
-    padding:0px;
+    padding-top:20px;
 }
 
+
+
 .xunit{
 display:block;
-background:black;
+
 width: 155px;
 height: 70px;
 padding: 5px 5px 5px 5px;
@@ -86,15 +76,14 @@
 
 .precd{
 height:70px;
-color:white;
+
 }
 
 #info{
 position: absolute;
-border: 0px solid red;
 border-radius:15px;
-top: 450px;
-!padding: 5px 5px 5px 5px;
+float:bottom;
+!top: 450px;
 height: 135px;
 width: 100%;
 }
@@ -129,7 +118,7 @@
     margin-left:6%;
     border: 1px solid gray;
     padding: 5px 5px 5px 5px ;
-    background: black;
+  
     opacity:1;
     float:left;
 }
@@ -146,28 +135,15 @@
     float:right;
     font-size:1em;
 }
+
 #preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;}
 
-#timeinfo{
-    border-radius: 15px;
-    height:80px;
-    width: 95%;
-    margin: 0px;
-    padding: 5px 5px 5px 5px ;
-    background: transparent;
-    position:relative;
-    top:30px;
-}
 
 #remainingtime{
     padding:0;
     margin:0;
-    font-size:1.4em;
-    color:white;
-    position:relative;
-    left:40px;
-    top:90px;
-    width:120px;
+    font-size:2.6em;
+    width:180px;
     float:left;
     background-color:transparent;
 }
@@ -180,7 +156,6 @@
     border: 0px solid gray;
     position:absolute;
     top: 0px;
-    background: black;
     opacity:1;
 }
 
@@ -188,31 +163,27 @@
     border-radius: 15px;
     border: 1px solid blue;
     padding: 1px 1px 1px 1px ;
-    background: black;
+
     width: 99%;
     height: 490px;
 }
 
 .svgmusic {
     padding:0px;
-    border: 1px solid gray;
+    border: 1px dashed gray;
     display:block;
     border-radius: 15px;
     margin: 0px;
     width: 100%;
     height: 445px;
+    min-height: 445px;
+
 }
 
-svg { background-color: black; width:1000px; height:330px; display:block;}
-line { stroke: white; }
-text { fill: white;}
-path { stroke: white; fill: white; }
-rect { fill: white; }
-polygon { fill: white; }
-circle { stroke: white; }
 
-
-#thesquare{ position:absolute; width:700px; }
+#thesquare{ position:absolute; 
+	    width:700px; 
+	  }
 .magicsquare {
     border: 1px solid white;
     padding: 2px 2px 2px 2px;
@@ -220,7 +191,6 @@
     height: 100px;
     float: left;
     font-size: 3em;
-    color:white;
     text-align:center
 }
 
@@ -251,18 +221,16 @@
 }
 
 #datetime{
-    display:table-cell; 
-    vertical-align:middle;
+    float:left;
     width:90px;
-    font-size:0.9em; color: white;
+    font-size:0.9em; 
     text-align:center;
     background-color: transparent;    
 }
 
 #current{
     font-size:1.7em; 
-    font-weight: bold;
-    color: white;
+    font-weight: bold;   
     background-color: transparent;    
     z-index: 3;
     opacity: 0.8;
@@ -270,76 +238,38 @@
 }
 
 #client_latency{
+    position:absolute;
+    right:100px;
+    top:1px;
     background:transparent;
-    width:135px;
+    float:right;
     font-size:1em;
-    color: white;
-    z-index: 1;
-    padding: 3px 3px 3px 3px;
-    opacity: 0.8;
-    position:relative;
-    top: -30px;
+    padding:0px;
 }
 
-.metrocase {
-    !float:right;
-    border-radius: 5px;
-    !position: relative; 
-    !right: 20px;
-    !top:-25px;
-    width: 60px;  
-    height: 30px;
-    color: black;
-    text-align: center;
-    font-size: 4em; font-color: black;
-    background: transparent;
-    z-index: 2;
-    border: 1px solid white;
-}
 
-#metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; float:left; }
-#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
-#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
-#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
 
 #fluid {}
 .fluid-img{ height:50%; width:50%; }
 .clear { clear:both; }
 
 #midcomms{
-!color:white;
-width:160px; 
-height:40px; 
-background-color:transparent; 
-border: 0px solid yellow; 
-float:left;
+!width:160px; 
+!height:40px; 
+!background-color:transparent; 
+
+!float:left;
 }
 
 #client_chronometer{ 
-position:fixed; 
-right:70px; 
-bottom: 10px;  
+float:right;
 font-size:3em;
-
-    !display:table-cell; 
-    !vertical-align:middle;
-    !border-radius: 15px;
-    !float:right;
-    !background-color: transparent;   
-    !color: white;
-    !font-size: 3.7em; 
-    !text-align: center;
-    !opacity:0.8;
-    !position: relative; 
-    !left: 10px; 
-    !bottom:64px;
-    !width: 210px; 
-    !z-position: 2;
+margin-right:50px;
 }
 
 #transport{ 
     position:relative;
-    padding: 20px;
+    padding: 0px;
     bottom:40px;
 }
 
@@ -364,6 +294,7 @@
     position:relative;
     top:-5px;
     left:20px;
+
 }
 
 #count {
@@ -378,6 +309,7 @@
     background:transparent;
     float:left;
     display:inline;
+    min-height:70px;
 }
 
 #totalcountdown  {
@@ -410,14 +342,15 @@
     font-size:3em;
     text-align:center;
     !background-color:black;
-    border:1px solid white;
+    border:1px solid black;
     margin-left:auto; margin-right:auto;
     display:table-cell;
     vertical-align:middle;
     border-radius: 15px;
 }
 
-!#wide { !background-color:white;  
+!#wide { 
+    
 	 width:5600px; height:90%; border: 1px solid black;  
 	 padding: 16px 10px 16px 0px; display:inline; }
 
@@ -425,7 +358,7 @@
     !background-color:black;
     margin-top:4px;
     height: 810px;
-    width: 6700px;
+    width: 4400px;
     border-radius: 15px;
     position: relative;
     +filter: invert(100%);
@@ -434,30 +367,29 @@
 
 #map { width: 1250px; 
        position:absolute;
-       left: -0px;
+       top:30px;
+       left: 0px;
        height: 760px; 
        padding: 20px 50px 20px 50px; 
-       border: 1px solid gray;  
+       !border: 1px dashed gray;  
        !background-color: black;
      }
 
 #outerpreview { 
-    !display:inline;
-    !float:left; 
     height:700px;
     width: 1200px; padding: 0; 
-    border: 1px solid gray;  
-    background-color: black;
-    margin: 0 auto;
+    !border: 1px solid red;  
+    background-color: white;
     padding: 50px 50px 50px 50px; 
-    position: relative; left:-1200px;
+    position: relative; 
+    left:1500px;
 }
 
-.pview {  border: 1px solid red; height:49%; width:49%; float:left;  background:gray; z-index:-100; }
+.pview { border: 1px dashed gray; height:45%; width:49%; float:left;  background:white; z-index:-100; }
 .pviewmusic { position:relative; top:60px;  }
 
-.middle { float: left;  width: 10.8%;  height: 11%;  padding: 0;  border: 0;  margin: 0.33%; 
-	  border: 1px solid red;  background:gray;  border-radius:10px; }  /* 100 = 6 * widt\h + 12 * margin */
+.middle { float: left;  width: 10.8%;  height: 9%;  padding: 0;  border: 0;  margin: 0.33%; 
+	  border: 1px solid red;  background:white;  border-radius:10px; }  /* 100 = 6 * widt\h + 12 * margin */
 
 .middle p { font-size:2.5em;  position:relative; left: 0px; opacity:0.3; color:blue; display:block;}
 .middle img { padding: 20px 0px 0px 0px;  position:relative; top:-30px;}
@@ -465,7 +397,7 @@
 .middle:hover img {
     z-index:1000;
     width:500px;
-    background-color: orange;
+    background-color: white;
     !position: absolute;    
     border: 0px solid red;
     border-radius:20px;
@@ -478,10 +410,12 @@
 		      opacity:1; 
 		    }
 
-.inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%; 
-					 padding: 0; border: 1px solid white; margin: 0; 
-					 text-align: center; font-weight: bold; 
-					 position:relative; top: -110px; }
+.inner-0, .inner-1, .inner-2, .inner-3 { 
+    font-size:2.5em; float: left; width: 47%; height: 50%; 
+    padding: 0; border: 1px solid white; margin: 0; 
+    text-align: center; font-weight: bold; 
+    position:relative; top: -110px; 
+}
 
 .inner-0 { background-color: transparent; }
 .inner-1 { background-color: transparent; }
@@ -492,16 +426,81 @@
 		width:10%; background:transparent; height:40px; 
 		padding: 5px 5px 5px 5px; text-align:center;  }
 
-.unitseq { display:inline; float:right; 
-	   width:10%; background:transparent; height:40px; 
-	   padding: 5px 5px 5px 5px; text-align:center; 
-	   font-size:2em;}
+.unitseq { 
+    !position:absolute;
+    !top:0px;
+    !right:10px;
+    padding: 1px 1px 1px 1px; 
+    text-align:center; 
+    font-size:1em;
+}
+
+.head{
+!border: 1px solid black;
+background:gray;
+opacity:0.8;
+padding:10px;
+height:30px;
+position:fixed;
+top:0px;
+left:20px;
+width:100%;
+}
+
+.footx{
+    background:gray;
+    opacity:0.8;
+    padding:10px;
+    height:30px;
+    position:fixed;
+    bottom:0px;
+    left:20px;
+    width:100%;
+}
+
+
+#indexpagetitle{
+    font-size:1.2em;
+    float:left;
+    margin-left:30%;
+    padding:0;
+    margin-bottom:0px;
+}
+
+#setPart{
+    float:right;
+    margin-right:50px;
+    font-size:2em;
+}
+
+
+.metrocase {
+    margin-left:20px;
+    float:left;
+    border-radius: 5px;
+    width: 60px;  
+    height:30px;
+    color: black;
+    text-align: center;
+    font-size: 4em; 
+    border: 1px solid white;
+}
+
+#metronome0 { width: 60px; height: 30px; border-radius: 5px; float:left; }
+
+
+
+
+
+
 
 #links {position:absolute; bottom:150px; left: 800px; width:900px;}
-!#transect {position:absolute; bottom:180px; left: 1300px; width:600px;}
 
-.tportpop { !background-color:black; 
+#transect {float:left; font-size:2em; padding:0px;}
+
+.tportpop {     
 	    width:200px; height: 90px; 
 	    margin: 1px solid white; position:relative; 
 	    left:300px; top:60px;  border: 1px solid green; 
-	    border-radius: 10px; padding: 5px; }
\ No newline at end of file
+	    border-radius: 10px; padding: 5px; 
+}
\ No newline at end of file
--- a/www/martin/css/svg-stylesheet.css	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/css/svg-stylesheet.css	Tue Jul 15 23:49:44 2014 +0100
@@ -1,4 +1,4 @@
-svg { background-color: black; width:1000px; height:330px; display:block;}
+svg { background-color: red; width:1000px; height:330px; display:block;}
 line { stroke: white; }
 text { fill: white;}
 path { stroke: white; fill: white; }
--- a/www/martin/index.html	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/index.html	Tue Jul 15 23:49:44 2014 +0100
@@ -65,7 +65,7 @@
 	
 	<div id="outerpreview" >
 	  <div class="pview" id="preview-1" >    
-	    <div class="musicianprog" style="background:black; border: 1px solid yellow;" >
+	    <div class="musicianprog" style=" border: 1px solid yellow;" >
 	      <div id="counttitle1" style="display:inline;"></div>
 	      <div id="count1" style=" font-size:2em;"></div>
 	    </div>
@@ -74,18 +74,18 @@
 	  </div>
 	  
 	  <div class="pview" id="preview-2">
-	    <div class="musicianprog" style="background:black; border: 1px solid green; ">
+	    <div class="musicianprog" style="border: 1px solid green; ">
 	      <div id="counttitle2" style="display:inline;"></div>
 	      <div id="count2" style=" font-size:2em;"></div>
 	    </div>
 
-	    <div class="unitseq" id="unitseq1"></div>
+
 	   
 	    <div class="pviewmusic" id="previewbox-2"> </div>
 	  </div>
 	  
 	  <div class="pview" id="preview-3" >
-	    <div class="musicianprog" style="background:black; border: 1px solid aqua; ">
+	    <div class="musicianprog" style="border: 1px solid aqua; ">
 	      <div id="counttitle3" style="display:inline;"></div>
 	      <div id="count3" style=" font-size:2em;"></div>
 	    </div>
@@ -112,104 +112,116 @@
 
   <div class="outermaster">     
 
-    <div id="live"> </div>    
+    <div id="live"> 
+      <div class="svgmusic"></div>
+    </div>    
   
     <div id="info">
-    <div id="comms"> 
-      <div id="chat" title="type here to chat with others connected to network" >
-	<div id="nickname" title="type your login name and press enter" >
-	  <form id="set-nickname" class="wrap">
-	    <p>LOGIN:</p>
+      <div id="comms"> 
+	<div id="chat" title="type here to chat with others connected to network" >
+	  <div id="nickname" title="type your login name and press enter" >
+	    <form id="set-nickname" class="wrap">
+	      <p>LOGIN:</p>
 	    <input id="nick">
-	    <p id="nickname-err">Nickname already in use</p>
+	      <p id="nickname-err">Nickname already in use</p>
+	    </form>
+	  </div>
+	  <div id="connecting">
+	    <div class="wrap">Connecting to socket.io server</div>
+	  </div>
+	  <div id="messages">
+	    <div id="nicknames"></div>
+	    <div id="lines"></div>
+	  </div>
+	  <form id="send-message">
+	    <input id="message">
+	    <button>Send</button>
 	  </form>
 	</div>
-	<div id="connecting">
-	  <div class="wrap">Connecting to socket.io server</div>
+      </div>    
+      
+      <div id="midfoot">
+	<div id="midcomms">
+	  <div id="counttitle">waiting...</div>
+	  <div id="count"></div>
+	  <div class="unitseq" id="unitseq1"></div>
 	</div>
-	<div id="messages">
-	  <div id="nicknames"></div>
-	  <div id="lines"></div>
+	
+	<div id="remainingtime">
+	  next in:
+	  <div id="totalcountdown">.</div>
 	</div>
-	<form id="send-message">
-	  <input id="message">
-	  <button>Send</button>
-	</form>
+	
+	
+	
+	<div id="current">
+	  <script type="text/javascript">
+	    function setPart(sel) {
+	    //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
+	    //testSound.play();
+	    
+	    var value = sel.options[sel.selectedIndex].value;  
+	    document.getElementById('group').value=value; 
+	    //$('div#current').text('GROUP ' +value).text='value';
+	    }
+	  </script>
+	  
+
+	</div>      
+	
       </div>
+      
+      <div id="preview"></div>
+      
     </div>    
+    
+    
+
+
+
+  </div>
   
-    <div id="midfoot">
+  
 
-      <div id="midcomms">
-	<div id="counttitle" style="display:inline;"></div>
-	<div id="count"></div>
-	<div class="unitseq" id="unitseq1" style="float:right; width:50px; position:relative; top:-10px; left:40px"></div>
- </div>
-      
-      <div id="remainingtime">
-	next in:
-	<div id="totalcountdown">.</div>
-      </div>
+  
+  
+  
+  <div class="head">
+    <div id="datetime"></div>	   
+    <div class="metrocase" id="metro">
+      <div id="metronome0"></div>
+    </div>
+    <div id="client_latency">Latency: 0ms</div>    
+    <div id="client_chronometer" >00:00:00.0</div>      
+</div>
+  
+  <div class="footx">
+    <div id="transect">.. </div>	
 
-      
-      <div id="timeinfo">
-	<div id="datetime"></div>
-	
-	<div id="client_latency">Latency: 0ms</div>
-      </div>
-
-
-      <div id="current">
-	<script type="text/javascript">
-	  function setPart(sel) {
-	  //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
-	  //testSound.play();
-	  
-	  var value = sel.options[sel.selectedIndex].value;  
-	  document.getElementById('group').value=value; 
-	  //$('div#current').text('GROUP ' +value).text='value';
-	  }
-	</script>
-
-	<div>
-	  <select id="setPart" onchange="setPart(this)">
-	    <option value="1">Stream 01</option>
-	    <option value="2">Stream 02</option>
-	    <option value="3">Stream 03</option>
-	    <option value="4">Stream 04</option>
-	  </select>
-	</div>
-      </div>      
-      
+    <div id="indexpagetitle">
+      pathways - for guitar, percussion & electronics
     </div>
     
-    
-    <div id="preview"></div>
-    
-    </div>    
-    
-  
-  </div>
-
-
-
-
-    </div>    
+    <div>
+      <select id="setPart" onchange="setPart(this)">
+	<option value="1">Stream 01</option>
+	<option value="2">Stream 02</option>
+	<option value="3">Stream 03</option>
+	<option value="4">Stream 04</option>
+      </select>
+    </div>
     
 
+    
+
+
 
     
-    <div style=" position:fixed; left:30px; bottom: 10px;  font-size:3em; " id="indexpagetitle"
-      <h2>pathways - for guitar, percussion & electronics</h2>
-    </div>
-    
-    <div style="" id="transect">.. </div>	
-    <div id="client_chronometer" >00:00:00.0</div>      
-   
-    <div class="metrocase" id="metro" style=" position:fixed; left:550px; bottom:80px;" >
-      <div id="metronome0"></div>
-    </div>
 
     
+
+    
+  </div>    
+  
 </body>
 </html>
--- a/www/martin/js/controlseq.js	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/js/controlseq.js	Tue Jul 15 23:49:44 2014 +0100
@@ -54,9 +54,9 @@
 function countinCtrl(groupID, currentseconds,mm,text,colour,background,unit){
     //console.log("#count"+groupID)
 	// all counts to control page
-	$("#counttitle"+groupID).css('color','white');
+	$("#counttitle"+groupID).css('color','black');
 	$("#counttitle"+groupID).text(text);
-	$("#count"+groupID).text(currentseconds).css('color','white');
+	$("#count"+groupID).text(currentseconds).css('color','black');
 	document.getElementById("count"+groupID).style.color=colour;
 }
 
--- a/www/martin/js/nodescore-client.js	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/js/nodescore-client.js	Tue Jul 15 23:49:44 2014 +0100
@@ -254,4 +254,4 @@
     function clear () {
 	$('#message').val('').focus();
     };
-});
\ No newline at end of file
+});
--- a/www/martin/js/nodescore-slides.js	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/js/nodescore-slides.js	Tue Jul 15 23:49:44 2014 +0100
@@ -46,7 +46,7 @@
 function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
     var groupPage=document.getElementById('group').value
     if (groupID == groupPage) {
-	$("#counttitle").css('color','white');
+	$("#counttitle").css('color','black');
 	$("#counttitle").text(text);
 	$("#count").text(currentseconds);
 	document.getElementById("count").style.color=colour;
@@ -224,4 +224,4 @@
     function clear () {
 	$('#message').val('').focus();
     };
-});
\ No newline at end of file
+});
--- a/www/martin/svg/svg-stylesheet.css	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/svg/svg-stylesheet.css	Tue Jul 15 23:49:44 2014 +0100
@@ -1,8 +1,8 @@
-svg { background-color: black; width:1000px; height:330px; display:block;}
-line { stroke: white; }
-text { fill: white;}
-path { stroke: white; fill: white; }
-rect { fill: white; }
-polygon { fill: white; }
-circle { stroke: white; }
+svg { width:1000px; height:330px; display:block;}
+!line { stroke: white; }
+!text { fill: white;}
+!path { stroke: white; fill: white; }
+!rect { fill: white; }
+!polygon { fill: white; }
+!circle { stroke: white; }
 
--- a/www/martin/transport.html	Tue Jul 15 17:48:35 2014 +0100
+++ b/www/martin/transport.html	Tue Jul 15 23:49:44 2014 +0100
@@ -18,18 +18,6 @@
   
 
 
-
-<div id="links" style="position:absolute; top:10px; left:10px;">
-  <a style="float:right; font-size:2em;" href="score.html"  target="_blank"> | S C O R E |</a>
-  <a style="float:right; font-size:2em;" href="index.html"                 > | SEQUENCER |</a>
-  <a style="float:right; font-size:2em;" href="map.html"                   > | M A P |</a>
-</div>
-
-<div class="tportpop" style="" >
-  <div style="font-size:3em; color:red; " id="transect">.. </div>
-  <div style="font-size:3em; color:yellow; " id="unitmon">.. </div>
-</div>
-
 <div id="ctrlstop"  style="position:absolute; top:10px; left:10px;">
   <div id="c_chronometer"  style="z-index: 2;">00:00:00.0</div>
   <div id="transport" >