/* The PHP above must stay the first bytes of this file (bug report 5306). A comment printed before it sent
   the headers early: the sheet went out as text/html after three PHP warnings, Firefox refused the whole sheet,
   and in other browsers the warnings swallowed the first rule below. */

/* The menu opens on :hover. It now ALSO opens on #menuGame.mdm-open, which the seal's
   click handler in menuGame.php toggles - hover alone is no use on a touch screen, where
   a tap sticks and there is no way to tap it shut again.
   Every .icon:hover selector below therefore carries a twin. They were added mechanically
   (39 of them); if you add a new :hover rule here, give it the same twin or the
   toggle will open everything except that one thing. */

/*
To edit this file edit the .scss version then use this tool to convert to css
be carful it has some customizations done here signed with mxl
https://www.cssportal.com/scss-to-css/

Alternate edit/add items by this rule

	   .spread:nth-child(#{$m}) {
		    transition-delay: $m * 0.02s;
		    transform: rotate(45 + 180 * $m);
	   }
	   .spread:nth-child(#{$m}).unit {
			transition-delay: $m * 0.04s;
			transform: rotate(-180 * $m + 720 - 45);
	   }
	   
	   
--mur
*/

/*@import "compass/css3";*/
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* [6] */
/* Styles: */

.menu_menuicon img {	
	margin-top: -5px;
}
.icon {
  position: relative;
  background: transparent;
  cursor: pointer;
  margin: auto;
  color: transparent;
  border-radius: 50%;
  height: 120px;
  width: 120px;
  line-height: 120px;
  text-align: left;
  font-size: 2.75em;
  font-weight: bold;
  -webkit-transition: 0.24s 0.2s;
  -moz-transition: 0.24s 0.2s;
  -ms-transition: 0.24s 0.2s;
  -o-transition: 0.24s 0.2s;
  transition: 0.24s 0.2s;
}
.icon:hover,
#menuGame.mdm-open .icon {
	background: rgba(255, 255, 255, 0.75);
	-webkit-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-moz-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-ms-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-o-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);

}
.menu {
  position: absolute;
  top: -130px;
  left: -120px;
  border: 180px solid transparent;
  /* mxl: the transparent border IS the hover shield that bridges the gaps between items.
     Items 12-17 were nudged below the default 180px bottom edge, so the pointer fell out of
     .icon in the ~10px gaps between them and the menu retracted mid-travel. Reach them.
     Grow this whenever a slot is added below, or the last item ends up outside the shield:
     350px covered slot 16, 385px covers slot 17 with the same ~33px of slack underneath. */
  border-bottom-width: 385px;
  /* keep the unfold focal point where the old 360px-tall box had it (50% of 360) */
  transform-origin: 50% 180px;
  cursor: default;
  xxborder-radius: 50%;
  transform: scale(0);
  -webkit-transition: transform 0.45s 0.35s, z-index 0s 0.35s;
  -moz-transition: transform 0.45s 0.35s, z-index 0s 0.35s;
  -ms-transition: transform 0.45s 0.35s, z-index 0s 0.35s;
  -o-transition: transform 0.45s 0.35s, z-index 0s 0.35s;
  transition: transform 0.45s 0.35s, z-index 0s 0.35s;
  z-index: -5;
}
.spread {
  position: absolute;
  top: -120px;
  left: -120px;
  transform-origin: 120px 120px;
  -webkit-transition: all 0.45s 0.35s;
  -moz-transition: all 0.45s 0.35s;
  -ms-transition: all 0.45s 0.35s;
  -o-transition: all 0.45s 0.35s;
  transition: all 0.45s 0.35s;
  margin:20px;
  z-index: 2000;
  /* Only the label (.unit) takes the pointer (bug report 5325). Each li is still a list item with
     an invisible bullet, and Firefox gives it a 121px line box (it inherits the seal's 120px
     line-height); rotated with its slot, those empty strips lay over the centres of 6 of the 17
     labels (Quests, Alliance, Profile, Gear, Creatures, Primordials) and swallowed the click.
     Chrome draws the li 0px tall, so nothing changes there. */
  list-style: none;
  pointer-events: none;
}
.spread a, .unit  {
	  z-index: 2000;
	  pointer-events: auto;
}
.icon:hover,
#menuGame.mdm-open .icon {
  /* Where all the MAGIC happens: */
}
.icon:hover .menu,
#menuGame.mdm-open .icon .menu {
  -webkit-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -moz-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -ms-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -o-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  transform: scale(1);
  z-index: 5;
}
.icon:hover .spread,
#menuGame.mdm-open .icon .spread {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
/* mxl: the unfold cascade delays each item's transform (up to 0.64s for the last one).
   That delay used to apply to colour too, so pointing at "Log-out" took 0.64s to light up.
   Listing the two properties separately lets the per-item rules below delay only transform. */
