MediaWiki:Common.css

/* 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;
}

/* 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 h1 {
    font-weight: 900;
}
.mw-body h2 {
    margin-top: 0;
}

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

/* Infobox template style */
.ns-3000, .infobox {
    border: 1px solid #aaa;
    border-spacing: 3px;
    background-color: #fff;
    color: black;
    /* @noflip */
    margin: 3.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    font-size: 88%;
    line-height: 1.5em;
    max-width: 30%;
    min-width: 24%;
}
.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;
}

/* 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 */
iindent {
    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. */
.pin.quest-npc a img {
    transform: scale(.8);
}
.pin.stealable-item a img {
    transform: scale(.5);
}
.map {
    z-index: -999;
    position: absolute;
}
@media (max-width: 1680px) {
    .familyTree {
        transform: scale(.7);
        transform-origin: top left;
    }
    .map-holder {
        transform: scale(.12);
    }
    .pin.scale2 {
        transform: scale(4)!important;
    }
    .pin.scale2-7 {
        transform: scale(3.2)!important;
    }
        .pin.scale3-25,.pin.scale3-5 {
        transform: scale(2.4)!important;
    }
    .pin.scale4 {
        transform: scale(2)!important;
    }
    .pin.scale5-2, .pin.scale6 {
        transform: scale(1.3)!important;
    }
    .pin.scale7 {
        transform: scale(1)!important;
    }
    .pin.scale8 {
        transform: scale(.8)!important;
    }
    .pin.scale10 {
        transform: scale(.7)!important;
    }
    .pin.scale12 {
        transform: scale(.6)!important;
    }
    .pin.scale15, .pin.scale17, .pin.scale18 {
        transform: scale(.5)!important;
    }
    .pin.scale20 {
        transform: scale(.4)!important;
    }
    .pin.scale25 {
        transform: scale(.3)!important;
    }
}
@media (max-width: 1920px)  and (min-width: 1681px){
    .map-holder {
        transform: scale(.18);
    }
    .pin.scale2 {
        transform: scale(2.4)!important;
    }
    .pin.scale2-7 {
        transform: scale(1.9)!important;
    }
        .pin.scale3-25,.pin.scale3-5 {
        transform: scale(1.6)!important;
    }
    .pin.scale4 {
        transform: scale(1.2)!important;
    }
    .pin.scale5-2, .pin.scale6 {
        transform: scale(.8)!important;
    }
    .pin.scale7, .pin.scale8 {
        transform: scale(.7)!important;
    }
    .pin.scale10 {
        transform: scale(.6)!important;
    }
    .pin.scale12 {
        transform: scale(.4)!important;
    }
    .pin.scale15, .pin.scale17, .pin.scale18 {
        transform: scale(.3)!important;
    }
    .pin.scale20 {
        transform: scale(.25)!important;
    }
    .pin.scale25 {
        transform: scale(.2)!important;
    }
}
@media (max-width: 2560px)  and (min-width: 1921px){
    .map-holder {
        transform: scale(.2);
    }
    .pin.scale2 {
        transform: scale(2)!important;
    }
    .pin.scale2-7 {
        transform: scale(1.65)!important;
    }
    .pin.scale3-25,.pin.scale3-5 {
        transform: scale(1.3)!important;
    }
    .pin.scale4 {
        transform: scale(1)!important;
    }
    .pin.scale5-2, .pin.scale6 {
        transform: scale(.67)!important;
    }
    .pin.scale7, .pin.scale8 {
        transform: scale(.51)!important;
    }
    .pin.scale10 {
        transform: scale(.4)!important;
    }
    .pin.scale12 {
        transform: scale(.3)!important;
    }
    .pin.scale15, .pin.scale17, .pin.scale18 {
        transform: scale(.25)!important;
    }
    .pin.scale20 {
        transform: scale(.2)!important;
    }
    .pin.scale25 {
        transform: scale(.15)!important;
    }
}
@media (min-width: 2561px){
    .map-holder {
        transform: scale(.23);
    }
    .pin.scale2 {
        transform: scale(1.2)!important;
    }
    .pin.scale2-7 {
        transform: scale(.95)!important;
    }
    .pin.scale3-25,.pin.scale3-5 {
        transform: scale(.75)!important;
    }
    .pin.scale4 {
        transform: scale(.6)!important;
    }
    .pin.scale5-2, .pin.scale6 {
        transform: scale(.4)!important;
    }
    .pin.scale7, .pin.scale8 {
        transform: scale(.3)!important;
    }
    .pin.scale10 {
        transform: scale(.2)!important;
    }
    .pin.scale12 {
        transform: scale(.2)!important;
    }
    .pin.scale15, .pin.scale17, .pin.scale18 {
        transform: scale(.16)!important;
    }
    .pin.scale20 {
        transform: scale(.12)!important;
    }
    .pin.scale25 {
        transform: scale(.08)!important;
    }
}
.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;
}
.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);
}
.radarMap div .pin a img,.radarMap div .pin:hover:after,.radarMap .menutrigger:hover:after  {
    transform: rotate(-45deg);
}
.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) }
}
#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: 15%;
    left: 10%;
    cursor: move;
}
.radarMap {
    transform: translateX(150%);
}
.radarMap>div {
    transform: scale(.75) rotate(45deg) translate(50px,50px);
}

