body {
    background: #2f2f2f; 
    font-family: tahoma; 
    color: #bba;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

#tilecursor, #screencursor {
    overflow: visible;
    position: absolute;
    visibility: visible;
    left: 0px;
    top: 0px;
}    
#tilecursor img {    
    z-index: 98;
    opacity: 0.25;
    filter: alpha(opacity=25);
} 
#screencursor img {    
    z-index: 97;
    opacity: 0.1;
    filter: alpha(opacity=10)
} 

form#tile-label { 
    background: black;
    display: block;
    position: relative;
    top: -36px;
    left: 36px;
    padding: 2px;
    width: 70px;
    opacity: 0.75;
    filter: alpha(opacity=75);
}
input.cursorord {
    font-size: 10px;
    color: white; 
    display: inline; 
    border: 0px; 
    background: transparent;
}

#screencursorlabel {
    padding-left: 4px;
    margin: -1px -3px 0px 1px;
    background: #222;
    border-top: solid 1px white;
    border-bottom: solid 1px #444;
    border-right: solid 4px #111;
    width: 88px;
    opacity: 0.75;
    filter: alpha(opacity=75);
}

#bg_dimmer { display:none }

.coordinates {
    position:relative; outline: 0px green solid;
    z-index:999; widths:56px; height:32px; float: left;
}

#pixel-coords {
    opacity: 0.2;
    transition: opacity 100ms;
    position: relative;
    top: 3px;
}
#tile-coords {
    visibility: hidden;
}
#screen-coords {
    visibility: hidden;
}

#nav-box {
    z-index: 99; text-shadow: 1px 1px 2px black, 1px 1px 4px black; position: fixed; top: 0px; left: 0px; opacity: 1; width: 868px; height: 100px; overflow: visible;
}   
#nav-box:hover {
    z-index: 99; position: fixed; top: 0px; left: 0px; opacity: 1; background: rgba(47, 47, 47, 0.75); border-bottom: solid 5px #2a2a2a; border-right: solid 5px #2a2a2a;
}

#select-map {
    margin: 8px 0 8px 0; position: relative; left: 260px; top: -68px; width: 520px;
    height: 50px; overflow: visible; outline: solid yellow 0px;
}

.label-text {
    font-variant: small-caps; font-weight: bold
}

.selector {
    background: #444; color: gray; border: solid 1px #998; text-shadow: inherit;
}

form { display: inline; margin-right: 2px;}

.opt {
    color: white;
    font-weight: bold;
}
.white {
    color: white;
}
.white:hover {
    color: white;
    background: grey;
}
.silver {
    color: silver;
}
.silver:hover {
    color: silver;
    background: #555;
}

.world, .world:hover {
    font-weight: bold;
    margin-top: 8px;
    background: #333;
    color: #666;
    font-variant: small-caps;
}
.world.active, .world.active:hover {
    font-weight: bold;
    margin-top: 8px;
    background: #333;
    color: white;
    font-variant: small-caps;
}.world.active:hover {
    font-weight: bold;
    margin-top: 8px;
    background: grey;
}

#map-layers {
    position: absolute;
    top: 100px;
    left: 16px;
    background: transparent;
    border: solid 5px #2a2a2a;
    border-radius: 6px;
    /* cursor: crosshair; */
}

div {
    overflow: hidden;
    padding: 0px;
    outline: dotted 0px blue;
}

a:link, a:visited {
    font-weight: bold; 
/*    font-variant: small-caps; */
    text-decoration: none; 
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

a:hover {
    color: white;
}

h1 {
    font-size: 26px; margin: 0px; padding-bottom: 4px; font-variant: normal
}

ul {
    margin: 10px 0 4px 0; padding: 0 0 4px 24px; list-style-type: none
}

#message {
    position: absolute; 
    top: 312px; 
    font-size: 14px
}

p  {
    margin: 0px 0px 16px 8px;
    width: 480px;
    font-size: 13px;
}

.nav-arrow img {
border: 0px;
}

a.level:link, a.level:visited {
    font-variant: normal; letter-spacing: 0px; color: #bba; font-weight: bold; font-family: verdana;
}

a.level:hover {
    color: #ddc;
}

