css assistance to draw playoff brackets

I am trying to have a “playoff bracket” on a wordpress site page. The brackets will be fed by database and PHP code to populate them with proper opponents and winners and losers each week.

So I am essentially trying to draw the brackets in some fashion on the page. I am working on it here: http://www.jerseybasketballassociation.com/1a-test-logo/

this is not perfect, just working on it; I only have the first two weeks on there…

if you do not know what I mean by “playoff bracket” you can see an example here:
http://printyourbrackets.com/8seeded.html

basically what I have is OK; but it would be much improved if I somehow was able to put some lines between the two weeks so you could see teams 1 and 8; they have lines that show the winner advancing to second week (labeled as team 1)

Does anyone have any ideas on how I would produces those lines using CSS/html?

I will also paste in the HTML and CSS code that puts this on the page:

<style>
#round1_boxa {border: 1px solid gray; padding: 2px; margin-bottom: 27px;}
#round1_boxb {border: 1px solid gray; padding: 2px; margin-bottom: 54px;}

#round2_boxa {border: 1px solid gray; padding: 2px; margin-top: 27px; }
#round2_boxb {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxc {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxd {border: 1px solid gray; padding: 2px; margin-top: 108px;}


#round1_cont {width: 150px; float: left;}
#round2_cont {width: 150px; float: left; margin-left: 20px;}
#game_box {margin-bottom: 30px;}
</style>
<div id="round1_cont">

<div id="game_box">
<div id="round1_boxa">
Team 1
</div>
<div id="round1_boxb">
Team 8
</div>
</div>

<div id="game_box">
<div id="round1_boxa">
Team 4
</div>
<div id="round1_boxb">
Team 5
</div>
</div>

<div id="game_box">
<div id="round1_boxa">
Team 3
</div>
<div id="round1_boxb">
Team 6
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 2
</div>
<div id="round1_boxb">
Team 7
</div>
</div>

</div>

<div id="round2_cont">

<div id="round2_boxa">
Team 1
</div>
<div id="round2_boxb">
Team 4
</div>
<div id="round2_boxc">
Team 2
</div>
<div id="round2_boxd">
Team 3
</div>

</div>

So I am trying to see if anyone has any ideas on how to draw those lines that go from box to box to delineate the advancing teams. Thanks so much…