Difference between revisions of "MediaWiki:Common.css"

m
m
Line 10: Line 10:
 
}
 
}
 
*/
 
*/
 +
@import url('https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911');
 +
@font-face {
 +
font-family: 'Avatar';
 +
src: url('../w/fonts/avatar-webfont.woff') format('woff');
 +
font-weight: 900;
 +
font-style: italic;
 +
}
 +
 +
/* CSS placed here will be applied to all skins */
 +
 +
/* Global css, sets the background and text color for the entire wiki. */
 +
 +
/*CSS applied to specific namespaces (titles) via namespace ID.  Current Namespace ID's are :
 +
 +
ns-3000  Ultima Online
 +
ns-3002  Shards Online
 +
ns-3004  Shroud of the Avatar
 +
a:link {
 +
color: #232323;
 +
}
 +
*/
 +
 +
/* Force a minimum height for empty/small pages, so they don't collapse under Xen */
 +
.xfMediaWiki {
 +
    min-height: 40em;
 +
}
 +
 +
.rounded {
 +
  border-radius: 25px;
 +
}
 +
 +
/* Cleaner pixel art scaling */
 +
img {
 +
    -ms-interpolation-mode: nearest-neighbor;
 +
    image-rendering: -moz-crisp-edges;
 +
    image-rendering: -o-crisp-edges;
 +
    image-rendering: -webkit-optimize-contrast;
 +
    image-rendering: crisp-edges;
 +
}
 +
 +
/* Auto-prefixing */
 +
* {
 +
--clip-path: initial;
 +
-webkit-clip-path: var(--clip-path);
 +
clip-path: var(--clip-path);
 +
}
 +
 +
.mw-body h2:before,
 +
.mw-body h3:before,
 +
.mw-body h4:before,
 +
.mw-body h5:before,
 +
.mw-body h6:before {
 +
  content: '';
 +
  width: 100%;
 +
  height: 1em;
 +
  display: inline-block;
 +
}
 +
 +
.mw-body h1,
 +
.mw-body h2 {
 +
    font-family: Georgia, Times, serif;
 +
    margin-top: 1em;
 +
    margin-bottom: .25em;
 +
    line-height: 1.3;
 +
    padding: 0
 +
}
 +
.mw-body h3,
 +
.mw-body h4 {
 +
    font-variant: small-caps
 +
}
 +
.mw-body h1 {
 +
    border-bottom: 0!important;
 +
    font-size: 2em
 +
}
 +
.mw-body h2 {
 +
    border-bottom: 1px solid #AAA;
 +
    font-size: 1.8em
 +
}
 +
.mw-body h2,
 +
.mw-body h3 {
 +
    font-weight: 900
 +
}
 +
.mw-body h3 {
 +
    font-size: 1.5em
 +
}
 +
.mw-body h3,
 +
.mw-body h4,
 +
.mw-body h5,
 +
.mw-body h6 {
 +
    margin-top: .3em;
 +
    margin-bottom: 0;
 +
    line-height: 1.6;
 +
    padding-top: .5em;
 +
    padding-bottom: 0
 +
}
 +
.mw-body h4 {
 +
    font-size: 1.35em;
 +
    font-weight: 800
 +
}
 +
.mw-body h5 {
 +
    font-size: 1.18em;
 +
    font-weight: 700
 +
}
 +
.mw-body h6 {
 +
    font-size: 1em;
 +
    font-weight: 600
 +
}
 +
 +
#toc {
 +
    margin-top: 2em;
 +
    margin-bottom: 2em;
 +
}
 +
 +
.ns-3000, li {
 +
    list-style: unset;
 +
}
 +
 +
.uofiction {
 +
  font-family: 'Goudy Bookletter 1911', serif;
 +
  text-indent: 25px;
 +
  font-size: 125%;
 +
  line-height: 1.4;
 +
  max-width: 38em;
 +
}
 +
 +
.uofiction::first-letter {
 +
  font-family: 'Avatar', cursive;
 +
  font-size: 250%;
 +
  padding-right:.1em;
 +
  padding-left:.1em;
 +
}
 +
 +
.uofiction p {
 +
  padding-top: 1em;
 +
}
 +
 +
/* Infobox template style */
 +
.ns-3000, .infobox {
 +
    border: 1px solid #aaa;
 +
    border-spacing: 3px;
 +
    background-color: #fff;
 +
    color: black;
 +
    /* @noflip */
 +
    margin: 0.5em 0 0.5em 1em;
 +
    padding: 0.2em;
 +
    /* @noflip */
 +
    float: right;
 +
    /* @noflip */
 +
    font-size: 88%;
 +
    line-height: 1.5em;
 +
    max-width: 28%;
 +
    min-width: 28%;
 +
}
 +
.ns-3000, .infobox a {
 +
    color: #444;
 +
}
 +
.ns-3000, .infobox caption {
 +
    font-size: 125%;
 +
    font-weight: bold;
 +
    padding: 0.2em;
 +
}
 +
.ns-3000, .infobox td,
 +
.infobox th {
 +
    vertical-align: top;
 +
    /* @noflip */
 +
    text-align: left;
 +
    padding-top: 5px;
 +
}
 +
 +
/* Overrides the border otherwise drawn on all tables. */
 +
.ns-3000, table.wikitable {
 +
  border: 0;
 +
  color: lightgrey;
 +
}
 +
 +
.ns-3000, table.dpltable > * > tr > th {
 +
  color: black;
 +
}
 +
 +
/* Centers and crops the pen icon on 'alternate name' message boxes. */
 +
.ns-3000, .penimage {
 +
    height: 19px;
 +
    width: 21px;
 +
    object-fit: none;
 +
    object-position: 20% 0;
 +
}
 +
 +
/* Centers an image in an infobox. */
 +
.ns-3000, .imagecell {
 +
    padding: 1em 0!important;
 +
    text-align: center!important;
 +
}
 +
 +
/* Formats left-column text in infoboxes. */
 +
.ns-3000, .infobox tr td:first-of-type {
 +
    font-weight: 600;
 +
    padding-left: 5px;
 +
    padding-right: 8px;
 +
}
 +
 +
/* Hides undesirable borders on the top-left cell of a table containing numberic data. */
 +
.ns-3000, .datatable tr:first-of-type td:first-of-type
 +
{
 +
    border-left: 0;
 +
    border-top: 0;
 +
}
 +
 +
/* Centers text in table cells (generally for tables containing numeric data). */
 +
.ns-3000, .datatable tr td:not(:first-of-type) {
 +
    text-align: center;
 +
}
 +
 +
/* Adds coloring to the top cell in infoboxes. */
 +
.ns-3000, .titlecell {
 +
    background-color: #333;
 +
    color: white;
 +
    padding: 2px 8px;
 +
}
 +
 +
/* Elemental cell coloring */
 +
.ns-3000, .cold {
 +
    background-color: #2dbffd;
 +
}
 +
.ns-3000, .energy {
 +
    background-color: #d7d;
 +
}
 +
.ns-3000, .fire {
 +
    background-color: #db7;
 +
}
 +
.ns-3000, .physical {
 +
    background-color: #ddd;
 +
}
 +
.ns-3000, .poison {
 +
    background-color: #7d7;
 +
}
 +
.ns-3000, a.new
 +
{
 +
    color: rgb(221, 68, 68);
 +
}
 +
 +
/* Hide page titles; UO makes for super long titles, and allows a sort of work around to ampersands in item names. */
 +
.ns-3000, .firstHeading {
 +
    display: none;
 +
}
 +
 +
/* Don't show edit links next to items in hue page item lists. */
 +
.UOhuepage-itemlist>ul>li>.mw-whatlinkshere-tools {
 +
    display: none;
 +
}
 +
 +
/* Center the text in a table. */
 +
table.centeredtext td {
 +
  text-align: center;
 +
  vertical-align: middle;
 +
}
 +
 +
/* Tables on disambiguation pages. */
 +
 +
.disambigtable {
 +
  width: 80%
 +
}
 +
 +
.disambigtable tbody tr:nth-child(odd) {
 +
  /* background-color: #ddd; */
 +
}
 +
 +
.disambigtable td,.disambigtable th {
 +
  border: dotted 1px grey;
 +
}
 +
 +
/* General tweaking */
 +
.indent {
 +
    margin-left: 4em!important;
 +
}
 +
 +
.verticalcenterimg img {
 +
    vertical-align: middle;
 +
}
 +
 +
.invisibletable > * > tr > td, .invisibletable > * > tr > th {
 +
        border-style: none!important;
 +
}
 +
 +
/* Override defult mediawiki colors to allow the background to show through. */
 +
.wikitable, .toc, .catlinks {
 +
    background-color:transparent!important;
 +
}
 +
 +
/* Override default text colors in the image uploader to make the text readable. */
 +
#upload-list a, .file-title {
 +
    color: darkblue;
 +
}
 +
 +
.mw-collapsible-content:before {
 +
    content: " ";
 +
    display: block;
 +
    clear: both;
 +
}
 +
 +
/* Main page classes */
 +
.mainpage_row {
 +
  display:flex;
 +
  flex-direction:row;
 +
  flex-wrap:nowrap;
 +
  justify-content:center;
 +
  align-items:center;
 +
}
 +
.mainpage_verticalrow {
 +
  display:flex;
 +
  flex-direction:column;
 +
  flex-wrap:nowrap;
 +
  justify-content:center;
 +
  align-items:baseline;
 +
}
 +
.mainpage_column {
 +
  flex:1;
 +
  padding:2rem;
 +
}
 +
.mainlinks img {
 +
    transform: translateY(12px);
 +
}
 +
.dyelinks img {
 +
    transform: translateY(30px);
 +
}
 +
.dragon img {
 +
    transform: translateX(100px);
 +
}
 +
 +
/* Start UO Atlas css. */
 +
.map {
 +
    z-index: -999;
 +
    position: absolute;
 +
}
 +
.map-holder {
 +
    transform-origin: 0 0;
 +
    min-height: 700px;
 +
    transition: all 10ms ease;
 +
}
 +
.map img,.map canvas {
 +
    -webkit-box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
 +
    -moz-box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
 +
    box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
 +
}
 +
.pin {
 +
    transform: scale(5.5);
 +
    display: inline-block;
 +
    position: absolute;
 +
    opacity: .8;
 +
    z-index:999;
 +
}
 +
.map-holder {
 +
    --mulModA: 1;
 +
    --mulModB: 1;
 +
    --rotation: 0deg;
 +
}
 +
.pin img {
 +
    z-index: 0;
 +
}
 +
