/*

	PANELS STYLES

*/


/*   LEFTHAND PANELS   */

.l_panel
{
	margin-bottom: 10px;
	width: 206px;
}

	.l_panel_header
	{
		width: 206px;
		height: 30px;
		background: #ffaa00 url(../images/panel_header.png) no-repeat;
	}

		.l_panel_title
		{
			position: relative;
			float: left;
			top: 7px;
			left: 14px;
			width: 130px;
			height: 20px;
			font-weight: bold;
			color: #333333;
			white-space: nowrap;
			overflow: hidden;
			cursor: default;
		}

		.l_panel_btn
		{
			position: relative;
			float: right;
			top: 5px;
			right: 20px;
			width: 20px;
			height: 20px;
			background: #000000 url(../images/panel_toggle.png) no-repeat 0px -20px;
			cursor: pointer;
		}

		.l_panel_btn_opened
		{
			position: relative;
			float: right;
			top: 5px;
			right: 20px;
			width: 20px;
			height: 20px;
			background: #000000 url(../images/panel_toggle.png) no-repeat 0px 0px;
			cursor: pointer;
		}

	.l_panel_body
	{
		width: 206px;
		background: #ffffff url(../images/panel_l_bg.png) repeat-y;
	}

		.l_panel_body_text
		{
			position: relative;
			top: 5px;
			left: 5px;
			width: 190px;
		}

			.l_panel_item
			{
				width: 150px;
				padding: 0px 0px 0px 5px;
				white-space: nowrap;
				overflow: hidden;
			}

				.l_panel_item a
				{
					padding: 2px 6px 2px 6px;
					color: #555555;
					text-decoration: underline;
				}

				.l_panel_item a:hover
				{
					padding: 2px 6px 2px 6px;
					background: #333333;
					color: #ffffff;
					text-decoration: none;
				}

				.l_panel_item_btn
				{
					float: right;
				}

			.l_panel_comment
			{
				margin: 0;
				padding: 0;
				width: 190px;
				background: #000000;
				font-size: 10px;
				list-style: none;
				overflow: hidden;
			}

				.l_panel_comment li
				{
					margin: 0;
					padding: 0;
					border-bottom: 1px #333333 dotted;
					list-style: none;
				}

					.l_panel_comment li a
					{
						display: block;
						padding: 4px 0px 4px 4px;
						color: #0099ff;
						text-decoration: none;
					}

					.l_panel_comment li a:hover
					{
						background: #111111;
						color: #ffaa00;
					}


			.l_panel_thumb
			{
				border: 2px #ffffff solid;
			}

			.l_panel_thumb-over
			{
				border: 2px #ffaa00 solid;
			}

			.l_panel_thumb-down
			{
				border: 2px #0099ff solid;
			}

	.l_panel h1
	{
		margin: 0;
		padding: 0;
		width: 200px;
		border-top: 1px #dddddd solid;
		background: #ffaa00;
		font: normal 11px Arial;
		color: #ffffff;
	}

	.l_panel_footer
	{
		width: 206px;
		height: 25px;
		background: #ffaa00 url(../images/panel_footer.png) no-repeat;
	}



/*   RIGHT HAND PANELS   */

.r_panel
{
	position: relative;
	top: 0px;
	left: 0px;
	margin-bottom: 10px;
	width: 250px;
}

	.r_panel_header
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 250px;
		height: 30px;
		background: #ffaa00 url(../images/playlist_header.png) no-repeat;
	}

		.r_panel_title
		{
			position: relative;
			float: left;
			top: 7px;
			left: 14px;
			width: 120px;
			height: 20px;
			font-weight: bold;
			color: #333333;
			white-space: nowrap;
			overflow: hidden;
			cursor: pointer;
		}

		.r_panel_btn
		{
			position: relative;
			float: right;
			top: 8px;
			right: 20px;
			margin-left: 5px;
			width: 16px;
			height: 16px;
			background: #000000 url(../images/playlist_toggle.gif) no-repeat 0px -16px;
			cursor: pointer;
		}

		.r_panel_btn_opened
		{
			position: relative;
			float: right;
			top: 8px;
			right: 20px;
			margin-left: 5px;
			width: 16px;
			height: 16px;
			background: #000000 url(../images/playlist_toggle.gif) no-repeat 0px 0px;
			cursor: pointer;
		}

	.r_panel_body
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 250px;
		background: #ffffff url(../images/panel_r_bg.png) repeat-y;
		overflow: hidden;
	}

		.r_panel_body_text
		{
			position: relative;
			top: 5px;
			left: 5px;
			width: 230px;
		}

	.r_panel_footer
	{
		width: 250px;
		height: 25px;
		background: #ffaa00 url(../images/playlist_footer.png) no-repeat;
	}



	/*   PLAYLIST PANEL ITEMS   */

		.pl_panel_modes
		{
			position: relative;
			top: 0px;
			left: 0px;
			width: 250px;
			height: 20px;			text-align: center;
		}

			.pl_panel_modes a
			{
				color: #888888;
				text-decoration: none;
			}

			.pl_panel_modes a:hover
			{
				color: #666666;
			}

			.pl_panel_modes
			{
				height: 20px;				text-align: center;
			}

		.pl_item_container
		{
			z-index: 1;
			position: relative;
		}

			.pl_item
			{
				position: relative;
				margin-bottom: 5px;
				width: 230px;
				height: 25px;
				background: url(../images/pl_item_bg.png) no-repeat;
			}

			.pl_item-broken
			{
				margin-bottom: 5px;
				width: 230px;
				height: 25px;
				background: url(../images/pl_item_bg-broken.png) no-repeat;
			}

			.pl_item_loading
			{
				margin-bottom: 5px;
				width: 230px;
				height: 25px;
				background: url(../images/pl_item_preloader.gif) no-repeat 3px;
			}

				.pl_item_title
				{
					position: relative;
					top: 5px;
					left: 10px;
					width: 210px;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
				}

				.pl_item_title-broken
				{
					position: relative;
					top: 5px;
					left: 10px;
					width: 210px;
					color: #333333;
					text-decoration: line-through;
					white-space: nowrap;
					overflow: hidden;
				}

			.pl_item_ops
			{
				z-index: 3;
				display: none;
				position: absolute;
				width: 220px;
				height: 25px;
			}

				.pl_item_btn
				{
					z-index: 3;
					float: right;
					position: relative;
					margin: 4px 4px 0px 0px;
					width: 17px;
					height: 17px;
					cursor: pointer;
				}

		.pl_indicator
		{
			z-index: 4;
			position: absolute;
			top: -100px;
			width: 13px;
			height: 20px;
			background: url(../images/pl_indicator.gif) no-repeat;
		}
	
		#pl_item_title_btn
		{
			float: left;
			filter: alpha(opacity=0);
			opacity: 0;
			width: 110px;
			background: #ffaa00;
		}