WebFavorites
{
	width: 100%;
	height: 100%;
	visibility: visible;
	flow-children: down;
	transform: translatex( 0px );
	opacity: 1.0;
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
	background-color: carousel_bg_color2;
}

WebFavorites.Hidden
{
	transform-origin: 0% 0% parent-relative;
	transform: translateY( -1080px ) rotateX( 45deg ) translateZ( -1000px );
	opacity: 0.0;
}

#FavoritePages
{
	vertical-align: center;
	horizontal-align: center;
	width: 100%;
	height: fill-parent-flow( 100 );
	background-color: web_bg_color;
}

#FavoritePages .SlideshowPanel
{
	flow-children: down;
	width: 100%;
	height: 100%;
	transform: translatex( 0px );
	opacity: 1.0;

	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
	perspective-origin: 50% 50%;
}

#FavoritePages .SlideShowLeftOfFocus
{
	transform: translatex( -1920px );
	opacity: 0.0;
}

#FavoritePages .SlideShowRightOfFocus
{
	transform: translatex( 1920px );
	opacity: 0.0;
}

.FavoriteRow, #FavoritePages .FavoritesGrid
{
	horizontal-align: center;
	flow-children: right;
	margin: 10px;
	margin-left: 0px;
	margin-right: 0px;
}

#FavoritePages .FavoritesGrid
{
	padding: 40px;
	margin-top: 0px;
	padding-left: 110px;
	padding-right: 100px;
	padding-bottom: 100px;
}

#FavoritePages > MouseScrollRegion
{
	opacity: 0.0;
}

.FavoritesGrid FavoriteGridItem
{
	margin: -10px;
	padding: 24px;
	transition-property: position;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;

}

.DragScrolling FavoriteGridItem
{
	transition-duration: 0.0s;
}

.Flick FavoriteGridItem
{
	transition-timing-fuction: DragScrollFlickTimingFunction;
	transition-duration: DragScrollFlickTime;
}

#HistoryWrapper, #FrequentWrapper 
{
	visibility: collapse;
}


.WebHistory #HistoryWrapper, .WebHistory #FrequentWrapper 
{
	visibility: visible;

}

.WebHistory .HistoryFavoriteRow
{
	margin-top: 20px;
	margin-bottom: 0px;
}

.FavoriteFirstRow
{
	margin-top:30px;
}

.WebHistory .FavoriteFirstRow
{
	margin:10px;
}

.FavoriteRow .WebImage, .GridItemImage
{
	width: 550px;
	height: 390px;
	visibility: visible;
}

.WebHistory .FavoriteRow .WebImage
{
	width: 494px;
	height: 360px;
}

/*	class to hide a favorite entry if we don't have data for it */
.FavoriteRow .FavoriteHidden
{
	transition-duration: 0.2s;
	opacity : 0.0;
	visibility: collapse;
}

.FavoriteRow Button, .GridItemImage Button
{
	padding: 8px;
	flow-children: down;
}

.FavoriteRow Button:focus, FavoriteGridItem:descendantfocus
{
	z-index: 1; // bring this button in front of the other ones
}

FavoriteGridItem:hover #AltTitle
{
	pre-transform-scale2d: 1.025; 
	color: #f2f2f2ff;
}


.FavoriteRow Button:hover .WebImage, FavoriteGridItem:hover .GridItemImage
{
	box-shadow: box_shadow_off_color -2.5px -2.5px 10px 5px;
	pre-transform-scale2d : 1.025;
	opacity: 0.9;
}


FavoriteGridItem:descendantfocus #AltTitle
{
	pre-transform-scale2d: 1.08;  
}


.FavoriteRow Button:focus .WebImage, FavoriteGridItem:descendantfocus .GridItemImage
{
	box-shadow: box_shadow_on_color -3.5px -3.5px 13px 7px;
	pre-transform-scale2d: 1.08;
	opacity: 1.0;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.30s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
}


FavoriteGridItem:descendantfocus:hover #AltTitle
{
	pre-transform-scale2d: 1.105; 
	z-index: 11;
}

.FavoriteRow Button:focus:hover .WebImage, FavoriteGridItem:descendantfocus:hover .GridItemImage
{
	box-shadow: box_shadow_off_color -3.5px -3.5px 13px 7px;
	border-style: solid;
	pre-transform-scale2d : 1.105;
	border-color: #bdbfbfff;
	opacity: 1.0;
	z-index: 10;

	animation-name: main-button-glow-movement-no-fill; 
	animation-duration: 1.7s;
	animation-delay: 0.30s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
}


.FavoriteRow Button:focus .WebLabel, FavoriteGridItem:descendantfocus Label
{
	// white background and black text for selected panel
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); 
	color : gradient( linear, 0% 0%, 95% 110%, from( #3c3c3cff ), color-stop( 0.85, #3c3c3cff ), to( #3c3c3c00 ) );
}

.FavoriteRow Button .WebImage, .GridItemImage
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2c2c2c ), to( #212121 ) );

	opacity: 0.85;
	padding: -44px;

	transition-property: pre-transform-scale2d, border, opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-out;
}

