.Logo
{
	width: 276px;
	height: 69px;
	margin-top: 39px;
	margin-left: 40px;
	opacity: 0.85;

	transition-property: opacity;
	transition-duration: 0.23s;
}

.BehindTextInputHandler .Logo
{
	opacity: 0.0;
}

.TopRow
{
	margin: 0px;
	margin-right: 10px;
	vertical-align: top;
	padding: 65px 66px;
	flow-children: right;
	height: 263px;
	width: 100%;
	z-index: 2000;
	transition-property: blur, saturation, opacity, transform !immediate;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.TopRow Button
{
	padding: 10px;
	flow-children: right;
	horizontal-align: right;
}

.TopRow Button Image
{
	vertical-align: center;
	horizontal-align: center;
	wash-color: ui_primary_color;
	//margin-right: -4px;
}

.TopRow Button:hover Image
{
	wash-color: ui_common_control_hover; 
}

.TopRow Button Label
{
	margin-left: 4px;
	vertical-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	color: tcexitrow;
	font-size: 30px;
	line-height: 38px;
	max-width: 300px;
	font-family: platformfont;

	white-space: nowrap;
	text-overflow: clip;
	transition-property: opacity, max-width;
	transition-duration: 0.15s;
	transition-delay: 0.0s !immediate;
	transition-timing-function: linear, ease-out;
	max-width: 0px;
	opacity: 0.0;
}

.TopRow Button:hover Label
{
	max-width: 300px;
	opacity: 1.0;
	color: tcexitrowhover;
}

#SettingsExitRow
{
	vertical-align: center;
	horizontal-align: right;
	flow-children: right;
	color: tcexitrow;
	font-size: 36px;
	padding: 10px;
}

.BehindTextInputHandler #SettingsExitRow
{
	visibility: collapse;
}

.TopRow Button
{
	padding: 8px 8px;
	box-shadow: #eeeeee00 -5px -5px 6px 10px;
	border: 5px solid #0d1c2200;
	color: tcexitrow;
	background-color: #0d192100;

	transition-property: border, blur, background-color, color, transform, box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;

}

.TopRow Button Image
{
	transition-duration: 0.4s;
	transition-property: wash-color;
	transition-timing-function: ease-out;

	wash-color: ui_primary_color;
}

.TopRow Button:hover Image
{
	transition-duration: 0.3s !immediate;
	wash-color: ui_common_control_hover; 
}

.TopRow Button:hover
{
	transition-duration: 0.3s !immediate;

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

.TopRow Button:focus
{
	transition-duration: 0.3s !immediate;

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

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

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

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

.TopRow:descendantfocus Label
{
	max-width: 300px;
	opacity: 1.0;
}

.TopRow Button:focus Label
{
	color: tcexitrowfocus;
}

Join.BehindMessageBox:descendantfocus, LoginUser.BehindMessageBox:descendantfocus
{
	transition-property: blur, saturation, opacity, wash-color, transform !immediate;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;

	saturation: 0.9;
	opacity: 1.0;
	blur: gaussian( 1.5 );
	wash-color: #00000066;
}

Join.BehindTextInputHandler.BehindMessageBox:descendantfocus, LoginUser.BehindTextInputHandler.BehindMessageBox:descendantfocus
{
	blur: none;
	saturation: 1.0;
	wash-color: #00000000;
}