@import "alpha_gradient";

.artist-info {
	width: 100%;
	float: left;
	margin: 0 0 25px 0;
	clear: both;
	
	.pic {
		float: left;
		width: 250px;
		margin: 25px 0;

		img {
			margin-left: 25px;
		}
	}
	
	.name {
		margin: 25px 0 0 300px;
	}

	.info {
		margin: 0 17px 25px 300px;
	}
}

.albums {
	width: 100%;
	float: left;
	clear: both;
	
	.album {
		clear: both;
		
		.pic {
			float: left;
			width: 250px;
			
			> * {
				margin-left: 25px;
			}
			
			img {
				width: 248px;
				height: 248px;
				border: #d0d0d0 1px solid;
			}
			
			.add-album-button-container {
				position: relative;
				margin: 10px -50px 0 0;
				text-align: center;
			}
		}
		
		.name {
			display: block;
			margin: 0 0 10px 300px;
		}
		
		.tracklist {
			margin: 0 17px 30px 275px;
			
			ul {
				li {
					display: block;
					height: 26px;
					position: relative;
					padding-left: 25px;
					
					&:hover {
						cursor: pointer;
						
						.track-container {
							background-color: #fafafa;
							.fade {
								@include alpha_gradient(250, 250, 250, "fafafa");
							}
						}
					}
					
					&:first-child {
						border-top: none;
					}
					
					&.now {
						.track-container {
							background-color: #e0f0fa;
							.fade {
								@include alpha_gradient(224, 240, 250, "e0f0fa");
							}
						}
					}
					
					.add-track {
						display: none;
						float: left;
						padding: 1px 5px;
						margin: 3px 0 0 -22px;
					}
					
					.track-container {
						height: 20px;
						padding: 5px 0 0 0;
						border-top: #e0e0e0 1px solid;
						
						> * {
							position: absolute;
						}
						
						.fade {
							right: 0px;
							top: 6px;
							width: 80px;
							height: 16px;
							z-index: 20;
							@include alpha_gradient(255, 255, 255, "ffffff");
						}
						
						.index {
							left: 22px;
							top: 9px;
							display: block;
							width: 15px;
							text-align: right;
							font-size: 10px;
							color: #505050;
						}
						
						.trackname {
							left: 40px;
							top: 6px;
							width: 90%;
							height: 16px;
							overflow: hidden;
							z-index: 10;
						}
						
						.length {
							right: 0px;
							top: 6px;
							height: 16px;
							z-index: 30;
						}
					}
				}
			}
		}
	}
}