html {
	background: #272727;
}

body {
	background: #272727;
	font: 13px/21px 'Lucida Grande', sans-serif;
	margin: 0;
	padding: 0;
}

#container {
	background: #373737 url('/images/bg-container.png') no-repeat top left;
	padding: 80px 0;
}

a { -webkit-transition: linear 0.15s color; }

/************************
          Start         
 ***********************/

#start form {
	margin: 0 auto;
	width: 800px;
	}
	
	#start form h1 {
		margin: 20px auto 0;
		width: 328px;
		}

		#start form h1 a {
			background: url('/images/logo-start.png') no-repeat;
			display: block;
			text-indent: -9999px;
			height: 93px;
			width: 328px;
		}
	
	#search {
		margin: 0 auto;
		width: 404px;
		overflow: hidden;
		}
		
		#start #search {
			background: #272727;
			margin: 25px auto;
			overflow: hidden;
			padding: 14px 14px 13px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}

		#search input[type="submit"] {
			border: 0;
			background: url('/images/input-submit.png') no-repeat;
			display: block;
			float: left;
			cursor: pointer;
			margin: 0;
			text-indent: -9999px;
			outline: none;
			font-size: 0;
			line-height: 0;
			height: 35px;
			width: 45px;
			position: relative;
			z-index: 52;
		}

		#search input[type="text"] {
			border: 0;
			background: url('/images/input-text.png') no-repeat top right;
			float: right;
			margin: 0;
			font: bold 13px/13px 'Lucida Grande', sans-serif;
			height: 13px;
			padding: 12px 40px 11px 5px;
			outline: none;
			width: 314px;
			position: relative;
			z-index: 52;
		}

		#search input[type="text"]:focus {
			background: url('/images/input-text-focus.png') no-repeat top right;
		}
		
		#loading {
			display: none;
			position: absolute;
			top: 242px;
			left: 50%;
			margin-left: 170px;
			z-index: 53;
		}
	
	#searchbox {
		position: absolute;
		top: 250px;
		left: 50%;
		margin-left: -400px;
		width: 798px;
		background: #272727;
		border-radius: 5px;
		display: none;
		padding: 1px 1px 11px;
		font: 11px/15px 'Lucida Grande', sans-serif;
		overflow: hidden;
		z-index: 51;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
		}
		
		#searchbox table {
			border: 0;
			border-spacing: 0;
			width: 100%;
			border-bottom: 1px solid #2f2f2f;
		}
		
		#searchbox th {
			background: #434343 url('/images/searchbox-title.png') repeat-x top;
			color: #222;
			padding: 18px 6px 4px;
			text-align: left;
			text-shadow: 0 1px 0 #4a4a4a;
		}
		
		#searchbox th:first-child {
			border-right: 1px solid #272727;
			-webkit-border-top-left-radius: 3px;
			width: 36%;
		}
		
		#searchbox th:last-child {
			border-left: 1px solid #272727;
			-webkit-border-top-right-radius: 3px;
			width: 36%;
		}
		
		#searchbox td {
			padding: 5px 6px;
			border-bottom: 1px solid #2f2f2f;
		}
		
		#searchbox td:first-child, #searchbox th:first-child { padding-left: 20px; }
		#searchbox td:last-child, #searchbox th:last-child { padding-right: 20px; }
		
		#searchbox tr:last-child td {
			border-bottom: 1px solid #222;
		}
		
		#searchbox .selected td { background: #222; }
		#searchbox .selected a { color: #ccc; }
		#searchbox .selected td:first-child a { text-decoration: underline; }
		#searchbox .no { color: #7C4D4D; }
		
		#searchbox a {
			color: #888;
			text-decoration: none;
			outline: none;
		}
		
		#searchbox a:hover, #searchbox a:focus {
			text-decoration: underline;
		}
		
		#searchbox h2 {
			color: #555;
			font: 20px/34px 'Helvetica Neue', Helvetica, sans-serif;
			margin: 0;
			-webkit-text-stroke: 1px transparent;
			text-shadow: none;
		}

		#searchbox .artists {
			float: left;
			width: 369px;
			padding: 20px 10px 10px 20px;
		}
		
		#searchbox .albums {
			float: right;
			width: 369px;
			padding: 20px 20px 10px 10px;
		}

		#searchbox ul {
			margin: 10px 0 0;
			padding: 0;
			list-style: none;
		}
		
		#searchbox li {
			background: #222 url('/images/bg-art.png') repeat-y left;
			border-top: 1px solid #272727;
		}
		
		#searchbox .artists a, #searchbox .albums a {
			background-repeat: no-repeat;
			background-position: center left;
			display: block;
			padding: 10px 8px 10px 76px;
		}
		
		#searchbox a:hover {
			color: #ccc;
		}

	#start #container p {	
		color: #aaa;
		margin: 0 auto;
		padding: 10px 0 0;
		font: 15px/20px 'Lucida Grande', sans-serif;
		text-shadow: 0 -1px 0 #000;
		width: 296px;
		}
		
		#start #container p span {
			color: #555;
		}

