/*
 * Generic classes both portal & ingame
 */

/* Prevent all text/image selection in game UI */
#Container, #Container *
{
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
#Container input,
#Container textarea
{
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
}

hr
{
	-moz-box-sizing: border-box;
	-moz-float-edge: margin-box;
	line-height:0;
	clear: both;
	display: block;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
}
/* game background */
.gameBackground
{
	width:auto;
	padding-top:50px;
}
.gameBackground_ACADEMY
{
	background: #678db9 url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_academy.jpg') no-repeat top center;
}
.gameBackground_HAVEN
{
	background: #debfaa url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_haven.jpg') no-repeat top center;
}
.gameBackground_INFERNO
{
	background: #4b343f url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_inferno.jpg') no-repeat top center;
}
.gameBackground_NECROPOLIS
{
	background: #657647 url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_necropolis.jpg') no-repeat top center;
}
.gameBackground_SYLVAN
{
	background: #8d557c url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_sylvan.jpg') no-repeat top center;
}
.gameBackground_Endgame, .gameBackground_Endgame_Season1, .gameBackground_Endgame_Season3
{
	background: #8b6642 url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_endWorld.jpg') no-repeat top center;
}
.gameBackground_Endgame_Season2
{
	background: #0f2d31 url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_endWorldS2.jpg') no-repeat top center;
}

.gameLogoutButton
{
	top: 6px;
	right: 10px;
	z-index:4500;
}
.worldEndedSlideContainer
{
	background:#000;
	width: 1000px;
	height: 672px;
	top: 4px;
	left:4px;
	position: absolute;
}
.worldEndImagesContainer
{
	overflow: hidden;
	width: 1000px;
	height: 600px;
	z-index: 1;
}
.worldEndImagesContainer_Season2
{
	overflow: hidden;
	width: 1000px;
	height: 672px;
	z-index: 1;
}
.worldEndSubtitlesContainer
{
	height: 65px;
	padding: 7px 80px 0 80px;
	width: 840px;
	top: 600px;
	z-index: 2;
	color: #fffefd;
	background: #b5906c url('https://mmhk-assets.pages.dev/img/worldEnd/subtitlesgradient.png') no-repeat scroll bottom left;
}
.worldEndSubtitlesContainer_Season2
{
	height: 70px;
	padding: 7px 80px 0 80px;
	width: 840px;
	top: 600px;
	z-index: 2;
	color: #fffefd;
	background: transparent;
}
.worldEndSubtitlesText
{
	line-height:30px;
}

.worldEndChapterTitleContainer
{
	margin-top: 45px;
	color: #fffefd;
	padding-top:290px;
	background: url('https://mmhk-assets.pages.dev/img/worldEnd/prophet.jpg') scroll no-repeat top center;
}

.worldEndContinueButton
{
	z-index:5;
	top:560px;
	right:20px;
}

.gameBackgroundWithoutTop
{
	width: auto;
	padding-top: 0;
	background-position: center -50px;
}
.backgroundContainer
{
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		width: 1009px;
		height: 680px;
		left: 1px;
		margin: 0 auto;
}
.backgroundImage
{
		background-image: url('https://mmhk-assets.pages.dev/img/backgroundGame/bgContainer.gif');
}
.backgroundImageSeason3{
		background-image: url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_imageSeason3.jpg');
}
.worldResultsLight_353.backgroundImageSeason3{
		background-image: url('https://mmhk-assets.pages.dev/img/backgroundGame/bg_imageSeason3EventPve.jpg');
}
.leftContainer, .rightContainer
{
		height: 641px;
}

.leftContainer
{
	background: url('https://mmhk-assets.pages.dev/img/region/regionContainerBg.gif') repeat-y top right;
}

.playerIconFormat
{
		width: 40px;
		height: 40px;
}
.haltIcon
{
	position: relative;
	top: 5px;
}
.toolbarBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/gameFooter/toolbarBg.gif');
	width: 1003px;
	height: 34px;
	margin: 0 auto;
	top: 640px;
	z-index: 10000;
}
.facebookShareBtn
{
	height: 18px;
}

/* Font family classes */

.times
{
	font-family: "Times New Roman", Times, "PingFang SC", "Microsoft YaHei", serif;
}
.tahoma
{
	font-family: Tahoma, "Lucida Grande", "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* Element positioning classes */
.clearBoth
{
	clear: both;
}
.clearBoth
{
	clear: both;
}
.clearBothOverflow
{
	overflow:hidden;
	position:relative;
	height:0px;
}
.clearRight
{
	clear: right;
}
.clearLeft
{
	clear: left;
}
.floatLeft
{
	float: left;
}
.floatRight
{
	float: right;
}
.bottom
{
	vertical-align: bottom;
}
.middle
{
	vertical-align: middle;
}
.top
{
	vertical-align: top;
}
.super
{
	vertical-align: super;
}

.tableAlignCenter
{
	text-align: center;
	margin: 0 auto;
}
.relativePosition
{
	position: relative;
}
.absolutePosition
{
	position: absolute;
}
.fixedPosition
{
	position: fixed;
}
.autoMargin
{
	margin: 0 auto;
}
.zIndex0
{
	z-index: 0;
}
.zIndex1
{
	z-index: 1;
}
.zIndex10
{
	z-index: 10;
}
.zIndex100
{
	z-index: 100;
}
.zIndex1000
{
	z-index: 1000;
}
.zIndex10000
{
		z-index: 10000;
}
.zIndex100000
{
		z-index: 100000;
}
/* Display classes */
.invisible
{
	visibility: hidden !important;
}
.visible
{
	visibility: visible !important;
}
.hidden
{
	display: none !important;
}
.overflowClearHidden
{
	overflow: hidden;
	height:0px;
}
.inline
{
	display: inline;
}

.inlineBlock
{
	display: inline-block;
}

.clickable
{
	cursor: pointer;
}
.movable
{
	cursor: move;
}
.resize
{
		cursor: e-resize;
}
.overflow
{
	overflow: hidden;
}
.wordwrap{
	word-wrap:break-word;
}
a:link, a:visited, a:active
{
	color: #5E3931;
	text-decoration: none;
	outline: none;
}
a:hover
{
	color: #fc5700;
}
.roll:hover
{
	color: #fc5700;
}
.roll2:hover
{
	color: #4d2f28;
}
.over
{
	color: #fc5700;
}
.block
{
	display:block;
}

/*Position top classes*/
.top28N{
top:-28px;
}
/* Padding classes */
.simplePadding
{
	padding: 3px;
}
.doublePadding
{
	padding: 10px;
}
.padding15
{
	padding: 15px;
}
.Vpadding1
{
	padding-top: 1px;
}
.Vpadding1R
{
	padding-bottom: 1px;
}

.Vpadding2
{
	padding-top: 2px;
}
.Vpadding2R
{
	padding-bottom: 2px;
}
.Vpadding3
{
	padding-top: 3px;
}
.Vpadding3R
{
	padding-bottom: 3px;
}
.Vpadding4
{
	padding-top: 4px;
}
.Vpadding4R
{
	padding-top: 4px;
}
.Vpadding5
{
	padding-top: 5px;
}
.Vpadding5R
{
	padding-bottom: 5px;
}
.Vpadding6
{
	padding-top: 6px;
}
.Vpadding6R
{
	padding-bottom: 6px;
}
.Vpadding7
{
	padding-top: 7px;
}
.Vpadding7R
{
	padding-bottom: 7px;
}
.Vpadding8
{
	padding-top: 8px;
}
.Vpadding8R
{
	padding-bottom: 8px;
}
.Vpadding9
{
	padding-top: 9px;
}
.Vpadding9R
{
	padding-bottom: 9px;
}
.Vpadding10
{
	padding-top: 10px;
}
.Vpadding10Percent
{
	padding-top: 10%;
}
.Vpadding10R
{
	padding-bottom: 10px;
}
.Vpadding12
{
	padding-top:12px;
}
.Vpadding12R
{
	padding-bottom:12px;
}
.Vpadding14
{
	padding-top: 14px;
}
.Vpadding15
{
	padding-top: 15px;
}
.Vpadding18
{
	padding-top: 18px;
}
.Vpadding18R
{
	padding-bottom: 18px;
}
.Vpadding20
{
	padding-top: 20px;
}
.Vpadding20R
{
	padding-bottom: 20px;
}
.Vpadding21
{
		padding-top: 21px;
}
.Vpadding22
{
	padding-top: 22px;
}
.Vpadding22R
{
	padding-bottom: 22px;
}
.Vpadding24
{
	padding-top: 24px;
}
.Vpadding24R
{
	padding-bottom: 24px;
}
.Vpadding30
{
	padding-top: 30px;
}
.Vpadding30R
{
	padding-bottom: 30px;
}
.Vpadding40
{
	padding-top: 40px;
}
.Vpadding40R
{
	padding-bottom: 40px;
}
.Vpadding50
{
	padding-top: 50px;
}
.Vpadding50R
{
	padding-bottom: 50px;
}
.Vpadding60
{
		padding-top: 60px;
}
.Vpadding75
{
	padding-top: 75px;
}
.Vpadding75R
{
	padding-bottom: 75px;
}
.Vpadding100
{
	padding-top: 100px;
}
.Vpadding100R
{
	padding-bottom: 100px;
}
.Vpadding150
{
	padding-top: 150px;
}
.Vpadding150R
{
	padding-bottom: 150px;
}
.Hpadding3
{
	padding-left: 3px;
}
.Hpadding3R
{
	padding-right: 3px;
}
.Hpadding5
{
	padding-left: 5px;
}
.Hpadding5R
{
	padding-right: 5px;
}
.Hpadding7
{
	padding-left: 7px;
}
.Hpadding7R
{
	padding-right: 7px;
}
.Hpadding10
{
	padding-left: 10px;
}
.Hpadding10R
{
	padding-right: 10px;
}
.Hpadding12
{
	padding-left: 12px;
}
.Hpadding12R
{
	padding-right: 12px;
}
.Hpadding15
{
	padding-left: 15px;
}
.Hpadding15R
{
	padding-right: 15px;
}
.Hpadding20
{
	padding-left: 20px;
}
.Hpadding20R
{
	padding-right: 20px;
}
.Hpadding30
{
	padding-left: 30px;
}
.Hpadding30R
{
	padding-right: 30px;
}
.Hpadding40
{
	padding-left: 40px;
}
.Hpadding40R
{
	padding-right: 40px;
}
.Hpadding60
{
	padding-left: 60px;
}
.Hpadding100
{
	padding-left: 100px;
}
.Hpadding100R
{
	padding-right: 100px;
}



/* Horizontal offset classes */
.Hoffset0
{
	margin-left: auto;
}
.Hoffset0R
{
	margin-right: auto;
}
.Hoffset1
{
	margin-left: 1px;
}
.Hoffset1R
{
	margin-right: 1px;
}
.Hoffset2
{
	margin-left: 2px;
}
.Hoffset2R
{
	margin-right: 2px;
}
.Hoffset3
{
	margin-left: 3px;
}
.Hoffset3R
{
	margin-right: 3px;
}
.Hoffset4
{
	margin-left: 4px;
}
.Hoffset4R
{
	margin-right: 4px;
}
.Hoffset5
{
	margin-left: 5px;
}
.Hoffset5R
{
	margin-right: 5px;
}
.Hoffset6
{
	margin-left: 6px;
}
.Hoffset6R
{
	margin-right: 6px;
}
.Hoffset7
{
	margin-left: 7px;
}
.Hoffset7R
{
	margin-right: 7px;
}
.Hoffset8
{
	margin-left: 8px;
}
.Hoffset8R
{
	margin-right: 8px;
}
.Hoffset9
{
	margin-left: 9px;
}
.Hoffset9R
{
	margin-right: 9px;
}

.Hoffset10
{
	margin-left: 10px;
}
.Hoffset10R
{
	margin-right: 10px;
}
.Hoffset11
{
		margin-left: 11px;
}
.Hoffset11R
{
		margin-right: 11px;
}
.Hoffset12
{
		margin-left: 12px;
}
.Hoffset12R
{
		margin-right: 12px;
}
.Hoffset14
{
	margin-left: 14px;
}
.Hoffset14R
{
	margin-right: 14px;
}
.Hoffset15
{
	margin-left: 15px;
}
.Hoffset15R
{
	margin-right: 15px;
}
.Hoffset16
{
		margin-left: 16px;
}
.Hoffset16R
{
		margin-right: 16px;
}
.Hoffset17
{
		margin-left: 17px;
}
.Hoffset17R
{
		margin-right: 17px;
}
.Hoffset18
{
	margin-left: 18px;
}
.Hoffset18R
{
	margin-right: 18px;
}
.Hoffset20
{
	margin-left: 20px;
}
.Hoffset20R
{
	margin-right: 20px;
}
.Hoffset22
{
	margin-left: 22px;
}
.Hoffset22R
{
	margin-right: 22px;
}
.Hoffset25
{
	margin-left: 25px;
}
.Hoffset25R
{
	margin-right: 25px;
}
.Hoffset26
{
		margin-left: 26px;
}
.Hoffset28
{
		margin-left: 28px;
}
.Hoffset28R
{
		margin-right: 28px;
}
.Hoffset30
{
	margin-left: 30px;
}
.Hoffset30R
{
	margin-right: 30px;
}
.Hoffset35
{
	margin-left: 35px;
}
.Hoffset35R
{
	margin-right: 35px;
}

.Hoffset39
{
	margin-left: 39px;
}
.Hoffset39R
{
	margin-right: 39px;
}
.Hoffset40
{
	margin-left: 40px;
}
.Hoffset40R
{
	margin-right: 40px;
}
.Hoffset45
{
		margin-left: 45px;
}
.Hoffset45R
{
		margin-right: 45px;
}
.Hoffset50
{
	margin-left: 50px;
}
.Hoffset50R
{
	margin-right: 50px;
}
.Hoffset56
{
	margin-left: 56px;
}
.Hoffset57
{
	margin-left: 57px;
}
.Hoffset60
{
	margin-left: 60px;
}
.Hoffset60R
{
	margin-right: 60px;
}
.Hoffset65
{
	margin-left: 65px;
}
.Hoffset70
{
	margin-left: 70px;
}
.Hoffset70R
{
		margin-right: 70px;
}
.Hoffset80
{
	margin-left: 80px;
}
.Hoffset80R
{
	margin-right: 80px;
}
.Hoffset85
{
	margin-left: 85px;
}

.Hoffset85R
{
	margin-right: 85px;
}

.Hoffset100
{
	margin-left: 100px;
}

.Hoffset100R
{
	margin-right: 100px;
}
.Hoffset110
{
		margin-left: 110px;
}

.Hoffset110R
{
		margin-right: 110px;
}
.Hoffset120
{
	margin-left: 120px;
}

.Hoffset130
{
	margin-left: 130px;
}
.Hoffset140
{
	margin-left: 140px;
}
.Hoffset150
{
	margin-left: 150px;
}
.Hoffset160
{
	margin-left: 160px;
}
.Hoffset215
{
	margin-left: 215px;
}

/* Vertical offset classes */
.Voffsetn6
{
	margin-top: -6px;
}
.Voffset1
{
	margin-top: 1px;
}
.Voffset1R
{
	margin-bottom: 1px;
}
.Voffset2
{
	margin-top: 2px;
}
.Voffset2R
{
	margin-bottom: 2px;
}
.Voffset3
{
	margin-top: 3px;
}
.Voffset3R
{
	margin-bottom: 3px;
}
.Voffset4
{
	margin-top: 4px;
}
.Voffset4R
{
	margin-bottom: 4px;
}
.Voffset5
{
	margin-top: 5px;
}
.Voffset5R
{
	margin-bottom: 5px;
}
.Voffset6
{
	margin-top: 6px;
}
.Voffset7
{
	margin-top: 7px;
}
.Voffset7R
{
	margin-bottom: 7px;
}
.Voffset8
{
	margin-top: 8px;
}
.Voffset8R
{
	margin-bottom: 8px;
}
.Voffset9
{
	margin-top: 9px;
}

.Voffset9R
{
	margin-bottom: 9px;
}

.Voffset10
{
	margin-top: 10px;
}
.Voffset10R
{
	margin-bottom: 10px;
}
.Voffset11
{
		margin-top: 11px;
}
.Voffset12
{
	margin-top:12px;
}
.Voffset12R
{
	margin-bottom:12px;
}
.Voffset13
{
		margin-top:13px;
}
.Voffset13R
{
		margin-bottom:13px;
}
.Voffset15
{
	margin-top: 15px;
}
.Voffset15R
{
	margin-bottom: 15px;
}
.Voffset16
{
	margin-top: 16px;
}
.Voffset16R
{
		margin-bottom: 16px;
}
.Voffset17
{
		margin-top: 17px;
}
.Voffset17R
{
		margin-bottom: 17px;
}
.Voffset18
{
		margin-top: 18px;
}
.Voffset18R
{
		margin-bottom: 18px;
}
.Voffset20
{
	margin-top: 20px;
}
.Voffset20R
{
	margin-bottom: 20px;
}
.Voffset23
{
		margin-top: 23px;
}
.Voffset23R
{
		margin-bottom: 23px;
}
.Voffset25
{
	margin-top: 25px;
}
.Voffset25R
{
	margin-bottom: 25px;
}
.Voffset27
{
		margin-top: 27px;
}
.Voffset27R
{
		margin-bottom: 27px;
}
.Voffset30
{
	margin-top: 30px;
}
.Voffset30R
{
	margin-bottom: 30px;
}
.Voffset35
{
	margin-top: 35px;
}
.Voffset35R
{
	margin-bottom: 35px;
}
.Voffset40
{
	margin-top: 40px;
}
.Voffset40R
{
	margin-bottom: 40px;
}
.Voffset45
{
		margin-top: 45px;
}
.Voffset45R
{
		margin-bottom: 45px;
}
.Voffset50
{
	margin-top: 50px;
}

.Voffset50R
{
	margin-bottom: 50px;
}
.Voffset60
{
	margin-top: 60px;
}
.Voffset60R
{
		margin-bottom: 60px;
}
.Voffset65
{
	margin-top: 65px;
}
.Voffset65R
{
	margin-bottom: 65px;
}
.Voffset80
{
	margin-top: 80px;
}
.Voffset80R
{
	margin-bottom: 80px;
}

.Voffset90
{
	margin-top: 90px;
}
.Voffset90R
{
	margin-bottom: 90px;
}
.Voffset100
{
	margin-top: 100px;
}

.Voffset100R
{
	margin-bottom: 100px;
}


.loading
{
		background: url('https://mmhk-assets.pages.dev/img/loading.gif') no-repeat top center;
		height: 16px;
		width: 16px;
}
/*******************************************************
Game preload Assets
*******************************************************/
.preloadBg
{
	background: url('https://mmhk-assets.pages.dev/img/loading/preloadScreen.jpg') no-repeat top center;
}
.preloadBg_Season2
{
	background: url('https://mmhk-assets.pages.dev/img/loading/preloadScreen_Season2.jpg') no-repeat top center;
}
.preloadBg_Season3
{
	background: url('https://mmhk-assets.pages.dev/img/loading/preloadScreen_Season3.jpg') no-repeat top center;
}
.preloadContainer
{
	margin: 28px auto;
	width: 338px;
}
.preloadBar
{
	background:url('https://mmhk-assets.pages.dev/img/loading/bar.gif') repeat-x;
}
.preloadGameLogo, .preloadGameLogo_ru
{
	background:url('https://mmhk-assets.pages.dev/img/loading/gameLogo.png') no-repeat top center;
	width: 317px;
	height: 155px;
	top: 20px;
	margin:0px auto;
}
.preloadGameLogo_ru
{
	background-image:url('https://mmhk-assets.pages.dev/img/loading/gameLogo_ru.png');
}

/*******************************************************
Background position classes
*******************************************************/
.topLeftBg
{
	background-position: top left !important;
}
.topRightBg
{
	background-position: top right !important;
}
.centerRightBg
{
	background-position: center right !important;
}
.bottomRightBg
{
	background-position: bottom right !important;
}

/*******************************************************
Background color and texture classes
*******************************************************/

.paper
{
	background-image: url('https://mmhk-assets.pages.dev/img/background/paper.jpg');
}
.metal
{
	background-image: url('https://mmhk-assets.pages.dev/img/background/metal.jpg');
	background-position: bottom;
}
.gradientBg
{
	background: #fffefd url('https://mmhk-assets.pages.dev/img/background/metal_gradient.jpg') no-repeat bottom center;
}
.beigeBg
{
	background-color: #fff2e5;
}
.beigeFonceBg{
	background-color: #f4ebe2;
}
.creamBg
{
	background-color: #f5ede2;
}
.whiteBg
{
	background-color: #fffefd;
}
.eggshellBg
{
	background-color : #e9cfaa;
}
.brownBg
{
	background-color: #d3bfa2;
}
.brownieBg
{
	background-color: #845946;
}
.orangeBg
{
	background-color: #ffe2c6;
}
.coralBg
{
	background-color: #fcc68f;
}
.lightOrangeBg
{
	background-color: #ffce80;
}
.lightOrangeBg2
{
	background-color: #ffdb95;
}
.blackBg
{
	background-color: #000000;
}
.chocolateBg
{
	background-color: #50332b;
}
.cafeBg
{
	background-color: #8e6048;
}
.cappuccinoBg
{
	background-color: #a88d79;
}
.goldenBg
{
	background:#f8c03e;
}
.custardBg
{
	background:#fdf8d1;
}
.allianceDarkBg
{
	background-color: #e2a84d;
}
.allianceLightBg
{
	background-color: #fad293;
}
.beigeBg2
{
	background-color: #efe3d5;
}
.beigeBg3
{
	background-color: #e7d5b9;
}
.beigeBg4
{
	background-color: #e3cdad;
}
.lightBlueBg
{
	background-color: #00b5e9;
}
.blueBg
{
	background-color: #013060;
}
/* Border classes */
.noborder
{
	border:none !important;
}
.borderBrown1
{
	border: 1px solid #4d332e;
}

.borderBrown2
{
	border: 2px solid #4d332e;
}

.borderBrown3
{
	border: 3px solid #5E4A38;
}

.borderBrown4
{
	border: 3px solid #77624c;
}
.borderCafe
{
	border:1px solid #e2c896;
}
.borderWhite
{
		border: 1px solid #fffefd;
}
.borderBeige1
{
	border: 1px solid #d3bfa2;
}

.brown3Border
{
	border: 1px solid #2F1A15;
}
.cafeBorder
{
	border: 1px solid #8e6048;
}
.chocolateBorder
{
		border: 1px solid #50332b;
}

.cappuccinoBorder
{
	border: 1px solid #a88d79;
}

.ocreBorder
{
	border: 1px solid #cf500d;
}
.greenBorder
{
	border: 1px solid #008000;
}
.redBorder
{
		border: 1px solid #c30a1d;
}
.inputBorder
{
	border:1px solid #A88D79;
}
/* Text positioning classes */
.center
{
	text-align: center;
}
.left
{
	text-align: left;
}
.right
{
	text-align: right;
}
.justify
{
	text-align: justify;
}

.wrapWord
{
	word-wrap: break-word;
}

.ValignTop
{
	vertical-align: top !important;
}
.ValignCenter
{
	vertical-align: middle !important;
}

.opacity50
{
		opacity: 0.5;
		filter: alpha(opacity=50); /* IE */
}
/* Text color classes */
.black
{
	color: #020202;
}
.white
{
	color: #FFFEFD;
}
.cherry, .red1
{
	color: #c30a1d;
}
.red2
{
	color: #811619;
}
.blue1
{
	color: #5ed5d4;
}
.blue2
{
	color: #0e86c2;
}
.blue3
{
		color: #2f8681;
}
.heredityBlue1
{
		color: #62b6e0;
}
.heredityBlue2
{
		color: #144478;
}
.heredityBlue3
{
		color: #366fb2;
}
.heredityBlue4
{
		color: #2b7ccd;
}
.beige
{
	color: #E7D5B9;
}
.beige1
{
		color: #fff2e5;
}
.beige2
{
		color: #D3BFA2;
}
.beige3
{
color: #efe3d5;
	}
.cream
{
		color: #ffeec7;
}
.cappuccino
{
	color: #a88d79;
}
.cappuccinoLight
{
	color: #c59f8c;
}
.cafe
{
	color: #8e6048;
}
.orange
{
	color: #ff7919;
}
.orange2
{
	color: #c53401;
}
.orange3
{
	color: #e75700;
}
.brown4
{
	color: #9f583f;
}
.chocolate
{
	color: #50332b;
}
.darkBrown
{
	color: #2f1a15;
}
.error
{
	color: #c30a1d;
}
.ok
{
	color: #38a800;
}
.yellow1
{
	color: #ffbf1f;
}
.gray1
{
	color: #706d6d;
}
.gray2
{
	color: #999;
}
.domination
{
	color: #610100;
}
.wealth
{
	color: #b36600;
}
.honor
{
	color: #143831;
}
.uplayColor
{
	color: #C10117;
}
.facebookColor
{
	color: #3B5997;
}

/* Text size classes */
.size50
{
	font-size: 50px;
}
.size46
{
	font-size: 46px;
}
.size36
{
	font-size: 36px;
}
.size32
{
	font-size: 32px;
}
.size30
{
	font-size: 30px;
}
.size28
{
		font-size: 28px;
}
.size27
{
	font-size: 27px;
}
.size26
{
	font-size: 26px;
}
.size25
{
	font-size: 25px;
}
.size24
{
	font-size: 24px;
}
.size22
{
	font-size: 22px;
}
.size20
{
	font-size: 20px;
}
.size18
{
	font-size: 18px;
}
.size17
{
		font-size: 17px;
}
.size16
{
	font-size: 16px;
}
.size15
{
	font-size: 15px;
}
.size14
{
	font-size: 14px;
}
.size13
{
	font-size: 13px;
}
.size12
{
	font-size: 12px;
}
.size11
{
	font-size: 11px;
}
.size10
{
	font-size: 10px;
}
.size9
{
	font-size: 9px;
}
.size0
{
	font-size: 0px;
}

/* Text style classes */
.boldFont
{
	font-weight: bold;
}
.italize
{
	font-style: italic;
}
.uppercase
{
	text-transform: uppercase;
}
.smallcaps
{
	font-variant: small-caps;
}
.noCaps
{
	font-variant: normal;
}
.underline
{
	text-decoration: underline;
}

.noUnderline
{
	text-decoration: none;
}

.normal
{
	font-weight: normal;
}
.nowrap
{
	white-space: nowrap;
}
.noDecoration
{
	text-decoration: none;
}

.lineThrough
{
	text-decoration: line-through;
}
/* sizing classes */

.width100
{
	width: 100%;
}
.width80
{
	width: 80%;
}
.width65px
{
	width: 65px;
}
.width220
{
	width: 220px;
}
.width270
{
	width: 270px;
}

.height100
{
		height: 100%;
}
.height0
{
	line-height:0;
	margin:0;
	padding:0;
	height:0;
}
.height20
{
		height: 20px;
}
.height40
{
	height:40px;
}
.height60
{
	height: 60px;
}
.lineHeight0
{
	line-height: 0;
}
.lineHeight09
{
	line-height: 0.9;
}
.lineHeight1
{
	line-height: 1;
}
.lineHeight2
{
	line-height: 2;
}
.lineHeight3
{
	line-height: 3;
}
.lineHeight11px
{
	line-height: 11px;
}
.lineHeight14px
{
	line-height: 14px;
}
/* Button Form */

.labelButtonForm
{
	font-family: "Times New Roman", Times, "PingFang SC", "Microsoft YaHei", serif;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
}
.labelButtonForm .disabled
{
	color: #aba599;
}
.buttonHover
{
		color: #FFFFFF !important;
}

.labelButtonTextPosition
{
	padding-left: 5px;
	padding-right: 2px;
	position: relative;
	margin-top: 4px;
}

.labelButtonBigTextPosition
{
	position: relative;
	top: 5px;
}
.genericInlineLabelButtonContainer
{

}
.genericInlineLabelButtonContainer:hover
{
	color: #fff;
}
.genericInlineLabelButtonMiddle
{
	vertical-align: top;
	margin: 6px 0 0 0;
	padding: 0 0 0 3px;
	font: italic bold 13px/23px Times,serif;
	display: inline-block;
}
.simpleButtonText
{
	line-height: 23px;
}
/* FTP Specific commons */
.FTPTooltipContent
{
	text-align:left;
}
/**/

/* Facebook Specific commons */
.facebookShareButtonHolderLeft
{
	padding: 2px 0 0 22px;
	background: transparent url('https://mmhk-assets.pages.dev/img/facebook/facebookShareButton.png') no-repeat scroll top left;
	height: 16px;
}
.facebookShareButtonHolderRight
{
	background: transparent url('https://mmhk-assets.pages.dev/img/facebook/facebookShareButton.png') no-repeat scroll top right;
	height: 19px;
	width: 8px;
}
.facebookShareButtonTeasingHolderLeft
{
	padding: 2px 0 0 22px;
	background: transparent url('https://mmhk-assets.pages.dev/img/facebook/facebookShareButtonTeasing.png') no-repeat scroll top left;
	height: 16px;
}
.facebookShareButtonTeasingHolderRight
{
	background: transparent url('https://mmhk-assets.pages.dev/img/facebook/facebookShareButtonTeasing.png') no-repeat scroll top right;
	height: 19px;
	width: 8px;
}
/**/
.creditsFlash{
	width:650px;
	height:330px;
	overflow:hidden;
}.moreSeals
{
	background-color:#5b300e;
	height:18px;
	margin-top:14px;
}
.moreSeals:hover{
	background-color:#92592c;
}
.portalContentZone .moreSeals{
	margin-top:2px;
	margin-right:22px;
	float:right;
}
.portalContentZone .portalRightBanners .moreSeals{
	margin-top:2px;
	margin-right:0px;
	float:none;
}
.sidebarTopContainer .moreSeals, .virtualCurrencyList .moreSeals{
	margin-top:4px
}
.moreSealsPlus
{
	background:url("https://mmhk-assets.pages.dev/img/store/storeIcons.png") no-repeat -75px -62px #ff7919;
	width:18px;
	height:18px;
}
.moreSeals:hover .moreSealsPlus{
	background-color:#fe8936;
}
.productCurrencyCOINS
{
	display:inline-block;
	background:url("https://mmhk-assets.pages.dev/img/store/storeIcons.png") no-repeat -42px -58px transparent;
	width:28px;
	height:28px;
	float:left;
}
.productCurrencyBILLS
{
	display:inline-block;
	background:url("https://mmhk-assets.pages.dev/img/store/storeIcons.png") no-repeat -4px -58px transparent;
	width:28px;
	height:28px;
	float:left;
}
.icon_BILLS
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0px -20px  transparent;
	width:38px;
	height:38px;
	display:inline-block;
	margin-left:60px;
}
.icon_COINS
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -36px -20px  transparent;
	width:38px;
	height:38px;
	display:inline-block;
	margin-left:40px;
}
.discount{
	text-decoration:line-through;
	color:#a40d23;
	font-size:11px;
}.largeFrame, .littleFrame, .miniFrame
{
	top: 200px;
	position: fixed;
}
/* RessourcesSummaryFrame is reparented into #WorldMapContainer so this
   single CSS rule positions it in the world map's top-right corner
   across all three layouts. The frame is hidden on region-map and
   city views via a setCurrentView wrapper in RessourcesSummaryFrame.js. */
