body {
	overflow-x: hidden;
}

/* The breakpoint swatch's GEOMETRY lives here, not only in debugLayout.php.
   That file's <style> ships inside the page HTML, so a stale copy of it can be
   served while this stylesheet - linked with ?r=time() - is already fresh, and
   the page then gets the new rules with the old swatch. That is exactly how a
   20x20 in-flow swatch survived the fix and kept an empty row above the menu
   bar. Prefixed with body so it also outranks that inline block, which appears
   later in the document. Colour is still set per breakpoint further down. */
body .debugLayout {
	width: 5px;
	height: 5px;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}

.haschatvote{
        background-color: #dfe6b5;
        border-radius: 4px;
        border: 1px solid #cbd494;
        padding: 2px;
        margin: 3px;
}

#div_regentimer {
	font-size: 32px;
	margin-left: 6px;
}

#bar {
	display:inline-block;
}

/*temp till i find a place for any res */
#statsBarWinertia {
	display:none;
}

#debugpanel_flashdebug a {
	font-size: 10px;
	border-radius: 6px;
	padding: 2px;
	color: #ffffff;
	background-color: #b81f1f;
	margin: 3px;
}
#debugpanel_flashdebug a:hover {
	background-color: #c43429;
}
#panel_debugpanel_flashdebug {
	background-color: #d1beae;
	margin: 5px;
	bottom: 56px;
	height: 20px;
	left: 40px;
	position: fixed;
	z-index: 1000;
}
.toggle_debugpanel_flashdebug{
	cursor: pointer;
	font-size: 10px;
	background-color: #c76f3c;
	margin: 1px;
}

#pushalert-ticker {
	background-color: rgb(224, 147, 31);
    left: auto !important;
	bottom: auto;
    right: 270px !important;
    top: 20px !important;
    position: absolute !important;
    zoom: 40% !important;
	z-index: 0 !important;
}

#pageContentArea_borderleft {
	background: url(//magicduel.com/templates/layout-/img/border_left.png) repeat-y left top;
    height: 100%;
    width: 100px;
	position: fixed;
}

#pageContentArea_borderright {
	background: url(//magicduel.com/templates/layout-/img/border_right.png) repeat-y right top;
    height: 100%;
    width: 100px;
    margin-left: 100%;
    padding-left: 100px;
    position: fixed;
    z-index: -222;
}

#pageContentArea_borderbottom {
	background: url(//magicduel.com/templates/layout-/img/border_bottom.png) repeat-x center bottom, url(//magicduel.com/templates/layout-/img/bgpag.jpg) repeat-x center bottom 46px;
    width: 100%;
    height: 100%;
	xxbackground-color: tomato;
	float:left;
	position: absolute;
	margin-top:-8px;
	z-index: -400;
}
#pageContentArea_leftcorner {
	background: url(//magicduel.com/templates/layout-/img/border_leftcorner.png) no-repeat left bottom;
    width: 100%;
    height: 100%;
	xxbackground-color: tomato;
	float:left;
	margin-left: -55px;
	margin-top: -3px;
	position: absolute;
	z-index: -400;
}
#pageContentArea_rightcorner {
	background: url(//magicduel.com/templates/layout-/img/border_rightcorner.png) no-repeat right bottom;
    width: calc(100% + 42px);
    height: 100%;
	xxbackground-color: tomato;
	float:right;
	margin-top: -3px;
	position: absolute;
	z-index: -400;
}


#pageContentArea_bordertop {
    background: url(//magicduel.com/templates/layout-/img/border_top.png) repeat-x center top;
    width: 100%;
    /* min-width: 500px; */
    height: 100px;
    /* background-color: yellow; */
    /* float: left; */
    margin-top: -55px;
    position: fixed;
}

#pageContentArea_content {
	float:left;
	xxposition: fixed;
    width: 100%;
    padding-left: 55px;
    padding-top: 55px;
}

#pageContentArea_bottomspacer {
	height: 1280px;
	z-index: -400;
}
#pagecontent {
	box-shadow: none !important;
}
#pageContentArea {
	min-height: 1200px;
}


/* -------------------- */