.icon:hover .unit,
#menuGame.mdm-open .icon .unit {
  -webkit-transition-property: transform, color;
  -webkit-transition-duration: 0.6s, 0.12s;
  transition-property: transform, color;
  transition-duration: 0.6s, 0.12s;
}
.icon:hover .spread:nth-child(1),
#menuGame.mdm-open .icon .spread:nth-child(1) {
  transition-delay: 0.02s;
  transform: rotate(57.85714deg);
  margin-top: -2px; /* mxl */
   margin-left: 34px; /* mxl */
   z-index: 5000;
}
.icon:hover .spread:nth-child(1) .unit,
#menuGame.mdm-open .icon .spread:nth-child(1) .unit {
  transition-delay: 0.04s, 0s;
  transform: rotate(662.14286deg);
  z-index: 5000;
}
.icon:hover .spread:nth-child(2),
#menuGame.mdm-open .icon .spread:nth-child(2) {
  transition-delay: 0.04s;
  transform: rotate(70.71429deg);
  margin-top: 10px; /* mxl */
  z-index: 5000;
}
.icon:hover .spread:nth-child(2) .unit,
#menuGame.mdm-open .icon .spread:nth-child(2) .unit {
  transition-delay: 0.08s, 0s;
  transform: rotate(649.28571deg);
  z-index: 5000;
}
.icon:hover .spread:nth-child(3),
#menuGame.mdm-open .icon .spread:nth-child(3) {
  transition-delay: 0.06s;
  transform: rotate(83.57143deg);
  margin-top: 16px; /* mxl */
    z-index: 5000;
}
.icon:hover .spread:nth-child(3) .unit,
#menuGame.mdm-open .icon .spread:nth-child(3) .unit {
  transition-delay: 0.12s, 0s;
  transform: rotate(636.42857deg);
}
.icon:hover .spread:nth-child(4),
#menuGame.mdm-open .icon .spread:nth-child(4) {
  transition-delay: 0.08s;
  transform: rotate(96.42857deg);
}
.icon:hover .spread:nth-child(4) .unit,
#menuGame.mdm-open .icon .spread:nth-child(4) .unit {
  transition-delay: 0.16s, 0s;
  transform: rotate(623.57143deg);
}
.icon:hover .spread:nth-child(5),
#menuGame.mdm-open .icon .spread:nth-child(5) {
  transition-delay: 0.1s;
  transform: rotate(109.28571deg);
}
.icon:hover .spread:nth-child(5) .unit,
#menuGame.mdm-open .icon .spread:nth-child(5) .unit {
  transition-delay: 0.2s, 0s;
  transform: rotate(610.71429deg);
}
.icon:hover .spread:nth-child(6),
#menuGame.mdm-open .icon .spread:nth-child(6) {
  transition-delay: 0.12s;
  transform: rotate(122.14286deg);
}
.icon:hover .spread:nth-child(6) .unit,
#menuGame.mdm-open .icon .spread:nth-child(6) .unit {
  transition-delay: 0.24s, 0s;
  transform: rotate(597.85714deg);
}
.icon:hover .spread:nth-child(7),
#menuGame.mdm-open .icon .spread:nth-child(7) {
  transition-delay: 0.14s;
  transform: rotate(135deg);
}
.icon:hover .spread:nth-child(7) .unit,
#menuGame.mdm-open .icon .spread:nth-child(7) .unit {
  transition-delay: 0.28s, 0s;
  transform: rotate(585deg);
}
.icon:hover .spread:nth-child(8),
#menuGame.mdm-open .icon .spread:nth-child(8) {
  transition-delay: 0.16s;
  transform: rotate(147.85714deg);
}
.icon:hover .spread:nth-child(8) .unit,
#menuGame.mdm-open .icon .spread:nth-child(8) .unit {
  transition-delay: 0.32s, 0s;
  transform: rotate(572.14286deg);
}
.icon:hover .spread:nth-child(9),
#menuGame.mdm-open .icon .spread:nth-child(9) {
  transition-delay: 0.18s;
  transform: rotate(160.71429deg);
}
.icon:hover .spread:nth-child(9) .unit,
#menuGame.mdm-open .icon .spread:nth-child(9) .unit {
  transition-delay: 0.36s, 0s;
  transform: rotate(559.28571deg);
}
.icon:hover .spread:nth-child(10),
#menuGame.mdm-open .icon .spread:nth-child(10) {
  transition-delay: 0.2s;
  transform: rotate(173.57143deg);
  margin-top: 28px; /* mxl */
}
.icon:hover .spread:nth-child(10) .unit,
#menuGame.mdm-open .icon .spread:nth-child(10) .unit {
  transition-delay: 0.4s, 0s;
  transform: rotate(546.42857deg);
}
.icon:hover .spread:nth-child(11),
#menuGame.mdm-open .icon .spread:nth-child(11) {
  transition-delay: 0.22s;
  transform: rotate(186.42857deg);
   margin-top: 40px; /* mxl */
}
.icon:hover .spread:nth-child(11) .unit,
#menuGame.mdm-open .icon .spread:nth-child(11) .unit {
  transition-delay: 0.44s, 0s;
  transform: rotate(533.57143deg);
}

