html, body, form, fieldset, legend, table, tr, th, td, h1, h2, h3, h4, p, ul, ol, dl, dt, dd, li, pre, textarea { margin: 0; padding: 0; }

html { height: 100%; background-color: #66f; background-image: url(back.png); background-repeat: repeat-y; background-position: right; }
body { width: 780px; margin-left: auto; background-color: #fff; color: #000; font-family: 'Trebuchet MS', sans-serif; height: 100%; position: relative; background-attachment: fixed; _background-attachment: none; }
/* body { border-left: 3px double #ccf; } */
html>body { height: auto; min-height: 100%; }

h2, h3, ol, ul, dl, p, pre { padding: 0.3em 0; }
h1, h2, h3 { color: #ccf; }
p, ul, ol, li, dd { font-weight: bold; }
ol, ul { list-style-type: none; }

a { color: #66f; text-decoration: none; }
a:visited { color: #99f; }
a:hover { background-color: #66f; color: #fff; }

h1 { font-size: 200%; text-align: right; position: fixed; _position: absolute; top: 0; right: 0;  color: #eef; font-style: italic; text-transform: lowercase; z-index: 2; }
h1 a { color: #eef; display: block; border: 1px solid #fff; width: 288px; height: 100px; margin-top: 5px; margin-right: 10px; background-image: url(lyrics-logo.png); background-repeat: no-repeat; background-position: top right; }
h1 a:hover { background-color: #fff; border-color: #66f; }
h1 em { visibility: hidden; }

h2, h3 { width: 450px; }
h2 a, h3 a { color: #ccf; display: block; text-align: right; width: 100%; padding: 2px 3px 2px 10px; }
h2 a:hover, h3 a:hover { background-color: #ccf; background-image: url(hover-back.png); background-repeat: repeat-y; background-position: left; }
h2>a:hover:before, h3>a:hover:before { content: '#'; color: #eee; }

ol ol, ul, dl { width: 450px; }
ol ol a, ul a { display: block; width: 100%; padding: 1px 10px; }
ol ol a:hover, ul a:hover { background-image: url(hover-back-small-reverse.png); background-repeat: repeat-y; background-position: right; }
ol ol li>a:hover:after { color: yellow; content: ' ♫'; font-family: 'Times New Roman', serif; }
li p { color: #ccf; }
li i { color: #ccf; float: right; text-align: right; cursor: help; }
li small { display: none; }
li.filter-not-found { display: none; }

ol.sorted ol li strong.lastname, ol.sorted ol li strong.firstname { direction: rtl; unicode-bidi: embed; }
ol.sorted ol li strong.lastname::before { content: ','; }
ol.sorted ol li strong.firstname::after { content: ' '; }

pre { line-height: 130%; overflow: auto; padding: 10px; border: 3px double #ccf; border-left: none; height: auto; width: 440px; font-family: 'Trebuchet MS', sans-serif; font-size: 90%; background-color: #fff; background-image: url(lyrics-back.png); background-repeat: no-repeat; background-position: top right; }
textarea { line-height: 130%; overflow: auto; padding: 10px 0 10px 10px; border: 3px double #ccf; border-left: none; height: 400px; width: 450px; font-family: 'Trebuchet MS', sans-serif; font-size: 90%; background-color: #fff; background-image: url(lyrics-back.png); background-repeat: no-repeat; background-position: top right; _background-attachment: fixed; }

dl { padding: 0 10px; }
dt { width: 5em; float: left; }
dd { margin-left: 5.5em; text-align: right; }
dd a { display: block; }
dl a:hover { background-image: url(hover-back-small.png); background-repeat: repeat-y; background-position: left; }
dt:after { content: ':'; }

#forms { position: fixed; _position: absolute; top: 110px; right: 10px; width: 290px; overflow: auto; z-index: 1; background-color: #fff; }
#forms p { text-align: center; color: #f66; border: 1px solid #f66; padding: 0.2em; font-size: 90%; }
fieldset { display: block; border: 1px solid #eef; }
legend { color: #aaf; font-weight: bold; margin-left: 0.5em; }
label { cursor: pointer; }
th { font-weight: normal; color: #aaf; font-size: 90%; padding: 0 10px 0 0; text-align: right; width: 6em; }
select, input { width: 11em; border: 1px solid #ccf; font-family: 'Trebuchet MS', sans-serif; font-size: 90%; color: #66f; }
input.checkbox { width: auto; border: none; }
input:hover, input:focus { border-color: #eef; }
table { margin: 0 0 0 auto; }
.submit { text-align: right; padding-bottom: 10px; }
.submit input { width: auto; background-color: #ccf; color: #fff; font-weight: bold; }
.error { color: #f00; font-size: 85%; text-align: right; font-weight: bold; }
td.help { text-align: right; font-size: 85%; color: #aaf; width: 100%; }
th.y { color: #f00; font-weight: bold; text-decoration: blink; }

ol#comments-list { width: 460px; }
 ol#comments-list li { }
  ol#comments-list li h3 { font-size: 70%; color: #aaf; width: 100%; text-align: right; overflow: hidden; }
   ol#comments-list li h3 cite { font-size: 150%; float: left; font-style: normal; }
 ol#comments-list li p { color: #66f; border: 1px solid #eef; padding: 0.2em; margin-bottom: 0.5em; }

form#frmAddComment { width: 460px; margin-bottom: 10px; }
form#frmAddComment p { margin: 0 10px; }
textarea#txtComment { line-height: auto; padding: 0; border-left: 3px double #ccf; height: auto; width: 100%; background-image: none; }

label.generated { display: block; text-align: right; width: 460px; line-height: 200%; color: #ccf; font-weight: bold; }
input.filter { width: 460px; text-align: right; font-size: 120%; color: #ccf; }

#footer { position: fixed; _position: absolute; bottom: 10px; right: 10px; width: 290px; text-align: right; font-size: 65%; font-style: italic; color: #ccf; background-color: #fff; z-index: 0; }
#footer a { display: inline; padding: 0; }
#footer a:hover { background-image: none; }

#ads { padding: 10px; position: fixed; _position: absolute; background: #fff; top: 0; right: 800px; }

