PHP formating MySql data

Good morning, beginner here…

I created a website for a youth sport program I volunteer for but need help with the next step…I have tried to research but can’t find anything on the topic.

On my main site the individual selects the game they want to monitor and it takes them to the following page

http://dvrhome.ca/search2.php?term=2

I figured out how to grab the data from MySQL table and have the php reload every 5 seconds (so as the game goes on they get close to live scores…

Anyhow to make a long story short the table is boring lol

I want to make it fun for the kids but how difficult would it be to format such as the following link to populate the spaces with the data from MySQL?

http://www.fair-play.com/wp-content/photos-drawings/BB-1520-4.jpg

So for instance the score field would be linked to MySQL? Again I am only a beginner so any help from the community would be very much appreciated.

If there is a guide out there as well let me know as I am willing to read up on this.

Best Regards,
David

Well, assuming that all the data on that page is coming out of your database, it’s just a case of displaying it in the appropriate format. That might mean using CSS to style the output, or even using images for each digit to get it exactly how you want it. Really the only change to what you’re doing now (I assume) is the way the data looks, and other than retrieving the data, how it looks isn’t really a PHP thing, you’d be better looking around for tutorials on how to style your pages.

You might look at scoreboard fonts. Haven’t used them myself. There’s many. Here’s one source.
http://www.1001fonts.com/scoreboard-fonts.html

Any luck styling your scoreboard?
I’ve got a sample copy just about done. Note: Page is created with css styling and php for names and number calling.

Good morning Drummin,

Yes, once I realized this was not a php issue but a styling issue I did some reading and was able to design the page and get it working.

Thanks so much for checking in. Much appreciated

Well very good. I will post my copy in case you would like to check it out.

<?php					
/////////////////////////////////////////////////
// From DB query set variables.                //
// Note:                                       //
// Main logo size width: 366px; height: 263px; //
// Team logo size width: 288px; height: 92px;  //
/////////////////////////////////////////////////

//sample
$visitorname = "Clippers";
$homename = "Warriors";
$visitorlogo = "images/visitorlogo.jpg";
$homelogo = "images/homelogo.jpg";
$logo = "images/logo.jpg";
$location = "Washington";
$gamenumber = "3";
$timeclock = "11:27";
$homescore = "26";
$visitorscore = "28";
$period = "2";
$homefouls = "2";
$visitorfouls = "5";
//use datetime or seperate time and date
$datetime = "2014-07-14 19:52:00";
//$date = "2014-07-14";
//$time = "19:48:00";

/////////////////////////////////////////////////////
//  Define number colors using lowercase spelling. //
// white, yellow, orange, red, green, blue, purple //
/////////////////////////////////////////////////////

$timecolor   = "yellow";
$scorecolor  = "red";
$periodcolor = "green";
$foulcolor   = "green";
					
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////
$colors = array("white"=>"col-wht","yellow"=>"col-yel","orange"=>"col-ora","red"=>"col-red","green"=>"col-gre","blue"=>"col-blu","purple"=>"col-pur");

$timeclass = $colors[$timecolor];
$scoreclass = $colors[$scorecolor];
$periodclass = $colors[$periodcolor];
$foulclass = $colors[$foulcolor];

////////////////////////////////////////////////////////////////////////////
// Using float:right for numbers so array reverse will swap number order  //
////////////////////////////////////////////////////////////////////////////
$homescore = array_reverse(str_split($homescore));
$visitorscore = array_reverse(str_split($visitorscore));
$period = array_reverse(str_split($period));
$homefouls = array_reverse(str_split($homefouls));
$visitorfouls = array_reverse(str_split($visitorfouls));
//Timeclock
$timeparts = explode(":",$timeclock);
$minutes = array_reverse(str_split($timeparts[0]));
$seconds = array_reverse(str_split($timeparts[1]));

if(isset($datetime) && !empty($datetime)){
	$date = date('D, M j, Y', strtotime($datetime));
	$time = date('g:i A', strtotime($datetime));
}else{
	$date = date('D, M j, Y', strtotime($date));
	$time = date('g:i A', strtotime($time));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
background-color: #1D1D1D;
}
.scoreboard {
height: 575px;
width: 1024px;
margin: 10px auto;
background-color: #000;
border: 8px solid #fff;
-moz-border-radius:18px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
border-radius:18px 18px 18px 18px;
}
.left {
float: left;
width: 320px;
height: 575px;
margin: -8px 0 0 -8px;
text-align:center;
border-top: 8px solid #fff;
border-bottom: 8px solid #fff;
border-left: 8px solid #fff;
-moz-border-radius:18px 0 0 18px;
-webkit-border-radius:18px 0 0 18px;
border-radius:18px 0 0 18px;
}
.right {
float: right;
width: 320px;
height: 575px;
margin: -8px -8px 0 0;
text-align:center;
border-top: 8px solid #fff;
border-bottom: 8px solid #fff;
border-right: 8px solid #fff;
-moz-border-radius:0 18px 18px 0;
-webkit-border-radius:0 18px 18px 0;
border-radius:0 18px 18px 0;
}
.middle {
float: left;
width: 384px;
height: 575px;
margin: 0;
text-align:center;
}
.title {
width: 100%;
font-family: arial;
font-weight: bold;
font-size: 28px;
text-align:center;
color: #ffffff;
}
.subtitle {
width: 304px;
margin: 11px auto 0;
font-family: arial;
font-weight: bold;
font-size: 24px;
line-height: 26px;
text-align:left;
color: #ffffff;
}
.textbox {
width: 300px;
height: 40px;
line-height: 40px;
margin: 5px auto;
font-family: arial;
font-weight: 500;
font-size: 20px;
text-align:center;
color: #ffffff;	
background-color: #111111;
border: 2px solid #D5D5D5;
}
.periodbox {
width: 29px;
height: 44px;
margin: 5px auto;
text-align:center;
border: 2px solid #D5D5D5;
}

.foulcontianer {
width: 100%;
height: 44px;
margin: 5px auto;
}
.foulboxleft {
float:left;
width: 57px;
height: 44px;
margin: 5px auto;
text-align:center;
border: 2px solid #D5D5D5;
}
.foulboxright {
float:right;
width: 57px;
height: 44px;
margin: 5px auto;
text-align:center;
border: 2px solid #D5D5D5;
}

.foultitleleft {
float:left;
width: 100px;
font-family: arial;
font-weight: bold;
font-size: 25px;
line-height: 25px;
text-align:center;
color: #ffffff;
padding:0;
margin:3px 0 0 0;
}
.foultitleright {
float:right;
width: 100px;
font-family: arial;
font-weight: bold;
font-size: 25px;
line-height: 25px;
text-align:center;
color: #ffffff;
padding:0;
margin:3px 0 0 0;
}

.logowrapper {
width: 374px;
height: 271px;
margin: 20px auto;
border: 4px solid #E5A011;
outline: 1px solid #ffffff;
}
.logoholder {
width: 366px;
height: 263px;
margin: 0;	
background-color: #060605;
border: 4px solid #312106;
overflow:hidden;
}
.teamlogowrapper {
width: 296px;
height: 100px;
margin: 86px auto 0;
border: 4px solid #E5A011;
outline: 1px solid #ffffff;
}
.teamlogoholder {
width: 288px;
height: 92px;
margin: 0;	
background-color: #060605;
border: 4px solid #312106;
overflow:hidden;
}
.timebox {
width: 266px;
height: 90px;
margin: 20px auto 0;
text-align:center;
border: 8px solid #fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

.timebblockright {
float: right;
width: 108px;
height: 78px;
margin: 4px 8px 0 0;
text-align:center;
border: 2px solid #fff;
}
.timebblockleft {
float: left;
width: 108px;
height: 78px;
margin: 4px 0 0 8px;
text-align:center;
border: 2px solid #fff;
}
.timebblockcenter {
width: 115px;
height: 78px;
padding-top: 2px;
margin: 30px auto;
text-align:center;
border: 2px solid #fff;
}
.timebblockcenter3 {
width: 158px;
height: 78px;
padding-top: 2px;
margin: 30px auto;
text-align:center;
border: 2px solid #fff;
}

.number {
float: right;
width: 48px;
height: 78px;
margin: 0 3px 0 1px;
} 		
.number.col-wht.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -16px;}
.number.col-yel.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -126px;}
.number.col-ora.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -236px;}
.number.col-red.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -346px;}
.number.col-gre.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -455px;}
.number.col-blu.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -564px;}
.number.col-pur.n0 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -456px -673px;}