/* wishshop */
.icon:hover .spread:nth-child(12),
#menuGame.mdm-open .icon .spread:nth-child(12) {
  transition-delay: 0.24s;
  transform: rotate(199.28571deg);
  margin-top: 60px; /* mxl */
  margin-left: 34px; /* mxl */
}
.icon:hover .spread:nth-child(12) .unit,
#menuGame.mdm-open .icon .spread:nth-child(12) .unit {
  transition-delay: 0.48s, 0s;
  transform: rotate(520.71429deg);
}

/* items */
.icon:hover .spread:nth-child(13),
#menuGame.mdm-open .icon .spread:nth-child(13) {
  transition-delay: 0.26s;
  transform: rotate(212.14286deg);
    margin-top: 86px; /* mxl */
    margin-left: 60px; /* mxl */
}
.icon:hover .spread:nth-child(13) .unit,
#menuGame.mdm-open .icon .spread:nth-child(13) .unit {
  transition-delay: 0.52s, 0s;
  transform: rotate(507.85714deg);
}
.icon:hover .spread:nth-child(14),
#menuGame.mdm-open .icon .spread:nth-child(14) {
  transition-delay: 0.28s;
  transform: rotate(225deg);
    margin-top: 118px; /* mxl */
    margin-left: 88px; /* mxl */  
}
.icon:hover .spread:nth-child(14) .unit,
#menuGame.mdm-open .icon .spread:nth-child(14) .unit {
  transition-delay: 0.56s, 0s;
  transform: rotate(495deg);
}

.icon:hover .spread:nth-child(15),
#menuGame.mdm-open .icon .spread:nth-child(15) {
  transition-delay: 0.3s;
  transform: rotate(237.85714deg);
    margin-top: 158px; /* mxl */
    margin-left: 116px; /* mxl */
}
.icon:hover .spread:nth-child(15) .unit,
#menuGame.mdm-open .icon .spread:nth-child(15) .unit {
  transition-delay: 0.6s, 0s;
  transform: rotate(482.14286deg);
}

/*
	   .spread:nth-child(16) {
		    transition-delay: 0.3s;
		    transform: rotate(315deg);
	   }
	   .spread:nth-child(16).unit {
			transition-delay: 0.6s;
			transform: rotate(2025deg);
	   }
*/


			
/* forge - 16th menu item (visible to all logged-in players) */
.icon:hover .spread:nth-child(16),
#menuGame.mdm-open .icon .spread:nth-child(16) {
  transition-delay: 0.32s;
  transform: rotate(250.71429deg);
  margin-top: 204px; /* mxl */
  margin-left: 144px; /* mxl */
}
.icon:hover .spread:nth-child(16) .unit,
#menuGame.mdm-open .icon .spread:nth-child(16) .unit {
  transition-delay: 0.64s, 0s;
  transform: rotate(469.28571deg);
}

/* log-out - 17th menu item, only reached when Pets shows (see menuGame.php).
   IMPORTANT: this block is positional, not per-entry. There is one slot per nth-child and no
   fallback, so an item that lands past the last slot gets no transform at all and parks itself
   at the top-left corner of the menu, on top of the seal. Adding ANY new menu entry means adding
   the next slot here too. The progression: angle +12.85714deg per slot, the .unit counter-rotation
   is always (720 - angle), the delays are 0.02s and 0.04s per slot, and the margins push the item
   down-right so the tail reads as a straight column instead of curving back up the left side. */
