Live Regions Example 4

<div role="application">
<script type="text/javascript">
  var live4 = new Live4();
  widgets.add( live4 );
</script>

  <h2>Live Region Option</h2>
  
  <ul>
    <li>  
      <label for="throttle">Minimum number of seconds before a play can happen</label>
      <select id="throttle" onblur="setMinimumTimeBetweenPlays();" onchange="setMinimumTimeBetweenPlays();">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
    </li>
  </ul>      


<h2>The Reals versus The Nicks Live Region</h2>

<div id="scoreboardRegion">

  <h2>Game Clock</h2>
  <h2 id="gameClock" aria-live="off">05:00</h2>


  <div id="theReals">
     <h3 id="realsScore" aria-live="polite">The Reals: 0</h3>
  
     <table id="realNamesStats" summary="Stats for the Reals team" border="1" width="100%">
     <tbody>
       <tr>
        <th>Lineup</th>
      <th>Points</th>
      <th>Rebounds</th>
      <th>Assists</th>
     </tr>

       <tr aria-live="polite">
        <td id="charlesName">Charles</td>
      <td id="charlesPoints"   class="statsCell" aria-labelledby="charlesName">0</td>
      <td id="charlesRebounds" class="statsCell" aria-labelledby="charlesName">0</td>
      <td id="charlesAssists"  class="statsCell" aria-labelledby="charlesName">0</td>
     </tr>

       <tr aria-live="polite">
        <td id="aaronName">Aaron</td><td id="aaronPoints" class="statsCell" aria-labelledby="aaronName">0</td>
      <td id="aaronRebounds" class="statsCell" aria-labelledby="aaronName">0</td>
      <td id="aaronAssists"  class="statsCell" aria-labelledby="aaronName">0</td>
     </tr>

       <tr aria-live="polite">
        <td id="ginnName">Ginn</td>
      <td id="ginnPoints"   class="statsCell" aria-labelledby="ginnName">0</td>
      <td id="ginnRebounds" class="statsCell" aria-labelledby="ginnName">0</td>
      <td id="ginnAssists"  class="statsCell" aria-labelledby="ginnName">0</td>
     </tr>

      <tr aria-live="polite">
       <td id="steveName">Steve</td>
     <td id="stevePoints"   class="statsCell" aria-labelledby="steveName">0</td>
     <td id="steveRebounds" class="statsCell" aria-labelledby="steveName">0</td>
     <td id="steveAssists"  class="statsCell" aria-labelledby="steveName">0</td>
    </tr>
    </tbody>
    </table>
  </div>

  <div id="theNicks">
  
    <h3 id="nicksScore" aria-live="polite">The Nicks: 0</h3>

    <table id="nickNamesStats" summary="Stats for the Nicks team" border="1" width="100%">
    <tbody>
       <tr>
       <th>Lineup</th>
     <th>Points</th>
     <th>Rebounds</th>
     <th>Assists</th>
     </tr>

      <tr aria-live="polite">
      <td id="clcName">CLC-4-TTS</td>
    <td id="clcPoints"   class="statsCell" aria-labelledby="clcName">0</td>
    <td id="clcRebounds" class="statsCell" aria-labelledby="clcName">0</td>
    <td id="clcAssists"  class="statsCell" aria-labelledby="clcName">0</td>
    </tr>

      <tr aria-live="polite">
       <td id="aaronlevName">aaronlev</td>
     <td id="aaronlevPoints"   class="statsCell" aria-labelledby="aaronlevName">0</td>
     <td id="aaronlevRebounds" class="statsCell" aria-labelledby="aaronlevName">0</td>
     <td id="aaronlevAssists"  class="statsCell" aria-labelledby="aaronlevName">0</td>
    </tr>

     <tr aria-live="polite">
      <td id="gcName">GC</td>
    <td id="gcPoints"   class="statsCell" aria-labelledby="gcName">0</td>
    <td id="gcRebounds" class="statsCell" aria-labelledby="gcName">0</td>
    <td id="gcAssists"  class="statsCell" aria-labelledby="gcName">0</td>
     </tr>

     <tr aria-live="polite">
      <td id="slName">SL</td>
    <td id="slPoints"   class="statsCell" aria-labelledby="slName">0</td>
    <td id="slRebounds" class="statsCell" aria-labelledby="slName">0</td>
    <td id="slAssists"  class="statsCell" aria-labelledby="slName">0</td>
   </tr>
   </tbody>
   </table>
  
  </div>
  
