body { position: relative; width: 260px; font-size: 1em; font-family: 'Droid Sans', sans-serif; }
/*
article:after { content: '.'; display: block; clear: both; visibility: none; overflow: hidden; height: 0; }
*/
header { text-align: center; }
article { display: block; background: #222; border: 1px solid #000; padding: 10px 0 0 10px; }
section { display: block; background: #eee; border: 1px solid #222; margin: 0 10px 10px 0; opacity: .8; }
section:hover { opacity: 1; }
section li { padding-left: 6px; }
section ol:focus { border: none; outline: none; background: #eee; }
section ol:focus li { border-left: 1px solid #eee; padding-left: 5px; }
section ol:focus li:hover { outline-style: solid; outline-color: #444; outline-width: 1px; background: #fff; border-left: 1px solid #444; }
footer { display: block; margin-top: 20px; text-align: right; color: #999; padding: 0 10px; }
footer a { color: #777; text-decoration: none; }
footer a:hover { color: #444; }
ol li { line-height: 1.4; text-transform: capitalize; font-size: 90%; }

section:hover h1 { color: #036; background: #9cf; border-bottom-color: #69c; text-shadow: 1px 1px 2px #69c; }
#play { display: none; position: fixed; width: 200px; height: 100px; top: 60px; left: 280px; border: 1px solid red; }
#message { display: none; border: 1px solid #f99; background: #fdd; color: #c00; padding: 0px 10px; margin-bottom: 20px; }

#actions { position: absolute; left: -50px; top: 0; background: #fcc; z-index: 1; }
h1 { font-size: 110%; font-weight: normal; padding: 5px 5px 3px 5px; margin: 0; background: #fff; border-bottom: 1px solid #ddd; text-shadow: 1px 1px 2px #ccc; }