gistfile1.txt

<style type="text/css">
* {
    font-family: 'Open Sans', Helvetica, 'Bitstream Vera Sans', Arial, Verdana, sans-serif;
}
body {
    font-size: 12px;
}
a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}
.container {
    width: 600px;
    border: 1px solid rgb(182, 201, 212);
}
h1 {
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    background: rgb(249, 251, 252);;
    border-bottom: 1px solid rgb(182, 201, 212);
    padding: 10px 20px;
    line-height: 40px;
    margin: 0;
    color: rgb(55, 128, 170);
}
h1 small {
    display: block;
    color: #999;
    font-weight: normal;
    font-size: 12px;
    float: right;
    clear: right;
    line-height: 20px;
}
.card {
    padding: 0 20px;
    list-style: none;
}
.card > li {
    padding-left: 80px;
    position: relative;
    min-height: 60px;
    margin-bottom: 20px;
}
.card .grade {
    position: absolute;
    left: 0;
    height: 60px;
    width: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 30px;
    border: 1px solid gray;
}
.card .grade-a .grade {
    background: #4fa857;
    border-color: #46964e;
}
.card .grade-b .grade {
    background: #80CC00;
    border-color: #46964e;
}
.card .grade-c .grade {
    background: #d6cc50;
    border-color: #ccc253;
}
.card .grade-d .grade {
    background: #f0643d;
    border-color: #db6441;
}
.card .grade-f .grade {
    background: #c40622;
    border-color: #ae071d;
}
.card .grade-na .grade {
    background: #888;
    border-color: #777;
}
.card h2 {
    font-weight: normal;
    margin: 0;
    line-height: 40px;
}
.card p {
    font-size: 11px;
    line-height: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}
.card .callouts {
    list-style: square;
    padding-left: 20px;
}
.card .callouts > li {
    margin-bottom: 10px;
}
.no-data {
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">

    <h1>
        tenXer Report Card
        <small>David Cramer</small>
        <small>April 1, 2013 &mdash; April 7, 2013</small>
    </h1>
            <ul class="card">

                            <li class="grade-b">
                    <div class="grade">B</div>
                    <h2>Daily Commits</h2>
                    <p>You committed code on 4 different days, averaging 2.5 commits per day.</p>
                                    </li>
                            <li class="grade-a">
                    <div class="grade">A</div>
                    <h2>Commit Size</h2>
                    <p>You hit your goal! All 10 of your commits were less than 250 LOC</p>
                                    </li>
                            <li class="grade-c">
                    <div class="grade">C</div>
                    <h2>Code Review Response Time</h2>
                    <p>There were 3 reviews blocked on your for more than 24 hours.</p>
                                            <ul class="callouts">
                                                            <li><a href="#">D3606 - An example</a> was blocked for 141 hours</li>
                                                    </ul>
                                    </li>
                            <li class="grade-a">
                    <div class="grade">A</div>
                    <h2>Task Debt</h2>
                    <p>Great job! You closed 6 more tickets than you opened.</p>
                                    </li>
                            <li class="grade-a">
                    <div class="grade">A</div>
                    <h2>Task Debt (Assigned)</h2>
                    <p>Great job! You closed 6 more tickets than you opened.</p>
                                    </li>
                            <li class="grade-f">
                    <div class="grade">F</div>
                    <h2>Issue Resolution Time</h2>
                    <p>There were 3 high priority tasks open for more than 7 days.</p>
                                            <ul class="callouts">
                                                            <li><a href="#">T2441 - An example</a> was open for 275 days</li>
                                                    </ul>
                                    </li>
            
        </ul>
    </div>