.number.col-wht.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -16px;}
.number.col-yel.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -126px;}
.number.col-ora.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -236px;}
.number.col-red.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -346px;}
.number.col-gre.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -455px;}
.number.col-blu.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -564px;}
.number.col-pur.n9 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -404px -673px;}

.number.col-wht.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -16px;}
.number.col-yel.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -126px;}
.number.col-ora.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -236px;}
.number.col-red.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -346px;}
.number.col-gre.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -455px;}
.number.col-blu.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -564px;}
.number.col-pur.n8 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -352px -673px;}

.number.col-wht.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -16px;}
.number.col-yel.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -126px;}
.number.col-ora.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -236px;}
.number.col-red.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -346px;}
.number.col-gre.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -455px;}
.number.col-blu.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -564px;}
.number.col-pur.n7 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -303px -673px;}

.number.col-wht.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -16px;}
.number.col-yel.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -126px;}
.number.col-ora.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -236px;}
.number.col-red.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -346px;}
.number.col-gre.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -455px;}
.number.col-blu.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -564px;}
.number.col-pur.n6 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -255px -673px;}

.number.col-wht.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -16px;}
.number.col-yel.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -126px;}
.number.col-ora.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -236px;}
.number.col-red.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -346px;}
.number.col-gre.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -455px;}
.number.col-blu.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -564px;}
.number.col-pur.n5 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -204px -673px;}