.pin:hover:after,.menutrigger:hover:after {
 +
    background: rgba(0,0,0,.7);
 +
    -webkit-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
 +
    -moz-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
 +
    box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
 +
    -webkit-border-radius: 3px;
 +
    -moz-border-radius: 3px;
 +
    border-radius: 3px;
 +
    color: #fff;
 +
    font-family: "Helvetica Neue", Helvetica, Sans;
 +
    position: absolute;
 +
    text-align: center;
 +
    display: block;
 +
    padding: 6px 10px 10px 10px;
 +
    text-shadow: 0 -1px 0 #000;
 +
    white-space: nowrap;
 +
    z-index: 98;
 +
    left: -30px;
 +
    top: 15px; 
 +
    opacity: 1;
 +
}
 +
.pin:hover:after {
 +
    content: attr(data-name);
 +
}
 +
.menutrigger:hover:after {
 +
    content: "Map Tools";
 +
}
 +
.pin.highlight{
 +
-webkit-animation: flash linear 1s infinite;
 +
animation: flash linear 1s infinite;
 +
}
 +
.pin-circle {
 +
    border: 3px solid red;
 +
    height: 40px;
 +
    width: 40px;
 +
    -moz-border-radius: 50%;
 +
    -webkit-border-radius: 50%;
 +
    position: absolute;
 +
    left: -40%;
 +
    top: -50%;
 +
    -webkit-animation: flash linear 1s infinite;
 +
    animation: flash linear 1s infin
 +
}
 +
@-webkit-keyframes flash {
 +
0% { opacity: 1;scale(4) }
 +
50% { opacity: .1;scale(1) }
 +
100% { opacity: 1;scale(4) }
 +
}
 +
@keyframes flash {
 +
0% { opacity: 1;scale(4) }
 +
50% { opacity: .1;scale(1) }
 +
100% { opacity: 1;scale(4) }
 +
}
 +
.largeFloatingInstructions {
 +
    position: fixed;
 +
    bottom: 1%;
 +
    left: 1%;
 +
    font-size: 36px;
 +
    color: #3d6c99;
 +
    z-index: 5000;
 +
    background-color: black;
 +
    padding: 10px;
 +
    border-radius: 20px;
 +
    border-style: double;
 +
}
 +
#UOAtlas {
 +
    background-image: url(http://stratics.com/w/images/6/67/UO-original-map-white-outline.png);
 +
    background-size: 75% 100%;
 +
    width: 100%;
 +
    min-height: 700px;
 +
    background-repeat: no-repeat;
 +
    background-position: 40%;
 +
}
 +
.menutrigger {
 +
    top: 5%;
 +
    left: -10%;
 +
    cursor: move;
 +
}
 +
.radarMap {
 +
    --rotation: 45deg;
 +
    --mulModA: 1.333;
 +
    transform: translateX(150%) rotate(var(--rotation)) scale(.75);
 +
}
 +
.pin.quest-npc, .pin.counselors-guild {
 +
    --mulModB: .8;
 +
}
 +
.pin.stealable-item {
 +
    --mulModB: .5;
 +
}
 +
.pin.counselors-guild a img {
 +
    -webkit-filter: invert(1) hue-rotate(167deg);
 +
}
 +
.pin:hover:after {
 +
    transform: scale(calc(1 / var(--mulModB))) rotate(calc(0deg - var(--rotation)));
 +
}
 +
.menutrigger:hover:after  {
 +
    transform: rotate(calc(0deg - var(--rotation)));
 +
}
 +
.pin a img  {
 +
    transform: rotate(calc(0deg - var(--rotation)))!important;
 +
}
 +
@media (max-width: 1680px) {
 +
    .familyTree {
 +
        transform: scale(.7);
 +
        transform-origin: top left;
 +
    }
 +
    .map-holder {
 +
        transform: scale(.12);
 +
    }
 +
    .pin {
 +
      --multiplier: 8.33;
 +
    }
 +
}
 +
@media (max-width: 1920px)  and (min-width: 1681px){
 +
    .map-holder {
 +
        transform: scale(.18);
 +
    }
 +
    .pin {
 +
      --multiplier: 5.55;
 +
    }
 +
}
 +
@media (max-width: 2560px)  and (min-width: 1921px){
 +
    .map-holder {
 +
        transform: scale(.2);
 +
    }
 +
    .pin {
 +
      --multiplier: 5;
 +
    }
 +
}
 +
@media (min-width: 2561px){
 +
    .map-holder {
 +
        transform: scale(.23);
 +
    }
 +
    .pin {
 +
      --multiplier: 4.34;
 +
    }
 +
}
 +
.pin.scale2    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2)); }
 +
.pin.scale2-5  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2.5)); }
 +
.pin.scale2-7  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2.7)); }
 +
.pin.scale3    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3)); }
 +
.pin.scale3-25 { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3.25)); }
 +
.pin.scale3-5  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3.5)); }
 +
.pin.scale4    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 4)); }
 +
.pin.scale5    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 5)); }
 +
.pin.scale5-2  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 5.2)); }
 +
.pin.scale6    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 6)); }
 +
.pin.scale7    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 7)); }
 +
.pin.scale8    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 8)); }
 +
.pin.scale9    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 9)); }
 +
.pin.scale10  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 10)); }
 +
.pin.scale11  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 11)); }
 +
.pin.scale12  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 12)); }
 +
.pin.scale13  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 13)); }
 +
.pin.scale14  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 14)); }
 +
.pin.scale15  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 15)); }
 +
.pin.scale16  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 16)); }
 +
.pin.scale17  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 17)); }
 +
.pin.scale18  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 18)); }
 +
.pin.scale19  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 19)); }
 +
.pin.scale20  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 20)); }
 +
.pin.scale21  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 21)); }
 +
.pin.scale22  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 22)); }
 +
.pin.scale23  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 23)); }
 +
.pin.scale24  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 24)); }
 +
.pin.scale25  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 25)); }
 +
.pin.scale26  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 26)); }
 +
.pin.scale27  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 27)); }
 +
.pin.scale28  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 28)); }
 +
.pin.scale29  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 29)); }
 +
.pin.scale30  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 30)); }
 +
.pin.scale31  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 31)); }
 +
.pin.scale32  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 32)); }
 +
.pin.scale33  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 33)); }
 +
.pin.scale34  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 34)); }
 +
.pin.scale35  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 35)); }
 +
 +
.icon {
 +
    image-rendering: pixelated;
 +
    position: relative;
 +
}
 +
.icon-archers_guild {
 +
    margin: -3px -232px -213px -3px;
 +
    --clip-path: inset(3px 232px 213px 3px);
 +
    transform-origin: 8.5px 10.5px;
 +
}
 +
 +
.icon-architect {
 +
    margin: -42px -86px -169px -140px;
 +
    --clip-path: inset(42px 86px 169px 140px);
 +
    transform-origin: 148px 54px;
 +
}
 +
 +
.icon-armaments_guild {
 +
    margin: -3px -211px -213px -24px;
 +
    --clip-path: inset(3px 211px 213px 24px);
 +
    transform-origin: 29.5px 10.5px;
 +
}
 +
 +
.icon-armorer {
 +
    margin: -3px -181px -208px -45px;
 +
    --clip-path: inset(3px 181px 208px 45px);
 +
    transform-origin: 53px 15px;
 +
}
 +
 +
.icon-armorers_guild {
 +
    margin: -3px -160px -213px -75px;
 +
    --clip-path: inset(3px 160px 213px 75px);
 +
    transform-origin: 80.5px 10.5px;
 +
}
 +
 +
.icon-artist {
 +
    margin: -90px -80px -122px -145px;
 +
    --clip-path: inset(90px 80px 122px 145px);
 +
    transform-origin: 153.5px 101.5px;
 +
}
 +
 +
.icon-artists_guild {
 +
    margin: -103px -27px -112px -207px;
 +
    -webkit-clip-path: inset(103px 27px 112px 207px);
 +
    transform-origin: 213px 111px;
 +
}
 +
 +
.icon-assasins_guild {
 +
    margin: -3px -139px -213px -96px;
 +
    --clip-path: inset(3px 139px 213px 96px);
 +
    transform-origin: 101.5px 10.5px;
 +
}
 +
 +
.icon-baker {
 +
    margin: -3px -109px -208px -117px;
 +
    --clip-path: inset(3px 109px 208px 117px);
 +
    transform-origin: 125px 15px;
 +
}
 +
 +
.icon-bank {
 +
    margin: -3px -78px -208px -147px;
 +
    --clip-path: inset(3px 78px 208px 147px);
 +
    transform-origin: 155px 15.5px;
 +
}
 +
 +
.icon-barber {
 +
    margin: -3px -58px -213px -177px;
 +
    --clip-path: inset(3px 58px 213px 177px);
 +
    transform-origin: 182.5px 10.5px;
 +
}
 +
 +
.icon-barbers_guild {
 +
    margin: -3px -58px -213px -177px;
 +
    --clip-path: inset(3px 58px 213px 177px);
 +
    transform-origin: 182.5px 10.5px;
 +
}
 +
 +
.icon-bard {
 +
    margin: -20px -223px -191px -3px;
 +
    --clip-path: inset(20px 223px 191px 3px);
 +
    transform-origin: 11px 32px;
 +
}
 +
 +
.icon-bardic_guild {
 +
    margin: -16px -160px -200px -75px;
 +
    --clip-path: inset(16px 160px 200px 75px);
 +
    transform-origin: 80.5px 23.5px;
 +
}
 +
 +
.icon-barterers_guild {
 +
    margin: -15px -139px -200px -95px;
 +
    --clip-path: inset(15px 139px 200px 95px);
 +
    transform-origin: 99px 25px;
 +
}
 +
 +
.icon-beekeeper {
 +
    margin: -20px -49px -191px -177px;
 +
    --clip-path: inset(20px 49px 191px 177px);
 +
    transform-origin: 185px 32px;
 +
}
 +
 +
.icon-blacksmiths_guild {
 +
    margin: -16px -139px -200px -96px;
 +
    --clip-path: inset(16px 139px 200px 96px);
 +
    transform-origin: 11px 54px;
 +
}
 +
 +
.icon-blacksmith {
 +
    margin: -42px -223px -169px -3px;
 +
    --clip-path: inset(42px 223px 169px 3px);
 +
    transform-origin: 101.5px 23.5px;
 +
}
 +
 +
.icon-body_of_water {
 +
    margin: -41px -196px -176px -32px;
 +
    --clip-path: inset(41px 196px 176px 32px);
 +
    transform-origin: 37px 52px;
 +
}
 +
 +
.icon-bowyer {
 +
    margin: -42px -167px -169px -59px;
 +
    --clip-path: inset(42px 167px 169px 59px);
 +
    transform-origin: 67px 54px;
 +
}
 +
 +
.icon-bridge {
 +
    margin: -41px -145px -178px -88px;
 +
    --clip-path: inset(41px 145px 178px 88px);
 +
    transform-origin: 92px 49.5px;
 +
}
 +
 +
.icon-butcher {
 +
    margin: -42px -116px -169px -110px;
 +
    --clip-path: inset(42px 116px 169px 110px);
 +
    transform-origin: 118px 54px;
 +
}
 +
 +
