#select-playlist-container{
	height:100vh;
	width:100vw;
	display:none;
	transition:opacity 0.3s;
}


#select-playlist-title{
	xborder:1px solid grey;
	width:100vw;
	xtext-align:center;
	color:#a1a1a1; /* darkgrey:5a5a5a  */
	xfont-family: Big Noodle Titling Oblique, Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
	xfont-family:consolas, monospace;
	font-size:2.5em;
	font-weight:300;
	padding: 5px 0px 15px 30px;
	opacity:0;
	transition:opacity 0.5s;
	
}


/* playlist items are inserted inside this div */
#select-playlist {
	xborder:1px solid lime;
	padding: 0px 20px 0px 20px;
}


/* use common styles here, the specific styles should be in strip.css, tile.css etc */


.playlist-option{
	display: inline-block;
	position: relative;
	overflow:hidden;
	cursor:pointer;
	text-align: left;
	opacity:0;
	transition:opacity 0.5s;
	padding:0px;
	border:0px solid black;
}


.playlist-option-title{
	position:absolute;
	bottom:0;
	z-index:3;
	width:100%;
	font-size: 2em;
	line-height:1em;
	color: #b3b3b3;
	text-shadow: 0px 0px 3px black, 2px 2px 1px rgba(0, 0, 0, 0.5);
	transition: margin-bottom 0.1s, background-color 0.1s;
}


.playlist-option-subtitle {
	position:absolute;
	bottom:0;
	z-index:3;
	color:#a3a3a3 ;
	font-size: 1em;
	width:100%;
	padding:5px;
	margin-bottom: 5px;
	transition: margin-bottom 0.1s, opacity 0.1s;
	opacity:0;
}


.light-overlay{
	position:absolute;
	background-color:rgba(255, 255, 255,0.1);
	transition: background-color 0.1s;
	z-index:1;
}


.playlist-option > .dark-overlay{
	position:absolute;
	background-color:rgba(23, 28, 37, 0.5);
	transition: background-color 0.1s;
	z-index:2;
}


.bottom-fade{
	position:absolute;
	z-index:2;
}	


.playlist-option-image {

}

.playlist-option-image-small {
	position:absolute;
	width:100%;
	height:100%;
}


.playlist-option:hover .dark-overlay, .playlist-option:hover .light-overlay{
	background-color:rgba(23, 28, 37, 0.0);
}


.playlist-option:hover .playlist-option-title{
	margin-bottom:50px;
	background-color:black;
}


.playlist-option:hover .playlist-option-subtitle{
	opacity:1.0;
}