.number.col-wht.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -16px;}
.number.col-yel.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -126px;}
.number.col-ora.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -236px;}
.number.col-red.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -346px;}
.number.col-gre.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -455px;}
.number.col-blu.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -564px;}
.number.col-pur.n4 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -153px -673px;}

.number.col-wht.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -16px;}
.number.col-yel.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -126px;}
.number.col-ora.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -236px;}
.number.col-red.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -346px;}
.number.col-gre.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -455px;}
.number.col-blu.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -564px;}
.number.col-pur.n3 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -101px -673px;}

.number.col-wht.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -16px;}
.number.col-yel.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -126px;}
.number.col-ora.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -236px;}
.number.col-red.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -346px;}
.number.col-gre.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -455px;}
.number.col-blu.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -564px;}
.number.col-pur.n2 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -51px -673px;}

.number.col-wht.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -16px;}
.number.col-yel.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -126px;}
.number.col-ora.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -236px;}
.number.col-red.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -346px;}
.number.col-gre.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -455px;}
.number.col-blu.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -564px;}
.number.col-pur.n1 {background:url(images/ScoreBoardNumbersMed.png) no-repeat -2px -673px;}


/*Small numbers*/
.numbersm {
float: right;
width: 22px;
height: 44px;
margin: 0 3px 0 3px;
}
 		
.numbersm.col-wht.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -4px;}
.numbersm.col-yel.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -53px;}
.numbersm.col-ora.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -102px;}
.numbersm.col-red.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -151px;}
.numbersm.col-gre.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -200px;}
.numbersm.col-blu.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -249px;}
.numbersm.col-pur.n0 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -206px -298px;}

.numbersm.col-wht.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -4px;}
.numbersm.col-yel.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -53px;}
.numbersm.col-ora.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -102px;}
.numbersm.col-red.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -151px;}
.numbersm.col-gre.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -200px;}
.numbersm.col-blu.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -249px;}
.numbersm.col-pur.n9 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -181px -298px;}

