Regions

by lukerichison

HTML

<div id="LB">
    <div class="rg1">
        <ul class="rd64">
            <li><span class="rank">1</span><span class="team">Team Name</span></li>
            <li><span class="rank">16</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">8</span><span class="team">Team Name</span></li>
            <li><span class="rank">9</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">5</span><span class="team">Team Name</span></li>
            <li><span class="rank">12</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">4</span><span class="team">Team Name</span></li>
            <li><span class="rank">13</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">6</span><span class="team">Team Name</span></li>
            <li><span class="rank">11</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">3</span><span class="team">Team Name</span></li>
            <li><span class="rank">14</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">7</span><span class="team">Team Name</span></li>
            <li><span class="rank">10</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
            <li><span class="rank">2</span><span class="team">Team Name</span></li>
            <li><span class="rank">15</span><span class="team">Team Name</span><time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time></li>
        </ul>
        <ul class="rd32">
            <li><span class="rank">1</span><span...

CSS

body * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
/* PRINT ==== body { height: 8.5in; width: 11in;} */
html, body { height: 100%; width: 100%;}

#LB, #RB, #Final-Four { display:inline-block; }
#LB, #RB { width: 35%; height: 100%; }
#Final-Four { width: 30%; height: 52%; background-color: #333; position: relative; top: -24%;}
#LB > div, #RB > div {width: 100%; height: 49%; position: relative; }
.rg2, .rg4 {top: 2%; }
#LB ul, #RB ul { height: 100%; width: 25%; }
#LB ul {float: left;}
#LB li:nth-child(even) { border-right: 0.0625em solid #333; }
#LB li time, #LB li .rank {left: 0.25em;}
#LB li .team, #RB li .loca { left: 1.25em;}

#RB ul {float: right;}
#RB li:nth-child(even) { border-left: 0.0625em solid #333; }
#RB li time, #RB li .rank {right: 0.25em;}
#RB li .team, #LB li .loca { right: 1.25em; }


.rd64 li { height: 06.25%; }
.rd32 li { height: 12.50%; }
.rd16 li { height: 25.00%; }
.rd08 li { height: 50.00%; }
.rd32 li:first-child { height: 09.625%; }
.rd16 li:first-child { height: 15.875%; }
.rd08 li:first-child { height: 28.375%; }

li { border-bottom: 0.0625em solid #333; position: relative; }
li time, li .team, li .rank, li .loca { position: absolute; }
li time { top: 0; }
li .team, li .rank { bottom: 0; }
li .loca { bottom: 60%; margin-bottom: -0.25em; }
li .rank, li .loca {font-size: 0.75em; }
li time { font-size: 0.5em; }