#questmakerEditSceneButton{
	
	position: fixed;
    top: 65px;
    left: 180px;
    font-size: 12px;
    background-color: #822020;
    line-height: 1;
    height: 20px;
    width: 90px;
    padding: 3px;
    margin: 0px;
    text-align: center;
    border-radius: 5px;
    color: white;
    z-index: 320;
	
}

#questmakerEditSceneButton a{
	color: white;
}


.bg-lemn {
	height: 100%;
    background-image: none;
	background: url("//magicduel.com/templates/layout-/img/pagebg.jpg") no-repeat center center fixed;
	xxbackground-size: cover !important;									
	background-repeat: repeat;
	background-position: left top;	
}

#popupFrame {
	background-color: transparent;
	border-radius: 0px;
	border: none;
	margin: 0px;
	padding: 0px;

	width: 100%;
    height: 100%;

}

/*
#popupMainPage {

    width: 625px;
    margin-left: 0px;
    height: 521px;
	
}
*/
#popupMainPage {
	width: 100%;
	margin: 0px;
	padding: 10px;
	height: 100%;
	position: relative;
	left:0px;
	top:0px;
}	
		
		#barAreaContent{		
										position: fixed; 	
										top: 240px; 
										right: -4px;
										background-color: rgba(235, 233, 221,0.7);
										-webkit-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										-moz-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										border-radius:8px;		
										z-index: 2100;
										
		}
		#moodPanelContent { height: 93%; overflow-x: hidden; /* overflow-y: auto; */ overflow-y: hidden; }
		#bugreportInterface{	margin: auto; width: 50%;	 bottom:40px; position: fixed;		z-index:650;	}

		#globalNotifications{	margin: auto; width: 50%;			z-index:700;				}


		

		

		#menuGeneral {			position: fixed; top: 8px; 
										left: 15%;
										width: 50%
										max-width: 500px;
										margin: auto;	 z-index:950;	}
		

		#popupMask {
			height: 100%;
			top: 50%;	
			transform: translate(-50%, -50%); 
		}

		#pagecontent { 			
								width: calc(100% + 7px);

										overflow:auto; 
										height: 100%;
										margin: auto;
										xxbackground:transparent;
										margin: 0;
										position: absolute;
										background-image: url(//magicduel.com/templates/layout-/img/bgpag.jpg);
										background-repeat: repeat;
										background-position: left top;	
										-webkit-box-shadow: 0px 0px 23px 24px 0px 0px 23px 24px rgba(237, 235, 223),1;
										-moz-box-shadow: 0px 0px 23px 24px rgba(237, 235, 223,1);
										box-shadow: 0px 0px 23px 24px rgb(237, 235, 223);
										z-index:100;
										
										
		}
		

				
		
		#todaysProgress{		position: fixed; 	top: 200px; right: -35px;	z-index:2300;  width: 78px;		}
		#townCrier{				position: absolute; 	top: 0px; right: 300px;			z-index:400;					}
		#triggersBox{				position: fixed;  
										xxwidth:280px;	
										top: -2px; 
										right: -4px;  
										//background-color: rgba(226, 200, 146, 0.8);	
										background-color: rgba(218, 209, 187, 0.85);	
										-webkit-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										-moz-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										z-index:1100;	
										border-radius:8px;
						}			
		#interfaceFooter{		height: 30px;
										position: fixed;
										bottom: 60px;
										left: 30%;
										width: 50%;
										margin: auto;
										text-align: center;
										opacity: 1;
										color: #c3beac;
										font-size: 10px;
										z-index: 50;									
								}
		#interfaceFooter a { color: #c3beac; }						
		#echipAvatar{			position: absolute; 	top: 30px; right: 80px;	 border: 1px solid #ff0000; background-color: green; z-index:380; }
		
		
		



/* ---------------------------- */

#popupMask {
	z-index: 8400;
}
#popupContainer {
	z-index: 9800;
}

.passed_container{
	float:left;
	width: 40px;
	margin: 4px;
	xxcursor: pointer;
}
.passed_container img{
	
}

#passed_holder{
	height: 320px !important;
	margin-left: -20px;
	width: 100vw;
	max-width: 750px;
    padding: 20px;
}

