/*	Styles shared across all UI */

@define white: #ffffff;
@define red: #ad4543;
@define darkred: #712d2c;
@define green: #a3cf06;
@define discountgreen: #4e7a03;
@define blue: #2f6682;
@define black: #000000;
@define yellow: #ffff00;
@define purple: #800080;
@define backgroundgray : #383635ff;
@define foregroundgray : #A6A4A1ff;
@define transparent: #00000000;
@define platformfont: "Motiva Sans";
@define deffontsize: 22px;
@define medfontsize: 28px;
@define largefontsize: 32px;

/* Transition timing */
@define supershortduration: 0.15s;
@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

/* Z layers */
@define top_non_popup_zindex:      	9999999;
@define contextmenu_zindex:       	10000100;
@define msgbox_zindex:            	90000000;
// dropdowns/context menus inside of a msgbox must have a higher zindex than the msgbox itself
@define msgbox_contextmenu_zindex:	90000100;

// must be bigger than message box z-index
@define footer_zindex:            	90000500;

// must be bigger than message box and footer z-indexes
@define notification1_zindex:    100000100;
@define notification2_zindex:    100000200;
// must be the highest z-index
@define all_top_zindex:       100000000000;

/* Legend button colors */
@define legendbuttongrey: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #c6d4df88 ), color-stop( 1.0, #c6d4dfdd ) );
@define legendbuttongreen: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #6fd025aa ), color-stop( 1.0, #6fd025cc ) );
@define legendbuttonyellow: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #fff100aa ), color-stop( 1.0, #fff100cc ) );
@define legendbuttonred: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #ce422baa ), color-stop( 1.0, #ce422bcc ) );
@define legendbuttonblue: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #2b87ceaa ), color-stop( 1.0, #2b87cecc ) );