.icon:hover .spread:nth-child(17),
#menuGame.mdm-open .icon .spread:nth-child(17) {
  transition-delay: 0.34s;
  transform: rotate(263.57143deg);
  margin-top: 256px; /* mxl */
  margin-left: 167px; /* mxl */
}
.icon:hover .spread:nth-child(17) .unit,
#menuGame.mdm-open .icon .spread:nth-child(17) .unit {
  transition-delay: 0.68s, 0s;
  transform: rotate(456.42857deg);
}

/* MIRRORED FAN: menuGame.php adds .mdm-up in the lower half of the window (bug report 5277) and .mdm-left in the
   right half (bug report 5306). The whole menu (entries, nudges, hover shield) is mirrored about the seal, top to
   bottom, side to side or both, and each label is mirrored back upright by the same factors. The rotation is each
   slot's own value above, so A NEW SLOT NEEDS ITS VALUE IN THE LIST BELOW TOO. */
#menuGame { --mdm-sx: 1; --mdm-sy: 1; }
#menuGame.mdm-up { --mdm-sy: -1; }
#menuGame.mdm-left { --mdm-sx: -1; }
#menuGame.mdm-up .icon:hover .menu, #menuGame.mdm-up.mdm-open .icon .menu,
#menuGame.mdm-left .icon:hover .menu, #menuGame.mdm-left.mdm-open .icon .menu { transform: scale(var(--mdm-sx), var(--mdm-sy)); }
/* The side mirror turns about the seal's centre: 60px minus the menu's left (-120 here, -80 on a phone, layout.css.php).
   The default 50% sits 20px off it (the list's 40px padding) and drew the mirrored labels over the seal. */
#menuGame.mdm-left .icon .menu { transform-origin: 180px 180px; }
@media (max-width: 640px) { #menuGame.mdm-left #div_leftmenu { transform-origin: 140px 180px; } }
#menuGame.mdm-up .icon:hover .spread:nth-child(1) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(1) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(1) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(1) .unit { transform: rotate(662.14286deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(2) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(2) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(2) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(2) .unit { transform: rotate(649.28571deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(3) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(3) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(3) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(3) .unit { transform: rotate(636.42857deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(4) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(4) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(4) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(4) .unit { transform: rotate(623.57143deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(5) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(5) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(5) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(5) .unit { transform: rotate(610.71429deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(6) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(6) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(6) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(6) .unit { transform: rotate(597.85714deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(7) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(7) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(7) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(7) .unit { transform: rotate(585deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(8) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(8) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(8) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(8) .unit { transform: rotate(572.14286deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(9) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(9) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(9) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(9) .unit { transform: rotate(559.28571deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(10) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(10) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(10) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(10) .unit { transform: rotate(546.42857deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(11) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(11) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(11) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(11) .unit { transform: rotate(533.57143deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(12) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(12) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(12) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(12) .unit { transform: rotate(520.71429deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(13) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(13) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(13) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(13) .unit { transform: rotate(507.85714deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(14) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(14) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(14) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(14) .unit { transform: rotate(495deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(15) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(15) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(15) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(15) .unit { transform: rotate(482.14286deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(16) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(16) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(16) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(16) .unit { transform: rotate(469.28571deg) scale(var(--mdm-sx), var(--mdm-sy)); }
#menuGame.mdm-up .icon:hover .spread:nth-child(17) .unit, #menuGame.mdm-up.mdm-open .icon .spread:nth-child(17) .unit, #menuGame.mdm-left .icon:hover .spread:nth-child(17) .unit, #menuGame.mdm-left.mdm-open .icon .spread:nth-child(17) .unit { transform: rotate(456.42857deg) scale(var(--mdm-sx), var(--mdm-sy)); }
/* END .icon:hover */
.unit {
  margin: 5px;
  position: absolute;
  background: transparent;
  font-size: 14px;
  text-decoration: none;
  width: 80px;
  height: 20px;
  line-height: 20px;
  color: #241c09;
  xxborder-radius: 50%;
  -webkit-transition: all 0.45s 0.35s;
  -moz-transition: all 0.45s 0.35s;
  -ms-transition: all 0.45s 0.35s;
  -o-transition: all 0.45s 0.35s;
  transition: all 0.45s 0.35s;
  background-color: rgba(240, 237, 225,0.8);
  border-radius: 4px;
  
  border: 1px solid #754309;
  -webkit-box-shadow: 0px 2px 5px 0px #000000; 
  box-shadow: 0px 2px 5px 0px #000000;
}