html, body { margin: 0; padding: 0; }
body { background: #5d543b url(gradient.jpg) 0 0 repeat-x; color: #000;
  font: normal 90%/1.3em Arial,Helvetica,sans-serif; height: 100%;
}
:link, :visited { color: #826B28; text-decoration: none; }
:link img, :visited img { border: none; }
button { -webkit-appearance: square-button; font-size: 75%; }
ul { list-style: square; }
pre.text { font: normal 90%/1.3em Arial,Helvetica,sans-serif; }

#header { border-bottom: 3px solid #ddd; color: #ddd; }

#navigation { margin: 1.1em auto 0; letter-spacing: .2em; text-align: left;
  width: 600px;
}
#navigation ul { list-style: none; margin: 0 0; padding: 0 0 .25em; }
#navigation li { display: inline; margin: 0; padding: 1.2em 0 0;
  position: relative;
}
#navigation li a { color: #999; padding: 1.2em 1em .3em;
  text-transform: lowercase; text-shadow: #000 1px 1px 2px;
}
#navigation li.active a { background: #2C271C url(navbg.png) 0 0 repeat-x;
  color: #ddd;
}
#navigation li a:hover { color: #fff; text-decoration: none; }

#masthead { border-top: 1px solid #ddd; clear: left; display: block;
  height: 230px; margin: 0 auto; position: relative; width: 600px;
  z-index: 100;
}
#masthead img { display: block; }
#logo { margin: 0 auto; position: relative; width: 600px; z-index: 900; }
#logo a { position: absolute; top: -46px; right: -162px; }
#logo img { position: relative; }

#content { background: #eee; border: 1px solid #666;
  border-color: #999 #333 #333 #999; color: #332; margin: 0 auto;
  overflow: hidden; padding: 0 16px 16px; position: relative; width: 568px;
}
#content hr.bottom { clear: both; margin: 0; visibility: hidden; }
#content h1 { background: #000; color: #fff; font-size: 200%;
  line-height: .8em; margin: 0 -16px .4em; padding: .1em 16px 0;
  position: relative; text-shadow: #000 1px 1px 1px; text-transform: lowercase;
}
h2 { color: #666; font-size: 130%; font-weight: normal; line-height: .8;
  margin: 1.4em 0 .4em -16px; position: relative; text-transform: lowercase;
  border-left: 12px solid #999; padding-left: 4px;
}
h3 { font-size: 100%; margin: .2em 0 0; }
p { margin: 0 0 1em; }

#footer { color: #999; font-size: 90%; margin: 1em auto 0; padding: 0 16px 2em;
  width: 568px; text-transform: lowercase;
}
#footer .licence-badge { float: right; }
#footer p { line-height: 1.1em; margin: .2em 0 0; }
#footer :link, #footer :visited { color: #bbb; }

p.help { clear: both; color: #999; font-size: 85%; font-style: italic;
  line-height: 1.1em; margin: 1em; text-align: center;
}
p.help img { vertical-align: middle; }

form.inline { display: inline; }
form.inline div { display: inline; }

/* Sidebar */
div.sidebar { background: url(gradline.png) 0 0 no-repeat; float: right;
  font-size: 90%; line-height: 1.2em; margin: -12px 0 1em .5em;
  position: relative; right: -16px; padding: 11px 0 .5em 0;  width: 200px;
}
div.sidebar h2 { border: none; color: #666; font-size: 100%;
  font-style: italic; font-weight: normal; margin: 0 16px .5em;
  text-align: right;
}
div.sidebar h2 :link, div.sidebar h2 :visited { color: #666; }
div.sidebar h2 img { vertical-align: bottom; }
div.sidebar ol { list-style: none; margin: 0; padding: 0; }
div.sidebar li { margin: 0 0 1em; }
div.sidebar li h3 { background: #D7CDC1; border-bottom: 1px solid #ccc;
  font-size: 100%; font-weight: bold; margin: 1em 0 0;
  padding: .2em 16px .2em 22px; position: relative; text-transform: lowercase;
}
div.sidebar li .info { float: left; font-size: 85%; color: #999;
  margin: .3em 1em 0 22px; text-align: right;
}
* html div.sidebar li .info { margin-left: 12px; }
div.sidebar li blockquote { color: #666; font-style: italic;
  margin: .3em 16px 1.5em 22px;
}
div.sidebar li blockquote p { margin: 0; }

/* Links to social networking sites */

#elsewhere { background: #D7CDC1; border-top: 1px solid #bbb; clear: both;
  color: #666; font-size: 75%; margin: 1em -16px 0; position: relative;
  top: 16px; padding: .2em .5em .5em; text-transform: lowercase;
}
#elsewhere p { float: left; line-height: 16px; margin: 0; width: 40%;
  text-align: right;
}
#elsewhere ul { background: url(sites.gif?v=2) no-repeat; list-style: none;
  margin: 0 0 0 40%; padding: 0; width: 176px; height: 16px;
}
#elsewhere li { float: left; width: 22px; height: 16px; }
#elsewhere :link, #elsewhere :visited { color: #000; display: block;
  width: 22px; height: 16px;
}