</div>

<div id="winnerDiv">
  <h2 id="theWinner" aria-live="polite"></h2>
</div>

</div>

  <script type="text/javascript">
/**
*
* The Globale Variables
*/

if (!window.Node) {
  var Node = {            // If there is no Node object, define one
    ELEMENT_NODE: 1,    // with the following properties and values.
    ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
    TEXT_NODE: 3,       // For XML-specific nodes, you need to add
    COMMENT_NODE: 8,    // other constants here.
    DOCUMENT_NODE: 9,
    DOCUMENT_FRAGMENT_NODE: 11
  }
}


var KEY_PAGEUP   = 33;
var KEY_PAGEDOWN = 34;
var KEY_END      = 35;
var KEY_HOME     = 36;

var KEY_LEFT     = 37;
var KEY_UP       = 38;
var KEY_RIGHT    = 39;
var KEY_DOWN     = 40;

var KEY_SPACE    = 32;
var KEY_TAB      = 9;

var KEY_BACKSPACE = 8;
var KEY_DELETE    = 46;
var KEY_ENTER     = 13;
var KEY_INSERT    = 45;
var KEY_ESCAPE    = 27;

var KEY_F1        = 112;
var KEY_F2        = 113;
var KEY_F3        = 114;
var KEY_F4        = 115;
var KEY_F5        = 116;
var KEY_F6        = 117;
var KEY_F7        = 118;
var KEY_F8        = 119;
var KEY_F9        = 120;
var KEY_F10       = 121;

var KEY_M         = 77;

var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";

// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************

/**
*
* nextSiblingElement
*
* @contructor
*/

function nextSiblingElement( node ) {

  var next_node = node.nextSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/

function previousSiblingElement( node ) {

  var next_node = node.previousSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.previousSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/

function firstChildElement( node ) {

  var next_node = node.firstChild;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile


  return next_node;
  
}

/**
*
* getTextContentOfNode
*
* @contructor
*/

function getTextContentOfNode( node ) {

  var next_node = node.firstChild;
  var str = "";

  while( next_node ) {
    
    if( (next_node.nodeType == Node.TEXT_NODE ) &&
      (next_node.length > 0 )
     )
      str += next_node.data;
    
    
    next_node = next_node.nextSibling;
    
  }  // endwhile

  return str;
  
}

/**
*
* setTextContentOfNode
*
* @contructor
*/

function setTextContentOfNode( node, text ) {

   // Generate a new text node with the text value
    var text_node = document.createTextNode(text);
  
    // Remove child nodes to remove text
    while (node.firstChild) {
      node.removeChild(node.firstChild);
    } // while

    // Append new text to the container element
    node.appendChild( text_node );

}
  </script>

  <script type="text/javascript">
// JavaScript Document
// Widgets is a way to initialize widgets in the ARIA examples


function Widgets() {
  this.widgets = new Array();
}

/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.add = function(obj) {
  this.widgets[this.widgets.length] = obj;
}

/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.init = function() {
     
   for(var i = 0; i < this.widgets.length; i++ )
     this.widgets[i].init();
}

var widgets = new Widgets();

function initApp() {
  widgets.init();
}

  </script>

  <script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";

//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {

}


//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )

WebBrowser.prototype.keyCode = function( event ) {
  var e = event || window.event;
  
  return e.keyCode;
}  

/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/

if( document.createEvent ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.simulateOnClickEvent = function( node ) {
    // W3C DOM Events way to trigger a "click" event
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );

    node.dispatchEvent( e );

  }

} else {

  // If a Microsoft IE based browser implement this function
  
  WebBrowser.prototype.simulateOnClickEvent = function( node ) {

    var e = document.createEventObject();
    node.fireEvent( "onclick", e );

  } // endif

}

