html,body,h1,h2,h3,h4,h5,div,span,ul,ol,li,dl
    { margin:0px; border:0px; padding:0px }
h1, h2, h3, h4, h5 { color:#000 }
h2, h3, h4, h5 { font-family:sans-serif }
h2 { font-size:120%; margin-bottom:0.25em }
html { background:#fff url(lf) no-repeat fixed 0px 0px; font-family:serif; color:#333 }
body { margin:3em 0px 3em 80px }
a { font-weight:bold; color:#945b30 }
ul { list-style:none }
li { margin:0.5em 0px 0.5px 1em; text-indent:-1em }
dt { font-weight:bold; margin-top:0.5em }
dd { margin:0px 0px 0.5em 1.5em }


#main { margin-right:24em }
#title { margin-bottom:1.5em; font-size:125% }
#tagline, #subtitle { margin-left:5em }

.section { border-left:2px solid #2e712e; padding-left:0.5em; margin-bottom:2em }

#announce { padding:0.5em; background-color:#dcf0b1 }

#photos { overflow:hidden; height:79px }
#photos ul, #photos li { display:inline; margin:0px; text-indent:0px }
#photos img { vertical-align:bottom; margin:2px; border-width:0px; height:75px; width:75px }

#listening { margin:2em 2em 2em 0px }
#listening li { margin-left:3em; text-indent:-3em }
#listening .play { display:inline-block; /* d:i-b doesn't work universally, but degrades acceptably */
  width:25px; text-indent:0px; vertical-align:middle }
#listening .play img { border:0px }
#listening .datestamp { color:#555 }

#right { position:absolute; top:3em; right:5em; width:25em; font-size:75% }
#right h2 { color:#555 }
#right table { border-spacing:0.5em 0.25em }
#right th { text-align:right; vertical-align:baseline }

#contact { padding:0.5em 1em 0.5em 0.5em; width:100%; 
    background-color:#dcf0b1; color:#2e712e }


/* a is normally bold. keep in bold in #contact and in h2, but in any
 * other #right content, we want it normal */
#right h2 a { font-weight: bold }
#right #contact a { font-weight:bold }
#right a { font-weight:normal }

.metanote { font-style:italic; font-weight:normal }

#icon-bar { position:absolute; top:50px; right: 20px; }
#foaf-link img { height:24px; width:22px; border:0px }