.drag{
    position:relative;
    cursor:hand;
    z-index: 100;
}

#board-x {
    border-width: 32px 32px 64px 32px;
    border-style: solid;
    border-color: black;
    outline: solid 2px #886;   
}

div.layer, img.sheet {
    position: absolute;
    top: 0px;
    left: 0px;
}

#board          { z-index: 1; }
#transparent    { z-index: 2; }
#background     { z-index: 3; }
#terrain        { z-index: 4; }
#sprites        { z-index: 5; }
#foreground     { z-index: 6; }
#fg_1           { z-index: 7; }
#fg_2           { z-index: 8; }
#overlays       { z-index: 9; }

#grid {
    z-index: 10;
    position: relative;
    top: 1px;
    left: 1px;
}
em { color: silver }

#nav-box img         { opacity: 0.85; filter: opacity(alpha=90) }
#nav-box img:hover   { opacity: 1.00 }

img.button1, img.button2, img.button3, img.button1b, img.button2b {
    position: relative; top: -11px; z-index: 998; cursor: hand; cursor: pointer;
}
img.button1:hover, img.button2:hover, img.button3:hover, img.button1b:hover, img.button2b:hover {
    outline: solid 1px #ddd; z-index: 999;
}
img.button1    {   left: -72px;   }
img.button2    {   left: -74px;   }
img.button3    {   left: -76px;   }
img.button1b   {   left: -52px;   }
img.button2b   {   left: -54px;   }

.left2 {   margin-left: -44px;   }
.left3 {   margin-left: -66px;   }

form.coords { display: inline; font-size: 11px; top: 10px; left: 750px; font-family: monospace; background: transparent; margin-right: 0}
input.ord {  color: white; font-size: 10px; border: 0px; background: transparent; font-weight: bold; max-widths: 42px; text-shadow: inherit}

#breadcrumbs {
    padding: 1px 4px;
    border-bottom: solid 1px #111;
    margin: -3px 0 2px 12px;
    float: left;
    background: #222;
    border-radius: 4px;
}
#breadcrumbs, #breadcrumbs a:link, #breadcrumbs a:visited {
    font-size: 9px;
    font-variant: normal;
}

h2 {
    padding: 4px 0 2px 0;
    margin: -16px 0 0 -8px;
    font-weight: bold;
    font-style: normal;
    font-size: 13px;
    font-variant: small-caps;
    clear: left;
}


#music_player {	 
    float: right;
    margin: 6px -32px;   /* was margin: 6px -6px;*/
    overflow: visible;
    z-index: 990;
}

#intro {
    width: 128px;  /* width:  36px; ie9*/
    height: 36px;
}
#loop {
    width: 162px; /* width: 294px; ie9*/
    height: 36px;
}
#once {
    width: 224px; /* width: 294px; ie9*/
    height: 36px;
}

form[name=music_options] {position: absolute; top: 14px; left: 560px; width: 100px;} /* Autoplay */

input#test {
    position: relative;
    float: right;
    top: -30px;
    right: 42px;
    opacity: 0;
    filter: opacity(alpha=0);
}
input#test:hover {
    opacity: .5;
}
input#test:checked {
    opacity: 1;
}
/*
#objects:hover a {
outline: dotted 1px rgba(255, 255, 255, 0.2);
}
#baddies:hover img {
outline: dotted 1px rgba(255, 255, 255, 0.2);
}*/
#sprites a img:hover, #overlays a img:hover {
    background: rgba(255, 255, 255, 0.2);
    outline: solid 1px rgba(255, 255, 255, 0.5);
}
div#map-layers:hover, div#map-layers div:hover {
    /* overflow: visible;  makes objects visible beyond level boundaries */
}
#dimensions {
    margin: 0px 0 0 16px; 
    clear: left;
    height: 50px;
}