#WorldMapContainer
{
	position: relative;
}
/* No !important here: MooTools Drag.Move writes inline `left/top` while
   the user drags. Inline styles already beat plain CSS (specificity-wise
   the [id^=...] selector at (0,1,1) still wins over the bare .miniFrame
   default at (0,1,0)), so dragging just works. !important would lock the
   frame in place. */
.miniFrame[id^="RessourcesSummaryFrame"]
{
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	bottom: auto;
	margin: 0;
	z-index: 100;
}
.creditsFrame
{
	position: fixed;
	left: 50%;
	top: 50%;
	width: 658px;
	margin: -300px 0 0 -325px;
}
.littleFrame
{
	width: 410px;
	left: 50%;
	top: 50%;
	margin: -100px 0 0 -205px;
}
.frameContainerCloseImage
{
	top: -10px;
	right: 22px;
}
.frameMainContainer
{
	z-index: 30000;
	width: 100%;
}
.portalFrameContainer{
	margin:0px auto;
}
.validationFrameButton {
	height: 31px;
}
.validationFrameButton2 {
	height: 50px;
}
.validationFrameButton3 {
	height: 28px;
	padding-left: 283px;
}
.validationFrameButton4 {
	height: 30px;
}
.validationButtonContent
{
	bottom: 19px;
	z-index:100;
}

/**************************
Game message frame
***************************/
.gameMessageFrame {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 422px;
	height: 253px;
	z-index: 100000;
	margin: -100px 0 0 -211px;
}
.errorGameMessageFrame {
	border-color: #FF0000;
}

.confirmGameMessageFrame {
	border-color: #008000;
}
.gameInterfaceHider {
	position: fixed;
	background: #2f1a15;
	width: 100%;
	height: 100%;
	z-index: 99999;
	top: 0px;
	left: 0px;
}
.gameMessageFrameContainer {
	width: 414px;
	min-height:245px;
	background: #f2e9db url('https://mmhk-assets.pages.dev/img/broadcast/ingameBroadcastBg.gif') repeat-y top center;
}
.gameMessageFrameContentText {
	width: 255px;
	min-height: 57px;
	background: #f2e9db url('https://mmhk-assets.pages.dev/img/broadcast/ingameBroadcastTextBg.jpg') no-repeat top center;
}

.gameMessageMentorImage {
	width: 158px;
	height: 245px;
	background: #f2e9db url('https://mmhk-assets.pages.dev/img/pageNotFound/imgInGameError.jpg') no-repeat scroll top center;
}

.gameMessageBroadcastImage {
	width: 159px;
	height: 245px;
	background: url('https://mmhk-assets.pages.dev/img/broadcast/ingameBroadcastImage.jpg') no-repeat top left;
}

/**************************
Cheats frame
***************************/
/* CheatsFrame is positioned and sized to mirror StrategyGuideFrame /
   StatsFrame on all three layouts — values copied from
   .strategyGuidesFrameContainer (FrameGame.css:4361) for desktop and from
   the .use-portrait-layout / .use-mobile-layout overrides (iTouch.css)
   for mobile. Kept self-contained under its own .cheatsFrameContainer
   class so it has no implicit dependency on strategy-guide chrome. */
.cheatsFrameContainer
{
	position: absolute;
	width: 852px;
	height: 567px;
	margin-left: 75px;
	top: -20px;
	z-index: 50001;
	background: #FFF2E5;
}
/* Overlay the iframe wrapper directly on top of the frame shell so it
   reliably fills 852×567. Going through the 9-grid <table>'s central <td>
   doesn't work — `height: 100%` on a <td> inside `table { height: 100% }`
   collapses unless every row also gets an explicit height, and the iframe
   inside has no intrinsic block height to push back. .cheatsFrameContainer
   is already `position: absolute`, so it's a positioned ancestor for this
   absolute child. */
/* Leave a small footer strip at the bottom of the cheats frame shell so
   the frame doesn't look edge-to-edge — visually matches other ingame
   frames that have a footer band. */
.cheatsFrame
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20px;
}
.cheatsIframe
{
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/**************************
Store frame
***************************/
.ingame .storeFrameContainer
{
	/*left:50px;*/
	left:121px;
	top:-80px;
	position:absolute;
}
.storeFrameContainer
{
	height: 567px;
	/*width: 900px;*/
	width:728px;
	z-index: 50002;
	margin:25px auto;
	position:relative;
}

.storeIframe
{
	/*width: 894px;*/
	width:720px;
	height:	615px;
	border:	none;
}

.storeInventoryIframe
{
	width: 565px;
	height:	464px;
	border:	none;
}
.storeInventoryFrameContainer{
	margin:25px auto;
	width:573px;
	position: relative;
	float:left;
}
.ingame .storeInventoryFrameContainer{
	margin:25px 55px;
}
.portalFrameContainer .storeInventoryFrameContainer{
	float:none;
}

/**************************
Account frame
***************************/
.ingame .accountFrameContainer
{
	left:50px;
	top:-80px;
}
.accountFrameContainer
{
	height: 567px;
	width: 900px;
	z-index: 50002;
	margin-top:30px;
}

.accountBillingFrame
{
	width: 890px;
	height:	615px;
	border:	none;
}

/*******************************************************
Border Frame
*******************************************************/
.storeFrameContainer .frameSeparator, .accountFrameContainer .frameSeparator
{
	background-color: #f2ac10;
	font-size: 0px;
	height: 2px;
}

.storeFrameContainer .frameContainerTopLeft, .storeFrameContainer .frameContainerTopRight,
.accountFrameContainer .frameContainerTopLeft, .accountFrameContainer .frameContainerTopRight
{
	height: 4px;
	width: 4px;
}

.storeFrameContainer .frameContainerBottomLeft, .storeFrameContainer .frameContainerBottomRight,
.accountFrameContainer .frameContainerBottomLeft, .accountFrameContainer .frameContainerBottomRight
{
	height: 4px;
	width: 4px;
}

.storeFrameContainer .frameContainerTop, .storeFrameContainer .frameContainerBottom,
.accountFrameContainer .frameContainerTop, .accountFrameContainer .frameContainerBottom
{
	background-repeat: repeat-x;
	height: 4px;
}

.storeFrameContainer .frameContainerMiddleLeft, .storeFrameContainer .frameContainerMiddleRight,
.accountFrameContainer .frameContainerMiddleLeft, .accountFrameContainer .frameContainerMiddleRight
{
	background-repeat: repeat-y;
	width: 4px;
}
.storeFrameContainer .frameContainerTopLeft, .accountFrameContainer .frameContainerTopLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_left_billing.gif');
}

.storeFrameContainer .frameContainerTop, .accountFrameContainer .frameContainerTop
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_center_billing.gif');
}

.storeFrameContainer .frameContainerTopRight, .accountFrameContainer .frameContainerTopRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_right_billing.gif');
}

.storeFrameContainer .frameContainerMiddleLeft, .accountFrameContainer .frameContainerMiddleLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_left_billing.gif');
}

.storeFrameContainer .frameContainerMiddleRight, .accountFrameContainer .frameContainerMiddleRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_right_billing.gif');
}

.storeFrameContainer .frameContainerBottomLeft, .accountFrameContainer .frameContainerBottomLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_left_billing.gif');
}

.storeFrameContainer .frameContainerBottom, .accountFrameContainer .frameContainerBottom
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_billing.gif');
}

.storeFrameContainer .frameContainerBottomRight, .accountFrameContainer .frameContainerBottomRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_right_billing.gif');
}/**Import Googlefonts**/
@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300&subset=latin,cyrillic,latin-ext,cyrillic-ext);

body
{
	font-family: arial, verdana, sans-serif;
	margin: 0;
	padding: 0;
	cursor: default;
	font-size:12px;
	color:#50332b;
	background: url("https://mmhk-assets.pages.dev/img/portal/ng_portal/portalBg.jpg") repeat-x scroll center top #fff4e8;
}
p
{
	margin: 0;
}
table, td
{
	vertical-align: top;
}

img
{
	border: 0;
}
.textInput
{
	padding-left: 1px;
	padding-right: 1px;
	background-color: #f2ead5;
	BORDER-RIGHT: #f6f1e2 1px solid;
	BORDER-LEFT: #ccbfa6 1px solid;
	BORDER-TOP: #ccbfa6 1px solid;
	BORDER-BOTTOM: #f6f1e2 1px solid;
	font-family: arial, verdana, sans-serif;
	margin: 0px;
}

.container
{
	width: 1014px;
	margin: 0 auto;
	background: transparent;
}

.portalHiddenContent
{
	visibility: hidden;
	font-size: 0px;
}

.legalText
{
	overflow: auto;
	height: 560px;
	background-color: #FFF;
}

/**********************************************************
TEASER BACKGROUND STYLE
***********************************************************/
.teaserBackground
{
	/*background:	none repeat scroll 0 0 #FFF4E8;*/
}
#wrapper
{
	background: url("https://mmhk-assets.pages.dev/img/portal/ng_portal/teaserBg.jpg") no-repeat scroll center top transparent;
	min-width: 1012px;
}
.teaserHeaderContent
{
	width:980px;
}
.teaserLogo
{
	height: 109px;
	width: 222px;
	text-align:center;
}
#gameVersionBlock
{
	font-size:0.8em;
	position: absolute;
	right: 0;
	top: 4px;
}
.teaserTopContainer
{
	background: url("https://mmhk-assets.pages.dev/img/portal/ng_portal/paperBg.png") no-repeat scroll center -8px transparent;
	height:59px;
}
.teaserMiddleContainerWrapper
{
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/paperSliceRepeater.png) repeat-y;
}
.teaserMiddleContainer
{
	background: url("https://mmhk-assets.pages.dev/img/portal/ng_portal/paperBg.png") no-repeat scroll center -67px transparent;
}
.playerTeaser{
	height:395px;
	overflow:hidden;
}
.teaserBottomContainer
{
	background-image: url('https://mmhk-assets.pages.dev/img/firstConnection/registerFooter.png');
	height: 74px;
	width: 998px;
}
.teaserTopContainer,
.teaserMiddleContainerWrapper
{
	width: 1012px;
}
#flashcontent,
#outroVideo
{
	margin-left:31px;
}
#Container #flashcontent
{
	margin:0px;
	border: none;
}
#videoContainerContainer
{
	height: 513px;
}

.disclaimer
{
	width: 973px;
	margin-bottom: 30px;
}
.disclaimerRight
{
	bottom: 26px;
	right: 60px;
}
.disclaimerRight a
{
	color: #c59f8c;
}
.disclaimerRight a:hover
{
	text-decoration: underline;
}
.ubisoftLink
{
	bottom: 20px;
}
#Skip
{
	padding-top: 4px;
	margin-bottom: 80px;
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/button.png) no-repeat left -15px;
	width: 151px;
	height: 24px;
}
#Skip:hover{
	background-position: -161px -15px;
}
/**********************************************************
FONTS UTILS
***********************************************************/

.titleBar
{
	background-color: #77624c;
}

ul
{
	list-style-type: square;
	margin: 0;
	padding-left: 20px;
}

li
{
	margin: 0;
	padding-top: 7px;
}
#newsSelectionList a
{
	font-weight: bold;
	color: #FF7919;
}

/**********************************************************
FRAMES
***********************************************************/
.frameContainerTopBarContainer
{
	width: 100%;
}

.frameContainerTopLeft, .frameContainerTopRight, .frameContainerBottomLeft, .frameContainerBottomRight
{
	height: 4px;
	width: 4px;
	font-size: 0px;
}

.frameContainerTop, .frameContainerBottom
{
	background-repeat: repeat-x;
	height: 4px;
	font-size: 0px;
}

.frameContainerMiddleLeft, .frameContainerMiddleRight
{
	background-repeat: repeat-y;
	width: 4px;
}

.frameContainerTopLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_left.gif');
	top: 35px;
}

.frameContainerTop
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_center.gif');
}

.frameContainerTopRight
{
	background: url('https://mmhk-assets.pages.dev/img/frame/border_top_right.gif') no-repeat;
	top: 35px;
}

.frameContainerMiddleLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_left.gif');
}

.frameContainerMiddleRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_right.gif');
}

.frameContainerBottomLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_left.gif');
}

.frameContainerBottom
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom.gif');
}

.frameContainerBottomRight
{
	background: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_right.gif') no-repeat;
}

.frameSeparator
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/separator_02.gif');
	font-size: 0px;
	height: 5px;
}
.frameSeparator1
{
	font-size: 0px;
	height: 1px;
	background-color: #262322;
}
.frameSeparator2
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/separator_01.gif');
	font-size: 0px;
	height: 3px;
}
.frameSeparator3
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/separator_04.gif');
	font-size: 0px;
	height: 5px;
}
.frameSeparator4
{
	background: url('https://mmhk-assets.pages.dev/img/portal/separatorLeftCol02.gif');
	height: 2px;
}

.frameSeparatorV
{
	width: 4px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/separator_03.gif');
}
.frameSeparatorV1
{
	font-size: 0px;
	height: 492px;
	width: 2px;
	background-color: #262322;
}
.frameSeparatorV2
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/Vseparator.gif');
	height: 178px;
	width: 3px;
}
.frameSeparatorV3
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/Vseparator.gif');
	height: 222px;
	width: 3px;
}
.mainMenuButton td
{
	vertical-align: middle;
}
.footerSpacer
{
	height: 15px;
}
/**********************************************************
Portal classes
***********************************************************/