/* Blog posts */
body.blog ol.posts { list-style: none; margin: 0; padding: 0; }
body.blog li.post { margin: 0 0 2em; }
body.blog li.post h2 { margin-top: 1em; margin-bottom: 0; }
body.blog li.post .info, body.blog div.post .info { font-size: 90%;
  color: #999; margin: 0;
}
body.blog li.post .info a, body.blog div.post .info a { color: #666;
  text-transform: capitalize;
}
body.blog div.post .info { text-align: right; }
body.blog div.post .info a { text-transform: capitalize; }
body.blog li.post p, body.blog div.post p { margin: 1em 0 0; }
body.blog li.post p.feedback { font-size: 90%; margin: .5em 0;
  text-align: right; text-transform: lowercase;:
}
body.blog div.post #disqus_thread { border-top: 24px solid #5A533C;
  margin-top: 2em; position: relative;
}
body.blog div.post #dsq-content { padding: 0 4px; }
body.blog div.post #dsq-comments-count { font-weight: normal !important;
  text-align: right; text-transform: lowercase;
} 
body.blog div.post #dsq-options { color: #fff; margin: 0 !important; 
  position: absolute; top: -23px;
}
body.blog div.post #dsq-options :link,
body.blog div.post #dsq-options :visited {
  color: #fff;
}