#sb_slide_content { 
	padding: 2px;
	height: 40px; /* 320 */
	width:760px; 
	left: 10px;
	xxbackground-color: rgba(66, 56, 26, 0.9);
}

#sb_slide_button {
	width: 800px;
	height: 38px;
	margin-left: -20px;
	cursor:pointer;
	background-image: url(//magicduel.com/templates/layout-/img/barAreaEdge.png);
	background-repeat: no-repeat;
	background-position:bottom center;
	text-align: center;
	
		font-family: 'Caveat', cursive;
	/* font-family: 'Caveat', cursive; */
	font-size:13px;	padding: 5px;
	line-height: 0.95;
	padding-top: 11px;
	
}
#barAreaButtons {
	background-image: url(//magicduel.com/templates/layout-/img/menubar-bg.png);
	background-repeat: repeat-y;
	background-position:top center;
	left: -20px;
    position: relative;
	width:800px;
	padding-left: 20px;
}
#menuinfo_currentlocation {
	text-shadow: 0px 0px 12px #FFAC2E;
	font-weight: bold;
	display: inline-block;
	width: 310px;
}
#menuinfo_leftside {
	display: inline-block;
}
#menuinfo_rightside {
	display: inline-block;
}

#barExpander{
	background-image: url(//magicduel.com/templates/layout-/img/sidebar-moodpanel.png);
	background-repeat: no-repeat;
	background-position:top left;
	width:28px;
	height:280px;
	margin-left: -17px;
	float:left;
	z-index: 3200;
	cursor: pointer;		
}

#barExpanderTriggers{
	background-image: url(//magicduel.com/templates/layout-/img/sidebar-triggers.png);
	background-repeat: no-repeat;
	background-position:bottom left;
	width:28px;
	height:232px;
	float:left;
	margin-left:-17px;
	z-index: 2200;
	position: absolute;	
}


#sceneBeginnerTips{
	max-width: 500px;
}

#serverTime {
	font-family: 'Jost', sans-serif;
    font-size: 12px;
}


/* ------------------------------------------------------------ */


/********************** HEIGHT RESPONSIVE ********************/

@media  (max-height: 520px) {
			#popupContainer {
				top: 1px !important;
				xxzoom: 60%;
			}

}


/********************* WIDTH RESPONSIVENESS ***********************/



/* This page is the full window, sizes on pagecontent are defined in ifrm.styles.css */

