@charset "UTF-8";
/* CSS Document */

body, html {
    margin: 0px;
    padding: 0px;
	background: #2f373b;
	height: 100%;
}

div, hr {
	margin: 0px;
	padding: 0px;
	border: none;
	text-align: left;
	font-size: 0px;
}

p, li, span, a, label, input, h4 {
	padding: 0px;
	font-size: 11px;
	line-height: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #9daeb5;
	vertical-align: top;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#wrapper {
	margin: 0px auto 0px auto;
	padding: 0px;
	position: relative;
    width: 898px;
	background-color: #293033;
	background: url(../images/main/bevel-bg.gif) top left repeat-y;
}

#wrapper-column-left {
	float: left;
}

#wrapper-column-right {
    float: right;
}

/* this center column cannot have "width" or it will screw up IE */
#wrapper-column-middle {
	float: left;
	width: 848px;
	background-color: #293033;
}

#bevel-top {
	width: 848px;
	height: 12px;
	background: url(../images/main/bevel-top.gif) bottom left no-repeat;
	background-color: #2f373b;
	font-size: 0px;
}

#bevel-bottom {
	margin: 0px auto 0px auto;
	clear: both;
	width: 848px;
	height: 50px;
	background: url(../images/main/bevel-bottom.gif) bottom left no-repeat;
	font-size: 0px;
}

.clear {
	clear: both;
}

.clear-spacer {
	clear: both;
	height: 26px;
}

/* left / right bevel backgrounds */
#wrapper-column-left-top {
	width: 25px;
	height: 12px;
	background: url(../images/main/bevel-left-top.gif) bottom left no-repeat;
	background-color: #2f373b;
	font-size: 0px;
}

#wrapper-column-left-bottom {
	position: absolute;
	width: 25px;
	height: 10px;
	bottom: 0px;
	background: url(../images/main/bevel-left-bottom.gif) bottom left no-repeat;
	background-color: #2f373b;
	font-size: 0px;
}

#wrapper-column-right-top {
	width: 25px;
	height: 12px;
	background: url(../images/main/bevel-right-top.gif) bottom left no-repeat;
	background-color: #2f373b;
	font-size: 0px;
}

#wrapper-column-right-bottom {
	position: absolute;
	width: 25px;
	height: 10px;
	bottom: 0px;
	background: url(../images/main/bevel-right-bottom.gif) bottom left no-repeat;
	background-color: #2f373b;
	font-size: 0px;
}
/**/

/* header */
#header-main {
	float: left;
}

#header-main h1 {
	margin: 21px 0px 0px 44px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	width: 339px;
	height: 33px;
}

#header-main h1 span {
	padding: 0px;
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 339px;
	height: 33px;
	background: url(../images/main/header-beta.gif) top left no-repeat;
}
/**/

/* visit beatport button */
#button-visit-beatport {
	margin: 21px 0px 0px 273px;
	float: left;
}

#button-visit-beatport a {
	padding: 0px;
	position: relative;
	overflow: hidden;
	width: 151px;
	height: 25px;
}

#button-visit-beatport a span {
	padding: 0px;
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 151px;
	height: 25px;
	background: url(../images/main/visit-beatport-button.gif) top left no-repeat;
}
/**/

/* main image */
#header-divider {
	margin: 0px 0px 0px 0px;
	clear: both;
	width: 848px;
	height: 29px;
	background: url(../images/main/header-divider.gif) top left no-repeat;
}

#header-divider-full {
	margin: 0px 0px 0px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 848px;
	height: 104px;
	background: url(../images/main/header-divider-full.gif) no-repeat top left;
}

#wrapper-header-full {
	position: relative;
}

#main-image {
	margin: 0px auto 0px auto;
	width: 780px;
	height: 250px;
	background: url(../images/main/main-image.png) top left no-repeat;
}
/**/

/* main content */
div.wrapper-main-content-left {
	margin: 10px 0px 0px 0px;
	position: relative;
	float: left;
	left: 44px;
	width: 365px;
}

div.wrapper-main-content-right {
	margin: 10px 0px 0px 0px;
	position: relative;
	float: right;
	right: 44px;
	width: 365px;
}