.rememberMe
{
	top: 1px;
	margin-right: 5px;
}
.wrapper
{
	background: transparent url(https://mmhk-assets.pages.dev/img/portal/ng_portal/paperSliceRepeater.png) scroll repeat-y bottom center;
}
.portalContainer
{
	background: url("https://mmhk-assets.pages.dev/img/portal/ng_portal/teaserBgWithPaper.jpg") no-repeat scroll center top;
	margin: 0 auto;
	min-width:1012px;
	}
.content
{
	width:980px;
	margin: 0 auto;
}
/*
.portalContainer a
{
	text-decoration: none;
}
*/
.portalTop
{

	height: 212px;
	margin: 0 auto;
}
.portalTopBg
{
	background: #C8A98C url('https://mmhk-assets.pages.dev/img/portal/background.jpg') no-repeat top center;
}
.portalBreadcrumb
{
	font-size: 11px;
	color: #a88d79;
	top: 10px;
	left: 890px;
}

.portalBreadcrumb a
{
	color:#a88d79;
}

.registerSupportButtons
{
	top: -8px;
	right: 10px;
}

.portalShortcuts
{
	padding-right: 125px;
}

.portalTopPlayForFreeImage
{
	width: 64px;
	height: 56px;
	top: 16px;
	left: -14px;
}

.portalTopVersionZone
{
	font-size: 10px;
	top: -35px;
	right: 60px;
	color: #FFF;
}

.languageSelector
{
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 100;
	}
.languageSelector span { color: #4a302b; font-size: 12px; padding: 2px 6px 0 0; display: inline-block; float: left;  font-weight: bold; }
.languageSelector a.langTextLink { display: inline-block; float: left; color: #d4c4a0; font-size: 12px; font-weight: bold; text-decoration: none; padding: 2px 6px; margin-left: 4px; background: rgba(0,0,0,0.3); border-radius: 3px; }
.languageSelector a.langTextLink:hover { color: #fff; background: rgba(0,0,0,0.5); }
.portalPlayButton
{
	bottom: -18px;
	left: 338px;
	z-index: 1200;
}
.portalPlayButtonLeft
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/portalPlayButton.png') no-repeat scroll top left;
	font-size: 33px;
	height:65px;
	padding: 82px 0 0 149px;
}

.portalPlayButtonRight
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/portalPlayButton.png') no-repeat scroll bottom right;
	height: 148px;
	width: 25px;
}

.portalUnloggedButtonText
{
	margin-top: 39px;
}
.accManBarLoginBarContainer
{

}

.portalLeftMenu
{
	width: 188px;
	margin-top: 20px;
	margin-left: 10px;
}
.secondLeft
{
}

.portalContentBg
{
	width: 210px;
	margin-left: 9px;
}

.portalMenuBlocks
{
	top: -44px;
}
.portalMenuBlock
{
	padding: 10px 0;
	color: #e7d5b9;
}
.portalMenuBlock.selected
{
	background: url('https://mmhk-assets.pages.dev/img/portal/portalMenuBgOver.png') no-repeat;
	color: #e7d5b9;
}
.portalMenuBlock a.selected:hover
{
	color:#2f1a15;
}
.portalMenuText a
{
	padding: 2px 5px;
}
.portalMenuText a.selected
{
border-top: 1px solid #a88d79;
border-bottom: 1px solid #a88d79;
background: #8e6048;
color: #FFF;
}
.portalProfilBlock
{
	margin-left: 1px;
	height: 175px;
	padding: 0px 15px 17px 10px;
	color: #e7d5b9;
}

.portalMyProfileBlock
{
	color: #e7d5b9;
	bottom: 34px;
	padding:20px 0 20px 0;
}

.portalMyProfileInfoContainer
{
	width: 160px;
}

.portalMyprofileLinkContainer
{
}
.portalMyProfilePlayername
{
	top: -2px;
}
.portalMyProfileStatus
{
	top: -3px;
}

.portalMyProfileAlliance
{
	top: -2px;
	width: 108px;
}

.portalMenuBlock a, .portalLastMenuBlock a
{
	font-weight: bold;
}

.portalMenuBlock a:hover, .portalLastMenuBlock a:hover
{
	color: #ff7919;
	font-weight: bold;
}
.portalMenuBlockTitle
{
	color: #8e6048;
	margin-bottom: 10px;
}
.portalMenuText
{
	width: 180px;
	top: 20px;
	z-index: 3;
	padding-bottom: 20px;
}
.portalMenuText a
{
	display: block;
}
.friendKeyTease
{
	width: 724px;
	height: 241px;
	background: url('https://mmhk-assets.pages.dev/img/portal/friendKey.jpg') no-repeat top left;
}

.friendKeyTeaseText
{
	width:400px;
	height:46px;
	top:180px;
	left:260px;
}
.portalSlideShowImage
{
	width: 390px;
	height: 241px;
}
.portalSlideShowTitle
{
	font-weight: bold;
	font-style: italic;
	font-size: 18px;
	font-variant: small-caps;
}

.portalSlideShowDescription
{
}

.portalSlideShowDescription ul
{
	list-style-type: none !important;
	padding:0;
}

.portalSlideShowDescription ul li
{
	background: url(https://mmhk-assets.pages.dev/img/portal/slideshow/bullet.png) no-repeat 0 9px;
	padding-left : 14px;
}

.portalContentZone
{
	width: 762px;
}

.portalPageNotFoundImageTop
{
	width: 594px;
	height: 27px;
	top: 239px;
	background: transparent url('https://mmhk-assets.pages.dev/img/pageNotFound/pageNotFound.jpg');
	z-index: 1300;
}

.portalPageNotFoundImage
{
	width: 594px;
	height: 497px;
	background: transparent url('https://mmhk-assets.pages.dev/img/pageNotFound/pageNotFound.jpg') 0 -20px;
}

.portalPageNotFoundImageBg
{
	width: 594px;
	background: transparent url('https://mmhk-assets.pages.dev/img/pageNotFound/pageNotFoundBg.jpg') repeat-y;
}
.portalPageNotFoundText
{
	top: 30px;
	left: 90px;
	width: 260px;
}

.portalMiddleContent
{
	width: 600px;
}
.portalSpacer
{
	width: 541px;
	height: 20px;
	left: 200px;
}
.portalFooter
{
	color: #a88d79;
	padding: 10px 0;
	background: #ecdec2;
	clear: both;
	width: 972px;
	margin: 0 auto;
}
.portalFooterRight
{
	width:124px;
}
.legals
{
	width:460px;
}
.pegiUnlogged
{
	margin:15px auto 0 auto;
	width:748px

}
.changeIdentity
{
	width: 100%;
}
.portalTopHomepageLink
{
	/*display: block;*/
	top: 20px;
}
.portalTopBannerDefault
{
	width: 618px;
	height: 176px;
	top: -176px;
	left: 347px;
}
.portalHomepageLinks
{
		width: 475px;
		left: 110px;
}
.portalHomepageSlide
{
	height:250px;
}
.slideShowImageGallery
{
	width:400px;
}
.portalHomePageSlideButtonsContainer
{
	top: 215px;
	left: 658px;
	z-index: 500;
}

.portalHomePageSlideButtonsContainer div
{
	margin-right:5px;
}
.portalWhyRegister
{
	height:300px;
}
/*
.portalLoginLinks a
{
	color: #FFF;
}

.portalLoginLinks a:hover
{
	color: #fc5700;
}
*/
.portalNewsNoAuthorDate
{
	background-position: bottom;
}
.portalNewsSelected
{
	width:155px;
	height: 92px;
}

.worldSelectEnterBgRight
{
	background: url('https://mmhk-assets.pages.dev/img/portal/sub_right.gif') no-repeat;
	height: 24px;
	width: 9px;
}

.worldSelectEnterBgBody
{
	background: url('https://mmhk-assets.pages.dev/img/portal/sub_body.gif') repeat-x;
	height: 24px;
}

.worldSelectEnterBgLeft
{
	background: url('https://mmhk-assets.pages.dev/img/portal/sub_left.gif') no-repeat;
	height: 24px;
	width: 10px;
}

.portalDoubleBgZone
{
	width: 1002px;
	margin-left: 10px;
}

.portalGameWorldsMain
{
	width: 540px;
	/*bottom: 48px;*/
}

.portalSubMenuEntrySize
{
	font-size: 0px;
}

/**********************************************************
how to play / game guide
***********************************************************/

.howToPlayContainer
{
	width: 504px;
	background: #f2e1c3 url('https://mmhk-assets.pages.dev/img/portal/howToPlayBg.gif') repeat-y;
	z-index: 200;
	margin-left: 55px;
}

.gameGuideContainer
{
	width: 504px;
	background: #f2e1c3 url('https://mmhk-assets.pages.dev/img/portal/howToPlayBg.gif') repeat-y;
	z-index: 200;
	margin-left: 55px;
}

.trainingContainer
{
	width: 504px;
	background: #f2e1c3 url('https://mmhk-assets.pages.dev/img/portal/trainingBg.gif') repeat-y;
	z-index: 200;
	margin-left: 55px;
}

.changePagesZone
{
	width: 480px;
	color: #8E6048 !important;
	background-color: #caab88;
	width: 474px;
	color: #8E6048 !important;
	left: 5px;
	background: #caab88;
	height: 40px;
}

.changePagesBottomContainer
{
	margin-left: 55px;
}

.changePagesBottomLeft
{
	background: #caab88 url('https://mmhk-assets.pages.dev/img/portal/border-left.gif') no-repeat;
	height: 4px;
	width: 6px;
}

.changePagesBottomBg
{
	background: #caab88 url('https://mmhk-assets.pages.dev/img/portal/howToPlayBottomBg.gif') repeat-x bottom left;
	height: 5px;
	width: 492px;
}

.changePagesBottomRight
{
	background: #caab88 url('https://mmhk-assets.pages.dev/img/portal/border-right.gif') no-repeat;
	height: 4px;
	width: 6px;
}

.howToPlayLinks
{
	width: 100px;
}

.howToPlayHeader
{
	background: url('https://mmhk-assets.pages.dev/img/portal/howToPlayHeader.gif');
	width: 541px;
	height: 149px;
	top: 2px;
	margin-left: 17px;
	z-index: 250;
}

.gameGuideHeader
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideHeader.gif');
	width: 539px;
	height: 143px;
	top: 2px;
	left: 2px;
	margin-left: 20px;
	z-index: 250;
}


.howToPlayHeaderText, .gameGuideHeaderText
{
	position: absolute;
	color: #FFF;
	right: 35px;
	top: 82px;
}

.howToPlayWrapper
{
	bottom: 39px;
	z-index: 800;
}

.howToPlayWrapper ul
{
	list-style-image: url('https://mmhk-assets.pages.dev/img/portal/ulArrow.gif');
}

.howToPlayWrapper li
{
	padding-top: 0px;
	margin-bottom: 7px;
}

.gameGuideVisual
{
	z-index: 10;
}

.gameGuideTitle
{
	z-index: 20;
	margin-top: -20px;
	margin-bottom: 10px;
}

.portalChangePageTitle
{
	width: 120px;
	color: #8E6048;
	margin-top : 6px;
}

.portalChangePageTitleBig
{
	width: 160px;
	color: #8E6048;
	margin-top : 4px;
}

.gameGuideVisualCommandMyKingdom
{
	background: url('https://mmhk-assets.pages.dev/img/portal/howToCommandMyKingdom.jpg') no-repeat;
	width: 449px;
	padding: 315px 20px 20px 20px;
}
.gameGuideVisualWhatIsThatGame
{
	background: url('https://mmhk-assets.pages.dev/img/portal/whatIsThatGame.jpg') no-repeat;
	width: 449px;
	padding: 270px 20px 20px 20px;
}
.gameGuideVisualTheLongTerm
{
	background: url('https://mmhk-assets.pages.dev/img/portal/whatCanIExpectForTheLongTerm.jpg') no-repeat;
	width: 449px;
	padding: 320px 20px 20px 20px;
}
.gameGuideVisualMyFirstAction
{
	background: url('https://mmhk-assets.pages.dev/img/portal/whatAreMyFirstAction.jpg') no-repeat;
	width: 449px;
	padding: 280px 20px 20px 20px;
}

.gameGuideVisualHero
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideHero.jpg') no-repeat;
	width: 494px;
	height: 323px;
	left: 5px;
}

.gameGuideVisualTown
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideTown.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.gameGuideVisualWorld
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideWorld.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.gameGuideVisualAgression
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideAgression.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.gameGuideVisualCoop
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideCoop.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.gameGuideVisualBattle
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideBattle.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.gameGuideVisualRanking
{
	background: url('https://mmhk-assets.pages.dev/img/portal/gameGuideRanking.jpg') no-repeat;
	width: 503px;
	height: 325px;
}

.subMenu table:hover
{
	color: white;
}

/**********************************************************
portal rankings
***********************************************************/

.tableRankings
{
	border-left: solid 5px #efe3d5;
	border-right: solid 5px #efe3d5;
}

.rankingTableContainer
{
	width: 567px;
}

.rankingsHeadPlayers
{
	height: 30px;
}

.rankingsHeadPlayerDomination
{
	width: 183px;
	height: 16px;
	margin-left: 5px;
	padding-top: 3px;
	border: solid 1px #c70f0b;
	background-color: #dc0c06;
}
.rankingsHeadPlayerDominationSelected
{
	background: url('https://mmhk-assets.pages.dev/img/portal/domination.gif');
	padding-top: 3px;
	margin-left: 5px;
	width: 185px;
	height: 18px;
}

.rankingsHeadPlayerWealth
{
	width: 183px;
	height: 16px;
	margin-left: 1px;
	margin-right: 1px;
	padding-top: 3px;
	border: solid 1px #d26300;
	background-color: #ee831b;
}

.rankingsHeadPlayerWealthSelected
{
	background: url('https://mmhk-assets.pages.dev/img/portal/wealth.gif');
	margin-left: 1px;
	margin-right: 1px;
	padding-top: 3px;
	width: 185px;
	height: 18px;
}

.rankingsHeadPlayerHonor
{
	width: 183px;
	height: 16px;
	margin-right: 5px;
	padding-top: 3px;
	border: solid 1px #112a31;
	background-color: #245466;
}

.rankingsHeadPlayerHonorSelected
{
	background: url('https://mmhk-assets.pages.dev/img/portal/honor.gif');
	padding-top: 3px;
	width: 185px;
	height: 18px;
}

.rankingDominationBottomLine
{
	height: 4px;
	background-color: #dc0c06;
}

.rankingWealthBottomLine
{
	height: 4px;
	background-color: #ee831b;
}

.rankingHonorBottomLine
{
	height: 4px;
	background-color: #245466;
}

.rankingScrollPart
{
	background: url('https://mmhk-assets.pages.dev/img/portal/scrollBg');
	border-left: solid 2px #daccbe;
	width: 30px;
	height: 491px;
}

.rankingsPager
{
	height: 20px;
}

.rankingsSearchContainer
{
	height: 20px;
}

.rankingValidationButton
{
	bottom: 2px;
	left: 0px;
}

.rankingPlayersInfoText
{
	top: 5px;
}

.portalTabTitle
{
	line-height: 2;
}

.tabAlliancesRankingsPosition
{
	left: -9px;
}

.tabContainer
{
	width: 567px;
	height: 24px;
}

.cumulTear
{
	width: 23px;
	margin: 0 auto;
}

.tableRankingsColor
{
	background-color: #fbf7f3;
}

.rankingPosTitle
{
	width: 37px;
}
.rankingPlayerTitle
{
	margin-left: 43px;
	width: 120px;
}
.rankingPointTitle
{
	right: 14px;
}
.rankingTearTitle
{
	width: 57px;
}
.centrage
{
	margin: 0 auto;
}

.rankingTableBorder
{
	border-left: solid 1px #daccbe;
}

.RankingNameInputBg
{
	background: url('https://mmhk-assets.pages.dev/img/portal/nameInput.gif') no-repeat bottom left;
	width: 121px;
	height: 18px;
	padding: 2px 4px;
	border: none;
}

.RankingPositionInputBg
{
	background: url('https://mmhk-assets.pages.dev/img/portal/positionInput.gif') no-repeat;
	width: 41px;
	height: 18px;
	padding: 2px 4px;
	border: none;
}

.highlight
{
	color: #9f583f;
	background-color: #FFE2C6;
	border-top: 1px #E75700;
	border-bottom: 1px #E75700;
}

.highlight td
{
	border-top: 1px solid #E75700;
	border-bottom: 1px solid #E75700;
}

.highlight a
{
	color: #9f583f;
}

.highlightMe
{
	background: url(https://mmhk-assets.pages.dev/img/portal/bgSelfRanking.jpg) no-repeat;
}

.highlightMe a
{
	color: #e75700;
}

.highlightMe td.rankingTableBeg
{
	background: url(https://mmhk-assets.pages.dev/img/portal/bgSelfRankingBeg.jpg) no-repeat;
}

.highlightMe td.rankingTableMid
{
	background: url(https://mmhk-assets.pages.dev/img/portal/bgSelfRankingMid.jpg) no-repeat;
}


.highlightMe td.rankingTableEnd
{
	background: url(https://mmhk-assets.pages.dev/img/portal/bgSelfRankingEnd.jpg) no-repeat top right;

}

/**********************************************************
Lightbox / Gallery.js
***********************************************************/

#lightbox
{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 3000;
	text-align: center;
	line-height: 0;
}
#lightbox img
{
	width: auto;
	height: auto;
}
#lightbox a img
{
	border: none;
}

#outerImageContainer
{
	position: relative;
	background-color: #C8A98C;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	z-index:5000;
}

#imageContainer
{
	padding: 10px;
}
#loading
{
	position: absolute;
	text-align: center;
	line-height: 0;
}

#hoverNav
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 4001;
}

#imageContainer>#hoverNav
{
	left: 0;
}

#hoverNav a
{
	outline: none;
}

#prevLink, #nextLink
{
	width: 49%;
	height: 100%;
}

#prevLink
{
	left: 0;
	float: left;
}
#nextLink
{
	right: 0;
	float: right;
}

#prevLink:hover, #prevLink:visited:hover
{
	background: url(https://mmhk-assets.pages.dev/img/portal/gallery/prevlabel.gif) left 50% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover
{
	background: url(https://mmhk-assets.pages.dev/img/portal/gallery/nextlabel.gif) right 50% no-repeat;
}

#imageDataContainer
{
	font-size: 10px;
	background-color: #efe3d5;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	color: #50332b;
}

#imageData
{
	padding: 0 10px;
}

#imageData #imageDetails
{
	width: 70%;
	float: left;
	text-align: left;
}

#imageData #caption
{
	font-weight: bold;
}

#imageData #numberDisplay
{
	display: block;
	clear: left;
	padding-bottom: 1.0em;
}

#imageData #bottomNavClose
{
	width: 66px;
	float: right;
	padding-bottom: 0.1em;
	outline: none;
}

#overlay
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(https://mmhk-assets.pages.dev/img/portal/overlay.png);
}



/**********************************************************
Portal pages
***********************************************************/
.portalSildeshowContainer
{
	background: transparent;
}

.portalSlideshowContent
{
	height: 235px;
	margin-left: 18px;
}

.portalSildeshowFrame
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/blockheader.gif') no-repeat top left;
	height: 241px;
	width: 724px;
	margin-left: 18px;
	top: 0px;
}

.portalSlideShowBottom
{
	left: 391px;
	height: 231px;
	width: 310px;
	padding:5px 10px;
	background: url('https://mmhk-assets.pages.dev/img/portal/slideshow/bottom.jpg') no-repeat top left;
}

.portalContentBlock
{

}
.portalGalleryBottom
{
	bottom: 15px;
}
.portalContentBlockNews
{
	top: -19px;
	left: 2px;
}
.portalContentBlockGallery
{
	top: -19px;
	left: 60px;
}
.portalCartouche
{
	background: url('https://mmhk-assets.pages.dev/img/portal/cartoucheBg.gif') repeat-x top left;
	margin-top: 5px;
	padding-right: 4px;
	height: 26px;
	padding-top:2px;
}

.portalCartoucheEnd
{
	background: url('https://mmhk-assets.pages.dev/img/portal/cartoucheEnd.gif') no-repeat top left;
	width: 13px;
	height: 26px;
	margin-top: 5px;
}

.portalLatestNews
{
	width: 458px;
	height: 330px;
	padding: 20px 7px 0px 10px;
}
.portalLatestNewsContent
{
	width: 564px;
}
.portalLatestNewsTable
{
	width:453px;
}
.portalLatestNewsItem
{
	height: 55px;
	width: 538px;
	padding: 7px 7px;
}
.portalLatestNewsItemMedium
{
	height: 103px;
}
.portalLatestHomepageNewsItem
{
	height: 55px;
	width: 439px;
}
.portalLatestHomepageNewsItemMedium {
	height:103px;
}
.portalLatestFeaturedNewsItem
{
	height: 56px;
	width: 449px;
	padding: 7px 3px;
}
.portalLatestNewsResultsItem
{
	height: 55px;
	width: 544px;
	margin: 1px 8px 0px 4px;
	padding: 6px 0px 7px 6px;
}
.portalLatestNewsItem:hover
{

	background: #fff2e5 url('https://mmhk-assets.pages.dev/img/portal/newsArrowBg.gif') right center no-repeat;
}
.portalLatestHomepageNewsItem:hover
{

	background: #fff2e5 url('https://mmhk-assets.pages.dev/img/portal/newsArrowBg.gif') right center no-repeat;
}
.portalLatestFeaturedNewsItem:hover
{

	background: #fff2e5 url('https://mmhk-assets.pages.dev/img/portal/newsArrowBg.gif') right center no-repeat;
}
.portalLatestNewsResultsItem:hover
{
	background: #fff2e5 url('https://mmhk-assets.pages.dev/img/portal/newsArrowBg.gif') right center no-repeat;
}
.portalLatestNewsItem:hover a
{
	color:#e75700;
}
.portalLatestHomepageAutoLoadWorldNewsItem
{
	height: 167px;
	width: 453px;
	margin-top: 13px;
}
.portalLatestHomepageAutoLoadWorldNewsTitleBg
{
	width: 453px;
	height: 30px;
}
.portalLatestNewsImage
{
	width: 85px;
	height: 54px;
}
.portalLatestNewsImageMedium
{
	width: 162px;
	height: 103px;
}
.portalLatestNewsItemDate
{
	color:#a88d79;
}
.portalGallery
{
	width: 230px;
	height: 293px;
}

.portalGalleryMiniMain
{
	/*background:url('https://mmhk-assets.pages.dev/img/portal/galleryMediumBg.jpg') no-repeat top left;
	width: 200px;
	height: 134px;*/
	border: 2px solid #FFF;
}

.portalGalleryMiniWall
{
	text-align:center;
}

.portalGalleryMiniWall .mini
{
	width: 49px;
	height: 32px;
	display: inline;
	margin: 0 1px;
}

.portalGalleryMiniWall .mini img
{
	border: 1px solid #a38771;
}

.portalGalleryMiniWall .active img
{
	border: 1px solid #fef1e4;
}
.portalGameWorldsContainer
{
	position: relative;
	overflow: hidden;
	width: 566px;
	background-color: #efe3d5;
	border: 1px solid #d3bfa2;
	margin-top: 15px;
}
.portalGameWorldsTabContainer
{
	height: 24px;
	bottom: 1px;
	z-index: 1000;
	background-color: #d3bfa2;
}
.portalNavigationButton
{
	vertical-align: middle;
}

.portalContentPageLinkImage
{
	vertical-align: middle;
}
.necroPart
{
	top: -134px;
	left: -69px;
	margin: 0 auto;
	height: 272px;
	width: 135px;
}
.angelPart
{
	top: -16px;
	right: 18px;
	margin: 0 auto;
	height: 34px;
	width: 45px;
}

.worldSelectionOverBackground
{
	width: 259px;
	height: 157px;

}

.portalSubMenuBg
{
	width: 600px;
	height: 3px;
	left: 0px;
	top: 17px;
}

.portalSubMenuContainer
{
	width: 582px;
	bottom: -20px;
}

.portalSubMenuContent
{
	margin-left: 30px;
	margin-bottom: 20px;
	height: 50px;
	width: 550px;
}

.clanSitesButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuMyClanSite.gif');
	line-height: 2;
	height: 24px;
	width: 142px;
}

.clanSitesButtonInactive
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuMyClanSiteInactive.gif');
}

.fanSitesButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuFanSiteInactive.gif');
	line-height: 2;
	height: 24px;
	width: 142px;
}

.wikiButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuWiki.gif');
	line-height: 2;
	height: 24px;
	width: 142px;
}
.fanKitButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuFanKit.gif');
	line-height: 2;
	height: 24px;
	width: 142px;
}

.forumButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuForumLong.jpg');
	line-height: 2;
	height: 135px;
	width: 142px;
}
.trainingButton
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/menuTrainingMode_normal.jpg') no-repeat scroll top left;
	height: 155px;
	width: 142px;
}
.trainingButtonDetails
{
	height: 86px;
	width: 121px;
}
.trainingButtonBlock
{
	width: 53px;
	height: 49px;
}
.forumText
{
	top: 49px;
	width: 100%;
	color:#50332b;
}

.poolWeekButton
{
	background: url('https://mmhk-assets.pages.dev/img/portal/menuPoolWeekInactive.gif');
	line-height: 2;
	height: 22px;
	width: 142px;
}

.currentSubMenu
{
	color: #FFF;
}

.portalRightBanners
{
	right: 20px;
	top:88px;
}

.portalForumContainer /*do not delete will be used later*/
{
/*	background: url('https://mmhk-assets.pages.dev/img/portal/portalRightMenuBg.gif');
	width: 142px;*/
}

.portalRightMenuContentTitle
{
	color:#a88d79;
}

.portalRightMenuForumText
{
	width: 122px;
}

.portalForumBottom
{
	background: url('https://mmhk-assets.pages.dev/img/portal/portalRightMenuBottom.gif');
	width: 142px;
	height: 3px;
}

.contentTableWidth
{
	width: 790px;
}


/**********************************************************
Game worlds page
***********************************************************/
.worldSeparator
{
	font-size: 0px;
	background-color: #5e3931;
	height: 1px;
	margin: 20px 0px 30px;
}

.worldSubtitle
{
	text-transform: lowercase;
	font-size: 16px;
	font-weight: 500;
}

.demoSelectionBackground
{
	width: 342px;
	height: 150px;
}

.worldSelectionZone
{
	margin: 23px 0px 0px 10px;
}
.worldSelectionBackground
{
	width: 261px;
		height:180px;
		background: no-repeat;
}

.worldSelectionBackground2
{
	/*width: 540px;
	top: 6px;*/
	height: 210px;
	background: no-repeat;
}

.worldSelectionDisableBackground2
{
	width: 261px;
	height: 160px;
}
.worldSelectionDisableBackground
{
	width: 540px;
	height: 210px;
}
.worldBannerContainer
{
	/*background: url('https://mmhk-assets.pages.dev/img/mainMenu/mainBackground4.jpg') no-repeat;*/
	height: 40px;
	width: 960px;
}

.worldTitleBackground
{
	height: 64px;
	width: 590px;
}

.worldSelectWorldEnter
{
	top: 120px;
}

.worldSelectWorldSeason
{
	margin-bottom: 54px;
}
.worldSelectWorldName
{
	height:20px;
	overflow:hidden;
}
.worldSelectMainWorldEnter
{
	bottom: 3px;
	width: 540px;
}
.worldSelectMainWorldStatus
{
	top: 210px;
	width: 540px;
}

.worldSelectWorldEnter2, td
{
	vertical-align: middle !important;
}
.worldSelectMainWorldSeparator
{
	background-color: #8e6048;
	width: 488px;
	height: 1px;
}
.worldSelectMainWorldDisable
{
	top: 153px;
	width: 224px;
	background: #fffefd;
	border: 1px solid #b47d56;
}

.worldSelectWorldDisable
{
	top: 84px;
}

.worldSelectFriendKey
{
	top: 147px;
	cursor: default;
	width: 100%;
}
.worldSelectFriendKey
{
	top: 147px;
	cursor: default;
	width: 100%;
}
.worldSelectWorldTitle
{
	height: 30px;
	color: #2f1a15;
}

.worldSelectMainWorldTitle
{
	height: 25px;
	width: 540px;
	top: 36px;
}
.worldSelectMainWorldiPadExclusiveContainerBig
{
	background: url('https://mmhk-assets.pages.dev/img/portal/worlds/ipad_worldlist.png') no-repeat;
	top:123px;
	height: 34px;
	left: 212px;
	padding: 12px 0 0 10px;
	width: 108px;
}
.worldSelectMainWorldiPadExclusiveContainerLittle
{
	background: url('https://mmhk-assets.pages.dev/img/portal/worlds/ipad_worldlist.png') no-repeat;
	top:87px;
	height: 34px;
	padding: 12px 0 0 10px;
	width: 108px;
	left: 80px
}
.worldSelectBackground
{
	height: auto;
	text-align: center;
	margin: auto;
	position: relative;
}

.worldSelectionSlider
{
	right: 1px;
	top: 1px;
}

.worldSelectionSliderContainer
{
	z-index: 150;
}

.worldSelectBgDefault
{
	background: url('https://mmhk-assets.pages.dev/img/portal/default_normal_world_image.jpg') no-repeat;
}
.worldsCountrySelectorField
{
	width:566px;
	/*height:30px;*/
}
.worldsCountrySelectorTitle
{
	width:135px;
}
.worldSelectWorldMainReferralHeader
{
	background: url('https://mmhk-assets.pages.dev/img/portal/worlds/referral_header.png') no-repeat;
	width: 538px;
	height: 207px;
	/*z-index: 0;
	top: -1px;*/
}
.validationButtonZone2
{
	width: 63px;
	height: 39px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/button_01.gif');
	text-align: left;
	margin: auto;
}
.registerValidationButtonZone
{
	bottom: 23px;
	left: 65px;
}
.registerValidationButtonZone3
{
	bottom: 23px;
	left: 155px;
}
.registerRaceValidationButton
{
	left:-45px;
	bottom: 5px;
	width: 455px;
}
.registerBackButtonZone
{
	top: 109px;
	left: 241px;
}
.availablePlaces
{
	color: #008000;
}

.halfFull
{
	color: #e75700;
}

.nearlyFull
{
	color: #FFA500;
}

.almostFull
{
	color: #FF0000;
}

.gameWorldTabContainer
{
	line-height: 2;
	height: 24px;
}

.portalGameWorldsMainTitle
{
	width: 540px;
	top: 9px;
}
.portalGameWorldsMainContainer
{
	width: 565px;
}

.portalGameWorldsMainImage
{
	bottom: 33px
}

.portalTabTitlePosition
{
	right: 1px;
}

.portalTabTitlePosition2
{
	left: -10px;
}

.portalAvailableContainer
{
	margin-left: 9px;
}

.portalTabSelected
{
	z-index: 100;
	font-weight: bold;
}

.messageFrame #messageFrameCancel,
.messageFrame #messageFrameConfirm,
.messageFrame #messageFrameAccept
{
	border: 1px solid #8e6048;
	background-color: #e7d5b9;
	height: 9px;
	padding: 5px;
	line-height: 9px;
}
.messageFrame #messageFrameCancel:hover,
.messageFrame #messageFrameConfirm:hover,
.messageFrame #messageFrameAccept:hover
{
	border: 1px solid #8e6048;
	background-color: #ff7919;
	color: white;
}
.friendKeyContainer
{
	top: 135px;
	margin: 0 auto;
	color: #a88d79;
}

.mainFriendKeyContent
{
	background: #FFF;
	border: solid 1px black;
	margin: 0px auto 2px;
	width: 220px;
}

.friendKeyContent
{
	background: #FFF;
	border: solid 1px black;
	margin: 0px auto 2px;
	width: 220px;

}
/*******************************************************
ConfigTest
*******************************************************/

.divContentCenter
{
	margin: 0px auto;
	height: 588px;
}
/*
.videoTextCenter
{
	width: 1003px;
	margin: 0px auto;
}
*/
.configTestButtonDiv
{
	top: -22px;
}

.configTestBackButtonDiv
{
	bottom: 5px;
}

.configTestRetryButtonDiv
{
	bottom: 5px;
}

.configTestPlayButtonDiv
{
	bottom: 10px;
}

.configTestButtonSpan
{
	bottom: 8px;
	left: 5px;
}

.configTestDiv
{
	width: 709px;
	height: 465px;
}

.configTestContainer
{
	width: 709px;
	height: 374px;
}

.configTestButtonHeight
{
	padding-top: 3px;
	height: 23px !important;
}

.configTestContentBgLeft
{
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/bgLeft.jpg);
	width: 145px;
	height: 374px;
}

.configTestContentBgRight
{
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/bgRight.jpg);
	width: 145px;
	height: 374px;
}
.configTestTop
{
	background: transparent url('https://mmhk-assets.pages.dev/img/mainMenu/mainBackground4.jpg') scroll no-repeat top left;
	width: 709px;
	height: 41px;
	padding-top: 7px;
}

.configTestContent
{
	height: 372px;
	width: 417px;
	border-left: 1px solid #8e6048;
	border-right: 1px solid #8e6048;
}


.configTestTextPosition
{
	width: 160px;
}

.configTestTab td
{
	height: 50px;
}

.configTestTabWrap
{
	width: 65%;
	height: 100px;
}

.configButtonBody
{
	width: 80px;
	background-repeat: repeat-x;
	padding-top:1px;
}

.configButtonright
{
	background: url(https://mmhk-assets.pages.dev/img/sideBar/background_button_label_01.gif) no-repeat;
	width: 10px;
}

.configButtonBodyContinue
{
	width: 80px;
	background-repeat: repeat-x;
	padding-top: 1px;
}

.configButtonrightContinue
{
	background: url(https://mmhk-assets.pages.dev/img/sideBar/background3_button_label_01.gif) no-repeat;
	width: 10px;
}

.configTestBottom
{
	height: 40px;
}

.tooltip, .portalHeredityBlueTooltip, .portalHeredityRedTooltip,.autosizeTooltip
{
	background-color: #f8f9f4;
	color: #543629;
	border: 1px solid #312724;
	width: 329px;
	font-size: 11px;
	position: absolute;
	z-index: -1;
	top: -10px;
	text-align: center;
}
.autosizeTooltip
{
	width: auto;
	padding: 4px;
}
/**********************************************************
News page
***********************************************************/
.portalNews
{
	height: 69px;
}
/*** Border News Detail ****/
.portalNewsDetailBorderTop
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/borderNewsDetail_top.gif) no-repeat;
	width: 560px;
	height: 4px;
}
.portalNewsDetailBorderCenter
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/borderNewsDetail_center.gif) repeat-y;
	padding: 0px 4px 0px 7px;
}
.portalNewsDetailBorderBottom
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/borderNewsDetail_bottom.gif) no-repeat;
	width: 560px;
	height: 4px;
}
.portalNewsAbstract
{
	width: 445px;
}
.portalLatestNewsItemMedium .portalNewsAbstract
{
	width: 335px;
}
.portalNewsHomepageAbstract
{
	width: 345px;
}

.portalLatestHomepageNewsItemMedium .portalNewsHomepageAbstract
{
	width: 235px;
}
.portalNewsDetail
{
	width: 549px;
	height: 611px;
}
.portalNewsAuthorDate
{
	height: 115px;
}
.newsDetail
{
	height: 497px;
	width: 473px;
}
.newsDetailSlider
{
	right: 10px;
	top: 69px;
}
.newsViewerHeader
{
	/*height: 69px;*/
	width: 473px;
}
.newsDetailWorldList
{
	width:440px;
}
.newsViewerTagList
{
	height:31px;
}
.portalNewsHomepagePartWorldsAccordionInactive
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/portalNewsAccordionInactive.gif) no-repeat;
	width: 553px;
	height:30px;
	margin-left: 6px;
}
.portalNewsHomepagePartWorldsAccordionInactive:hover
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/portalNewsAccordionInactiveOver.gif) no-repeat;
	width: 553px;
	height:30px;
	margin-left: 6px;
}
.portalNewsHomepagePartWorldsAccordionActive
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/portalNewsAccordionActive.gif) no-repeat;
	width: 550px;
	height:26px;
	margin-left: 6px;
}
.portalNewsHomepagePartWorldsAccordionActiveContent
{
	width: 550px;
}
.portalNewsHomepagePartWorldsAccordionActiveContentShadow
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/portalNewsAccordionActiveContentShadow.gif) no-repeat;
	width: 550px;
	height:5px;
}
.accordionNewsContentImage
{
	background: url(https://mmhk-assets.pages.dev/img/portal/news/tearsImage.gif) no-repeat;
	width: 39px;
	height:60px;
}
.accordionNewsContentText
{
	width: 465px;
}
.portalNewsHomeArchives
{
	width: 564px;
}
.portalNewsHomeArchivesForm
{
	height:35px;
	width: 564px;
}
.portalNewsSummaryConten
{
	height: 512px;
}
.portalNewsSpacer
{
	height: 6px;
}
.portalNewsResultsList
{
	width: 564px;
}



/*
	Create News form
*/
.createNewsTitle
{
	font-weight: bold;
	margin: 5px;
	font-size: 16px;
}

.createNewsLocaleTitle
{
	font-weight: bold;
	padding-top: 20px;
	cursor: pointer;
}

.createNewsLeftColumn
{
	width: 235px;
}

.columnText
{
	padding: 10px;
}

.createNewsSubmitButton
{
	text-align: center;
	margin-top: 30px;
}
/**********************************************************
portal profile
***********************************************************/
.profileHeader
{
	height: 66px;
	padding-left:25px;
}
.portalProfileHeaderBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/profile/portalProfileHeaderBg.jpg');
	height: 130px;
	width: 568px;
	left: -10px;
}