body.blog dl.posts dt { font-weight: bold; text-transform: lowercase; }
body.blog dl.posts dd.info { color: #666; font-size: 85%; }

body.blog .subnav { text-align: center; text-transform: lowercase; }
body.blog .subnav :link, body.blog .subnav :visited { font-weight: bold;
  padding: 0 .5em;
}

/* Download buttons */
ul.downloads { list-style: none; margin: 0; padding: 0; }
ul.downloads li { float: left; font-size: 90%; line-height: 1.2em;
  margin: 3px; white-space: nowrap;
}
ul.downloads li :link, ul.downloads li :visited {
  background: url(small_download_r.gif) 100% 0 no-repeat; color: #777;
  cursor: pointer; display: block; padding: 0 10px 0 0;
}
ul.downloads li :link:hover, ul.downloads li :visited:hover {
  background-position: 100% -100px; color: #fff;
}
ul.downloads li :link b, ul.downloads li :visited b {
  background: url(small_download.gif) 0 0 no-repeat; display: block;
  font-weight: normal; height: 28px; padding: 4px 0 3px 5px;
}
ul.downloads li :hover b { background-position: 0 -100px !important; }
ul.downloads li em { color: #5d543b; font-size: 100%;
  font-style: normal; font-weight: bold; line-height: 1.2em;
  padding: 2px 0 8px 18px;
}
ul.downloads li :hover em { color: #fff;
  text-shadow: 1px 1px 0 #000;
}
ul.downloads li .quality { font-size: 85%; }
ul.downloads li .info { color: #777; display: block; font-size: 80%;
  line-height: 1.1em; padding-left: 20px; white-space: nowrap;
}
ul.downloads li :hover .info { color: #999; }

/* Album list */
ul.albums { list-style: none; margin: 0; padding: 0; }
ul.albums li.album { clear: left; margin: 0 0 2em; }
ul.albums li.album h2 { border: none; margin: 1em 0 0; padding: 0; }
ul.albums li.album p.release { color: #999; font-size: 90%; }
ul.albums li.album img.cover { border: 1px solid #555; float: left;
  margin: 0 1em 1em 0; vertical-align: top;
}

ul.albums div.downloads { float: right; margin: 0 1em 1em 0; padding: .3em; }
ul.albums div.downloads h3 { color: #777; font-size: 90%; font-weight: normal;
  line-height: 1.1em; margin: 0; text-align: center;
  text-transform: lowercase;
}

/* Album detail */
div.album div.info { color: #ddd; float: right;
  margin: 0 0 1em 1em;
}
div.album div.info a.cover img { border: 1px solid #555;
  border-bottom-width: 0;
}
div.album div.info dl.meta { background: #000; font-size: 85%;
  line-height: 1.2em; margin: 0; padding: .5em 0 .5em 1em;
}
div.album div.info dl.meta dt { color: #999; float: left; font-size: 90%;
  padding-right: .5em; width: 6em; text-align: right;
}
div.album div.info dl.meta dd { font-weight: bold; }
div.album span.size { color: #666; font-size: 85%; }

div.album .support h3 { color: #666; text-transform: lowercase; }
div.album .support p { color: #666; font-size: 85%; line-height: 1.2em; }

div.album form.button { float: right; }
div.album form.button button { padding: .4em 1.2em; }
div.album form.button .size { display: inline; font-size: 85%; margin: 0; }

div.album table.tracks { border-collapse: collapse; clear: right;
  margin: 0; width: 100%;
}
div.album table.tracks caption { display: none; }
div.album table.tracks th, div.album table.tracks td { padding: .1em .4em; }
div.album table.tracks thead th { border-bottom: 1px solid #999; color: #666;
  font-size: 85%; font-weight: normal; text-align: left;
}
div.album table.tracks thead th.time { padding-right: 1em; text-align: right; }
div.album table.tracks tbody th, div.album table.tracks tbody td {
  background: #F1F5F9; border-bottom: 1px solid #ccc;
}
div.album table.tracks tbody th a {
  background: url(play.gif) 100% 2px no-repeat; color: #999;
  padding-right: 19px;
}
div.album table.tracks tbody tr:hover th a {
  background-position: 100% -22px;
}
div.album table.tracks tbody th a:focus { outline: none; }
div.album table.tracks tbody th a.playing {
  background-position: 100% -46px !important;
}
div.album table.tracks tbody th a.paused {
  background-position: 100% -22px !important;
}
div.album table.tracks tbody { border: 1px solid #ccc; }
div.album table.tracks tbody .odd th, div.album table.tracks tbody .odd td {
  background: #fff;
}
div.album table.tracks tbody th { color: #999; font-size: 90%;
  font-weight: normal; text-align: right;
}
div.album table.tracks tbody td.name { font-weight: bold; width: 80%; }
div.album table.tracks tbody td.name img { float: right; }
div.album table.tracks tbody td.name a.name { display: block;
  margin-right: 20px;
}
div.album table.tracks tbody td.name a.name:focus { outline: none;  }
div.album table.tracks tbody td.time { padding-right: 1em; text-align: right;
  width: 10%;
}
div.album table.tracks :link, div.album table.tracks :visited { color: #333; }
div.album table.tracks tbody.footer { border: none; }
div.album table.tracks tbody.footer td {
  background: transparent; border: none;
}
div.album table.tracks tbody.footer td.player { padding: 0; width: 340px; }
div.album #playerbox { display: none; float: left; width: 300px;
  height: 20px;
}

#stores { background: #fff; border: 1px solid #bbb;
  list-style: none; margin: 0 3em .7em; padding: .5em; text-align: center;
  width: 280px;
}
#stores li { display: inline; padding: 0 .4em; }
#stores li a { color: #000; font-size: 90%; font-weight: bold; }
#stores li a img { vertical-align: middle; }

#donate { float: right; margin: -.5em 0 2em .5em; }

#downloads p { color: #666; font-size: 85%; line-height: 1.2em; }

div.album ul.downloads { float: left; width: 100%; }
div.album ul.downloads li { margin-left: .7em; }
div.album ul.downloads :link, div.album ul.downloads :visited {
  background-image: url(download_r.gif);
}
div.album ul.downloads :link b, div.album ul.downloads :visited b {
  background-image: url(download.gif); height: 66px; padding: 4px 0 5px 10px;
}
div.album ul.downloads li em { font-size: 160%; line-height: 1.6em;
  padding-left: 22px; padding-bottom: 4px;
}
div.album ul.downloads li .quality { line-height: 2em; }
div.album ul.downloads li .info { color: #777; display: block; font-size: 80%;
  line-height: 1.1em; padding-left: 0;
}
div.album ul.downloads li :hover .info { color: #999; }
div.album ul.downloads li .info strong { color: #5d543b; font-weight: normal; }
div.album ul.downloads li :hover .info strong { color: #ddd; }

/* Photos */

#gallery .thumbs { background: #222; border: 1px solid #000; overflow: auto;
  overflow-x: scroll; overflow-y: hidden; width: 566px;
}
#gallery .thumbs ul { background: #222; list-style: none; margin: 0;
  height: 80px; padding: 10px;
}
#gallery .thumbs li { border: 1px solid #fff; border-width: 2px 1px;
  float: left; padding: 0;
}
#gallery .thumbs li.first { border-left-width: 2px; }
#gallery .thumbs li.last { border-right-width: 2px; }
#gallery .thumbs li a:focus { outline: none; }
#gallery .thumbs li img { display: block; opacity: .3; }
#gallery .thumbs li a:hover img { opacity: .8; }
#gallery .thumbs li.selected img { opacity: 1; }

#gallery .zoom { background: #000 50% 200px no-repeat; color: #eee;
  padding: 20px; position: relative;
}
#gallery .zoom img { border: 2px solid #000; display: block; margin: 0 auto; }
#gallery .zoom a { color: #fff; }
#gallery .zoom a:focus { outline: none; }
#gallery .zoom p { margin: 0; padding: .5em 0 0; }
#gallery .loading { background-image: url(bspinner.gif); }

#flickr { font: 11px Arial,Helvetica,sans-serif; color: #3993ff; }
#flickr a:hover, #flickr_www a:link, #flickr_www a:active,
#flickr a:visited { text-decoration: none !important;
  background: inherit !important; color: #3993ff;
}

/* Links */

dl.links dt { font-weight: bold; }
dl.links dt.icon { clear: left; float: left; margin: 0 .6em 1em 0;
  padding: .2em 0 0;
}
dl.links dt.icon img { border: 1px solid #333; }
dl.links dd { font-size: 90%; line-height: 1.2em; margin-left: 0;
  padding-left: 0;
}

/* About page */

body.about ul.qa { list-style-position: inside; margin: 0 0 2em; padding: 0; }
body.about ul.qa li { margin: 0 0 .5em; padding: 0; }

body.about img.portrait { border: 1px solid #666; clear: right; float: right;
  margin: 0 0 1em 2em;
}

#fanreach { float: right; margin-bottom: 1.5em; }

/* Overlays */
#overlay { background: #000; position: fixed; width: 100%;
  height: 100%; top: 0; left: 0;
}
#darkbox { color: #f4f4f4; overflow: hidden; opacity: .95; max-width: 600px;
  position: relative; padding: 16px 0 0 16px;
  -moz-box-shadow: #000 20px 20px 40px;
  -webkit-box-shadow: #000 20px 20px 40px;
}
#darkbox.loading { background: #666 url(spinner.gif) 50% 50% no-repeat;
  width: 220px; height: 80px;
}
#darkbox.loading a.close { display: none; }

#darkbox img { border: 1px solid #000; display: block; }
#darkbox a.close { background: transparent url(close.gif) no-repeat;
  border: none; display: block; position: absolute;
  width: 16px; height: 16px; top: 0; left: 0;
}

#darkbox .lyrics { background: #ece0a3 url(notegrad.jpg) no-repeat;
  border-left: 3px double #fbb;
  color: #222; min-width: 400px; padding: .1em 0 .5em;
}
#darkbox .lyrics h1 { color: #333; margin: .5em 0;
  padding: 0 .5em .1em 0; text-align: right; text-transform: lowercase;
}
#darkbox .lyrics .text { font-size: 90%; max-height: 400px; overflow: auto;
  margin: 0 .5em; padding: 0 .5em;
}
#darkbox .lyrics .text p { line-height: 1.4em; margin: 0 0 1em; }