app/views/top10.scala.html

<!DOCTYPE html>
<html>
<head>
    <title>Top 10</title>
    <link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href='@routes.Assets.at("stylesheets/bootstrap-1.3.0.min.css")'>
    <link rel="stylesheet" href='@routes.Assets.at("stylesheets/stats.css")'>

    <script src='@routes.Assets.at("js/jquery-1.6.4.min.js")' type="text/javascript"></script>

    <style>
        html, body {
            background-color: #000;
            /*color: #f0ffff;*/
            font-family: 'News Cycle', sans-serif;
            font-size: 24pt !important;
        }

        h1 {
            color: #f0ffff;
        }

        .top-of-the-pops {
        }

        .top-of-the-pops a {
            line-height: 140%;
            font-size: 24pt;
            text-decoration: none;
        }

        table {
            background-color: #f8f8ff;
            margin-top: 20px;
        }

        td {
            font-size: 18pt !important;
        }

        .percent, .mover {
            text-align: center;
            vertical-align: middle;
        }

        img {
            width: 30px;
            height: 30px;
            text-align: center;
        }

        .page-header {
            margin-top: 20px;
            margin-bottom: 10px;
        }


        ol {
           list-style-type: disc;
        }
        li {
            font-size: 14pt;
            float: left;
            margin-left: 40px;
        }

        footer {
            font-size: 14pt;
            color: #BFBFBF;
        }

        footer a {
            float: right;
        }

    </style>
</head>
<body>

<div class="container-fluid lift:comet?type=TopTen">

    <div class="page-header">
        <h1>Top 10
            <small>on www.guardian.co.uk in the last 15 minutes</small>
        </h1>
    </div>


    <table class="top-of-the-pops">
        <tr>
            <td class="mover"><img src="up_arrow_icon.png" alt="Up"></td>
            <td>
                <a class="toplink" href="#">/world/middle-east-live/2011/oct/20/syria-libya-middle-east-unrest-live</a>
                <ol>
                    <li>10% from twitter.com</li>
                </ol>
            </td>
            <td class="percent percent-value">54%</td>
        </tr>
    </table>


    <footer>
        Data range: <span class="latest-data">(unknown)</span>

        <a href="details">click for detailed breakdown</a>
    </footer>
</div>
</body>
</html>