.icon {
    image-rendering: pixelated
    position: relative;
}

.icon, .icon-archers_guild {
    margin: -3px -232px -213px -3px;
    --clip-path: inset(3px 232px 213px 3px);
}

.icon, .icon-armaments_guild {
    margin: -3px -211px -213px -24px;
    --clip-path: inset(3px 211px 213px 24px);
}

.icon, .icon-armorer {
    margin: -3px -181px -208px -45px;
    --clip-path: inset(3px 181px 208px 45px);
}

.icon, .icon-armorers_guild {
    margin: -3px -160px -213px -75px;
    --clip-path: inset(3px 160px 213px 75px);
}

.icon, .icon-assasins_guild {
    margin: -3px -139px -213px -96px;
    --clip-path: inset(3px 139px 213px 96px);
}

.icon, .icon-baker {
    margin: -3px -109px -208px -117px;
    --clip-path: inset(3px 109px 208px 117px);
}

.icon, .icon-bank {
    margin: -3px -78px -208px -147px;
    --clip-path: inset(3px 78px 208px 147px);
}

.icon, .icon-barber {
    margin: -3px -58px -213px -177px;
    --clip-path: inset(3px 58px 213px 177px);
}

.icon, .icon-bard {
    margin: -20px -223px -191px -3px;
    --clip-path: inset(20px 223px 191px 3px);
}

.icon, .icon-bardic_guild {
    margin: -16px -160px -200px -75px;
    --clip-path: inset(16px 160px 200px 75px);
}

.icon, .icon-beekeeper {
    margin: -20px -49px -191px -177px;
    --clip-path: inset(20px 49px 191px 177px);
}

.icon, .icon-blacksmiths_guild {
    margin: -16px -139px -200px -96px;
    --clip-path: inset(16px 139px 200px 96px);
}

.icon, .icon-blacksmith {
    margin: -42px -223px -169px -3px;
    --clip-path: inset(42px 223px 169px 3px);
}

.icon, .icon-body_of_water {
    margin: -41px -196px -176px -32px;
    --clip-path: inset(41px 196px 176px 32px);
}

.icon, .icon-bowyer {
    margin: -42px -167px -169px -59px;
    --clip-path: inset(42px 167px 169px 59px);
}

.icon, .icon-bridge {
    margin: -41px -145px -178px -88px;
    --clip-path: inset(41px 145px 178px 88px);
}

.icon, .icon-butcher {
    margin: -42px -116px -169px -110px;
    --clip-path: inset(42px 116px 169px 110px);
}

.icon, .icon-carpenter {
    margin: -42px -86px -169px -140px;
    --clip-path: inset(42px 86px 169px 140px);
}

.icon, .icon-cavalry_guild {
    margin: -42px -65px -174px -170px;
    --clip-path: inset(42px 65px 174px 170px);
}

.icon, .icon-cave {
    margin: -59px -203px -151px -32px;
    --clip-path: inset(59px 203px 151px 32px);
}

.icon, .icon-champion {
    margin: -41px -45px -168px -190px;
    --clip-path: inset(41px 45px 168px 190px);
}

.icon, .icon-city {
    margin: -64px -228px -147px -3px;
    --clip-path: inset(64px 228px 147px 3px);
}

.icon, .icon-cooks_guild {
    margin: -59px -146px -157px -89px;
    --clip-path: inset(59px 146px 157px 89px);
}

.icon, .icon-council_of_mages_faction {
    margin: -64px -177px -143px -53px;
    --clip-path: inset(64px 177px 143px 53px);
}

.icon, .icon-counselors_guild {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
}