.portalProfileWorldTitle
{
	top: -10px;
}

.portalProfileWorldTitleSeparatorBg
{
	height: 20px;
}

.portalProfileWorldTitleSeparator
{
	width: 543px;
	height: 2px;
	background-color: #FFF;
}

.portalProfileWorldsBg
{
	width: 556px;
}
.profileWorldName
{
	width: 367px;
}
.profilePlayerRankingIcone
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/profile/portalProfilePlayerRanking.gif');
	height: 40px;
	width: 35px;
}
.profileAllianceRankingIcone
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/profile/portalProfileAllianceRanking.gif');
	height: 33px;
	width: 40px;
}
.accordionWorldsBanner
{
	width: 	543px;
	height: 29px;
	background-color: #d3bfa2;
}
.accordionWorldsContent
{
	width: 	543px;
}
.portalProfileRankingAlliance
{
	width: 	524px;
	height: 120px;
}

.portalProfileRankingPlayer
{
	width: 	524px;
	height: 85px;
}
.portalProfileSignature
{
	width: 	504px;
}

.portalHeadPlayerDomination
{
	width: 110px;
	height: 17px;
	background-color: #dc0c06;
}
.portalHeadPlayerWealth
{
	width: 110px;
	height: 17px;
	background-color: #EE831B;
}
.portalHeadPlayerHonor
{
	width: 110px;
	height: 17px;
	background-color: #245466;
}
.portalRankingPositionBg
{
	width: 330px;
	height: 66px;
	background-image: url('https://mmhk-assets.pages.dev/img/portal/profile/portalRankingPositionBg.gif');
}
.portalRankingNumberCities
{
	width: 62px;
	height: 17px;
}

.portalRankingPosition
{
	width: 36px;
}

.portalRankingPoint
{
	width: 74px;
}

.portalTableBorder
{
	width: 1px;
	height: 24px;
	background-color: #c2a176;
}

.portalTableBorder2
{
	width: 1px;
	height: 66px;
	background-color: #dacbbc;
}

.portalTableBorder3
{
	width: 1px;
	height: 87px;
	background-color: #dacbbc;
}

.portalHeadAllianceRankingPosition
{
	width: 36px;
	height: 19px;
	background-color: #e7d4b7;
}

.portalHeadAllianceRankingName
{
	width: 221px;
	height: 19px;
	background-color: #e2a84d;
}

.portalHeadAllianceRankingPoints
{
	width: 80px;
	height: 19px;
	background-color: #e7d4b7;
}

.portalHeadAllianceRankingRegions
{
	width: 74px;
	height: 19px;
	background-color: #e7d4b7;
}

.portalHeadAllianceRankingTears
{
	width: 67px;
	height: 19px;
	background-color: #e7d4b7;
}

.portalAllianceRankingDatasPosition
{
	width: 36px;
	height: 52px;
	padding: 35px 0 0;
}

.portalAllianceRankingIcon
{
	width: 221px;
	height: 87px;
	background-color: #fad293;
}

.portalAllianceRankingAllianceName
{
	width: 100px;
}

.portalAllianceRankingDatasPoints
{
	width: 80px;
	height: 52px;
	padding: 35px 0 0;
}

.portalAllianceRankingDatasRegions
{
	width: 74px;
	height: 52px;
	padding: 35px 0 0;
}

.portalAllianceRankingDatasTears
{
	width: 67px;
	height: 69px;
	padding: 18px 0 0;
}

.portalTableSeparator
{
	width: 524px;
	height: 1px;
	background-color: #fffefd;
}

.portalFooterBg
{
	width: 560px;
	height: 38px;
}

/*********************************************
		REGISTER
**********************************************/
.registerHeader
{
	background-image: url('https://mmhk-assets.pages.dev/img/subscription/header.jpg');
	height: 48px;
}
.registerFoote
{
	height: 55px;
}
.subscribeWorldFormContent
{
	font-size: 0px;
}
.factionLayerZone
{
	height: 550px;
}

.highlightSelector
{
	top: -7px;
}
.factionSelector{
	width:160px;
	height:256px;
}
.factionImage{
	width:114px;
	height:191px;
}
.registerRaceImageContainer
{
	height: 384px;
	width: 230px;
}
.registerFactionSpec{
	width:80px;
}

.registerRaceImageContainer_HAVEN
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/haven_normal.jpg');
}

.registerRaceImageContainer_HAVEN:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/haven_hover.jpg');
}

.registerRaceImageContainer_HAVEN.inactive
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/haven_inactive.jpg');
}

.registerRaceImageContainer_HAVEN.inactive:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/haven_hover.jpg');
}


.registerRaceImageContainer_ACADEMY
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/academy_normal.jpg');
}

.registerRaceImageContainer_ACADEMY:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/academy_hover.jpg');
}

.registerRaceImageContainer_ACADEMY.inactive
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/academy_inactive.jpg');
}

.registerRaceImageContainer_ACADEMY.inactive:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/academy_hover.jpg');
}

.registerRaceImageContainer_INFERNO
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/inferno_normal.jpg');
}

.registerRaceImageContainer_INFERNO:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/inferno_hover.jpg');
}

.registerRaceImageContainer_INFERNO.inactive
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/inferno_inactive.jpg');
}

.registerRaceImageContainer_INFERNO.inactive:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/inferno_hover.jpg');
}

.registerRaceImageContainer_NECROPOLIS
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/necropolis_normal.jpg');
}

.registerRaceImageContainer_NECROPOLIS:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/necropolis_hover.jpg');
}

.registerRaceImageContainer_NECROPOLIS.inactive
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/necropolis_inactive.jpg');
}

.registerRaceImageContainer_NECROPOLIS.inactive:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/necropolis_hover.jpg');
}

.registerRaceImageContainer_SYLVAN
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/sylvan_normal.jpg');
}

.registerRaceImageContainer_SYLVAN:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/sylvan_hover.jpg');
}

.registerRaceImageContainer_SYLVAN.inactive
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/sylvan_inactive.jpg');
}

.registerRaceImageContainer_SYLVAN.inactive:hover
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/sylvan_hover.jpg');
}
.registerFactionContainerBackground{
		background: url("https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg.png") no-repeat scroll top center transparent;
}
.registerFactionContainerBackground2{
		background: url("https://mmhk-assets.pages.dev/img/firstConnection/registrationBackground_ACADEMY.png") no-repeat scroll top center transparent;
}
.registerFactionContainerBackground_HAVEN
{
	background: url("https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg_HAVEN.png") no-repeat scroll top center transparent;
}
.registerFactionContainerBackground_ACADEMY
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg_ACADEMY.png') no-repeat scroll center top transparent;
}
.registerFactionContainerBackground_INFERNO
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg_INFERNO.png') no-repeat scroll center top transparent;
}
.registerFactionContainerBackground_NECROPOLIS
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg_NECROPOLIS.png') no-repeat scroll center top transparent;
}
.registerFactionContainerBackground_SYLVAN
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/chooseRaceBg_SYLVAN.png') no-repeat scroll center top transparent;
}
.registerRaceSpecialityBarContainerTroops
{
	top:-1px;
}
.playerSetupSettingsFactionIntroMoreInformationButton
{
	left: 135px;
}
.minigal
{
	left: 400px;
	height: 296px;
	width: 240px;
}
.registerRaceDescription
{
	margin: 3px 5px 0px 5px;
	height: 120px;
}

.registerContainer
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/registerBg.gif') repeat-x;
	width: 960px;
	height: 614px;
	margin-top: 0px;
}
.registerContent
{
	height: 619px;
	width: 1017px;
}

.factionSelectorSlider
{
	height:245px;
	width:800px;
	position:relative;
	top:3px;


}
.factionSelectorLeftButton
{
	width:20px;
	height:200px;
	background-color:red;
}
.factionSelectorRightButton
{
	width:20px;
	height:200px;
	background-color:red;
	top:-200px;
}
.factionSelectorSliderList
{
	height:275px;
}

.registerCityImage
{
	left: 91px;
}

.heroChoiceZone
{
	width: 200px;
}
.registerSelectFactionContainer
{
	height: 37px;
}

.registerSelectFactionContainerText
{
	bottom: 8px;
}
.heroChoiceText
{
	width: 135px;
	height: 74px;
}
.heroChoiceImageZone
{
	height: 100px;
}

.heroBackground
{
	width: 92px;
	height: 92px;
	background: transparent url('https://mmhk-assets.pages.dev/img/firstConnection/allianceIcon.png') scroll no-repeat top center;
}

/*.registerHeroPicture
{
}*/

.registerRaceSpeciality
{
	border-top: none;
	background: #e7d5b9;
	height: 60px;
	width: 178px;
	left: -4px;
}

.registerRaceSpecialityBarBg
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/levelBar.png') no-repeat;
	height: 10px;
	width: 80px;
	/*margin-top: 6px;*/
}

.registerRaceSpecialityBar
{
	background: url('https://mmhk-assets.pages.dev/img/firstConnection/subscription/caracJauge.gif') repeat-x top left;
	height: 7px;
	float: left;
}

.factionCharacGreenSpot
{
	width:7px;
	height:7px;
	float:left;
}
.factionCharacGreenSpot_1
{
	left:0px;
}
.factionCharacGreenSpot_2
{
	left:-2px;
}
.factionCharacGreenSpot_3
{
	left:-2px;
}
.factionCharacGreenSpot_4
{
	left:-2px;
}
.factionCharacGreenSpot_5
{
	left:-2px;
}
.HAVENMagicCarac
{
	width: 20%;
}

.HAVENEconomyCarac
{
	width: 40%;
}

.HAVENTroopsCarac
{
	width: 100%;
}

.ACADEMYMagicCarac
{
	width: 80%;
}

.ACADEMYEconomyCarac
{
	width: 60%;
}

.ACADEMYTroopsCarac
{
	width: 20%;
}
.INFERNOMagicCarac
{
	width: 40%;
}

.INFERNOEconomyCarac
{
	width: 40%;
}

.INFERNOTroopsCarac
{
	width: 80%;
}

.NECROPOLISMagicCarac
{
	width: 60%;
}

.NECROPOLISEconomyCarac
{
	width: 60%;
}

.NECROPOLISTroopsCarac
{
	width: 40%;
}

.SYLVANMagicCarac
{
	width: 20%;
}

.SYLVANEconomyCarac
{
	width: 60%;
}

.SYLVANTroopsCarac
{
	width: 80%;
}
.loadingLayer
{
	width: 1003px;
	height: 514px;
}

/** Registration Background **/
.registerPopup{
		background: #f1e5d9 url('https://mmhk-assets.pages.dev/img/frame/gradient.jpg') repeat-x center bottom;
		height:509px;
		margin:0 auto;
		position: relative;
		top:30px;
		width:800px;
		z-index:10000;
}

/** Registration Hero **/
.registrationHeroACADEMY,
.registrationHeroHAVEN,
.registrationHeroINFERNO,
.registrationHeroNECROPOLIS
{
	bottom: -69px;
	right: -129px
}
.registrationHeroACADEMY
{
	width: 273px;
	height: 387px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationHero_ACADEMY.png) no-repeat scroll bottom right;
	z-index: 1;
}
.registrationHeroHAVEN
{
	width: 273px;
	height: 387px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationHero_HAVEN.png) no-repeat scroll bottom right;
	z-index: 1;
}
.registrationHeroINFERNO
{
	width: 293px;
	height: 349px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationHero_INFERNO.png) no-repeat scroll bottom right;
	z-index: 1;
}
.registrationHeroNECROPOLIS
{
	width: 273px;
	height: 387px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationHero_NECROPOLIS.png) no-repeat scroll bottom right;
	z-index: 1;
}
.registrationHeroSYLVAN
{
	width: 334px;
	height: 380px;
	background: url("https://mmhk-assets.pages.dev/img/firstConnection/registrationHero_SYLVAN.png") no-repeat scroll 0px bottom transparent;
	z-index: 1;
	bottom: -69px;
	right: -132px
}

/** Registration City **/
.registrationCityACADEMY,
.registrationCityHAVEN,
.registrationCityINFERNO,
.registrationCityNECROPOLIS,
.registrationCitySYLVAN,
.registrationCreatureACADEMY,
.registrationCreatureHAVEN,
.registrationCreatureINFERNO,
.registrationCreatureNECROPOLIS,
.registrationCreatureSYLVAN
{
	bottom: 0px;
	left: 18px;
}
.registrationCityACADEMY
{
	width: 726px;
	height: 283px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCity_ACADEMY.jpg);
}
.registrationCityHAVEN
{
	width: 430px;
	height:184px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCity_HAVEN.jpg);
}
.registrationCityINFERNO
{
	width: 782px;
	height: 343px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCity_INFERNO.jpg);
}
.registrationCityNECROPOLIS
{
	width: 433px;
	height: 277px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCity_NECROPOLIS.jpg);
}
.registrationCitySYLVAN
{
	width: 769px;
	height: 314px;
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCity_SYLVAN.jpg);
}
/** Registration Creature **/
.registrationCreatureACADEMY
{
	width: 433px;
	height: 82px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCreature_ACADEMY.jpg);
	left: 380px;
}
.registrationCreatureHAVEN
{
	width: 438px;
	height: 80px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCreature_HAVEN.jpg);
	left: 348px;
}
.registrationCreatureINFERNO
{
	width: 369px;
	height: 109px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCreature_INFERNO.jpg);
	left: 414px;
}
.registrationCreatureNECROPOLIS
{
	width: 474px;
	height: 115px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCreature_NECROPOLIS.jpg);
	left: 348px;
}
.registrationCreatureSYLVAN
{
	width: 449px;
	height: 186px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registrationCreature_SYLVAN.jpg);
	left: 370px;
}

.registerHeroChoiceZone
{
	width: 280px;
	height: 165px;
	top: -35px;
}

.nextStepButtonPosition
{
	bottom: 13px;
}
.createKingdomButtonPosition
{
	bottom: 13px;
}

.invalidPlayerNameErrorBox
{
	width: 188px;
}
.invalidPlayerNameError, .invalidCityNameError
{
	left: 265px;
	width: 316px;
}

.invalidPlayerNameError
{
	top: 42px;
}

.invalidCityNameError
{
	top: 82px;
}

.playerSetupFactionLittleHeader
{
	width: 448px;
	height: 40px;
}
.playerSetupPageIntroTextBg
{
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/introTextBg.jpg);
	height: 349px;
	width: 303px;
}
.playerSetupFactionLayerDescriptionContainer
{
	width: 650px;
	height: 334px;
	left: 0px;
}
.playerSetupPageIntroTextContainer
{
	width: 430px;
	left: -44px;
}
.playerSetupPageIntroText{
	height:100px;
}
.playerSetupPageIntroText p{
	padding-top:5px;
}
.playerSetupNoHeredityZonePosition
{
	width: 730px;
	height: 133px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupNoHeredityZoneBg.png) no-repeat scroll top center;
	margin: auto;
}
.playerSetupNoHeredityZoneText
{
	width: 470px;
	padding: 50px 50px 0 0;
}
.playerSetupHeredityZonePosition
{
	width: 739px;
	height: 133px;
	top: 15px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupHeredityZoneBg.png) no-repeat scroll top center;
	margin: auto;
}
.playerSetupHeredityTitleBar
{
	width: 728px;
	height: 31px;
}
.playerSetupHeredityAbilityDetails
{
	width: 728px;
	height: 82px;
}
.playerSetupHeredityAbilityDetails_HERO
{
	margin-top:2px;
	margin-left:16px;
}
.playerSetupHeredityAbilityDetails_TROOPS
{
	margin-top:2px;
	margin-left:15px;
}
.playerSetupHeredityAbilityDetails_KINGDOM
{
	margin-top:2px;
	margin-left:13px;
}
.playerSetupHeredityAbilityDetails_EQUIPMENT
{
	margin-top:5px;
	margin-left:16px;
}
.titleBarPortalHeredityWorld
{
	width: 725px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupHeredityWorldListZoneBg.png) repeat-y scroll top center;
	margin-left: -1px;
}
.titleBarPortalHeredityWorld:hover
{
	width: 725px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupHeredityWorldListZoneBgOver.png) repeat-y scroll top center;
	margin-left: -1px;
}
.playerSetupHeredityWorldListPoints
{
	margin-top: 5px;
	margin-left: 300px;
	width: 110px;
}
.playerSetupHeredityWorldListSeparator
{
	background-color: #125b9b;
	width: 724px;
	height: 1px;
	z-index: 1000;
}
.playerSetupHeredityActiveWorld
{
	width: 400px;
	margin-left: 20px;
	top: -5px;
	position: relative;
	font-size: 18px;
}
.playerSetupHeredityTitleBarShowList,
.playerSetupHeredityTitleBarHideList
{
	width: 20px;
	height: 20px;
	left: 702px;
	top: 4px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/heredityShowListArrow.jpg) no-repeat scroll top center;
}
.playerSetupHeredityTitleBarShowList:hover,
.playerSetupHeredityTitleBarHideList:hover
{
	width: 20px;
	height: 20px;
	left: 702px;
	top: 4px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/heredityShowListArrowOver.jpg) no-repeat scroll top center;
}
.playerSetupHeredityTitleBarHeredityLineage
{
	width: 500px;
}
.playerSetupHeredityAbility
{
	width: 174px;
	height: 82px;
}
.playerSetupHeredityAbilityEquipedName
{
	width: 110px;
	height: 47px;
}
.playerSetupHeredityAbilityEdit
{
	width: 32px;
	height: 81px;
	left: 707px;
}
.heredityConfirmationContainer
{
	background: url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupHeredityWarningBg.png) no-repeat;
	width: 727px;
	height: 337px;
	margin:15px 0 0px 136px;
}
.heredityConfirmationWarningTitle
{
	width:600px;
	margin: 0 0 0 52px;
	padding: 30px 0 0 0;
	border-bottom:1px solid #e75700;
}
.heredityConfirmationWarningText
{
	width:510px;
	margin: 15px 0 35px 125px;
}
.playerSetupContainerPosition
{
	width: 731px;
	height: 342px;
	top: 20px;
}
.playerSetupFactionStrenghWeaknesses
{
	width: 170px;
}
.playerIconBg
{
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/playerIcon.png);
	width: 54px;
	height: 53px;
}
.playerSetupCityNameBox
{
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupCityNameBox.jpg);
	width: 497px;
	height: 105px;
}

.registerPlayerName
{
	width: 721px;
	height: 72px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registerPlayerNameBg.jpg);
}
.registerPlayerIcon
{
	width: 497px;
	height: 148px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registerPlayerIcon.jpg);
}
.registerEnterPlayerName
{
	width: 137px;
	height: 81px;
	line-height: 5;
}
.registerEnterHeroName
{
	width: 137px;
	/*height: 72px;
	line-height: 4;*/
}
.registerHeroTraining
{
	width: 137px;
	height: 109px;
	line-height: 7;
}
.heroTrainingChoice
{
	width: 357px;
	height: 109px;
}
.heroTrainingTitleContainer
{
	width: 205px;
	height: 109px;
	margin-left: 5px;
	margin-right: 5px;
}
.registerEnterCityName
{
	width: 137px;
	height: 104px;
	line-height: 6;
}
.registerPopup .labelButtonForm{
	bottom:2px;
	left:250px;
}
.invalidCityNameErrorBox
{
	width: 175px;
	height: 54px;
}
.registerEnterCityNameZone
{
		width: 340px;
		height: 105px;
}
.registerEnterCityNameCharacterRemaining
{
	width: 130px;
}
.registerPlayerNameErrorMessage
{
	width: 153px;
	height: 61px;
}
registerEnterPlayerName.registerFriendKeyCheckMessage
{
	width: 279px;
	top: 200px;
}
.playerSetupReferralKeyFeedback
{
	width:270px;
}
.registerHeroName
{
	width: 724px;
	height: 100px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registerHeroNameBg.jpg);
}
.registerPlayerHeroNameField
{
	width: 497px;
	height: 72px;
	background-image: url(https://mmhk-assets.pages.dev/img/firstConnection/registerPlayerHeroNameField.jpg);
}
.registerIconPanelField
{
	height: 148px;
	width: 341px;
	position: relative;
		z-index: 10;
}
.registerPlayerIconField
{
	height: 52px;
}
.playerSetupCityNamePreviewName
{
	bottom: 11px;
}
/* onglets register*/
.registerPlayerNameIconSetupSummaryTabContentOn
{
	width: 186px;
	height: 139px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupPlayerEditTabOn.png) scroll no-repeat top left;
}
.registerCityNameSetupSummaryTabContentOn
{
	width: 186px;
	height: 139px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupCityEditTabOn.png) scroll no-repeat top left;
	top: 100px;
}
.registerHeroNameSetupSummaryTabContentOn
{
	width: 186px;
	height: 139px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupHeroEditTabOn.png) scroll no-repeat top left;
	top: 201px;
}
.registerPlayerNameIconSetupSummaryTabContentOff
{
	top: 0px;
	left: 10px;
	width: 169px;
	height: 96px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOff.png) scroll no-repeat top left;
	color: #a88d79;
	line-height: 3;
}
.registerCityNameSetupSummaryTabContentOff
{
	top: 141px;
	left: 10px;
	width: 169px;
	height: 96px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOff.png) scroll no-repeat top left;
	color: #a88d79;
	line-height: 3;
}
.registerHeroNameSetupSummaryTabContentOff
{
	top: 240px;
	left: 10px;
	width: 169px;
	height: 96px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOff.png) scroll no-repeat top left;
	color: #a88d79;
	line-height: 3;
}
.registerPlayerNameIconSetupSummaryTabContentOk
{
	top: 0px;
	width: 179px;
	height: 102px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOk.jpg) scroll no-repeat top left;
}
.registerCityNameSetupSummaryTabContentOk
{
	top: 100px;
	width: 179px;
	height: 102px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOk.jpg) scroll no-repeat top left;
}
.registerHeroNameSetupSummaryTabContentOk
{
	top: 200px;
	width: 179px;
	height: 102px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerSetupEditTabOk.jpg) scroll no-repeat top left;
	position: relative;
}
.registerSelectIcon
{
	width: 138px;
	height: 148px;
	line-height: 9;
}
.registerPlayerSetupPlayerIconBriefBox
{
	height: 66px;
}
.registerPlayerSetupPlayerIconEdit
{
	left: 231px;
}
.playerSetupCityNameBriefBoxText
{
	top: 190px;
}
.playerIconDeco
{
	width: 54px;
	height: 48px;
	background: transparent url(https://mmhk-assets.pages.dev/img/firstConnection/playerIcon.png) no-repeat scroll top center;
	padding-top: 6px;
}
.playerIconPatternLayer
{
	top: -40px;
	z-index: 2;
}
.playerIconIconLayer
{
	top: -80px;
	z-index: 3;

}
.legal
{
	width: 981px;
	height: 641px;
	z-index: 1;
}


/*******************************************************
training mode
*******************************************************/

.demoTextButton
{
	bottom: 9px;
	right: 4px;
}

.demoRightButton
{
	right: 8px;
}

.demoButton
{
	bottom: 12px;
	left: 3px;
}

.trainingModeText
{
	width: 282px;
}

.trainingHeader
{
	background: url('https://mmhk-assets.pages.dev/img/portal/trainingHeader.gif');
	width: 506px;
	height: 143px;
	left: 33px;
	margin-left: 20px;
}

.trainingFrameTop
{
	width: 225px;
}

.trainingFrameTop td
{
	vertical-align: top !important;
}

.trainingFrameImage
{
	background: url('https://mmhk-assets.pages.dev/img/portal/training01.jpg');
	height: 144px;
	width: 129px;
}

.trainingFrameArrow
{
	background: url('https://mmhk-assets.pages.dev/img/portal/arrow.jpg');
	height: 75px;

}

.trainingFrameBottom
{
	background: url('https://mmhk-assets.pages.dev/img/portal/button_bg.jpg') bottom;
	height: 150px;
}

.trainingModeDemoTextSize
{
	height: 64px;
}

.trainingModeDemoButtonSize
{
	height: 45px;
}

.trainingModeDemoButtonPositionR
{
	right: 3px;
}

.portalBillingNoSubContainer
{
	background: url('https://mmhk-assets.pages.dev/img/portal/bgPortalBilling.jpg');
	height: 345px;
	width: 550px;
}

.portalBillingNoSubContent
{
	height: 200px;
	width: 290px;
}

.betaKeyContent
{
	width: 500px;
	padding: 50px 0 0 20px;
}

#parchmentMiddle .betaKeyContent
{
	width: 500px;
	padding: 0 0 50px 230px;
}

.betaKeyError
{
	color: red;
}

.demoBillingButton
{
	width: 340px;
}
/*******************************************************
portal billing
*******************************************************/

.portalBillingFrameTab
{
	height: 42px;
	top: 2px;
}

.portalSubscriptionOfferBillingDuration
{
	width: 65px;
}

.portalBillingHistoryContent
{
	width: 567px;
	height: 369px;
	border: 1px solid #F2AC10;
	background-color: #ffdc99;
}

.portalBillingHistoryHeader
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHeader.gif');
	width: 567px;
	height: 33px;
	line-height: 21px;
}

.portalBillingHistoryList
{
	width: 550px;
	line-height: 30px;
}

.accountBillingHistoryList .odd
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHistoryListOdd.gif');
	height: 30px;
	width: 550px;
}

.accountBillingHistoryList .even
{
	height: 30px;
	width: 550px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHistoryListEven.gif');
}

.portalBillingStartDate
{
	width: 113px;
}

.portalBillingSubscription
{
	width: 323px;
}

.portalBillingEndDate
{
	width: 113px;
}

.portalBillingSubscriptionFeatures
{
	width: 375px;
	height: 193px;
	top: 5px;
	left: 172px;
}

.optionBilling
{
	width: 289px;
}

.portalBillingGoIngameLink
{
	width: 567px;
	border: 1px solid #e75700;
	background-color: #ffdc99;
}

.portalAccountBillingMainSummaryBgSubscriptionOffer1Month, .portalAccountBillingMainSummaryBgSubscriptionOffer1MonthUpgrade, .portalAccountBillingMainSummaryBgSubscriptionOffer1MonthBack
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/01_bgSubscriptionPortal.jpg');
	background-repeat : no-repeat;
	background-position : 8px 12px;
	width: 567px;
	top: 13px;
	left: 27px;
}
.portalAccountBillingMainSummaryBgSubscriptionOffer2Months
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/02_bgSubscriptionPortal.jpg');
	background-repeat : no-repeat;
	background-position : 8px 12px;
	width: 567px;
	top: 13px;
	left: 27px;
}
.portalAccountBillingMainSummaryBgSubscriptionOffer3Months
{
	background : url('https://mmhk-assets.pages.dev/img/portal/03_bgSubscriptionPortal.jpg');
	background-repeat : no-repeat;
	background-position : 8px 12px;
	width: 567px;
	top: 13px;
	left: 27px;
}

.accountBillingMainSummaryBgSubscriptionOffer3Months
{
	background : url('https://mmhk-assets.pages.dev/img/frame/userAccount/MainSummaryThreeMonth.jpg');
	background-repeat : no-repeat;
	background-color : #ffdc9a;
	width: 567px;
	height: 259px;
	top: 13px;
	left: 27px;
}

.profilAccountBillingSummaryBackground
{
	border: solid 1px #f2ac10;
	height: 355px;
}

.accountBillingBeigeSeparator
{
	background-color: #fffefd;
	width: 365px;
	height: 1px;
}

