/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

DOTADiretide2020CosmeticsPage
{
	width: 100%;
	height: 100%;
	margin-top: 80px;
}

#CosmeticsTable
{
	width: 1280px;
	flow-children: right;
	horizontal-align: center;
	margin-top: 96px;
	margin-top: 20px;
}

#DiretideCosmeticsContainer
{
	flow-children: down;
	width: 100%;
	height: 100%;
	margin: 0px;
}

.ItemHitBox
{
	width: 400px;
	height: 300px;
	margin-bottom: 120px;
	horizontal-align: center;
	vertical-align: middle;
}

#DiretideBook
{
	width: 1320px;
	height: 100%;
	vertical-align: middle;
	horizontal-align: center;
	background-image: url("s2r://panorama/images/events/diretide/2020/diretidebook_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

#BackgroundStrip
{
	width: 100%;
	height: 480px;
	margin-bottom: 20px;
	background-color: #000e;
	vertical-align: center;
	box-shadow: #000d 0px 0px 18px 0px ;
}

#BackgroundContainer
{
	width: 100%;
	height: 100%;
}

.ItemAndDesc
{
	flow-children: down;
	vertical-align: bottom;
	horizontal-align: center;
	background-color: #000d;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #0000 ), color-stop( 0.25, #000d ), to( #0003 ) );
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #000f ), color-stop( 0.5, #000a ), to( #0000 ) ) border-radius: 8px;
	padding: 4px 16px;
}

.ItemFooter
{
	flow-children: down;
	vertical-align: bottom;
	horizontal-align: center;
}

.BGCosmeticImage
{
	width: 110%;
	height: 110%;
	background-image: url("s2r://panorama/images/events/diretide/2020/ghost_courier_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-left: -5%;
	saturation: 0.5;
	wash-color: #818A46cc;
	transition-property: saturation, brightness, wash-color;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
	margin-top: -56px;
}

.BGCosmeticImage.Hovered
{
	brightness: 1.2;
	saturation: 0.8;
	wash-color: #779d5988;
}

.BGCosmeticImage .InspectIcon
{
	vertical-align: bottom;
	horizontal-align: right;
	margin-bottom: 150px;
	margin-right: 75px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
}

.BGCosmeticImage.Hovered .InspectIcon
{
	opacity: .3;
}

.CampaignRewardContainer
{
	width: fill-parent-flow( 1.0 );
	height: 500px;
}

.CampaignRewardContainer.Equipped .BGCosmeticImage.Hovered,.CampaignRewardContainer.NotEquipped .BGCosmeticImage.Hovered
{
	brightness: 2;
	saturation: 1.0;
	wash-color: #fff;
}

.CampaignRewardContainer.Equipped .BGCosmeticImage,.CampaignRewardContainer.NotEquipped .BGCosmeticImage
{
	saturation: 1;
	wash-color: #fff;
}

.NotOwnedLabel
{
	visibility: collapse;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	color: #818A46;
	color: #cdd3a5;
	font-size: 32px;
}

#ItemButton
{
	visibility: collapse;
	horizontal-align: center;
}

#ItemButton Label
{
	font-size: 32px;
	text-transform: uppercase;
	text-align: center;
	margin-top: 0;
	color: #cdd3a5;
}

#ItemButton:hover Label
{
	color: white;
}

#ItemButton .TickBox
{
	width: 32px;
	height: 32px;
	margin-right: 4px;
	border-radius: 20%;
	border-color: #cdd3a5;
}

#ItemButton:hover .TickBox
{
	border-color: white;
}

#ItemButton:selected Label
{
	color: white;
}

#ItemButton:selected .TickBox
{
	background-color: #505a0d;
	background-image: url("s2r://panorama/images/control_icons/checkbox_check_psd.vtex");
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	wash-color: #e1f173;
	box-shadow: #778a0071 0px 0px 8px 0px ;
}

.CampaignRewardContainer.Equipped #ItemButton,.CampaignRewardContainer.NotEquipped #ItemButton,.CampaignRewardContainer.NotOwned .NotOwnedLabel
{
	visibility: visible;
}

.ThreeImages
{
	width: 100%;
	height: 100%;
	flow-children: right;
}

#GhostlyCourier
{
	background-image: url("s2r://panorama/images/events/diretide/2020/ghost_courier_psd.vtex");
	margin-top: 0px;
	background-position: bottom;
}

#PumpkinHead
{
	background-image: url("s2r://panorama/images/events/diretide/2020/pumpkin_head_psd.vtex");
	background-position: 50% 60%;
}

#ShaderEffect
{
	background-image: url("s2r://panorama/images/events/diretide/2020/shader_psd.vtex");
	margin-top: 0px;
	background-position: bottom;
}

.PageTitle
{
	font-size: 50px;
	text-transform: uppercase;
	font-family: titleFont;
	color: #ADDB26;
	color: gradient( linear, 0% 0%, 100% 0%, from( #BAE816 ), color-stop( 0.5, #FFF8B9 ), to( #BAE816 ) );
	padding: 0 64px;
	margin-bottom: 12px;
	margin-top: 56px;
	text-align: center;
	text-shadow: 0px 0px 12px 1 #ADDB2677;
	horizontal-align: center;
	letter-spacing: 2px;
	transform: rotateX(35deg) scaleY(1.5);
}

.Description
{
	width: 600px;
	horizontal-align: center;
	text-align: center;
	color: #ccc;
	color: gradient( linear, 0% 0%, 100% 0%, from(#7a9711 ), color-stop( 0.5, #e4f78e ), to( #7a9711 ) );
	text-shadow: 2px 2px 4px black;
	font-size: 20px;
}

.CosmeticEntry
{
	flow-children: down;
	margin: 0px 8px;
	padding: 16px;
}

.ItemTitle
{
	font-size: 28px;
	font-family: titleFont;
	color: #ADDB26;
	color: gradient( linear, 0% 0%, 0% 100%, from( #fff27f ), to( #BAE816 ) );
	text-align: center;
	text-shadow: 0px 0px 8px 7 #000;
	horizontal-align: center;
	margin-top: 0px;
	text-overflow: shrink;
	height: 40px;
	transition-property: text-shadow, color;
	transition-duration: .32s;
	transition-timing-function: ease-in;
}

.CampaignRewardContainer.Equipped .ItemTitle
{
	color: gradient( linear, 0% 0%, 0% 100%, from( #fff8bc ), to( #dfff6a ) );
	text-shadow: 0px 0px 8px 2 #8ab802;
}

.ItemDesc
{
	horizontal-align: center;
	margin-bottom: 18px;
	text-shadow: 1px 1px 2px 2 #000;
	padding: 0 12px;
	text-align: center;
}

#CornerFog
{
	width: 100%;
	height: 500px;
	vertical-align: bottom;
	horizontal-align: right;
	transition-property: opacity;
	transition-duration: .25s;
	opacity-mask: url("s2r://panorama/images/masks/left_top_fade_psd.vtex")0;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1.8s;
	transition-timing-function: ease-in;
	transform: scaleX(-1);
}

#CornerFog.SceneLoaded
{
	opacity: 0.35;
}