/********* ultra low screens with limited functionality ********/
@media  (max-width: 640px) {
			/* The breakpoint colour swatch, for Mur only (layout.php shows it on
			   $_SESSION['debug'] or rightclick). It is 5x5 and position:fixed now, so it
			   costs no layout space and can stay visible at every width - it was briefly
			   display:none here while it was still a 20x20 block sitting in the flow. */
			.debugLayout{ 	background-color: red; }
			body {
				background: #524e40 !important;
				background-color: #524e40;
			}
			#pagecontent {
				/* was 20px, the room the top strip needed. The strip is gone on mobile
				   (see barAreaMobile.php), so the page starts at the top of the screen. */
				margin-top: 0px;
			}
			#pageContentArea{
				width: 100%;
				margin-left: 0px;   
				margin-top: 0px;
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
			}
			#menuGeneral {
				position: relative; 
				/* was 20px: the bar painted itself one strip down to leave room for the
				   playername / Dev-News / active-days row above it. That row now lives in the
				   mobile panel (barAreaMobile.php), so the menu bar starts at the top of the
				   screen and everything that tracks it came up by the same 20px. */
				top: 0px; 
				left: 0;
				width: 100%;
				max-width: 640px;
				margin: auto;	
				z-index:950;	
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
			}
			#menu-bar {
				display: block !important;
				background: #cab996 !important;
				border: 0px !important;
				border-bottom: 1px solid #181817 !important;
				border-radius: 0px !important;
				-webkit-border-radius: 0px !important;
				height: auto !important;
				padding: 0px !important;
				padding-left: 3px !important;
				padding-top: 5px !important;
				font-size: 10px !important;
				width: 93% !important;
				line-height: 1.2 !important;
				
			}
			#menu-bar li {
				padding: 0px 1px 0px 1px !important;
			}
			#menu-bar a {
				padding: 0px 2px 0px 0px !important;
				font-size: 11px !important;
				margin-bottom: 1px !important;
			}
			#menuGame {
				position: fixed;
				float: left;
				margin-top: 84px;
				margin-left: -90px;
				z-index: 900;
				zoom: 110%;
			}

			#div_leftmenu {
				left: -80px;
			}
			#div_leftmenu a {
				border: 1px solid #2e1c07;
				padding-left: 10px;
			}

			#godsOnline {
				position: fixed;
				top: 280px;
				left: -17px;
				z-index: 400;
				zoom: 80%;
			}	
			#gplo {
				background-color: inherit !important;
				box-shadow: none !important;
				-webkit-box-shadow: none !important;
			}
			#questmakerEditSceneButton {
				left: -15px;
				top: 45px
			}
			#townCrier {
				position: relative;
				/* 20 less than it was, exactly like the bar above it, so the gap under the
				   PAINTED menu bar stays the 4px it always was. */
				top: 4px;
				/* left: 76px; */
				z-index: 400;
				width: 100%;
				background-color: #eeece0;
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}
			#creditsTotal { display:none; 	}	
			#erolinDevice { 
				position: fixed;
				top: 70%;
				left: 15px;
				z-index: 800;
				zoom: 100%;
			}
			#erolinDevice_orbs { 
				z-index: 210;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
				z-index: 300px;
				bottom: 25px;
				left: 5px;
				position: fixed;
			}
			.erolin_slot {
				z-index: 200  !important;
				position: fixed !important;
				margin-left: -5px  !important;
				left: 5px !important;
			}
			.erolin_slot_off {
				margin-left: -22px  !important;
				opacity: 0.5 !important;
			}
			.erolin_slot_on {
				box-shadow: none !important;
				-webkit-box-shadow: none !important;
				margin-left: -5px !important;
				opacity: 1 !important;
			}
			/* The timer sits immediately under the menu bar, at the left, and it TRACKS the
			   bar instead of naming a y of its own. It follows #menuGeneral in the source, so
			   in flow it starts exactly where the bar's flow box ends. The bar used to paint
			   20px lower to clear the top strip, so this was 26px; the strip is gone on mobile
			   and the bar paints at its flow position, so 6px leaves the same gap under the
			   painted bar. That holds no matter what happens above it - a menu bar that wraps
			   to two lines on a narrow screen, or a stale debug swatch still taking a 20px row
			   (verified both: gap stays 6px, and the bar can no longer clip the digits).
			   height:0 keeps it out of the vertical flow so it does not push the scene down,
			   and the two children stop floating for the same reason - escaping floats were
			   adding 26px above #pageContentArea. text-align goes to left because inline-block
			   children obey it where floats did not. */
			#nextRegentime {
				position: relative;
				height: 0;
				left: 10px;
				top: 6px;
				font-size: 1em;
				color: #514d40;
				width: 170px;
				text-align: left;
				text-shadow: 1px 1px #444;
				z-index: 500;
				/* Mostly empty box lying over the top of the scene iframe, so let taps through. */
				pointer-events: none;
			}
			#nextRegentime > div {
				float: none;
				display: inline-block;
				vertical-align: top;
			}
			/* Half size on a phone, 2026-09-14. The clock is NOT drawn at the parent's
			   font-size - #div_regentimer carries its own 32px from the unscoped rule at the
			   top of this file, which is why halving #nextRegentime alone changed nothing
			   visible. This overrides that rule for the narrow layout only; desktop keeps 32px.
			   Measured: the digits went from 78x48 to 39x24. .tipNextRegen is deliberately NOT
			   halved - it is already 10px and is the only part of this widget you can tap. */
			#div_regentimer {
				font-size: 16px;
				margin-left: 3px;
			}
			#nextRegentime .tipNextRegen {
				pointer-events: auto;   /* the [?] link takes its own clicks back */
			}
			/* The scene's usable tools. Desktop parks them in a fixed column on the LEFT
			   (left:200px, 100px wide); on a phone that space belongs to the scene, so
			   they move to the RIGHT, where the lower right sidebar used to sit, one per
			   row above the bottom bar.

			   The .avltool styling below is NOT a duplicate of the desktop rules by
			   choice - those live only in the >=1025px blocks, so on a phone this element
			   had no styling at all beyond display:none. These are the phone's own.

			   Scrolling is the touch drag itself: overflow-y with the scrollbar removed in
			   all three engines, so more tools than fit are reached by dragging the column
			   up and down with nothing drawn over them. overscroll-behavior keeps that drag
			   from turning into a page scroll once the end is reached. */
			#availableTools {
				display: block;
				position: fixed;
				right: 2px;
				/* Anchored at the TOP, growing down, so the list starts high and stays put
				   however many tools a scene offers - bottom-anchored it crept up and down
				   with the count. 280px is just under two things: the old sidebar, which
				   declared top:240px (#barAreaContent), and #todaysProgress, which occupies
				   y 200..275 on the same edge. */
				top: 280px;
				bottom: auto;
				left: auto;
				width: 70px;
				max-width: 70px;
				/* 280 above + 50 to clear the 34px bottom bar */
				max-height: calc(100vh - 330px);
				height: auto;
				z-index: 2100;
				overflow-y: auto;
				overflow-x: hidden;
				overscroll-behavior: contain;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;        /* Firefox */
				-ms-overflow-style: none;     /* old Edge */
				text-decoration: none;
				font-size: 11px;
			}
			#availableTools::-webkit-scrollbar { width: 0; height: 0; display: none; }
			/* nothing to show is not a reason to reserve a column */
			#availableTools:empty { display: none; }

			#availableTools .disabled { opacity: 0.3; }
			#availableTools .avltool { text-align: center; }
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
				text-decoration: none;
				margin: 8px auto !important;   /* the entries carry margin:10px inline */
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				width: 46px;
			}
			/* A tool with no icon falls back to its NAME, and a name like "Muratus's Herb
			   Basket" was wrapping to three 13px lines in a 46px chip. Smaller and tighter
			   so two lines do it, and long words break rather than push the chip wider. */
			#availableTools .avltool a {
				font-size: 10px;
				line-height: 1.15;
				overflow-wrap: anywhere;
				word-break: break-word;
			}
			#availableTools .avltool a:active { background-color: #f0bb28; }
			#availableTools .avltool img { margin: auto; display: block; width: 40px; height: 40px; }
			#availableTools .avltool .streakbar_hold {
				height: 7px;
				background-color: #a68b5c;
				width: 46px;
				border-radius: 8px;
				margin: 0 auto;
			}
			#availableTools .avltool .streakbar { height: 7px; background-color: #edaf1c; border-radius: 8px; }
			#availableTools .avltool .streaktotal {
				font-size: 9px;
				color: #635e52;
				margin-top: -9px;
				text-align: center;
				width: 100%;
			}
			#wishpointAchievements { display:none; }
			#playerStats { display:none;	}
			#serverTime{	display: none; }
			#statusBarPlayername { 
				position: absolute;
				z-index: 2000;
				top: 2px;
				font-weight: bold;
				margin-left: 80px;
				text-align: left;
				color: #cab996;
				font-size: 11px;
			}
			#statusBarPlayername br {
				display: none;
			}

			#announcementsAlert {
				position: absolute;
				top: 0px;
				right: 65px;
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			
			#activityBar{	position: fixed; top:1px; left: 1px;	z-index:960;	}
			#notificationsNewAccount { 
				 position: relative;
				 top: 28px;
				 xleft: 280px;
				 margin:auto;
				  margin-bottom: 22px;				 
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 80%;
				 xheight: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {	
					position: fixed; 
					xmargin-left: -320px;	
					bottom:0px; 
					xleft: 50%; 
					z-index:2200;
					left: 0px;
					right: 0px;
					width: 100%;
			}			
			#pageContentArea_borderright { display: none; }
			#pageContentArea_borderbottom { display: none; }
			#pageContentArea_leftcorner { display: none; }
			#pageContentArea_rightcorner { display: none; }
			#pageContentArea_bordertop { display: none; }
			#pageContentArea_borderleft { display: none; }	
			#pageContentArea_content {
				padding-left: 0px;
				padding-top: 0px;
			}
			#sb_slide_content {
				padding: 0px;
				left: 0px;
				width: 100%;
				height: auto;
				box-sizing: border-box;
			}
			#sb_slide_button {
				color: #e9e7db;
				width: 100%;
				height: 18px;
				margin-left: 0px;
				padding: 0px;
				background-image: none;
				background-color: #2e1d07;
				padding-top: 2px;
			}
			.barAreaIconLink img {
				padding: 3px;
				float: none;
				display: block;
			}
			#barAreaButtons {
				background-image: none;
				background-color: #e8ba59;
				width: 100%;
				left: 0px;
				padding-left: 0px;
				box-sizing: border-box;
			}
			#menuButtons {
				width: 100%;
			}
			#menuButtons .bartext {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				gap: 4px;
				padding: 4px 6px;
			}
			#menuButtons .barAreaIconLink {
				display: inline-flex;
			}
			#liveHelp {
				position: fixed; 
				right: -2px;
				bottom:105px;
				z-index:2200;
				writing-mode: tb-rl;
			}	
			#liveHelp .livehelpbtn {
				padding:6px;
				font-family: 'Jost', sans-serif;
				font-size: 11px;
				letter-spacing: 2px;
			}
			/*.generalmenu-calendar { display: none; }*/	
			.generalmenu-adventurelog { display: none; }
			.generalmenu-restrictions { display: none; }	
			.generalmenu-intro { display: none; }				
			
						#bountyButton {
				position: fixed;
				top: 108px; left: 24px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
		
	
			
}
/* placed after to overwrite */
@media  (max-width: 500px) {
			.debugLayout{ 	background-color: pink; }
	
						#bountyButton {
				position: fixed;
				left: inherit; top: inherit; bottom: 60px; right: 20px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 55%;	
			}	
				
}