/************************
          Info          
 ***********************/

#content {	
	color: #555;
	text-shadow: 0 -1px 0 #000;
	margin: 0 auto;
	width: 800px;
	}
	
	#content a {
		color: #888;
		text-decoration: none;
	}
	
	#content a:hover {
		color: #ccc;
	}
	
	#content p {
		margin: 12px 0;
	}
	
	#info {
		overflow: hidden;
		}
		
		.play-button {
			display: block;
			position: absolute;
			right: 25px;
			top: 32px;
			height: 136px;
			width: 136px;
			text-indent: -9999px;
			background: url('/images/play-button.png') no-repeat top;
			z-index: 100;
		}
		
		.play-button:hover {
			background-position: bottom;
		}
		
		#info img {
			float: left;
			border: 1px solid #141414;
			border-width: 1px 0 1px 1px;
			margin-bottom: -1px;
			width: 199px;
		}
		
		#description {
			background: #141414;
			margin-left: 200px;
			padding: 25px;
			position: relative;
			min-height: 150px;
		}
		
		.lol #description {
			margin-left: 0;
		}
		
		#description {
			padding-right: 186px;
		}
		
		#description .images {
			overflow: hidden;
			margin-bottom: 0;
		}
		
		#description .images img {
			width: 54px;
			border: 0;
			margin: 1px 1px 0 0;
			opacity: 0.33;
		}
		
		#description .images a:hover img {
			opacity: 1;
		}
		
		h1 {
			color: #ccc;
			text-shadow: 0 1px 3px #000;
			font: normal 32px/34px 'Helvetica Neue', Helvetica, Arial, sans-serif;
			margin: 30px 0 20px;
			-webkit-text-stroke: 1px transparent;
		}
		
	#infobars {
		border: 1px solid #141414;
		border-top: 0;
		}
				
		#infobars h2 {
			background: #343434 url('/images/bg-infobar.png') repeat-x top;
			border-top: 1px solid #141414;
			margin: 0;
		}
				
		#infobars h2 a {
			background: url('/images/show.png') no-repeat center right;
			outline: none;
			font: normal 12px/12px 'Lucida Grande', sans-serif;
			display: block;
			padding: 13px 14px;
			border-top: 1px solid #555;
			border-bottom: 1px solid #303030;
		}
		
		#infobars .selected h2 a {
			background-image: url('/images/hide.png');
		}
		
		#infobars .loading h2 a {
			background-image: url('/images/loading.png');
		}
		
		#infobars .loading h2 {
			background-image: url('/images/bg-infobar-loading.gif');
		}

/************************
         Footer         
 ***********************/

#footer {
	text-shadow: 0 -1px 0 #000;
	color: #555;
	font: 11px/17px 'Lucida Grande', sans-serif;
	margin: 0 auto;
	padding: 50px 0;
	overflow: hidden;
	width: 800px;
	}
	
	#footer ul {
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
		}

		#footer a {
			color: #555;
		}
		
		#footer a:hover {
			color: #777;
		}
	
	#footer .one {
		background: #222;
		float: left;
		width: 228px;
		padding: 10px 16px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		}
	
		#footer .one h2 {
			margin: 0;
		}
		
		#footer .one a {
			background: url('/images/logo-stamp.png') no-repeat 0 8px;
			display: block;
			text-indent: -9999px;
			height: 44px;
			width: 120px;
		}

	#footer .two {	
		background: #222;
		float: left;
		margin: 0 10px;
		width: 228px;
		padding: 15px 16px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		}
	
		#footer .two span {
			display: none;
		}
	
	#footer .three {
		background: #222;
		float: right;
		width: 228px;
		padding: 15px 16px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		}	
		
		#footer .three ul li {
			float: left;
			width: 50%;
		}

	#footer form {
		margin: 0;
	}

	#footer #search {
		padding-top: 25px;
		clear: both;
	}

		#footer #search input[type="submit"] {
			background: url('/images/input-footer-submit.png') no-repeat;
		}

		#footer #search input[type="text"] {
			background: url('/images/input-footer-text.png') no-repeat top right;
			color: #888;
			font-weight: normal;
			text-shadow: 0 -1px 0 #333;
		}

			#footer #search input[type="text"]:focus {
				background: url('/images/input-footer-text-focus.png') no-repeat top right;
			}

