h1, h2, p, ul, li { margin: 0; padding: 0; font-size: 16px; line-height: 24px; font-weight: normal; list-style: none; }

body { background: #FFF; color: #111; font-family: Times, "Times New Roman", serif; width: 600px; margin: 36px auto; }

header { display: block; clear: both; margin-bottom: 24px; }
header p { font-size: 24px; line-height: 36px; text-align: center; text-shadow: none; }

header { position: static; }
h1 { display: none; }

a { color: #33E; background: rgba(255, 255, 255, 0); text-decoration: none; -webkit-transition-duration: 0.2s; -webkit-border-radius: 2px; }
a:visited { color: #99F; }
a:hover { color: #99F; background: #EEF; }

header a, header a:visited { color: #00F; border-bottom: 1px solid #FFF; }
header a:hover { background: none; color: #55F; border-color: #55F; }

#preamble { text-align: center; margin-bottom: 24px; }
#preamble span { white-space: nowrap; }

ul {}
  li { margin-bottom: 12px; padding-left: 300px; position: relative; min-height: 60px; }
  li h2 { font-size: 24px; line-height: 1; width: 300px; position: absolute; left: 0; top: 0; }
  li h2 a { display: block; margin-right: 12px; min-height: 48px; background: #FFF; overflow: hidden; -webkit-transition-duration: 0; }
  li h2 a > span { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVQYlWP4TwAwjAwFAIS1/wGYKmMjAAAAAElFTkSuQmCC") repeat-x scroll bottom left; padding-right: 6px; }
  li h2 a:hover > span { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAE0lEQVQYlWN49+7/f3yYYWQoAAAZ+faBjlG0vwAAAABJRU5ErkJggg=="); }
  li h2 a span.external-icon { font-size: 13px; vertical-align: top; line-height: 28px; margin-bottom: 12px; }
  li h2 a:after { content: " "; display: block; height: 6px; margin-top: -6px; border-top: 1px dashed #CCF; }
  li p { font-size: 18px; }
  li p.date { font-size: 12px; color: #999; }