body {
    background: #fecc00;
    color: #06c;
    font-weight: bolder;
}

body > .container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

a.btn-primary, a.btn-primary:hover {
    color: #f3cc00;
    background: #06c;
    border-width: 0;
}

h1 {
    font-size: 1rem;
    font-weight: bold;
}

h4 {
    margin-top: 1em;
}

h5 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 -0.4em;
}

p + h5 {
    margin-top: 1em;
}

/** Standings */

    table.standings {
        color: #06c;
        border-color: #06c;
    }

    table.standings th,
    table.standings td {
        border-top-color: rgba(0,102,204,0.1);
        color: #06c;
        text-align: center;
        width: 1.4em;
        overflow: auto;
    }

    table.standings th:first-child,
    table.standings td:first-child {
        text-align: left;
        width: auto;
    }

    table.standings th:last-child,
    table.standings td:last-child {
        text-align: right;
    }

/* End Standings **/

/** Game Info */

    .game-info {
        margin: 0.3em 0;
    }

    .game-info span {
        line-height: 1.8em;
    }

    .game-disposition {
        display: inline-block;
        width: 1.4em;
        background: rgba(0,102,204,0.1);
        text-align: center;
    }

    .game-score-us,
    .game-score-them {
        display: inline-block;
        width: 1.8em;
        background: #06c;
        color: #fecc00;
        text-align: center;
    }

    .game-opponent:before {
        content: '\A0vs. ';
    }

    .game-time {
        display: inline-block;
        background: rgba(0,102,204,0.1);
        width: 5.6em;
        text-align: center;
    }


    <span class="game-date"><%= form-date match/date "%D" %></span>
    <span class="game-opponent"><%== match/opponent %></span><%

    either pair? match/result [
        case [
            match/result/1 > match/result/2 [
                %>
    <span class="game-disposition game-won">W</span><%
            ]

            match/result/1 < match/result/2 [
                %>
    <span class="game-disposition game-lost">L</span><%
            ]

            match/result/1 = match/result/2 [
                %>
    <span class="game-disposition game-tied">T</span><%
            ]
        ]
    %>
    <span class="game-score-us"><%= match/result/1 %></span>
    <span class="game-score-them"><%= match/result/2 %></span><%

        ][
            %>
    <span class="game-time"><%= match/time %></span><%
        ]
    %>
    <br>
    <small><%== match/location %></small>

/* End Game Info **/

