Widget:MapStyles/sandbox

Mobile App users need to view this page in a browser to use the map fully. .full-container { display: flex; justify-content: space-between; max-width: 1060px; padding: 5px; border: 1px solid #000; background: linear-gradient(white, lightgray); } .resourcemap { width:100%; height:100%; } .resourcemaptable { margin:0; flex-grow:1; clear: left; } .legend-container { display: block; padding-right: 10px; float: left; max-width: 225px; }

.map-container { position: relative; }

.resourcemapsticky { position: sticky; top: 0; }

@media only screen and (max-height: 840px){ /* for everyone */ .resourcemapsticky { position: unset; }	}

.legend { display: inline-block; position: relative; padding: 0; border-radius: 50%; margin-left: 3px; } .map-legend .dots { text-align: right; vertical-align: top; } .map-legend input[type=checkbox] + label { color: #3c0000; text-shadow: 0 0 0.05em lightsalmon; } .map-legend input[type=checkbox]:checked + label { color: #003c00; text-shadow: 0 0 0.1em lightgreen; }

.legend-container select { margin-left: 0.5em; } .legend-container .details-toggle { display: block; } ul.groups-legend, ul.groups-legend ul { list-style: none; } ul.groups-legend { margin-left: 0; }

.map-container .dot, .map-container .dots > div { position: absolute; line-height: 0; padding: 0; border-radius: 50%; z-index: 5; }

.map-container .square { position: absolute; background-color: rgba(255,0,0,0.7); border-radius: 5px; border: 2px solid black; z-index: 5; }

.map-container .point { width: 7px; height: 7px; background-color: rgba(255,0,0,0.7); border: 1px solid black; z-index: 5; }

padding: 5px; vertical-align: middle; border-radius: 15px; width: 1060px; max-width:100%; overflow:auto; display:block; } .top-notice-image { position: relative; top: -100px; height: 0; z-index: 1; } .top-notice-text { vertical-align: middle; white-space:normal; color:#4f6d68; font-size:22px; padding-left:10px; } .top-notice-text a { font-weight: bold; } padding: 10px; width: 210px; } .notice { display: inline-block; margin-bottom: 10px; border: 1px solid #000; background: linear-gradient(white, lightyellow); }
 * 1) top-notice {
 * 1) legend-notice {

/* Responsive styling for interactive maps when siderail is present to prevent overlap. */ .map-legend td:first-child { width:25px; text-align:center; } .map-legend tr.no-icon td:first-child { text-align:left; }

@media only screen and (max-width:1700px){ /* for users with the siderail ad */ div#global-wrapper.with-siderail table.map-legend tr { display:inline-block; width:13em; }

div#global-wrapper.with-siderail .legend-container { max-width:unset; }

div#global-wrapper.with-siderail table.resourcemaptable { clear: left; } }

@media only screen and (max-width:1300px){ /* for everyone */ table.map-legend tr { display:inline-block; width:13em; }

.legend-container { max-width:unset; } .full-container { display: block; } }

/**********
 * Markers *

.hide-cave .map-container .cave { display: none; }

.map-legend .obelisk-red, .obelisk-red.dots > div { width:20px; height:20px; background-color:#f70102; border:2px solid #812f1a; } .map-legend .obelisk-red, .obelisk-red.dots > div { width:20px; height:20px; background-color:#14e800; border:2px solid #207203; margin-left:3px; } .map-legend .obelisk-blue, .obelisk-blue.dots > div { width:20px; height:20px; background-color:#00a5ff; border:2px solid #266dbf; } /* for Mod:Ebenus Astrum */ .map-legend .obelisk-yellow, .obelisk-yellow.dots > div { width:20px; height:20px; background-color:#EAE42C; border:2px solid #207203; }

.terminal { width:20px; height:20px; background-color:#B477FF; border:2px solid #266dbf; }

.map-legend .water-vein, .water-vein.dots > div, .map-legend .oil-rock, .oil-rock.dots > div, .map-legend .oil-vein, .oil-vein.dots > div, .map-legend .salt, .salt.dots > div, .map-legend .sulfur, .sulfur.dots > div, .map-legend .clay, .clay.dots > div, .map-legend .crystal, .crystal.dots > div, .map-legend .obsidian, .obsidian.dots > div, .map-legend .silica, .silica.dots > div, .map-legend .black-pearl, .black-pearl.dots > div, .map-legend .river-rock, .river-rock.dots > div, .map-legend .metal, .metal.dots > div, .map-legend .metal-rich, .metal-rich.dots > div, .map-legend .metal-underwater, .metal-underwater.dots > div, .map-legend .rare-flower, .rare-flower.dots > div, .map-legend .rockarrot, .rockarrot.dots > div, .map-legend .savoroot, .savoroot.dots > div, .map-legend .silk, .silk.dots > div, .map-legend .polymer, .polymer.dots > div, .map-legend .keratin, .keratin.dots > div, .map-legend .element-ore, .element-ore.dots > div, .map-legend .dust-rich, .dust-rich.dots > div, .map-legend .element-shard, .element-shard.dots > div, .map-legend .gem-blue, .gem-blue.dots > div, .map-legend .gem-green, .gem-green.dots > div, .map-legend .gem-red, .gem-red.dots > div, .map-legend .charge-node, .charge-node.dots > div, .map-legend .hyper-charge-node, .hyper-charge-node.dots > div, .map-legend .gas-node, .gas-node.dots > div, .map-legend .city-terminal, .city-terminal.dots > div, .map-legend .mission-terminal, .mission-terminal.dots > div, .map-legend .plant-z, .plant-z.dots > div, .map-legend .wyvern-nest, .wyvern-nest.dots > div, .map-legend .ice-wyvern-nest, .ice-wyvern-nest.dots > div, .map-legend .drake-nest, .drake-nest.dots > div, .map-legend .cave-loot, .cave-loot.dots > div, .map-legend .deinonychus-nest, .deinonychus-nest.dots > div, .map-legend .magmasaur-nest, .magmasaur-nest.dots > div, .map-legend .poison-tree, .poison-tree.dots > div, .map-legend .beaver-dam, .beaver-dam.dots > div, .map-legend .saddlebag, .saddlebag.dots > div, .map-legend .anthill, .anthill.dots > div, .map-legend .mutagel, .mutagel.dots > div, .map-legend .mutagen-bulb, .mutagen-bulb.dots > div, .map-legend .crystal-rich, .crystal-rich.dots > div, .map-legend .ambergris, .ambergris.dots > div { height:7px; width:7px; }

.hide-obelisk-red .obelisk-red, .hide-obelisk-green .obelisk-green, .hide-obelisk-blue .obelisk-blue, .hide-obelisk-yellow .obelisk-yellow, .hide-terminal .terminal, .hide-rockwell-prime-terminal .rockwell-prime-terminal, .hide-water-vein .water-vein, .hide-oil-rock .oil-rock, .hide-oil-vein .oil-vein, .hide-oil-vent .oil-vent, .hide-oxy-vents .oxy-vents, .hide-salt .salt, .hide-sulfur .sulfur, .hide-clay .clay, .hide-cactus .cactus, .hide-crystal .crystal, .hide-crystal-rich .crystal-rich, .hide-obsidian .obsidian, .hide-silica .silica, .hide-black-pearl .black-pearl, .hide-river-rock .river-rock, .hide-metal .metal, .hide-metal-rich .metal-rich, .hide-metal-underwater .metal-underwater, .hide-rare-flower .rare-flower, .hide-rockarrot .rockarrot, .hide-savoroot .savoroot, .hide-silk .silk, .hide-polymer .polymer, .hide-keratin .keratin, .hide-element-ore .element-ore, .hide-dust-rich .dust-rich, .hide-element-shard .element-shard, .hide-ambergris .ambergris, .hide-mutagel .mutagel, .hide-mutagen-bulb .mutagen-bulb, .hide-gem-blue .gem-blue, .hide-gem-green .gem-green, .hide-gem-red .gem-red, .hide-charge-node .charge-node, .hide-hyper-charge-node .hyper-charge-node, .hide-gas-node .gas-node, .hide-city-terminal .city-terminal, .hide-mission-terminal .mission-terminal, .hide-element-node .element-node, .hide-geyser .geyser, .hide-wyvern-nest .wyvern-nest, .hide-ice-wyvern-nest .ice-wyvern-nest, .hide-drake-nest .drake-nest, .hide-dossier .dossier, .hide-plant-z .plant-z, .hide-poison-tree .poison-tree, .hide-artifact .artifact, .hide-underwater-dome .underwater-dome, .hide-cave-entrance .cave-entrance, .hide-poi .poi, .hide-cave-loot .cave-loot, .hide-sea-loot .sea-loot, .hide-deinonychus-nest .deinonychus-nest, .hide-crate .crate, .hide-crateCave .crateCave, .hide-crateDungeon .crateDungeon, .hide-crateSurface .crateSurface, .hide-test .test, .hide-beaver-dam .beaver-dam, .hide-saddlebag .saddlebag, .hide-anthill .anthill, .hide-rot0 .rot0, .hide-rot1 .rot1, .hide-rot2 .rot2, .hide-rot3 .rot3, .hide-rot4 .rot4, .hide-rot5 .rot5, .hide-rot6 .rot6, .hide-rot7 .rot7 { display: none; }

.map-legend .rockwell-prime-terminal, .rockwell-prime-terminal.dots > div { width: 20px; height: 20px; background-color: #bd2fb3; border: 1px solid black; }

.map-legend .water-vein, .water-vein.dots > div { background-color: cyan; border: 1px solid black; }

.map-legend .oil-rock, .oil-vein, .oil-rock, .oil-vein.dots > div { background-color: #3B3131; border: 1px solid white; }

.map-legend .salt, .salt.dots > div { background-color: #679dae; border: 1px solid black; }

.map-legend .sulfur, .sulfur.dots > div { background-color: yellow; border: 1px solid black; }

.map-legend .clay, .clay.dots > div { background-color: #FFD800; border: 1px solid black; }

.map-legend .cactus, .cactus.dots > div { width: 4px; height: 4px; background-color: lightgreen; border: 1px solid green; } .map-legend .crystal, .crystal.dots > div { background-color: white; border: 1px solid black; }

.map-legend .crystal-rich, .crystal-rich.dots > div { background-color: #caddde; border: 1px solid black; }

.map-legend .obsidian, .obsidian.dots > div { background-color: #2F30A2; border: 1px solid white; }

.map-legend .silica, .silica.dots > div { background-color: pink; border: 1px solid black; }

.map-legend .black-pearl, .black-pearl.dots > div { background-color: magenta; border: 1px solid black; }

.map-legend .river-rock, .river-rock.dots > div { background-color: brown; border: 1px solid black; }

.map-legend .metal, .metal.dots > div { background-color: silver; border: 1px solid black; }

.map-legend .metal-rich, .metal-rich.dots > div { background-color: goldenrod; border: 1px solid black; }

.map-legend .metal-underwater, .metal-underwater.dots > div { background-color: teal; border: 1px solid black; }

.map-legend .rare-flower, .rare-flower.dots > div { background-color: #ADD8E6; border: 1px solid black; }

.map-legend .rockarrot, .rockarrot.dots > div { background-color: #3BD319; border: 1px solid black; }

.map-legend .savoroot, .savoroot.dots > div { background-color: #2B9111; border: 1px solid black; }

.map-legend .silk, .silk.dots > div { background-color: #9B31E2; border: 1px solid black; }

.map-legend .polymer, .polymer.dots > div { background-color: #678396; border: 1px solid black; }

.map-legend .keratin, .keratin.dots > div { background-color: #CBB195; border: 1px solid black; }

.map-legend .element-ore, .element-ore.dots > div { background-color: #E577DF; border: 1px solid black; }

.map-legend .dust-rich, .dust-rich.dots > div { background-color: #c195ed; border: 1px solid black; }

.map-legend .element-shard, .element-shard.dots > div { background-color: #E577DF; border: 1px solid black; }

.map-legend .ambergris, .ambergris.dots > div { background-color: #dbc981; border: 1px solid black; }

.map-legend .mutagel, .mutagel.dots > div { background-color: #6f0db5; border: 1px solid black; }

.map-legend .mutagen-bulb, .mutagen-bulb.dots > div { background-color: #5e0c99; border: 1px solid black; }

.map-legend .gem-blue, .gem-blue.dots > div { background-color: #5091CD; border: 1px solid black; }

.map-legend .gem-green, .gem-green.dots > div { background-color: #60AF33; border: 1px solid black; }

.map-legend .gem-red, .gem-red.dots > div { background-color: #E26F78; border: 1px solid black; }

.map-legend .charge-node, .charge-node.dots > div { background-color: #77FF97; border: 1px solid black; }

.map-legend .hyper-charge-node, .hyper-charge-node.dots > div { background-color: #63D0FF; border: 1px solid black; }

.map-legend .gas-node, .gas-node.dots > div { background-color: #FF93E6; border: 1px solid black; }

.map-legend .element-node, .element-node.dots > div { width: 14px; height: 14px; background-color: #99004D; border: 1px solid black; }

.map-legend .geyser, .geyser.dots > div { width: 14px; height: 14px; background-color: #0066FF; border: 1px solid black; }

.city-terminal, .map-legend .mission-terminal, .mission-terminal.dots > div { background-color: #c0c0c0; border: 1px solid black; }

.map-legend .plant-z, .plant-z.dots > div { background-color: #FF2B23; border: 1px solid black; }

.map-legend .wyvern-nest, .wyvern-nest.dots > div { background-color: #0094FF; border: 1px solid black; }

.map-legend .ice-wyvern-nest, .ice-wyvern-nest.dots > div { background-color: #8bcff7; border: 1px solid black; }

.map-legend .drake-nest, .drake-nest.dots > div { background-color: #FFAA00; border: 1px solid black; }

.map-legend .dossier, .dossier.dots > div { width: 10px; height: 10px; background-color: #00cccc; border: 1px solid black; }

.map-legend .note, .note.dots > div { width: 10px; height: 10px; background-color: #cca8cc; border: 1px solid black; }

.map-legend .glitch, .glitch.dots > div { width: 12px; height: 12px; background-color: #bf82bf; border: 1px solid black; }

.map-legend .magmasaur-nest, .magmasaur-nest.dots > div { background-color: #fc7f03; border: 1px solid black; }

.map-legend .poison-tree, .poison-tree.dots > div { background-color: #c9eb34; border: 1px solid black; }

.map-legend .artifact, .artifact.dots > div { width: 12px; height: 12px; background-color: yellow; border: 1px solid black; }

.map-legend .underwater-dome, .underwater-dome.dots > div { width: 24px; height: 24px; background-color: white; border: 1px solid black; }

.map-legend .cave-entrance, .cave-entrance.dots > div { width: 10px; height: 10px; background-color: white; border: 1px solid black; }

.map-legend .poi, .poi.dots > div { width: 14px; height: 14px; background-color: #dda0dd; border: 1px solid black; }

.map-legend .cave-loot, .cave-loot.dots > div { background-color: lime; border: 1px solid black; }

.map-legend .sea-loot, .sea-loot.dots > div { width: 10px; height: 10px; background-color: red; border: 1px solid black; }

.map-legend .deinonychus-nest, .deinonychus-nest.dots > div { background-color: #d900ff; border: 1px solid black; }

.map-legend .beaver-dam, .beaver-dam.dots > div { background-color: #9e5e03; border: 1px solid black; }

.map-legend .saddlebag, .saddlebag.dots > div { background-color: #c7879a; border: 1px solid black; }

.map-legend .anthill, .anthill.dots > div { background-color: #9c9694; border: 1px solid black; }

.map-legend .crate, .crate.dots > div, .map-legend .crateCave, .crateCave.dots > div, .map-legend .crateDungeon, .crateDungeon.dots > div, .map-legend .crateSurface, .crateSurface.dots > div { width: 15px; height: 15px; }

.map-legend .location-restricted, .location-restricted.dots > div { width: 14px; height: 14px; background-color: yellow; border: 1px solid black; }

.map-legend .location-prohibited, .location-prohibited.dots > div { width:14px; height:14px; background-color:#f70102; border:2px solid #812f1a; }

div.dot.cave{ border-width: 2px; }

.map-legend .crate., .crate..dots > div { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.legend.crate { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.map-legend .crateCave., .crateCave..dots > div { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.legend.crateCave { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.map-legend .crateDungeon., .crateDungeon..dots > div { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.legend.crateDungeon { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.map-legend .crateSurface., .crateSurface..dots > div { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.legend.crateSurface { background-image: url(//ark.gamepedia.com/media/); background-size: 100% 100%; border-radius: 0; }

.map-legend .test, .test.dots > div { width: 14px; height: 14px; background-color: #000080; border: 1px solid black; }