Edit on
<article class="scoreboard" id="scoreboard">
    <div class="header">
    <span class="time" data-scoreboard-bind="time"></span>
    <span class="column" data-scoreboard-bind="">G</span>
    <span class="column" data-scoreboard-bind="">Shots</span> 
    <span class="column" data-scoreboard-bind="">P%</span> 
    <span class="column" data-scoreboard-bind="">Subs</span>    
  </div>
	<div class="team homeTeam">
		<span class="name" data-scoreboard-bind="homeTeamShort">Null</span>
		<span class="column goals" data-scoreboard-bind="homeTeamGoals">0</span>
		<span class="column game" data-scoreboard-bind="homeTeamShots">0</span>
		<span class="column game" data-scoreboard-bind="homeTeamPoss">0</span>
		<span class="column game" data-scoreboard-bind="homeTeamSubs">0</span>
	</div>
	
	<div class="team awayTeam">
		<span class="name" data-scoreboard-bind="awayTeamShort">Null</span>
		<span class="column goals" data-scoreboard-bind="awayTeamGoals">0</span>
		<span class="column game" data-scoreboard-bind="awayTeamShots">0</span>
		<span class="column game" data-scoreboard-bind="awayTeamPoss">0</span>
		<span class="column game" data-scoreboard-bind="awayTeamSubs">0</span>
	</div>
</article>

<script type="text/tim" id="statusMessage">
  <div class="statusMessage">
    <div class="logo"><img src="{{scoreboard.homeTeamLogo}}"></div>
    <div class="logo"><img src="{{scoreboard.awayTeamLogo}}"></div>
    <div class="score">
      <span class="team">{{scoreboard.homeTeamName}}</span>
      <span class="score">
				{{scoreboard.homeTeamGoals}} - {{scoreboard.awayTeamGoals}}
			</span>
      <span class="team">{{scoreboard.awayTeamName}}</span>
    </div>
    <footer class="arena">
      {{scoreboard.arena}}
    </footer>
  </div>
</script>
.scoreboard {
  height: 120px;
  width: 240px;
  background: white;
  border-style: solid;
  border-width: 1px;  
}

.scoreboard > .header {
  overflow: hidden;
  height: 33%;
  background: #888888;
}

.scoreboard > .header > span {
  display: block;
  float: left;
  width: 18.75%;
  text-align: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 1px 0 0;
}

.scoreboard > .header > .time {
  width: 25%;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}

.scoreboard > .team {
  overflow: hidden;
  height: 33%;
}

.scoreboard > .awayTeam {
  background: #00529F;
}

.scoreboard > .homeTeam {
  background: #000000;
}

.scoreboard > .team > span {
  display: block;
  float: left;
  text-align: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 1px 0 0;
}

.scoreboard > .team > .name {
  width: 25%;
  text-align: center;
}

.scoreboard > .team > .column {
  width: 18.75%;  
  background: rgba(0, 0, 0, 0.2);
}
var scoreboard = new Scoreboard({
  autoStart: true,
  homeTeamName: 'Juventus',
  awayTeamName: 'Barcelona',
  homeTeamLogo: '',
  awayTeamLogo: '',
  arena: 'Juventus Stadium',
  homeTeamGoals: 1,
  awayTeamGoals: 2,
  homeTeamShots: 14,
  awayTeamShots: 9,
  homeTeamPoss: '55%',
  awayTeamPoss: '45%',
  homeTeamSubs: '• •', 
  awayTeamSubs: '• • •'
});

scoreboard.showMessage('statusMessage', {}, false);
Rerun