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

.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: #dddddd;
    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: #555;
    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;
}

/* Move collapsibles' toggles to the left */
.mw-collapsible-toggle {
    float: left!important;
}
.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(.6);
}
.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.scale6 {
        transform: scale(1.3)!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.scale6 {
        transform: scale(.8)!important;
    }
    .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.scale6 {
        transform: scale(.67)!important;
    }
    .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.scale6 {
        transform: scale(.4)!important;
    }
    .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;
}
@-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);
}
/* 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%;
}