.blue-divider-column {
	width: 365px;
	height: 6px;
	background: url(../images/main/blue-divider-left.gif) left no-repeat;
	background-color: #2d5b71;
	font-size: 0px;
}

.blue-divider-full {
	margin: 0px auto 0px auto;
	position: relative;
	clear: both;
	top: 20px;
	width: 760px;
	height: 6px;
	background: url(../images/main/blue-divider-left.gif) left no-repeat;
	background-color: #2d5b71;
	font-size: 0px;
}

.blue-divider-full-two-column, #blue-divider-full-two-column-customize {
	margin: 0px auto 29px auto;
	position: relative;
	clear: both;
	top: 39px;
	width: 760px;
	height: 6px;
	background: url(../images/main/blue-divider-left.gif) left no-repeat;
	background-color: #2d5b71;
	font-size: 0px;
}

#blue-divider-full-two-column-customize {
	margin: 0px auto 10px auto;
	top: 20px;
}

.blue-divider-right {
	float: right;
	width: 6px;
	height: 6px;
	background: url(../images/main/blue-divider-right.gif) top left no-repeat;
	font-size: 0px;
}

div.wrapper-main-content-left h2 {
	margin: 19px 0px 0px 0px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	left: 21px;
	width: 110px;
	height: 16px;
}

div.wrapper-main-content-left h2.title-customize-label {
	margin: 19px 0px 0px 0px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	left: 15px;
	width: 85px;
	height: 16px;
}

div.wrapper-main-content-left h2.title-embed-label {
	margin: 19px 0px 0px 0px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	left: 15px;
	width: 59px;
	height: 16px;
}

div.wrapper-main-content-left h2 span {
	padding: 0px;
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
}

div.wrapper-main-content-left h2 span#title-how-it-works {
	width: 110px;
	height: 16px;
	background: url(../images/main/title-how-it-works.gif) top left no-repeat;
}

div.wrapper-main-content-left h2 span#title-customize {
	width: 85px;
	height: 16px;
	background: url(../images/main/title-customize.gif) top left no-repeat;
}

div.wrapper-main-content-left h2 span#title-embed {
	width: 59px;
	height: 16px;
	background: url(../images/main/title-embed.gif) top left no-repeat;
}

div.wrapper-main-content-left h3 {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	left: 12px;
	width: 35px;
	height: 33px;
}

div.wrapper-main-content-left h3 span#number-2 {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 35px;
	height: 33px;
	background: url(../images/main/number-2.gif) top left no-repeat;
}

div.wrapper-main-content-left h3 span#number-3 {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 35px;
	height: 33px;
	background: url(../images/main/number-3.gif) top left no-repeat;
}

div.wrapper-main-content-right h2 {
	margin: 19px 0px 0px 0px;
	padding: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	left: 15px;
	width: 57px;
	height: 16px;
}

div.wrapper-main-content-right h2 span {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 57px;
	height: 16px;
	background: url(../images/main/title-search.gif) top left no-repeat;
}

div.wrapper-main-content-right h3 {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	left: 12px;
	width: 35px;
	height: 33px;
}

div.wrapper-main-content-right h3 span {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 35px;
	height: 33px;
	background: url(../images/main/number-1.gif) top left no-repeat;
}

div.wrapper-main-content-left p {
	margin: 0px 20px 0px 20px;
	padding-top: 12px;
}

div.wrapper-main-content-left p#content-left-top-text {
	padding-top: 4px;
	clear: both;
}

div.wrapper-main-content-right p#content-right-top-text {
	margin: 0px 20px 0px 20px;
	padding-top: 4px;
	clear: both;
}

div.wrapper-main-content-left p#content-bottom-text, div.wrapper-main-content-right p#content-bottom-text {
	color: #4b555a;
}

div.wrapper-main-content-left p#content-bottom-text {
	margin: 0px 20px 0px 20px;
}

div.wrapper-main-content-right p#content-bottom-text {
	margin: 12px 20px 0px 20px;
}

div.wrapper-main-content-right p#content-bottom-text a, div.wrapper-main-content-left p#content-bottom-text a {
	text-decoration: none;
	color: #acd4e6;
}

/* Gray Highlight Box */