/* Animation for Red Zinger orbit */
.animate.A177, a.A177 {
    -webkit-animation: A177 1.714s linear infinite;
    animation: A177 1.714s linear infinite;

}
@-webkit-keyframes A177 {
    from { transform: rotate(0deg) translateX(36px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(36px) rotate(-360deg); }
}
@keyframes A177 {
    from { transform: rotate(0deg) translateX(36px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(36px) rotate(-360deg); }
}


/* Animation for Green Zinger arc */
.animate.A2B1, a.A2B1 {
    -webkit-animation: A2B1 3.5s cubic-bezier(.15,0,.85,1) infinite;
    animation: A2B1 3.5s cubic-bezier(.15,0,.85,1) infinite;

}
@-webkit-keyframes A2B1 {
    000% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
    050% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
    100% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
}
@keyframes A2B1 {
    000% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
    050% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
    100% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
}

/*.animate.A2B1:hover, a.A2B1:hover {*/
    /*-webkit-animation-play-state: paused; */
/*    animation-play-state: paused;*/
/*}*/

/* Animation for Green Zinger REVERSE arc */
.animate.A2B1b, a.A2B1b {
    -webkit-animation: A2B1b 3.5s cubic-bezier(.15,0,.85,1) infinite;
    animation: A2B1b 3.5s cubic-bezier(.15,0,.85,1) infinite;

}
@-webkit-keyframes A2B1b {
    000% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
    050% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
    100% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
}
@keyframes A2B1b {
    000% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
    050% { transform: rotate(370deg) translateX(70px) rotate(-370deg); }
    100% { transform: rotate(170deg) translateX(70px) rotate(-170deg); }
}

/* Animation for Green Zinger DOWNWARD arc */
.animate.A2E7, a.A2E7 {
    -webkit-animation: A2E7 3.5s cubic-bezier(.15,0,.85,1) infinite;
    animation: A2E7 3.5s cubic-bezier(.15,0,.85,1) infinite;

}
@-webkit-keyframes A2E7 {
    000% { transform: rotate(350deg) translateX(70px) rotate(-350deg); }
    050% { transform: rotate(550deg) translateX(70px) rotate(-550deg); }
    100% { transform: rotate(350deg) translateX(70px) rotate(-350deg); }
}
@keyframes A2E7 {
    000% { transform: rotate(350deg) translateX(70px) rotate(-350deg); }
    050% { transform: rotate(550deg) translateX(70px) rotate(-550deg); }
    100% { transform: rotate(350deg) translateX(70px) rotate(-350deg); }
}


/* Animation for vertical ropes (sway) */
.animate.ropesway, a.ropesway {
    -webkit-animation: ropesway 3.234s ease-out infinite;
            animation: ropesway 3.234s ease-out infinite;

}
@-webkit-keyframes ropesway {
    0%      {margin-left: -6; }
    50%     {margin-left:  6; }
    100%    {margin-left: -6; }
}
@keyframes ropesway {
    0%      {margin-left: -6; }
    50%     {margin-left:  6; }
    100%    {margin-left: -6; }
}


/* Animation for Bouncy Bonanza's elevator platform */
.animate.m123elevator, a.m123elevator {
    -webkit-animation: m123elevator 6.15s ease-in-out infinite;
    animation: m123elevator 6.15s ease-in-out infinite;

}
@-webkit-keyframes m123elevator {
    0%      { transform: translateY(-68px); }
    50%     { transform: translateY( 68px); }
    100%    { transform: translateY(-68px); }
}
@keyframes m123elevator {
    0%      {transform: translateY(-68px); }
    50%     {transform: translateY( 68px); }
    100%    {transform: translateY(-68px); }
}


/* Animation for Bouncy Bonanza's conveyor platform (at end) */
.animate.m123conveyor, a.m123conveyor {
    -webkit-animation: m123conveyor 7.22s cubic-bezier(.15,0,.85,1) infinite;
    animation: m123conveyor 7.22s cubic-bezier(.15,0,.85,1) infinite;

}
@-webkit-keyframes m123conveyor {
    0%      { transform: translateX(-85px); }
    50%     { transform: translateX( 85px); }
    100%    { transform: translateX(-85px); }
}
@keyframes m123conveyor {
    0%      {transform: translateX(-85px); }
    50%     {transform: translateX( 85px); }
    100%    {transform: translateX(-85px); }
}


/* Animation for Bouncy Bonanza's yellow Zinger #1 */
.animate.m123yellowzinger1, a.m123yellowzinger1 {
    -webkit-animation: m123yellowzinger1 3s ease-in-out infinite;
    animation: m123yellowzinger1 3s ease-in-out infinite;

}
@-webkit-keyframes m123yellowzinger1 {
    0%      { transform: translateY(-73px); }
    50%     { transform: translateY( 73px); }
    100%    { transform: translateY(-73px); }
}
@keyframes m123yellowzinger1 {
    0%      { transform: translateY(-73px); }
    50%     { transform: translateY( 73px); }
    100%    { transform: translateY(-73px); }
}


/* Animation for Bouncy Bonanza's yellow Zinger #2 */
.animate.m123yellowzinger2, a.m123yellowzinger2 {
    -webkit-animation: m123yellowzinger2 3s ease-in-out infinite .35s;
    animation: m123yellowzinger2 3s ease-in-out infinite .35s;

}
@-webkit-keyframes m123yellowzinger2 {
    0%      { transform: translateY(-73px); }
    50%     { transform: translateY( 73px); }
    100%    { transform: translateY(-73px); }
}
@keyframes m123yellowzinger2 {
    0%      { transform: translateY(-73px); }
    50%     { transform: translateY( 73px); }
    100%    { transform: translateY(-73px); }
}



/* Ensure that overlay objects can be 'hovered' */
.layer a {
    pointer-events: initial;
}

/* Debug */
#debug1 {
    position: fixed;
    left: 860px;
    top: -5px;
    width: 70em;

}
#debug2 {
    position: fixed;
    left: 860px;
    top: 15px;
    width: 70em;

}
#debug3 {
    position: fixed;
    left: 860px;
    top: 35px;
    width: 70em;

}
#debug4 {
    position: fixed;
    left: 860px;
    top: 55px;
    width: 70em;

}
#debug5 {
    position: fixed;
    left: 860px;
    top: 75px;
    width: 70em;

}