.numbersm.col-wht.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -4px;}
.numbersm.col-yel.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -53px;}
.numbersm.col-ora.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -102px;}
.numbersm.col-red.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -151px;}
.numbersm.col-gre.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -200px;}
.numbersm.col-blu.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -249px;}
.numbersm.col-pur.n8 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -159px -298px;}

.numbersm.col-wht.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -4px;}
.numbersm.col-yel.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -53px;}
.numbersm.col-ora.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -102px;}
.numbersm.col-red.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -151px;}
.numbersm.col-gre.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -200px;}
.numbersm.col-blu.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -249px;}
.numbersm.col-pur.n7 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -137px -298px;}

.numbersm.col-wht.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -4px;}
.numbersm.col-yel.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -53px;}
.numbersm.col-ora.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -102px;}
.numbersm.col-red.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -151px;}
.numbersm.col-gre.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -200px;}
.numbersm.col-blu.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -249px;}
.numbersm.col-pur.n6 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -115px -298px;}

.numbersm.col-wht.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -4px;}
.numbersm.col-yel.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -53px;}
.numbersm.col-ora.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -102px;}
.numbersm.col-red.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -151px;}
.numbersm.col-gre.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -200px;}
.numbersm.col-blu.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -249px;}
.numbersm.col-pur.n5 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -92px -298px;}

.numbersm.col-wht.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -4px;}
.numbersm.col-yel.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -53px;}
.numbersm.col-ora.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -102px;}
.numbersm.col-red.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -151px;}
.numbersm.col-gre.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -200px;}
.numbersm.col-blu.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -249px;}
.numbersm.col-pur.n4 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -69px -298px;}

.numbersm.col-wht.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -4px;}
.numbersm.col-yel.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -53px;}
.numbersm.col-ora.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -102px;}
.numbersm.col-red.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -151px;}
.numbersm.col-gre.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -200px;}
.numbersm.col-blu.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -249px;}
.numbersm.col-pur.n3 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -46px -298px;}

.numbersm.col-wht.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -4px;}
.numbersm.col-yel.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -53px;}
.numbersm.col-ora.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -102px;}
.numbersm.col-red.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -151px;}
.numbersm.col-gre.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -200px;}
.numbersm.col-blu.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -249px;}
.numbersm.col-pur.n2 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -24px -298px;}

.numbersm.col-wht.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -4px;}
.numbersm.col-yel.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -53px;}
.numbersm.col-ora.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -102px;}
.numbersm.col-red.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -151px;}
.numbersm.col-gre.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -200px;}
.numbersm.col-blu.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -249px;}
.numbersm.col-pur.n1 {background:url(images/ScoreBoardNumbersSM.png) no-repeat -2px -298px;}

.colon {
float: left;
width: 22px;
height: 78px;
margin: 0 3px 0 1px;
}
 		