/* Text colors */
@define tclegendbutton: gradient( linear, 0% 0%, 0% 100%, from( #878c8eff ), to( #abb0b2ff ) );
@define tclegendlabel: gradient( linear, 0% 0%, 0% 100%, from( #878c8eff ), to( #abb0b2ff ) );
@define tcstatictext: gradient( linear, 0% 0%, 100% 100%, from( #36b3d9ff ), to( #3a7ba6ff ) );
@define legendbuttonborder: #878c8eff;
@define detailsdatalabel: gradient( linear, 0% 0%, 100% 100%, from( #ffffffff ), to( #c6d4dfCC ) );
@define detailsdatalabelfocus: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #fefefeff ) );
@define detailsdatalabelfocus2: gradient( linear, 80% 0%, 92% 0%, from( #000000ce ), to( #00000000 ) );
@define moduledatalabel: gradient( linear, 0% 0%, 100% 100%, from( #67c1f5ff ), to( #67c1f5ff ) );
@define medgray: #81a3b8;
@define darkblue: #0b1c3b;
@define brightblue: #66c0f4;

/* Main menu colors */
@define tcexitrow: gradient( linear, 0% 0%, 0% 100%, from( #808d91ff ), to( #9dadb3ff ) );
@define tcexitrowhover: gradient( linear, 0% 0%, 0% 100%, from( #b8cbd1ff ), to( #c1d5dbff ) );
@define tcexitrowfocus: gradient( linear, 0% 0%, 0% 100%, from( #1c5566ff ), to( #1e3461ff ) );
@define tcmainbutton: gradient( linear, 0% 0%, 0% 100%, from( #f2f2f2ff ), to( #abababff ) );
@define tcmainbuttonselected: gradient( linear, 0% 0%, 0% 100%, from( #1b1b1bff ), to( #1b1b1bf0 ) );
@define tcselflabel: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #0b7c2460 ), color-stop( 1.0, #0b7c24cf ) );
@define bgcolor: #0d1421ff;
@define bgcolorwash: #4eaedea0;
@define bgcolorwashmedium: #3ab8de60;
@define bgcolorwashlight: #3ab8de25;
@define ui_common_control_hover: #14c6fcff;

/* Friends Label Colors */
@define friendsoffline_darkbg: gradient( linear, 0% 0%, 100% 95%, from( #ffffff77 ), color-stop( 0.85, #ffffff77 ), to( #ffffff00 ) );
@define friendsoffline_lightbg: gradient( linear, 0% 0%, 100% 95%, from( #252525ff ), color-stop( 0.85, #252525ff ), to( #252525e0 ) );
@define friendsoffline_solid: #617c8aff;
@define friendsonline_darkbg: gradient( linear, 0% 0%, 100% 95%, from( #14c6fcff ), color-stop( 0.85, #3a8da6ff ), to( #3a8da600 ) );
@define friendsonline_lightbg_to: #0e88ade0;
@define friendsonline_lightbg: gradient( linear, 0% 0%, 100% 95%, from( #11a4d1ff ), color-stop( 0.85, #0e7999ff ), to( friendsonline_lightbg_to ) );
@define friendsonline_solid: #14c6fcff;
@define friendsonline_bright: #50d9f9ff;

@define friendsingame_darkbg: gradient( linear, 0% 0%, 100% 95%, from( #b3d92bff ), color-stop( 0.85, #b3d92bff ), to( #b3d92be0 ) );
@define friendsingame_lightbg: gradient( linear, 0% 0%, 100% 95%, from( #729100ff ), color-stop( 0.85, #729100ff ), to( #729100e0 ) );
@define friendsingame_solid: #9cbd26ff;
@define friendsingame_bright: #c6ff6cff;

@define friendsgolden_darkbg: gradient( linear, 0% 0%, 100% 95%, from( #ffff99ff ), color-stop( 0.85, #ffff99ff ), to( #ffff99ff ) );
@define friendsgolden_lightbg: gradient( linear, 0% 0%, 100% 95%, from( #ffff99ff ), color-stop( 0.85, #ffff99ff ), to( #ffff99ff ) );
@define friendsgolden_solid: #ffff99ff;

/* color used for account warnings - tint of A94847 value from 2' UI */
@define accountwarning: #bf4343FF;

@define bigpicture-ease-in-out: cubic-bezier( 0, 0.265, 0.265, 1.0);
//@define bigpicture-ease-in-out: cubic-bezier( 0, 0.42, 0.58, 1.0);

//
// Blue UI colors for Bigfoot, all in one place to easily find and update them...
//


/* Fancy bg color with faded top right corner */
@define bgwithgradient: #000000ff, gradient( radial, 100% -0%, 100px -40px, 320% 270%, from( #003540ff ), color-stop( 0.46, #072d4a55 ), color-stop( 0.86, #072d4a00 ) );
@define bgwithgradientlogin: #000000ff, gradient( radial, 100% 100%, 1200px -500px, 100% 100%, from( #337380ff ), color-stop( 0.16, #26598000 ) );

/* Same deal, only the top left corner gets the fade */
/* radial, centerx centery, offsetx offsety, radiusx radiusy, color stops */
@define bgwithgradienttopleft: #000000ff, gradient( radial, 0% 0%, -100px -40px, 320% 270%, from( #11496dff ), color-stop( 0.36, #07304b00 ) );

//settings
@define simplebutton: gradient( linear, 0% 0%, 100% 100%, from( #30708c77 ), to( #28395922 ) );
@define simplebutton_vertical: gradient( linear, 0% 0%, 100% 100%, from( #30708c44 ), to( #28395934 ) );
@define simplebuttonsolid: gradient( linear, 0% 0%, 100% 100%, from( #30748c ), to( #283959 ) );
@define simplebuttonsolid_vertical: gradient( linear, 0% 0%, 100% 100%, from( #2f6682 ), to( #144066 ) );
@define settingsbackgroundgradient: gradient( linear, 100% 0%, 100% 100%, from( #042337ff  ), color-stop( 0.65, #001226ff  ), to( #000b17ff ) );

//system wide
@define messagecolorwash: #14c6fcff;
@define messagecolorwashfade: gradient( linear, 0% 96%, 96% 100%, from( #1c93b8ff ), color-stop( 0.90, #1c84b8ff ), to( #1c84b800 ) );
@define horizontal_default: gradient( linear, 0% 0%, 100% 100%, from( #2a617b ), to( #144066 ) );
@define horizontal_focus: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

//@define horizontal_focus: gradient( linear, -10% 0%, 110% 0%, from( #398999cc ), to( #395280ff ) );
@define dialog_bg_color: gradient( radial, 0% -0%, 120px -40px, 420% 370%, from( #327794 ), color-stop( 0.26, #17304dff ) );
@define overlay_bg_color: #174873aa;
@define message_box_bg: gradient( radial, 0% -0%, 120px -40px, 120% 150%, from( #285c73 ), to( #12203d ) );
@define message_box_bg_dark: #0c233dff;
@define notification_bg: gradient( linear, 0% 0%, 100% 100%, from( #265b75 ), to( #1a3353 ) );
@define dropdown_box_bg: gradient( linear, 0% 0%, 100% 100%, from( #30708c ), to( #12213d ) );

@define box_shadow_on_color: #52c7ebcc;
@define box_shadow_mid_color: #40d2ff33;
@define box_shadow_off_color: #52d1eb00;
@define dark_box_shadow_color: #122b5988;
@define dark_box_shadow_color_opaque: #172a2eff;
@define light_box_shadow_color: #66bbcc55;
@define mouse_off_bg_left: gradient( radial, 0% 50%, 0% 0%, 80px 180px, from( #1f445400 ), to( #0d1b2400 ) );
@define mouse_hover_bg_left: gradient( radial, 0% 50%, 0% 0%, 80px 180px, from( #1f4454ff ), to( #0d1b2400 ) );
@define mouse_active_bg_left: gradient( radial, 0% 50%, 0% 0%, 80px 180px, from( #3a809eff ), to( #0d1b2400 ) );
@define mouse_off_bg_right: gradient( radial, 100% 50%, 0% 0%, 80px 180px, from( #1f445400 ), to( #0d1b2400 ) );
@define mouse_hover_bg_right: gradient( radial, 100% 50%, 0% 0%, 80px 180px, from( #1f4454ff ), to( #0d1b2400 ) );
@define mouse_active_bg_right: gradient( radial, 100% 50%, 0% 0%, 80px 180px, from( #3a809eff ), to( #0d1b2400 ) );

@define mouse_off_bg_up: gradient( radial, 50% 0%, 0% 0%, 120px 80px, from( #3a809e00 ), to( #0d1b2400 ) );
@define mouse_hover_bg_up: gradient( radial, 50% 0%, 0% 0%, 120px 80px, from( #3a809eff ), to( #0d1b2400 ) );
@define mouse_active_bg_up: gradient( radial, 50% -5%, 0% 0%, 140px 80px, from( #3abde5ff ), to( #0d1b2400 ) );

@define mouse_off_bg_bottom: gradient( radial, 50% 100%, 0% 0%, 120px 80px, from( #3a809e00 ), to( #0d1b2400 ) );
@define mouse_hover_bg_bottom: gradient( radial, 50% 100%, 0% 0%, 120px 80px, from( #3a809eff ), to( #0d1b2400 ) );
@define mouse_active_bg_bottom: gradient( radial, 50% 95%, 0% 0%, 140px 80px, from( #3abde5ff ), to( #0d1b2400 ) );

@define carousel_bg_color: gradient( linear, 0% 0%, 0% 100%, from( #142a3300 ), color-stop( 0.5, #2e57733c ), to( #141f3300 ) );
@define carousel_bg_color2: gradient( linear, 0% 0%, 0% 100%, from( #142a3300 ), color-stop( 0.5, #2e57733c ), to( #141f3300 ) );
@define mainmenu_bg_color2: gradient( linear, 0% 0%, 0% 100%, from( #142a3300 ), color-stop( 0.5, #2e57733c ), to( #141f3300 ) );
@define animated_icon_wash_color: #13a5d1ff;
@define button_hover_color: #1d2f52ff;
@define button_focus_color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

//checkout
@define rule_color: gradient( linear, 0% 0%, 100% 0%, from( #ffffff00 ), color-stop( 0.35, #ffffff33 ), color-stop( 0.85, #ffffff33 ), to( #ffffff00 ) );
@define checkout_title_bg: #1b3852ff;
@define checkout_body_bg: gradient( linear, 0% 0%, 0% 100%, from( #1f415eff ), to( #283959ff ) );
@define checkout_body_descendantfocus_bg: gradient( linear, 0% 0%, 0% 60%, from( #ffffff12 ), to( #ffffff00 ) );
@define secondary_label: #418ca3ff;
@define breadcrumb_label: #418ca3ff;
@define error_color: #e6e09aff;
@define error_color_focused: #ccc689ff;
@define error_bgcolor: gradient( linear, 0% 0%, 100% 100%, from( #e6e09aff ), to( #b3ac66ff ) );

//library
@define action_button: gradient( linear, 0% 0%, 100% 100%, from( #1c6b8c ), to( #0c1d3d ) );
@define link: #2a6f8cff;
@define linkbright: #52a7ccff;
@define carousel_title: gradient( linear, 0% 0%, 100% 100%, from( #15d4feff ), to( #197eb0ff ) );
@define ui_primary_color: #14c6fcff;
@define ui_primary_dark_color: #158eb3ff;
@define ui_common_control: gradient( linear, -10% 0%, 110% 0%, from( #2d6780ff ), to( #142d52ff ) );
@define ui_common_control2: gradient( linear, 0% 0%, 0% 100%, from( #36647866 ), to( #4b6996ff ) );
@define ui_common_control3: gradient( linear, 0% 0%, 0% 100%, from( #4b8096ff ), to( #36507866 ) );
@define ui_dark_common_control: gradient( linear, 0% 0%, 0% 100%, from( #1a3440ff ), to( #131e2eff ) );
@define ui_common_control_border: #2d819699;
@define ui_common_control_border_off: #2d819600;
@define button_box_shadow_on_color: #7ed1e566;
@define slideshow_bg_library: gradient( linear, 0% 0%, 0% 100%, from( #000000ff ), color-stop( 0.8, #000000dd ), to( #00000080 ) );
@define slideshow_bg2: gradient( linear, 0% 0%, 0% 100%, from( #00000066 ), color-stop( 0.7, #00000066 ), to( #000000ff ) );
@define slideshow_bg3: gradient( linear, 0% 0%, 0% 100%, from( #00000000 ), color-stop( 0.7, #00000000 ), to( #000000ff ) );
@define all_games_hover: gradient( linear, 0% 0%, 100% 100%, from( #309ebf ), to( #0b224d ) );

@define action_module: gradient( linear, 0% 0%, 100% 100%, from( #64bdf173 ), to( #238bbe73 ) );
@define nontransparent_action_module: gradient( linear, 0% 0%, 100% 100%, from( #30668fff ), to( #144d70ff ) );
@define state_panel: gradient( linear, 0% 0%, 100% 100%, from( #ffffff1A ), to( #ffffff1A ) );
@define disabled_module: gradient( linear, 0% 0%, 100% 100%, from( #1c537366 ), to( #1c537366 ) );
@define transparent_module: gradient( linear, 0% 0%, 100% 100%, from( #2e648099 ), to( #15406699 ) );
@define transparent_module2: gradient( linear, 0% 0%, 0% 100%, from( #1b3a59aa ), to( #121b2edd ) );
@define nontransparent_module: gradient( linear, 0% 0%, 100% 100%, from( #1e4861 ), to( #103250 ) );
@define readonly_module: gradient( linear, 0% 0%, 100% 100%, color-stop( 0.0, #0d131799 ), color-stop( 1.0, #0d13171A ) );
@define module_shadow: #00000055 0px 0px 10px 0px;

//friends
@define friendstab: #1b4059ff;
@define friendstabcurrentselection: gradient( linear, 0% 0%, 0% 100%, from( #0e86abff ), to( #1a5e80ff ) );
@define friendstabcurrenthover: #1f5369ff;
@define friendstabdivider: #1a5e80ff;
@define friendschatinputbkgnd: gradient( linear, 0% 0%, 100% 100%, from( #456c8aff  ), to( #20324070 ) );
@define friendschatinputbkgnd_text: gradient( linear, 0% 0%, 100% 100%, from( #5685a850 ), to( #20324070 ) );
@define chat_window_bg: gradient( linear, -2% 0%, -4% 100%, from( #0b2538ff ), color-stop( 0.5, #0b253800 ), color-stop( 0.6, #0e202e00 ), to( #182d3dcc ) );


//store
@define store_bubble: #2a5e78ff;
@define store_dark_wash: #0e688f77;
@define store_colorful_focus: gradient( linear, 0% 0%, 0% 100%, from( #00000033 ), color-stop(0.65, #00000088 ), to( #52d1eb99 ) );
@define ui_common_control_bright: #3890b5;
@define slideshow_bg: gradient( linear, 0% 0%, 0% 100%, from( #000000aa ), to( #00000055 ) );
@define image_wash: #428dad55;
@define storetab: gradient( linear, 0% 100%, 0% 0%, from( #45758aff ), to( #334b6670 ) );
@define storetabcurrentselection: gradient( linear, 0% 0%, 0% 100%, from( #86a7b5ff ), to( #45658aff ) );
@define storetabcurrenthover: gradient( linear, 0% 100%, 0% 0%, from( #86a7b585 ), to( #45658a85 ) );
@define storetitlecolor: gradient( linear, 0% 0%, 0% 100%, from( #f2f2f2ff ), to( #979898 ) );
@define applabel: gradient( linear, 0% 96%, 96% 100%, from( #f2f2f2ff ), color-stop( 0.90, #f2f2f2ff ), to( #97989800 ) );
@define applabelwide: gradient( linear, 0% 96%, 96% 100%, from( #f2f2f2ff ), color-stop( 0.45, #f2f2f2ff ), to( #97989800 ) );
@define musicapplabel: gradient( linear, 0% 86%, 86% 900%, from( #f2f2f2ff ), color-stop( 0.80, #f2f2f2ff ), to( #97989800 ) );
@define applabelnofade: gradient( linear, 0% 0%, 96% 100%, from( #f2f2f2ff ), to( #abababff ) );
@define applabelsolid: #f2f2f2ff;
@define applabelselected: gradient( linear, 0% 96%, 96% 100%, from( #1b1b1bff ), color-stop( 0.90, #1b1b1bff ), to( #1b1b1b00 ) );
@define musicapplabelselected: gradient( linear, 0% 0%, 86% 90%, from( #1b1b1bff ), color-stop( 0.75, #1b1b1bff ), to( #1b1b1b00 ) );
@define applabelselectedsolid: #1b1b1bff;
@define applabelselectedfade: gradient( linear, 80% 0%, 96% 0%, from( #1b1b1bff ), to( #1b1b1b00 ) );
@define applabelselectednofade: gradient( linear, 0% 96%, 0% 100%, from( #1b1b1bff ), to( #1b1b1bff ) );
@define storetitlecolor: gradient( linear, 0% 0%, 0% 100%, from( #f2f2f2ff ), to( #979898ff ) );
@define storelabel: gradient( linear, 0% 0%, 0% 100%, from( #d6d7d966 ), to( #d6d7d9aa ) );
@define storelabelfade: gradient( linear, 80% 0%, 100% 0%, from( #d6d7d9ff ), to( #d6d7d900 ) );
@define store_genre_wash: #00366699;
@define store_genre_wash_focus: #4284ad00;
@define store_details_wash: #163057aa;
@define store_main_wash: #4eaedea0;
@define store_module: gradient( linear, 0% 0%, 0% 100%, from( #30778c ), to( #12213d ) );
@define store_transparent_module: gradient( linear, 0% 0%, 30% 100%, from( #66993380 ), to( #33661580 ) );
@define store_active_module: gradient( linear, 0% 0%, 100% 100%, from( #9ddb4fff ), to( #43871bff ) );

//browser
@define topbarbuttonbackground:  gradient( linear, 0% 0%, 0% 100%, from( #1b2629ff ), to( #13161aff ) );
@define topbarbackground:  gradient( linear, 0% 0%, 0% 100%, from( #002733 ), to( #13161a ) );
@define webtab: #1b4459ff;
@define webtabcurrentselection: gradient( linear, 0% 0%, 0% 100%, from( #0e86abff ), to( #0b6480ff ) );
@define webtabcurrenthover: #1f5369ff;
@define button_wash: #52b8ccff;
@define web_bg_color: gradient( linear, 0% 0%, 0% 100%, from( #1a5e80ff ), to( #45658a00 ) );
@define web_bg_color2:  gradient( linear, 0% 0%, 0% 20%, from( friendstabdivider ), to( #45658a00 ) );
@define reticule_color: #52b8ccff;
@define reticule_color_dim: #aaaaaaff;
@define history_ribbon: gradient( linear, 0% 30%, 100% 50%, from( #1f3969ff ), to( #38a0bacc ) );
@define url_bar_bg: gradient( linear, 0% 0%, 0% 100%, from( #5685a850 ), to( #202b4070 ) );
@define url_bar_border: #2e4759e0;

//daisywheel
@define daisy_bg_color: #0f283dff;
@define daisy_petal_color: #193e57ff;
@define daisy_bg_wash_color: gradient( linear, 0% 0%, 0% 100%, from( #18263d00 ), color-stop( 0.30, #0b1f36cc ), to( #0b1f36ff ) );
@define daisy_petal_selection_color: #256180ff;
@define daisy_petal_action_color: #256180ff;

// game installed status
@define readytoplaygreen: #A4D007;
@define installedblue: #66c0f4;


// ContextMenu - used in code -- dont rename
@define ContextMenuFadoutTime: 0.2s;

// Parental - used for locked controls
@define parental_locked_wash: #888888FF;

//store
@define StoreAutoActivateSearchDelayTime: 0.0;

// grid bumpers
@define GridFocusBumperTimeout: 0.35s;

@define PageTransitionTimeOff: 0.35s;
@define PageTransitionTimeOn: 0.35s;


@define DragScrollFlickTimingFunction: cubic-bezier( 0.15, 0.74, 0.44, 0.98);
@define DragScrollFlickTime: 2.5s;

DropDown
{
	background-image: url( "file://{images}/store/Icon_DropDownArrowDefault.png" );
	background-repeat: no-repeat;
	background-position: right 44px 50%;

	font-size: 24px;
	min-height: 48px;
	height: fit-children;

	font-family: platformfont;
	padding: 10px;
	z-index: 0;

	box-shadow: fill box_shadow_off_color -4.5px -4.5px 18px 9px;
}

DropDown:focus
{
	background-image: url( "file://{images}/store/Icon_DropDownArrowFocus.png" );

	animation-name: button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

DropDown:focus Label
{
	color: applabelselected;
}

DropDown.DropDownMenuVisible:focus Label
{
	color: applabel;
}

DropDown.DropDownMenuVisible:focus
{
	background-color: ui_common_control;
	background-image: url( "file://{images}/store/Icon_DropDownArrowDefault.png" );
	border-color: #40606c;
	color: applabel;
}

DropDown Label
{
	width: 100%;
}

DropDownMenu
{
	width: 400px;
	flow-children: down;
	background-color: simplebuttonsolid_vertical;
	padding: 4px 8px;
	color: #e1e1e1;
	font-size: 28px;
	overflow: squish scroll;

	box-shadow: #00000080 2px 2px 8px 2px;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

DropDownMenu Label
{
	color: #ffffff99;
	font-family: platformfont;
	font-size: 24px;
	font-weight: normal;

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

DropDownMenu .DropDownChild:hover Label,
DropDownMenu .DropDownChild:focus Label
{
	color: applabelselected;
}

DropDownMenu .DropDownChild
{
	width: 100%;
	padding: 10px;
	margin-right: 8px;

	transform: translatex(-7px);

	transition-property: border, background-color, color, box-shadow, transform;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

DropDownMenu .DropDownChild:hover,
DropDownMenu .DropDownChild:focus
{
	color: applabelselected;

	transform: translatex(0px);

	animation-name: button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.2s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

DropDownMenu.DropDownMenuVisible
{
	opacity: 1.0;
	box-shadow: fill #00000066 0px 0px 10px 0px;

	max-height: 414px;
	transition-property: box-shadow;
}

DropDownMenu.DropDownMenuVisible.ScreenSaverMode
{
	animation-name: dropdownmenu-fade;
	animation-duration: 0.4s;
	transition-property: opacity;
	opacity: 0.0;
}

@keyframes 'dropdownmenu-fade'
{
	0%
	{
		opacity: 1.0;
	}

	100%
	{
		opacity: 0.0;
	}
}

DropDown.DropDownMenuVisible:hover

{
	box-shadow: box_shadow_on_color -4px -4px 8px 8px;
}

DropDown.DropDownMenuVisible:focus
{
	background-color: simplebuttonsolid_vertical;
	background-image: url( "file://{images}/store/Icon_DropDownArrowDefault.png" );
	border-color: ui_common_control_border;
	box-shadow: box_shadow_off_color -4px -4px 8px 8px;
	color: #e1e1e1;

	animation-name: none;
}

.Filter:hover
{
	horizontal-align: center;
	box-shadow: fill box_shadow_on_color -4px -4px 5px 8px;
}

.Filter, DropDownMenu.DropDownMenuVisible .Filter:hover
{

	box-shadow: fill #00000040 0px 0px 10px 0px;
	vertical-align: top;

	transition-property: box-shadow;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

// BUTTONS of all kinds
Button:hover,
ToggleButton:hover,
RadioButton:hover
{
   z-index: 50;
   transition-duration: 0.23s !immediate;
   pre-transform-scale2d: 1.0;
}

ToggleButton,
RadioButton
{
	height: 48px;
}

.Button,
.WizardButton,
.CheckBox {
	min-height: 48px;
	height: fit-children;
	padding: 10px 20px 0px 10px;
	margin: 0px 0px 4px 0px;

	color: detailsdatalabel;
	font-size: deffontsize;
	font-family: platformfont;
	background-color: simplebuttonsolid_vertical;

	transition-property: background-color, color;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

/* smaller padding on checkbox so the box itself aligns correctly */
.CheckBox,
.RadioButton {
	padding: 2px 20px 0px 5px;
}

.Button:hover,
.WizardButton:hover,
.CheckBox:hover {
	transition-duration: 0.23s !immediate;

	color: #ffffffff;
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}

.Button:focus,
.WizardButton:focus,
.CheckBox:focus {
	transition-duration: 0.25s !immediate;
	color: black;
	background-color: button_focus_color;

	animation-name: button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

Label
{
	font-family: platformfont;
}

.Button Label,
.WizardButton Label,
.CheckBox Label,
RadioButton Label,
DropDown Label {

	font-size: 26px;
	font-weight: normal;
	color: #67c1f5;

	transform: translatex( 0px );
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
}

.Button:focus Label,
.WizardButton:focus Label,
.CheckBox:focus Label,
RadioButton:focus Label,
DropDown:focus Label {
	transform: translatex( 7px );
	color: #072e47;
}





.Button:disabled Label,
.Button:disabled,
.WizardButton:disabled Label,
ToggleButton:disabled,
ToggleButton:disabled .TickBox,
TextEntry:disabled
{
	color: detailsdatalabel;
	saturation: 1.0;
	blur: gaussian( 0.7 );
	opacity: 0.5;
	border-color: none;
	box-shadow: none;
	animation-name: none;
}

TextEntry,
DropDown
{
	padding: 8px 10px;
	color: applabelsolid;

	background-color: simplebuttonsolid_vertical;
	border-color: none;

	transition-property: background-color, border, box-shadow, color;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
}

TextEntry {
	font-size: 28px;
	font-family: platformfont;
	animation-name: none;
	height: 56px;

	border-color: #2975a1ff;

	background-color: #203e59;


	border-width: 5px;
	border-style: solid;

	// Linux/Mac bug: border-radius != 0 results in no border - will fix
	//border-radius: 2px;
	border-radius: 0px;

	pre-transform-scale2d: 1.0;
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
}

TextEntry:focus,
DropDown:focus
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) );
	color: applabelselectedsolid;
	text-overflow: clip;
	white-space: nowrap;
}

TextEntry:focus
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #81a3b8ee ), to( #c6d4dfe0 ) );

	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
TextEntry:hover
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
}
TextEntry:disabled:hover
{
	box-shadow: none;
}

TextEntry.TextInputHandlerActive,
TextEntry.TextInputHandlerActive:focus {
	background-color: #81a3b8e0;
	border-color: #c6d4dff0;
	animation-name: none;
}

ToggleButton,
RadioButton
{
	flow-children: right;
	width: 100%;
	font-size: 24px;
	background-color: ui_common_control;
}

ToggleButton .TickBox
{

	border-style: solid;
	border-width: 5px;
	border-radius: 0px;
	background-color: #22495d;
	border-color: none;

	width: 38px;
	height: 38px;
	vertical-align: center;
	transition-property: transform, background-color, border, box-shadow, color;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

ToggleButton:selected .TickBox
{
	background-image: url( "file://{images}/store/Icon_CheckDefault.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

ToggleButton:descendantfocus:selected .TickBox
{
	background-image: url( "file://{images}/store/Icon_CheckFocus.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: white;
}

ToggleButton Label
{
	vertical-align: center;
	margin-top: 10px;
	padding-bottom: 0px;
	margin-left: 8px;
	text-overflow: ellipsis;
}

ToggleButton:descendantfocus .TickBox
{
	transition-property: border;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #dbdcdd ), to( #fdfdfd ) );
}

// tickbox to turn togglebuttons into checkboxes

ToggleButton.CheckBox:Focus .TickBox
{
	background-color: #cccccc;

	border-color: #284b7277;

}

ToggleButton.CheckBox:Selected:Focus .TickBox
{
	background-color: #ccccccff;
	border-color: #284b7277;
	background-image: url( "file://{images}/store/Icon_CheckFocus.png" );
}

// and make room for the tickbox
   ToggleButton.CheckBox Label,
   RadioButton Label
   {
	   padding: 6px 0 6px 0px;
	   margin: 0px 0px 0px 10px;

	   width: 100%;
	   text-overflow: clip;
	   font-family: platformfont;
	   white-space: normal;
   }


ToggleButton.CheckBox:hover Label,
RadioButton:hover Label
{
	color: #ffffffff;
	transform: translatex(0px);
}

RadioButton
{
	height: 48px;
	margin-bottom: 4px;
	margin-top: 0px;
}
	// circle for the radio
	   RadioButton .RadioBox
	   {
		   width: 36px;
		   height: 36px;
		   border-radius: 50%;
		   vertical-align: center;
		   background-color: #22495d;
	   }

	RadioButton:Selected .RadioBox
	{
		background-image: url( "file://{images}/store/Icon_RadioDefault.png" );
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	RadioButton:Selected:focus .RadioBox
	{
		background-image: url( "file://{images}/store/Icon_RadioSelected.png" );
		background-repeat: no-repeat;
		background-position: 50% 50%;

	}

	RadioButton:focus .RadioBox,
	RadioButton:selected:focus .RadioBox
	{
		background-color: #ccccccff;
	}

DropDown Label
{
	width: 100%;
	margin-right: 29px;
	margin-top: 2px;
}


DropDown:focus
{
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );
	border-color: #ffffff;
	color: #333333;
}

VerticalScrollBar, HTMLVerticalScrollBar
{
	width: 6px;
	margin: 3px, 6px, 3px 6px;
	border-radius: 0px;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #c2c2c230 ), to( #f2f2f230 ) );
	horizontal-align: right;
	vertical-align: center;

	transition-property: transform;
}

VerticalScrollBar .ScrollThumb, HTMLVerticalScrollBar .ScrollThumb,
HorizontalScrollBar .ScrollThumb, HTMLHorizontalScrollBar .ScrollThumb
{
	background-color: #66bff3ff;
	transition-property: position;
}

HorizontalScrollBar, HTMLHorizontalScrollBar
{
	height: 6px;
	margin: 3px;
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #c2c2c290 ), to( #f2f2f290 ) );
	border-radius: 0px;
	horizontal-align: left;
	vertical-align: bottom;

	transition-property: transform;
}


// HTML* scrollbars intentionally disabled because the HTML panel doesn't use these constants for transitions

// HTMLVerticalScrollBar,
// HTMLVerticalScrollBar .ScrollThumb,
// HTMLHorizontalScrollBar,
// HTMLHorizontalScrollBar .ScrollThumb,
VerticalScrollBar,
VerticalScrollBar .ScrollThumb,
HorizontalScrollBar,
HorizontalScrollBar .ScrollThumb,
EdgeScrollBar
{
	transition-duration: 0.20s;
	transition-timing-function: ease-out;
}

// HTML* scrollbars intentionally disabled because the HTML panel doesn't use these constants for transitions

// HTMLVerticalScrollBar.MouseDown,
// HTMLVerticalScrollBar.MouseDown .ScrollThumb,
// HTMLHorizontalScrollBar.MouseDown,
// HTMLHorizontalScrollBar.MouseDown .ScrollThumb,
VerticalScrollBar.MouseDown,
VerticalScrollBar.MouseDown .ScrollThumb,
HorizontalScrollBar.MouseDown,
HorizontalScrollBar.MouseDown .ScrollThumb

{
	// Disable the transition when the mouse is dragging the scroll thumb. Note that this must match
	// when IUIScrollBar::IsMouseDown returns true, or else the content will be out of sync
	transition-duration: 0.0s;
}

VerticalScrollBar.Flick,
VerticalScrollBar.Flick .ScrollThumb,
HorizontalScrollBar.Flick,
HorizontalScrollBar.Flick .ScrollThumb,
EdgeScrollBar.Flick
{
	transition-duration: DragScrollFlickTime;
	transition-timing-function: DragScrollFlickTimingFunction;
}


TextTooltip
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( white ), to( #e4e5f0 ) );
	border-radius: 2.5px;
	border: 1px solid #767676;
	box-shadow: #80808090 4px 4px 4px 0px;
	padding: 4px;
	max-width: 600px;
	font-family: platformfont;
	font-size: 12px;

	color: #111111ff;

	visibility: collapse;
}

TextTooltip.TooltipVisible
{
	visibility: visible;
}

.HorizontalRule
{
	height: 4px;
	width: 100%;
	margin: 1px 22px;

	background-color: rule_color;
}

.HorizontalSpace
{
	height: 14px;
	width: 100%;
	margin: 1px 22px;

	background-color: #ffffff00;
}

.VerticalRule
{
	height: 100%;
	width: 1px;
	margin: 22px 1px;

	background-color: gradient( linear, 0% -10%, 0% 110%, from( #11111100 ), color-stop( 0.35, #999999d0 ), color-stop( 0.65, #999999d0 ), to( #11111100 ) );
}

@keyframes 'button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #1483baff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}
}

@keyframes 'purchase-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #9ddb4fff ), to( #43871bff ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #9ddb4fff ), to( #d5ffbdff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #9ddb4fff ), to( #43871bff ) );
	}
}

@keyframes 'main-button-glow-movement'
{
	0%
	{
		box-shadow: fill box_shadow_on_color -5.5px -5.5px 18px 9px;
	}

	40%
	{
		box-shadow: fill box_shadow_on_color -1.5px -1.5px 6px 3px;
	}

	60%
	{
		box-shadow: fill box_shadow_on_color -1.5px -1.5px 6px 3px;
	}

	100%
	{
		box-shadow: fill box_shadow_on_color -5.5px -5.5px 18px 9px;
	}
}

@keyframes 'main-button-glow-movement-small'
{
	0%
	{
		box-shadow: fill box_shadow_on_color -3px -3px 15px 6px;
	}


	40%
	{
		box-shadow: fill box_shadow_on_color -0.8px -0.8px 6px 1.6px;
	}

	60%
	{
		box-shadow: fill box_shadow_on_color -0.8px -0.8px 6px 1.6px;
	}

	100%
	{
		box-shadow: fill box_shadow_on_color -3px -3px 14px 6px;
	}
}

@keyframes 'main-button-glow-movement-no-fill'
{
	0%
	{
		box-shadow: box_shadow_on_color -4.5px -4.5px 18px 9px;
	}

	8%
	{
		box-shadow: box_shadow_on_color -4.5px -4.5px 18px 9px;
	}

	48%
	{
		box-shadow: box_shadow_on_color -1.5px -1.5px 6px 3px;
	}

	52%
	{
		box-shadow: box_shadow_on_color -1.5px -1.5px 6px 3px;
	}

	100%
	{
		box-shadow: box_shadow_on_color -4.5px -4.5px 18px 9px;
	}
}
@keyframes 'purchase-button-glow-movement-no-fill'
{
	0%
	{
		box-shadow: #a3cf06 -4.5px -4.5px 18px 9px;
	}

	8%
	{
		box-shadow: #a3cf06 -4.5px -4.5px 18px 9px;
	}

	48%
	{
		box-shadow: #a3cf06 -1.5px -1.5px 6px 3px;
	}

	52%
	{
		box-shadow: #a3cf06 -1.5px -1.5px 6px 3px;
	}

	100%
	{
		box-shadow: #a3cf06 -4.5px -4.5px 18px 9px;
	}
}

//used in the store speicals, etc. browse views for filters/tabs
@keyframes 'filter-button-glow-movement'
{
	0%
	{
	box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
	}

	8%
	{
	box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
	}

	48%
	{
	box-shadow: fill light_box_shadow_color 0px 13px 60px -26px;
	}

	52%
	{
	box-shadow: fill light_box_shadow_color 0px 13px 60px -26px;
	}

	100%
	{
	box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
	}
}

@keyframes 'quick-blur'
{
	0%
	{
		blur: none;
	}

	50%
	{
		blur: gaussian( 1.25 );
	}

	100%
	{
		blur: none;
	}
}


//
// AvatarImage related styles
//

AvatarImage.AvatarFriendOffline
{
	border-color: friendsoffline_solid;
}

AvatarImage.AvatarFriendOnline
{
	border-color: friendsonline_solid;
}


AvatarImage.AvatarFriendInGame
{
	border-color: friendsingame_solid;
}

AvatarImage.AvatarFriendGolden
{
	border-color: friendsgolden_solid;
}


//
// HTTP styles used by labels
//

a
{
	color: link;
}

a:hover
{
	text-decoration: underline;
}

b
{
	font-weight: bold;
}

i
{
	font-style: italics;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italics;
}

h1
{
	font-weight: bold;
}

h2
{
	font-weight: bold;
}


//
// VU Meter styles
//
.VoiceBarContainer
{
	background-color: simplebutton;
	height: 70px;
	width: 200px;
	border-radius: 4px;
	flow-children: right;
	border: 5px solid #1c333dff;
	padding-left: 1px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 14px;
	margin-left: 0px;
	transition-property: transform, pre-transform-scale2d;
	transition-duration: 0.20s;
	border-color: none;
	border-style: solid;
	border-width: 5px;

}

.DisplayOnlyVoiceBarContainer
{
	background-color: #44444400;
	height: 70px;
	width: 200px;
	border-radius: 8px;
	flow-children: right;
	border: 5px solid #1c333dff;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 14px;
	margin-left: 0px;
	transition-property: transform, pre-transform-scale2d;
	transition-duration: 0.20s;
	border-color: none;
	border-style: solid;
	border-width: 5px;
}

.VoiceBar
{
	height: 100%;
	width: 8px;
	border-radius: 1px;
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: bottom;
	background-color: #99999999;
	opacity: 0.5;

	transition-property: background-color;
	transition-duration: 0.05s;
	transition-timing-function: bigpicture-ease-in-out;
}

.SliderContainer
{
	height: 50px;
	width: 456px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.Slider
{
	height: 100%;
	width: 4%;
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: bottom;
	background-color: #aaaaaaff;
	opacity: 0.5;

	transition-property: background-color;
	transition-duration: 0.05s;
	transition-timing-function: bigpicture-ease-in-out;
}

.SliderHalf
{
	width: 2%;
}

.Slider10
{
	width: 10%;
}

.VoiceBarContainer:focus .VoiceBar
{
	opacity: 1.0;
}


#Bar1.VoiceBar { height:  5px; }
#Bar2.VoiceBar { height: 10px; }
#Bar3.VoiceBar { height: 15px; }
#Bar4.VoiceBar { height: 20px; }
#Bar5.VoiceBar { height: 25px; }
#Bar6.VoiceBar { height: 30px; }
#Bar7.VoiceBar { height: 35px; }
#Bar8.VoiceBar { height: 40px; }
#Bar9.VoiceBar { height: 45px; }
#Bar10.VoiceBar { height: 50px; }

.VoiceBarActive
{
	background-color: ui_primary_color;
	transition-duration: 0.3s;
	opacity: 1.0;
}

// read-write VUs can take focus / be edited
.VoiceBarContainer:focus
{
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfd66 ), to( #bdbfbf66 ) );
	pre-transform-scale2d: 1.0;
	border-color: white;
	box-shadow: box_shadow_on_color -3px -3px 6px 6px;
}


// read-write VUs can take focus / be edited
.VoiceBarContainer:selected
{
	pre-transform-scale2d: 1.06;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.2s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


//
// Home & Exit Button styles
//

#ActualHomeButton,
#MouseBackButton
{
	opacity: 0.0;

	background-image: url( "file://{images}/steam_home_os.png" );
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color: gradient( linear, 0% 0%, 0% 60%, from( #EEEEEE30 ), to( #00000000 ) );

	border-radius: 50%;
	box-shadow: fill #00000055 -3px -3px 4.5px 6px;
	width: 67px;
	height: 67px;
	position: 84px 17px 0px;

	z-index: 1000;

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


.VR #ActualHomeButton,
.VR #MouseBackButton
{

	background-image: url( "file://{images}/steam_home_vr.png" );

	width: 87px;
	height: 87px;
	margin-top: 11px;
	position: 118px 0px 0px;
	opacity: 0.0;


	border-radius: 50%;
	box-shadow: fill #00000055 -3px -3px 4.5px 6px;

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


#MouseBackButton
{
	background-image: url( "file://{images}/mouse/arrowLdefault.png" );
	background-position: -10px -10px;
	position: 24px 26px 0px;
	width: 47px;
	height: 47px;
}

.VR #MouseBackButton
{
	background-image: url( "file://{images}/mouse/arrowLdefaultVR.png" );
	background-position: 0px 0px;
	transform: translateX( 0px );
	position: 12px 0px 0px;
}


.CursorVisible #ActualHomeButton,
.CursorVisible #MouseBackButton
{
	opacity: 0.7;
}

.VR .CursorVisible #ActualHomeButton,
.VR .CursorVisible #MouseBackButton
{
	opacity: 0.9;
}


#ActualHomeButton:hover,
#MouseBackButton:hover
{
	opacity: 1.0;
	pre-transform-scale2d: 1.04;

	box-shadow: fill box_shadow_on_color -3px -3px 4.5px 6px;
	wash-color: #FFFFFFFF;
}




@keyframes 'links-and-more-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdee ), to( #adafafe0 ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdee ), to( #adafafe0 ) );
	}
}


//
// ContextMenu
//
.ContextMenu
{
	width: 100%;
	height: 100%;
	transition-property: opacity, transform;
	transition-duration: ContextMenuFadoutTime;
	transition-timing-function: bigpicture-ease-in-out;
	opacity: 1.0;

	z-index: contextmenu_zindex;


	visibility: visible;
}

.ContextMenu.Destructing
{
	transform: translatex( 0px );
	opacity: 0.0;
}


.ContextMenuBody
{
	padding: 40px;
	flow-children: down;
	width: 450px;
	opacity: 1.0;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	color: #000000ff;
	background-color: dialog_bg_color;
}


.ContextMenuBodyCentered
{
	padding: 40px;

	flow-children: down;
	horizontal-align: center;
	vertical-align: center;
	border-radius: 3px;
	opacity: 1.0;
	width: 450px;

	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

	color: #000000ff;
	background-color: dialog_bg_color;
}


.CursorVisible .ContextMenuBody
{
	margin-bottom: 0px;
}


.CursorVisible .ContextMenuBodyCentered
{
	margin-bottom: 0px;
}


.ContextMenuBody Button,
.ContextMenuBodyCentered Button,
.ContextMenuBody ParentalButton,
.ContextMenuBodyCentered ParentalButton
{
	min-height: 53px;
	height: fit-children;
	width: 100%;

	box-shadow: fill #00000033 -3px -3px 6px 6px;
}

.ContextMenuBody Label, .ContextMenuBodyCentered Label
{
	text-overflow: ellipsis;
	min-height: 40px;
	height: fit-children;
	width: 100%;
	padding-bottom: 10px;
}

.ContextMenuBody Button:hover,
.ContextMenuBodyCentered Button:hover,
.ContextMenuBody ParentalButton:hover,
.ContextMenuBodyCentered ParentalButton:hover
{
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}

.ContextMenuBody ParentalButton
{
	flow-children: right;
}

.ContextMenuBody ParentalButton.Locked,
.ContextMenuBodyCentered ParentalButton.Locked
{
	wash-color: parental_locked_wash;
	color: #ffffffff;
}

.ContextMenuBody ParentalButton.Locked Label
{
	width: 90%;
}

.ContextMenuBody ParentalButton Image
{
	vertical-align: center;
	horizontal-align: right;
	height: 34px;
	width: 34px;
	opacity: 0.0;
}

.ContextMenuBody ParentalButton.Locked Image
{
	opacity: 1.0;
}



//
// Standard label styles.
//

.StdTitle
{
	font-size: 54px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-family: platformfont;
	color: detailsdatalabel;
}

.StdLabel
{
	font-size: deffontsize;
	font-family: platformfont;
	color: tcstatictext;
}

.StdLabelMed
{
	font-size: medfontsize;
	margin-top: 10px;
	font-family: platformfont;
	color: #ffffff99;
}

.StdLabelMedBlue
{
	font-size: medfontsize;
	margin-top: 10px;
	font-family: platformfont;
	color: applabelsolid;
}

.StdLabelLarge
{
	font-size: largefontsize;
	font-family: platformfont;
	color: #ffffff88;
}


//
// System Button
//
.SystemButton
{
	width: 100%;

	visibility: collapse;
}

.SystemButton.PanelVisible
{
	visibility: visible;
}


.SystemButton Label
{
	text-overflow: ellipsis;
	width: 100%;
}

.SystemButton:hover
{
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}




//
// Slider
//
Slider
{
	// needs to be at least as wide as the thumb and, as the thumb center stops at end
	// of track, needs to allow for 1/2 the height of the thumb on each end
	width: 20px;
	height: 130px;
}

#SliderTrack
{
	height: 120px;
	width: 10px;

	background-color: #283842;
	align: center center;
	border-radius: 3px;
}

Slider.Horizontal #SliderTrack
{
	height: 10px;
	width: 100%;
}

#SliderTrackProgress
{
	width: 10px;
	height: 100%;

	background-color: #5492b8;
	align: center center;
	border-radius: 3px;
}

Slider.Horizontal #SliderTrackProgress
{
	width: 100%;
	height: 10px;
}

#SliderThumb
{
	width: 20px;
	height: 20px;
	background-color: #3885b5;
	border-radius: 10px;
	box-shadow: fill black 1px 1.5px 4px 0px;
}

#SliderDefault
{
	width: 4px;
	height: 40px;
	background-color: #5492b8;
	border-radius: 4px;
//	box-shadow: fill black 1px 1.5px 2px 0px;
}

//
// Loading throbber
//
@keyframes 'loading-throbber-appear'
{
	from
	{
		opacity: 0.0;
	}

	50%
	{
		opacity: 0.0;
	}

	to
	{
		opacity: 1.0;
	}
}

@keyframes 'loading-throbber-bar'
{
	0%
	{
		pre-transform-scale2d: 1.0, 0.6;

		background-color: ui_primary_color;
	}
	30%
	{
		pre-transform-scale2d: 1.0, 1.0;
//		background-color: #529cde;
		background-color: #4cd3fcff;
	}
	55%
	{
		pre-transform-scale2d: 1.0, 0.6;
		background-color: ui_primary_color;
	}
	100%
	{
		pre-transform-scale2d: 1.0, 0.6;
		background-color: ui_primary_color;
	}
}

LoadingThrobber
{
	flow-children: right;
}

LoadingThrobber .Bar
{
	margin-right: 6px;
	width: 12px;
	height: 90px;
	background-color: ui_primary_color;

	animation-name: loading-throbber-bar;
	animation-duration: 1s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
}

LoadingThrobber .Bar1
{
}

LoadingThrobber .Bar2
{
	animation-delay: 0.16s;
}

LoadingThrobber .Bar3
{
	animation-delay: 0.32s;
}

LoadingThrobber.Small .Bar
{
	width: 6px;
	height: 45px;
	margin-right: 3px;
}

LoadingThrobber.Large .Bar
{
	width: 24px;
	height: 180px;
	margin-right: 12px;
}

LoadingThrobber .Bar3,
LoadingThrobber.Small .Bar3,
LoadingThrobber.Large .Bar3
{
	margin-right: 0px;
}

HTMLSimpleNavigationWrapper
{
	width: 100%;
}

#PromoVideosSlideShow
{
	width: 100%;
	height: 100%;

	z-index: all_top_zindex;
}


#PlatformSupport, #SuggestedStatusWrapper
{
	flow-children: down;
	horizontal-align: center;
	width: 100%;

	transition-property: height, transform, opacity;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

#SuggestedStatusWrapper
{
	width: 100%;
}

#LibraryMostRecent:descendantfocus #PlatformSupport,
.LibraryAllGames:descendantfocus #PlatformSupport,
LibrarySuggestions:descendantfocus #SuggestedStatusWrapper
{
	opacity: 1.0;
}


.StatusImage
{
	width: 36px;
	height: 0px;
	visibility: collapse;
	opacity: 0.0;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	horizontal-align: center;
	vertical-align: center;

	overflow: clip clip;

	transition-property: wash-color, opacity, transform, height;
	transition-duration: 0.2s;
	transition-delay: 0.0s;
	transition-timing-function: linear;
}

.AppGridItem:focus #PlatformSupport .StatusImage,
.AppGridItem:hover #PlatformSupport .StatusImage,
.Game:focus #SuggestedStatus .StatusImage,
.Game:hover #SuggestedStatus .StatusImage,
.GameButton:focus #SuggestedStatus .StatusImage,
.GameButton:hover #SuggestedStatus .StatusImage,
LibraryAppDetails .StatusImage,
.UpdatedItem:focus .StatusImage,
.UpdatedItem:hover .StatusImage,
{
	opacity: 1.0;
	height: 36px;
	transition-delay: 0.05s;
}

AppGridItem:focus .StreamingVideoSupport
{
	opacity: 1.0;
	wash-color: applabelsolid;
	margin: 0px;
}

.StreamingVideoAvailable .StreamingVideoSupport
{
	background-image: url( "file://{images}/store/icon_streamingvideo_storefront.png" );
}

#ReadyToDownload
{
	wash-color: installedblue;
	visibility: visible;
	background-image: url( "file://{images}/library/icon_readytodownload.png" );
}

LibraryAppDetails #ReadyToDownload
{
	visibility: collapse;
}
.ReadyToDownload #ReadyToDownload
{
	visibility: visible;
}

.ReadyToPlay #ReadyToDownload, .ReadyToStream #ReadyToDownload, .UnavailableOnPlatform #ReadyToDownload
{
	visibility: collapse;
}

.ReadyToPlay #ReadyToPlay
{
	wash-color: readytoplaygreen;
	opacity: 1.0;
	visibility: visible;
	background-image: url( "file://{images}/library/icon_readytoplay.png" );
}

.ReadyToStream #ReadyToStream
{
	wash-color: readytoplaygreen;
	visibility: visible;
	background-image: url( "file://{images}/library/icon_readytostream.png" );
}


.UnavailableOnPlatform #NotReadyToPlay
{
	wash-color: #666666;
	visibility: visible;
	background-image: url( "file://{images}/library/icon_readytofail.png" );
}

.ReadyToPlay.ReadyToStream #ReadyToStream,
.UnavailableOnPlatform.ReadyToStream #NotReadyToPlay
{
	visibility: collapse;
}

#GridControllerSupport,
.SteamPad #GridControllerSupport
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_keyboard_storefront.png" );
}

.FullController #GridControllerSupport,
.SteamPad .FullController #GridControllerSupport
.VR .VRSupportsXInputController #GridControllerSupport,
{
	visibility: visible;
	background-image: url( "file://{images}/controller_support_full.png" );
}

.VR .VRSupportsSteamVRController #GridControllerSupport,
.VR .VRSupportsOculusController #GridControllerSupport
{
	visibility: visible;
	background-image: url( "file://{images}/library/icon_input_motioncontroller.png" );
}


/* For installed games: */
.AppGridItem #AppGridItemSupportLabels,
#SuggestedStatus
{
	width: 50px;
	height: 9px;
	margin-right: 5px;
	margin-bottom: 5px;

	position: 0px 0px 0px;
	flow-children: right;
	overflow: clip clip;

	transition-property: height, transform;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;

	background-color: black;
	vertical-align: bottom;
	horizontal-align: right;

	z-index: 101;
}

#ParentalLibraryGrid #AppGridItemSupportLabels
{
	opacity: 0.0;
}

#SuggestedStatus
{
	transform: translatey( -43px );
}

.GameButton #SuggestedStatus
{
	transform: translatey( 0px );
}

#RecentRow #SuggestedStatus
{
	margin-bottom: 50px;
	transform: translatey( 0px );
}

.AppGridItem:focus #AppGridItemSupportLabels,
.AppGridItem:hover #AppGridItemSupportLabels,
Button:focus #SuggestedStatus,
Button:hover #SuggestedStatus
 {
	height: 76px;
}

.InstalledState
{
	width: 100%;
	height: 3px;
	background-color: installedblue;
	vertical-align: center;
	horizontal-align: center;
	margin-top: 3px;
	margin-left: 5px;
	margin-right: 5px;
}

.ReadyToPlay .InstalledState
{
	background-color: readytoplaygreen;
}

.UnavailableOnPlatform .InstalledState
{
	background-color: #666666;
}

#MissingImageLabel
{
	opacity: 0.0;
	horizontal-align: left;
	margin-top: 130px;
	padding-right: 60px;
	padding-left: 60px;
	font-size: 34px;
	font-weight: light;
	text-transform: uppercase;
	color: #ffffff99;
	background-color: black;
	width: 100%;
	height: 100%;
	white-space: normal;
	text-align: center;
	transition-property: opacity, color;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

/* Nx Styles to use across client */

.NxLeftNav
{
	width: 425px;
	height: 100%;
	background-color: #00000000;
	flow-children: down;
}

.NxLeftNavFullWrapper .ContentsWrapper
{
	width: 100%;
	height: 100%;
}

.NxLeftNavFullWrapper .ShortcutOrMod .HorizontalRule
{
	visibility: collapse;
}

.NxLeftNavActionsWrapper
{
	width: 100%;
	height: 100%;
	flow-children: down;
	opacity: 1.0;
	overflow: squish scroll;

	margin-top: 190px;
	transition-duration: shortduration;
	transition-property: opacity;
	transition-timing-function: ease-out;

}

.NxLeftNavFullWrapper
{
	width: 100%;
	height: 100%;
}

.NxLeftNavActionsWrapper VerticalScrollBar
{
	width: 6px;
	margin: 3px;
	border-radius: 0px;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #c2c2c290 ), to( #d2d2d290 ) );
	horizontal-align: right;
	vertical-align: center;
}

.NxLeftNavActionsWrapper VerticalScrollBar .ScrollThumb
{
	background-color: #d2d2d2dd;
}

.NxLeftNav:focus .NxLeftNavActionsWrapper, .NxLeftNav:descendantfocus .NxLeftNavActionsWrapper
{
	opacity-mask-scroll-up: url( "file://{images}/library/scroll_data_mask_up.tga" );
	opacity-mask-scroll-down: url( "file://{images}/library/scroll_data_mask_down.tga" );
	opacity-mask-scroll-up-down: url( "file://{images}/library/scroll_data_mask_both.tga" );
}

.NxLeftNavButton
{
	width: 100%;
	margin: 2px 10px 2px 10px;
	padding: 10px 0px 0px 20px;
	height: 48px;
	flow-children: right;
	box-shadow: none;
	color: #67c1f5FF;
	background-color: gradient( linear, 85% 85%, 100% 100%, from( #09334dFF ), to( #09334d00 ) );

}

.NxLeftNavButton:selected {
	background-color: #1579a0;
}
.NxLeftNavButton:selected Label {
	color: #ffffff;
}
.NxLeftNavButton:selected Label .NumberElement {
	color: #ffffff;
}
.NxLeftNavButton:selected Image {
	wash-color: #ffffffff;
}

.NxLeftNavButtonAction
{
	width: 100%;
	margin: 2px 10px 2px 10px;
	padding: 10px 0px 0px 20px;
	height: 48px;
	flow-children: right;
	box-shadow: none;
	color: #67c1f5FF;
	background-color: #09334dFF;

	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #67c1f5FF;
}

.NxLeftNavButtonAction:focus {
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #ffffffFF;
}


.NxLeftNavButton Label,
.NxLeftNavButtonAction Label
{
//width: 100%;
	font-family: platformfont;
	font-size: 26px;
	font-weight: normal;
	color: #67c1f5ff;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}
.NxLeftNavButton Label .NumberElement,
.NxLeftNavButtonAction Label .NumberElement
{

}

.ButtonFlowRight
{
	width: 100%;
	flow-children: right;
	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.NxLeftNavButton:focus .ButtonFlowRight
{
	transform: translateX( 4px );
}

.NxLeftNavButton:focus .FilterHelp
{
	wash-color: #09334dEE;
}

.ButtonCountCapsule
{
	flow-children: right;
	horizontal-align: right;
	margin-right: 16px;
	margin-top: -1px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 1px;
	border-radius: 8px;
	height: 32px;
	font-size: 24px;
//	font-weight: bold;

	background-color: #051e3388;
	color: #5aadde99;
	opacity: 1.0;
}


.NxLeftNavButton:focus .ButtonCountCapsule
{

	background-color: #072e4755;
	color: #072e47;
	opacity: 1.0;
}


.NxLeftNavButton:focus Label,
.NxLeftNavButtonAction:focus Label
{
	color: #072e47;

//transform: translateX( 7px );

}
.NxLeftNavButton:focus Label .NumberElement,
.NxLeftNavButtonAction:focus Label .NumberElement
{
	color: #072e47;
}


.NxLeftNavButton.Locked
{
	wash-color: parental_locked_wash;
}

.NxLeftNavButton.Locked:focus
{
	wash-color: none;
}

.NxLeftNavButton.Locked Label
{
	width: fill-parent-flow(1.0);
}

.NxLeftNavButton Image,
.NxLeftNavButtonAction Image
{
	vertical-align: center;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: -4px;
	height: 32px;
	width: 32px;
	wash-color: #2976a3ff;
	opacity: 1.0;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.NxLeftNavButton:focus Image,
.NxLeftNavButtonAction:focus Image
{
	wash-color: #09334dFF;
//transform: translateX( 4px );
}

.NxLeftNavButton.Locked Image
{
	opacity: 1.0;
	wash-color: none;

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

.NxLeftNavButton.Locked:descendantfocus Image
{
	wash-color: #2f2f2fff;
}

.NxLeftNavButton:hover,
.NxLeftNavButtonAction:hover
{
	transition-duration: 0.23s !immediate;
	box-shadow: none;
	background-color: all_games_hover;
}

.NxLeftNavButton:hover Label
{
	color: applabelsolid;
}

.NxLeftNavButton:focus,
.NxLeftNavButtonAction:focus
{
	color: #082846FF;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

	animation-name: nx-button-focus;
	animation-duration: longduration;
	animation-delay: shortduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.NxLeftNav .SmallHeaderImage
{
	margin: 0px 10px 0px 10px;
	width: 100%;
	background-color: dialog_bg_color;
}

.NxLeftNav:descendantfocus, .NxLeftNav:focus
{
	z-index: 100;
}

.NxGridBackground
{
	width: 100%;
	height: 100%;


	margin-top: 4px;
	box-shadow: #000000aa -2px -2px 4px 4px;

	background-color: bgcolor;
	background-image: url( "file://{images}/store/store_app_bg.png" );
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-size: 1920px 1080px;

}

.NxGridButtonRow,
.ContentHover .NxGridButtonRow,
.ContentHover .NxGridButtonRow:descendantfocus
{
	padding-top: 37px;
	padding-left: 70px;
	width: 480px;
	height: 100%;
	flow-children: none;
	overflow: clip scroll;

	transform: translateX( -35px ) translateY( -8px );

	opacity: 0.5;
	transition-delay: 0.0s;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-property: transform, pre-transform-scale2d, opacity, opacity-mask;
	pre-transform-scale2d: 1;

	opacity-mask: url( "file://{images}/library/NxGridButtonRow_right.tga" ) 1.0;
}

.NxGridButtonRow:descendantfocus,
.MenuHover .NxGridButtonRow,
{
	transform: translateX( 0px ) translateY( -8px );
	opacity: 1;
	opacity-mask: none;
}

.GamesButtonContainer
{
	width:100%;
	flow-children: down;
}

.NxGridButtonWell
{
	width:100%;
	height:840px;
}

.MenuHover .NxGridButtonRow .NxGridButtonWell,
.NxGridButtonRow:descendantfocus .NxGridButtonWell,
{
	opacity: 0.0;
}

@keyframes 'nx-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #1483baff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}
}

@keyframes 'nx-filter-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #1484baff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}
}

/* Right hand filter tab */

.NxFilterTab
{
	width: 420px;
	height: fit-children;
	max-height: 700px;
	opacity: 1.0;
	position: 1825px 120px 0px;
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	background-color: black;
	overflow: clip;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #1184baee ), to( #0e2744ee ) );

	box-shadow: fill #00000066 -4px -4px 6px 6px;

	flow-children: down;

	transition-property: position, color, background-color, transform, opacity, height, width, saturation;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

	z-index: 5;

}

.ContentAreaFocus .NxFilterTab,
.ContentHover .NxFilterTab
{
	position: 1630px 120px 0px;
}
.MenuHover .NxFilterTab
{
	position: 1825px 120px 0px;
}


.NxFilterTab:descendantfocus
{
	opacity: 1.0;
	saturation: 1.0;
	transform: translatez( 20px );
	position: 1480px 120px 0px;
}

.NxFilterTab ToggleButton.CheckBox,
.NxFilterTab RadioButton,
.NxFilterTab .NxTagHeader,
.NxFilterTab Button,
.NxFilterTab.EmptyFilter Button.NxFilterButton,
.NxFilterTab DropDown
{
	height: 0px;

	margin: 0px;
}
.NxFilterTab:descendantfocus ToggleButton,
.NxFilterTab:descendantfocus RadioButton
{
	margin: 2px 10px 2px 0px;
}

.NxFilterTab:descendantfocus ToggleButton,
.NxFilterTab ToggleButton:selected,
.NxFilterTab:descendantfocus RadioButton,
.NxFilterTab RadioButton:selected,
.NxFilterTab:descendantfocus .NxTagHeader,
.NxFilterTab:descendantfocus Button,
.NxFilterTab:descendantfocus DropDown,
.NxFilterTab .AlwaysVisible
{
	height: 48px;
}

.NxFilterTab .NxTagHeader.FilterHeader {
	height: 56px;
	margin-left: 10px;
}

.NxFilterTab .FilterHeader
{
	font-size: 34px;
	color: #ffffff;

}

.NxFilterWrapper
{
	position: 150px 0px 0px;
	width: 400px;
	height: fit-children;
	padding: 0px;
	margin-left: 10px;
	z-index: 10;

	overflow: clip scroll;

	flow-children: down;

	transition-property: position, color, background-color, transform, opacity, height, width;
	transition-duration: mediumduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

.NxFilterWrapper:descendantfocus
{
	position: 0px 0px 0px;
	max-height: 600px;
}

.NxFilterButton
{
	width: 100%;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	height: 45px;

	flow-children: right;
	box-shadow: none;
	color: #67c1f5FF;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #25a9df00 ), to( #082745ff) );

}


.NxFilterButton:selected {
	background-color: #1579a0;
}

.NxFilterButton Label
{
	width: 100%;
	font-family: platformfont;
	font-size: 24px;
	font-weight: normal;
	color: #67c1f5ff;
	vertical-align: center;
}

.NxFilterButton:focus Label
{
	color: #FFFFFF;
}


.NxFilterButton.Locked
{
	wash-color: parental_locked_wash;
}

.NxFilterButton.Locked:focus
{
	wash-color: none;
}

.NxFilterButton.Locked Label
{
	width: fill-parent-flow(1.0);
}

.NxFilterButton Image
{
	vertical-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 32px;
	width: 32px;
	wash-color: #67c1f5ff;
	opacity: 1.0;
}

.NxFilterButton:focus Image
{
	vertical-align: center;
  margin-right: 0px;
  margin-bottom: 0px;
  height: 32px;
  width: 32px;
  wash-color: #ffffffff;

	opacity: 1.0;
}

.NxFilterButton.Locked Image
{
	opacity: 1.0;
	wash-color: none;

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

.NxFilterButton.Locked:descendantfocus Image
{
	wash-color: #2f2f2fff;
}

.NxFilterButton:focus
{
	color: #082846FF;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );


	animation-name: nx-filter-button-focus;
	animation-duration: longduration;
	animation-delay: shortduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.NxFilterButton:hover
{
	transition-duration: 0.23s !immediate;
	box-shadow: none;
}


/* Testing Styles Only */
.zz_grid {
	z-index: 50000;
	opacity: 0;
}

.LeftRightFlow,
.FlowRight
{
	flow-children: right;
}

.TopBottomFlow,
.FlowDown
{
	flow-children: down;
}

.OnlyMouseKB,
.OnlyController
{
	visibility: collapse;
}

.MouseKBPresent .OnlyMouseKB,
.ControllerPresent .OnlyController
{
	visibility: visible;
}

HTML #BrowserDisabledMessage,
AutoAuthHTML #BrowserDisabledMessage,
{
	horizontal-align: center;
	vertical-align: center;
	width: 60%;
	height: 160px;
	font-size: 40px;
	color: ui_primary_color;
	white-space: normal;
}

HTML.BrowserDisabled LoadingThrobber,
AutoAuthHTML.BrowserDisabled LoadingThrobber
{
	visibility: collapse;
}


//
// Edge scroller and mouse scroll region base styles
//
EdgeScrollBar
{
	height: 100%;
	width: 100%;

	opacity: 1.0;

	transition-property: transform;
}

.EdgeScrollButton,
MouseScrollRegion
{
	z-index: 300;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;

	opacity: 0.0;
	transition-property: opacity, background-color;
	transition-duration: mediumduration, mediumduration;
	transition-delay: 0.2s, 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

EdgeScrollBar.Horizontal .EdgeScrollButton,
.LeftMouseScrollRegion,
.RightMouseScrollRegion
{
	width: 80px;
	height: 250px;
}

EdgeScrollBar.Vertical .EdgeScrollButton,
.TopMouseScrollRegion,
.BottomMouseScrollRegion
{
	width: 250px;
	height: 60px;
}

.CursorVisible .EdgeScroller:descendantfocus:hover .EdgeScrollButton,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.PageScroll .EdgeScrollButton,
.CursorVisible .MouseScrollContainer:hover MouseScrollRegion
{
	opacity: 1.0;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.DragScrolling .EdgeScrollButton,
.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Flick .EdgeScrollButton,
.CursorVisible .MouseScrollContainer.DragScrolling:hover MouseScrollRegion,
.CursorVisible .MouseScrollContainer.Flick:hover MouseScrollRegion
{
	opacity: 0.0;
}

.CursorVisible .MouseScrollContainer.HideScrollUp .TopMouseScrollRegion,
.CursorVisible .MouseScrollContainer.HideScrollDown .BottomMouseScrollRegion,
.CursorVisible .MouseScrollContainer.HideScrollLeft .LeftMouseScrollRegion,
.CursorVisible .MouseScrollContainer.HideScrollRight .RightMouseScrollRegion,
.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.AtMinimum #MinButton,
.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.AtMaximum #MaxButton
 {
	 opacity: 0.2;
 }

EdgeScrollBar.Horizontal #MinButton,
.LeftMouseScrollRegion
{
	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	background-color: mouse_off_bg_left;
	align: left center;
}

EdgeScrollBar.Horizontal #MaxButton,
.RightMouseScrollRegion
{
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-color: mouse_off_bg_right;
	align: right center;
}

EdgeScrollBar.Vertical #MinButton,
.TopMouseScrollRegion
{
	background-image: url( "file://{images}/mouse/arrowUdefault.tga" );
	background-color: mouse_off_bg_up;
	align: center top;
}

EdgeScrollBar.Vertical #MaxButton,
.BottomMouseScrollRegion
{
	background-image: url( "file://{images}/mouse/arrowDdefault.tga" );
	background-color: mouse_off_bg_bottom;
	align: center bottom;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Horizontal #MinButton:hover,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Horizontal.PageScroll #MinButton:hover,
.CursorVisible .MouseScrollContainer:hover .LeftMouseScrollRegion:hover
{
	background-color: mouse_hover_bg_left;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Horizontal #MaxButton:hover,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Horizontal.PageScroll #MaxButton:hover,
.CursorVisible .MouseScrollContainer:hover .RightMouseScrollRegion:hover
{
	background-color: mouse_hover_bg_right;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Vertical #MinButton:hover,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Vertical.PageScroll #MinButton:hover,
.CursorVisible .MouseScrollContainer:hover .TopMouseScrollRegion:hover
{
	background-color: mouse_hover_bg_up;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Vertical #MaxButton:hover,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Vertical.PageScroll #MaxButton:hover,
.CursorVisible .MouseScrollContainer:hover .BottomMouseScrollRegion:hover
{
	background-color: mouse_hover_bg_bottom;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Vertical .EdgeScrollButton:active,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Vertical.PageScroll .EdgeScrollButton:active,
.CursorVisible .MouseScrollContainer:hover .TopMouseScrollRegion:active,
.CursorVisible .MouseScrollContainer:hover .BottomMouseScrollRegion:active
{
	transition-delay: 0.2s, 0.0s;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Horizontal #MinButton:active,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Horizontal.PageScroll #MinButton:active,
.CursorVisible .MouseScrollContainer:hover .LeftMouseScrollRegion:active
{
	background-color: mouse_active_bg_left;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Horizontal #MaxButton:active,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Horizontal.PageScroll #MaxButton:active,
.CursorVisible .MouseScrollContainer:hover .RightMouseScrollRegion:active
{
	background-color: mouse_active_bg_right;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Vertical #MinButton:active,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Vertical.PageScroll #MinButton:active,
.CursorVisible .MouseScrollContainer:hover .TopMouseScrollRegion:active
{
	background-color: mouse_active_bg_up;
}

.CursorVisible .EdgeScroller:descendantfocus:hover EdgeScrollBar.Vertical #MaxButton:active,
.CursorVisible .EdgeScroller:hover EdgeScrollBar.Vertical.PageScroll #MaxButton:active,
.CursorVisible .MouseScrollContainer:hover .BottomMouseScrollRegion:active
{
	background-color: mouse_active_bg_bottom;
}

.BottomMouseScrollRegion
{
	transform: translateY( 0px );
}

.LeftMouseScrollRegion
{
	transform: translateX( -10px );
}