.icon-carpenter {
 +
    margin: -42px -86px -169px -140px;
 +
    --clip-path: inset(42px 86px 169px 140px);
 +
    transform-origin: 148px 54px;
 +
}
 +
 +
.icon-cartographer {
 +
    margin: -121px -4px -90px -222px;
 +
    --clip-path: inset(121px 4px 90px 222px);
 +
    transform-origin: 230px 133px;
 +
}
 +
 +
.icon-cavalry_guild {
 +
    margin: -42px -65px -174px -170px;
 +
    --clip-path: inset(42px 65px 174px 170px);
 +
    transform-origin: 175.5px 49.5px;
 +
}
 +
 +
.icon-cave {
 +
    margin: -59px -203px -151px -32px;
 +
    --clip-path: inset(59px 203px 151px 32px);
 +
    transform-origin: 40.5px 66.5px;
 +
}
 +
 +
.icon-champion {
 +
    margin: -41px -45px -168px -190px;
 +
    --clip-path: inset(41px 45px 168px 190px);
 +
    transform-origin: 199px 48.5px;
 +
}
 +
 +
.icon-city {
 +
    margin: -64px -228px -147px -3px;
 +
    --clip-path: inset(64px 228px 147px 3px);
 +
    transform-origin: 11px 73.5px;
 +
}
 +
 +
.icon-cooks_guild {
 +
    margin: -59px -146px -157px -89px;
 +
    --clip-path: inset(59px 146px 157px 89px);
 +
    transform-origin: 94.5px 66.5px;
 +
}
 +
 +
.icon-council_of_mages_faction {
 +
    margin: -64px -177px -143px -53px;
 +
    --clip-path: inset(64px 177px 143px 53px);
 +
    transform-origin: 63px 74px;
 +
}
 +
 +
.icon-counselors_guild {
 +
    margin: -136px -157px -75px -69px;
 +
    --clip-path: inset(136px 157px 75px 69px);
 +
    transform-origin: 77px 148px;
 +
}
 +
 +
.icon-customs {
 +
    margin: -64px -86px -147px -140px;
 +
    --clip-path: inset(64px 86px 147px 140px);
 +
    transform-origin: 148px 76px;
 +
}
 +
 +
.icon-daily_rare {
 +
    margin: -59px -66px -149px -170px;
 +
    --clip-path: inset(59px 66px 149px 170px);
 +
    transform-origin: 179.5px 66px;
 +
}
 +
 +
.icon-dock {
 +
    margin: -63px -50px -153px -189px;
 +
    --clip-path: inset(63px 50px 153px 189px);
 +
    transform-origin: 194.5px 68.5px;
 +
}
 +
 +
.icon-dungeon {
 +
    margin: -80px -152px -127px -79px;
 +
    --clip-path: inset(80px 152px 127px 79px);
 +
    transform-origin: 89px 89.5px;
 +
}
 +
 +
.icon-engineers_guild {
 +
    margin: -186px -80px -30px -154px;
 +
    --clip-path: inset(186px 80px 30px 154px);
 +
    transform-origin: 158px 195.5px;
 +
}
 +
 +
.icon-exit {
 +
    margin: -79px -53px -141px -190px;
 +
    --clip-path: inset(79px 53px 141px 190px);
 +
    transform-origin: 193.5px 82.5px;
 +
}
 +
 +
.icon-farm {
 +
    margin: -92px -236px -128px -3px;
 +
    --clip-path: inset(92px 236px 128px 3px);
 +
    transform-origin: 6.5px 97.5px;
 +
}
 +
 +
.icon-fighters_guild {
 +
    margin: -92px -215px -124px -20px;
 +
    --clip-path: inset(92px 215px 124px 20px);
 +
    transform-origin: 25.5px 99.5px;
 +
}
 +
 +
.icon-fishermans_guild {
 +
    margin: -92px -194px -124px -41px;
 +
    --clip-path: inset(92px 194px 124px 41px);
 +
    transform-origin: 46.5px 99.5px;
 +
}
 +
 +
.icon-fletcher {
 +
    margin: -92px -122px -119px -104px;
 +
    --clip-path: inset(92px 122px 119px 104px);
 +
    transform-origin: 112px 104px;
 +
}
 +
 +
.icon-flight_path {
 +
    margin: -26px -127px -194px -117px;
 +
    --clip-path: inset(26px 127px 194px 117px);
 +
    transform-origin: 120.5px 29px;
 +
}
 +
 +
.icon-fort {
 +
    margin: -20px -106px -187px -131px;
 +
    --clip-path: inset(20px 106px 187px 131px);
 +
    transform-origin: 141px 26.5px;
 +
}
 +
 +
.icon-gate {
 +
    margin: -91px -177px -125px -61px;
 +
    --clip-path: inset(91px 177px 125px 61px);
 +
    transform-origin: 66.5px 97px;
 +
}
 +
 +
.icon-graveyard {
 +
    margin: -91px -108px -125px -132px;
 +
    --clip-path: inset(91px 108px 125px 132px);
 +
    transform-origin: 137.5px 96px;
 +
}
 +
 +
.icon-guild {
 +
    margin: -136px -157px -75px -69px;
 +
    --clip-path: inset(136px 157px 75px 69px);
 +
    transform-origin: 77px 148px;
 +
}
 +
 +
.icon-healers_guild {
 +
    margin: -114px -232px -102px -3px;
 +
    --clip-path: inset(114px 232px 102px 3px);
 +
    transform-origin: 8.5px 121.5px;
 +
}
 +
 +
.icon-healer {
 +
    margin: -92px -49px -119px -177px;
 +
    --clip-path: inset(92px 49px 119px 177px);
 +
    transform-origin: 185px 104px;
 +
}
 +
 +
.icon-herbalist {
 +
    margin: -114px -201px -97px -24px;
 +
    --clip-path: inset(114px 201px 97px 24px);
 +
    transform-origin: 32px 126.5px;
 +
}
 +
 +
.icon-illusionists_guild {
 +
    margin: -114px -181px -102px -54px;
 +
    --clip-path: inset(114px 181px 102px 54px);
 +
    transform-origin: 59.5px 121.5px;
 +
}
 +
 +
.icon-inn {
 +
    margin: -114px -151px -97px -75px;
 +
    --clip-path: inset(114px 151px 97px 75px);
 +
    transform-origin: 83px 126px;
 +
}
 +
 +
.icon-island {
 +
    margin: -114px -126px -102px -105px;
 +
    --clip-path: inset(114px 126px 102px 105px);
 +
    transform-origin: 110.5px 123.5px;
 +
}
 +
 +
.icon-jeweler {
 +
    margin: -114px -95px -97px -130px;
 +
    --clip-path: inset(114px 95px 97px 130px);
 +
    transform-origin: 138px 126.5px;
 +
}
 +
 +
.icon-ladder {
 +
    margin: -176px -203px -34px -36px;
 +
    --clip-path: inset(176px 203px 34px 36px);
 +
    transform-origin: 37.5px 188.5px;
 +
}
 +
 +
.icon-lair {
 +
    margin: -20px -200px -190px -31px;
 +
    --clip-path: inset(20px 200px 190px 31px);
 +
    transform-origin: 39.5px 29.5px;
 +
}
 +
 +
.icon-landmark {
 +
    margin: -115px -79px -105px -161px;
 +
    --clip-path: inset(115px 79px 105px 161px);
 +
    transform-origin: 164.5px 120px;
 +
}
 +
 +
.icon-library {
 +
    margin: -114px -49px -97px -177px;
 +
    --clip-path: inset(114px 49px 97px 177px);
 +
    transform-origin: 185px 126px;
 +
}
 +
 +
.icon-lockpicking_box {
 +
    margin: -21px -180px -188px -55px;
 +
    --clip-path: inset(21px 180px 188px 55px);
 +
    transform-origin: 64px 28.5px;
 +
}
 +
 +
.icon-mage {
 +
    margin: -136px -208px -75px -18px;
 +
    --clip-path: inset(136px 208px 75px 18px);
 +
    transform-origin: 26px 148px;
 +
}
 +
 +
.icon-mages_guild {
 +
    margin: -136px -187px -80px -48px;
 +
    --clip-path: inset(136px 187px 80px 48px);
 +
    transform-origin: 53.5px 143.5px;
 +
}
 +
 +
.icon-mariner {
 +
    margin: -64px -86px -147px -140px;
 +
    --clip-path: inset(64px 86px 147px 140px);
 +
    transform-origin: 148px 76px;
 +
}
 +
 +
.icon-market {
 +
    margin: -136px -157px -75px -69px;
 +
    --clip-path: inset(136px 157px 75px 69px);
 +
    transform-origin: 77px 148px;
 +
}
 +
 +
.icon-merchants_guild {
 +
    margin: -136px -136px -80px -99px;
 +
    --clip-path: inset(136px 136px 80px 99px);
 +
    transform-origin: 104.5px 143.5px;
 +
}
 +
 +
.icon-minax_faction {
 +
    margin: -136px -109px -72px -120px;
 +
    --clip-path: inset(136px 109px 72px 120px);
 +
    transform-origin: 129.5px 146.5px;
 +
}
 +
 +
.icon-miners_guild {
 +
    margin: -136px -89px -80px -146px;
 +
    --clip-path: inset(136px 89px 80px 146px);
 +
    transform-origin: 151.5px 143.5px;
 +
}
 +
 +
.icon-moongate {
 +
    margin: -136px -74px -71px -167px;
 +
    --clip-path: inset(136px 74px 71px 167px);
 +
    transform-origin: 177px 140.5px;
 +
}
 +
 +
.icon-other {
 +
    margin: -136px -58px -81px -181px;
 +
    --clip-path: inset(136px 58px 81px 181px);
 +
    transform-origin: 186px 141.5px;
 +
}
 +
 +
.icon-painter {
 +
    margin: -162px -223px -49px -3px;
 +
    --clip-path: inset(162px 223px 49px 3px);
 +
    transform-origin: 11px 174px;
 +
}
 +
 +
.icon-player {
 +
    margin: -152px -50px -36px -182px;
 +
    --clip-path: inset(152px 50px 36px 182px);
 +
    transform-origin: 201.5px 161px;
 +
}
 +
 +
.icon-point_of_interest {
 +
    margin: -3px -38px -216px -198px;
 +
    --clip-path: inset(3px 38px 216px 198px);
 +
    transform-origin: 202px 10px;
 +
}
 +
 +
.icon-provisioners_guild {
 +
    margin: -17px -27px -199px -207px;
 +
    --clip-path: inset(17px 27px 199px 207px);
 +
    transform-origin: 212.5px 25px;
 +
}
 +
 +
.icon-provisioner {
 +
    margin: -197px -223px -14px -3px;
 +
    --clip-path: inset(197px 223px 14px 3px);
 +
    transform-origin: 11px 209px;
 +
}
 +
 +
