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

.ArcanaMonkeyKing #DebutBackgroundImage
{
	width: 100%;
	height: 100%;
	background-image: none;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: black;
	transition-property: brightness, transform;
	transition-duration: .28s;
	transition-timing-function: ease-in;
	border-top: 1px solid #ffffff11;
	border-left: 1px solid #ffffff07;
	border-right: 1px solid #ffffff07;
}

#ArcanaScene
{
	transform: scaleX(1);
	width: 100%;
	height: 100%;
	pre-transform-scale2d: 1;
	vertical-align: middle;
	horizontal-align: center;
	transition-property: width, height, blur, opacity;
	transition-duration: .48s;
	transition-timing-function: ease-in;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
}

#ArcanaScene.SceneLoaded
{
	opacity: 1;
}

#TempButtons
{
	vertical-align: middle;
}

#TempButtons Button
{
	min-width: 0px;
}

#TempButtons2
{
	vertical-align: middle;
	padding-top: 80px;
}

#TempButtons2 Button
{
	min-width: 0px;
}

#InformationBody,#InnerPanel
{
	opacity: 1;
}

#InformationBody
{
	padding: 24px;
}

.StylesBlock
{
	flow-children: down;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .32s;
	transition-timing-function: ease-in;
}

.Form1Visible #Form1,.Form2Visible #Form2,.Form3Visible #Form3,.Form4Visible #Form4
{
	opacity: 1;
}

#StyleContainer
{
	width: 500px;
	height: 200px;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 170px;
	margin-right: 890px;
}

.FormLabel
{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin-bottom: -6px;
	color: #FFE9CC88;
	text-shadow: 0px 1px 3px 3.0 #000;
}

.FormName
{
	text-transform: uppercase;
	font-size: 32px;
	color: #FFE9CC;
	text-shadow: 0px 0px 13px 1.0 #EF8D2855;
	text-shadow: 0px 1px 3px 3.0 #000;
}

.Form1Visible .FormName
{
	color:#F2BC92;
}

.Form2Visible .FormName
{
	color:#95E2E3;
}

.Form3Visible .FormName
{
	color:#4F9B6F;
}

.Form4Visible .FormName
{
	color:#F0AF42;
}

.FormLore
{
	font-size: 18px;
	color: white;
	text-shadow: 0px 1px 3px 3.0 #000;
}

#StyleButtons
{
	width: 700px;
	height: fit-children;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 130px;
	margin-right: 690px;
}

#NextButton
{
	horizontal-align: right;
}

.ButtonBevel:disabled
{
	opacity: 0;
}

#ItemName
{
	width: 552px;
	font-size: 32px;
	text-overflow: shrink;
	height: 42px;
	text-shadow: 0px 0px 7px 1.0 #E07E7C;
}

#Portrait
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/customportrait_psd.vtex");
}

#HeroIcon
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/heroicon_psd.vtex");
}

#AbilityIcon
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/abilityicon_psd.vtex");
}

#AbilityIcon2
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/abilityicon2_psd.vtex");
}

#MinimapIcon
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/minimapicon_psd.vtex");
}

.PromoActive #FooterPanel
{
	height: 64px;
	horizontal-align: center;
	padding-right: 24px;
	padding-left: 24px;
	margin-bottom: 24px;
}

.Promo
{
	horizontal-align: center;
}

.Promo Label
{
	text-shadow: 0px 0px 7px 1.0 #E07E7C;
	color: #F4E2AE;
}

#Buttons
{
	horizontal-align: center;
}

.PromoActive #InnerPanel
{
	height: 534px;
	padding-right: 26px;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #000a ), to( #0E1919ee ) );
	opacity-mask: url("s2r://panorama/images/masks/softedge_vertical_vscroll_wide_psd.vtex") 1.0;
}

#DebutInformation
{
	background-color: #000e;
}

#ItemLore
{
	margin-right: 90px;
}

#MKComic
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_monkey_king/arcanacomic_psd.vtex");
	background-size: 100%;
	width: 120px;
	height: 90px;
	overflow: noclip;
	vertical-align: top;
	horizontal-align: center;
	margin-top: 200px;
	margin-left: 1320px;
	transform: rotateZ(10deg) rotateY(-10deg);
	pre-transform-scale2d: .95;
	opacity: 1;
	background-color: red;
	background-size: 100%;
	transition-property: opacity, pre-transform-scale2d, brightness;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

#MKComic:hover
{
	pre-transform-scale2d: 1;
	brightness: 2;
}