/*		#####	Generic elements	#####		*/
ul			{	list-style-type:none;				}
a			{	text-decoration:none; outline:none;	}
div			{	margin:0; padding:0;	}
/*#pagewrap *	{	font-size:1em; }*/

/*		#####		Main layout		#####		*/

#pagewrap	{	display:flex; flex-direction:row;	}
#playerwrap, #metawrap
			{	flex:none;	}

/*	#####		Player			#####		*/

#audioplayer{	width:400px; height:50px; margin:10px 0px 10px 0px;
				border:solid 5px #555555;
			}
.mainplay	{	display:flex;	}
.playtime, #timeline, #tracklength
			{	flex:none;		}
#pButton	{	width:40px; height:20px; margin:15px 0px;
				background-repeat:no-repeat; background-position:center;
				border:none; outline:none;
			}
#pButton:hover
{	cursor:pointer; }
#timeline	{	width:300px; height:16px; margin:17px 0px 0px 0px;
				border-radius:8px; background:#555555;
			}
#playhead	{	width:14px; height:14px;
				border-radius:50%; margin-top:1px; background:#5db0e6;
			}
#tracklength{	height:16px; margin:17px 12px;
				font:bold 12px sans-serif;
			}
#progress	{	height:15px; width:30px; position:relative; top:-15px; left:30px;
				font:normal normal 11px 'sans serif'; text-align:right;
			}
.play		{	background:url('/final/audio/img/play2.png');	}
.pause		{	background:url('/final/audio/img/pause2.png');	}

/*	#####	Volume		#####	*/

#volcon		{	width:400px; height:30px; margin:0px; border:solid 5px #555555;
				display:flex;
			}
#mute, #vline, #vlevel
			{	flex:none;	}
#mute		{	width:30px; height:30px; margin:0px 5px;
				background-repeat:no-repeat; background-position:center; background-size:70%;
			}
#vline		{	width:312px; height:8px; margin:11px 0px 0px 0px;
				background:#555555;
			}
#vlevel		{	width:30px; height:14px; margin:8px 0px 0px 10px;
				text-align:right; font:normal bold 11px verdana, 'sans serif';
			}
#vhead		{	position:relative; width:12px; height:16px; top:-4px; margin-left:0px;
				border-radius:3px; background:#5db0e6;
			}
#mute:hover, #vline:hover, #vhead:hover, #timeline:hover
			{	cursor:pointer;	}
.sound		{	background:url('/final/audio/img/mute-off.jpg');	}
.muted		{	background:url('/final/audio/img/mute-on.jpg');	}			

/*	#####	Options		#####	*/

.controls				{	display:flex; flex-direction:row; justify-content:space-between;
							max-width:400px; padding:10px 50px;
						}
.controls button		{	flex:initial; width:100px; border:solid 1px #666666; border-radius:5px;
							color:#ddddee; background:#333333; font-variant:small-caps;
						}
.controls button:hover	{	color:#5db0e6; cursor:pointer; }
.controls button.live	{	color:#5db0e6; }
.controls button.dead	{	color:#ddddee; }
.bpad					{	padding:0px 10px; }
.strong					{	font-weight:bold; }

/*	#####	Playlist	#####	 */

#playlist		{	background:#555555; width:400px; padding:5px; }
#playlist li	{		}
#playlist .active a, #playlist .active a:hover
				{	color:#5db0e6;	}
#playlist li a	{	color:#ddddee; background:#333333; padding:2px 0px 2px 10px; display:block;			
					font:normal 12px 'sans serif';
				}
#playlist li a:hover
				{	color:#5db0e6;	}

/*	#####		List of lists	#####		*/

#lists			{	display:flex; flex-direction:row; justify-content:space-between; 
					max-width:400px; padding:10px; background:#555; }
#lists button	{	flex:initial;
					font:bold 14px 'sans serif'; background:#333; color:#eeeedd;
					padding:5px 10px; border:solid 1px #777; 
				}
#lists .live, #lists button:hover
				{	color:#5db0e6; cursor:pointer; }
.plists			{	width:400px; margin:10px 0px 10px 0px; text-align:center;	}

/*	#####	Metadata	#####	*/

#meta			{	position:relative;	margin-left:25px;	}
#innerflex		{	display:flex;	}
#meta #cover, #meta #heads	
				{	flex:none;		}
#meta #cover	{	width:135px; height:135px; border:none; margin:10px 0px; }
#heads			{	margin-left:25px; }
#meta #lyric	{	font:normal 11px verdana, 'sans serif';	color:#225;	}
#flink			{	font:normal bold 12px verdana, 'sans serif';
					text-decoration:none; color:#228;	
				}
#flink:hover	{	font:normal bold 12px verdana, 'sans serif'; color:#228; }
		
/*		#####	Misc	#####	*/

#inf			{	font:italic normal 12px verdana, 'sans serif'; color:#555; }
#emsg			{	font-weight:bold; color:#822; }
.linkline		{	font:bold 11px verdana, 'sans serif'; }
.linkline li	{	display:inline-block;   }
.linkline .here	{	font-style:italic; color:#555; }
.linkline a		{	text-decoration:none; font-variant:small-caps; color:#225; 
					border:solid 1px #225; border-radius:5px; padding:2px;
				}
.linkline a:hover
				{	color:#22f; }

/*		#####	Form  - upload meta page		#####	*/
#audioload *
{	font-size:12px; }
#audioload
{	margin-left:10px; }
#inputlists
{	display:flex; flex-direction:row; margin-bottom:10px; }
#inputlists ul
{	flex:none; line-height:1.2; }
#inputlists li
{	height:14px; margin-bottom:5px; }
#inputlists label, #lyrics label, #fselect label, #fselect
{	font:normal bold .75rem verdana, sans-serif; }
#values
{	margin-left:10px; }
#lyrics, #lyrics p, #fileupload, #showfiles, #upload
{	margin-bottom:10px; }
#upload
{	width:15rem; display:flex; flex-direction:row; justify-content:space-between; }
#upload button
{	width:7rem; border-radius:5%;
	font:bold .75rem verdana, sans-serif; text-align:center;
	background-color:#bbd; color:#225;
}
#upload button:hover, #upload button:focus
{	background-color:#fff; }
#fileupload p
{	margin-bottom:10px; }

/*		#####	Form - select track for meta-editing	#####	*/

#trackeditlist
{	max-width:38em; }
#trackeditlist li
{	line-height:15px; }
#trackeditlist li:nth-child(odd)
{	background-color:#ddf; }
#trackeditlist li:nth-child(even)
{	background-color:#eef; }
#trackeditlist .strong span
{	font-weight:bold; }
#listdiv .trackname, #listdiv .artist, #listdiv .box
{	display:inline-block; }
#listdiv .trackname, #listdiv .artist
{	width:18em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#listdiv .box
{	margin-right:5px; }

/*		#####	Form - upload metadata edits	#####	*/

/*		#####	Limited Display Devices			#####	*/

/*@media (min-width: 481px) and (max-width: 767px)*/
@media only screen and (orientation: portrait), (max-width: 800px)
{	
	#pagewrap		{	flex-direction:column;	}  
}