.colon.col-wht {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -8px;}
.colon.col-yel {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -118px;}
.colon.col-ora {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -232px;}
.colon.col-red {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -338px;}
.colon.col-gre {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -449px;}
.colon.col-blu {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -559px;}
.colon.col-pur {background:url(images/ScoreBoardNumbersMed.png) no-repeat -526px -668px;}
</style>
</head>
<body>
<?php
echo '<div class="scoreboard">'."\\r";
	echo '<div class="left">'."\\r";
		echo '<div class="title">HOME TEAM:</div>'."\\r";
		echo '<div class="textbox">' . $homename . '</div>'."\\r";
		
		$hh = (count($homescore) == 3 ? '3' : '');
		echo '<div class="timebblockcenter' . $hh . '">'."\\r";	
			
			foreach($homescore as $hs):
				$homes = "n" . $hs;
				echo '<div class="number ' . $scoreclass . ' ' . $homes . '"></div>'."\\r";	
			endforeach;		
				
		echo '</div>'."\\r";	
			
		echo '<div class="teamlogowrapper">'."\\r";
			echo '<div class="teamlogoholder"><img src="' . $homelogo . '" border="0" width="288" height="92" alt="homelogo" /></div>'."\\r";
		echo '</div>'."\\r";	
		
		echo '<div class="subtitle">LOCATION:</div>'."\\r";
		echo '<div class="textbox">' . $location . '</div>'."\\r";	
														
		echo '<div class="subtitle">GAME#</div>'."\\r";
		echo '<div class="textbox">' . $gamenumber . '</div>'."\\r";	
		
	echo '</div>'."\\r";
	// Middle
	echo '<div class="middle">'."\\r";
	
		echo '<div class="timebox">'."\\r";
		
			echo '<div class="timebblockleft">'."\\r";	
				foreach($minutes as $min):
					$minute = "n" . $min;
					echo '<div class="number ' . $timeclass . ' ' . $minute . '"></div>'."\\r";	
				endforeach;	
			echo '</div>'."\\r";
			
			echo '<div class="colon ' . $timeclass . '"></div>'."\\r";			
			
			echo '<div class="timebblockright">'."\\r";		
				foreach($seconds as $sec):
					$second = "n" . $sec;
					echo '<div class="number ' . $timeclass . ' ' . $second . '"></div>'."\\r";	
				endforeach;
			echo '</div>'."\\r";
							
		echo '</div>'."\\r";	
		echo '<div class="title">PERIOD:</div>'."\\r";
		echo '<div class="periodbox">'."\\r";	
				foreach($period as $p):
					$per = "n" . $p;
					echo '<div class="numbersm ' . $periodclass . ' ' . $per . '"></div>'."\\r";	
				endforeach;		
		echo '</div>'."\\r";
			
		echo '<div class="foulcontianer">'."\\r";
			echo '<div class="foulboxleft">'."\\r";
			
				foreach($homefouls as $hf):
					$homef = "n" . $hf;																
					echo '<div class="numbersm ' . $foulclass . ' ' . $homef . '"></div>'."\\r";
				endforeach;		
				
			echo '</div>'."\\r";
			echo '<div class="foultitleleft">TEAM<br />FOULS</div>'."\\r";
							
			echo '<div class="foulboxright">'."\\r";
										
				foreach($visitorfouls as $vf):
					$visitorf = "n" . $vf;																
					echo '<div class="numbersm ' . $foulclass . ' ' . $visitorf . '"></div>'."\\r";
				endforeach;		
				
			echo '</div>'."\\r";	
			echo '<div class="foultitleright">TEAM<br />FOULS</div>'."\\r";
			
		echo '</div>'."\\r";
		
		echo '<div class="logowrapper">'."\\r";
			echo '<div class="logoholder"><img src="' . $logo . '" border="0" width="366" height="263" alt="mainlogo" /></div>'."\\r";
		echo '</div>'."\\r";
		
	echo '</div>'."\\r";	
	//Right
	echo '<div class="right">'."\\r";
		echo '<div class="title">AWAY TEAM:</div>'."\\r";
		echo '<div class="textbox">' . $visitorname . '</div>'."\\r";
		
		$vh = (count($visitorscore) == 3 ? '3' : '');
		echo '<div class="timebblockcenter' . $vh . '">'."\\r";
			foreach($visitorscore as $vs):
				$visitors = "n" . $vs;
				echo '<div class="number ' . $scoreclass . ' ' . $visitors . '"></div>'."\\r";	
			endforeach;		
				
		echo '</div>'."\\r";	
			
		echo '<div class="teamlogowrapper">'."\\r";
			echo '<div class="teamlogoholder"><img src="' . $visitorlogo . '" border="0" width="288" height="92" alt="visitorlogo" /></div>'."\\r";
		echo '</div>'."\\r";	
		
		echo '<div class="subtitle">DATE:</div>'."\\r";
		echo '<div class="textbox">' . $date . '</div>'."\\r";
			
		echo '<div class="subtitle">TIME:</div>'."\\r";
		echo '<div class="textbox">' . $time . '</div>'."\\r";	
		
	echo '</div>'."\\r";
echo '</div>'."\\r";
?>
</body>
</html>