#gray-highlight-box-how-it-works, #gray-highlight-box-palettes {
	margin: 20px 0px 0px 0px;
	position: relative;
	width: 365px;
	background-color: #363d41;
}

#gray-highlight-box-banners {
	margin: 20px 0px 0px 0px;
	position: relative;
	width: 760px;
	background-color: #363d41;
}

h4 {
	margin: 0px;
	padding: 4px 20px 0px 20px;
	font-weight: normal;
}

div#gray-highlight-box-palettes button.select-btn {
	margin: 6px 0px 0px 0px;
	position: relative;
	float: left;
	left: 19px;
	width: 57px;
	height: 24px;
	border: none;
	cursor: pointer;
	text-indent: -500px;
	background: url(../images/main/select-btn.gif) top left no-repeat;
}

div#gray-highlight-box-palettes button.select-btn:hover {
	background: url(../images/main/select-btn.gif) top left no-repeat;
	background-position: 0px -24px;
}

div#gray-highlight-box-palettes div.palette-colors {
	margin: 6px 0px 0px 0px;
	padding: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	left: 25px;
	width: 264px;
	height: 24px;
}

div#gray-highlight-box-palettes div.palette-colors span {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 264px;
	height: 24px;
}

div#gray-highlight-box-palettes div.palette-colors span#palette-beatport-blue {
	background: url(../images/main/palette-beatport-blue.gif) top left no-repeat;
}

div#gray-highlight-box-palettes div.palette-colors span#palette-beatport-green {
	background: url(../images/main/palette-beatport-green.gif) top left no-repeat;
}

div#gray-highlight-box-palettes div.palette-colors span#palette-white {
	background: url(../images/main/palette-white.gif) top left no-repeat;
}

div#gray-highlight-box-palettes div.palette-colors span#palette-black {
	background: url(../images/main/palette-black.gif) top left no-repeat;
}

.no-height {
}

.gray-highlight-box-top-left {
	float: left;
	width: 6px;
	height: 6px;
	background: url(../images/main/gray-highlight-box-left-top.gif) top left no-repeat;
	font-size: 0px;
}

.gray-highlight-box-top-right {
	float: right;
	width: 6px;
	height: 6px;
	background: url(../images/main/gray-highlight-box-right-top.gif) top left no-repeat;
	font-size: 0px;
}

.gray-highlight-box-bottom-left {
	margin: 10px 0px 0px 0px;
	float: left;
	width: 6px;
	height: 6px;
	background: url(../images/main/gray-highlight-box-left-bottom.gif) top left no-repeat;
	font-size: 0px;
}

.gray-highlight-box-bottom-right {
	margin: 10px 0px 0px 0px;
	float: right;
	width: 6px;
	height: 6px;
	background: url(../images/main/gray-highlight-box-right-bottom.gif) top left no-repeat;
	font-size: 0px;
}

.gray-highlight-box-hdivide {
	margin: 30px auto 6px auto;
	width: 327px;
	height: 2px;
	background-color: #293033;
}

#three-step-column-1 {
	margin: 12px 0px 0px 0px;
	padding-left: 20px;
	float: left;
	width: 18px;
	height: 114px;
	background: url(../images/main/gray-highlight-3-step-timeline.gif) top right no-repeat;
}

#three-step-column-2 {
	margin: 12px 0px 0px 0px;
	position: relative;
	float: left;
	width: 88px;
	height: 115px;
}

#three-step-column-2 #search {
	padding: 0px;
	position: absolute;
	top: 1px;
	left: 10px;
	color: #e4e5e5;
}

#three-step-column-2 #customize {
	padding: 0px;
	position: absolute;
	top: 49px;
	left: 10px;
	color: #e4e5e5;
}

#three-step-column-2 #embed {
	padding: 0px;
	position: absolute;
	top: 97px;
	left: 10px;
	color: #e4e5e5;
}

#three-step-column-2 #arrow-column {
	position: relative;
	float: right;
}

#three-step-column-2 #arrow-column #arrow-1 {
	width: 11px;
	height: 19px;
	background: url(../images/main/gray-highlight-3-step-arrow.gif) top left no-repeat;
}