.accountBillingNextPaymentBg
{
	background-color: #ffeec7;
	width: 365px;
	height: 16px;
}

/*******************************************************
	PORTAL HEREDITY
*******************************************************/

.legacyIntroLeftCol
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/legacy/leftCol.jpg') scroll no-repeat top left;
	width: 168px;
	height: 461px;
}
.legacyIntroBg
{
	background: #f1e7d8 url('https://mmhk-assets.pages.dev/img/frame/legacy/messageGradientBg.jpg') scroll repeat-x bottom left;
}
.legacyIntroHeader
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/legacy/header.jpg') scroll no-repeat top left;
	width: 336px;
}
.legacyIntroTitle
{
	height: 63px;
}
.legacyIntroMessage
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/legacy/messageBg.jpg') scroll no-repeat bottom left;
	height: 387px;
}
.legacyIntroMessage p
{
	margin-bottom: 10px;
}
.portalHeredityHeaderBg
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHeaderBg.png') scroll no-repeat top center;
	width: 528px;
	height: 76px;
}
.portalHeredityShowWorldButton
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/showWorldButton.png') scroll no-repeat left center;
	width: 17px;
	height: 95px;
}
.portalHeredityShowWorldButton:hover
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/showWorldButtonOver.png') scroll no-repeat left center;
	width: 17px;
	height: 95px;
}
.portalHeredityHideWorldButton
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/hideWorldButton.png') scroll no-repeat left center;
	width: 17px;
	height: 95px;
}
.portalHeredityHideWorldButton:hover
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/hideWorldButtonOver.png') scroll no-repeat left center;
	width: 17px;
	height: 95px;
}
.portalHeredityActiveWorld
{
	width: 384px;
	height: 76px;
}
.portalHeredityActiveWorldList
{
	width: 528px;
	height: 76px;
	background-color: #001133;
}
.portalHeredityActiveWorldList:hover
{
	background-color: #ff7919;
}
.portalHeredityContainerBg
{
	background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityContainerBg.jpg') scroll no-repeat top center;
	width: 543px;
	height: 588px;
}
.portalHeredityWorldListBg
{
	/*background: #013060 url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityWorldListBg.gif') scroll repeat-y top center;*/
	/*background-color: #0a4b83;*/
	width: 543px;
	height: 100%;
}
.portalHeredityWorldListSeparator
{
	background-color: #074880;
	width: 543px;
	height: 1px;
}
.portalHeredityTitleBonus, .portalHeredityTitleMalus
{
	width: 126px;
	height: 19px;
}
.portalHeredityTitleBonus_DOMINATION
{
	background-color: #d30801;
}
.portalHeredityTitleBonus_WEALTH
{
	background-color: #ffb400;
}
.portalHeredityTitleBonus_HONOR
{
	background-color: #4f81ff;
}
.portalHeredityTitleLittleArrow_Bonus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityBonusImage.png') scroll no-repeat top center;
	width: 14px;
	height: 15px;
	top: 46px;
	left: 0px;
}
.portalHeredityTitleLittleArrow_Malus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityMalusImage.png') scroll no-repeat top center;
	width: 14px;
	height: 15px;
	left: 138px;
	top: 46px;
}
.portalHeredityWorldListLittleArrow_Bonus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityBonusImage.png') scroll no-repeat top center;
	width: 14px;
	height: 15px;
	top: 61px;
	left: 15px;
}
.portalHeredityWorldListLittleArrow_Malus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityMalusImage.png') scroll no-repeat top center;
	width: 14px;
	height: 15px;
	left: 152px;
	top: 61px;
}
.portalHeredityAbilityBigArrow_Bonus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityBonusImageBig.png') scroll no-repeat top center;
	width: 28px;
	height: 30px;
	top: 42px;
}
.portalHeredityAbilityBigArrow_Malus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityMalusImageBig.png') scroll no-repeat top center;
	width: 28px;
	height: 30px;
	top: 42px;
}
.portalHeredityAbilityEquipedImage_EQUIPMENT .portalHeredityAbilityBigArrow_Bonus,
.portalHeredityArtefactText .portalHeredityAbilityBigArrow_Bonus,
.portalHeredityAbilityEquipmentImage .portalHeredityAbilityBigArrow_Bonus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityBonusImageBig.png') scroll no-repeat top center;
	width: 28px;
	height: 30px;
	top: 21px;
	left: -11px;
}
.portalHeredityAbilityEquipedImage_EQUIPMENT .portalHeredityAbilityBigArrow_Malus,
.portalHeredityArtefactText .portalHeredityAbilityBigArrow_Malus,
.portalHeredityAbilityEquipmentImage .portalHeredityAbilityBigArrow_Malus
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityMalusImageBig.png') scroll no-repeat top center;
	width: 28px;
	height: 30px;
	top: 21px;
	left: -13px;
}
/*select ability zone*/
.portalHeredityAbilityTitle
{
	width: 543px;
	height: 20px;
	color: #62b6e0;
	left: 0px;
	top: 27px;
}
.portalHeredityAbilityZone_
{
	width: 135px;
	height: 432px;
	color: #46688c;
	margin-top: 156px;
}
.portalHeredityAbilityZone_HERO:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHeroHalo.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_HERO_hover,
.portalHeredityAbilityZone_HERO_hover:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHeroHaloOver.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_HERO_activated,
.portalHeredityAbilityZone_HERO_activated:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHeroHaloOn.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_TROOPS:hover
{
	background:transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityTroopsHalo.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_TROOPS_hover,
.portalHeredityAbilityZone_TROOPS_hover:hover
{
	background:transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityTroopsHaloOver.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_TROOPS_activated,
.portalHeredityAbilityZone_TROOPS_activated:hover
{
	background:transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityTroopsHaloOn.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_KINGDOM:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityKingdomHalo.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_KINGDOM_hover,
.portalHeredityAbilityZone_KINGDOM_hover:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityKingdomHaloOver.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_KINGDOM_activated,
.portalHeredityAbilityZone_KINGDOM_activated:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityKingdomHaloOn.jpg') scroll no-repeat top center;
	color: #fffefd;
}
.portalHeredityAbilityZone_EQUIPMENT:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentHalo.jpg') scroll no-repeat top left;
	color: #fffefd;
}
.portalHeredityAbilityZone_EQUIPMENT_hover,
.portalHeredityAbilityZone_EQUIPMENT_hover:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentHaloOver.jpg') scroll no-repeat top left;
	color: #fffefd;
}
.portalHeredityAbilityZone_EQUIPMENT_activated,
.portalHeredityAbilityZone_EQUIPMENT_activated:hover
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentHaloOn.jpg') scroll no-repeat top left;
	color: #fffefd;
}
.portalHeredityAbilityUnequipedSlot
{
	height: 75px;
	width: 75px;
	bottom: 57px;
	left: 31px;
}
.portalHeredityAbilityUnequipedTitle
{
	width: 135px;
	bottom: 20px;
	left: 0px;
}
.portalHeredityAbilityEquiped
{
	width: 130px;
	height: 131px;
	bottom: 2px;
}
.portalHeredityAbilityEquiped:hover
{
	opacity: 1;
	filter: alpha(opacity=100); /* IE */
}
.portalHeredityAbilityEquipedImage_HERO
{
	margin-left: 30px;
}
.portalHeredityAbilityEquipedImage_TROOPS
{
	margin-left: 29px;
}
.portalHeredityAbilityEquipedImage_KINGDOM
{
	margin-left: 33px;
	margin-top: 2px;
}
.portalHeredityAbilityEquipedImage_EQUIPMENT
{
	margin-left: 59px;
	margin-top: 19px;
}
.portalHeredityAbilityOverlayBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityAbilityOverlayBg.jpg') scroll no-repeat top center;
	width: 522px;
	height: 433px;
	top: 16px;
	left: 10px;
}
.portalHeredityOverlayTitle
{
	color: #001133;
	width: 522px;
	height: 25px;
	line-height: 24px;
	margin-bottom: 15px;
}
.portalHeredityCloseButton
{
	top: -6px;
	right: 25px;
}
.portalHeredityAbilityText
{
	width: 261px;
	float: left;
}
.portalHeredityAbilityText_selected
{
	background-color: #003672;
	border: #006ab3 1px solid;
	width: 246px;
	margin-left: 8px;
}
.portalHeredityArtefactText_selected
{
	background-color: #003672;
	border: #006ab3 1px solid;
	width: 246px;
	margin-left: 8px;
}
.portalHeredityLevelPlaceHolderTitle
{
	width: 117px;
}
.portalHeredityLevelPlaceHolderZone
{
	width: 33px;
	font-size: 9px;
}
.portalHeredityLevelPlaceHolderZone:hover,
.portalHeredityLevelPlaceHolderZone_activated,
.portalHeredityLevelPlaceHolderZone_over
{
	color: #fffefd;
	font-size: 11px;
}
.portalHeredityLevelPlaceHolderOff
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/levelPlaceHolder.png') scroll no-repeat top center;
	width: 24px;
	height: 24px;
}
.portalHeredityLevelPlaceHolderOn
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityChooseLevelIcon.png') scroll no-repeat top center;
	width: 24px;
	height: 24px;
}
.portalHeredityLevelPlaceHolderSelected
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityAcquiredBullet.png') scroll no-repeat top center;
	width: 24px;
	height: 24px;
}
.portalHeredityHoverInfoBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHoverInfoBg.gif') scroll repeat-y top center;
	width: 400px;
}
.portalHeredityHoverInfoBottomBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityHoverInfoBottomBg.gif') scroll no-repeat top center;
	width: 400px;
	height: 4px;
}
.portalHeredityBlueText
{
	color: #62b6e0;
}
.portalHeredityAbilityBuyUpgradeLevelContent
{
	width: 494px;
	height: 137px;
}
.portalHeredityAbilityBuyUpgradeAbilityImage
{
	width: 75px;
	height: 75px;
}
.portalHeredityAbilityLevel
{
	width:19px;
	top: 54px;
	left: 49px;
}
.portalHeredityAbilityLevelEquipment_DOMINATION
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentLevelDomination.png') scroll no-repeat top center;
	width: 23px;
	height: 23px;
	top: 23px;
	left: 25px;
	padding-top: 3px;
}
.portalHeredityAbilityLevelEquipment_HONOR
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentLevelHonor.png') scroll no-repeat top center;
	width: 23px;
	height: 23px;
	top: 23px;
	left: 25px;
	padding-top: 3px;
}
.portalHeredityAbilityLevelEquipment_WEALTH
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityEquipmentLevelWealth.png') scroll no-repeat top center;
	width: 23px;
	height: 23px;
	top: 23px;
	left: 25px;
	padding-top: 3px;
}
.portalHeredityArtefactText
{
	margin-left :15px;
}
.portalHeredityAbilityArtifactImage
{
	margin-right :15px;
}
.portalHeredityAbilityAbilityDesc
{
	width:151px;
}
.portalHeredityAbilityBuyUpgradeAbilityDesc
{
	width:386px;
}
.portalHeredityAbilitySeparator
{
	background: #0e3c6a url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityAbilitySeparator.gif') scroll no-repeat bottom center;
	/*background-color: #0e3c6a;*/
	width: 504px;
	height: 1px;
	margin-left: -251px;
}

.portalHeredityClearTemplateFooterBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityFooterBg.jpg') scroll no-repeat bottom center;
	width: 543px;
	height: 87px;
}
.portalHeredityPresentationContainerBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/portal/heredity/portalHeredityPresentationContainerBg.jpg') scroll no-repeat bottom center;
	width: 500px;
	height: 429px;
	left: 21px;
	top: 16px;
}
.portalHeredityPresentationDesc
{
	width: 293px;
	margin-left: 198px;
}
.portalHeredityBlueTooltip
{
	background-color: #072a54;
	border: #62b6e0 1px solid;
	color: #62b6e0;
	font-size: 12px;
	padding: 5px;
}
.portalHeredityRedTooltip
{
	background-color: #edeee5;
	border: #c30a1d 1px solid;
	color: #c30a1d;
	font-size: 12px;
	padding: 5px;
}
/*******************************************************
AutoCompleter
*******************************************************/
div.autocompleter-loading
{
	float: left;
	clear: right;
	background: #fff;
	width: 20px;
	height: 16px;
}
div.autocompleter-choices
{
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #eee;
	background-color: #FFF;
	border-right-color: #ddd;
	border-bottom-color: #ddd;
	text-align: left;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	z-index: 50;
	overflow: hidden;
	width: 150px;
}

ul.autocompleter-choices
{
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #d3bea2;
	background-color: #FFF;
	text-align: left;
	z-index: 50;
	white-space:nowrap;
}

ul.autocompleter-choices li
{
	position: relative;
	padding: 0.1em 0.1em 0.1em 0.1em;
	cursor: pointer;
	font-weight: normal;
	font-size: 1em;
}

ul.autocompleter-choices li.autocompleter-selected
{
	background-color: #fff2e5;
	color: #50332b;
}

ul.autocompleter-choices span.autocompleter-queried
{
	font-weight: bold;
}

ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried
{
	color: #c53401;
}


/*FLOENT SELECT DIV*/
div.selectDiv{
	background-color: #FFF2E5;
	border: solid 1px #a88d79;
	z-index: 200;
}

div.selectDiv div.selectListItem{
	background-color: #fff2e5;
	height: 20px;
	width: 100%;
	z-index: 200;
	padding:0 10px;
}

div.selectDiv div.selectListItem.selected:hover
{
	background-color: #ff7919;
	color: #FFF;
	padding:0 10px;
}
div.selectDiv div.selectListItem:hover
{
	background-color: #ff7919;
	color: #FFF;
	padding:0 10px;
}

div.selectedDivItem
{
	height: 20px;
	z-index: 200;
}

/*******************************************************
Account manager login bar
*******************************************************/
#accManBarLoginBar
{
	padding-top: 12px;
	/*height: 22px;
	color: #FFF;*/
}

.accManBarLoginBarValign
{
	line-height: 27px;
}

/*
.accManBarLoginBarFields
{
	float: left;
}

.accManBarLoginBarRegisterButton
{
	float: left;
	margin-left: 20px;
	margin-top: 3px;
}

.accManBarHoffset10
{
	margin-left: 10px;
}

.accManBarClickable
{
	cursor: pointer;
}
*/
/*******************************************************
FTP specific messages
*******************************************************/

.ftpWarning
{
	background: #fff7e6;
	width: 500px;
}
.disconnected
{
	margin-left: 44px;
	margin-right: 22px;
	margin-top: 30px;
}

.logoutFriendKeyContainer
{
	top: 155px;
}

.logoutGameWorldsMain
{
	height: 200px;
	width: 535px;
}

.logoutSelectMainWorldTitle
{
	top: 7px;
	width: 533px;
}

.ftpTop
{
	background: #fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameBorderTop.gif') repeat-x top;
}
.ftpTop .leftCorner
{
	width: 4px;
	height: 4px;
	background: #fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameCornerTopLeft.gif') no-repeat top left;
}
.ftpTop .rightCorner
{
	width: 4px;
	height: 4px;
	background: #fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameCornerTopRight.gif') no-repeat top left;
}
.ftpBottom
{
	background: #fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameBorderBottom.gif') repeat-x bottom;
}
.ftpBottom .leftCorner
{
	width: 4px;
	height: 4px;
	background: #fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameCornerBottomLeft.gif') no-repeat top left;
}
.ftpBottom .rightCorner
{
	width:4px;
	height:4px;
	background:#fefdfa url('https://mmhk-assets.pages.dev/img/ftp/frameCornerBottomRight.gif') no-repeat top left;
}
.ftpRight
{
	background: url('https://mmhk-assets.pages.dev/img/ftp/frameBorderRight.gif') repeat-y top right;

}
.ftpBody
{
	padding:10px 10px 30px 10px;
	background: url('https://mmhk-assets.pages.dev/img/ftp/frameBorderLeft.gif') repeat-y top left;

}

/* kickoff */

#kickOff a
{
	text-decoration:none;
}
#kickOff #accManBarLoginBarContainer a:hover
{
	color:#ff7919;
}
#kickOff
{
	margin: 0;
	padding: 0;
	width: auto;
}
#kickOff .background
{

	background: #b78f6a url('https://mmhk-assets.pages.dev/img/kickoff/defaultBg.jpg') no-repeat top center;
	width: auto;
	height: 473px;
	padding-top: 104px;
}
#kickOff #accManBarLoginBarContainer
{
	width: 748px;
	margin: 0 auto;
}

#kickOff #accManBarLoginBar
{
	float: left;
	margin: 0;
	padding: 0;
}
#kickOff .frame
{
	margin: auto;
	width: 748px;
	height: 462px;
	background: #fff5e0 url('https://mmhk-assets.pages.dev/img/kickoff/parchmentBg.jpg') no-repeat top left;
}

#kickOff #formChangeLanguage
{
	float:right;
	margin: 4px;
}

#kickOff #MMHKLogo
{
	background: transparent url('https://mmhk-assets.pages.dev/img/kickoff/MMHK.png') no-repeat 11px 20px;
	width: 235px;
	height: 112px;
}

#kickOff .SlideShow
{
	width: 451px;
	height: 374px;
	float: left;
	margin-top: -27px;
}

.SlideShow .image
{
	height: 374px;
}

.SlideShow .text
{
	font-size: 22px;
	margin: -38px auto 0  auto;
}

#kickOff #announce
{
	background: transparent url('https://mmhk-assets.pages.dev/img/kickoff/announceBg.jpg') no-repeat top left;
	width: 272px;
	height: 378px;
	float: right;
	padding: 0 12px;
}

#announce a
{
	font-weight: bold;
	text-decoration: underline;
}

#announce .title
{
	font-variant: small-caps;
	font-size: 18px;
	width: 170px;
	margin: 15px auto;
	line-height: 20px;
}

#kickOff .column
{
	float: right;
	margin: -22px 0 0 0;
}

.kickOffPlayBtn
{
	bottom:10px;
}

#kickOff .subscribe
{
	background: url('https://mmhk-assets.pages.dev/img/kickoff/subscribeBtnBg.jpg') no-repeat top left;
	width: 190px;
	height: 75px;
	text-align: center;
	margin: 0 auto;
}

#countdown
{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.maintenanceOverride
{
	z-index: 100000;
	left: 20px;
}
/*
.gameWorldListTeasingBack
{
	width:550px;
	height:264px;
}*/

.gameWorldListTeasing
{
	width:520px;
	height:105px;
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accessAllWorldBg.gif') no-repeat top center;
}
.gameWorldListTeasingText
{
	width:260px;
	text-align:justify;
}
.gameWorldListTeasingButton
{
	margin-top:15px;
}
/*portal unlogged feedback referral*/

.confirmationFeedBackBg
{
	height:1157px;
	background: #bfad86 url('https://mmhk-assets.pages.dev/img/portal/feedback_referral/feedbackReferralBg.jpg') no-repeat top center;
	margin: 0px;
}
.confirmationFeedBackContent
{
	width:1003px;
	position: relative;
	margin: auto;
}
.confirmationFeedBackContent .logo{
	width:225px;
	padding:10px;
}
.confirmationFeedbackMessage
{
	width:367px;
	top: 230px;
	left: 532px;
}
.confirmationFeedBackBackToGame
{
	/*background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/play-out.png) 0 0;*/
	width: 163px;
	height: 183px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	top: 146px;
	position: relative;
}
.confirmationFeedBackBackToGame:hover
{
	background-position: -163px 0;
}

/* Popup */

#popupBoxWrapper { position: fixed;width:337px; z-index:9999; }
#popupBox { width:337px; margin:0 auto; }
.popupTop { background:url(https://mmhk-assets.pages.dev/img/portal/ng_portal/welcome-top.png); width:337px; height:124px; display: block; }
.popupMiddle
{
	background:url(https://mmhk-assets.pages.dev/img/portal/ng_portal/welcome-middle.png) repeat-y;
	height:300px;
	padding:0 30px;
}
.popupMiddle h2
{
	color:#4a302b;
	margin:0 0 20px 0;
	font-size:16px;
}
.popupMiddle p
{
	font-size:12px;
	color:#7b5c45;
	margin-bottom:10px;
}
#popupBoxText a
{
	text-decoration: underline;
}
.popupBottom { background:url(https://mmhk-assets.pages.dev/img/portal/ng_portal/welcome-bottom.png); width:337px; height:126px; display: block; }
#popupButton { background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/button.png) no-repeat; display: block; width: 151px; height: 34px; text-align: center; padding: 22px 0 0 0; text-transform: uppercase; color: #fff; cursor:pointer; margin:8px auto 20px;}
#popupButton:hover { background-position: -161px 0; text-decoration: none; color: #fff; }

.messageFrame{width: auto;}

/*****************************************
Store
*******************************************/

.portalStoreHomeAd
{
	background:url(https://mmhk-assets.pages.dev/img/portal/store/storePortalAd230x188.jpg) no-repeat center top;
	width: 230px;
	height: 188px;
	float:left;
	margin-left:15px;
}
.portalRightBanners .portalStoreHomeAd{
	float:none;
	width:143px;
	background:url(https://mmhk-assets.pages.dev/img/portal/store/storePortalAd143x188.jpg) no-repeat center top;
	margin-left:0px;
}
.portalRightBanners .portalFeaturedListItems{
	float:none;
	width:143px;
	margin:10px 0px;
}
.portalRightBanners .portalStoreBtn, .portalRightBanners .portalFeaturedItem{
	width:143px;
}
.portalRightBanners .portalFeaturedItem .itemDescription{
	width:86px;
}
.portalStoreBtn{
	position:absolute;
	text-align:center;
	width:230px;
	top:-15px;
}
.portalStoreBtnCenter{
	height: 37px;
	background:url(https://mmhk-assets.pages.dev/img/portal/store/storePortalBtnCenter.png) repeat-x left top transparent;
	padding:10px;
	vertical-align:top;
}
.portalStoreBtnLeft{
	background:url(https://mmhk-assets.pages.dev/img/portal/store/storePortalBtnLeft.png) repeat-x left top transparent;
	width: 15px;
	height: 37px;
}
.portalStoreBtnRight{
	background:url(https://mmhk-assets.pages.dev/img/portal/store/storePortalBtnRight.png) repeat-x left top transparent;
	width: 15px;
	height: 37px;
}
.portalFeaturedListItems
{
	width: 230px;
	border:solid 1px white;
	float:left;
	margin-left:15px;
}

.portalFeaturedListItems h1{
	margin:0px;
	padding:5px 0px;
	text-align:center;
	font-size:12px;
	color:#663d1c;
	border-bottom:solid 1px white;
}
.portalFeaturedItem{
	width:230px;
	border-bottom:solid 1px #d3c99a;
	background:url('https://mmhk-assets.pages.dev/img/portal/store/portalItems.png') repeat-x left top #ffffeb;
}
.portalFeaturedItem:hover{
	background:url('https://mmhk-assets.pages.dev/img/portal/store/portalItemsHover.png') repeat-x left top #efe9cd;
	color:#71473c;
}
.portalFeaturedItem .itemImage{
	width:36px;
	height:36px;
	margin:7px 3px;
	float:left;
}
.portalFeaturedItem h2{
	margin:0px;
	padding:0px;
	font-size:13px;
	font-family: 'Open Sans Condensed', sans-serif;
}
.portalRightBanners  .portalFeaturedItem h2{
	line-height:13px;
	font-size:12px;
}
.portalFeaturedItem .itemDescription{
	width:150px;
}
.portalBtnWorldLeft{
	position:relative;
	top:-6px;
}
.portalCurrencies{
	position:absolute;
	top:30px;
	right:4px;
}

/************************/
/* Avatar related styles
/************************/
.unityPlayerMissingOptOutSection
{
	top:510px;
	width: 100%;
}
.portalAvatarOptIn
{
	top: 159px;
	left: 23px;
	height: 40px;
	width: 397px;
	padding: 12px 150px 0 8px;
	background: #1f4260 url('https://mmhk-assets.pages.dev/img/avatar/avatarTeasingBg.png') no-repeat 370px -24px;
}


/************************/
/* Teaser Page
/************************/
.teaserPageBackground{
	background: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/videoTeaser/bgGeneral.png') repeat-x left top #fcf6e5;
}
.teaserPageBg{
	background: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/videoTeaser/background1.jpg') no-repeat left top;
	width:983px;
	height:528px;
}
.teaserPageVideo{
	position:relative;
	left:21px;
	top:73px;
}
.teaserPageBtn{
	background: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/videoTeaser/btnPlay.png') no-repeat left top;
	width:240px;
	height:59px;
	padding:8px 10px;
}
.teaserPageBtn:hover{
	background-position:0px -75px;
}
.teaserPageBtnContent{
	position:relative;
	top:315px;
	left:50px;
	width:260px;
	height:75px;
	text-align:center;
	line-height:13px;
}
.teaserPageBtn b{
	font-size:35px;
	display:block;
	height:30px;
}
.teaserPageLogo{
	display:block;
	width:190px;
	height:65px;
	position:relative;
	top:50px;
	left:0px;
}
.teaserPageFooter{
	background:url('https://mmhk-assets.pages.dev/img/portal/ng_portal/videoTeaser/bgFooter.png') repeat-x;
	width:981px;
	height:62px;
	margin:0px auto;
	border-bottom:solid 1px #f7d860;
	border-left:solid 1px #f7d860;
	border-right:solid 1px #f7d860;
	font-size:11px;
	color:#51322a;
}
.teaserPageFooter p{
	padding:15px;
}
/**Credits**/
ul.creditsPortal{
	list-style-type:none;
	text-align:center;
	width:550px;
	padding-top:10px;
}
ul.creditsPortal li{
	padding:0px;
}
ul.creditsPortal .company{
	font-size:20px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	padding:20px 0px 5px 0px;
	display:block;
}
ul.creditsPortal p{
	font-size:15px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:bold;
	padding-top:10px;
	display:block;
}/*******************************************************
 ActionDurationSlider
*******************************************************/
.scoutingDurationSliderBackground
{
	background: url('https://mmhk-assets.pages.dev/img/frame/sliderBackground_01.gif') no-repeat;
	height: 45px;
	width: 218px;
	margin: 20px 20px 5px 20px;
	left: 11px;
	top: 20px;
}

.buildingDurationSliderBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/sliderBackground_01.gif');
	height: 21px;
	width: 168px;
	right: 125px;
	margin-top: 12px;
}
.actionUpgradeDurationSliderBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/sliderBackground_01.gif');
	height: 21px;
	width: 168px;
	margin: 10px 10px 0px;
}
.actionDurationImageQuickScouting
{
	right: 20px;
	bottom: 11px;
}

.actionDurationImageSlowScouting
{
	right: 25px;
	bottom: 8px;
}

.actionDurationImageQuickBuilding
{
	margin-left: 82px;
}
.actionDurationSlider
{
	background-repeat: repeat-x;
	width: 154px;
}

.actionScoutDurationSlider
{
	background-repeat: repeat-x;
	width: 147px;
	left: -26px;
	top: 4px;
	position: relative;
}

.buildingDurationSlider
{
	background-repeat: repeat-x;
	margin-top: 0px;
	width: 145px;
}
.actionDurationSliderCursor
{
	width: 19px;
	height: 11px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/sliderButton.gif');
	font-size: 0px;
	z-index:1000;
}
.buildingDurationSliderCursor
{
	width: 19px;
	height: 11px;
	top: 6px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/sliderButton.gif');
	font-size: 0px;
}

/*******************************************************
 Inactive action slider
*******************************************************/
.inactiveActionSliderBackground
{
	background: url('https://mmhk-assets.pages.dev/img/frame/timeSliderInactive.gif') no-repeat;
	height: 30px;
	width: 252px;
}

/*******************************************************
 ContentSlider (vertical)
*******************************************************/
.contentSliderBackground
{
	width: 17px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_background.gif');
	background-repeat: repeat-y;
	z-index:150;
}

.contentSliderCursor
{
	width: 11px;
	border-collapse: collapse;
	left: 4px;
}

.contentSliderKnobTop
{
	height: 3px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_top.gif');
}

.contentSliderKnobBody
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_body.gif');
	background-repeat: repeat-y;
	height: 100%;
}

.contentSliderKnobBottom
{
	height: 5px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_bottom.gif');
	background-repeat: no-repeat;
}

.contentSimpleSliderKnobBottom
{
	height: 5px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_bottom.gif');
}

.contentSliderScrollTopButton
{
	width: 17px;
	height: 18px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/scroll_top.gif');
}

.contentSliderScrollTopButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/scroll_top_disabled.gif');
}

.contentSliderScrollDownButton
{
	width: 17px;
	height: 18px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/scroll_bottom.gif');
}

.contentSliderScrollDownButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/scroll_bottom_disabled.gif');
}

/*******************************************************
 ContentSlider (verticalSimple)
*******************************************************/
.contentSimpleSliderCursor
{
	width: 11px;
	border-collapse: collapse;
	left: 2px;
}

.contentSimpleSliderBackground
{
	width: 13px;
}

.contentSimpleSliderBgImg
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/verticalSimple/slider_background.gif');
}

.contentSimpleSliderBackground.disabled
{
	display:none;
}
.contentSimpleSliderScrollTopButton
{
	width: 14px;
	height: 15px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/verticalSimple/scroll_top.gif');
}

.contentSimpleSliderScrollTopButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/verticalSimple/scroll_top_disabled.gif');
}

.contentSimpleSliderScrollDownButton
{
	width: 14px;
	height: 15px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/verticalSimple/scroll_bottom.gif');
}

.contentSimpleSliderScrollDownButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/verticalSimple/scroll_bottom_disabled.gif');
}
.contentSimpleSliderKnobTop
{
	height: 5px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_top.gif');
}

.contentSimpleSliderKnobBody
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/vertical/slider_body.gif');
	background-repeat: repeat-y;
	height: 100%;
	width:10px;
}
/*******************************************************
 ContentSlider (horizontal)
*******************************************************/
table.hcontentSliderContainer
{
	border-collapse: collapse;
}

.hcontentSliderBackground
{
	height: 17px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/slider_background2.gif');
	background-repeat: repeat-y;
}

.hcontentSliderCursor
{
	height: 14px;
	border-collapse: collapse;
}

.hcontentSliderKnobTop
{
	width: 5px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/slider_top.gif');
}

.hcontentSliderKnobBody
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/slider_body.gif');
	background-repeat: repeat-x;
	width: 100%;
}

.hcontentSliderKnobBottom
{
	width: 5px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/slider_bottom.gif');
	background-position: right;
}

.hcontentSliderScrollTopButton
{
	width: 18px;
	height: 17px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/scroll_top.gif');
}

.hcontentSliderScrollTopButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/scroll_top_disabled.gif');
}


