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; }
		/* The sidebar iframe may never be taller than the box that clips it. Below 1600px
		   footerscripts.js.php sizes #bar to #barAreaContent - 10px while this box is 93% of it,
		   so the bottom 12-35px of every bar page (the item panel's Use button with them) sat
		   hidden under #barAreaContent_btmlinks, in every browser. At 1600px and up nothing changes. */
		#moodPanelContent > #bar { max-height: 100%; }
		#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;
}

#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;
}
/* The side readouts (Actions, Heat) stand on the TRANSPARENT part of barAreaEdge.png - only the
   centre title has the drawn parchment tab behind it - so they were body ink on whatever scrolled
   under the fixed bar (2.1-2.7:1 over the bark, in Chrome and Firefox; bug report 4859). A tight
   parchment-light halo behind each glyph lifts the ink off the bark: stacked small blurs make it
   strong without spreading. No box, so nothing shows while they are empty. */
#menuinfo_leftside,
#menuinfo_rightside {
	display: inline-block;
	text-shadow: 0 0 1px #fffaf0, 0 0 2px #fffaf0, 0 0 3px #fff3d6, 0 0 4px #fff3d6, 0 0 6px rgba(255, 236, 190, 0.85);
}

#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;
				/* The desktop floor (min-height 1200, the 1280px spacer, the fireworks #root under
				   everything) made a short page scroll far past its end on a phone: QDoc 290px on a
				   1562px game, 1231px of empty background, and a player coming back from a
				   scrolled-down long page landed IN it (bug report 5292, measured 2026-10-05 at
				   360px). One screen of parchment is the floor here; the page itself sets the rest. */
				min-height: 100vh;
			}
			#pageContentArea_bottomspacer { height: 0; }
			/* templates/effects/bigparty_effect.php: the fireworks canvas sits in the flow BELOW the
			   page, so on a phone it only ever showed in that empty band. */
			#root { height: 0; overflow: hidden; }
			#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;
			}
			
						#bountyButton {
				position: fixed;
				top: 215px; right: -10px;				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; bottom: inherit; top: 216px; right: -9px;				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;
			}	

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

/* 951-1024: the Triggers panel stays open here and covered the Dev | News strip (thread 5003);
   below 951 the panel shuts itself, so the strip keeps its place */
@media (min-width: 951px) and (max-width: 1024px) {
			#announcementsAlert { right: 380px; }
}

@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: 380px; /* clear of the Triggers panel (thread 5003) */
				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: 29px; left: 175px;				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: -500px; /* clear of the Triggers panel and the bounty slot (thread 5003) */
				
				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: 1px; right: 110px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;
			}

}

/* A PINNED right panel from 1025px to 1280px (html.md-panels-pinned, set in pageContentArea.php).
   The two bands above give #pageContentArea 921px or more, centred, and the open panels then
   covered its right 260px: the scene, the talk button and the chat. Here it is anchored left of
   the panels instead. The panels start 327px in from the right edge; the iframe ends 62px right of
   this box (55px left border + 7px), so right: 397px leaves 8px. width 100% - 492px keeps the
   iframe 150px clear of the left column (clock, server time). !important on the three widths
   because restoreCentralWindow() writes the "- - +" choice inline, and here the fit must win.
   The iframe stays out of the frame bands that do not fit (ifrm.style.css.php): up to 1139px it
   is at most 550px, where the scene shrinks to fit; from 1140px it is 640 to 697px, where the
   scene is 624px wide. 571-639px would cut the scene, 781-920px is the stale band. */
@media (min-width: 1025px) and (max-width: 1280px) {
			html.md-panels-pinned #pageContentArea {
				left: auto;
				right: 397px;
				transform: none;
				margin-left: 0;
				width: calc(100% - 492px) !important;
				min-width: 0 !important;
				max-width: 690px !important;
			}
}
@media (min-width: 1025px) and (max-width: 1139px) {
			html.md-panels-pinned #pageContentArea { max-width: 543px !important; }
}


@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: 360px; /* clear of the Triggers panel (thread 5003) */
				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: -680px; /* left of the credits pill: it covered News (thread 5003) */
				
				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;
				position: absolute; top: -7px; right: 720px;				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: -680px; /* left of the credits pill: it covered News (thread 5003) */
				
				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: 1px; right: 110px;				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: -760px; /* left of the credits pill and the bounty slot (thread 5003) */
				
				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;
				position: absolute; top: 15px; right: 592px;				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;
}

/* =========================================================================
   TOWN CRIER WORDS, every width above the phone (bug report 5278, 2026-10-05).
   Above 640px the crier stands on the bark strip over the scene, its parchment
   background switched off (the xxbackground lines in every breakpoint block),
   and townCrier.php writes its words #333 INLINE: measured 2.3:1 against the
   bark at every desktop width, unreadable at 9px. Light words with a dark halo
   read on bark and on parchment alike; !important because the colour is inline.
   The phone keeps its parchment strip and the #333 words (max-width: 640px).
   ========================================================================= */
@media (min-width: 641px) {
	#townCrier div { color: #f1e7cf !important; text-shadow: 0 0 2px #000, 0 1px 2px #000; }
	#townCrier a { color: #ffd77a; }
}