@media  (min-width: 641px) and (max-width: 1024px) {
			.debugLayout{ background-color: orange; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 500px; /*500*/
				max-width: 690px; /*510*/
				margin-left: 20px;
				left: 45%; 
			}
			#menuGame {
				position: fixed;
				float: left;
				margin-top: 120px;
				margin-left: 20px;
				z-index: 900;
				zoom: 90%;
			}
			#godsOnline {
				position: fixed;
				top: 150px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal { display:none; 	}		
			#erolinDevice {
				position: fixed;
				top: 70%;
				left: 5px;
				z-index: 800;
				zoom: 100%;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
				left: 20px;
				position: fixed;
			}		
			#availableTools {
				display: none;
			}	
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#wishpointAchievements { 
			    position: fixed;
				bottom: 35px;
				left: -11px;
				z-index: 10;
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
				display:none;
			}
			#serverTime{	position: fixed; top: 270px; left: 5px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				text-align: center;
				color: #dedbcf;
				z-index: 320;
			}
			#announcementsAlert {
				position: absolute;
				top:9px;
				right: 65px;
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}			
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 80px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 80%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {	
					position: fixed; 
					margin-left: -380px;	
					bottom:0px; 
					left: 50%; 
					z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}	

			.generalmenu-adventurelog { display: none; }
			.generalmenu-restrictions { display: none; }	
			.generalmenu-intro { display: none; }	
			.generalmenu-art { display: none; }
			
						#bountyButton {
				position: fixed;
				top: 215px; right: -10px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}			
			
}