.hcontentSliderScrollDownButton
{
	width: 18px;
	height: 17px;
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/scroll_bottom.gif');
}

.hcontentSliderScrollDownButton.disabled
{
	background-image: url('https://mmhk-assets.pages.dev/img/contentSlider/horizontal/scroll_bottom_disabled.gif');
}
/*
	News Calendar
*/
input.calendar,
select.calendar 
{
	float: left;
	width: 65px;
}

button.calendar 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-icon.gif');
	border: 0;
	cursor: pointer;
	float: left;
	height: 20px;
	margin-right: 6px;
	width: 20px;
}

button.calendar:hover,
button.calendar.active
{
	background-position: 0 20px;
}

div.calendar
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar.png');
	height: 195px;
	padding: 0 6px;
	text-align: center;
	width: 147px;
}

div.calendar * 
{
	margin: 0;
	padding: 0;
}	
	
div.calendar div 
{
	background: none !important;
	cursor: move;
	height: 185px;
	overflow: hidden;
	padding-top: 10px;
	position: relative;
	width: 147px;
}	
	
div.calendar caption
{
	color: #333;
	font: normal 12px/16px Arial, Helvetica, sans-serif;
	padding-top: 6px;
	text-align: center;
	width: 100%;
}

div.calendar caption a 
{
	cursor: pointer;
	display: block;
	height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: -100px;
	top: 17px;
	width: 11px;
}

div.calendar caption a.prev 
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-prev.gif');
	left: 0;
}

div.calendar caption a.next 
{
	background-image: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-next.gif');
	right: 0;
}
div.calendar caption a:hover 
{
	background-position: 0 12px;
}

div.calendar caption span 
{
	height: 25px;
	position: relative;
	text-align: center;
}

div.calendar caption span.month 
{
	padding-right: 8px;
}

div.calendar caption span.month:after 
{
	content: ',';
}

div.calendar table 
{
	background: #FFF;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	cursor: default;
	margin: 0 auto;
	overflow: hidden;
	width: 147px;
}

div.calendar td,
div.calendar th 
{
	border: 0;
	color: #0597DB;
	font: normal 12px Arial, Helvetica, sans-serif;
	height: 21px;
	text-align: center;
	width: 21px;
}

div.calendar td 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-td.gif');
	color: #FFF;
	font-size: 11px;
}
div.calendar td.invalid 
{
	color: #999;
}

div.calendar td.valid 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-valid.gif');
	color: #0597DB;
	cursor: pointer;
}

div.calendar td.hilite 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-hilite.gif');
}

div.calendar td.inactive 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-td.gif') 0 100%;
	color: #FFF;
}

div.calendar td.active,
div.calendar td.hover 
{
	background: url('https://mmhk-assets.pages.dev/img/portal/calendar/calendar-valid.gif') 0 100%;
	color: #FFF;
	cursor: pointer;
}
.portalAvatarCreator
{
	z-index:3000;
	left: 3px;
	top:85px;
	width: 554px;
	height: 438px;
}
.portalAvatarViewer
{
	z-index:3000;
	left: 80px;
	top:85px;
}
.portalProfileShowAvatarButton
{
	position: absolute;
	right: 20px;
	top: 10px;
}/*******************************************************
FRAME CONTAINERS
*******************************************************/
.portalFrameContainer .billingFrameContainer
{
	margin: 27px auto;
	width: 930px;
	position: relative;
	top:0px;
}
.portalFrameContainer .largeFrame
{
	margin: 27px auto;
	width: 621px;
	position: relative;
	top:0px;
}

.largeFrame .billingFrameContainer
{
	width: 621px;
}
.portalFrameContainer .moreDetailsFrame
{
	margin: 90px auto;
	position: relative;
	top:0px;
	width: 627px;
}
.billingFrameContainer
{
	margin: 27px auto;
	width: 930px;
	position: relative;
	top: -65px;
}
.billingFrameContent
{
	background: #f5e5ab url("https://mmhk-assets.pages.dev/img/account/IE/bg_00.png") repeat-x scroll 0 0;
	background-image: -moz-linear-gradient(top, #faf6e5, #f5e5ab 50%);
	background-image: -webkit-gradient(linear, center top, center top, from(#faf6e5), color-stop(50%, #f5e5ab));
}
.billingFrameContainerTopLeft, .billingFrameContainerTopRight
{
	height: 4px;
	width: 4px;
}

.billingFrameContainerBottomLeft, .billingFrameContainerBottomRight
{
	height: 4px;
	width: 4px;
}

.billingFrameContainerTop, .billingFrameContainerBottom
{
	background-repeat: repeat-x;
	height: 4px;
}

.billingFrameContainerMiddleLeft, .billingFrameContainerMiddleRight
{
	background-repeat: repeat-y;
	width: 4px;
}

.billingFrameContainerTopLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_left_billing.gif');
}

.billingFrameContainerTop
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_center_billing.gif');
}

.billingFrameContainerTopRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_top_right_billing.gif');
}

.billingFrameContainerMiddleLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_left_billing.gif');
}

.billingFrameContainerMiddleRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_right_billing.gif');
}

.billingFrameContainerBottomLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_left_billing.gif');
}

.billingFrameContainerBottom
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_billing.gif');
}

.billingFrameContainerBottomRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/border_bottom_right_billing.gif');
}

/*******************************************************
HEADER
*******************************************************/
.accountTitleContainer
{
	height:39px;
	margin: 9px 17px;
}
.accountTitle
{
	font-family: 'Times New Roman', "PingFang SC", "Microsoft YaHei", serif;
	font-size:30px;
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0px -127px  transparent;
	height:39px;
	min-width: 125px;
}
.accountTitleLeft
{
	display:inline-block;
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -76px -22px  transparent;
	height:39px;
	width:45px;
	float:left;
}
.accountTitleRight
{
	display:inline-block;
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -125px -22px  transparent;
	height:40px;
	width:20px;
	float:left;
}
/*******************************************************
TAB CONTENT
*******************************************************/
.billingFrameContent .tabContentOwner
{
	margin:0 22px 22px;
}
.accountTabTitle
{
	cursor:pointer;
	float:left;
	width:160px;
	height:14px;
	padding:2px 0;
	color: #FFF;
	font-size:11px;
	text-align:center;
	font-weight:bold;
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0px -107px  transparent;
	color:white;
}
.accountTabTitle.active, .accountTabTitle.active:hover
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0px -88px transparent;
	color:#5b300e;
}
.accountTabTitle:hover
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -304px -107px transparent;
	color:#FFFFFF;
}
.billingFrameContent .tabContent
{
	background:#f5ede9 url(https://mmhk-assets.pages.dev/img/account/TabContainerBg00.jpg) no-repeat;
	border : #ee9c1b 1px solid;
	width: 802px;
	height: 421px;
	padding: 30px 37px 32px;
	margin:0px auto;
}
/*******************************************************
ACCOUNT TAB CONTENT
*******************************************************/
.accountSealsContainer, .accountManagementContainer
{
	width: 315px;
	height: 420px;
	border-right: #bd9c87 1px solid;
	margin: 0 20px 0 0;
}
.accountBillingFrameHeader .currencyBillingContainer
{
	float: left;
}
.accountSealsContainer .currencyBillingContainer
{
	clear: both;
}
.ingame .accountSealsContainer .currencyBillingContainer
{
	clear: both;
	position: relative;
	top:-175px;
}
.accountSealsContainer .productCurrencyCOINS
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -36px -20px transparent;
	width:38px;
	height:38px;
	margin: 0 0 5px 0;
}
.accountSealsContainer .productCurrencyBILLS
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0px -20px transparent;
	width:38px;
	height:38px;
}
.currencyBillingAmount
{
	float: left;
	font-size: 14px;
	font-weight: bold;
	color: #50332b;
	margin: 5px 30px 0 5px;
}
.accountSealsContainer .currencyBillingAmount
{
	margin: 10px 0 0 10px;
}
.accountSealsBillingImage
{
	background:url(https://mmhk-assets.pages.dev/img/account/pushSealsPlaceHolder_00.png) no-repeat 0 0 transparent;
	width:307px;
	height:161px;
	margin: 0 0 5px 0;
	position: relative;
	top: 90px;
}
.accountManageBtnLeft, .accountStoreBtnLeft
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -146px -18px transparent;
	width:13px;
	height:55px;
}
.accountManageBtnRight, .accountStoreBtnRight
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat -159px -18px transparent;
	width:13px;
	height:55px;
}
.accountStoreBtnCenter
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0 -240px transparent;
	height:21px;
	padding: 16px 0;
	vertical-align: top;
	width: 170px;
}
.accountManageBtnCenter
{
	background:url(https://mmhk-assets.pages.dev/img/store/storeIcons.png) no-repeat 0 -240px transparent;
	height:46px;
	padding: 9px 0;
	vertical-align: top;
	width: 170px;
	line-height: 19px;
}
.accountStoreButton
{
	bottom: 45px;
	left : 100px;
}
.accountManageButton
{
	bottom: 45px;
	right: 195px;
}
.accountManagementBillingModelMoreDetail{
	position:absolute;
	font-weight:bold;
	right:126px;
	top:115px;
}
.accountManagementBillingModelDescription{
	width:740px;
}
/*******************************************************
SUBS PACKS
*******************************************************/
.subscriptionOffer1Month, .subscriptionOffer1MonthUpgrade, .subscriptionOffer1MonthBack, .subscriptionOffer1MonthPromo
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/Pack1.jpg');
	width: 202px;
	height: 268px;
}
.subscriptionOffer1Month, .subscriptionOffer2Months, .subscriptionOffer3Months{
	display: inline-block;
	margin:10px;
	vertical-align:top;
}
.accountManagementBillingModelContentList .subscriptionOffer1Month,.accountManagementBillingModelContentList .subscriptionOffer2Months,.accountManagementBillingModelContentList .subscriptionOffer3Months{
	float:left;
}
.accountManagementBillingModelContentList .subscriptionOffer1Month{
	margin-left:72px;
}
.subscriptionBlock .subscriptionOffer1Month, .subscriptionBlock .subscriptionOffer2Months, .subscriptionBlock .subscriptionOffer3Months{
	height:65px;
	margin:10px 0px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/Packmini.jpg');

}
.subscriptionAbstractBillingDataSeparator
{
	margin: 20px 0px;
	height:1px;
	background: #bb9a85;
}
.subscriptionAbstractBillingFreePeriod
{
	padding: 5px;
	background: #368ffd;
	width: 210px;
}
.subscriptionAbstractBillingRenewDate
{
	padding: 5px 5px 0;
	background: #844819;
}
.subscriptionAbstractBillingDetail
{
	padding: 0px 5px 5px;
	background: #844819;
}
/*******************************************************
OLD?
*******************************************************/

.titleBarBilling
{
	height: 21px;
	line-height: 15px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/titleHeaderBackgroundBilling.gif');
}

.leftContent
{
	width: 232px;
}

.billingFrameSeparator
{
	background-color: #f2ac10;
	font-size: 0px;
	height: 2px;
}

.pitchTradeBackground
{
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/pitchTradeBg.jpg') no-repeat center top ;
	width: 613px;
	height: 487px;
}
.pitchTradeBackgroundText
{
	width:260px;
}
.pitchTradeContainer
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/pitchTradeContainer.jpg');
	width: 454px;
	height: 381px;
	top: 25px;
	left: 85px;
}
.pitchTradeOptionsContainer
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/pitchTradeOptionsContainer.gif');
	width: 620px;
	height: 336px;
	top: 44px;
}
.pitchTradePromoMessage
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/userAccount/userAccountPitch_PromoBanner.jpg') no-repeat center left;
	height:48px;
	color: #232d3b;
	width: 399px;
	margin: 49px 0 0 26px;
}
.pitchTradePaymentMethods
{
	top: 364px;
	right: 26px;
}
.pitchTradePaymentMethods img
{
	margin-left: 4px;
}
.moreInfoBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/moreInfoBg.jpg');
	width: 620px;
	height: 487px;
}
.moreDetailsBillingPitch
{
	width: 299px;
	height: 400px;
}
.summaryLine
{
	background-color: #d5c4b2;
	height: 1px;
	width: 70%;
}
.moreDetailsBillingSubscribeButton
{
	margin-left: 208px;
	min-width: 230px;
}
.billingFrameSubscribeButton
{
	top: 331px;
	left: 213px;
}

.billingFramePitchOptionsText
{
	width: 253px;
}
/*.optionBilling
{
	width: 289px;
}*/
.optionText
{
	height: 19px;
}
.billingOptionText
{
	width: 310px;
}
.decoTitleImageLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/decoTitleLeft.gif');
	width: 55px;
	height: 22px;
}

.confirmationBillingCancelButton
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/cancel_congrat.gif');
	width: 19px;
	height: 17px;
}


/********** merchant pack billing ************/
.merchantPackBillingBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/teaserBg.jpg');
	width: 618px;
	height: 477px;
	padding: 10px 0 0 0;
}
.titleRibbon
{
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/titleRibbon.gif');
	width: 359px;
	height: 73px;
	margin: 0 auto;
	padding: 6px 0 0 0;
}
.merchantPackBillingArtefactTeasingBg
{
	height: 156px;
	width: 380px;
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/artefactBg.gif');
	margin: 7px 0 0 28px;
}
.merchantPackBillingRessourcesTeasingBg
{
	height: 129px;
	width: 440px;
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/ressourcesBg.gif');
	position: absolute;
	top: 82px;
	right: 17px;
}
.merchantPackBillingArtefactText
{
	line-height: 24px;
	padding: 49px 0 0 116px;
	width: 350px;
}
.merchantPackBillingRessourcesText
{
	line-height: 24px;
	width: 300px;
	float: right;
	margin: 64px 176px 0 0;
}
.merchantPackBillingDiscount
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/userAccount/promoIcon.png') no-repeat scroll right top;
	height: 76px;
	width: 69px;
}
.merchantPackBillingDiscountPosition
{
	top: 80px;
	left: 245px;
}
.merchantPackBillingMoreInfoBg
{
	background: transparent url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/detailOptionMerchantBg.jpg') no-repeat scroll center top;
	height: 477px;
	width: 620px;
	padding: 10px 0 0 0;
}
.merchantPackBillingMoreInfoPitch
{
	width: 280px;
}
.merchantPackBillingMoreInfoPitch .optionBilling
{
	height: 30px;
	line-height: 30px;
}
.merchantPackBillingMoreInfoPitch .optionBillingSelected
{
	background: transparent url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/chooseMerchantOptionOver.png') no-repeat scroll right top;
	height: 30px;
	width: 270px;
	padding-right: 40px;
	line-height: 30px;
	color: #c53401;
	margin-left: 10px;
}
.merchantPackBillingMoreInfoBg .moreDetailsBillingSubscribeButton
{
	margin-left: 208px;
	width: 230px;
	bottom: 8px;
}
/*.chooseMerchantOptionSeparator
{
	background: transparent url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/chooseMerchantOptionSeparator.png') no-repeat scroll right top;
	height: 1px;
	width: 237px;
}*/
.merchantPackBillingMoreInfoDecoLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/decoLeft.gif');
	width: 56px;
	height: 22px;
}
.merchantPackBillingMoreInfoDecoRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/billingOptions/merchant/decoRight.gif');
	width: 56px;
	height: 22px;
}
.merchantPackBillingMoreInfoOptionTitle
{
	width: 203px;

}
.congratDecoTitleImageLeft
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/congratDecoTitleLeft.gif');
	width: 59px;
	height: 26px;
}
.congratDecoTitleImageRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/congratDecoTitleRight.gif');
	width: 59px;
	height: 26px;
}
.merchantPackBillingMoreInfoDetails
{
	width: 330px;
}

/* options list images */
.caravanOption
{
	margin: 16px 0 0 0;
}
.artefactAuctionOption
{
	margin: 20px 0 0 0;
}
.extandAuctionHouseOption
{
	margin: 32px 0 0 0;
}
.stockIncomeOption
{
	margin: 16px 0 0 56px;
}
.congratDecoTitle
{
	width: 130px;
	height: 31px;
}
.congratBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/congratBg.jpg');
	width: 572px;
	height: 315px;
	top: 44px;
	left: 24px;
}

.congratBackgroundContent
{
	width: 306px;
}
.redirectionBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/redirectionBg.gif');
	width: 572px;
	height: 315px;
	top: 44px;
	left: 24px;
}

.redirectionBillingPitch
{
	margin-top:39px;
	color:#8e6048;
}

.redirectionBillingTransactionContainer
{
	width:172px;
}
.packSealsRedirecBg .redirectionBillingTransactionDetail{
	left: 102px;
	top: 28px;
}
.redirectionBillingTransactionDetail
{
	left: 10px;
	top: 5px;
	width: 77px;
}

.redirectionBillingTransactionDetailText
{
	bottom: 5px;
}
.detailCostColor
{
	color: #ffd400;
}

.redirectionBillingImage
{
	height: 100px;
	width: 312px;
	top: 39px;
}

.redirectionBillingImagePosition
{
	left: 85px;
}

.RedirectionBillingLink
{
	color: #a88d79;
	text-decoration: none;
}
.monthRedirecBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/monthRedirecBg.jpg');
	width: 172px;
	height: 171px;
}
.packSealsRedirecBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/sealsPackBg.png');
	width: 174px;
	height: 173px;
}
.fileImg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/file_icon.gif');
	width: 24px;
	height: 29px;
}

.hommkImg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/HerosLogo.gif');
	width: 124px;
	height: 54px;
}

/*utilisé plus tard*/
/*.BillingAccountBtn
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/billingAccount.gif');
	height: 35px;
	width: 35px;

}*/

.decoTitleImageRight
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/decoTitleRight.gif');
	width: 55px;
	height: 22px;
}
.billingOptionTitle
{
	width: 168px;
}
.optionText:hover
{
	background-color: #fee6ba;
	height: 19px;
	color: #0e86c2;
}

.optionBillingSelected
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/optionsRollOver.gif');
	height: 19px;
	color: #0e86c2;
	width: 285px;
	padding-left:5px;
}
.optionBilling
{
	height: 19px;
	width: 285px;
	padding-left:5px;
}
.billingSubscriptionBuyButton
{
	top: 152px;
}

.billingPreviousButton
{
	left: 29px;
	top: 0px;
}
.billingNextButton
{
	left: 258px;
	top: 0px;
}

/*classes img more infos dans locales*/
.settleTownsImage
{
	margin-top: 40px;
	margin-left: 20px;
}
.moreVestigesImage
{
	margin: 10px 0 0 0;
}
.recruitHeroesImage
{
	margin-top: 10px;
	margin-left: -10px;
}
.quickUnbindImage
{
	margin-top: 29px;
	margin-left:10px;
}
.mailboxImage
{
	margin-top: 29px;
	margin-left:47px;
}
.calculatorImage
{
	margin-top: 75px;
	margin-left:9px;
}
.permConnectImage
{
	margin-top: 43px;
	margin-left:10px;
}

.trainingModeImage
{
	margin-top: 90px;
	margin-left: 45px;
}


/** subscription pack **/
.subscriptionPackContainer
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/subscriptionPackContainer.jpg');
	width: 586px;
	height: 403px;
	top: 33px;
	left: 17px;
}
.subscriptionPackBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/subscriptionPackBg.gif');
	width: 556px;
	height: 256px;
	top: 19px;
	left: 15px;
}

.subscriptionOffer1MonthPromotion
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/Pack1_promotion.jpg');
	width: 175px;
	height: 257px;
	top: -132px;
}
.subscriptionOffer1MonthPromotion .subscriptionOfferBillingDuration
{
	color: #FFF !important;
}
.subscriptionOffer2Months
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/Pack2.jpg');
	width: 202px;
	height: 268px;
	top: -132px;
}
.subscriptionOffer3Months
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/Pack3.jpg');
	width: 201px;
	height: 268px;
	top: -132px;
}
.subscriptionBackButton
{
	top: 10px;
	right: 20px;
}

.subscriptionOfferBillingDuration
{
	width: 58px;
}
.redirectionBillingTransactionContainer .subscriptionOfferBillingCost
{
		width: 52px;
		height: 48px;
		top: 2px;
		right: -4px;
		background-position:left top;
}
.subscriptionOfferBillingCost
{
		width: 109px;
		height: 74px;
		top: -57px;
		right: -64px;
}
.subscriptionPriceContainerNoDiscount
{
	height: 48px;
	line-height:1em;
	padding-top: 15px;
	padding-left: 17px;
	padding-right:10px;
	text-align:right;
}
.accountManagementContainer .subscriptionPriceContainerDiscount{
	height:46px;
}
.subscriptionPriceContainerDiscount
{
	background: transparent url('https://mmhk-assets.pages.dev/img/frame/userAccount/promoIcon.png') no-repeat scroll right top;
	height: 48px;
	line-height:1em;
	padding-top: 15px;
	padding-left: 17px;
	padding-right:10px;
	text-align:right;
}
.subscriptionPriceContainerNoDiscount .price{
	font-size:13px;
}
.portalSubscriptionOfferBillingDuration
{
	width: 65px;
}
/** summary frame **/
.accountBillingSummaryBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/BgSummary.jpg');
	border: solid 1px #f2ac10;
	width: 620px;
	height: 442px;
}

.profilAccountBillingSummaryBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/BgSummary.jpg');
	border: solid 1px #f2ac10;
	width: 620px;
	height: 355px;
}

.accountBillingFrameTab
{
	height: 42px;
	top: 2px;
}
.accountBillingMainSummaryBgSubscriptionOffer1Month, .accountBillingMainSummaryBgSubscriptionOffer1MonthUpgrade, .accountBillingMainSummaryBgSubscriptionOffer1MonthBack
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/MainSummaryOneMonth.jpg');
	background-repeat: no-repeat;
	background-color : #ffdc9a;
	width: 567px;
	top: 13px;
	left: 27px;
}
.accountBillingMainSummaryBgSubscriptionOffer2Months
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/MainSummaryTwoMonth.jpg');
	background-repeat: no-repeat;
	background-color: #ffdc9a;
	width: 567px;
	top: 13px;
	left: 27px;
}
.accountBillingMainSummaryBgSubscriptionOffer3Months
{
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/MainSummaryThreeMonth.jpg');
	background-repeat: no-repeat;
	background-color: #ffdc9a;
	width: 567px;
	top: 13px;
	left: 27px;
}
.accountBillingMainSummaryBgSubscriptionOfferFree
{
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/MainSummaryFree.jpg');
	background-repeat: no-repeat;
	background-color: #ffdc9a;
	width: 567px;
	padding-bottom: 33px;
	top: 13px;
	left: 27px;
}
.accountBillingMainSummaryBgSubscriptionOffer
{
	background-color : #ffdc99;
	width: 567px;
	height: 47px;
}
.accountBillingMainSummaryBgSubscriptionOfferBottom
{
	width: 561px;
	height: 44px;
}

.accountBillingSubscriptionFeatures
{
	width: 375px;
	top: 5px;
	left: 172px;
}
.accountBillingBeigeSeparator
{
	background-color: #fffefd;
	width: 365px;
	height: 1px;
}

.accountBillingNextPaymentBg
{
	background-color: #ffeec7;
	width: 365px;
	/*height: 16px;*/
}
.accountBillingRenewalBg
{
	background-color: #ffeec7;
	width: 365px;
	height: 66px;
}
.accountBillingCommonButton
{
	margin-left: 240px;
}
.accountBillingSubscribeButton
{
	/*top: -10px;*/
}
.accountBillingManageSubscribeButton
{
	top: -84px;
	left: 230px;
}

.accountBillingUnsubPackStatus
{
	height: 127px;
	width: 620px;
}
.accountBillingpitchTradeBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingPitchTradeBg.jpg');
	width: 620px;
	height: 443px;
	top: -17px;
}
.accountBillingPitchTradeContainer
{
	width: 323px;
	height: 291px;
	left: 147px;
}
.accountBillingPitchSubscribeButton
{
	top: 5px;
	left: 70px;
}

.accountBillingFreePeriodShift
{
	color: #FFF;
	width: 356px;
	padding-left: 7px;
	background-color: #0e86c2;
	border: 1px solid #193d77;
}

.accountBillingSubscriptionFreeIndicator
{
	color: #FFF;
	font-weight: bold;
	background-color: #0e86c2;
	width: 363px;
	border: 1px solid #193d77;
}

