@tBheight: 60px;
@sLheight: @tBheight * 0.5;
@tBmLeft: 20px;
@tbColor: rgba(0, 150, 136,0.97);
@playBarColor: @tbColor;
@playBarHeight: 120px;
@menuWidth: 350px;
@menuTransition: 0.2s margin-left ease;
@menuTransitionInner: 0.2s left ease;

@import "inc/_prefixer.less";
@import "inc/_material.less";
@import "inc/roboto.less";

body{
	font-family: 'Roboto';
	color: #333;
	background-color: #EEE;
	z-index: 3;
	margin: 0;
}

body>div.inner>#content{
	padding-top: (@tBheight + 20px);
	padding-bottom: @playBarHeight;
	margin-left: @tBmLeft;
	margin-right: @tBmLeft;
	overflow-x: hidden;
}

body>div.inner{
	position: absolute;
	top: -20px;
	background-color: #EEE;
	left: 0;
	right: 0;
	min-height: 100%;
	padding-top: @tBheight + /*@sLheight+*/ 20px;
	.z-depth(2);
	.transition(@menuTransitionInner);
	z-index: 200;
}

body.menu-open>div.inner{
	left: @menuWidth;
	.transition(@menuTransitionInner);
}

body.menu-open #playBar{
	left: @menuWidth;
	.transition(@menuTransitionInner);
}

body.menu-open{
	#topBar{
		margin-left: @menuWidth;
		.transition(@menuTransition);
	}

	margin-left: @menuWidth + @tBmLeft;
	.transition(@menuTransition);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

body>.toast-message{
	position: fixed;
	bottom: 20vh;
	background-color: rgba(0,0,0, 0.67);
	padding: 7px 20px 7px 20px;
	color: #FFF;
	min-width: 20px;
	@radius: 8px;
	border-radius: @radius;
	z-index: 999;

	left: 50%;
	transform: translateX(-50%);
	animation: fadein 500ms;
}

body>.toast-message.fadeout{
	animation: fadeout 500ms;
}

#topBar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: @tBheight;
	background-color: @tbColor;
	z-index: 300;

	.left{
		color: #FFF;
		float: left;
		width: 50%;
		height: @tBheight;

		&:after{
			display: block;
			content: "";
			clear: both;
		}

		@fsize: 1.4em;

		span.menu-icon{
			float: left;
			display: block;
			font-size: @fsize*.95;
			height: @tBheight;
			line-height: @tBheight;
			margin-left: @tBmLeft;
			cursor: pointer;
		}

		label.pname{
			float: right;
			display: block;
			color: #FFF;
			height: 60px;
			line-height: 60px;
			width: auto;
			text-align: left;
			margin-left: 20px;
			font-family: Roboto;
		}
	}
}

/*#secondLine{
	position: absolute;
	background-color: @tbColor;
	top: @tBheight + 20px;
	left: 0;
	right: 0;
	height: @sLheight;
	z-index: 2;
}*/

body, #topBar/*, #secondLine, #menu*/{
	.transition(@menuTransition);
}

#menu{
	position: fixed;
	margin-left: -@menuWidth;
	left: 0px;
	top: 0;
	bottom: 0px;
	width: @menuWidth;
	z-index: 100;
	overflow: hidden;
	.transition(@menuTransition);

	div.hero{
		position: relative;
		height: 150px;
		width: 100%;
		overflow: hidden;

		div.image{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			background-size: cover;
			background-position: auto 100%;
			background-repeat: no-repeat;
		}

		div.overlay{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.4);
			z-index: 2;
		}

		div.info-box{
			position: absolute;
			bottom: 20px;
			left: 20px;
			right: 20px;
			color: #FFF;
			z-index: 3;

			label{
				display: block;
			}

			label.room{
				font-weight: bold;
				font-size: 1.3em;
			}
		}

		div.image.hero-music{
			background-image: url('/img/hero/girl-music.jpg');
		}

		div.image.hero-bedroom{
			background-image: url('/img/hero/bedroom.jpg');
		}

		div.image.hero-bathroom{
			background-image: url('/img/hero/bathroom.jpg');
		}

		div.image.hero-diningroom{
			background-image: url('/img/hero/diningroom.jpg');
		}

		div.image.hero-hall{
			background-image: url('/img/hero/hall.jpg');
		}

		div.image.hero-hallway{
			background-image: url('/img/hero/hallway.jpg');
		}

		div.image.hero-kitchen{
			background-image: url('/img/hero/kitchen.jpg');
		}

		div.image.hero-livingroom{
			background-image: url('/img/hero/livingroom.jpg');
		}

		div.image.hero-mediaroom{
			background-image: url('/img/hero/mediaroom.jpg');
		}

		div.image.hero-patio{
			background-image: url('/img/hero/patio.jpg');
		}

		div.image.hero-playroom{
			background-image: url('/img/hero/playroom.jpg');
		}

		div.image.hero-pool{
			background-image: url('/img/hero/pool.jpg');
		}

		div.image.hero-tvroom{
			background-image: url('/img/hero/tvroom.jpg');
		}
	}

	div.menu-elements{
		margin-top: 20px;
		div.entry{
			cursor: pointer;
			color: #666;
			@height: 45px;
			height: @height;
			width: 100%;
			font-size: 1.25em;
			@margin: 30px;
			padding-left: @margin;
			padding-right: @margin;

			span, label{
				cursor: inherit;
				display: block;
				float: left;
				height: @height;
				line-height: @height;
			}
			span{
				font-size: 1.2em;
				width: 35px;
				text-align: center;
			}
			label{
				margin-left: @margin;
			}

			label:after{
				display: block;
				content:"";
				clear: both;
			}
		}

		div.entry.active{
			background-color: #DDD;
		}
	}
}