if ( document.addEventListener ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

    if( clickHandler )
      document.addEventListener( "click",     clickHandler, true );
    
    if( downHandler )
      document.addEventListener( "mousedown", downHandler,  true );

    if( moveHandler )
      document.addEventListener( "mousemove", moveHandler,  true );
    
    if( upHandler)
      document.addEventListener( "mouseup",   upHandler,    true );

  }

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

  if( upHandler)
      document.removeEventListener( "mouseup",   upHandler,    true );
      
    if( moveHandler )
      document.removeEventListener( "mousemove", moveHandler,  true );
    
    if( downHandler )
      document.removeEventListener( "mousedown", downHandler,  true );
      
    if( clickHandler )
      document.removeEventListener( "click",     clickHandler, true );

  }

} else {

  // If a Microsoft IE based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   node.setCapture();
   if( clickHandler)
     node.attachEvent( "onclick", clickHandler );
    
   if( downHandler)
     node.attachEvent( "onmousedown", downHandler );
    
   if( moveHandler )
     node.attachEvent( "onmousemove", moveHandler );
    
   if( upHandler )
     node.attachEvent( "onmouseup", upHandler );

  } // endif

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   if( upHandler )
     node.detachEvent( "onmouseup", upHandler );
    
   if( moveHandler )
     node.detachEvent( "onmousemove", moveHandler );
    
   if( downHandler)
     node.detachEvent( "onmousedown", downHandler );
    
   if( clickHandler)
     node.detachEvent( "onclick", clickHandler );
    
     node.releaseCapture();

  } // endif


}




if (typeof document.documentElement.setAttributeNS != 'undefined') {

  WebBrowser.prototype.stopPropagation = function( event ) {
    if( event.stopPropagation )
      event.stopPropagation();
    if( event.preventDefault )
      event.preventDefault();
    return false;
  }

  WebBrowser.prototype.target = function( event ) {
  return event.target;
  }
  
  WebBrowser.prototype.attrName = function( event ) {
  return event.attrName;
  }

  WebBrowser.prototype.testAttrName = function( event , attrName) {
  return event.attrName == attrName;
  }

  WebBrowser.prototype.charCode = function(event) {
     return event.charCode;
  }

  WebBrowser.prototype.calculateOffsetLeft = function( node ) {
  return node.offsetLeft;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function( node ) {
  return node.offsetTop;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.pageX;    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.pageY;    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    node.style.left = left+"px";
    node.style.top = top+"px";
  }


} else {

  WebBrowser.prototype.stopPropagation = function( event ) {
    event.cancelBubble = true;
    event.returnValue = false;
    return false;
  }

  WebBrowser.prototype.charCode = function(event) {
    return window.browser.keyCode( event );
  }

  WebBrowser.prototype.target = function( event ) {
    return event.srcElement;
  }

  WebBrowser.prototype.attrName = function( event ) {
  return event.propertyName;
  }
    
  WebBrowser.prototype.testAttrName = function( event , attrName) {
        
        var str = attrName;
        
        if( attrName.indexOf("aria-") >=0 ) {
            str = attrName.replace(/aria-/,"");
            var node = document.getElementById('test1');
            if( node )
               node.innerHTML = str.substr(0,1).toUpperCase();
            var len  = str.length;
            str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
            var node = document.getElementById('test2');
//            if( node )
//               node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
        }
        
        return event.propertyName == str;
  }
    
  WebBrowser.prototype.calculateOffsetLeft = function(node) {
  var offset = 0;
  
  while( node ) {
    offset += node.offsetLeft;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function(node) {
  var offset = 0;
  
  while( node ) {
    offset = offset + node.offsetTop;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    offsetx = 0;
    offsety = 0;
    nnode = node.offsetParent
    while( nnode ) {
      offsetx = offsetx + nnode.offsetLeft;
      offsety = offsety + nnode.offsetTop;
      nnode = nnode.offsetParent;
    }
    node.style.left = left-offsetx+"px";
    node.style.top = top-offsety+"px";
  }
  
};


if (document.addEventListener) {

     // Functions for W3C Standards compliant implementation of adding event handlers

     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.addEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.removeEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      elmTarget.addEventListener("DOMAttrModified", fCallback, false);
      returnValue = true;
    };

} else {

  if(document.attachEvent) {

     // IE Specific Event handler functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
     };

    WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
    };

  } else {

     // For browsers that do not support W3C or IE event functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
       return false;
     };

  }

}