.accountEndFreeSubscription
{
	width: 130px;
}

.accountPromoIcon
{
	width: 76px;
	height: 76px;
	left: 10px;
	bottom: 15px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/promoIcon.png');
}

.accountBillingSubscriptionPrice
{
	width: 90px;
	color: #FFF;
}

.unsubscriptionBillingConfirmationBg
{
	width: 402px;
	height: 196px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/BgConfirmation.jpg');
}
.surveyBg
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/BgSurvey.gif');
	width: 572px;
	height: 315px;
	top: 45px;
	left: 24px;
}
.unsubscriptionBillingSurveyIntro
{
	width: 255px;
	height: 300px;
}
.unsubscriptionBillingSurveyQuestion
{
	width: 260px;
	height: 300px;
}

.UnsubscriptionConfirmationBillingCancelButton
{
	bottom: 5px;
}

.inputRadio
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/inputRadio.gif');
	width: 10px;
	height: 10px;
}

/** frame tab ***/

.billingTabTitle
{
	width: 102px;
	height: 26px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/tab_billing.gif');
}
.billingTab, billingTabTitleSelected
{
	background-color: #fffefd;
	line-height: 32px;
}

/***********************
*** User Account ***
***********************/

/*** frame ***/
.userAccountFrameSummaryView
{
	height: 100px;
}
.userAccountFrameSubscriptionButton
{
	margin-top: 140px;
}
.userAccountFrameSubscriptionButtonImage
{
	margin-top: -7px;
}
.userAccountFramePortalProfileButtonImage
{
	margin-top: -7px;
}
.userAccountFrameTabsContainerInformationsZone
{
	height: 359px;
}
.userAccountFrameSubscriptionOfferBillingPointsBackground
{
	background-color: #b19b7f;
	height: 30px;
}

._inactiveItem .userAccountFrameRegion
{
	background-color: #808080;
}

._inactiveItem .userAccountFrameHero
{
	background-color: #808080;
}
/*************************
***  Manage Kingdom    ***
*************************/

.chooseItemsBg
{
		background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/BgSummary.jpg') bottom;
		width: 620px;
		height: 515px;
}

.chooseItemsPitchContainer
{
		background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/bgManage.jpg');
		width: 579px;
		height: 186px;
}

.manageKingdomRegion
{
		width: 120px;
		border-right: 1px solid gray;
}

.chooseItemsButtonImage
{
	bottom: 5px;
	left: 2px;
}

.chooseItemsSubscriptionTitle
{
		width:  341px;
}

.chooseItemsContainer
{
		border: 1px solid #e75700;
		height: 210px;
		width:570px;
}

.chooseItemsButtonZone
{
		background-color: #fdc45c;
		width: 569px;
		height: 20px;
		bottom: 25px;
		margin-left: 29px;
}

.chooseItemsTextZone
{
		background-color: #fdb637;
		height: 18px;
		width: 569px;
}

.chooseItemsPitch
{
	width: 400px;
}

.chooseItemsRegionsList
{
	height: 167px !important;
	width: 550px;
	border: 1px solid #808080;
}

.chooseItemsButtonContainer
{
	left: 250px;
}

.chooseItemsButtonContainer:hover
{
	color: #FFFFFF;
}

.chooseItemsAcceptButton
{
	margin: 20px auto 0px;
	width: 80px;
}

.chooseItemsRegionsListSlider
{
	height: 169px;
}

._inactiveItem.heroBilling
{
	border: none;
}

._inactiveItem, ._inactiveItem .heroCapturedView, ._inactiveItem .regionCity
{
	background: url('https://mmhk-assets.pages.dev/img/background/inactiveItem.jpg') repeat-y bottom left;
}

._inactiveItem .beigeBg
{
	background-color: transparent;
}

/*************************
*** Subscription offer ***
*************************/

.subscriptionOffer
{
	height: 51px;
	line-height: 39px;
}
.subscriptionOffer.odd
{
	background-color: #e8dbc1;
}

.subscriptionOffer.even
{
	background-color: #fef8e8;
}

.subscriptionOfferDuration
{
	width: 270px;
	height: 53px;
	line-height: 41px;
	border-right: 1px solid #99958D;
}
.subscriptionOfferCost
{
	width: 143px;
	height: 50px;
	line-height: 41px;
}
.subscriptionOfferButton
{
	height: 50px;
	line-height: 28px;
	margin-top: 3px;
}

.subscriptionOfferListContainer
{
	width: 586px;
	height: 250px;
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/fd_subscription_empty.gif') repeat-y;
}

/*************************
*** Manage kingdom ******
*************************/

.userAccountFrameManageKingdom
{
	height: 231px;
}
.manageKingdomFrameRegionCheckBox
{
	margin-top: 96px;
}
.manageKingdomFrameHeroCheckBox
{
	margin-top: 55px;
}
.userAccountFrameRegion
{
	width: 	150px;
}
.userAccountFrameRegionHeroList
{
	width: 	453px;
}

/*************************
** History Subscription **
*************************/
.historySubscriptionListContainer
{
	width: 588px;
	height: 331px;
	margin-left: 16px;
	top: 15px;
	background: url('https://mmhk-assets.pages.dev/img/frame/userAccount/fd_history_subscription_empty.gif') repeat-y;
}

.historySubscriptionList
{
}

.historySubscription
{
	height: 39px;
	line-height: 39px;
}
.historySubscription.odd
{
	background-color: #e8dbc1;
}

.historySubscription.even
{
	background-color: #fef8e8;
}
.historySubscriptionStartDateTitle
{
	width: 123px;
}
.historySubscriptionDurationTitle
{
	width: 321px;
}
.historySubscriptionEndDateTitle
{
	width: 124px;
}
.historySubscriptionStartDateTitle,
.historySubscriptionDurationTitle,
.historySubscriptionEndDateTitle
{
	height: 15px;
	border-right: 1px solid #99958D;
}
.historySubscriptionStartDate
{
	width: 113px;
	height: 39px;
}
.historySubscriptionDuration
{
	width: 311px;
	height: 39px;
}
.historySubscriptionEndDate
{
	width: 105px;
	height: 39px;
}
.historySubscriptionStartDate,
.historySubscriptionDuration
{
	border-right: 1px solid #99958D;
}


.accountBillingHistoryContent
{
	width: 575px;
	height: 369px;
	border: 1px solid #e75700;
	margin-top: 13px;
	margin-left: 23px;
	background-color: #ffdc99;
}
.accountBillingHistoryHeader
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHeader.gif');
	width: 575px;
	height: 33px;
	line-height: 21px;
	margin: 0 auto;
}
.accountBillingHistoryList
{
	width: 558px;
	line-height: 30px;
	margin-left: 114px;
}

.accountBillingStartDate
{
	width: 114px;
}

.accountBillingSubscription
{
	width: 323px;
}

.accountBillingCurrentSubscription
{
	font-weight: bold;
}

.accountBillingFreeSubscription
{
	color: #FFF;
	background-color: #0e86c2;
	background-image: none !important; /* TMP UNTIL GFX INTEGRATION */
}

.accountBillingEndDate
{
	width: 114px;
}

.accountBillingHistoryList .odd
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHistoryListOdd.gif');
	height: 30px;
	width: 558px;
}

.accountBillingHistoryList .even
{
	height: 30px;
	width: 558px;
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/accountBillingHistoryListEven.gif');
}
.billingPointPackBackground
{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/bgBilling.jpg');
	width: 620px;
	height: 487px;
}
.billingPointPackList{
	margin: 0px auto;
	width: 399px;
}
.billingPointPackContainer{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/pointPack.png');
	width:379px;
	height:65px;
}
.billingPointPackContainer.discount{
	background-image: url('https://mmhk-assets.pages.dev/img/frame/userAccount/pointPackDiscount.png');
}
.billingPointPackContainer.discount .billingPackOfferInfos{
	color:#feecc9;
}
.billingPointPackPrice{
	margin:10px 10px 0px 0px;
	width:100px;
}
.billingPointPackContainer.discount .billingPointPackPrice{
	color:#c6201b;
}
.billingPackOfferInfos{
	width:219px;
	margin-left:50px;
	margin-top:13px;
}
.billingPointPackBuyButton{
	width:100px;
	position:absolute;
	right:10px;
	bottom:13px;
}
.billingPointPackBackButton{
	width:100px;
	text-align:center;
	margin:0px auto;
}
.accountAbstractBillingModelContent{
	width:460px;
}
.accountSpecialOffer{
	width:465px;
}
.accountManagementBtn{
	width:165px;
	text-align:center;
}
.accountManagementBtnTxt{
	vertical-align:middle;
	display:table-cell;
	height:38px;
	line-height:1.2em;
}/* --------------------------*
 * SlideShow using iCarousel *
 * --------------------------*/

/* SlideShow DIV */
.slideShow {
	position: relative;
	overflow: hidden;
	height: 219px;
	width: 715px;
	top: 22px;
	left: 22px;
	padding: 0;
}
.slideShow * {
	padding: 0;
}
/* Slides container UL */
.slideShowSlides {
	height: 219px;
	width: 30000px;
	position: absolute;
	top: 0;
}
/* Slide container LI */
.slideShowSlideContainer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	height: 219px;
	width: 715px;
}
/* Slide parts */
.slideShowSlide {
	position: relative;
	width: 715px;
	height: 219px;
}
.slideShowSlideTitle {
	color: #FFFFFF;
	font-size: 25px;
	left: 120px;
	position: absolute;
	top: 45px;
}
.slideShowSlideText {
	color: #FFFFFF;
	left: 120px;
	position: absolute;
	top: 80px;
	width: 400px;
}
.slideShowPreviousButton,
.slideShowNextButton {
	list-style: none;
	width: 12px;
	height: 27px;
	display: block;
	float: left;
	margin-top: 10px;
	cursor: pointer;
}
.slideShowNextButton {
	background-image: url('https://mmhk-assets.pages.dev/img/slideShow/arrowright.png');
}
.slideShowPreviousButton {
	background-image: url('https://mmhk-assets.pages.dev/img/slideShow/arrowleft.png');
}
.slideShowFrame {
	background: url("https://mmhk-assets.pages.dev/img/slideShow/sliderFrame.png") repeat scroll 0 0 transparent;
	width: 729px;
	height: 233px;
	top: 15px;
	left: 15px;
}
/* SlideShow Thumbs UL */
.slideShowThumbs {
	position: absolute;
	top: 163px;
	right: 10px;
	float: right;
	margin: 0;
	padding: 0;
	height: 50px;
}
.slideShowSlideThumb {
	list-style: none;
	border: 1px solid black;
	display: block;
	float: left;
	width: 44px;
	height: 44px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}
.slideShowSlideThumb.active {
	border: 2px solid white;
	margin: -1px 4px;
}
.slideShowSlideThumb:hover {
	border: 2px solid #FF892C;
	margin: -1px 4px;
}
/* --------------------------*
 * Register Creatures SlideShow using iCarousel *
 * --------------------------*/

/* Creatures SlideShow DIV */

#SlideShowSmoothMask {
	height: 320px;
	width: 40px;
	background-image: url('https://mmhk-assets.pages.dev/img/firstConnection/creaturesSlideShow/smooth_mask.png');
	position: absolute;
	top: 17px;
	left:0px;
	z-index: 1;
}
.creaturesSlideShow {
	position: absolute;
	left: -7px;
	top: -61px;
	overflow: hidden;
	height: 374px;
	width: 320px;
	padding: 0;
	margin: 0;
}
.creaturesSlideShow  *{
	padding: 0;
}
/* Slides container */

.creaturesSlideShowSlides
.creaturesSlideShowSlideItem {
	list-style: none;
	margin: 0;
}
.creaturesSlideShowSlideItem {
	display: block;
	height: 320px;
	width: 320px;
	float: left;
}
.creaturesSlideShowSlides
{
	height: 320px;
	width: 30000px;
	position: absolute;
}
.creaturesSlideShowImg {
	position: relative;
	height: 320px;
	width: 320px;
}
/* Creatures Slide Navigation */

.creaturesSlideShowNav {
	width: 320px;
	height: 36px;
	position:absolute;
	bottom:-1px;
	left:0px;
	z-index:10;
}
.creaturesSlideShowButtons {
	position: relative;
	margin: 0;
	padding: 0;
	width: 320px;
	height: 33px;
}
.creaturesSlideShowPreviousButton,
.creaturesSlideShowNextButton,
.creaturesSlideShowZoomButton {
	list-style: none;
	width: 28px;
	height: 28px;
	display: block;
	cursor: pointer;
	margin-right: 6px;
}
.creaturesSlideShowNextButton {
	background-image: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/icons.png');
	float: right;
}
.creaturesSlideShowNextButton:hover {
	background-position: 0px 412px;
}
.creaturesSlideShowPreviousButton {
	background-image: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/icons.png');
	background-position: 0px 374px;
	float: left;
}
.creaturesSlideShowPreviousButton:hover {
	background-position: 0px 336px;
}
.creaturesSlideShowZoomButton {
	background-image: url('https://mmhk-assets.pages.dev/img/portal/ng_portal/icons.png');
	background-position: 0px 70px;
	float: right;
}
.creaturesSlideShowZoomButton:hover {
	background-position: 0px 32px;
}
#ButtonsMask {
	list-style: none;
	display: block;
	height: 30px;
	width: 320px;
	background-image: url('https://mmhk-assets.pages.dev/img/firstConnection/creaturesSlideShow/buttons_mask.png');
}
/* Creatures Slide Title */

.creaturesSlideShowTitle {
	width: 200px;
	font-size: 14px;
	position: relative;
	bottom: -346px;
	margin: 0 auto;
	color:white;
}
/* Creatures Viewer */

#characterViewerWrapper {
	position: absolute;
	width:900px;
	z-index: 9999;
	margin: auto;
	top:0;
	left:0;
}
#characterViewer {
	width: 900px;
	height: 1085px;
	margin: 70px auto;
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/character-viewer-background.png) no-repeat;
	padding: 72px 0px 0px 4px;
	position: absolute;
}
#characterViewerWrapper .closeMediaPlayer {
	background:url(https://mmhk-assets.pages.dev/img/portal/ng_portal/icons.png) 0 -304px;
	width:28px;
	height:28px;
	display:block;
	position:relative;
	text-indent:-9999px;
	left:447px;
	top:200px;
	margin:0 auto;
	z-index: 9999;
}
#characterViewerWrapper .closeMediaPlayer:hover {
	background-position: 0 -342px;
}
#characterViewerWrapper .introVideoTop, #characterViewerWrapper .introVideoBot {
	width: 197px;
	height: 10px;
}
#characterViewerWrapper .introVideoTop {
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/bg-intro-detail.png) 0 0px;
	top:69px;
	left:352px;
}
#characterViewerWrapper .introVideoBot {
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/bg-intro-detail.png) 0 -22px;
	bottom: 185px;
	left: 352px;
}
#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#outerImageContainer > #hoverNav {
	left: 0;
}
#hoverNav a {
	outline: none;
}
#prevLink, #nextLink {
	top: 370px;
	display: block;
	padding-top: 53px;
	position: absolute;
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/bg-nav-detail.png) no-repeat top !important;
	height: 106px;
	width: 58px;
	display: block;
}
#prevLink span, #nextLink span {
	background: url(https://mmhk-assets.pages.dev/img/portal/ng_portal/screenshot-buttons.png);
	display: block;
	height: 58px;
	width: 58px;
}
#prevLink {
	left: -27px;
}
#prevLink span {
	background-position: 0 0;
}
#prevLink:hover span {
	background-position: 0 -68px;
}
#nextLink {
	right: -27px;
	float: right;
}
#nextLink span {
	background-position: 0 -136px;
}
#nextLink:hover span {
	background-position: 0 -204px;
}


/* Mobile touch device styles - applied when body has .mobile-touch class */

html.mobile-touch,
html.mobile-touch body
{
	overflow: hidden !important;
	-webkit-touch-callout: none !important;
	touch-action: manipulation;
	height: 100%;
	/* Dark fill so the iOS safe-area / notch strips (made visible by viewport-fit=cover)
	   blend with the game's dark wooden chrome rather than flashing white/black bars. */
	background-color: #1a0f08;
}

/* iOS portrait: track the visualViewport.height so the layout never extends
   behind Safari's dynamic toolbar / home indicator. JS pushes the live value
   into --portrait-vh; falls back to 100% if JS hasn't run yet. */
html.use-portrait-layout,
html.use-portrait-layout body
{
	height: var(--portrait-vh, 100%) !important;
}

/* Push body content inside safe-area so iPhone's notch / home indicator don't push the
   centered game off-axis. html background still paints behind the notch.
   (env(safe-area-inset-*) is 0 unless viewport-fit=cover is set — see initGame.js.) */
html.mobile-touch body
{
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
	box-sizing: border-box;
}