.FavoriteRow .WebLabel, .GridItemImage Label
{
	vertical-align: center;
	horizontal-align: center;
	font-size: 22;
	font-weight: bold;
	color: tclegendbutton;
	padding-left: 2px;
	margin-top: 354px;
	margin-left: 44px;
	padding-left: 8px;
	margin-right: 44px;
	padding-right: 4px;
	padding-top: 5px;
	text-align: center;
	text-overflow: clip;
	overflow: clip;
	height: 40px;
	white-space: nowrap;
	opacity: 1.0;
	width: 100%;
	color: gradient( linear, 0% 0%, 95% 110%, from( #d2d2d2ff ), color-stop( 0.85, #d2d2d2ff ),to( #ababab00 ) );
	background-color: #2c2c2c;
	font-family: platformfont;
}

.WebHistory .FavoriteRow .WebLabel
{
	margin-top: 320px;
}

.TopBar
{
	height: 74px;
	width: 100%;
	visibility: visible;
}

#ControlBar
{
	vertical-align: bottom;
	horizontal-align: center;
	flow-children: right;
	visibility: visible;
}

.TopBar Button
{

	font-weight: normal;
	font-size: 24px;
	color: #000000ff;
	white-space: nowrap;

	background-color: friendstab;
	width: 200px;
	height: 50px;
	padding: 5px;
	margin-left: 15px;


	transition-property: background-color, color, box-shadow;
	transition-timing-function: ease-out;
}

.TopBar Button:focus
{
	transition-duration: 0.23s !immediate;
		
	color: #000000ff;
	
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #ffffffff ), to( #bdbfbfff ) ); 
	
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	
	transition-duration: 0.23s;
	transition-timing-function: linear;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.TopBar Button.ActiveButton
{
	transition-duration: 0.23s !immediate;

	color: #f2f2f2ff;
	background-color: friendstabcurrentselection;
}

.TopBar Button.ActiveButton:hover
{
	transition-duration: 0.23s !immediate;
		
	color: #f2f2f2ff;
	background-color: friendstabcurrentselection;
	box-shadow: box_shadow_off_color -5px -5px 6px 10px;
}

.TopBar Button Label
{
	horizontal-align: center;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 6px;
	margin-bottom: 4px;
	font-family: platformfont;
}

.TopBar Button:hover
{
	transition-duration: 0.23s !immediate;
	color: #f2f2f2ff;
	background-color: webtabcurrenthover;
	box-shadow: box_shadow_off_color -5.5px -5px 6px 10px;
}

.TopBar Button:active
{
	transition-duration: 0.23s !immediate;
	color: #f2f2f2ff;
	background-color: webtabcurrentselection;
}



.CursorVisible .CloseButton
{
	visibility: visible;
}

.CloseButton
{
	visibility: collapse;
}

.CloseButtonHidden .CloseButton
{
	visibility: collapse;
}

.FavoriteRow .CloseImage, .GridItemImage .CloseButton
{
	width: 48px;
	height: 48px;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

.FavoriteRow .WebImage:hover .CloseImage, .GridItemImage:hover .CloseButton, .AltTitle:hover .CloseButton
{
	visibility: visible;
	opacity: 1.0;
}

.FavoriteRow Button.CloseButton, .GridItemImage Button.CloseButton
{
	horizontal-align: right;
	vertical-align: top;

	margin: 35px;
	flow-children: none;
	background-color: none;

	transition-property: wash-color, opacity;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}


.FavoriteRow Button.CloseButton:hover, .GridItemImage Button.CloseButton:hover
{
	wash-color: button_wash;
}

.WebHistory .HistoryCategory
{
	background-color: history_ribbon;
	color: #F2F2F2FF;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 150px;
	padding-right: 150px;
	horizontal-align: center;
	font-family: platformfont;
	font-size: 30px;
	font-weight: light;
	text-align: center;
	margin-top: 70px;

	z-index: 300;
	transform-origin: 0% 0% parent-relative;
	transform: rotatez( -45deg ) translatex( 50px ) translatey( 140px );
}

#HistoryWrapper, #FrequentWrapper
{
	height: 273px;
	width: 318px;
	padding-left: -180px;
	padding-top: -70px;
	margin-left: 0px;
	margin-top: -20px;
	perspective-origin: 0% 0% invert;
	z-index: 300;
	vertical-align: top;

	pre-transform-scale2d: 1.0;

	transition-property: pre-transform-scale2d;
	animation-delay: 0.30s;
	transition-duration: 0.20s;
	transition-timing-function: bigpicture-ease-in-out;
}	

.TopRow, .SecondRow
{
	width: 100%;
}

.WebHistory .TopRow, .WebHistory .SecondRow
{
	padding-top: 20px;
	padding-bottom: 20px;
	height: 42%;
}

.WebHistory .SecondRow
{
	background-color: web_bg_color;
}


MouseScrollRegion
{
	y: -50px;
}

#FavoritePages FavoritesGrid MouseScrollRegion
{
	y: -45px;
}


.AltTitle #AltTitle
{
	visibility: visible;
}

#AltTitle
{
	visibility: collapse;
	vertical-align: center;
	horizontal-align: center;
	font-family: platformfont;
	font-size: 60;
	font-weight: light;
	line-height: 64px;
	text-transform: uppercase;
	color: #afb1b1ff;
	background-color: #00000000;
	text-align: left;
	text-overflow: ellipsis;
	opacity: 0.5;
	z-index: 10;
	max-height: 300px;
	max-width: 550px;
	white-space: normal;
	margin-left: 10px;
	margin-bottom: 40px;

	transition-property: opacity, color, pre-transform-scale2d;
	transition-duration: 0.23s;
	transition-timing-function: bigpicture-ease-in-out;
}