html {
  background: #000;
}

.controls {
  position: fixed;
  text-align: center;
  top: 1em;
  width: 448px;
}

.button {
  color: #999;
  font-size: 23px;
  margin: 0 0.1em;
  text-decoration: none;
  border: 1px solid #555;
  padding: 0.1em 0.2em;
  background-color: #000;
}

.button:first-child {
    margin-left: 0;
}

.button:last-child {
    margin-right: 0;
}

.button:hover {
  color: white;
  background-color: #1c1c1c;
  border: 1px solid #888;
}

#stopwatch {
	width: 448px;
  color: #4f4;
  font-family: Monospace;
  background: url(images/stopwatch_bg.jpg);
}

.stopwatch {
  height: 100%;
  padding-top: 70px;
  text-align: center;
  width: 446px;
  height: 440px;
  }

.stopwatch table { width: 100%; }
.stopwatch td { text-align: center; }

#stopwatch_display {
	font-size: 66px;
	text-shadow: 0px 0px 8px #fff, 0px 0px 12px #fff, 0px 0px 18px #fff;
	color: #ff4;
}
#stopwatch_incr {
}
#stopwatch_best {
}

.results {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #aaf;
  width: 100%; 
  -xx-border-color: lime;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 16px;
}

.splitlabel {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.best {
	font-size: 20px;
	color: #aaf;
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 7px #000;
}
.bestpos {
	font-size: 20px;
	color: #ff4;
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 7px #000;
}
.bestneg {
	color: #aaf;
	font-size: 20px;
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 7px #000;
}

#best_left { text-align: right; padding-right: 45px; }
#best_right { text-align: left; padding-left: 45px; }

.bestlabel {
	color: #aaf;
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 7px #000;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}


.splitdiff, .splitpos {
	color: #f44;
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 7px #000;
}
.splitdiff.splitneg, .splitneg {
	color: #ff4;
  text-shadow: 0px 0px 3px #fff, 0px 0px 5px #fff;
}

.results td, .results th {
  -xx-border: 1px solid lime;
  margin: 0;
 }
	
body {
  margin: 0px;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }

.row:before,
.row:after { content: " "; display: table; }
.row:after { clear: both; }
.cell { position: relative; float: left; }

#app { width: 900px; height: 448px; }
#app.mapless { width: 448px; }

#tracker .item,
#tracker .boss,
#tracker [id^="chest"] { width: 64px; height: 64px; }

#tracker .tunic { width: 128px; height: 128px; }
#tracker .sword { position: absolute; top: 0; right: 0; }
#tracker .shield { position: absolute; bottom: 0; left: 0; }
#tracker .moonpearl {
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 0;
  right: 0;
}

#tracker .item,
#tracker .boss { opacity: .25; }
#tracker .item[class*="active"],
#tracker .boss.defeated { opacity: 1; }

[class*="prize-"] {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
  right: 0;
}
#tracker [class*="medallion-"] {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
}

#map {
  width: 884px;
  height: 448px;
  margin-left: 8px;
  background-image: url(images/overlay/map.png);
  background-size: 100% 100%;
}

.chest {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  position: absolute;
  background-size: 100% 100%;
}

#map .boss {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75% 75%;
  z-index: 2;
}

#bossMapAgahnim { background-color: transparent; }
.castle {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  position: absolute;
  background-size: 100% 100%;
}

.dungeon {
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  position: absolute;
  background-size: 100% 100%;
}

.chest,
.castle,
.dungeon { background-image: url(images/overlay/poi.png); }
.chest.highlight,
.castle.highlight,
.dungeon.highlight { background-image: url(images/overlay/highlighted.png); }