var browser = new WebBrowser();

  </script>

  <script type="text/javascript">
function Live4() {
  
}

Live4.prototype.init = function() {
   document.getElementById("throttle").selectedIndex = 4;
   runGame();  
}

var minimumWaitTime = 5;
var currentTimer = 0;

function statFlash(statID){
   document.getElementById(statID).style.backgroundColor = "black";
   document.getElementById(statID).style.color = "yellow";
   document.getElementById(statID).style.fontWeight = "bold";
   window.setTimeout(function (flashedID) {
       document.getElementById(flashedID).style.backgroundColor = "";
       document.getElementById(flashedID).style.color = "";
       document.getElementById(flashedID).style.fontWeight = "";
       },500,statID);
   }

function runGame(){
   updateGameClock();
   if (currentTimer < 1){
      makeAPlay();
      currentTimer = minimumWaitTime;
      }
   currentTimer = currentTimer-1;
   if (!gameOver()){
      window.setTimeout(runGame,1000);
      }
   }

function updateGameClock(){
   var gameclockStr = document.getElementById('gameClock').textContent;
   if (gameclockStr == null){
      gameclockStr = document.getElementById('gameClock').innerText;
      }
   var minutes = parseInt(gameclockStr.substring(0,gameclockStr.indexOf(':')));
   var seconds = parseInt(gameclockStr.substring(gameclockStr.indexOf(':')+1));
   if (seconds > 0){
      seconds = seconds-1;
      }
   else if (minutes > 0){
      minutes = minutes-1;
      seconds = 59;
      }
   var zeroPadMin = "";
   if (minutes < 10){
      zeroPadMin = "0";
      }
   var zeroPadSec = "";
   if (seconds < 10){
      zeroPadSec = "0";
      }
   document.getElementById('gameClock').textContent = zeroPadMin + minutes + ":" + zeroPadSec + seconds;
   document.getElementById('gameClock').innerText = zeroPadMin + minutes + ":" + zeroPadSec + seconds;
   }

function gameOver(){
   var gameclockStr = document.getElementById('gameClock').textContent;
   if (gameclockStr == null){
      gameclockStr = document.getElementById('gameClock').innerText;
      }
   if (gameclockStr == "00:00"){
      declareWinner();
      return true;
      }
   return false;
   }

function declareWinner(){
   var theScoreStr = document.getElementById('realsScore').textContent;
   if (theScoreStr == null){
      theScoreStr = document.getElementById('realsScore').innerText;
      }
   var theRealsScore = parseInt(theScoreStr.substring(theScoreStr.indexOf(':')+1));
   theScoreStr = document.getElementById('nicksScore').textContent;
   if (theScoreStr == null){
      theScoreStr = document.getElementById('nicksScore').innerText;
      }
   var theNicksScore = parseInt(theScoreStr.substring(theScoreStr.indexOf(':')+1));
   if (theRealsScore > theNicksScore){
      document.getElementById('theWinner').textContent = "Game over! The Reals win!";
      document.getElementById('theWinner').innerText = "Game over! The Reals win!";
      }
   else if (theRealsScore < theNicksScore){
      document.getElementById('theWinner').textContent = "Game over! The Nicks win!";
      document.getElementById('theWinner').innerText = "Game over! The Nicks win!";
      }
   else{
      document.getElementById('theWinner').textContent = "Game over! Draw!";
      document.getElementById('theWinner').innerText = "Game over! Draw!";
      }
   }

function makeAPlay(){
   var rand = Math.random();
   if (rand < .1){
      theRealsScored();
      return;
      }
   if (rand < .3){
      randomRebound();
      return;
      }
   if (rand > .9){
      theNicksScored();
      return;
      }  
   }

