Javascript clock color styling
<p>I'm newbie to JS and would like to know if there's a way to modify the color of the "|" in between the clock hour and minutes in the code. I'd like it to be red.
Thanks for any help, hints and foremost explanations :)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
   "use strict";
   
   var textElem = document.getElementById("clock");
   var textNode = document.createTextNode("");
   textElem.appendChild(textNode);
   var curFontSize = 24;  // Do not changes
   
   function updateClock() {
    var d = new Date();
    var s = "";
    s += (10 &gt; d.getHours  () ? "0" : "") + d.getHours() + "|";
    s += (10 &gt; d.getMinutes() ? "0" : "") + d.getMinutes();
    textNode.data = s;
    setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
   }
   
   
   function updateTextSize() {
    var targetWidth = 0.9;  // Proportion of full screen width
    for (var i = 0; 3 &gt; i; i++) {  // Iterate for better better convergence
     var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
     textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
     curFontSize = newFontSize;
    }
   }
   
   updateClock();
   updateTextSize();
   window.addEventListener("resize", updateTextSize);
  &lt;/script&gt;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> @font-face {
 font-family: Steelfish;
 src: url(Images/Steelfish.ttf);
}

    body {
 margin: 0;
 padding: 0;
 text-shadow: 0px 1px 1px black;
 font-family: Steelfish;
 font-weight:100;
 color:red;
 letter-spacing: 1px;
}

#clock {
       position:absolute; top:-17px; left:205px; text-align:left; z-index:50;
       font-size:10pt;
    color:gray;
}

#minute{color:gray;}

#icon{position:absolute; top:24px; left:0px; width:50px; z-index:50;}

#location{
       position:absolute; top:50px; left:80px; width:250px; height:50px; text-align:left; z-index:50;
       color:#f79b00;
       font-size:17px;
}
#temperature{
       position:absolute; top:66px; left:160px; width:250px; height:50px; text-align:left; z-index:50;
       color:#248ffc;
       font-size:19px;
}
#condition{
       position:absolute; top:14px; left:80px; width:250px; height:50px; text-align:left z-index:50;
       color:f16000;
       font-size:19px;
}

#barre{
       position:fixed; top:62px; left:60px; width:140px; height:64px; text-align:left; z-index:12;
    border-top: 1px solid grey;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body onload="didLoadPage()"&gt;

&lt;div id="barre"&gt;&lt;/div&gt;

  &lt;div id="wrap"&gt;
    &lt;section id="topSection"&gt;
      &lt;div id="left" style="width:40%;vertical-align:middle;"&gt;
        &lt;p id="location""&gt;London&lt;/p&gt;
  &lt;p id="clock" style="font-size:36pt;"&gt;&lt;/p&gt;
        &lt;p id="condition"&gt;Mostly Clear&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;div id="middle" style="width:20%;"&gt;
        &lt;center&gt;
          &lt;img id="icon" src="IconSets/Sink/0.png" style="width:75px;" alt="" /&gt;
        &lt;/center&gt;
      &lt;/div&gt;
      
      &lt;div id="right" style="width:40%;"&gt;
        &lt;p&gt;&lt;span id="temperature"&gt;10&lt;/span&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
                                 
                                 &lt;script type="text/javascript"&gt;
   "use strict";
   
   var textElem = document.getElementById("clock");
   var textNode = document.createTextNode("");
   textElem.appendChild(textNode);
   var curFontSize = 24;  // Do not changes
   
   function updateClock() {
    var d = new Date();
    var s = "";
    s += (10 &gt; d.getHours  () ? "0" : "") + d.getHours() + "|";
    s += (10 &gt; d.getMinutes() ? "0" : "") + d.getMinutes();
    textNode.data = s;
    setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
   }
   
   
   function updateTextSize() {
    var targetWidth = 0.9;  // Proportion of full screen width
    for (var i = 0; 3 &gt; i; i++) {  // Iterate for better better convergence
     var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
     textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
     curFontSize = newFontSize;
    }
   }
   
   updateClock();
   updateTextSize();
   window.addEventListener("resize", updateTextSize);
  &lt;/script&gt;
                                            
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>