.icon, .icon-customs {
    margin: -64px -86px -147px -140px;
    --clip-path: inset(64px 86px 147px 140px);
}

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

.icon, .icon-dock {
    margin: -63px -50px -153px -189px;
    --clip-path: inset(63px 50px 153px 189px);
}

.icon, .icon-dungeon {
    margin: -80px -152px -127px -79px;
    --clip-path: inset(80px 152px 127px 79px);
}

.icon, .icon-exit {
    margin: -79px -53px -141px -190px;
    --clip-path: inset(79px 53px 141px 190px);
}

.icon, .icon-farm {
    margin: -92px -236px -128px -3px;
    --clip-path: inset(92px 236px 128px 3px);
}

.icon, .icon-fighters_guild {
    margin: -92px -215px -124px -20px;
    --clip-path: inset(92px 215px 124px 20px);
}

.icon, .icon-fishermans_guild {
    margin: -92px -194px -124px -41px;
    --clip-path: inset(92px 194px 124px 41px);
}

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

.icon, .icon-flight_path {
    margin: -26px -127px -194px -117px;
    --clip-path: inset(26px 127px 194px 117px);
}

.icon, .icon-fort {
    margin: -20px -106px -187px -131px;
    --clip-path: inset(20px 106px 187px 131px);
}

.icon, .icon-gate {
    margin: -91px -177px -125px -61px;
    --clip-path: inset(91px 177px 125px 61px);
}

.icon, .icon-graveyard {
    margin: -91px -108px -125px -132px;
    --clip-path: inset(91px 108px 125px 132px);
}

.icon, .icon-guild {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
}

.icon, .icon-healers_guild {
    margin: -114px -232px -102px -3px;
    --clip-path: inset(114px 232px 102px 3px);
}

.icon, .icon-healer {
    margin: -92px -49px -119px -177px;
    --clip-path: inset(92px 49px 119px 177px);
}

.icon, .icon-herbalist {
    margin: -114px -201px -97px -24px;
    --clip-path: inset(114px 201px 97px 24px);
}

.icon, .icon-illusionists_guild {
    margin: -114px -181px -102px -54px;
    --clip-path: inset(114px 181px 102px 54px);
}

.icon, .icon-inn {
    margin: -114px -151px -97px -75px;
    --clip-path: inset(114px 151px 97px 75px);
}

.icon, .icon-island {
    margin: -114px -126px -102px -105px;
    --clip-path: inset(114px 126px 102px 105px);
}

.icon, .icon-jeweler {
    margin: -114px -95px -97px -130px;
    --clip-path: inset(114px 95px 97px 130px);
}

.icon, .icon-lair {
    margin: -20px -200px -190px -31px;
    --clip-path: inset(20px 200px 190px 31px);
}

.icon, .icon-landmark {
    margin: -115px -79px -105px -161px;
    --clip-path: inset(115px 79px 105px 161px);
}

.icon, .icon-library {
    margin: -114px -49px -97px -177px;
    --clip-path: inset(114px 49px 97px 177px);
}

.icon, .icon-lockpicking_box {
    margin: -21px -180px -188px -55px;
    --clip-path: inset(21px 180px 188px 55px);
}

.icon, .icon-mage {
    margin: -136px -208px -75px -18px;
    --clip-path: inset(136px 208px 75px 18px);
}

.icon, .icon-mages_guild {
    margin: -136px -187px -80px -48px;
    --clip-path: inset(136px 187px 80px 48px);
}

.icon, .icon-market {
    margin: -136px -157px -75px -69px;
    --clip-path: inset(136px 157px 75px 69px);
}

.icon, .icon-merchants_guild {
    margin: -136px -136px -80px -99px;
    --clip-path: inset(136px 136px 80px 99px);
}

.icon, .icon-minax_faction {
    margin: -136px -109px -72px -120px;
    --clip-path: inset(136px 109px 72px 120px);
}

.icon, .icon-miners_guild {
    margin: -136px -89px -80px -146px;
    --clip-path: inset(136px 89px 80px 146px);
}

.icon, .icon-moongate {
    margin: -136px -74px -71px -167px;
    --clip-path: inset(136px 74px 71px 167px);
}

.icon, .icon-other {
    margin: -136px -58px -81px -181px;
    --clip-path: inset(136px 58px 81px 181px);
}

.icon, .icon-painter {
    margin: -162px -223px -49px -3px;
    --clip-path: inset(162px 223px 49px 3px);
}

