@charset "utf-8";
/* WebTV Styles */

/***************************** Multi Program Guide ***********************************/
.MPG_slideButtons { float:right; font-size:0; }
.MPG_metadata { display:none; }

/* time bar */
.MPG_timeBar { width:100%; background:#4f4f4f; font-weight:bold; font-size:11px; }
.MPG_timeBarDate { width:234px; height:40px; display:inline-block; position:relative; box-sizing:border-box; background:#5c5c5c;  }
	.MPG_timeBarDate span { color:#b7b7b7; padding-top:5px; padding-left:5px; float:left; }
.MPG_timeBarRulerWrapper { width:936px; height:40px; display:inline-block; position:relative; box-sizing:border-box; overflow:hidden; }
	.MPG_timeBarRuler { width:22000px; height:40px; position:relative; white-space:nowrap; cursor:w-resize; z-index:2; pointer-events:auto; }
		.MPG_timeBarRuler .MPG_currentTime { width:auto; height:40px; position:absolute; box-sizing:border-box; border-left:1px solid #fff; left:0; pointer-events:none; }
			.MPG_timeBarRuler .MPG_currentTime span { float:left; padding-left:5px; padding-top:5px; color:#fff; pointer-events:none;  }
		.MPG_timeBarRuler .MPG_timeDiv { width:450px; height:40px; float:left; box-sizing:border-box; border-left:1px solid #828282; background:transparent; pointer-events: none; }
			.MPG_timeBarRuler .MPG_timeDiv span { float:left; padding-left:5px; padding-top:5px; color:#828282; pointer-events: none; }

.MPG_mosaicWrapperLoading { display:block; height:100px; }
	
/* mosaic */
.MPG_mosaicWrapper { background:#1c1c1c; width:100%; height:350px; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; /*overflow-y:overlay;*/  }
.MPG_mosaicChannels { width:234px; float:left; box-sizing:border-box; background:#303030; }
	.MPG_channel { height:50px; vertical-align:middle; display:block; padding:5px; margin:0; border-bottom:1px solid #1c1c1c;  }
		.MPG_channelImage { width:89px; height:50px; line-height:50px; display:inline-block; vertical-align:middle; text-align:center; margin:0; }
			.MPG_channelImage img { width:auto; height:auto; max-width:89px; max-height:50px; margin:0; }
		.MPG_channelTitle { width:130px; height:50px; line-height:50px; display:inline-block; vertical-align:middle; font-size:12px; font-weight:bold; }
			.MPG_channelTitle a { color:#bebebe; }
			.MPG_channelTitle a:hover { color:#fff; }
			.MPG_channelTitle span { height:auto; display:inline-block; line-height:14px; }
	.MPG_channel:first-child,
	.MPG_channel:hover { background:#3d3d3d; border-bottom-color:#3d3d3d; }
	.MPG_channel:first-child .MPG_channelTitle,
	.MPG_channel:first-child .MPG_channelTitle a { color:#fff; }
.MPG_mosaicPlaylistsWrapper { width:916px; float:left; box-sizing:border-box; box-sizing:border-box; overflow:hidden; }
	.MPG_mosaicPlaylists { width:90000px; position:relative; white-space:nowrap; }
		.MPG_mosaicPlaylist { height:60px; display:block; border-bottom:1px solid #3d3d3d; }
		.MPG_mosaicPlaylist:first-child { background:#0f0f0f; }
		.MPG_mosaicPlaylist:first-child:first-child .MPG_clip:hover { background:#000; }
			.MPG_clip { height:60px; line-height:60px; color:#7a7a7a; display:block; float:left; width:auto; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; text-indent:5px; border-right:1px solid #3d3d3d; }
				.MPG_clip span { font-size:12px; }
			.MPG_clip:first-child { color:#fff; }
			.MPG_clip:hover { background:#121212; }
			
			
/* responsive styles */
@media screen and (min-width:961px) and (max-width:1179px)
{
	.MPG_timeBarRulerWrapper { width:726px; } /* 960 - 234 */
	.MPG_mosaicPlaylistsWrapper { width:706px; } /* 960 - 234 -20 */
}

@media screen and (min-width:761px) and (max-width:960px)
{
	.MPG_timeBarRulerWrapper { width:516px; } /* 750 - 234 */
	.MPG_mosaicPlaylistsWrapper { width:496px; } /* 750 - 234 - 20 */
}

@media screen and (max-width:760px)
{
	.MPG_mosaicWrapper { height:300px; }
	.MPG_timeBarRulerWrapper { width:calc(100% - 234px); }
	.MPG_mosaicPlaylistsWrapper { width:calc(100% - 234px); }
}

@media screen and (min-width:481px) and (max-width:650px)
{
	.MPG_mosaicWrapper { height:220px; }
	.MPG_timeBarRulerWrapper { width:calc(100% - 234px); }
	.MPG_mosaicPlaylistsWrapper { width:calc(100% - 234px); }
}

@media screen and (max-width:530px)
{
	.MPG_mosaicWrapper { height:220px; }
	.MPG_mosaicChannels,
	.MPG_timeBarDate { width:145px; } /* 234 - 89 */
	.MPG_channelImage { display:none; }
	.MPG_timeBarRulerWrapper { width:calc(100% - 145px); }
	.MPG_mosaicPlaylistsWrapper { width:calc(100% - 145px); }
}