@keyframes alert_color_change {
	from { background-color: #9f009f; }
	to { background-color: #ffffff; }
}


.unavailable { background-color: #bf0000; }
.available { background-color: #00df00; }
.viewed { background-color: #ff40ff; }
.alert { background-color: #ff40ff; animation: alert_color_change 0.5s infinite alternate; }
.possible { background-color: #ffdf80; }
.dark { background-color: blue; }
.opened { background-color: #6f6f6f; }

#caption {
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  background-color: black;
  font-size: 16px;
  text-align: center;
}

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 100% 100%;
  vertical-align: text-bottom;
}

.tunic.active-1 { background-image: url(images/items/tunic1.png); }
.tunic.active-2 { background-image: url(images/items/tunic2.png); }
.tunic.active-3 { background-image: url(images/items/tunic3.png); }
.tunic.active-1.bunny { background-image: url(images/items/tunicbunny1.png); }
.tunic.active-2.bunny { background-image: url(images/items/tunicbunny2.png); }
.tunic.active-3.bunny { background-image: url(images/items/tunicbunny3.png); }
.sword.active-1 { background-image: url(images/items/sword1.png); }
.sword.active-2 { background-image: url(images/items/sword2.png); }
.sword.active-3 { background-image: url(images/items/sword3.png); }
.sword.active-4 { background-image: url(images/items/sword4.png); }
.shield.active-1 { background-image: url(images/items/shield1.png); }
.shield.active-2 { background-image: url(images/items/shield2.png); }
.shield.active-3 { background-image: url(images/items/shield3.png); }
.moonpearl { background-image: url(images/items/moonpearl.png); }
.bow { background-image: url(images/items/bow0.png); }
.bow.active-1 { background-image: url(images/items/bow1.png); }
.bow.active-2 { background-image: url(images/items/bow2.png); }
.bow.active-3 { background-image: url(images/items/bow3.png); }
.boomerang { background-image: url(images/items/boomerang1.png); }
.boomerang.active-2 { background-image: url(images/items/boomerang2.png); }
.boomerang.active-3 { background-image: url(images/items/boomerang3.png); }
.hookshot { background-image: url(images/items/hookshot.png); }
.mushroom { background-image: url(images/items/mushroom.png); }
.powder { background-image: url(images/items/powder.png); }
.firerod { background-image: url(images/items/firerod.png); }
.icerod { background-image: url(images/items/icerod.png); }
.bombos { background-image: url(images/items/bombos.png); }
.ether { background-image: url(images/items/ether.png); }
.quake { background-image: url(images/items/quake.png); }
.lantern { background-image: url(images/items/lantern.png); }
.hammer { background-image: url(images/items/hammer.png); }
.shovel { background-image: url(images/items/shovel.png); }
.net { background-image: url(images/items/net.png); }
.book { background-image: url(images/items/book.png); }
.bottle { background-image: url(images/items/bottle0.png); }
.bottle.active-1 { background-image: url(images/items/bottle1.png); }
.bottle.active-2 { background-image: url(images/items/bottle2.png); }
.bottle.active-3 { background-image: url(images/items/bottle3.png); }
.bottle.active-4 { background-image: url(images/items/bottle4.png); }
.somaria { background-image: url(images/items/somaria.png); }
.byrna { background-image: url(images/items/byrna.png); }
.cape { background-image: url(images/items/cape.png); }
.mirror { background-image: url(images/items/mirror.png); }
.boots { background-image: url(images/items/boots.png); }
.glove { background-image: url(images/items/glove1.png); }
.glove.active-2 { background-image: url(images/items/glove2.png); }
.flippers { background-image: url(images/items/flippers.png); }
.flute { background-image: url(images/items/flute.png); }
.agahnim, #bossMapAgahnim { background-image:url(images/dungeons/agahnim0.png); }
.agahnim.active { background-image:url(images/dungeons/agahnim1.png); }
.boss0, #bossMap0 { background-image: url(images/dungeons/boss0.png); }
.boss1, #bossMap1 { background-image: url(images/dungeons/boss1.png); }
.boss2, #bossMap2 { background-image: url(images/dungeons/boss2.png); }
.boss3, #bossMap3 { background-image: url(images/dungeons/boss3.png); }
.boss4, #bossMap4 { background-image: url(images/dungeons/boss4.png); }
.boss5, #bossMap5 { background-image: url(images/dungeons/boss5.png); }
.boss6, #bossMap6 { background-image: url(images/dungeons/boss6.png); }
.boss7, #bossMap7 { background-image: url(images/dungeons/boss7.png); }
.boss8, #bossMap8 { background-image: url(images/dungeons/boss8.png); }
.boss9, #bossMap9 { background-image: url(images/dungeons/boss9.png); }
.prize-0 { background-image: url(images/dungeons/prize0.png); }
.prize-1 { background-image: url(images/dungeons/prize1.png); }
.prize-2 { background-image: url(images/dungeons/prize2.png); }
.prize-3 { background-image: url(images/dungeons/prize3.png); }
.prize-4 { background-image: url(images/dungeons/prize4.png); }
.medallion-0 { background-image: url(images/dungeons/medallion0.png); }
.medallion-1 { background-image: url(images/dungeons/medallion1.png); }
.medallion-2 { background-image: url(images/dungeons/medallion2.png); }
.medallion-3 { background-image: url(images/dungeons/medallion3.png); }
.chest-0 { background-image: url(images/dungeons/chest0.png); }
.chest-1 { background-image: url(images/dungeons/chest1.png); }
.chest-2 { background-image: url(images/dungeons/chest2.png); }
.chest-3 { background-image: url(images/dungeons/chest3.png); }
.chest-4 { background-image: url(images/dungeons/chest4.png); }
.chest-5 { background-image: url(images/dungeons/chest5.png); }
.chest-6 { background-image: url(images/dungeons/chest6.png); }

.bomb { background-image: url(images/overlay/bomb.png); }
.crystal { background-image: url(images/overlay/crystal.png); }
.pendant-0 { background-image: url(images/overlay/pendant0.png); }
.pendant-1 { background-image: url(images/overlay/pendant1.png); }
.pendant-2 { background-image: url(images/overlay/pendant2.png); }

#bossMap0, #dungeon0 { left: 46.8%; top: 38.8%; }
#bossMap1, #dungeon1 { left: 3.8%;  top: 78.4%; }
#bossMap2, #dungeon2 { left: 31.0%; top: 5.5%; }
#bossMap3, #dungeon3 { left: 97.0%; top: 40.0%; }
#bossMap4, #dungeon4 { left: 73.5%; top: 91.0%; }
#bossMap5, #dungeon5 { left: 53.3%; top: 5.4%; }
#bossMap6, #dungeon6 { left: 56.4%; top: 47.9%; }
#bossMap7, #dungeon7 { left: 89.8%; top: 85.8%; }
#bossMap8, #dungeon8 { left: 55.8%; top: 82.9%; }
#bossMap9, #dungeon9 { left: 96.9%; top: 7.0%; }

#bossMapAgahnim, #castle { left: 25.0%; top: 52.6%; }

#chestMap0 { left: 30.8%; top: 29.6%; }
#chestMap1 { left: 23.4%; top: 93.4%; }
#chestMap2 { left: 27.4%; top: 67.9%; }
#chestMap3 { left: 39.9%; top: 9.3%; }
#chestMap4 { left: 42.6%; top: 9.3%; }
#chestMap5 { left: 8.1%;  top: 57.8%; }
#chestMap6 { left: 4.4%;  top: 54.2%; }
#chestMap7 { left: 55.4%; top: 57.8%; }
#chestMap8 { left: 60.8%; top: 47.9%; }
#chestMap9 { left: 10.0%; top: 82.6%; }
#chestMap10 { left: 51.7%; top: 79.5%; }
#chestMap11 { left: 92.8%; top: 14.7%; }
#chestMap12 { left: 40.7%; top: 41.4%; }
#chestMap13 { left: 78.6%; top: 14.9%; }
#chestMap14 { left: 1.7%;  top: 41.0%; }
#chestMap15 { left: 6.4%;  top: 41.0%; }
#chestMap16 { left: 80.0%; top: 77.1%; }
#chestMap17 { left: 41.4%; top: 17.1%; }
#chestMap18 { left: 19.5%; top: 29.3%; }
#chestMap19 { left: 32.6%; top: 93.4%; }
#chestMap20 { left: 44.7%; top: 76.9%; }
#chestMap21 { left: 91.6%; top: 8.6%; }
#chestMap22 { left: 91.6%; top: 3.4%; }
#chestMap23 { left: 52.1%; top: 46.4%; }
#chestMap24 { left: 4.5%;  top: 46.8%; }
#chestMap25 { left: 40.7%; top: 46.7%; }
#chestMap26 { left: 65.5%; top: 68.6%; }
#chestMap27 { left: 7.8%;  top: 52.1%; }
#chestMap28 { left: 65.2%; top: 52.2%; }
#chestMap29 { left: 35.4%; top: 69.7%; }
#chestMap30 { left: 21.0%; top: 3.0%; }
#chestMap31 { left: 11.0%; top: 92.2%; }
#chestMap32 { left: 96.0%; top: 17.2%; }
#chestMap33 { left: 48.0%; top: 12.1%; }
#chestMap34 { left: 20.8%; top: 20.4%; }
#chestMap35 { left: 40.8%; top: 32.5%; }
#chestMap36 { left: 9.4%;  top: 13.0%; }
#chestMap37 { left: 15.1%; top: 7.6%; }
#chestMap38 { left: 24.3%; top: 14.8%; }
#chestMap39 { left: 14.1%; top: 84.1%; }
#chestMap40 { left: 28.1%; top: 27.0%; }
#chestMap41 { left: 8.8%;  top: 77.3%; }
#chestMap42 { left: 65.8%; top: 60.1%; }
#chestMap43 { left: 7.7%;  top: 65.9%; }
#chestMap44 { left: 6.2%;  top: 8.6%; }
#chestMap45 { left: 25.4%; top: 8.5%; }
#chestMap46 { left: 40.2%; top: 3.0%; }
#chestMap47 { left: 1.8%;  top: 69.8%; }
#chestMap48 { left: 1.5%;  top: 91.0%; }
#chestMap49 { left: 36.1%; top: 82.9%; }
#chestMap50 { left: 67.1%; top: 15.2%; }
#chestMap51 { left: 79.0%; top: 43.5%; }
#chestMap52 { left: 52.9%; top: 69.2%; }
#chestMap53 { left: 47.7%; top: 17.3%; }
#chestMap54 { left: 14.4%; top: 66.2%; }
#chestMap55 { left: 26.8%; top: 32.4%; }
#chestMap56 { left: 29.8%; top: 41.8%; }
#chestMap57 { left: 25.0%; top: 44.1%; }
#chestMap58 { left: 23.0%; top: 28.0%; }
#chestMap59 { left: 16.0%; top: 58.0%; }
#chestMap60 { left: 15.2%; top: 51.8%; }
#chestMap61 { left: 73.5%; top: 48.5%; }
#chestMap62 { left: 2.5%;  top: 3.2%; }
#chestMap63 { left: 25.6%; top: 38.2%; }
#chestMap64 { left: 44.9%; top: 14.7%; }