@media  (min-width: 1025px) and (max-width: 1152px) {
			.debugLayout{ background-color: yellow; }
			/*#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 780px; 
				max-width: 780px;
				margin-left: 2px;
				left: 50%; 
			}*/
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 75%;
				min-width: 921px;
				max-width: 1050px;				
				margin-left: 2px;
				left: 51%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 210px;
				left: -17px;
				z-index: 400;
			}			
			#creditsTotal { display:none; 	}		
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}			
			#announcementsAlert {
				position: absolute;
				top:9px;
				right: 65px;
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}		
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}				
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}
			.generalmenu-adventurelog { display: none; }

						#bountyButton {
				position: fixed;
				bottom: 70px; right: 45px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
			
}

@media (min-width: 1153px) and (max-width: 1280px){ /*   */
/************* Includes resolutions: 1280 ***************/	
			.debugLayout{ background-color: green; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 781px;
				max-width: 930px;
				margin-left: 2px;
				left: 50%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 210px;
				left: -17px;
				z-index: 400;
			}			
			#creditsTotal { display:none; 	}	
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
   				width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10;
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}	

			#announcementsAlert {
				position: absolute;

				top: 9px;
				left: 100%;
				margin-left: -180px;
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}		
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}		

			
						#bountyButton {
				position: fixed;
				top: 156px; left: 62px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
}	