.icon-quest_npc {
 +
    margin: -64px -28px -129px -207px;
 +
    --clip-path: inset(64px 28px 129px 207px);
 +
    transform-origin: 224px 71.5px;
 +
}
 +
 +
.icon-ranger {
 +
    margin: -3px -232px -213px -3px;
 +
    --clip-path: inset(3px 232px 213px 3px);
 +
    transform-origin: 6.5px 12.5px;
 +
}
 +
 +
.icon-rangers_guild {
 +
    margin: -3px -232px -213px -3px;
 +
    --clip-path: inset(3px 232px 213px 3px);
 +
    transform-origin: 6.5px 12.5px;
 +
}
 +
 +
.icon-rogues_guild {
 +
    margin: -104px -22px -112px -207px;
 +
    --clip-path: inset(104px 22px 112px 207px);
 +
    transform-origin: 212.5px 114.5px;
 +
}
 +
 +
.icon-ruins {
 +
    margin: -33px -33px -185px -210px;
 +
    --clip-path: inset(33px 33px 185px 210px);
 +
    transform-origin: 214.5px 36.5px;
 +
}
 +
 +
.icon-sailors_guild {
 +
    margin: -62px -120px -153px -115px;
 +
    --clip-path: inset(62px 120px 153px 115px);
 +
    transform-origin: 118.5px 72px;
 +
}
 +
 +
.icon-scenic_point {
 +
    margin: -47px -29px -174px -210px;
 +
    --clip-path: inset(47px 29px 174px 210px);
 +
    transform-origin: 213px 52.5px;
 +
}
 +
 +
.icon-scribe {
 +
    margin: -114px -49px -97px -177px;
 +
    --clip-path: inset(114px 49px 97px 177px);
 +
    transform-origin: 185px 126px;
 +
}
 +
 +
.icon-secret_door {
 +
    margin: -121px -34px -84px -207px;
 +
    --clip-path: inset(121px 34px 84px 207px);
 +
    transform-origin: 218px 125.5px;
 +
}
 +
 +
.icon-seamans_guild {
 +
    margin: -77px -134px -138px -100px;
 +
    --clip-path: inset(77px 134px 138px 100px);
 +
    transform-origin: 104px 87px;
 +
}
 +
 +
.icon-shadowlords_faction {
 +
    margin: -198px -198px -11px -33px;
 +
    --clip-path: inset(198px 198px 11px 33px);
 +
    transform-origin: 42px 207.5px;
 +
}
 +
 +
.icon-ship {
 +
    margin: -3px -3px -199px -227px;
 +
    --clip-path: inset(3px 3px 199px 227px);
 +
    transform-origin: 239.5px 13px;
 +
}
 +
 +
.icon-shipwrights_guild {
 +
    margin: -34px -8px -182px -227px;
 +
    --clip-path: inset(34px 8px 182px 227px);
 +
    transform-origin: 232.5px 41.5px;
 +
}
 +
 +
.icon-shipwright {
 +
    margin: -121px -4px -90px -222px;
 +
    --clip-path: inset(121px 4px 90px 222px);
 +
    transform-origin: 230px 133px;
 +
}
 +
 +
.icon-shrine {
 +
    margin: -51px -11px -163px -228px;
 +
    --clip-path: inset(51px 11px 163px 228px);
 +
    transform-origin: 234.5px 56.5px;
 +
}
 +
 +
.icon-sorcerers_guild {
 +
    margin: -70px -7px -146px -228px;
 +
    --clip-path: inset(70px 7px 146px 228px);
 +
    transform-origin: 233.5px 77.5px;
 +
}
 +
 +
.icon-stable {
 +
    margin: -143px -4px -68px -222px;
 +
    --clip-path: inset(143px 4px 68px 222px);
 +
    transform-origin: 230px 155px;
 +
}
 +
 +
.icon-stairs {
 +
    margin: -88px -12px -131px -229px;
 +
    --clip-path: inset(88px 12px 131px 229px);
 +
    transform-origin: 233px 92.5px;
 +
}
 +
 +
.icon-stealable_item {
 +
    margin: -165px -161px -29px -59px;
 +
    --clip-path: inset(165px 161px 29px 59px);
 +
    transform-origin: 75.5px 180px;
 +
}
 +
 +
.icon-tailor {
 +
    margin: -165px -131px -46px -95px;
 +
    --clip-path: inset(165px 131px 46px 95px);
 +
    transform-origin: 103px 177px;
 +
}
 +
 +
.icon-tailors_guild {
 +
    margin: -213px -135px -2px -100px;
 +
    --clip-path: inset(213px 135px 2px 100px);
 +
    transform-origin: 103.5px 223px;
 +
}
 +
 +
.icon-tanner {
 +
    margin: -165px -101px -46px -125px;
 +
    --clip-path: inset(165px 101px 46px 125px);
 +
    transform-origin: 133px 177px;
 +
}
 +
 +
.icon-tavern {
 +
    margin: -165px -20px -46px -206px;
 +
    --clip-path: inset(165px 20px 46px 206px);
 +
    transform-origin: 214px 177px;
 +
}
 +
 +
.icon-teleporter {
 +
    margin: -102px -14px -117px -228px;
 +
    --clip-path: inset(102px 14px 117px 228px);
 +
    transform-origin: 232px 106px;
 +
}
 +
 +
.icon-terrain {
 +
    margin: -114px -126px -107px -105px;
 +
    --clip-path: inset(114px 126px 107px 105px);
 +
    transform-origin: 108px 123.5px;
 +
}
 +
 +
.icon-theater {
 +
    margin: -187px -131px -24px -95px;
 +
    --clip-path: inset(187px 131px 24px 95px);
 +
    transform-origin: 103px 199px;
 +
}
 +
 +
.icon-thieves_guild {
 +
    margin: -165px -80px -51px -155px;
 +
    --clip-path: inset(165px 80px 51px 155px);
 +
    transform-origin: 160.5px 172.5px;
 +
}
 +
 +
.icon-tinkers_guild {
 +
    margin: -187px -80px -29px -155px;
 +
    --clip-path: inset(187px 80px 29px 155px);
 +
    transform-origin: 160.5px 194.5px;
 +
}
 +
 +
.icon-tinker {
 +
    margin: -187px -101px -24px -125px;
 +
    --clip-path: inset(187px 101px 24px 125px);
 +
    transform-origin: 133px 199px;
 +
}
 +
 +
.icon-traders_guild {
 +
    margin: -187px -29px -29px -206px;
 +
    --clip-path: inset(187px 29px 29px 206px);
 +
    transform-origin: 211.5px 194.5px;
 +
}
 +
 +
.icon-true_britannians_faction {
 +
    margin: -187px -3px -21px -227px;
 +
    --clip-path: inset(187px 3px 21px 227px);
 +
    transform-origin: 236.5px 197px;
 +
}
 +
 +
.icon-veterinarian {
 +
    margin: -150px -186px -66px -49px;
 +
    --clip-path: inset(150px 186px 66px 49px);
 +
    transform-origin: 52.5px 159.5px;
 +
}
 +
 +
.icon-warriors_guild {
 +
    margin: -213px -176px -3px -59px;
 +
    --clip-path: inset(213px 176px 3px 59px);
 +
    transform-origin: 64.5px 220.5px;
 +
}
 +
 +
.icon-weapons_guild {
 +
    margin: -213px -155px -3px -80px;
 +
    --clip-path: inset(213px 155px 3px 80px);
 +
    transform-origin: 85.5px 220.5px;
 +
}
 +
 +
/* End UO Atlas css. */
 +
 +
/* [[Template:Navbox]] */
 +
.navbox {
 +
/* Navbox container style */
 +
border: 1px solid #aaa;
 +
width: 100%;
 +
margin: auto;
 +
clear: both;
 +
font-size: 88%;
 +
text-align: center;
 +
padding: 1px;
 +
        z-index: 1000;
 +
        position: relative;
 +
}
 +
.navbox-inner,
 +
.navbox-subgroup {
 +
width: 100%;
 +
}
 +
table.navbox + table.navbox {
 +
/* Single pixel border between adjacent navboxes */
 +
margin-top: -1px;
 +
/* (doesn't work for IE6, but that's okay) */
 +
}
 +
.navbox th,
 +
.navbox-title,
 +
.navbox-abovebelow {
 +
text-align: center;
 +
/* Title and above/below styles */
 +
padding-left: 1em;
 +
padding-right: 1em;
 +
}
 +
th.navbox-group {
 +
/* Group style */
 +
white-space: nowrap;
 +
/* @noflip */
 +
text-align: right;
 +
}
 +
.navbox,
 +
.navbox-subgroup {
 +
background: #000;
 +
        border-color: goldenrod;
 +
}
 +
.navbox-list {
 +
/* Must match background color */
 +
border-color: #000;
 +
}
 +
.navbox th,
 +
.navbox-title {
 +
/* Level 1 color */
 +
background: #333;
 +
}
 +
.navbox-abovebelow,
 +
th.navbox-group,
 +
.navbox-subgroup .navbox-title {
 +
/* Level 2 color */
 +
background: #444;
 +
}
 +
.navbox-subgroup .navbox-group,
 +
.navbox-subgroup .navbox-abovebelow {
 +
/* Level 3 color */
 +
background: #555;
 +
}
 +
.navbox-even {
 +
/* Even row striping */
 +
background: #111;
 +
}
 +
.navbox-odd {
 +
/* Odd row striping */
 +
background: transparent;
 +
}
 +
.navbox .hlist td dl,
 +
.navbox .hlist td ol,
 +
.navbox .hlist td ul,
 +
.navbox td.hlist dl,
 +
.navbox td.hlist ol,
 +
.navbox td.hlist ul {
 +
/* Adjust hlist padding in navboxes */
 +
padding: 0.125em 0;
 +
}
 +
.navbox .hlist dd,
 +
.navbox .hlist dt,
 +
.navbox .hlist li {
 +
/* Nowrap list items in navboxes */
 +
white-space: nowrap;
 +
/* IE < 8 no-wraps entire list, so disable it */
 +
white-space: normal !ie;
 +
}
 +
.navbox .hlist dd dl,
 +
.navbox .hlist dt dl,
 +
.navbox .hlist li ol,
 +
.navbox .hlist li ul {
 +
/* But allow parent list items to be wrapped */
 +
white-space: normal;
 +
}
 +
ol + table.navbox,
 +
ul + table.navbox {
 +
/* Prevent lists from clinging to navboxes */
 +
margin-top: 0.5em;
 +
}
 +
 +
/* [[Template:Navbar]] */
 +
.navbar {
 +
display: inline;
 +
font-size: 88%;
 +
font-weight: normal;
 +
}
 +
.navbar ul {
 +
display: inline;
 +
white-space: nowrap;
 +
}
 +
.navbar li {
 +
word-spacing: -0.125em;
 +
}
 +
