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

DOTACustomUIRoot
{
	width: 100%;
	height: 100%;
}

DOTACustomUITypeContainer
{
	width: 100%;
	height: 100%;
}

DOTATooltipManager
{
	width: 100%;
	height: 100%;
}

DOTAContextMenuManager
{
	width: 100%;
	height: 100%;
}

DOTAPopupManager
{
	width: 100%;
	height: 100%;
}

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

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

    padding: 0 8px 0 8pc;
}

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

.CustomGameInfo
{
    width: 100%;
}

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

#GameInfoButton
{
    padding: 4px;
    margin-left: -8px;
    width: 40px;
    height: 64px;
    background-color: #25292f;
    vertical-align: top;
    transform: translateY( 50% );
    transition-delay: 0.5s;
    transition-duration: 0.7s;
    transition-property: transform, box-shadow, opacity;
    transition-timing-function: ease-in;
	box-shadow: fill #00000088 -4px -4px 8px 8px;
    border-radius: 8px;
}

.CustomUIState_HeroSelection #GameInfoButton,
.CustomUIState_HUD #GameInfoButton
{
    transform: translateY( 64px );
}

.gameinfo_visible #GameInfoButton
{
	box-shadow: fill #ffffff88 -2px -2px 4px 4px;
}

#GameInfoIcon
{
    width: 24px;
    height: 24px;

    opacity: 0.3;

    vertical-align: top;
    horizontal-align: right;

   background-image: url("s2r://panorama/images/custom_gameinfo_icon_psd.vtex");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


#GameInfoButton:hover #GameInfoOpenClose,
#GameInfoButton:hover #GameInfoIcon
{
    opacity: 0.7;
}

#GameInfoButton:active #GameInfoOpenClose,
#GameInfoButton:active #GameInfoIcon
{
    opacity: 1;
}

#GameInfoOpenClose
{
    width: 24px;
    height: 24px;

    horizontal-align: right;
    vertical-align: bottom;
    opacity: 0.3;
    

    background-image: url("s2r://panorama/images/custom_gameinfo_open_psd.vtex");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.gameinfo_visible #GameInfoOpenClose
{
    background-image: url("s2r://panorama/images/custom_gameinfo_close_psd.vtex");
    background-size: 100% 100%;
}

#GameInfoPanel
{
    background-color: #25292f;
    width: 600px;
    height: 100%;
    transform: translateX( -100% );
    transition-duration: 0.3s;
    transition-property: transform;
	box-shadow: fill #00000088 -4px -4px 8px 8px;
}

.CustomUIState_HeroSelection #GameInfoPanel
{
    margin-top: 48px;
}

.CustomUIState_HUD #GameInfoPanel
{
    margin-top: 44px;
}

#GameInfoPanelScrollArea
{
    width: 100%;
    height: 100%;
    flow-children: down;
    overflow: clip scroll;
}

#GameInfoPanelPaddingTop
{
    height: 100px;
}

#GameInfoPanelPaddingBottom
{
    height: 200px;
}

#CustomUIContainer
{
    /*margin-left: 42px;*/
}

.gameinfo_visible #GameInfoPanel
{
    transform: translateX( 0 );
}

#GameInfoGradientOverlay
{
    width: 100%;
    height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #25292f ), color-stop( 0.1, #25292f ), color-stop( 0.2, #25292f00 ), color-stop( 0.8, #181a1e00 ), color-stop( 0.9, #181a1e ), to( #181a1e ) );
    //gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.00, #272b30 ), color-stop( 0.6, #181a1e ), to( #181a1e ) )
    margin-right: 8px;
}

#GameInfoGradientOverlayTop
{
    vertical-align: top;
    width: 100%;
    height: 100px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #25292f ), to( #25292f00 ) );
    //gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.00, #272b30 ), color-stop( 0.6, #181a1e ), to( #181a1e ) )
    margin-right: 8px;
}

#GameInfoGradientOverlayBottom
{
    vertical-align: bottom;
    width: 100%;
    height: 200px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #181a1e00 ), to( #181a1e ) );
    //gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.00, #272b30 ), color-stop( 0.6, #181a1e ), to( #181a1e ) )
    margin-right: 8px;
}

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

#DefaultGameinfoImg
{
	horizontal-align: center;
	margin: 16px;
}

#DefaultGameinfoTitle
{
    color: #cccccc;
    font-size: 64px;
    text-transform: uppercase;
    vertical-align: center;
}