.mobile-touch *
{
	-webkit-touch-callout: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Mobile landscape side-column layout (phones with aspect >= 1.7)
   Top/bottom bars are relocated to left/right narrow columns,
   freeing vertical space for main game + city side.
   ============================================================ */

.use-mobile-layout #Container
{
	position: relative;
	width: 1123px;
	height: 582px;       /* = max(WorldMap content 416, SideBar content 582) */
	margin: 6px auto 0 auto;   /* all 4 reserved physical px go on top (CSS 6 ≈ 4 physical at scale ≈0.7) */
}

/* Main game & city: centered main area */
.use-mobile-layout .leftContainer
{
	position: absolute !important;
	left: 60px; top: 0;
	width: 682px; height: 582px;
	float: none !important;
}
.use-mobile-layout .rightContainer
{
	position: absolute !important;
	left: 742px; top: 0;
	width: 321px; height: 582px;
	float: none !important;
}
/* SideBarContainer: must match ContentSlider specificSize (491) so the slider track
   and the visible content area are in sync. Visible area = rightContainer 582
   − sidebarTop 59 − sticky chat 32 = 491. */
.use-mobile-layout .sideBarContainer { height: 491px !important; }
.use-mobile-layout .sideBarContent   { height: 491px !important; }
.use-mobile-layout .sideBarSpacer    { display: none !important; }

/* Right container: MainMenu is no longer here, no scrolling needed.
   overflow: visible lets the chat expand panel overflow above the chat bar. */
.use-mobile-layout .rightContainer
{
	overflow: visible !important;
}

/* MainMenu: vertical column on the LEFT of main game, 60 wide, icon + text buttons.
   No background image, no world-name label. */
.use-mobile-layout #MainMenuContainer,
.use-mobile-layout .mainMenuContainer_ru
{
	position: absolute !important;
	left: -10px !important; top: 0 !important;
	width: 60px !important;
	height: 582px !important;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	margin: 0 !important;
	padding: 8px 0 !important;
	z-index: 100;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
}
.use-mobile-layout .mainMenuContainer .gameVersion,
.use-mobile-layout .mainMenuContainer_ru .gameVersion
{
	display: none !important;
}
.use-mobile-layout #MainMenuContainer .floatRight
{
	float: none !important;
	position: static !important;
	width: 60px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
.use-mobile-layout .mainMenuContainer .mainMenuBlock
{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	float: none !important;
	width: 84px !important;
	margin: 0 auto !important;
	text-align: center;
}
.use-mobile-layout .mainMenuContainer .mainMenuBlock .inlineBlock
{
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	margin: 0 !important;
}
.use-mobile-layout .mainMenuContainer .mainMenuBlock .inlineBlock > div
{
	float: none !important;
	margin: 0 !important;
}
.use-mobile-layout .mainMenuContainer .mainMenuBlock span
{
	display: block !important;
	width: 100% !important;
	margin: 2px 0 0 0 !important;
	font-size: 10px;
	line-height: 1.1;
	color: #ffeec7;
	text-align: center !important;
	text-shadow:
		-1px -1px 0 #2a1a0d,
		 1px -1px 0 #2a1a0d,
		-1px  1px 0 #2a1a0d,
		 1px  1px 0 #2a1a0d,
		 0 1px 2px rgba(0, 0, 0, 0.75);
	white-space: nowrap;
}

/* Toolbar (FriendKey / Notifications) still lives in the left column,
   but sits below the MainMenu vertical stack. Since MainMenu takes full 582 now,
   hide the empty toolbar entirely (its children are all .hidden anyway). */
.use-mobile-layout .toolbarBg
{
	display: none !important;
}

/* Left footer toolbar: moves to left column, parchment tab for FriendKey / Notifications */
.use-mobile-layout .toolbarBg
{
	position: absolute !important;
	width: 60px;
	background: none !important;
	margin: 0;
	z-index: 100;
	box-sizing: border-box;
}

/* Hide .floatRight entirely if it has no visible (non-hidden) children.
   Prevents empty parchment tabs when inner buttons are all .hidden. */
.use-mobile-layout .toolbarBg .floatRight:not(:has(> *:not(.hidden)))
{
	display: none !important;
}

/* Parchment tab styling for toolbar buttons only (FriendKey / Notifications) */
.use-mobile-layout .toolbarBg .floatRight:has(> *:not(.hidden))
{
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	flex: 0 0 auto;
	width: 90px !important;
	height: 36px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background-image: url('https://mmhk-assets.pages.dev/img/mobile/tab.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
}
.use-mobile-layout .toolbarBg .floatRight,
.use-mobile-layout .toolbarBg .floatRight *
{
	white-space: nowrap !important;
	word-break: keep-all !important;
}
.use-mobile-layout .toolbarBg .floatRight > div.hidden,
.use-mobile-layout .toolbarBg .floatRight > div > div.hidden
{
	display: none !important;
}
.use-mobile-layout .toolbarBg .floatRight > div:not(.hidden),
.use-mobile-layout .toolbarBg .floatRight > div > div:not(.hidden)
{
	display: block !important;
	position: static !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 6px !important;
	box-sizing: border-box;
	font-family: "Helvetica Neue", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 9px !important;
	font-weight: bold;
	line-height: 1.1;
	color: #3a2418;
	text-align: center !important;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255, 245, 210, 0.55);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* SidebarTop: left in rightContainer at original position with original desktop style */
/* Logout: kept at its original DOM position with original desktop style (top:6 right:10) */

/* Left column: toolbar fills the full 582 height (since MainMenu is no longer above it) */
.use-mobile-layout .toolbarBg
{
	left: 0; top: 0; height: 582px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 0;
	overflow: hidden;
}
/* QuestBox: pinned to main game's bottom-LEFT corner, lifted 15px above the floor */
.use-mobile-layout #QuestBoxContainer
{
	position: absolute !important;
	left: 10px !important;
	bottom: 25px !important;
	top: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
	width: auto !important;
}

/* Chat: desktop's `right:0 bottom:3` anchors a 0×0 #ChatContainer at the bottom-
   right of #Container; .chatsystem inside has its own `right:4 bottom:0` and the
   minimized strip has `right:3 bottom:2`. In landscape we want chat to hug the
   right edge of the city column (rightContainer right = 1063) and the very
   bottom of #Container — so we offset the anchor by:
     right = (1123 - 1063) - 4 (.chatsystem's internal right) = 56
       → .chatsystem's right edge lands flush on the city right edge (no left gap)
     bottom = -2 → counteracts .chatsystemmincontainer's `bottom:2` so the
       minimized strip sits flush on #Container's bottom (and .chatsystem
       which uses bottom:0 sits 2px below — acceptable; the mini strip is
       what the user sees most of the time and it's now flush). */
.use-mobile-layout #ChatContainer
{
	right: 56px !important;
	bottom: -2px !important;
}

/* Logout button: desktop uses right:10 against a 1009-wide Container, which
   lands right next to the Ranking button. Our mobile Container is 1123 wide,
   so offset by 60 + 10 = 70 so visually it hugs the SidebarTop right edge again. */
.use-mobile-layout #gameLogoutButton
{
	right: 70px !important;
}

/* Lift ZoomTool with the rest of the bottom HUD row (bottom:10 → 25) */
.use-mobile-layout .zoomToolAndAvatar
{
	bottom: 25px !important;
}

/* QuestScriptFrame: QuestScriptContainer is attached to #Container (not leftContainer),
   so desktop left:86 top:134 happens to center it in leftContainer on desktop
   (Container 1009 wide). In mobile our Container is 1123 wide with leftContainer
   offset by 60, so we need to shift x to recenter, and lift y so it fits the 582-tall viewport. */
.use-mobile-layout .questScriptFrameCentered,
.use-mobile-layout .questScriptFrameCenteredSepTitle
{
	left: 147px !important;   /* 60 (leftContainer offset) + (682 - 508) / 2 */
	top: 61px !important;     /* (582 - 460) / 2 */
}
.use-mobile-layout .questScriptFrameCenteredFirst
{
	left: 170px !important;   /* 60 + (682 - 482) / 2 */
	top: 105px !important;    /* (582 - 371) / 2 */
}
/* Right frame: desktop anchors bottom-right (Container 1009 → right edge ~987).
   Mobile Container is 1123 wide / 582 tall; shift right so it hugs the right side
   of main game and push to the very bottom so hero icons aren't blocked. */
.use-mobile-layout .questScriptFrameRight
{
	left: 693px !important;     /* 1123 - 408 - 22 */
	top: 276px !important;      /* 582 - 306 (flush with bottom) */
}
.use-mobile-layout .questScriptFrameSmallRight
{
	left: 776px !important;     /* 1123 - 325 - 22 */
	top: 278px !important;      /* 582 - 304 (flush with bottom) */
}

/* .worldMap is the true positioned ancestor of MineProspect/AllianceChief
   buttons (class on the WorldMap instance div, position:relative, default h:552).
   WorldMapContainer sits in leftContainer's flow AFTER the 25px timeLineHeight,
   so .worldMap height = leftContainer 582 - timeLine 25 = 557, placing the
   bottom of .worldMap exactly at leftContainer bottom (y=582).
   Now absolute bottom:10 children land at y=572, aligning with QuestBox. */
.use-mobile-layout .worldMap
{
	height: 557px !important;
}

/* WorldMap footer-style buttons: bottom-right HUD row lifted 15px in unison
   so AddAlert stays 35px above MineProspect (no overlap) */
.use-mobile-layout .worldMapMineProspectButtonContainer
{
	position: absolute !important;
	left: auto !important;
	right: 10px !important;
	top: auto !important;
	bottom: 25px !important;
	margin: 0 !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}
.use-mobile-layout .worldMapAddAlertButtoncontainer
{
	position: absolute !important;
	left: auto !important;
	right: 10px !important;
	top: auto !important;
	bottom: 60px !important;
	margin: 0 !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}

/* GameHider full-screen dim layer (Strategy guide / Stats / etc add `.globalHider`).
   Default `.globalHider { width:1009 height:680 }` is sized for the desktop 1009-wide
   #Container. In mobile-layout #Container is 1123×582 with MainMenu at left:-10
   width:60 (4 buttons that shouldn't be dimmed) and a 60px gutter past the city
   sidebar's right edge (also shouldn't be dimmed — it's just black backdrop).
   So we span only main game + city: from leftContainer left (60) to
   rightContainer right (60+682+321 = 1063). */
.use-mobile-layout .globalHider
{
	left: 60px !important;
	width: 1003px !important;       /* 1063 (city right edge) - 60 (start) */
	height: 582px !important;       /* match #Container height */
}

/* Simulated drag-and-drop visual feedback */
.simulatedDragActive
{
	opacity: 0.5;
	outline: 2px solid #ffd700;
	outline-offset: 1px;
	box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.droppableHighlight
{
	outline: 2px dashed #4CAF50;
	outline-offset: 1px;
	background-color: rgba(76, 175, 80, 0.15);
}

/* ============================================================
   Portrait phone layout (phones held vertically, aspect >= 1.7)

   Mirrors the desktop top-bar layout: MainMenu + sidebarTop sit in one
   top row, main game directly below (full 682 width), and the bottom
   region splits into chat (left, auto-expanded) + city (right).

     ┌───────────────────────────┐  ← env(safe-area-inset-top) padding (notch backdrop only)
     │ MainMenu   │  sidebarTop  │  row 1 (auto height — same pairing as desktop)
     ├────────────┴──────────────┤
     │                           │
     │   main game (682 × 582)   │  row 2 (spans both columns)
     │                           │
     ├─────────────┬─────────────┤
     │             │             │
     │    chat     │    city     │  row 3 (1fr — height grows with viewport)
     │  (expanded) │  (scroll)   │
     │             │             │
     └─────────────┴─────────────┘
   ============================================================ */

/* Body padding absorbs the top/bottom safe-area in portrait so the grid content
   starts below the notch; html fills behind with the dark background. */
html.use-portrait-layout body
{
	padding-top: env(safe-area-inset-top, 0);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Container: 2-col × 3-row grid mirroring PC's top-bar + body layout.
   sidebarTop is NOT a grid cell — it's absolute-positioned inside .rightContainer
   (see .rightContainer and .sidebarTopContainer rules below), so the top-right
   slot is reserved empty for it to render above. */
.use-portrait-layout #Container
{
	position: relative !important;
	width: 682px !important;
	height: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box;
	display: grid !important;
	/* Columns stay `1fr 321px` so the bottom row (chat | city) keeps the city
	   sidebar at its designed 321 width. MainMenu and sidebarTop are NOT grid
	   items — they're absolute-positioned across the top row at a golden-ratio
	   split (0.618 / 0.382) independent of the grid column tracks. */
	grid-template-columns: 1fr 321px;
	grid-template-rows: 64px 582px 1fr;
	grid-template-areas:
		".          ."
		"mainGame   mainGame"
		"chat       city";
	overflow: hidden;
}

/* Main game: middle row spanning both columns */
.use-portrait-layout .leftContainer
{
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: 682px !important;
	height: 582px !important;
	float: none !important;
	margin: 0 !important;
	grid-area: mainGame;
}

/* WorldMap height = leftContainer 582 - timeLine 25 = 557 (same as landscape) */
.use-portrait-layout .worldMap
{
	height: 557px !important;
}

/* The city sidebar's height is the source of truth for portrait row 3:
   - Compute deterministically from the viewport (matching desktop/landscape's
     "fixed visible cell" model) using calc(100vh − topRow − mainGameRow − safeAreas).
   - Apply the SAME value to .sideBarContainer (outer chrome) and .sideBarContent
     (the scrollable list, owned by the in-game ContentSlider) — no flex/table
     height-propagation chain, no `position: absolute; inset: 0` (which forced us
     to fight propagation through .metal/<table>/<td> and ended up as a 9999
     bleed from ContentSlider's 99999 hack).
   - Chat takes the same height automatically because grid row 3 = 1fr, so
     `.use-portrait-layout #ChatContainer { height: 100% }` resolves to the
     same value (chat side stays unchanged).
   - The 64 / 582 numbers match grid-template-rows: 64px 582px 1fr.
   - max(150px, …) protects against weird small viewports where the calc would
     go below the minimum usable height. */
.use-portrait-layout
{
	/* --portrait-vh is set from JS (HOMMK.refreshPortraitVh) to window.innerHeight
	   so it tracks iOS Safari's dynamic toolbar collapse/expand. Falls back to
	   100vh if the JS hook hasn't run yet. The body's safe-area-inset paddings
	   already eat into innerHeight on devices with notch + home-indicator, so we
	   subtract them here to match the actual #Container content height. */
	--portrait-sidebar-height: max(150px, calc(var(--portrait-vh, 100vh) - 64px - 582px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

/* rightContainer hosts sidebarTop (fixed, viewport-anchored) + sideBarContainer.
   No special positioning needed; just place it as the city grid cell. */
.use-portrait-layout .rightContainer
{
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 321px !important;
	height: 100% !important;
	float: none !important;
	margin: 0 !important;
	grid-area: city;
	overflow: visible !important;          /* shortcut popups escape via z-index */
}

.use-portrait-layout .sideBarContainer
{
	position: relative !important;         /* containing block for shortcut popups */
	width: 321px !important;
	height: var(--portrait-sidebar-height) !important;
	overflow: visible !important;          /* let popups escape; .sideBarContent clips */
}

/* The actual scrollable list. Same height as the cell so ContentSlider's
   getSize() / specificSize / scroll math line up exactly. */
.use-portrait-layout .sideBarContent
{
	width: 302px !important;
	height: var(--portrait-sidebar-height) !important;
	overflow: hidden !important;
}
.use-portrait-layout .sideBarSpacer
{
	display: none !important;
}

/* Vertical divider between the two top button groups, at the 0.618 / 0.382 split.
   Short (≈ half row height), vertically centered, with soft fade-out at both ends
   so it blends into the parchment background instead of looking like a hard rule. */
.use-portrait-layout #Container::before
{
	content: '';
	position: absolute;
	left: 420px;          /* MainMenu right edge = sidebarTop left edge */
	top: 18px;            /* (64 − 28) / 2 → centered within 64-tall top row */
	height: 28px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		rgba(74, 44, 24, 0) 0%,
		rgba(74, 44, 24, 0.45) 30%,
		rgba(74, 44, 24, 0.45) 70%,
		rgba(74, 44, 24, 0) 100%
	);
	border-radius: 2px;
	z-index: 11;
	pointer-events: none;
}

/* ----- Top row right slot: sidebarTop (message / profile / alliance / ranking) -----
   Pinned with position:fixed against the viewport (which is locked to width=682
   via the meta tag, so right:0 of viewport = right edge of #Container). This
   detaches it from rightContainer, allowing rightContainer to become a
   positioning ancestor for its sideBarContainer child without dragging
   sidebarTopContainer down to row 3. Width = 682 × 0.382 ≈ 261. */
.use-portrait-layout .sidebarTopContainer
{
	position: fixed !important;
	top: env(safe-area-inset-top, 0) !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	width: 261px !important;        /* 682 × 0.382 */
	height: 59px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 10;
	box-sizing: border-box;
	overflow: hidden;
}
.use-portrait-layout .sidebarTopContainer #SidebarTop
{
	width: 100% !important;
	margin: 0 !important;
}

/* ----- Top row left slot: MainMenu (guide / stats / production / cheats) -----
   Absolute-positioned at #Container's top-left, width = 682 × 0.618 ≈ 421.
   Buttons hug the right side (toward sidebarTop), giving a compact group with
   open empty space on the left of the row. Inherits PC mainMenuBlock typography
   (no portrait-specific overrides) so the text matches the desktop look. */
.use-portrait-layout #MainMenuContainer,
.use-portrait-layout .mainMenuContainer_ru
{
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 421px !important;        /* 682 × 0.618 */
	height: 64px !important;
	margin: 0 !important;
	padding: 0 6px 0 0 !important;
	z-index: 10;
	display: flex !important;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
}
.use-portrait-layout #MainMenuContainer .floatRight
{
	float: none !important;
	position: static !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
}
/* Reset only block-level layout (flex direction / float) — typography inherits PC. */
.use-portrait-layout .mainMenuContainer .mainMenuBlock
{
	float: none !important;
	margin: 0 8px !important;
}

/* Toolbar (FriendKey / Notifications) — no place in portrait grid, hide */
.use-portrait-layout .toolbarBg
{
	display: none !important;
}

/* Logout: absolute top-right of Container (above main game's corner) */
.use-portrait-layout #gameLogoutButton
{
	position: absolute !important;
	top: calc(env(safe-area-inset-top, 0) + 4px) !important;
	right: 4px !important;
	left: auto !important;
	margin: 0 !important;
	z-index: 100;
}

/* ============================================================
   Portrait chat: pure css 2.0 / absolute model (matches desktop+landscape).

   Desktop chat anchors a 0×0 #ChatContainer at bottom-right of #Container, with
   every internal piece (chatsystem, input, chatfixbg, submit, mincontainer)
   `position: absolute` against it. Landscape just shifts that anchor `right: 60`.
   Portrait keeps the SAME absolute model — only the outer anchor changes from
   "0×0 at bottom-right" to "fill the grid cell" — and every inner desktop rule
   stays unchanged. The close/min flow (Chat.open()/.close() toggling .hidden)
   works exactly as on desktop.
   ============================================================ */

/* #ChatContainer becomes the cell-sized positioning anchor. */
.use-portrait-layout #ChatContainer
{
	position: relative !important;
	left: auto !important; right: auto !important;
	top: auto !important; bottom: auto !important;
	width: auto !important;
	height: 100% !important;
	float: none !important;
	grid-area: chat;
	justify-self: stretch;
	align-self: stretch;
	overflow: hidden;
	z-index: 3001;
	background: #fff2e5;
}

/* Stretch chatsystemcontainer to fill the cell (replaces desktop's 0-sized
   wrapper). All descendants then anchor against this box. */
.use-portrait-layout #ChatContainer .chatsystemcontainer
{
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	right: 0 !important; bottom: 0 !important;
	width: auto !important;
	height: auto !important;
}

/* When chat is closed, hide chatsystemcontainer entirely. Otherwise its
   transparent inset:0 box (with desktop's z-index:9999) intercepts clicks meant
   for the minimized bar below it — the bar would visually appear but its
   click-to-reopen handler never fires. */
.use-portrait-layout #ChatContainer .chatsystemcontainer:has(.chatsystem.hidden)
{
	display: none !important;
}

/* Minimized bar pinned to the cell's BOTTOM (吸底). Show only when chat is
   closed. Chat.close() removes `.hidden` from `.chatsystemmin`, so we use that
   as the "is closed" signal (the .chatsystem.hidden / chatsystemmin.hidden
   pair toggles together). */
.use-portrait-layout #ChatContainer .chatsystemmincontainer:has(.chatsystemmin.hidden)
{
	display: none !important;
}
.use-portrait-layout #ChatContainer .chatsystemmincontainer
{
	position: absolute !important;
	bottom: 0 !important; left: 0 !important;
	right: 0 !important; top: auto !important;
	width: 100% !important;        /* explicit; desktop hardcodes 320 */
	height: 27px !important;
	margin: 0 !important;
	z-index: 5;
	background: #fff2e5;
	box-sizing: border-box;
}
.use-portrait-layout #ChatContainer .chatsystemmin
{
	position: relative !important;
	top: auto !important; right: auto !important;
	bottom: auto !important; left: auto !important;
	width: 100% !important;          /* desktop hardcodes 270 */
	height: 27px !important;
	margin: 0 !important;            /* desktop has -25 top, 2 right — drop both */
	padding-left: 47px !important;   /* keep desktop icon column */
	/* Stretch the sprite horizontally so it fills the wider portrait bar (sprite
	   is natively 323px; bar fills the 321px+ cell). background-size keeps height
	   at the original 445px sprite total so the y=-243 slice offset stays valid;
	   only width is rubber-banded to 100% of the bar. */
	background-image: url('https://mmhk-assets.pages.dev/img/chat/chatsystem.gif') !important;
	background-position: 0 -243px !important;
	background-repeat: no-repeat !important;
	background-size: 100% 445px !important;
	background-color: #fff2e5 !important;
	box-sizing: border-box;
	line-height: 26px;
	z-index: auto;
}
.use-portrait-layout #ChatContainer .chatsystemmincontainer:hover .chatsystemmin
{
	background-position: 0 -270px !important;
}
/* Sprite-native expand glyph at sprite-x 240-270 carries the affordance —
   no extra pseudo-element overlay. */

/* `.chatsystem` is the open-state card. Replace desktop's 318×auto bottom-right
   anchor with "fill the cell". Don't override .hidden — Chat.close() collapses
   it via the standard .hidden { display: none } from global CSS. */
.use-portrait-layout #ChatContainer .chatsystem
{
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	right: 0 !important; bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 4px !important;
	box-sizing: border-box;
}

/* Pure decoration we never want in portrait */
.use-portrait-layout #ChatContainer .chatsystemmove,
.use-portrait-layout #ChatContainer .chatsystem > h2,
.use-portrait-layout #ChatContainer .chatlatestmessage,
.use-portrait-layout #ChatContainer .chatsystemmorebutton
{
	display: none !important;
}

/* Close button: hidden in portrait — chat is always-expanded in this layout
   (the dedicated grid cell is reserved for it), so an explicit close button
   would just leave an empty slot the user can't reopen. */
.use-portrait-layout #ChatContainer .chatsystemclose
{
	display: none !important;
}

/* Combined content (tabs + message list) fills the card above the input row.
   Tabs flow normally at the top; message area is anchored absolutely so its
   height is `100% − tab area − input row` regardless of mode. */
.use-portrait-layout #ChatContainer .chatsystemcombinedcontent
{
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	right: 0 !important; bottom: 26px !important;   /* room for chatsysteminput (26 = input row height) */
	width: auto !important;
	height: auto !important;
}

/* Tabs at the top of combinedcontent in normal block flow.
   IMPORTANT: keep desktop's content-box sizing — p2p tab uses height:19 +
   padding-top:8 + border-bottom:1 = 28 outer. Switching to border-box would
   collapse those 9px of chrome inside the 19, squashing the tab. */
.use-portrait-layout #ChatContainer .chatsystemtab,
.use-portrait-layout #ChatContainer .chatsystemp2ptab
{
	width: 100% !important;
	box-sizing: content-box !important;
}

/* Message frame area: absolute positioning so its height = combinedcontent − top.
   `top` differs per mode because p2p adds a second tab strip below the main one.
   It is NOT the scroll container — that's the listcontainer inside (next rule).
   This level just clips and provides the white background. */
.use-portrait-layout #ChatContainer .chatsystemcontent,
.use-portrait-layout #ChatContainer .chatsystemcontent.chatsystemmid,
.use-portrait-layout #ChatContainer .chatsystemcontent.chatsystemmax
{
	position: absolute !important;
	top: 30px !important;                /* main tab strip: padding 5 + li 24 ≈ 29, round 30 */
	left: 0 !important; right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: hidden !important;
	background: #fff;
}
.use-portrait-layout #ChatContainer .p2p .chatsystemcontent
{
	top: 58px !important;                /* main 30 + p2ptab 28 (19 + padding 8 + border 1) */
}

/* Message list = scroll viewport. Absolute-fill chatsystemcontent so its
   computed height is deterministic (Chat.updateSlider() reads
   `getStyle('height').toInt()` for ContentSlider.specificSize, which now
   returns the actual px value instead of "auto"). overflow:hidden because the
   in-game ContentSlider drives scrolling via scrollTo on this element.
   right:17 leaves room for the rail (.chatmessagesslider, see next rule). */
.use-portrait-layout #ChatContainer .chatmessageslistcontainer
{
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	right: 17px !important; bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	overflow: hidden !important;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}
.use-portrait-layout #ChatContainer .chatsystemspeaklist
{
	margin: 0 !important;
	padding: 0 !important;
}

/* In-game scrollbar rail pinned to the right edge of chatsystemcontent.
   Width 17 matches .contentSliderBackground in Slider.css. The desktop layout
   uses `floatRight` for this; absolute pinning gives it deterministic
   placement when the container is itself absolute-filled. */
.use-portrait-layout #ChatContainer .chatmessagesslider
{
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 17px !important;
	float: none !important;
	margin: 0 !important;
}

/* Input row: pinned to bottom, fills width. The flex-row layout (typeselector |
   inputbar | chatfixbg) is defined in chat.css and shared with desktop +
   landscape — here we only override fixed width 314 → fill the chat cell. */
.use-portrait-layout #ChatContainer .chatsysteminput
{
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important; right: 0 !important;
	top: auto !important;
	width: auto !important;
	height: 26px !important;
	box-sizing: border-box;
}

/* Type-selector dropdown popup: widen from desktop's 72 to fit player tags
   (the inline player-name input itself stays at the desktop 52 width — keep
   .chattypeselector at its native 75 here). */
.use-portrait-layout #ChatContainer .chattypeselectoroptions
{
	width: 130px !important;
}

/* Minimized-bar world-message strip: desktop hardcodes width 250 (built for the
   320-wide bar). In portrait the bar fills the cell ≥ 320, so let the message
   strip stretch to fill: left:35 (icon column) + right:10 padding, width auto. */
.use-portrait-layout #ChatContainer .chatworldmessages
{
	left: 35px !important;
	right: 10px !important;
	width: auto !important;
}

/* In-game floating buttons: same anchors as landscape, full HUD row lifted 15px
   (AddAlert stays 35px above MineProspect) */
.use-portrait-layout #QuestBoxContainer
{
	position: absolute !important;
	left: 10px !important;
	bottom: 25px !important;
	top: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
	width: auto !important;
}
.use-portrait-layout .worldMapMineProspectButtonContainer
{
	position: absolute !important;
	left: auto !important;
	right: 10px !important;
	top: auto !important;
	bottom: 25px !important;
	margin: 0 !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}
.use-portrait-layout .worldMapAddAlertButtoncontainer
{
	position: absolute !important;
	left: auto !important;
	right: 10px !important;
	top: auto !important;
	bottom: 60px !important;
	margin: 0 !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}
.use-portrait-layout .zoomToolAndAvatar
{
	bottom: 25px !important;
}

/* GuidesFrame / StatsFrame fit-to-viewport in portrait.

   Root cause of the wasted left gutter: a width mismatch between the 715-wide
   `.strategyGuideList` (and 717-wide `.strategyGuidesLeftSideContainer`) and the
   actual 483-wide `.strategyLeftSideContentToSlide` content panel. Desktop uses
   the 232px difference to display `strategyGuideBg.png` decoration. In portrait
   we collapse every wrapper down to 483 so the gap (and the bg) disappears.

   After trimming, inner content = .strategyGuidesContainer left:33 + menu 114 +
   leftSide 483 = 630, which fits the 682 viewport — no transform scale needed. */
/* GuidesFrame: widen the chrome to the full viewport, then let inner widths
   flex-fill so the central td is 100% and the leftSide content panel takes
   whatever's left after the menu column. Flex replaces the desktop float-pair
   that depended on hardcoded widths (852 / 717 / 715 / 483). */
.use-portrait-layout [id^="GuidesFrame"].largeFrame
{
	left: 0 !important;
	width: 100% !important;              /* was 628 — fill frameMainContainer */
}
.use-portrait-layout .strategyGuidesFrameContainer
{
	margin-left: 0 !important;
	width: 100% !important;              /* was 852 — fill the central td */
}
.use-portrait-layout .strategyGuidesContainer
{
	display: flex !important;
	flex-direction: row;
	width: 100% !important;
	left: 0 !important;                  /* desktop has left:33 */
}
/* Menu column = 114 is the natural width of the menu sprite baked into sg.png
   (declared by `.strategyGuidesMenuContainer { width: 114 }` in desktop CSS),
   not a magic number — keep it fixed so the sprite art doesn't tear. */
.use-portrait-layout .strategyGuidesMenuContainer
{
	flex: 0 0 114px !important;
	float: none !important;
}
.use-portrait-layout .strategyGuidesLeftSideContainer
{
	flex: 1 1 0 !important;
	width: auto !important;              /* was 717 — flex takes over */
	float: none !important;
	background-position: left top !important;       /* keep image at natural left */
	background-repeat: no-repeat !important;        /* don't tile horizontally */
	background-color: #efe3d5 !important;           /* parchment beige fills right */
}
.use-portrait-layout .strategyGuideList,
.use-portrait-layout .strategyLeftSideContentToSlide,
.use-portrait-layout .strategyLeftSideContentOverflow,
.use-portrait-layout .strategyGuidesContentData
{
	width: auto !important;              /* was 715 / 483 / 483 / 483 */
	max-width: 100% !important;
	box-sizing: border-box;
}
/* Solid parchment background behind the bordered content card + breathing-room
   padding so text isn't flush against the 1px border. */
.use-portrait-layout .strategyLeftSideContentToSlide
{
	background-color: #f8f1e9 !important;
	padding: 12px 16px !important;
	box-sizing: border-box;
}

/* Inline images (e.g. .stratGuideImgRight = `float: right; margin: 10px`) wrap
   text awkwardly in the narrow portrait column. Force them to a block flow with
   centered margin and width capped to the card so each image gets its own row. */
.use-portrait-layout .strategyGuidesContentData img,
.use-portrait-layout .strategyGuidesContentData .stratGuideImgRight,
.use-portrait-layout .strategyGuidesContentData .stratGuideImgCenter
{
	float: none !important;
	display: block !important;
	margin: 12px auto !important;        /* auto left/right → centered horizontally */
	max-width: 100% !important;
	height: auto !important;
}
.use-portrait-layout .strategyGuidesContentData
{
	text-align: left;
}
.use-portrait-layout .strategyGuidesContentData p
{
	clear: both;
	margin: 0 0 10px 0;
	line-height: 1.55;
}
.use-portrait-layout .strategyGuideList
{
	height: auto !important;
	margin-left: 0 !important;           /* defeat inline `Hoffset20` */
}
.use-portrait-layout .strategyLeftSideContentToSlide
{
	float: none !important;
	margin-right: 0 !important;          /* defeat inline `Hoffset40R` + own margin-right:33 */
}

/* StatsFrame: same flex strategy as GuidesFrame above. Drop the desktop's
   `.largeFrame { width: 628 }` + `.statsContainer { width: 861 }` overflow trick
   (which we'd been masking with `transform: scale(0.80)`) — instead let the
   chrome fill 100% of frameMainContainer and flex-fill the inner panel. */
.use-portrait-layout [id^="StatsFrame"].largeFrame
{
	left: 0 !important;
	width: 100% !important;              /* was 628 */
}
.use-portrait-layout .statsContainer
{
	width: 100% !important;              /* was 861 — fill the central td */
	display: flex !important;
	flex-direction: row;
	margin: 0 !important;
}
/* statsMenuContainer is a `<ul>` with `Hoffset20` margin-left and width 114 set
   in desktop CSS. Lock to 114 so the menu's parchment sprites don't stretch. */
.use-portrait-layout .statsMenuContainer
{
	flex: 0 0 114px !important;
	float: none !important;
	margin-left: 0 !important;           /* defeat inline `Hoffset20` */
}
.use-portrait-layout #PeriodsContainer.statsBg
{
	flex: 1 1 0 !important;
	width: auto !important;              /* was 717 — flex takes over */
	float: none !important;
	background-image: none !important;   /* statsBg.png was sized for 717; drop it */
	background-color: #f8f1e9 !important;
}
/* #statsGraphContainer holds 3 inline `.statImageContainer` graphs. In portrait
   we want 2 per row, left-aligned (so a lone 3rd graph on row 2 sits at the left
   edge — matching desktop's left-to-right flow). Use flex-wrap on a definitely-
   sized container so the % widths actually resolve. */
/* Use CSS Grid so the browser handles the "split into 2 equal columns minus
   gap" arithmetic in a single pass — `fr` units express "share of leftover
   space" semantically and keep retina sub-pixel rounding correct. Avoid
   `calc(% − px)` here: that mixes our hand-arithmetic with the browser's
   gap math, producing hair-line gaps or wrap-to-1-per-row on 2x/3x DPRs. */
.use-portrait-layout #statsGraphContainer
{
	right: 10px !important;
	width: auto !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	justify-items: stretch;
}
.use-portrait-layout #statsGraphContainer .statImageContainer
{
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.use-portrait-layout #statsGraphContainer .statImageContainer img
{
	display: block;
	max-width: 100% !important;
	height: auto !important;
}

/* Drag handle (.resourcesSummaryMove) is now hidden globally in
   RessourceStack.css since the resource summary frame is non-draggable
   across all layouts. No mobile-specific override needed here. */

/* QuestScriptFrame: recenter inside the 682-wide main game region */
.use-portrait-layout .questScriptFrameCentered,
.use-portrait-layout .questScriptFrameCenteredSepTitle
{
	left: 87px !important;    /* (682 - 508) / 2 */
	top: 61px !important;     /* (582 - 460) / 2 */
}
.use-portrait-layout .questScriptFrameCenteredFirst
{
	left: 100px !important;   /* (682 - 482) / 2 */
	top: 105px !important;
}
.use-portrait-layout .questScriptFrameRight
{
	left: 252px !important;   /* 682 - 408 - 22 */
	top: 276px !important;
}
.use-portrait-layout .questScriptFrameSmallRight
{
	left: 335px !important;   /* 682 - 325 - 22 */
	top: 278px !important;
}

/* CheatsFrame on portrait only: fill the 682-wide #FrameMainContainer.
   Mobile-landscape (.use-mobile-layout) intentionally has no override —
   strategyGuide doesn't override there either, so the desktop 852×567
   layout naturally extends across leftContainer + city sidebar, which
   matches strategyGuide's landscape behavior. */
.use-portrait-layout .cheatsFrameContainer
{
	margin-left: 0 !important;
	width: 100% !important;
	top: 0 !important;
}

/* ============================================================
   Mobile fullscreen chat input overlay.

   The in-game chat input is read-only on mobile; tapping it opens
   this overlay. The card is pinned to the top of the soft keyboard
   via --chat-overlay-kb (computed in Chat.js from visualViewport)
   so the input sits flush against the IME / keyboard top — no gap,
   no "mystery strip" between the field and the keyboard. The dim
   layer behind it covers the game so iOS's keyboard transitions
   never feed back into the main-grid visualViewport listener.

   Bound by JS in Chat.js → setupFullscreenChatInput.
   ============================================================ */
.chat-fullscreen-overlay
{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100000;
}
.chat-fullscreen-overlay.hidden { display: none !important; }

.chat-fullscreen-card
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--chat-overlay-kb, 0px);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 6px;
	/* Zero padding-bottom so the textarea's bottom edge butts directly
	   against iOS's input accessory bar — eliminating the extra strip
	   of card-coloured space that previously sat between the input and
	   the system bar. */
	padding: 6px 8px 0;
	background: #fff2e5;
	border-top: 2px solid #613a26;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	z-index: 100001;
}

/* Recipient label shown to the left of the textarea, e.g. <玩家名>. */
.chat-fullscreen-prefix
{
	flex: 0 0 auto;
	align-self: center;
	max-width: 30%;
	padding: 0 4px 0 4px;
	color: #613a26;
	font-weight: bold;
	font-size: 14px;
	line-height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chat-fullscreen-prefix.hidden { display: none !important; }

/* font-size:16px is required to stop iOS Safari auto-zooming on focus. */
.chat-fullscreen-input
{
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	max-height: 120px;
	padding: 8px 10px;
	border: 1px solid #b8a08f;
	border-radius: 6px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.3;
	resize: none;
	box-sizing: border-box;
	background: #fff;
	color: #3e2419;
	outline: none;
}
.chat-fullscreen-input:focus { border-color: #613a26; }

.chat-fullscreen-send
{
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: 6px;
	background: #613a26;
	color: #fff2e5;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.chat-fullscreen-send:active { background: #4d2d1d; }

/* Landscape: align the card to "main game (682) + right column (321)" =
   1003px, the same horizontal band #Container centers (1123 wide, with
   60px of left-column menu the user isn't typing into). 50% − 501.5
   reaches the main game's left edge regardless of the dynamic viewport
   width set by adjustViewport. Round the top corners since the card no
   longer spans edge-to-edge. */
html.use-mobile-layout .chat-fullscreen-card
{
	left: calc(50% - 501.5px);
	right: calc(50% - 501.5px);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}