/* Navbar styling when nested in navbox */
 +
.navbox .navbar {
 +
display: block;
 +
font-size: 100%;
 +
}
 +
.navbox-title .navbar {
 +
/* @noflip */
 +
float: left;
 +
/* @noflip */
 +
text-align: left;
 +
/* @noflip */
 +
margin-right: 0.5em;
 +
width: 6em;
 +
}
 +
 +
/**
 +
* Style for horizontal lists (separator following item).
 +
* @source mediawiki.org/wiki/Snippets/Horizontal_lists
 +
* @revision 6 (2014-05-09)
 +
* @author [[User:Edokter]]
 +
*/
 +
.hlist dl,
 +
.hlist ol,
 +
.hlist ul {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
/* Display list items inline */
 +
.hlist dd,
 +
.hlist dt,
 +
.hlist li {
 +
margin: 0;
 +
display: inline;
 +
}
 +
/* Display nested lists inline */
 +
.hlist.inline,
 +
.hlist.inline dl,
 +
.hlist.inline ol,
 +
.hlist.inline ul,
 +
.hlist dl dl, .hlist dl ol, .hlist dl ul,
 +
.hlist ol dl, .hlist ol ol, .hlist ol ul,
 +
.hlist ul dl, .hlist ul ol, .hlist ul ul {
 +
display: inline;
 +
}
 +
/* Generate interpuncts */
 +
.hlist dt:after {
 +
content: ": ";
 +
}
 +
.hlist dd:after,
 +
.hlist li:after {
 +
content: " · ";
 +
font-weight: bold;
 +
}
 +
.hlist dd:last-child:after,
 +
.hlist dt:last-child:after,
 +
.hlist li:last-child:after {
 +
content: none;
 +
}
 +
/* Add parentheses around nested lists */
 +
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
 +
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
 +
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
 +
content: " (";
 +
font-weight: normal;
 +
}
 +
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
 +
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
 +
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
 +
content: ") ";
 +
font-weight: normal;
 +
}
 +
/* Put ordinals in front of ordered list items */
 +
.hlist ol {
 +
counter-reset: listitem;
 +
}
 +
.hlist ol > li {
 +
counter-increment: listitem;
 +
}
 +
.hlist ol > li:before {
 +
content: " " counter(listitem) " ";
 +
white-space: nowrap;
 +
}
 +
.hlist dd ol > li:first-child:before,
 +
.hlist dt ol > li:first-child:before,
 +
.hlist li ol > li:first-child:before {
 +
content: " (" counter(listitem) " ";
 +
}
 +
/* end hlist */
 +
 +
/* Selectable jQuery ul/li  */
 +
ul.selectable {
 +
margin-left: 0;
 +
padding-left: 0;
 +
display: inline;
 +
}
 +
 +
ul.selectable li {
 +
margin: 3px 3px 0 0;
 +
padding: 3px 15px 5px;
 +
list-style: none;
 +
display: inline-block;
 +
border-radius: 7px;
 +
font-weight: 700;
 +
border: 1px solid darkgrey;
 +
background: #222;
 +
}
 +
 +
li.ui-selected {
 +
background: rgb(245, 132, 0)!important;
 +
}
 +
/* end selectable jQuery ul/li  */
 +
 +
/* Standard Navigationsleisten, aka box hiding thingy
 +
  from .de.  Documentation at [[Wikipedia:NavFrame]]. */
 +
div.NavFrame {
 +
    margin: 0;
 +
    padding: 4px;
 +
    border: 1px solid #aaa;
 +
    text-align: center;
 +
    border-collapse: collapse;
 +
    font-size: 95%;
 +
}
 +
div.NavFrame + div.NavFrame {
 +
    border-top-style: none;
 +
    border-top-style: hidden;
 +
}
 +
div.NavPic {
 +
    background-color: #fff;
 +
    margin: 0;
 +
    padding: 2px;
 +
    /* @noflip */
 +
    float: left;
 +
}
 +
div.NavFrame div.NavHead {
 +
    height: 1.6em;
 +
    font-weight: bold;
 +
    background-color: #ccf;
 +
    position: relative;
 +
}
 +
div.NavFrame p,
 +
div.NavFrame div.NavContent,
 +
div.NavFrame div.NavContent p {
 +
    font-size: 100%;
 +
}
 +
div.NavEnd {
 +
    margin: 0;
 +
    padding: 0;
 +
    line-height: 1px;
 +
    clear: both;
 +
}
 +
a.NavToggle {
 +
    position: absolute;
 +
    top: 0;
 +
    /* @noflip */
 +
    right: 3px;
 +
    font-weight: normal;
 +
    font-size: 90%;
 +
}
 +
 +
/* Tree Menu CSS */
 +
 +
.fancytree ul {
 +
    background: none;
 +
    border: none;
 +
    font-size: 12px;
 +
}
 +
ul.fancytree-container {
 +
    outline: 0px;
 +
    border: none;
 +
    overflow: hidden;
 +
}
 +
.fancytree p {
 +
    display: none;
 +
}
 +
span.fancytree-title {
 +
    cursor: default;
 +
    color: #e0ab43;
 +
    font-size: 125%;
 +
  font-weight: bold;
 +
}
 +
span.fancytree-title a {
 +
    color:  goldenrod;
 +
}
 +
 +
 +
 +
/* css stack for the crisp-images image rendering mode */
 +
.crispImages {
 +
    image-rendering: -webkit-optimize-contrast;
 +
    -ms-interpolation-mode: nearest-neighbor;
 +
    image-rendering: -moz-crisp-edges;
 +
    image-rendering: -o-crisp-edges;
 +
    image-rendering: optimize-contrast;
 +
    image-rendering: crisp-edges;
 +
}
 +
 +
/* css stack for cursors */
 +
.grabbable {
 +
    cursor: move;
 +
    cursor: grab;
 +
    cursor: -moz-grab;
 +
    cursor: -webkit-grab;
 +
}
 +
 +
/* Animal Lore tool */
 +
.removeFile {
 +
    border-radius: 6px;
 +
    color: red;
 +
    display: inline-block;
 +
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
 +
    font-size: 150%;
 +
    font-weight: 900;
 +
    line-height: 2em;
 +
    margin: 0 .3em;
 +
    text-align: center;
 +
    width: 1em;
 +
}
 +
.removeFile:hover {
 +
    background-color: red;
 +
    color: white;
 +
    cursor:pointer;
 +
}
 +
 +
.dropZone {
 +
    border-radius:12px;
 +
    border:1px white solid;
 +
    width:120%;
 +
    height:6em;
 +
    text-align:center;
 +
    line-height:6em;
 +
    font-size:150%;
 +
    margin:1em 15%;
 +
    background: rgb(96,175,255);
 +
    background: -moz-radial-gradient(center, ellipse cover, rgba(96,175,255,1) 0%, rgba(20,132,244,1) 67%, rgba(20,132,244,1) 67%, rgba(20,132,244,1) 85%, rgba(20,132,244,1) 85%, rgba(19,116,213,1) 100%);
 +
    background: -webkit-radial-gradient(center, ellipse cover, rgba(96,175,255,1) 0%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 85%,rgba(20,132,244,1) 85%,rgba(19,116,213,1) 100%);
 +
    background: radial-gradient(ellipse at center, rgba(96,175,255,1) 0%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 85%,rgba(20,132,244,1) 85%,rgba(19,116,213,1) 100%);
 +
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60afff', endColorstr='#1374d5',GradientType='1');
 +
}
 +
 +
label.selectLabel {
 +
    color:#FFF;
 +
    font-weight: 900;
 +
    padding-left: 0.4em;
 +
    padding-right: 1em;
 +
}
 +
 +
label.selectLabel::after {
 +
  content: ": ";
 +
}
 +
 +
li.selectLI {
 +
    cursor:pointer;
 +
    color: #ddd;
 +
    margin: 2px!important;
 +
}

Revision as of 19:25, 1 December 2019

/* #toc, .toc {
    padding: 1em 1em;
    border: 1px solid #222222;
    display: inline-block;
    width: auto;
    margin: 1.5em 0;
}
body {
    background-image: url(http://uo2.stratics.com/wp-content/uploads/2011/02/parch.jpg);
}
*/
@import url('https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911');
@font-face {
 font-family: 'Avatar';
 src: url('../w/fonts/avatar-webfont.woff') format('woff');
 font-weight: 900;
 font-style: italic;
}

/* CSS placed here will be applied to all skins */

/* Global css, sets the background and text color for the entire wiki. */

/*CSS applied to specific namespaces (titles) via namespace ID.  Current Namespace ID's are :

ns-3000  Ultima Online
ns-3002  Shards Online
ns-3004  Shroud of the Avatar 
a:link {
color: #232323;
}
*/

/* Force a minimum height for empty/small pages, so they don't collapse under Xen */
.xfMediaWiki {
    min-height: 40em;
}

.rounded {
  border-radius: 25px;
}

/* Cleaner pixel art scaling */
img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Auto-prefixing */
* {
	--clip-path: initial;
	-webkit-clip-path: var(--clip-path);
	clip-path: var(--clip-path);
}

.mw-body h2:before,
.mw-body h3:before,
.mw-body h4:before,
.mw-body h5:before,
.mw-body h6:before {
  content: '';
  width: 100%;
  height: 1em;
  display: inline-block;
}

.mw-body h1,
.mw-body h2 {
    font-family: Georgia, Times, serif;
    margin-top: 1em;
    margin-bottom: .25em;
    line-height: 1.3;
    padding: 0
}
.mw-body h3,
.mw-body h4 {
    font-variant: small-caps
}
.mw-body h1 {
    border-bottom: 0!important;
    font-size: 2em
}
.mw-body h2 {
    border-bottom: 1px solid #AAA;
    font-size: 1.8em
}
.mw-body h2,
.mw-body h3 {
    font-weight: 900
}
.mw-body h3 {
    font-size: 1.5em
}
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
    margin-top: .3em;
    margin-bottom: 0;
    line-height: 1.6;
    padding-top: .5em;
    padding-bottom: 0
}
.mw-body h4 {
    font-size: 1.35em;
    font-weight: 800
}
.mw-body h5 {
    font-size: 1.18em;
    font-weight: 700
}
.mw-body h6 {
    font-size: 1em;
    font-weight: 600
}

#toc {
    margin-top: 2em;
    margin-bottom: 2em;
}

.ns-3000, li {
     list-style: unset;
}

.uofiction {
  font-family: 'Goudy Bookletter 1911', serif;
  text-indent: 25px;
  font-size: 125%;
  line-height: 1.4;
  max-width: 38em;
}

.uofiction::first-letter {
  font-family: 'Avatar', cursive;
  font-size: 250%;
  padding-right:.1em;
  padding-left:.1em;
}

.uofiction p {
  padding-top: 1em;
}

