@define shortduration: 0.25s;
@define shortmedduration: 0.25s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

Join
{
	opacity: 0.0;
	perspective: 1000;
	perspective-origin: 50% 50%;
	position: 0px 0px 0%;
	width: 100%;
	height: 100%;
	visibility: visible;

	font-family: platformfont;

	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.20s;
	transition-timing-function: linear;
	transform: translateX(0px);
}

Join:descendantfocus
{
	opacity: 1.0;
}

.ShowingLoginProgress Join
{
	opacity: 0.0;
}

#BodyWrapper
{
	width: 100%;
	height: 100%;
	opacity-mask: none;
	z-index: 100;
}

.JoinCarousel
{
	width: 3500px;
	height: 700px;
	perspective: 1000;

	position: -790px 200px -55px;
	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.0;
	opacity: 0.6;
	saturation: 1.0;
	wash-color: bgcolorwashlight;
	overflow: noclip clip;

	transform: translatez(0px);
	blur: none;
	flow-children: right;
	opacity-mask: none;

	transition-property: opacity, opacity-mask, transform, position;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;

	transition-duration: shortduration;
	transition-timing-function: ease-in;
}

.JoinCarousel:descendantfocus
{
	width: 3500px;
	perspective: 1000;

	position: -790px 200px 0px;
	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
	saturation: 1.0;
	wash-color: none;
	overflow: noclip clip;

	transform: translatez(0px);
	blur: none;
	flow-children: right;
	opacity-mask: none;
}


JoinItem
{
	width: 390px;
	height: 600px;
	border-radius: 0px;
	padding-top: 40px;
	margin-left: 15px;
	margin-right: 15px;
	vertical-align: center;

	pre-transform-scale2d: 0.8;

	transition-property: pre-transform-scale2d, transform, position;
	transition-duration: shortmedduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

JoinItem:focus
{
	transform: translatey(-30px , translatez(0px);
	opacity: 1.0;
	saturation: 1.0;
	pre-transform-scale2d: 1.0;
}

JoinItem:focus:hover
{
	pre-transform-scale2d: 1.05;
}

JoinItem .JoinItemContainer
{
	margin: 14px;

	opacity: 0.85;
	width: 100%;
	height: 465px;
	flow-children: down;
	vertical-align: top;
	padding-top: 40px;
	padding-bottom: 10px;
	background-color: #00000000;
	box-shadow: #00000000 -3px -3px 6px 6px;

	transition-property: background-color, box-shadow, opacity, transform, border;
	transition-duration: shortmedduration;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

JoinItem:focus .JoinItemContainer
{
	background-color: message_box_bg;
	pre-transform-scale2d: 1.0;
	box-shadow: box_shadow_on_color -3px -3px 6px 6px;
	transform: translateY( 35px );
	opacity: 1.0;

	transition-duration: 0.23s;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

JoinItem .JoinItemImageFrame
{
	horizontal-align: center;
	width: 267px;
	height: 267px;
	border-radius: 3px;
	background-color: transparent_module;

	transition-property: background-color, border, box-shadow, pre-transform-scale2d;
	transition-duration: shortmedduration;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

JoinItem:hover
{
	transition-duration: 0.23s;

	pre-transform-scale2d: .86;
}

JoinItem:descendantfocus:hover
{
	transition-duration: 0.25s !immediate;

	pre-transform-scale2d: 1.05;
}

JoinItem:focus .JoinItemImageFrame
{
	border-color: #00000000;
	background-color: #00000000;
	box-shadow: #00000000 0px 0px 0px 0px;
	pre-transform-scale2d: 1.0;
}

JoinItem:focus .JoinItemImageBezel
{
	pre-transform-scale2d: 1.0;
	border-radius: 0px;
}

JoinItem .JoinItemImageBezelOn
{
	border-width: 0px;
	border-radius: 24px;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #f1f1f1 ), to( #6c6c6c ) );

	height: 270px;
	width: 270px;

	horizontal-align:center;
	vertical-align:center;
	pre-transform-scale2d: 0.7;

	transition-property: pre-transform-scale2d;
	transition-duration: shortmedduration;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

JoinItem .JoinItemImageBezel
{
	border-width: 0px;

	width: 253px;
	height: 253px;

	horizontal-align: center;
	vertical-align: center;
	pre-transform-scale2d: 0.8;

	transition-property: pre-transform-scale2d;
	transition-duration: shortmedduration;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

JoinItem:focus .JoinItemImageBezel
{
	width: 251px;
	height: 251px;
}

JoinItem:disabled
{
	opacity: 0.2;
}

JoinItem .BezelOutside
{
	border-radius: 0px;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #f1f1f1 ), to( #6c6c6c ) );
}

JoinItem .BezelInside
{
	background-color: #000000;
	border-radius: 0px;
}

JoinItem:focus .JoinItemImage
{
	opacity: 1.0;
	saturation: 1.0;
}

JoinItem .JoinItemImage
{
	height: 237px;
	width: 237px;
	horizontal-align: center;
	vertical-align: center;
	opacity: 0.85;
	saturation: 0.9;

	transition-property: pre-transform-scale2d, opacity;
	transition-duration: shortmedduration;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

JoinItem:focus Label
{
	opacity: 1.0;
	color: applabelsolid;
	max-height: 96px;
	transform: translateY( 12px );
}

JoinItem Label
{
	margin-left: 10px;
	color: applabelsolid;
	margin-right: 10px;
	margin-top: 12px;
	margin-bottom: 0px;
	max-height: 54px;
	line-height: 48px;
	width: 342px;
	vertical-align: top;
	horizontal-align: center;
	background-color: #00000000;

	font-size: 40px;
	font-weight: bold;
	font-family: platformfont;
	text-align: center;
	text-overflow: clip;
	white-space: normal;

	transition-property: transform, opacity;
	transition-timing-function: ease-in;
	transition-duration: 0.25s;
	opacity: 0.7;
	color: applabel;
}

 .JoinGlow
{
	transform: translateZ( -70px );

	opacity: 0.65;
	width: 100%;
	height: 600px;
	z-index: -500;

	margin-bottom: 40px;
	horizontal-align: center;
	vertical-align: center;

	transition-property: opacity, transform !immediate;
	transition-delay: 0.1s, 0.0s;
	transition-duration: 0.35s, 0.35s;
	transition-timing-function: ease-in;
}