function theRealsScored(){
   var theScoreStr = document.getElementById('realsScore').textContent;
   if (theScoreStr == null){
      theScoreStr = document.getElementById('realsScore').innerText;
      }
   var theScore = parseInt(theScoreStr.substring(theScoreStr.indexOf(':')+1));
   theScore = theScore + 1;
   document.getElementById('realsScore').textContent = "The Reals: " + theScore;
   document.getElementById('realsScore').innerText = "The Reals: " + theScore;  
   statFlash('realsScore');
   var rand = Math.random();
   if (rand < .4){
      playerStatIncreased("charlesPoints");
      if (rand < .2){
         playerStatIncreased("steveAssists");
         }
      }
   else if (rand < .6){
      playerStatIncreased("stevePoints");
      if (rand < .5){
         playerStatIncreased("charlesAssists");
         }
      }
   else if (rand < .8){
      playerStatIncreased("ginnPoints");
      if (rand < .7){
         playerStatIncreased("aaronlevAssists");
         }
      }
   else{
      playerStatIncreased("aaronPoints");
      if (rand < .9){
         playerStatIncreased("ginnAssists");
         }
      }
   }

function theNicksScored(){
   var theScoreStr = document.getElementById('nicksScore').textContent;
   if (theScoreStr == null){
      theScoreStr = document.getElementById('nicksScore').innerText;
      }
   var theScore = parseInt(theScoreStr.substring(theScoreStr.indexOf(':')+1));
   theScore = theScore + 1;
   document.getElementById('nicksScore').textContent = "The Nicks: " + theScore;
   document.getElementById('nicksScore').innerText = "The Nicks: " + theScore;
   statFlash('nicksScore');
   var rand = Math.random();
   if (rand < .4){
      playerStatIncreased("clcPoints");
      if (rand < .2){
         playerStatIncreased("aaronlevAssists");
         }
      }
   else if (rand < .6){
      playerStatIncreased("slPoints");
      if (rand < .5){
         playerStatIncreased("gcAssists");
         }
      }
   else if (rand < .8){
      playerStatIncreased("gcPoints");
      if (rand < .7){
         playerStatIncreased("slAssists");
         }
      }
   else{
      playerStatIncreased("aaronlevPoints");
      if (rand < .9){
         playerStatIncreased("clcAssists");
         }
      }
   }

function randomRebound(){
   var rand = Math.random();
   if (rand < .2){
      playerStatIncreased("charlesRebounds");
      }
   else if (rand < .3){
      playerStatIncreased("steveRebounds");
      }
   else if (rand < .4){
      playerStatIncreased("ginnRebounds");
      }
   else if (rand < .5){
      playerStatIncreased("aaronRebounds");
      }
   else if (rand < .7){
      playerStatIncreased("clcRebounds");
      }
   else if (rand < .8){
      playerStatIncreased("slRebounds");
      }
   else if (rand < .9){
      playerStatIncreased("gcRebounds");
      }
   else{
      playerStatIncreased("aaronlevRebounds");
      }
   }

function playerStatIncreased(playerStatsIDStr){
   var theStatsStr = document.getElementById(playerStatsIDStr).textContent;
   if (theStatsStr == null){
      theStatsStr = document.getElementById(playerStatsIDStr).innerText;
      }
   var stats = parseInt(theStatsStr);
   stats = stats + 1;
   document.getElementById(playerStatsIDStr).textContent = stats;
   document.getElementById(playerStatsIDStr).innerText = stats;
   statFlash(playerStatsIDStr);
   }

function setMinimumTimeBetweenPlays(){
   minimumWaitTime = document.getElementById("throttle").options[document.getElementById("throttle").selectedIndex].text;  
   currentTimer = minimumWaitTime;
   }

  </script>

  <style type="text/css">
.statsCell{
   text-align: right;
   }

div#scoreboardRegion{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    }

h1 { text-align: center }
h2 { text-align: center }
h3 { text-align: center }

div#theReals{
    float: left;
    width: 40%;
    }

div#theNicks{
    float: right;
    width: 40%;
    }

div#winnerDiv{
    clear: both;
    }
  </style>