/* Infobox template style */
.ns-3000, .infobox {
    border: 1px solid #aaa;
    border-spacing: 3px;
    background-color: #fff;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    font-size: 88%;
    line-height: 1.5em;
    max-width: 28%;
    min-width: 28%;
}
.ns-3000, .infobox a {
    color: #444;
}
.ns-3000, .infobox caption {
    font-size: 125%;
    font-weight: bold;
    padding: 0.2em;
}
.ns-3000, .infobox td,
.infobox th {
    vertical-align: top;
    /* @noflip */
    text-align: left;
    padding-top: 5px;
}

/* Overrides the border otherwise drawn on all tables. */
.ns-3000, table.wikitable {
  border: 0;
  color: lightgrey;
}

.ns-3000, table.dpltable > * > tr > th {
  color: black;
}

/* Centers and crops the pen icon on 'alternate name' message boxes. */
.ns-3000, .penimage {
    height: 19px;
    width: 21px;
    object-fit: none;
    object-position: 20% 0;
}

/* Centers an image in an infobox. */
.ns-3000, .imagecell {
    padding: 1em 0!important;
    text-align: center!important;
}

/* Formats left-column text in infoboxes. */
.ns-3000, .infobox tr td:first-of-type {
    font-weight: 600; 
    padding-left: 5px;
    padding-right: 8px;
}

/* Hides undesirable borders on the top-left cell of a table containing numberic data. */
.ns-3000, .datatable tr:first-of-type td:first-of-type
{
    border-left: 0;
    border-top: 0;
}

/* Centers text in table cells (generally for tables containing numeric data). */
.ns-3000, .datatable tr td:not(:first-of-type) {
    text-align: center;
}

/* Adds coloring to the top cell in infoboxes. */
.ns-3000, .titlecell {
    background-color: #333;
    color: white;
    padding: 2px 8px;
}

/* Elemental cell coloring */
.ns-3000, .cold {
    background-color: #2dbffd;
}
.ns-3000, .energy {
    background-color: #d7d;
}
.ns-3000, .fire {
    background-color: #db7;
}
.ns-3000, .physical {
    background-color: #ddd;
}
.ns-3000, .poison {
    background-color: #7d7;
}
.ns-3000, a.new
{
    color: rgb(221, 68, 68);
}

/* Hide page titles; UO makes for super long titles, and allows a sort of work around to ampersands in item names. */
.ns-3000, .firstHeading {
    display: none;
}

/* Don't show edit links next to items in hue page item lists. */
.UOhuepage-itemlist>ul>li>.mw-whatlinkshere-tools {
    display: none;
}

/* Center the text in a table. */
table.centeredtext td {
  text-align: center;
  vertical-align: middle;
}

/* Tables on disambiguation pages. */

.disambigtable {
  width: 80%
}

.disambigtable tbody tr:nth-child(odd) {
   /* background-color: #ddd; */
}

.disambigtable td,.disambigtable th {
  border: dotted 1px grey;
}

/* General tweaking */
.indent {
    margin-left: 4em!important;
}

.verticalcenterimg img {
    vertical-align: middle;
}

.invisibletable > * > tr > td, .invisibletable > * > tr > th {
        border-style: none!important;
}

/* Override defult mediawiki colors to allow the background to show through. */
.wikitable, .toc, .catlinks {
    background-color:transparent!important;
}

/* Override default text colors in the image uploader to make the text readable. */
#upload-list a, .file-title {
    color: darkblue;
}

.mw-collapsible-content:before {
    content: " ";
    display: block;
    clear: both;
}

/* Main page classes */
.mainpage_row {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
}
.mainpage_verticalrow {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:baseline;
}
.mainpage_column {
  flex:1;
  padding:2rem;
}
.mainlinks img {
    transform: translateY(12px);
}
.dyelinks img {
    transform: translateY(30px);
}
.dragon img {
    transform: translateX(100px);
}

/* Start UO Atlas css. */
.map {
    z-index: -999;
    position: absolute;
}
.map-holder {
    transform-origin: 0 0;
    min-height: 700px;
    transition: all 10ms ease;
}
.map img,.map canvas {
    -webkit-box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
    -moz-box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
    box-shadow: 45px 45px 0 0 rgba(0,0,0,0.35);
}
.pin {
    transform: scale(5.5);
    display: inline-block;
    position: absolute;
    opacity: .8;
    z-index:999;
}
.map-holder {
    --mulModA: 1;
    --mulModB: 1;
    --rotation: 0deg;
}
.pin img {
    z-index: 0;
}
.pin:hover:after,.menutrigger:hover:after {
    background: rgba(0,0,0,.7);
    -webkit-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Sans;
    position: absolute;
    text-align: center;
    display: block;
    padding: 6px 10px 10px 10px;
    text-shadow: 0 -1px 0 #000;
    white-space: nowrap;
    z-index: 98;
    left: -30px;
    top: 15px;  
    opacity: 1;
}
.pin:hover:after {
    content: attr(data-name);
}
.menutrigger:hover:after {
    content: "Map Tools";
}
.pin.highlight{
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
.pin-circle {
    border: 3px solid red;
    height: 40px;
    width: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    left: -40%;
    top: -50%;
    -webkit-animation: flash linear 1s infinite;
    animation: flash linear 1s infin
}
@-webkit-keyframes flash {
	0% { opacity: 1;scale(4) } 
	50% { opacity: .1;scale(1) } 
	100% { opacity: 1;scale(4) }
}
@keyframes flash {
	0% { opacity: 1;scale(4) } 
	50% { opacity: .1;scale(1) } 
	100% { opacity: 1;scale(4) }
}
.largeFloatingInstructions {
    position: fixed;
    bottom: 1%;
    left: 1%;
    font-size: 36px;
    color: #3d6c99;
    z-index: 5000;
    background-color: black;
    padding: 10px;
    border-radius: 20px;
    border-style: double;
}
#UOAtlas {
    background-image: url(http://stratics.com/w/images/6/67/UO-original-map-white-outline.png);
    background-size: 75% 100%;
    width: 100%;
    min-height: 700px;
    background-repeat: no-repeat;
    background-position: 40%;
}
.menutrigger {
    top: 5%;
    left: -10%;
    cursor: move;
}
.radarMap {
    --rotation: 45deg;
    --mulModA: 1.333;
    transform: translateX(150%) rotate(var(--rotation)) scale(.75);
}
.pin.quest-npc, .pin.counselors-guild {
    --mulModB: .8;
}
.pin.stealable-item {
    --mulModB: .5;
}
.pin.counselors-guild a img {
    -webkit-filter: invert(1) hue-rotate(167deg);
}
.pin:hover:after {
    transform: scale(calc(1 / var(--mulModB))) rotate(calc(0deg - var(--rotation)));
}
.menutrigger:hover:after  {
    transform: rotate(calc(0deg - var(--rotation)));
}
.pin a img  {
    transform: rotate(calc(0deg - var(--rotation)))!important;
}
@media (max-width: 1680px) {
    .familyTree {
        transform: scale(.7);
        transform-origin: top left;
    }
    .map-holder {
        transform: scale(.12);
    }
    .pin {
      --multiplier: 8.33;
    }
}
@media (max-width: 1920px)  and (min-width: 1681px){
    .map-holder {
        transform: scale(.18);
    }
    .pin {
      --multiplier: 5.55;
    }
}
@media (max-width: 2560px)  and (min-width: 1921px){
    .map-holder {
        transform: scale(.2);
    }
    .pin {
      --multiplier: 5;
    }
}
@media (min-width: 2561px){
    .map-holder {
        transform: scale(.23);
    }
    .pin {
      --multiplier: 4.34;
    }
}
.pin.scale2    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2)); }
.pin.scale2-5  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2.5)); }
.pin.scale2-7  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 2.7)); }
.pin.scale3    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3)); }
.pin.scale3-25 { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3.25)); }
.pin.scale3-5  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 3.5)); }
.pin.scale4    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 4)); }
.pin.scale5    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 5)); }
.pin.scale5-2  { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 5.2)); }
.pin.scale6    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 6)); }
.pin.scale7    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 7)); }
.pin.scale8    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 8)); }
.pin.scale9    { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 9)); }
.pin.scale10   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 10)); }
.pin.scale11   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 11)); }
.pin.scale12   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 12)); }
.pin.scale13   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 13)); }
.pin.scale14   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 14)); }
.pin.scale15   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 15)); }
.pin.scale16   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 16)); }
.pin.scale17   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 17)); }
.pin.scale18   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 18)); }
.pin.scale19   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 19)); }
.pin.scale20   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 20)); }
.pin.scale21   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 21)); }
.pin.scale22   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 22)); }
.pin.scale23   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 23)); }
.pin.scale24   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 24)); }
.pin.scale25   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 25)); }
.pin.scale26   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 26)); }
.pin.scale27   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 27)); }
.pin.scale28   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 28)); }
.pin.scale29   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 29)); }
.pin.scale30   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 30)); }
.pin.scale31   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 31)); }
.pin.scale32   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 32)); }
.pin.scale33   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 33)); }
.pin.scale34   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 34)); }
.pin.scale35   { transform: scale(calc(var(--multiplier) * var(--mulModA) * var(--mulModB) / 35)); }

.icon {
    image-rendering: pixelated;
    position: relative;
}
.icon-archers_guild {
    margin: -3px -232px -213px -3px;
    --clip-path: inset(3px 232px 213px 3px);
    transform-origin: 8.5px 10.5px;
}

.icon-architect {
    margin: -42px -86px -169px -140px;
    --clip-path: inset(42px 86px 169px 140px);
    transform-origin: 148px 54px;
}

.icon-armaments_guild {
    margin: -3px -211px -213px -24px;
    --clip-path: inset(3px 211px 213px 24px);
    transform-origin: 29.5px 10.5px;
}

.icon-armorer {
    margin: -3px -181px -208px -45px;
    --clip-path: inset(3px 181px 208px 45px);
    transform-origin: 53px 15px;
}

.icon-armorers_guild {
    margin: -3px -160px -213px -75px;
    --clip-path: inset(3px 160px 213px 75px);
    transform-origin: 80.5px 10.5px;
}

.icon-artist {
    margin: -90px -80px -122px -145px;
    --clip-path: inset(90px 80px 122px 145px);
    transform-origin: 153.5px 101.5px;
}

.icon-artists_guild {
    margin: -103px -27px -112px -207px;
    -webkit-clip-path: inset(103px 27px 112px 207px);
    transform-origin: 213px 111px;
}

.icon-assasins_guild {
    margin: -3px -139px -213px -96px;
    --clip-path: inset(3px 139px 213px 96px);
    transform-origin: 101.5px 10.5px;
}

.icon-baker {
    margin: -3px -109px -208px -117px;
    --clip-path: inset(3px 109px 208px 117px);
    transform-origin: 125px 15px;
}