#three-step-column-2 #arrow-column #arrow-2 {
	margin: 29px 0px 0px 0px;
	width: 11px;
	height: 19px;
	background: url(../images/main/gray-highlight-3-step-arrow.gif) top left no-repeat;
}

#three-step-column-2 #arrow-column #arrow-3 {
	margin: 29px 0px 0px 0px;
	width: 11px;
	height: 19px;
	background: url(../images/main/gray-highlight-3-step-arrow.gif) top left no-repeat;
}

#three-step-column-3 {
	margin: 4px 0px 0px 0px;
	padding-right: 20px;
	float: right;
	width: 208px;
}

#three-step-column-3 #step-1 {
	margin: 0px;
	padding: 0px;
}

#three-step-column-3 #step-2 {
	margin: 0px;
	padding: 16px 0px 0px 0px;
}

#three-step-column-3 #step-3 {
	margin: 0px;
	padding: 16px 0px 0px 0px;
}

div.banner-wrapper-single-column-top {
	margin: 8px auto 0px auto;
	position: relative;
	width: 728px;
}

div.banner-wrapper-single-column {
	margin: 30px auto 0px auto;
	position: relative;
	clear: both;
	width: 728px;
}

div.banner-wrapper-left-column {
	margin: 30px 0px 0px 16px;
	position: relative;
	float: left;
	width: 336px;
}

div.banner-wrapper-right-column {
	margin: 30px 16px 0px 0px;
	position: relative;
	float: right;
	width: 336px;
}

div.banner-wrapper-single-column-top hr, div.banner-wrapper-single-column hr, div.banner-wrapper-left-column hr {
	position: absolute;
	left: 3px;
	width: 327px;
	height: 2px;
	color: #293033;
	background-color: #293033;
	font-size: 0px;
}

div.banner-wrapper-right-column hr {
	position: absolute;
	right: 3px;
	width: 327px;
	height: 2px;
	color: #293033;
	background-color: #293033;
	font-size: 0px;
}

div#gray-highlight-box-banners h4 {
	padding: 13px 0px 0px 4px;
}

div#gray-highlight-box-banners div.banner-wrapper-right-column h4 {
	padding: 13px 0px 0px 7px;
}

div#gray-highlight-box-banners h4 span {
	font-size: 16px;
}

div#gray-highlight-box-banners button.embed-btn {
	margin: 0px;
	position: absolute;
	width: 89px;
	height: 23px;
	border: none;
	cursor: pointer;
	text-indent: -500px;
	background: url(../images/main/embed-btn.gif) top left no-repeat;
}

div#gray-highlight-box-banners div.banner-wrapper-single-column-top button.embed-btn, div#gray-highlight-box-banners div.banner-wrapper-single-column button.embed-btn,
div#gray-highlight-box-banners div.banner-wrapper-left-column button.embed-btn {
	top: 12px;
	left: 243px;
}

div#gray-highlight-box-banners div.banner-wrapper-right-column button.embed-btn {
	top: 12px;
	left: 246px;
}


/* Search */

/* This outer div is bigger and then the form comes in from that
because the field label was just getting pushed outside to hide it
and overflow: hidden needed to be turned on. */
div#searchform {
	margin: 10px 0px 0px 0px;
	left: 14px;
    position:relative;
	width: 338px;
	height: 50px;
	overflow: hidden;
}

div#searchform form#searchform {
	margin: 5px 0px 0px 0px;
	position: relative;
	left: 5px;
}

div#searchform input, div#searchform button {
	float: left;
	border: none;
}

input#searchform-field {
	padding: 8px 5px 0px 5px;
	width: 257px;
	height: 34px;
 	background: url(../images/main/search-bg.gif) top left no-repeat;
	font-size: 24px;
	line-height: 26px;
	vertical-align: top;
	color: #1f2425;
}

label.overlabel {
	padding: 0px 0px 0px 5px;
	position: absolute;
    top: 0px;
    left: 6px;
	font-size: 11px;
	color: #ffffff;
}

label.overlabel-apply {
    position:absolute;
    top: 8px;
    left: 6px;
    z-index: 1;
	font-size: 24px;
	line-height: 24px;
    color: #6a757a;
}