#wip {
	background: url('/images/wip.png') no-repeat bottom left;
	position: absolute;
	top: 0;
	right: 0;
	width: 242px;
	height: 242px;
	text-indent: -9999px;
	z-index: 50;
}

.autocomplete {
	font: 11px/13px 'Lucida Grande', sans-serif;
	background: #313131;
	color: #555;
	border: 1px solid #141414;
	border-top: 0;
	position: relative;
	top: -4px;
	overflow: auto;
	text-shadow: 0 -1px 0 #222;
	max-height: 400px;
	cursor: pointer;
}

.autocomplete div:last-child {
	border-bottom: 3px solid #358300;
}

.autocomplete div {
	padding: 7px 5px;
}

.autocomplete .selected {
	background: #373737;
	color: #888;
}

#settings {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9999;
	}

	#settings .button {
		position: relative;
		top: 0;
		left: 50%;
		margin-left: 300px;
		width: 100px;
		height: 25px;
		background: url('/images/settings.png') no-repeat;
		cursor: pointer;
	}
	
	#settings .drawer {
		background: #272727;
		-webkit-box-shadow: 0 1px 0 #000;
		}
		
		#settings .drawer ul {
			margin: 0 auto;
			width: 810px;
			list-style: none;
			padding: 45px 0;
			overflow: hidden;
		}
		
		#settings .drawer li {
			float: left;
			padding: 5px;
			width: 395px;
		}
		
		#settings .drawer a {
			background: #272727 url('/images/checkbox-off.png') no-repeat 10px 10px;
			display: block;
			border: 1px solid #222;
			padding: 0 10px 0 35px;
			text-decoration: none;
			color: #888;
			font-size: 11px;
			line-height: 35px;
			text-shadow: 0 -1px 0 #000;
			-webkit-transition: linear 0.15s background-color;
		}
		
		#settings .drawer a.checked {
			background: #272727 url('/images/checkbox-on.png') no-repeat 10px 10px;
			color: #29A11A;
		}

			#settings .drawer a:hover {
				background-color: #222;
			}
			
			#settings .drawer a.loading {
				-webkit-animation-name: pulse;
				-webkit-animation-duration: 0.5s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-direction: alternate;
			}

/************************
          Stuff         
 ***********************/

.lyrics {
	background: #141414;
	border-top: 1px solid #141414;
	}

	.lyrics p {
		text-align: center;
		font: 15px/23px Georgia, serif;
		margin: 0;
		color: #C6C6B2;
		padding: 25px;
	}
	
	.lyrics p.source {
		text-align: center;
		padding: 25px 0 0;
		margin: 0;
	}
	
	.lyrics ul {
		background: #272727;
		text-align: center;
		padding: 15px !important;
		overflow: hidden;
		margin: 0;
	}
	
	.lyrics ul li {
		color: #666;
		font-size: 11px;
		display: inline;
		margin: 0 10px;
	}

.description {
	background: #141414;
	border-top: 1px solid #141414;
	padding: 25px 175px;
	text-align: justify;
	}
	
	.description p.source {
		font-size: 12px;
		text-align: center;
		padding: 25px 0 0;
		margin: 0;
		text-align: center;
	}
	
	#infobars .description a {
		color: #91959B;
		text-decoration: underline;
	}
	
	.description p {
		font: 15px/25px Georgia, serif;
		margin: 0;
		color: #C6C6B2;
	}
			