.icon, .icon-player {
    margin: -152px -50px -36px -182px;
    --clip-path: inset(152px 50px 36px 182px);
}

.icon, .icon-point_of_interest {
    margin: -3px -38px -216px -198px;
    --clip-path: inset(3px 38px 216px 198px);
}

.icon, .icon-provisioners_guild {
    margin: -17px -27px -199px -207px;
    --clip-path: inset(17px 27px 199px 207px);
}

.icon, .icon-provisioner {
    margin: -197px -223px -14px -3px;
    --clip-path: inset(197px 223px 14px 3px);
}

.icon, .icon-quest_npc {
    margin: -64px -28px -129px -207px;
    --clip-path: inset(64px 28px 129px 207px);
}

.icon, .icon-rogues_guild {
    margin: -104px -22px -112px -207px;
    --clip-path: inset(104px 22px 112px 207px);
}

.icon, .icon-ruins {
    margin: -33px -33px -185px -210px;
    --clip-path: inset(33px 33px 185px 210px);
}

.icon, .icon-scenic_point {
    margin: -47px -29px -174px -210px;
    --clip-path: inset(47px 29px 174px 210px);
}

.icon, .icon-secret_door {
    margin: -121px -34px -84px -207px;
    --clip-path: inset(121px 34px 84px 207px);
}

.icon, .icon-shadowlords_faction {
    margin: -198px -198px -11px -33px;
    --clip-path: inset(198px 198px 11px 33px);
}

.icon, .icon-ship {
    margin: -3px -3px -199px -227px;
    --clip-path: inset(3px 3px 199px 227px);
}

.icon, .icon-shipwrights_guild {
    margin: -34px -8px -182px -227px;
    --clip-path: inset(34px 8px 182px 227px);
}

.icon, .icon-shipwright {
    margin: -121px -4px -90px -222px;
    --clip-path: inset(121px 4px 90px 222px);
}

.icon, .icon-shrine {
    margin: -51px -11px -163px -228px;
    --clip-path: inset(51px 11px 163px 228px);
}

.icon, .icon-sorcerers_guild {
    margin: -70px -7px -146px -228px;
    --clip-path: inset(70px 7px 146px 228px);
}

.icon, .icon-stable {
    margin: -143px -4px -68px -222px;
    --clip-path: inset(143px 4px 68px 222px);
}

.icon, .icon-stairs {
    margin: -88px -12px -131px -229px;
    --clip-path: inset(88px 12px 131px 229px);
}

.icon, .icon-stealable_item {
    margin: -165px -161px -29px -59px;
    --clip-path: inset(165px 161px 29px 59px);
}

.icon, .icon-tailor {
    margin: -165px -131px -46px -95px;
    --clip-path: inset(165px 131px 46px 95px);
}

.icon, .icon-tanner {
    margin: -165px -101px -46px -125px;
    --clip-path: inset(165px 101px 46px 125px);
}

.icon, .icon-tavern {
    margin: -165px -20px -46px -206px;
    --clip-path: inset(165px 20px 46px 206px);
}

.icon, .icon-teleporter {
    margin: -102px -14px -117px -228px;
    --clip-path: inset(102px 14px 117px 228px);
}

.icon, .icon-terrain {
    margin: -114px -126px -107px -105px;
    --clip-path: inset(114px 126px 107px 105px);
}

.icon, .icon-theater {
    margin: -187px -131px -24px -95px;
    --clip-path: inset(187px 131px 24px 95px);
}

.icon, .icon-thieves_guild {
    margin: -165px -80px -51px -155px;
    --clip-path: inset(165px 80px 51px 155px);
}
.icon, .icon-tinkers_guild {
    margin: -187px -80px -29px -155px;
    --clip-path: inset(187px 80px 29px 155px);
}
.icon, .icon-tinker {
    margin: -187px -101px -24px -125px;
    --clip-path: inset(187px 101px 24px 125px);
}

.icon, .icon-traders_guild {
    margin: -187px -29px -29px -206px;
    --clip-path: inset(187px 29px 29px 206px);
}

.icon, .icon-true_britannians_faction {
    margin: -187px -3px -21px -227px;
    --clip-path: inset(187px 3px 21px 227px);
}

.icon, .icon-warriors_guild {
    margin: -213px -176px -3px -59px;
    --clip-path: inset(213px 176px 3px 59px);
}

.icon, .icon-weapons_guild {
    margin: -213px -155px -3px -80px;
    --clip-path: inset(213px 155px 3px 80px);
}
/* 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 */

/* 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%;
}