Calendar Patient Details

Playing around with a patient details.

HTML

<ul>
    <li>J. Smith - M.S.</li>
    <li>D. Mathers - D.T.</li>
    <li>L. Smith - M.S.</li>
</ul>

CSS

html {
    text-align: right;
}
ul {
    background-color: #F6F6F6;
    border: 1px solid #BBB;
    box-shadow: inset 1px 1px 0 #fff;
    color: gray;
    display: inline-block;
    font: 14px/1.5 sans-serif;
    margin: 75px;
    padding: 5px 0;
    text-align: left;
    width: 150px;
}
ul li {
    cursor: default;
    padding-left: 7px;
    position: relative;
}
ul li:hover {
    background: #ddd;
}
ul li:before {
    content: '✔ ';
    color: #ddd;
}
ul li:hover:before {
    color: #f6f6f6;
}
ul li.patientCheckedIn:before {
    color: #57a957;
}
div.patientDetails {
    background: #eee;
    border: 3px solid #333;
    border-radius: 5px;
    box-shadow: 0 1px 5px hsla(0,0%,0%,.4);
    color: #444;
    display: none;
    padding: 10px;
    position: absolute;
    right: 100%;
    text-align: center;
    top: -53px;
    width: 300px;
    z-index: 999;
}
div.patientDetails:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #333;
    border-top: 5px solid transparent;
    content: '';
    height: 0;
    position: absolute;
    right: -8px;
    top: 55px;
    width: 0;
}
div.patientDetails h5 {
    background: #ddd;
    border-bottom: 1px solid #aaa;
    color: #333;
    font: bold 16px/1.5 sans-serif;
    margin: -10px -10px 10px;
    padding: 11px 0 9px;
    text-shadow: 0 1px 1px #fff;
}
div.patientDetails dt {
    display: inline-block;
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
    width: 29%;
    -webkit-box-sizing: border-box;
}
div.patientDetails dd {
    display: inline-block;
    text-align: left;
    width: 70%;
}
div.patientDetails a {
    margin: 15px 10px 5px;
    text-decoration: none;
}

/* Bootstrap styles...

JavaScript

var patient = $('ul li');

patient.append('<div class="patientDetails"><h5>9/6/2011: 0800-0830</h5><dl><dt>Patient:</dt><dd>John Smith</dd><dt>Provider:</dt><dd>Matthew Sanders, M.D.</dd><dt>Type:</dt><dd>Established</dd><dt>Reason:</dt><dd>Asthmatic with flu like symptoms</dd></dl><a class="btn cancel" href="#">Edit Appt.</a><a class="btn success checkIn" href="#">Check Pt. In</a>').click( function() {
    $(this).children('div.patientDetails').toggle();
}).find('a.checkIn').click( function() {
    $(this).closest('li').toggleClass('patientCheckedIn');
}).toggle( function() {
    $(this).text('Check Pt. Out').addClass('error').removeClass('success');
}, function() {
    $(this).text('Check Pt. In').addClass('success').removeClass('error');
});

// How should I go about formatting the appended HTML?

// I have no idea if the 'Check Pt. Out' is needed. But either way, it was good practise for me :)