#debug1 li, #debug2 li, #debug3 li, #debug4 li, #debug5 li {
    display: inline-table;
    width: 7em;
}

/*
#foreground-b1:hover {
    opacity: .5;
    -webkit-transition: .5s;
}
*/

#bonuses {
overflow: visible;
}

#bonuses .bonus-notes {
    opacity: 0;
    transition: opacity 0.25s;
    padding: 0.5em 1em 0.15em;
    background: rgba(0, 0, 0, 0.25);
    width: 256px;
}
#bonuses:hover .bonus-notes {
    opacity: 1;
    transition: opacity 0.25s;
}
 #bonuses h2 {
     padding:initial;
     margin:0 0 .25em;
     font-size:initial;
     font-variant:initial;
 }
#bonuses h3 {
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    margin: 0 0 -0.25em;
    font-size: 12px;
}
#bonuses ul {
    list-style-type: inherit;
    padding-bottom: 0;
}
#bonuses li {
    font-size: 13px;
    padding-bottom: 0.5em;
    margin-left: -0.25em;
}

#map-footer {
width: 480px; 
 padding: 112px 0 32px 32px; overflow: visible;
}

hr {
    visibility: visible;
    border: none;
    border-top: 1px gray dashed;
    width: 480px; 
    height: 1px;
    margin: 1em 0 0.5em;
}

h3 {
margin: .5em 0 0 0; 
font-size: 13px; 
font-weight: bold;
    text-align: left;
    color: inherit;
}

.cached {
	opacity: .5;
}
.cached:hover {
	opacity: 1;
}

#te_1 {background-size: 100% !important} /* Fixes terrain shrinkage on iOS devices */


.feint {
	opacity: .25;
	transition: opacity .25s ease-in-out;
	}
/* image */
.pulse {
	-webkit-animation: pulse 2s linear infinite;
	animation: pulse 2s linear infinite;
	}
@-webkit-keyframes pulse {
	0%  { opacity: .5;}
	50%  { opacity: 1;}
	100%  { opacity: .5;}
	}
@keyframes pulse {
	0%  { opacity: .5;}
	50%  { opacity: 1;}
	100%  { opacity: .5;}
	}
.pulse:hover {
	background: transparent !important;
	outline: none !important;
	}
.hover:hover {
	opacity:1;
	transition: opacity .25s ease-in-out;
	}