Widget:MapStyles

Mobile App users need to view this page in a browser to use the map fully.
<style>
.full-container {

```
 display: inline-block;
 padding: 5px;
 border: 1px solid #505050;
 background-color: #282828;
 width: 1050px;

```

}

.legend-container {

```
 display: inline-block;
 padding-right: 10px;
 float: left;
 max-width: 210px;

```

}

.map-container {

```
 position: relative;

```

}

.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: white;
   text-shadow: 0 0 0.1em #86e1ff;

```

}

.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 {

```
 position: absolute;
 line-height: 0;
 padding: 0;
 border-radius: 50%;

```

}

.map-container .square {

```
 position: absolute;
 background-color: rgba(255,0,0,0.7);
 border-radius: 5px;
 border: 2px solid black;

```

}

.map-container .point

```
{ width: 7px;
 height: 7px;
 background-color: rgba(255,0,0,0.7);
 border: 1px solid black;

```

}

1. top-notice {

```
 padding: 5px;
 vertical-align: middle;
 width: 1060px;
 min-height:115px;
 overflow:visible;

```

}
.top-notice-image {

```
 position: relative;
 top: -100px;
 height: 0;
 z-index: 1;

```

}
.top-notice-text {

```
 vertical-align: middle;
 white-space:normal;
 font-size:22px;
 padding-left:10px;

```

}
.top-notice-text a {

```
 font-weight: bold;

```

}

1. legend-notice {

```
 padding: 10px;
 width: 210px;

```

}
.notice {

```
 display: inline-block;
 margin-bottom: 10px;
 border: 1px solid #505050;
 background-color: #282828;

```

}
.hide-cave .map-container .cave {

```
 display: none;

```

}

.city-red {

```
 width:20px;
 height:20px;
 background-color:#f70102;
 border:2px solid #812f1a;

```

}
.hide-city-red .city-red {

```
 display: none;

```

}
.city-green {

```
 width:20px;
 height:20px;
 background-color:#14e800;
 border:2px solid #207203;
 margin-left:3px;

```

}
.hide-city-green .city-green {

```
 display: none;

```

}
.city-blue {

```
 width:20px;
 height:20px;
 background-color:#00a5ff;
 border:2px solid #266dbf;

```

}
.hide-city-blue .city-blue {

```
 display: none;

```

}

.water-vein {

```
 width: 7px;
 height: 7px;
 background-color: cyan;
 border: 1px solid black;

```

}
.hide-water-vein .water-vein {

```
 display: none;

```

}

.oil-rock, .oil-vein {

```
 width: 7px;
 height: 7px;
 background-color: #3B3131;
 border: 1px solid black;

```

}
.hide-oil-rock .oil-rock, .hide-oil-vein .oil-vein {

```
 display: none;

```

}

.salt {

```
 width: 7px;
 height: 7px;
 background-color: #679dae;
 border: 1px solid black;

```

}
.hide-salt .salt {

```
 display: none;

```

}

.sulfur {

```
 width: 7px;
 height: 7px;
 background-color: yellow;
 border: 1px solid black;

```

}
.hide-sulfur .sulfur {

```
 display: none;

```

}

.cactus {

```
 width: 4px;
 height: 4px;
 background-color: lightgreen;
 border: 1px solid green;

```

}
.hide-cactus .cactus {

```
 display: none;

```

}

.mithril {

```
 width: 7px;
 height: 7px;
 background-color: white;
 border: 1px solid black;

```

}
.hide-mithril .mithril {

```
 display: none;

```

}

.lightstone {

```
 width: 7px;
 height: 7px;
 background-color: #2F30A2;
 border: 1px solid black;

```

}
.hide-lightstone .lightstone {

```
 display: none;

```

}

.silica {

```
 width: 7px;
 height: 7px;
 background-color: pink;
 border: 1px solid black;

```

}
.hide-silica .silica {

```
 display: none;

```

}

.black-pearl {

```
 width: 7px;
 height: 7px;
 background-color: magenta;
 border: 1px solid black;

```

}
.hide-black-pearl .black-pearl {

```
 display: none;

```

}

.darkstone {

```
 width: 7px;
 height: 7px;
 background-color: brown;
 border: 1px solid black;

```

}
.hide-darkstone .darkstone {

```
 display: none;

```

}

.iron {

```
 width: 7px;
 height: 7px;
 background-color: silver;
 border: 1px solid black;

```

}
.hide-iron .iron {

```
 display: none;

```

}

.copper {

```
 width: 7px;
 height: 7px;
 background-color: goldenrod;
 border: 1px solid black;

```

}
.hide-copper .copper {

```
 display: none;

```

}

.metal-underwater {

```
 width: 7px;
 height: 7px;
 background-color: teal;
 border: 1px solid black;

```

}
.hide-metal-underwater .metal-underwater {

```
 display: none;

```

}

.rare-flower {

```
 width: 7px;
 height: 7px;
 background-color: #ADD8E6;
 border: 1px solid black;

```

}
.hide-rare-flower .rare-flower {

```
 display: none;

```

}

.rockarrot {

```
 width: 7px;
 height: 7px;
 background-color: #FFA62F;
 border: 1px solid black;

```

}
.hide-rockarrot .rockarrot {

```
 display: none;

```

}

.savoroot {

```
 width: 7px;
 height: 7px;
 background-color: #C68E17;
 border: 1px solid black;

```

}
.hide-savoroot .savoroot {

```
 display: none;

```

}

.dossier {

```
 width: 10px;
 height: 10px;
 background-color: #00cccc;
 border: 1px solid black;

```

}
.hide-dossier .dossier {

```
 display: none;

```

}

.note {

```
 width: 10px;
 height: 10px;
 background-color: #cca8cc;
 border: 1px solid black;

```

}
.hide-note .note {

```
 display: none;

```

}

.artifact {

```
 width: 12px;
 height: 12px;
 background-color: yellow;
 border: 1px solid black;

```

}
.hide-artifact .artifact {

```
 display: none;

```

}

.underwater-dome {

```
 width: 24px;
 height: 24px;
 background-color: white;
 border: 1px solid black;

```

}
.hide-underwater-dome .underwater-dome {

```
 display: none;

```

}

.cave-entrance {

```
 width: 10px;
 height: 10px;
 background-color: white;
 border: 1px solid black;

```

}
.hide-cave-entrance .cave-entrance {

```
 display: none;

```

}

.poi {

```
 width: 14px;
 height: 14px;
 background-color: #dda0dd;
 border: 1px solid black;

```

}
.hide-poi .poi {

```
 display: none;

```

}

.cave-loot {

```
 width: 7px;
 height: 7px;
 background-color: lime;
 border: 1px solid black;

```

}
.hide-cave-loot .cave-loot {

```
 display: none;

```

}

.sea-loot {

```
 width: 10px;
 height: 10px;
 background-color: red;
 border: 1px solid black;

```

}
.hide-sea-loot .sea-loot {

```
 display: none;

```

}

.crate {

```
 width: 15px;
 height: 15px;

```

}
.crate. {

```
 background-image: url(//ark.gamepedia.com/);
 background-size: 100% 100%;
 border-radius: 0;

```

}
.legend.crate {

```
 background-image: url(//ark.gamepedia.com/);
 background-size: 100% 100%;
 border-radius: 0;

```

}

.hide-crate .crate {

```
 display: none;

```

}

.test {

```
 width: 14px;
 height: 14px;
 background-color: #000080;
 border: 1px solid black;

```

}
.hide-test .test {

```
 display: none;

```

}
</style>