body {
	font-family:"Andale Mono", AndaleMono, monospace;
	margin:0;
	background:#999;
	font-size:.9em;
}

a {
	cursor:pointer;
}

a:hover {
	color:blue;
}

img { }
img:hover { border-color: orange; }

input { padding: .2em 0 }

#landing {
	width:400px;
	overflow:hidden;
	background:black;
	color:#f0f0f0;
	margin:6em auto;
	padding:2em;
	border-radius:10px;
	text-align:center;
	line-height:1.33em;
	box-shadow: 0 8px 12px #404040;
}
#landing input.button { 
	background:transparent; 
	color:#f0f0f0;
	padding: .33em;
	border: 1px solid #f0f0f0;
	border-image: none;
	cursor:pointer;
}
#landing input.button:hover { 
	color: orange;
}
#landing input.button:active { 
	border: 1px solid orange;
	background:#ccc;
}
#landing img { 
	width:150px;
	margin-bottom:.33em;
	border:none;
	cursor: pointer;
}
#landing .connect img { width:220px; }

#soundcloud { 
	display:none;
	width:100%;
	overflow:auto;
	margin:0 auto;
	background:white;
}

#soundcloud p { font-size: 10pt; }

#soundcloud .details {
	float:left;
	width:35%;
	height:180px;
	overflow:auto;
	margin:.5em 1em 1em 3em;
}

#soundcloud .details p { font-size:8pt; }

#items {  
	min-width:1240px;
	overflow: auto;
}
#items .pagination a {
	float:right;
	margin-right:5em;
}

#info {
	position:fixed;
	width:100%;
	overflow:auto;
	margin:0 auto;
	padding:1em 0;
	color:white;
	background:black;
	font-size:.8em;
}

#info .current_user {
	letter-spacing:1px;
}

#info .track_user { margin-left: 1em; }
#info a { color: white; text-decoration: none; cursor: pointer; }
#info a:hover { color: orange; text-decoration: underline; }


#userinfo {
	float:left;
	margin-left:1em;	
}
#current_track {
	max-width:70%;
	float:right;
	margin-right:1.5em;
}

#main {
	width:100%;
	overflow: hidden;
	background-color: #F2F2F2;
	padding-top: 3em;
	border-bottom: 1px solid #888;
	min-height: 210px;
}

#player {
	float:left;
	width: 82%;
	overflow: hidden;
	margin: 20px 20px 20px 10px;
}
#artwork {
	width:160px;
	height:160px;
	float:left;
	margin: 20px 10px 20px 20px;
}
#artwork img { 
	width:160px;
	height:160px;
	border: 1px solid #f0f0f0;
	box-shadow: 0 4px 8px #888;
	cursor: pointer;
}

#list {
	min-width:96%;
	overflow: hidden;
	font-size: 10pt;
	padding: 1em 0 0 2em;
	min-height: 265px;
	margin: 0 auto;
}

#list a {
	display: block;
	float: left;
	margin: 1em .6em;
	box-shadow: 0 4px 10px #666;
	width: 104px;
	height: 104px;
}
#list img {
	width:104px;
	height:104px;
	border:none;
}
#list img:active { border:1px solid orange; }

.custom-tooltip {
	max-width:60%;
	position:absolute;
	z-index: 9999;
	padding:.5em 1em;
	color:white;
	background: rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 0 8px #404040;
	box-shadow: 0 0 8px #404040;
	font-size:.9em;
}

#users { 
	width:98%;
	overflow:auto;
	margin-left:.5em;
}

#users li {
	text-align:center;
	display:inline;
	list-style-type:none;
}

#users a {
	display:inline-block;
	padding:.67em;
	margin:.67em .67em .67em 0;
	color:black;
	text-decoration:none;
}

#users .userlist {
	float: left;
	width: 95%;
	overflow: auto;
	margin-left: 2.33em;
	padding: 0 1.67em 1em 0;
}
#users .pagination a { 
	float:right;
	margin-right:4em;
	background:none;
}
#users .pagination a:hover {
	color:blue;
}
.avatar { width:120px; margin-top:.5em }

.fav_count { 
	margin-left:8px; 
	font-size:.85em; 
	letter-spacing:.06em; 
}

.following { 
	border:1px solid orange; 
	border-radius:4px;
	background:#eaeaea; 
}
.following:hover { background:white; color:blue; }

.followers { border:1px solid blue; 
	border-radius:4px;
	background:#eaeaea;
}
.followers:hover { color:orange; background:white; }

#lightbox {
	display: none;
	position:absolute;
	top:5em;  	
	left:25%;  	
	max-width:600px;
	background:rgba(3,3,3,0.6);  	
	text-align:center;  	
	padding:1.33em;
	border-radius:8px;
	cursor:move;
}	  	  	
#lightbox img {  	
	box-shadow:0 0 25px #111;  	
 	-webkit-box-shadow:0 0 25px #111;  	
	-moz-box-shadow:0 0 25px #111;
	max-width:600px;
}

#bottom_nav { 
	width:95%;
	margin: 0 0 1em 2.75em;
}

#bottom_nav span { 
	margin: 0 1em 0 0;
	font-size: .9em;
	padding: .5em;
	cursor:pointer;
	text-transform:uppercase;
	letter-spacing:.15em;
}

footer { 
	display:none; 
	width:100%;
	background:black;
	padding:.1em 0;
}

.credits { width:100px; margin:0 auto; }
.credits img { width:100px; margin:0 auto; border:none; cursor: pointer; }

.hide { display:none; }
.active { background:white; font-weight:bolder; font-style:italic; }

.close {
	position: absolute;
	top:-.5em;
	right:-.5em;
	display:block;
	width:20px;
	height:20px;
	border:2px double #fff;
	border-radius:12px;
	font-size:14px;
	color:#fff;
	line-height:20px;
	text-align:center;
	text-decoration:none;
	background:#000;
}
.close:hover {
	color:orange;
	border-color:orange;
	text-decoration:none;
	background:#666;
}