.icon-bank {
    margin: -3px -78px -208px -147px;
    --clip-path: inset(3px 78px 208px 147px);
    transform-origin: 155px 15.5px;
}

.icon-barber {
    margin: -3px -58px -213px -177px;
    --clip-path: inset(3px 58px 213px 177px);
    transform-origin: 182.5px 10.5px;
}

.icon-barbers_guild {
    margin: -3px -58px -213px -177px;
    --clip-path: inset(3px 58px 213px 177px);
    transform-origin: 182.5px 10.5px;
}

.icon-bard {
    margin: -20px -223px -191px -3px;
    --clip-path: inset(20px 223px 191px 3px);
    transform-origin: 11px 32px;
}

.icon-bardic_guild {
    margin: -16px -160px -200px -75px;
    --clip-path: inset(16px 160px 200px 75px);
    transform-origin: 80.5px 23.5px;
}

.icon-barterers_guild {
    margin: -15px -139px -200px -95px;
    --clip-path: inset(15px 139px 200px 95px);
    transform-origin: 99px 25px;
}

.icon-beekeeper {
    margin: -20px -49px -191px -177px;
    --clip-path: inset(20px 49px 191px 177px);
    transform-origin: 185px 32px;
}

.icon-blacksmiths_guild {
    margin: -16px -139px -200px -96px;
    --clip-path: inset(16px 139px 200px 96px);
    transform-origin: 11px 54px;
}

.icon-blacksmith {
    margin: -42px -223px -169px -3px;
    --clip-path: inset(42px 223px 169px 3px);
    transform-origin: 101.5px 23.5px;
}

.icon-body_of_water {
    margin: -41px -196px -176px -32px;
    --clip-path: inset(41px 196px 176px 32px);
    transform-origin: 37px 52px;
}

.icon-bowyer {
    margin: -42px -167px -169px -59px;
    --clip-path: inset(42px 167px 169px 59px);
    transform-origin: 67px 54px;
}

.icon-bridge {
    margin: -41px -145px -178px -88px;
    --clip-path: inset(41px 145px 178px 88px);
    transform-origin: 92px 49.5px;
}

.icon-butcher {
    margin: -42px -116px -169px -110px;
    --clip-path: inset(42px 116px 169px 110px);
    transform-origin: 118px 54px;
}

.icon-carpenter {
    margin: -42px -86px -169px -140px;
    --clip-path: inset(42px 86px 169px 140px);
    transform-origin: 148px 54px;
}

.icon-cartographer {
    margin: -121px -4px -90px -222px;
    --clip-path: inset(121px 4px 90px 222px);
    transform-origin: 230px 133px;
}

.icon-cavalry_guild {
    margin: -42px -65px -174px -170px;
    --clip-path: inset(42px 65px 174px 170px);
    transform-origin: 175.5px 49.5px;
}

.icon-cave {
    margin: -59px -203px -151px -32px;
    --clip-path: inset(59px 203px 151px 32px);
    transform-origin: 40.5px 66.5px;
}

.icon-champion {
    margin: -41px -45px -168px -190px;
    --clip-path: inset(41px 45px 168px 190px);
    transform-origin: 199px 48.5px;
}

.icon-city {
    margin: -64px -228px -147px -3px;
    --clip-path: inset(64px 228px 147px 3px);
    transform-origin: 11px 73.5px;
}

.icon-cooks_guild {
    margin: -59px -146px -157px -89px;
    --clip-path: inset(59px 146px 157px 89px);
    transform-origin: 94.5px 66.5px;
}

.icon-council_of_mages_faction {
    margin: -64px -177px -143px -53px;
    --clip-path: inset(64px 177px 143px 53px);
    transform-origin: 63px 74px;
}

.icon-counselors_guild {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
    transform-origin: 77px 148px;
}

.icon-customs {
    margin: -64px -86px -147px -140px;
    --clip-path: inset(64px 86px 147px 140px);
    transform-origin: 148px 76px;
}

.icon-daily_rare {
    margin: -59px -66px -149px -170px;
    --clip-path: inset(59px 66px 149px 170px);
    transform-origin: 179.5px 66px;
}

.icon-dock {
    margin: -63px -50px -153px -189px;
    --clip-path: inset(63px 50px 153px 189px);
    transform-origin: 194.5px 68.5px;
}

.icon-dungeon {
    margin: -80px -152px -127px -79px;
    --clip-path: inset(80px 152px 127px 79px);
    transform-origin: 89px 89.5px;
}

.icon-engineers_guild {
    margin: -186px -80px -30px -154px;
    --clip-path: inset(186px 80px 30px 154px);
    transform-origin: 158px 195.5px;
}

.icon-exit {
    margin: -79px -53px -141px -190px;
    --clip-path: inset(79px 53px 141px 190px);
    transform-origin: 193.5px 82.5px;
}

.icon-farm {
    margin: -92px -236px -128px -3px;
    --clip-path: inset(92px 236px 128px 3px);
    transform-origin: 6.5px 97.5px;
}

.icon-fighters_guild {
    margin: -92px -215px -124px -20px;
    --clip-path: inset(92px 215px 124px 20px);
    transform-origin: 25.5px 99.5px;
}

.icon-fishermans_guild {
    margin: -92px -194px -124px -41px;
    --clip-path: inset(92px 194px 124px 41px);
    transform-origin: 46.5px 99.5px;
}

.icon-fletcher {
    margin: -92px -122px -119px -104px;
    --clip-path: inset(92px 122px 119px 104px);
    transform-origin: 112px 104px;
}

.icon-flight_path {
    margin: -26px -127px -194px -117px;
    --clip-path: inset(26px 127px 194px 117px);
    transform-origin: 120.5px 29px;
}

.icon-fort {
    margin: -20px -106px -187px -131px;
    --clip-path: inset(20px 106px 187px 131px);
    transform-origin: 141px 26.5px;
}

.icon-gate {
    margin: -91px -177px -125px -61px;
    --clip-path: inset(91px 177px 125px 61px);
    transform-origin: 66.5px 97px;
}

.icon-graveyard {
    margin: -91px -108px -125px -132px;
    --clip-path: inset(91px 108px 125px 132px);
    transform-origin: 137.5px 96px;
}

.icon-guild {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
    transform-origin: 77px 148px;
}

.icon-healers_guild {
    margin: -114px -232px -102px -3px;
    --clip-path: inset(114px 232px 102px 3px);
    transform-origin: 8.5px 121.5px;
}

.icon-healer {
    margin: -92px -49px -119px -177px;
    --clip-path: inset(92px 49px 119px 177px);
    transform-origin: 185px 104px;
}

.icon-herbalist {
    margin: -114px -201px -97px -24px;
    --clip-path: inset(114px 201px 97px 24px);
    transform-origin: 32px 126.5px;
}

.icon-illusionists_guild {
    margin: -114px -181px -102px -54px;
    --clip-path: inset(114px 181px 102px 54px);
    transform-origin: 59.5px 121.5px;
}

.icon-inn {
    margin: -114px -151px -97px -75px;
    --clip-path: inset(114px 151px 97px 75px);
    transform-origin: 83px 126px;
}

.icon-island {
    margin: -114px -126px -102px -105px;
    --clip-path: inset(114px 126px 102px 105px);
    transform-origin: 110.5px 123.5px;
}

.icon-jeweler {
    margin: -114px -95px -97px -130px;
    --clip-path: inset(114px 95px 97px 130px);
    transform-origin: 138px 126.5px;
}

.icon-ladder {
    margin: -176px -203px -34px -36px;
    --clip-path: inset(176px 203px 34px 36px);
    transform-origin: 37.5px 188.5px;
}

.icon-lair {
    margin: -20px -200px -190px -31px;
    --clip-path: inset(20px 200px 190px 31px);
    transform-origin: 39.5px 29.5px;
}

.icon-landmark {
    margin: -115px -79px -105px -161px;
    --clip-path: inset(115px 79px 105px 161px);
    transform-origin: 164.5px 120px;
}

.icon-library {
    margin: -114px -49px -97px -177px;
    --clip-path: inset(114px 49px 97px 177px);
    transform-origin: 185px 126px;
}

.icon-lockpicking_box {
    margin: -21px -180px -188px -55px;
    --clip-path: inset(21px 180px 188px 55px);
    transform-origin: 64px 28.5px;
}

.icon-mage {
    margin: -136px -208px -75px -18px;
    --clip-path: inset(136px 208px 75px 18px);
    transform-origin: 26px 148px;
}

.icon-mages_guild {
    margin: -136px -187px -80px -48px;
    --clip-path: inset(136px 187px 80px 48px);
    transform-origin: 53.5px 143.5px;
}

.icon-mariner {
    margin: -64px -86px -147px -140px;
    --clip-path: inset(64px 86px 147px 140px);
    transform-origin: 148px 76px;
}

.icon-market {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
    transform-origin: 77px 148px;
}

.icon-merchants_guild {
    margin: -136px -136px -80px -99px;
    --clip-path: inset(136px 136px 80px 99px);
    transform-origin: 104.5px 143.5px;
}

.icon-minax_faction {
    margin: -136px -109px -72px -120px;
    --clip-path: inset(136px 109px 72px 120px);
    transform-origin: 129.5px 146.5px;
}

.icon-miners_guild {
    margin: -136px -89px -80px -146px;
    --clip-path: inset(136px 89px 80px 146px);
    transform-origin: 151.5px 143.5px;
}

.icon-moongate {
    margin: -136px -74px -71px -167px;
    --clip-path: inset(136px 74px 71px 167px);
    transform-origin: 177px 140.5px;
}

.icon-other {
    margin: -136px -58px -81px -181px;
    --clip-path: inset(136px 58px 81px 181px);
    transform-origin: 186px 141.5px;
}

.icon-painter {
    margin: -162px -223px -49px -3px;
    --clip-path: inset(162px 223px 49px 3px);
    transform-origin: 11px 174px;
}

.icon-player {
    margin: -152px -50px -36px -182px;
    --clip-path: inset(152px 50px 36px 182px);
    transform-origin: 201.5px 161px;
}

.icon-point_of_interest {
    margin: -3px -38px -216px -198px;
    --clip-path: inset(3px 38px 216px 198px);
    transform-origin: 202px 10px;
}

.icon-provisioners_guild {
    margin: -17px -27px -199px -207px;
    --clip-path: inset(17px 27px 199px 207px);
    transform-origin: 212.5px 25px;
}

.icon-provisioner {
    margin: -197px -223px -14px -3px;
    --clip-path: inset(197px 223px 14px 3px);
    transform-origin: 11px 209px;
}

.icon-quest_npc {
    margin: -64px -28px -129px -207px;
    --clip-path: inset(64px 28px 129px 207px);
    transform-origin: 224px 71.5px;
}

.icon-ranger {
    margin: -3px -232px -213px -3px;
    --clip-path: inset(3px 232px 213px 3px);
    transform-origin: 6.5px 12.5px;
}