@media  (min-width: 1281px) and (max-width: 1440px) {
			.debugLayout{ background-color:cyan; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 70%;
				min-width: 921px;
				max-width: 1050px;				
				margin-left: 2px;
				left: 51%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 80px;
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				width: 160px;
			}
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 20px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}		
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }	
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%;
				margin-left: -330px;
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}				
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}			
			
						#bountyButton {
				position: fixed;
				bottom: 60px; left: 54.5%;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
}

@media  (min-width: 1441px) and (max-width: 1599px) {
			.debugLayout{ background-color: blue; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 80%;
				min-width:920px;
				max-width:1050px;
				margin-left: -10px;
				left: 54%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 360px;
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				width: 160px;
			}	
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}						
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%;
				margin-left: -560px;
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}				
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}	
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}
			.generalmenu-intro { display: none; }		

						#bountyButton {
				position: fixed;
				position: absolute; top: -7px; right: 592px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
}	


		 
@media (min-width: 1600px) {
			.debugLayout{ background-color: gray; }
			#panel_debugpanel_flashdebug {
				left: 40px;
				bottom: 110px;
			}
			#barExpanderTriggers {
				display: none;
			}
			#todaysProgress {
				right: 171.5px;
				top: 235px;
			}
			#barbox { 
				padding: 20px;
				width: 100%;
			}
			#triggersBox {
				right: 20px;
				width: 380px;
				top: 28px;
			}
			#barExpander {
				display: none;
			}
			#bar {
				padding: 20px;
				width: 100%;
			}
			#barAreaContent {
				right: 20px;
				width: 380px;
				top: 294px;
			}
			#barArea {
				position: fixed; 
				margin-left: -332px;	
				bottom:0px; 
				left: 41%; 
				z-index:2200;  
			}			
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width:920px;
				max-width:1050px;
				margin-left: 10px;
				left: 41%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
				zoom: 120%;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 410px;
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				width: 160px;
			}
			#erolinDevice{				
				position: fixed; 
				bottom:350px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}						
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				z-index: 0;
				text-shadow: 1px 1px #444;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
   				text-align: center;
   				width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}		
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }	
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -15px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}	

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%; 
				margin-left: -640px;
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}		
			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	

			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}	
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}	

						#bountyButton {
				position: fixed;
				top: 186px; left: 78px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}			
}


/* =========================================================================
   GAME MENU STACKING - every width, not just the phone.
   The radial menu must draw ABOVE the header strip (#menuGeneral z 950,
   #menu-bar z 999), or the topmost entry of the spread is hidden behind it.
   Each of the seven breakpoint blocks above sets z-index: 900; this single
   line outranks them all by order, so the value lives in ONE place instead of
   seven. If a breakpoint ever genuinely needs different stacking, set it there
   and delete this - but then it has to be set in all of them again.
   The seal itself sits well below the header and never reaches it, so the only
   thing this raises is the open menu.
   ========================================================================= */
#menuGame { z-index: 1000; }

/* Shut state, every width. The menu opens on :hover; clicking an entry closes it, which
   on a phone matters because a tap IS hover and sticks, and on desktop simply gets the
   menu out of the way of the page you just asked for. menuGame.php adds the class and
   clears it on mouseleave (desktop) or a fresh touch of the seal (phone). */
#menuGame.mdm-shut .icon .menu {
	transform: scale(0) !important;
	transition-delay: 0s !important;
}
#menuGame.mdm-shut .icon .menu .spread {
	opacity: 0 !important;
	transition-delay: 0s !important;
}