div#searchform button.btn {
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 3px;
	width: 58px;
	height: 44px;
	cursor: pointer;
	text-indent: -100px;
	background: url(../images/main/search-btn.gif) top left no-repeat;
}

div#searchform button.btn:hover {
	/*background: #fbc900 url(../images/main/search_bg.gif) no-repeat bottom right;*/
}

div#search-results-wrapper {
	margin: 0px;
	position: relative;
	left: 19px;
	width: 327px;
	font-size: 0px;
}

div#search-loading-wrapper {
	margin: 14px 0px 0px 0px;
	position: relative;
	width: 326px;
	height: 88px;
	background-color: #1f2425;
	font-size: 0px;
}


div#search-loadingBanners {
	margin: 0px 0px 0px 0px;
	background: url(../images/main/loader-1.gif) center no-repeat;
	width: 326px;
	height: 84px;
	font-size: 0px;
}
div#search-loading {
	margin: 0px;
	width: 326px;
	height: 84px;
	background: url(../images/main/ajax-loader.gif) center no-repeat;
	font-size: 0px;
}

div#search-no-results {
	width: 326px;
	height: 84px;
	text-align: center;
}

div#search-no-results span {
	font-size: 14px;
	color: #6a757a;
}


div#search-results {
	margin: 14px 0px 0px 0px;
	position: relative;
	font-size: 0px;
}

div.search-results-spacer {
	margin: 0px;
	width: 326px;
	height: 2px;
	font-size: 0px;
}


div#search-results-wrapper .result {
	margin: 0px 0px 0px 0px;
	padding: 3px 0px 0px 6px;
	width: 320px;
	height: 20px;
	background-color: #1f2425;
}

div#search-results .result span {
	font-size: 14px;
	color: #6a757a;
}

div.embed-code-window {
	margin: 0px;
	padding: 15px 15px 0px 0px;
	width: 327px;
	height: 295px;
}

div.embedHeader {
	line-height: 20px;
	vertical-align: center;
	padding: 15px 0px 15px 0px;
} 

div.search-results-bg-top {
	margin: 0px;
	width: 326px;
	height: 2px;
	background: url(../images/main/search-result-row-top.gif) top left no-repeat;
	font-size: 0px;
}

a.search-results-more {
	color: #4C555B;
}

div.search-results-bg-bottom {
	margin: 0px 0px 0px 0px;
	bottom: 0px;
	width: 326px;
	height: 2px;
	background: url(../images/main/search-result-row-bottom.gif) top left no-repeat;
	font-size: 0px;
}

div#search-toggle {
	margin: 17px 0px 0px 0px;
	left: 19px;
    position:relative;
	width: 147px;
	height: 24px;
}

div#search-toggle button#search-btn-artist {
	float: left;
	width: 73px;
	height: 24px;
	border: none;
	cursor: pointer;
	text-indent: -500px;
	background: url(../images/main/search-btn-artist.gif) top left no-repeat;
}

div#search-toggle button#search-btn-artist:hover {
	background: url(../images/main/search-btn-artist.gif) top left no-repeat;
	background-position: 0px -24px;
}

div#search-toggle button#search-btn-label {
	float: left;
	width: 74px;
	height: 24px;
	border: none;
	cursor: pointer;
	text-indent: -500px;
	background: url(../images/main/search-btn-label.gif) top left no-repeat;
}

div#search-toggle button#search-btn-label:hover {
	background: url(../images/main/search-btn-label.gif) top left no-repeat;
	background-position: 0px -24px;
}

.banner-spacer {
	font-size: 2px;
	line-height: 2px;
}

/* footer */
.footer {
	margin: 0px auto;
	padding-top: 17px;
	position: relative;
	width: 760px;
}

.footer span.copyright {
	padding: 0px 0px 0px 17px;
	float: left;
	vertical-align: top;
	color: #505a60;
}

.footer a {

	padding: 0px 0px 0px 21px;
	float: right;
	vertical-align: top;
	text-decoration: none;
	color: #add5e7;
}

#footer-logo h2 {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	width: 68px;
	height: 20px;
}

#footer-logo h2 span {
	padding: 0px;
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 68px;
	height: 20px;
	background: url(../images/main/footer-beatport-logo.gif) top left no-repeat;
}