/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 (modified for ItW) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}



body {
    /* I wish we could use Helvetica, but there's a baseline alignment issue in FireFox */
    background-color: #000;
    font-family: Arial, sans-serif; line-height: 1.15; color: #999;
    text-rendering: optimizeLegibility; -webkit-text-size-adjust: none;
}
body, #body { overflow-x: auto; overflow-y: scroll; }
body.wrapper { overflow: hidden; }
body.wrapper, #body { width: 100%; height: 100%; }
#body { position: absolute; }
#payload { display: none; }

ol, ul { list-style: none; }
hr { height: 1px; border: 0; background-color: #666; color: #666; width: 100%; }



a:link      { color: #999; text-decoration: underline; }
a:visited   { color: #999; text-decoration: underline; }
a:hover     { color: #ddd; text-decoration: none; }
a:active    { color: #999; text-decoration: none; }

#index-container a:link, a.post-link:link         { text-decoration: none; }
#index-container a:visited, a.post-link:visited   { text-decoration: none; }

a.post-link { color: #fff; }



a.white-btn, a.white-btn.fixed, a.black-btn, a.black-btn.fixed { display: block; color: #000; text-decoration: none; }
a.black-btn, a.black-btn.fixed { color: #fff; }
.white-btn span, .white-btn.fixed { padding: 5px; background-image: url(/media/white-px-40-opacity.png); }
.black-btn span, .black-btn.fixed { padding: 5px; background-image: url(/media/black-px-40-opacity.png); }
.white-btn.hover span, .white-btn.fixed.hover { background-image: url(/media/white-px-65-opacity.png); }
.black-btn.hover span, .black-btn.fixed.hover { background-image: url(/media/black-px-65-opacity.png); }
.white-btn.toggled span, .white-btn.fixed.toggled { background-image: url(/media/white-px-85-opacity.png); }
.white-btn.small, .black-btn.small { font-size: 10pt; }
.white-btn.small span, .white-btn.fixed.small, .black-btn.small span, .black-btn.fixed.small { padding: 2px; }
.white-btn.sawtooth-top, .white-btn.sawtooth-btm { overflow: hidden; }
.white-btn.sawtooth-top span { display: block; float: left; padding-top: 8px; background-image: url(/media/sawtooth3-top-40-opacity.png); line-height: 1em; }
.white-btn.sawtooth-top.hover span { background-image: url(/media/sawtooth3-top-65-opacity.png); }
.white-btn.sawtooth-btm span { display: block; float: left; padding-bottom: 8px; background: url(/media/sawtooth3-btm-40-opacity.png) repeat left bottom; line-height: 1em; }
.white-btn.sawtooth-btm.hover span { background-image: url(/media/sawtooth3-btm-65-opacity.png); }


.white-btn.fixed.small span, .black-btn.fixed.small span { padding: 0; }
.white-btn.fixed span, .black-btn.fixed span { padding: 0; background-image: none; }
.white-btn.fixed.hover span, .black-btn.fixed.hover span { background-image: none; }

.feed-loader .loading-indicator, .category-page-link .loading-indicator { margin-right: 5px; vertical-align: bottom; }
.category-link .loading-indicator, .category-archived-link .loading-indicator { width: 0.75em; height: 0.75em; margin-right: 5px; }



.article-copy { line-height: 1.25; }
.article-copy p, .article-copy ol, .article-copy ul, .article-copy pre, .article-copy > div, .article-copy > iframe { overflow: visible; clear: both; margin: 0 0 1em 0; }
.article-copy div.clear-element { width: 100%; height: 1px; margin: 0 0 -1px; clear: both; }
.article-copy blockquote { clear: both; margin-left: 30px; }
.article-copy pre { margin-left: 30px; }
.article-copy code { font-family: monospace; }
.article-copy ul { list-style: square outside; }
.article-copy ol { list-style: decimal outside; }
.article-copy li { margin-left: 30px; }
.article-copy h1 { margin: 4em 0 1em 0; font-weight: normal; font-size: 16pt; color: #ddd; }
.article-copy h2 { margin: 3em 0 1em 0; font-weight: normal; font-size: 12pt; color: #ddd; text-transform: uppercase; letter-spacing: -1px; }
.article-copy h1:first-child, .article-copy h2:first-child { margin-top: 1em; }
.article-copy h1 + h2 { margin-top: 2em; }



.ui-gasbox {
    display: none;
    overflow: visible;
    position: relative;
    background-color: #000;
}
.ui-gasbox-images, .ui-gasbox-borders {
    position: relative; top: 0; left: 0;
    width: 0; height: 100%; overflow: visible; margin: 0; padding: 0;
    list-style: none;
}
.ui-gasbox-images { overflow: hidden; width: 100%; }
.ui-gasbox li {
    position: absolute; left: 0; top: 0;
    height: 100%; margin: 0; padding: 0;
    background-color: #000;
}
.ui-gasbox li a {
    display: block; width: 100%; height: 100%;
    text-decoration: none;
}
.ui-gasbox-borders { position: absolute; }
.ui-gasbox-borders li {
    position: absolute; height: 100%;
    border-right: 0 solid #000;
}
.ui-gasbox-caption { position: absolute; top: 155px; left: 0; padding: 5px; background-image: url(/media/black-px-40-opacity.png); color: #bbb; }
.ui-gasbox-caption span { font-weight: bold; color: #ddd; }
.ui-gasbox-images a .loading-indicator { position: absolute; left: 5px; top: 5px; }



.ui-audio { position: relative; overflow: hidden; height: 16px; margin-bottom: 2px; font-size: 11pt; line-height: 1; }
span.ui-audio { display: inline-block; vertical-align: bottom; }
.ui-audio .wrapper { position: absolute; left: 0; top: 0; width: 100%; }
.ui-audio .text, .ui-audio .scrubber { position: relative; cursor: pointer; }
.ui-audio .text { padding: 0 21px; }
.ui-audio .text .title .artist { display: none; }
.ui-audio .scrubber { display: none; margin: 0 21px; height: 16px; }
.ui-audio .scrubber .progress { display: none; width: 0%; height: 16px; background-color: #a6a6a6; }
.ui-audio .duration { float: right; position: relative; margin-left: 5px; }
.ui-audio .duration .progress { display: none; }
.ui-audio .play-btn, .ui-audio .dl-btn { position: absolute; top: 0; width: 16px; height: 16px; cursor: pointer; }
.ui-audio .play-btn { left: 0; }
.ui-audio .dl-btn { right: 0; }
.ui-audio .dl-btn.remove { width: 14px; height: 14px; border: 1px solid #fff; }
.ui-audio.playing .text { color: #000; }
.ui-audio.playing .scrubber { display: block; background-color: #666; }
.ui-audio.playing .scrubber .progress { display: block; }
.ui-audio.playing .duration .progress { display: inline; }

.ui-audio.big { font-size: 14pt; line-height: 32px; }
.ui-audio.big, .ui-audio.big .scrubber, .ui-audio.big .scrubber .progress { height: 32px; }
.ui-audio.big .text { padding: 0 37px; }
.ui-audio.big .scrubber { margin: 0 37px; }
.ui-audio.big .play-btn, .ui-audio.big .dl-btn { width: 32px; height: 32px; padding: 0; }
.ui-audio.big .dl-btn.remove { width: 28px; height: 28px; background-color: transparent; border: 2px solid #fff; }
.ui-audio.big .dl-btn.add { background-color: transparent; }

/* temporary hacky solution to title overflow: */
.ui-audio.small-title .text .title { font-size: 0.9em; }



.ui-video { height: 338px; width: 600px; position: relative; }
.ui-video .placeholder {
    cursor: pointer;
    position: relative; width: 600px; height: 338px;
}
.ui-video .placeholder img { width: 100%; height: 100%; }
.ui-video .placeholder .titles {
    position: absolute; bottom: 50%; left: 0; width: 100%; margin: 0 0 10px 0;
}
.ui-video .placeholder .title-bg {
    position: absolute; left: 0; bottom: 50%; width: 100%; margin: 0 0 5px 0;
    background-color: #000;
}
.ui-video .placeholder .subtitle, .ui-video .placeholder .title {
    position: relative;
    float: left; clear: both;
    color: #fff; font-weight: bold; text-align: center; line-height: 0.8;
}
.ui-video .placeholder .play-btn {
    position: absolute; top: 50%; left: 50%; width: 75px; height: 75px; margin: 10px 0 0 -37.5px;
    background: transparent url(/media/play-btn-contrast.png);
}
.ui-video .placeholder.no-title .play-btn { margin-top: -37.5px; }
.ui-video .placeholder .noscript-warning {
    position: absolute; top: 60%; left: 0; width: 100%; padding: 5px 0 5px 0;
    text-align: center; font-weight: bold;
    background-image: url(/media/white-px-65-opacity.png);
}
.ui-video .share-btn { position: absolute; bottom: 10px; right: 0; }
.ui-video.loading .share-btn, .ui-video.loaded .share-btn { top: 10px; bottom: auto; }
.ui-video .share-panel {
    display: none; position: absolute; top: 0; left: 0; width: 500px; height: 238px; margin: 25px; padding: 25px;
    background-image: url(/media/black-px-85-opacity.png);
}
.ui-video .share-panel .code {
    width: 500px; margin: 0; padding: 0;
    border: 0; background: transparent url(/media/white-px-30-opacity.png);
    font-family: Arial, sans-serif; line-height: 1.15; font-size: 13pt; color: #fff;
}
.ui-video .share-panel .share-input div { float: right; font-size: 10pt; }
.ui-video .share-panel .white-btn { float: right; }
.ui-video .player {
    display: none; position: absolute; top: 0; left: 0; width: 600px; height: 338px;
    background: #111 url(/media/loading-itw-snake.gif) no-repeat center center;
}
.ui-video.loading, .ui-video.loaded { z-index: 95; }
.ui-video.loading .share-btn, .ui-video.loaded .share-btn { z-index: 100; }
.ui-video.loading .share-panel, .ui-video.loaded .share-panel { z-index: 105; }
.ui-video .player.video-started { background: #111; }
.ui-video .player .player-child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



#tracks-container, #tracks { z-index: 10; position: relative; width: 378px; height: 0; overflow: hidden; }
#tracks { color: #000; }
#tracks.detached { position: fixed; top: 0; }
#now-playing, #dl-instructions, #tracks ul, #dl-controls { display: none; background-image: url(/media/white-px-65-opacity.png); }
#tracks.detached #now-playing, #tracks.detached #dl-instructions, #tracks.detached ul, #tracks.detached #dl-controls { background-image: url(/media/white-px-85-opacity.png); }
#dl-instructions { padding: 5px; color: #444; }
#dl-instructions img { vertical-align: top; }
#tracks.detached #dl-instructions { color: #666; }
#dl-controls { overflow: hidden; float: left; }

#tracks .tracks-collapsed { padding: 5px; }
#tracks ul { padding: 5px; }
#tracks .dl-btn.remove { border-color: #000; }
#tracks .title, #tracks .duration { color: #333; }
#tracks .ui-audio.playing .title, #tracks .ui-audio.playing .duration { color: #000; }
#tracks .scrubber { background-color: transparent; }
#tracks .ui-audio.playing .scrubber { background-color: #999; }
#tracks .scrubber .progress { background-color: #777; }
#tracks.detached .scrubber { background-color: transparent; }
#tracks.detached .scrubber .progress { background-color: #a6a6a6; }
#tracks.detached .ui-audio.playing .scrubber .progress { background-color: #999; }
#tracks.detached .ui-audio.playing .scrubber { background-color: #bbb; }

#now-playing { margin-bottom: 1px; padding: 5px; }
#now-playing .ui-audio { margin: 0; }
#now-playing .dl-btn.remove { border-color: #000; }

#clear-tracks-btn { float: left; margin: 0 5px 5px; }
#dl-tracks-btn { position: relative; float: left; margin: 0 5px 5px 0; }
#dl-tracks-btn .loading { display: none; }
#dl-tracks-btn span.loading { padding-left: 25px; }
#dl-tracks-btn img.loading { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; }



#bg-container {
    z-index: -1; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 749px;
}
#bg-container.small-window { width: 1054px; }
#bg-img {
    position: absolute; width: 1000%; height: 100%;
    background: #000 url(/media/bg-blurred.jpg) repeat-x;
}
#fade-container {
    display: none; z-index: 90; position: absolute; left: 0; top: 0; width: 100%;
    background-image: url(/media/black-px-65-opacity.png);
}
#fade-container.small-window { width: 1054px; }
#content-container {
    overflow: hidden; position: relative; width: 1054px; min-height: 700px; margin: 0 auto; padding-bottom: 60px;
}



#left-col { position: relative; margin-left: 25px; float: left; width: 378px; }
#right-col { position: relative; margin-right: 25px; float: right; width: 600px; }



#logo-link { display: block; width: 378px; height: 155px; margin: 0 0 25px 0; text-decoration: none; color: #ddd; }
#logo-link img { float: left; width: 378px; }
#logo-line-1 { height: 73px; }
#logo-line-2 { height: 82px; }



#tagline { margin: 0 0 25px 0; font-size: 16pt; line-height: 30px; letter-spacing: -1px; }
#tagline span { background-image: url(/media/black-px-65-opacity.png); padding: 5px; }
#tagline span.indented { margin-left: 25px; }
#tagline .loading-indicator { margin-right: 5px; }



#sidebar { position: relative; left: 0; }
#floating-sidebar { display: none; z-index: 1; position: relative; left: -403px; padding: 25px 0 0 0; }

#search {
    display: block; position: relative; overflow: hidden; margin: 0 0 25px 0;
}
#search input, #search .white-btn {
    float: left; height: 1.15em; font-family: Arial, sans-serif; font-size: 12pt;
}
#search input {
    width: 175px; padding: 5px; margin: 0 5px 0 0;
    border: none; background: transparent url(/media/white-px-40-opacity.png);
}
#search .white-btn { font-weight: bold; letter-spacing: -1px; }
#search input.active { background: transparent url(/media/white-px-65-opacity.png); }
#search .loading-indicator { position: absolute; left: 164px; top: 6px; }

#categories { clear: left; margin: 0 0 50px 0; }
.category-header { font-size: 18pt; color: #ddd; font-weight: bold; letter-spacing: -1px; line-height: 35px; }
.category-header span { padding: 5px; background-image: url(/media/black-px-40-opacity.png); }
.category-type { overflow: hidden; position: relative; padding-bottom: 1px; margin-bottom: 24px; line-height: 32px; }
.archived-categories { margin-bottom: 3px; }
.active-categories { margin-top: 3px; }
.category-link, .category-archived-link { font-size: 18pt; letter-spacing: -1px; }
.category-archived-link.active { margin-bottom: 10px; }
.category-archived-link.archived { margin-top: 10px; }
.category-desc { width: 378px; margin-bottom: 5px; line-height: 1; }
.category-desc span { background-image: url(/media/black-px-65-opacity.png); }
.category-pages { overflow: hidden; position: relative; width: 378px; margin: 0 0 25px 25px; line-height: 24px; }
.category-page { position: absolute; top: 0; left: 0; }
.category-page.first { padding-top: 3px; }
.category-page.last { padding-bottom: 3px; }
.category-child-link, .category-page-link { font-size: 13pt; }
.category-page-link.newer { margin-bottom: 10px; }
.category-page-link.older { margin-top: 10px; }

#contact { margin: 0 0 25px 0; font-size: 14pt; }
#contact span { background-image: url(/media/black-px-65-opacity.png); }



#top-right { overflow: hidden; position: relative; width: 100%; height: 235px; }
#features { width: 600px; height: 155px; margin-bottom: 30px; }

.popular { margin-bottom: 60px; overflow: hidden; font-size: 10pt; line-height: 1.5; }
.popular ol { width: 268px; padding: 5px 0 5px 30px; float: left; background-image: url(/media/black-px-65-opacity.png); list-style: decimal outside;  }
.popular ol.first { width: 267px; margin-right: 5px; }
.popular li {  }
.popular a { text-decoration: none; }
.popular a .artist { font-weight: bold; }
.popular a:link .artist { color: #bbb; }
.popular a:visited .artist { color: #bbb; }
.popular a:hover .artist { color: #ddd; }
.popular a:active .artist { color: #bbb; }



#viewport { position: relative; width: 600px; overflow: hidden; }
#feed-page-container .feed-page, #index-container .show-index, #post-container .post, #page-404 {
    position: absolute; left: -10000px; width: 600px;
}


.feed-type-toggle { position: relative; z-index: 5; float: right; margin-bottom: 30px; color: #000; }
.post .feed-type-toggle { margin-bottom: 0; }
.feed-type-toggle .white-btn { float: left; margin-left: 1px; }
.post-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; }

.section-header { position: relative; width: 350px; margin: 0 0 15px; color: #222; font-size: 20pt; font-weight: bold; letter-spacing: -1px; }
.section-header span { background-color: #ddd; padding: 0 1px 0 0; }
.section-header.small { width: 600px; margin-bottom: 5px; float: left; font-size: 12pt; letter-spacing: 0; line-height: 1; }

.page-header {
    margin: 0 0 30px; padding: 5px 0; overflow: hidden;
    background-color: #000;
    color: #fff; font-size: 16pt; text-align: center;
}
.page-header .title { font-weight: bold; line-height: 0.8; }

.post-title { color: #fff; font-size: 20pt; font-weight: bold; line-height: 1.1; }
.post-title span { background-color: #000; }
.post-title .category { margin-left: 60px; }
.post-title p { position: relative; padding: 15px 0 0 0; }
.post-title .play-btn { width: 0.75em; height: 0.75em; padding: 0 0.1em 0 0; }
.post .body .loading-indicator, .post .post-header .loading-indicator { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; }

.metabar {
    /*overflow: visible; */
    margin-left: 60px; padding: 0 0 0 30px; text-indent: -30px;
    list-style: none inside;
    color: #fff; font-size: 10pt; font-weight: normal;
}
.metabar li { display: inline; background-color: #000; }
.metabar li img { width: 5px; height: 5px; padding: 4px 5px; vertical-align: bottom; }
.metabar .post-time, .metabar .feed-comment-count { font-weight: bold; }

.details-wrapper .module { margin-top: 25px; overflow: hidden; }
.details-wrapper .module .header .title { color: #ddd; font-weight: bold; letter-spacing: -1px; font-size: 14pt; background-image: url(/media/black-px-85-opacity.png); }
.details-wrapper .module.disabled .header .title { color: #666; }

.post .body { margin: 15px 0 0 15px; }
.post .inline-body { background-image: url(/media/black-px-85-opacity.png); padding: 1px 0; }
.post .wide { float: right; }
.post .loading-indicator-container { position: relative; }

.tags.module { margin-left: 15px; margin-bottom: -5px; }
.tags.module .loading-indicator { float: left; margin: 0 5px 5px 0; padding: 2px; }
a.tag-link {
    float: left; position: relative; margin: 0 5px 5px 0; padding: 2px;
    border: 1px solid #666; background-image: url(/media/black-px-65-opacity.png);
    font-size: 10pt; color: #999; text-decoration: none;
}
a.tag-link.hover { border-color: #999; }
a.tag-link.loading { padding-left: 20px; }

.tracks.module .duration { float: right; position: relative; }
.tracks.module .toggle-all-btn { float: right; margin: 0 0 5px 5px; }
.tracks.module ul { list-style: none; margin: 0; }
.tracks.module li { clear: both; display: block; margin-left: 15px; }

.comments.module .disabled-msg { display: none; font-size: 10pt; font-weight: normal; }
.comments.module.disabled .disabled-msg { display: inline; } 
.comments.module .white-btn { float: right; }
.comments.module .fb-wrap { margin: 0 0 0 15px; }
.comment-count-space { display: none; }

#post-container .post.wide { width: 1004px; }
#post-container .post-title .category { margin-left: 15px; }
#post-container .metabar { margin-left: 15px; }

.post.wide .details-wrapper { margin-left: 404px; }

#feed-page-container .post { position: relative; margin: 0 0 60px 0; }
#feed-page-container .post .body { margin-left: 60px; }
#feed-page-container .metabar { margin-left: 60px; }

.feed-loader, .feed-footer { text-align: center; font-weight: bold; }
.feed-loader span { width: 600px; padding-left: 0; padding-right: 0; }
.feed-footer { clear: right; padding: 5px 0; background-color: #000; border: 1px solid #666; }
.feed-loader.sawtooth-top { margin-bottom: 15px; }



.show-index { overflow: hidden; }
.show-index .thumbs { position: relative; overflow: hidden; width: 615px; margin-bottom: 15px; }
.index-thumb { display: block; position: relative; float: left; width: 190px; height: 107px; margin: 0 15px 15px 0; }
.index-thumb .number, .index-thumb .tracks-badge {
    position: absolute;
    top: 0;
    padding: 5px;
    font-weight: bold;
    color: #ddd;
    background-image: url(/media/black-px-40-opacity.png);
}
.index-thumb .number { left: 0; }
.index-thumb .tracks-badge { right: 0; width: 16px; height: 16px; }
.index-thumb .index-link img { width: 100%; height: 100%; }
.index-thumb .title-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0 5px 0;
    background-color: #000;
}
.index-thumb .title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px 0 5px 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.8;
}



#page-404 { width: 600px; height: 338px; text-align: center; font-weight: bold; font-size: 140px; letter-spacing: -8px; line-height: 0.8; color: #fff; }
#page-404 div { position: relative; padding-top: 50px; }
#page-404 img { position: absolute; top: 0; left: 0; width: 600px; height: 338px; }