#infobars ul {
	color: #888;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid #141414;
	}

	#infobars ul li.odd {
		background-color: #373737;
	}

	#infobars ul li.even {
	background-color: #313131;
	}
	
	#infobars .tags {
		background: #313131;
		padding: 15px;
		text-align: center;
	}
	
	.tracks li, .similar li {
		overflow: hidden;
	}
	
	.tracks span {
		display: block;
		color: #555;
		float: left;
		text-shadow: 0 -1px 0 #222;
		width: 50px;
		padding: 8px 0px;
		text-align: center;
	}
	
	.tracks a.name {
		display: block;
		float: left;
		padding: 8px 8px 8px 0;
		width: 500px;
	}
	
	.tracks a.play {
		background: url('/images/play.png') no-repeat center left;
		display: block;
		float: right;
		height: 37px;
		width: 15px;
		margin-right: 15px;
		text-indent: -9999px;
	}
	
	#infobars .discography {
		background: #313131;
		overflow: hidden;
		padding: 20px 48px;
	}
	
	.discography li {
		float: left;
		width: 234px;
	}
	
	.discography img {
		border: 1px solid #141414;
		margin-bottom: 5px;
		width: 64px;
		height: 64px;
	}
	
	.discography a {
		display: block;
		text-align: center;
		padding: 10px;
	}
	
	.discography a span {
		display: block;
		font-size: 11px;
	}
	
	#infobars .similar li {
		background-image: url('/images/bg-art.png');
		background-repeat: repeat-y;
		background-position: left;
	}
	
	.similar a.artist {
		background-repeat: no-repeat;
		background-position: center left;
		display: block;
		float: left;
		padding: 10px 8px 10px 76px;
		width: 600px;
	}
	
	.similar a.artist span:after {
		content: " (Last.FM)";
		color: #555;
		text-shadow: 0 -1px 0 #222;
	}
	
	.similar a.play {
		background: url('/images/play.png') no-repeat center left;
		display: block;
		float: right;
		height: 41px;
		width: 15px;
		margin-right: 15px;
		text-indent: -9999px;
	}

	.tags li {
		display: inline;
		line-height: 20px;
		margin: 5px 10px;
	}
	
	.tags li.first {
		font-size: 11px;
		line-height: 13px;
		display: block;
	}
	
	.videos {
		background: #313131;
		border-top: 1px solid #141414;
		padding: 15px 0 15px 15px;
		overflow: hidden;
		}
		
		.videos .video {
			width: 246px;
			margin-right: 15px;
			float: left;
		}
	
	.share li {
		padding: 15px;
		font-size: 11px;
		line-height: 30px;
		text-align: center;
	}

	.share .facebook {
		background: url('/images/facebook.png') no-repeat bottom left;
		display: inline-block;
		width: 130px;
		margin-left: 10px;
		text-indent: -9999px;
	}
	
	.share .twitter {
		background: url('/images/twitter.png') no-repeat bottom left;
		display: inline-block;
		width: 130px;
		margin-left: 10px;
		text-indent: -9999px;
	}

	.share .short {
		margin-left: 10px;
	}

/************************
         Goodies        
 ***********************/

#goodies {
	background: #141414;
	text-shadow: none;
	}

	#goodies .agent {
		padding: 46px 46px;
		overflow: hidden;
		}

		#goodies .agent p {
			line-height: 23px;
			margin: 20px 0;
			width: 320px;
		}

		#goodies .agent p.first {
			color: #888;
			font: 20px/34px 'Helvetica Neue', Helvetica, sans-serif;
			margin: 25px 0;
			-webkit-text-stroke: 1px transparent;
		}
	
		#goodies .agent .images {
			float: right;
			padding: 15px 0;
		}
	
		#goodies .agent img {
			display: block;
		}

	#goodies .mobile {
		background: url('/images/iphone.png') no-repeat 80px -65px;
		padding: 45px 46px 45px 400px;
		border-top: 1px solid #333;
	}

	#goodies .opensearch {
		background: url('/images/opensearch.png') no-repeat 417px 40px;
		padding: 45px 400px 45px 46px;
		border-top: 1px solid #333;
	}