#menu.menu-open{
	margin-left: 0;
	.transition(@menuTransition);
}

#playBar{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: @playBarHeight;
	background-color: @playBarColor;
	.transition(@menuTransitionInner);
	z-index: 300;

	div.songInfo{
		@songInfoW: 490px;
		@albumW: 80px;
		position: absolute;
		color: #FFF;
		top: 20px;
		left: @tBmLeft;
		width: @songInfoW;
		height: 80px;

		div.albumImage{
			position: relative;
			float: left;
			width: @albumW;
			height: @albumW;
			background-size: 100% 100%;

			img{
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				width: 100%;
				height: 100%;
			}
		}

		div.textBox{
			@tboxMLeft: 20px;
			margin-left: 100px;
			height: 100%;

			div.songTitle{
				font-size: 1.3em;
				height: 30px;
				line-height: 30px;
				margin-top: 10px;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: @songInfoW - @albumW - @tboxMLeft;
				overflow: hidden;
			}
			div.artistName{
				color: #CCC;
				margin-top: 5px;
				font-size: 0.9em;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 390px;
				overflow: hidden;
			}

			&:after{
				display: block;
				content: "";
				clear: both;
			}
		}
	}

	div.seekbar{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 5px;

		div.bar{
			position: absolute;
			left: 0;
			width: 40%;
			height: 100%;
			background-color: #00796b;
			transition: width 1.25s linear;
		}
	}

	div#muteButton{
		cursor: pointer;
		position: absolute;
		top: 50%;
		left: 75%;
		width: 25px;
		color: #FFF;
		font-size: 1.3em;
		margin-top: -20px;
		line-height: 40px;
		text-align: center;
		margin-left: -150px;
		height: 40px;
	}

	div.volumebar{
		position: absolute;
		top: 50%;
		left: 75%;
		margin-left: -100px;
		width: 200px;
		background-color: rgba(255,255,255,0.2);
		height: 20px;
		margin-top: -10px;

		div.inner{
			background-color: rgba(255,255,255,0.6);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 0;
		}
	}

	div.vbarIndicator{
		position: absolute;
		color: #FFF;
		top: 50%;
		left: 75%;
		margin-top: -10px;
		margin-left: 120px;
		width: 40px;
		text-align: center;
		height: 20px;
	}

	div.controls{
		position: absolute;
		top: 40px;
		left: 50%;
		margin-left: -106px;
		height: 40px;
		overflow: hidden;
		width: 212px;
		color: #FFF;
		font-size: 2.5em;

		span{
			cursor: pointer;
			display: block;
			float: left;
			margin-left: 10px;
		}

		span.fa.fa-play, span.fa.fa-pause{
			margin-left: 60px;
			margin-right: 50px;
			width: 35px;
		}
	}

	div.time{
		position: absolute;
		color: #FFF;
		right: @tBmLeft;
		top: 50%;
		height: 40px;
		line-height: 40px;
		margin-top: -20px;
	}
}

div.home,div.soundcloud{
	div.streams{
		&:after{
			display: block;
			content: "";
			clear: both;
		}

		div.stream-el{
			position: relative;
			float: left;
			@width: 150px;
			overflow: hidden;
			width: @width;
			height: 200px;
			margin-right: 2em;

			div.image{
				position: relative;
				display: block;
				width: @width;
				height: @width;
				top: 0;
				left: 0;
				margin: 0;
				overflow: hidden;

				img{
					position: absolute;
					width: @width;
					height: @width;
					z-index: 1;
				}
				div.overlay{
					cursor: pointer;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;
					background-color: rgba(0,0,0,0.65);
					opacity: 0;
					transition: opacity 0.5s ease;
					div.playIcon{
						color: #FFF;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-left: -12px;
						margin-top: -20px;
						height: 40px;
						width: 24px;
						line-height: 40px;
						font-size: 30px;
						overflow: hidden;
					}
				}
			}

			label{
				display: block;
				width: @width;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
		}

		div.stream-el:hover{
			div.image{
				div.overlay{
					opacity: 1;
				}
			}
		}
	}
}

div.soundcloud{
	div.section div.title{
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: 1em;
	}

	div.section{
		margin-bottom: 3em;

		input.search{
			@bradius: 4px;
			border: 1px solid #CCC;
			border-radius: @bradius @bradius @bradius @bradius;
			padding-left: 8px;
			padding-right: 8px;
			width: 100%;
			height: 3em;
			box-sizing: border-box;
		}
	}
}

div.queue{
	padding-top: 1em;

	div.queue-el{
		cursor: pointer;
		width: 80%;
		margin-bottom: 10px;
		&::after{
			content: '';
			display: block;
			clear: both;
		}
		
		&.playing{
			background-color: fade(@tbColor,60%);
		}	
		div.image {
			float: left;
			@size: 80px;
			width: @size;
			height: @size;
			overflow: hidden;
			background-size: cover;
			
			div.image-inner{
				position: relative;
				display: block;
				width: 500px;
				height: @size;
				
				img.cover {
					position: absolute;
					left: 50%;
					display: block;
					height: 100%;
					margin-left: -250px;
				}
			}
		}
		
		div.title-artist{
			display: block;
			float: left;
			margin-left: 20px;
			
			p.title{
				display: block;
				font-size: 1.2em;
				margin-top: 0.4em;
				margin-bottom: 0.4em;
			}
			p.artist{
				display: block;
				font-size: 0.8em;
				color: #777;
				margin-top: 0;
			}
		}
	}
}