.icon-rangers_guild {
    margin: -3px -232px -213px -3px;
    --clip-path: inset(3px 232px 213px 3px);
    transform-origin: 6.5px 12.5px;
}

.icon-rogues_guild {
    margin: -104px -22px -112px -207px;
    --clip-path: inset(104px 22px 112px 207px);
    transform-origin: 212.5px 114.5px;
}

.icon-ruins {
    margin: -33px -33px -185px -210px;
    --clip-path: inset(33px 33px 185px 210px);
    transform-origin: 214.5px 36.5px;
}

.icon-sailors_guild {
    margin: -62px -120px -153px -115px;
    --clip-path: inset(62px 120px 153px 115px);
    transform-origin: 118.5px 72px;
}

.icon-scenic_point {
    margin: -47px -29px -174px -210px;
    --clip-path: inset(47px 29px 174px 210px);
    transform-origin: 213px 52.5px;
}

.icon-scribe {
    margin: -114px -49px -97px -177px;
    --clip-path: inset(114px 49px 97px 177px);
    transform-origin: 185px 126px;
}

.icon-secret_door {
    margin: -121px -34px -84px -207px;
    --clip-path: inset(121px 34px 84px 207px);
    transform-origin: 218px 125.5px;
}

.icon-seamans_guild {
    margin: -77px -134px -138px -100px;
    --clip-path: inset(77px 134px 138px 100px);
    transform-origin: 104px 87px;
}

.icon-shadowlords_faction {
    margin: -198px -198px -11px -33px;
    --clip-path: inset(198px 198px 11px 33px);
    transform-origin: 42px 207.5px;
}

.icon-ship {
    margin: -3px -3px -199px -227px;
    --clip-path: inset(3px 3px 199px 227px);
    transform-origin: 239.5px 13px;
}

.icon-shipwrights_guild {
    margin: -34px -8px -182px -227px;
    --clip-path: inset(34px 8px 182px 227px);
    transform-origin: 232.5px 41.5px;
}

.icon-shipwright {
    margin: -121px -4px -90px -222px;
    --clip-path: inset(121px 4px 90px 222px);
    transform-origin: 230px 133px;
}

.icon-shrine {
    margin: -51px -11px -163px -228px;
    --clip-path: inset(51px 11px 163px 228px);
    transform-origin: 234.5px 56.5px;
}

.icon-sorcerers_guild {
    margin: -70px -7px -146px -228px;
    --clip-path: inset(70px 7px 146px 228px);
    transform-origin: 233.5px 77.5px;
}

.icon-stable {
    margin: -143px -4px -68px -222px;
    --clip-path: inset(143px 4px 68px 222px);
    transform-origin: 230px 155px;
}

.icon-stairs {
    margin: -88px -12px -131px -229px;
    --clip-path: inset(88px 12px 131px 229px);
    transform-origin: 233px 92.5px;
}

.icon-stealable_item {
    margin: -165px -161px -29px -59px;
    --clip-path: inset(165px 161px 29px 59px);
    transform-origin: 75.5px 180px;
}

.icon-tailor {
    margin: -165px -131px -46px -95px;
    --clip-path: inset(165px 131px 46px 95px);
    transform-origin: 103px 177px;
}

.icon-tailors_guild {
    margin: -213px -135px -2px -100px;
    --clip-path: inset(213px 135px 2px 100px);
    transform-origin: 103.5px 223px;
}

.icon-tanner {
    margin: -165px -101px -46px -125px;
    --clip-path: inset(165px 101px 46px 125px);
    transform-origin: 133px 177px;
}

.icon-tavern {
    margin: -165px -20px -46px -206px;
    --clip-path: inset(165px 20px 46px 206px);
    transform-origin: 214px 177px;
}

.icon-teleporter {
    margin: -102px -14px -117px -228px;
    --clip-path: inset(102px 14px 117px 228px);
    transform-origin: 232px 106px;
}

.icon-terrain {
    margin: -114px -126px -107px -105px;
    --clip-path: inset(114px 126px 107px 105px);
    transform-origin: 108px 123.5px;
}

.icon-theater {
    margin: -187px -131px -24px -95px;
    --clip-path: inset(187px 131px 24px 95px);
    transform-origin: 103px 199px;
}

.icon-thieves_guild {
    margin: -165px -80px -51px -155px;
    --clip-path: inset(165px 80px 51px 155px);
    transform-origin: 160.5px 172.5px;
}

.icon-tinkers_guild {
    margin: -187px -80px -29px -155px;
    --clip-path: inset(187px 80px 29px 155px);
    transform-origin: 160.5px 194.5px;
}

.icon-tinker {
    margin: -187px -101px -24px -125px;
    --clip-path: inset(187px 101px 24px 125px);
    transform-origin: 133px 199px;
}

.icon-traders_guild {
    margin: -187px -29px -29px -206px;
    --clip-path: inset(187px 29px 29px 206px);
    transform-origin: 211.5px 194.5px;
}

.icon-true_britannians_faction {
    margin: -187px -3px -21px -227px;
    --clip-path: inset(187px 3px 21px 227px);
    transform-origin: 236.5px 197px;
}

.icon-veterinarian {
    margin: -150px -186px -66px -49px;
    --clip-path: inset(150px 186px 66px 49px);
    transform-origin: 52.5px 159.5px;
}

.icon-warriors_guild {
    margin: -213px -176px -3px -59px;
    --clip-path: inset(213px 176px 3px 59px);
    transform-origin: 64.5px 220.5px;
}

.icon-weapons_guild {
    margin: -213px -155px -3px -80px;
    --clip-path: inset(213px 155px 3px 80px);
    transform-origin: 85.5px 220.5px;
}

/* End UO Atlas css. */

/* [[Template:Navbox]] */
.navbox {
	/* Navbox container style */
	border: 1px solid #aaa;
	width: 100%;
	margin: auto;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
        z-index: 1000;
        position: relative;
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
table.navbox + table.navbox {
	/* Single pixel border between adjacent navboxes */
	margin-top: -1px;
	/* (doesn't work for IE6, but that's okay) */
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
	text-align: center;
	/* Title and above/below styles */
	padding-left: 1em;
	padding-right: 1em;
}
th.navbox-group {
	/* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
.navbox,
.navbox-subgroup {
	background: #000;
        border-color: goldenrod;
}
.navbox-list {
	/* Must match background color */
	border-color: #000;
}
.navbox th,
.navbox-title {
	/* Level 1 color */
	background: #333;
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	/* Level 2 color */
	background: #444;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	/* Level 3 color */
	background: #555;
}
.navbox-even {
	/* Even row striping */
	background: #111;
}
.navbox-odd {
	/* Odd row striping */
	background: transparent;
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	/* Adjust hlist padding in navboxes */
	padding: 0.125em 0;
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
	/* Nowrap list items in navboxes */
	white-space: nowrap;
	/* IE < 8 no-wraps entire list, so disable it */
	white-space: normal !ie;
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
	/* But allow parent list items to be wrapped */
	white-space: normal;
}
ol + table.navbox,
ul + table.navbox {
	/* Prevent lists from clinging to navboxes */
	margin-top: 0.5em;
}

/* [[Template:Navbar]] */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}
.navbar ul {
	display: inline;
	white-space: nowrap;
}
.navbar li {
	word-spacing: -0.125em;
}
/* Navbar styling when nested in navbox */
.navbox .navbar {
	display: block;
	font-size: 100%;
}
.navbox-title .navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: 0.5em;
	width: 6em;
}

/**
 * Style for horizontal lists (separator following item).
 * @source mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 6 (2014-05-09)
 * @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}
/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}
.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
	content: ") ";
	font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}
.hlist ol > li {
	counter-increment: listitem;
}
.hlist ol > li:before {
	content: " " counter(listitem) " ";
	white-space: nowrap;
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) " ";
}
/* end hlist */

/* Selectable jQuery ul/li   */
ul.selectable {
 margin-left: 0;
 padding-left: 0;
 display: inline;
 }

ul.selectable li {
 margin: 3px 3px 0 0;
 padding: 3px 15px 5px;
 list-style: none;
 display: inline-block;
 border-radius: 7px;
 font-weight: 700;
 border: 1px solid darkgrey;
 background: #222;
}

li.ui-selected {
 background: rgb(245, 132, 0)!important;
}
/* end selectable jQuery ul/li   */

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
    margin: 0;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavPic {
    background-color: #fff;
    margin: 0;
    padding: 2px;
    /* @noflip */
    float: left;
}
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
}
div.NavEnd {
    margin: 0;
    padding: 0;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position: absolute;
    top: 0;
    /* @noflip */
    right: 3px;
    font-weight: normal;
    font-size: 90%;
}

/* Tree Menu CSS */

.fancytree ul {
    background: none;
    border: none;
    font-size: 12px;
}
ul.fancytree-container {
    outline: 0px;
    border: none;
    overflow: hidden;
}
.fancytree p {
    display: none;
}
span.fancytree-title {
    cursor: default;
    color: #e0ab43;
    font-size: 125%;
   font-weight: bold;
}
span.fancytree-title a {
    color:  goldenrod;
}



/* css stack for the crisp-images image rendering mode */
.crispImages {
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
}

/* css stack for cursors */
.grabbable {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* Animal Lore tool */
.removeFile {
    border-radius: 6px;
    color: red;
    display: inline-block;
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
    font-size: 150%;
    font-weight: 900;
    line-height: 2em;
    margin: 0 .3em;
    text-align: center;
    width: 1em;
}
.removeFile:hover {
    background-color: red;
    color: white;
    cursor:pointer;
}

.dropZone {
    border-radius:12px;
    border:1px white solid;
    width:120%;
    height:6em;
    text-align:center;
    line-height:6em;
    font-size:150%;
    margin:1em 15%;
    background: rgb(96,175,255);
    background: -moz-radial-gradient(center, ellipse cover, rgba(96,175,255,1) 0%, rgba(20,132,244,1) 67%, rgba(20,132,244,1) 67%, rgba(20,132,244,1) 85%, rgba(20,132,244,1) 85%, rgba(19,116,213,1) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(96,175,255,1) 0%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 85%,rgba(20,132,244,1) 85%,rgba(19,116,213,1) 100%);
    background: radial-gradient(ellipse at center, rgba(96,175,255,1) 0%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 67%,rgba(20,132,244,1) 85%,rgba(20,132,244,1) 85%,rgba(19,116,213,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60afff', endColorstr='#1374d5',GradientType='1');
}

label.selectLabel {
    color:#FFF;
    font-weight: 900;
    padding-left: 0.4em;
    padding-right: 1em;
}

label.selectLabel::after {
  content: ": ";
}

li.selectLI {
    cursor:pointer;
    color: #ddd;
    margin: 2px!important;
}
Retrieved from "https://wiki.stratics.com/index.php?title=MediaWiki:Common.css&oldid=309504"