#download {
	background: #141414;
	padding: 46px;
	text-shadow: none;
	}

	#download h2 {
		color: #888;
		font: 20px/26px 'Helvetica Neue', Helvetica, sans-serif;
		margin: 35px 0 0;
		-webkit-text-stroke: 1px transparent;
	}

	#download p {
		width: 320px;
	}

	#download.mac .screenshot {
		padding: 20px 15px 0;
		background: #222;
		margin: 20px 0;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}

	#download.windows .screenshot {
		padding: 20px;
		background: #222;
		margin: 20px 0;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}

/************************
          About         
 ***********************/

#about {
	border: 1px solid #141414;
	background: #141414;
	overflow: hidden;
	}
	
	#about img {
		float: right;
	}
	
	#about .text {
		color: #888;
		font: 20px/34px 'Helvetica Neue', Helvetica, sans-serif;
		padding: 45px 45px;
		width: 320px;
		-webkit-text-stroke: 1px transparent;
		text-shadow: none;
	}
	
	#about .text em {
		font-style: normal;
		color: #B1C54E;
		padding: 0px 3px;
		border: 1px solid #1F291E;
		-webkit-border-radius: 3px;
	}
	
	#slideshow {
		float: right;
		width: 375px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

#more {
	padding-top: 40px;
	overflow: hidden;
	}

	#more .top {
		background: #222;
		padding: 30px;
		margin-bottom: 40px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	#more .top h2 {
		font: 20px/26px 'Helvetica Neue', Helvetica, sans-serif;
		margin: 0 0 20px;
		-webkit-text-stroke: 1px transparent;
	}
	
	#more .top ul {
		list-style: 0;
		margin: 0;
		padding: 20px 10px;
		list-style: none;
		overflow: hidden;
	}
	
	#more .top li {
		float: left;
	}
	
	#more .top li a {
		background-repeat: no-repeat;
		background-position: center center;
		display: block;
		text-indent: -9999px;
		height: 58px;
		width: 240px;
	}
	
	#more .top li a.lyricsfly {
		background-image: url('/images/lyricsfly.png');
	}
	
	#more .top li a.spotify {
		background-image: url('/images/spotify.png');
	}
	
	#more .top li a.lastfm {
		background-image: url('/images/lastfm.png');
	}
	
	#more .right {
		background: #222;
		min-height: 515px;
		float: right;
		width: 395px;
		padding: 0 0 15px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	#more .right h2 {
		color: #888;
		font: 20px/26px 'Helvetica Neue', Helvetica, sans-serif;
		margin: 35px 30px 0px;
		-webkit-text-stroke: 1px transparent;
	}
	
	#more .right p {
		margin: 15px 30px;
	}

	#more .left {
		background: #222;
		float: left;
		width: 395px;
		min-height: 530px;
		padding: 0;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	#more .left ul {
		list-style: none;
		padding: 0 1px 15px;
		margin: 0;
	}
	
	#more .left li.odd {
		background: #282828;
	}
	
	#more .left blockquote {
		color: #C6C6B2;
		font: italic 20px/26px Georgia, serif;
		padding: 35px 30px 5px;
		margin: 0;
		-webkit-text-stroke: 1px transparent;
	}
	
	#more .left p {
		margin: 0 0 30px 50px;
	}
	
	#more .left ul a {
		display: block;
		padding: 6px 29px;
	}
	
	#more .left a em {
		color: #555 !important;
		font-style: normal;
		margin-right: 15px;
	}

#contact {
	background: #141414;
	border: 1px solid #141414;
	}
	
	#contact .text {
		color: #888;
		font: 20px/34px 'Helvetica Neue', Helvetica, sans-serif;
		padding: 45px 45px 35px 45px;
		-webkit-text-stroke: 1px transparent;
		text-shadow: none;
	}
	
	#contact .text a {
		border-bottom: 1px solid #444;
	}
	
	#contact ul {
		padding: 0 0px 50px 45px;
		overflow: hidden;
		list-style: none;
		margin: 0;
	}
	
	#contact li {
		background: #1c1c1c;
		float: left;
		margin: 0 10px 10px 0;
		padding: 15px;
		width: 319px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}
	
	#contact .small {
		color: #333;
		font-size: 11px;
		font-style: italic;
		margin: 15px 45px 35px;
	}

@-webkit-keyframes pulse {
	from {
		background-color: #222;
	}
	to {
		background-color: #272727;
	}
}