MediaWiki:Common.css

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

@import url("/index.php?title=MediaWiki:Simple-lightbox.min.css&action=raw&ctype=text/css");

h3 { font-size: 138%; } /* was 132% */


p { max-width: 100em; }
/* --- Gallery & Thumb Changes --- */

li.gallerybox div.thumb{border: none; background-color: white;}

ul.gallery {
max-width:100% !important;
}

/* --- item pages --- */
@media only screen and (min-device-width: 451px) {
div.hbdiv span.hb .itembg,
.itembg { width: 451px; background-image: url(images/Itemshot.gif) !important; text-align: left; }
div.hbdiv span.hb .itembg * { background-image: url(images/Itemshot.gif) !important; }

.itemtopbg { width: 451px; height: 20px; background-image: url(images/Itemtop.gif) !important; }
div.hbdiv span.hb .itemtopbg * { background-image: url(images/Itemtop.gif) !important; }

.itembotbg { width: 451px; height: 22px; background-image: url(images/Itembot.gif) !important; }
div.hbdiv span.hb .itembotbg * { background-image: url(images/Itembot.gif) !important; }

.itemtitle { font-family: Arial; font-size: 12px; color: #c0c0c0; text-align: center; width: 100%; height: 15px;padding-top:5px; }
.itemdata { font-family: Arial; font-size: 12px; color: #ffffff; padding: 0px 5px 10px 20px; max-width: 100%; overflow: hidden; }
.itemicon { margin: 0 25px; }
.itemicon div.floatright{ border: 3px solid grey;margin-top:7px;}

.Common { margin: 0 25px; }
.Common div.floatright{ border: 3px solid grey;margin-top:7px}
.Uncommon { margin: 0 25px; }
.Uncommon div.floatright{ border: 3px solid white;margin-top:7px}
.Mythical { margin: 0 25px; }
.Mythical div.floatright{ border: 3px solid green;margin-top:7px}
.Rare { margin: 0 25px; }
.Rare div.floatright{ border: 3px solid blue;margin-top:7px }
.Legendary { margin: 0 25px; }
.Legendary div.floatright{ border: 3px solid orange;margin-top:7px }
.Godly { margin: 0 25px; }
.Godly div.floatright{ border: 3px solid magenta;margin-top:7px }


.Common img{ width: 75px;height: 75px; }
.Common div.floatright img{ width: 75px;height: 75px;}
.Uncommon img{ width: 75px;height: 75px; }
.Uncommon div.floatright img{ width: 75px;height: 75px;}
.Mythicalimg{ width: 75px;height: 75px; }
.Mythicaldiv.floatright img{ width: 75px;height: 75px;}
.Rare img{ width: 75px;height: 75px; }
.Rare div.floatright img{ width: 75px;height: 75px;}
.Legendary img{ width: 75px;height: 75px; }
.Legendary div.floatright img{ width: 75px;height: 75px;}
.Godly img{ width: 75px;height: 75px; }
.Godly div.floatright img{ width: 75px;height: 75px;}

.itemdata a { color: #0b0; }
}
/* --- remove page title (all pages) --- 

#firstHeading {
display:none !important;
}  */

/* --- item hoverbox --- */

.hbdiv { display: inline-block; }
.hbdiv span.hb { display: none; z-index: 99; }
.hbdiv:hover { position: relative; }
.hbdiv:hover span.hb { display: block; position: absolute; top: 20px; left: 30px; }

.magelohb span.hb { display: none; z-index: 100; }
.magelohb:hover span.hb { display: block; position: absolute; top: 20px; left: 30px; z-index: 100; }

/* --- grayout for content not yet implemented --- */

.grayout { color: #bbbbbb; }
.grayout a { color: #bbbbbb; }
.grayout a.new { color: #bbb; }
.grayout h3 { color: #bbb; }
.grayout h2 { color: #bbb; }
.grayout h1 { color: #bbb; }

/* --- new itemhover --- */

#itemHoverContainer { position:absolute; left:0; top:0; display:none; z-index: 1000; } 
#itemHoverContent { }  
.itemHoverPopup { }

/* --- auction tracker --- */





/



/* 100% Height/Width Images */
/* Need:
   Mediawiki doesn't let you make image tags with "fill my container" height and width,
   or in other words: <img src="foo.png" style"height: 100%; width:100%;" />

   This class makes that style possible via <span class="full-size"<[[File:Foo.png]]</span>.
   This can then be used, for example, to put two images side by side in a table with each cell set to a width of 50%.
*/
.full-size img { height: 100%; width: 100%; }







/* Staff Images, for /Rulings and other pages */

.staff-icon {
  background-color: #D1D1E1; /* Forum post left-side (ie. author-side) background color */
  display: inline-block;
  line-height: 84px; /* for vertical centering ... not sure why, but it needs to be 2px less or it looks wrong */
  max-height: 86px;
  max-width: 86px;
  min-height: 86px;
  min-width: 86px;
  text-align: center;
  vertical-align: middle;
}
.staff-icon img {
  max-height: 80px;
  max-width: 80px;
}

/* Speech Bubbles

Based Off Code From:

*/
.speech-bubble {
  background: #F5F5FF; /* Forum post right-side (ie. post-side) background color */
  border: 1px solid #a7a7a7;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  /*font-size: 1.2rem;*/
  line-height: 1.3;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right 0;
  margin-top: 0;
  max-width: 95%;
  padding: 15px;
  position: relative;
}
.speech-bubble.right {
  margin-left: 0;
  margin-right auto;
}
.speech-bubble p {
  margin-bottom: 10px;
}
.speech-bubble p:last-of-type {
  margin-bottom: 0;
}

.speech-bubble-arrow {
  border-right: 21px solid transparent;
  border-top: 20px solid #0003;
  bottom: -25px;
  left: 15px;
  position: absolute;
}
.right .speech-bubble-arrow {
  border-left: 21px solid transparent;
  border-right: none;
  left: initial;
  right: 15px;
}
.speech-bubble-arrow::before {
  border-right: 23px solid transparent;
  border-top: 23px solid #a7a7a7;
  bottom: 2px;
  content: "";
  left: 5px;
  position: absolute;
}
.right .speech-bubble-arrow::before {
  border-left: 23px solid transparent;
  border-right: none;
  left: initial;
  right: 5px;
}
.speech-bubble-arrow::after {
  border-right: 21px solid transparent;
  border-top: 21px solid #efefef;
  bottom: 4px;
  content: "";
  left: 6px;
  position: absolute;
}
.right .speech-bubble-arrow::after {
  border-left: 21px solid transparent;
  border-right: none;
  left: initial;
  right: 6px;
}



/* Tabs */
/* NOTE: Tab styles were originally stolen from https://en.wikipedia.org/wiki/Template:Page_tabs */

.tabs {
  background: #f8fcff;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
.tab {
  background-color: #cee0f2;
  border: solid 1px #a3b1bf;
  border-radius: 5px 5px 0 0;
  float: left; 
  font-size: 95%;
  line-height: 0.95em;
  padding: 0.5em;
  white-space: nowrap;
}
.tab.selected {
  background-color:white;
  border-bottom:0;
  font-weight:bold;
}
.clear {
  clear: both;
}
.eoTable{border:1px solid #eeeeee;padding:4px}.eoTable tr:nth-child(odd){background-color:#f2f2f2}.eoTable tr:nth-child(even){background-color:#e2e2e2}.eoTable th{text-align:left;background-color:#cccccc;padding:4px}.eoTable td{padding:1px 4px}.eoTable2{width:60%;border:1px solid #becff2;padding:4px}.eoTable2 tr:nth-child(odd){background-color:#f2f2fa}.eoTable2 tr:nth-child(even){background-color:#e2e2fa}.eoTable2 th{text-align:left;background-color:#cedff2;padding:2px 8px}.eoTable2 td{padding:2px 8px}.eoTable3{width:80%;border:1px solid #becff2;padding:2px}.eoTable3 tr:nth-child(odd){background-color:#f2f2fa}.eoTable3 tr:nth-child(even){background-color:#e2e2fa}.eoTable3 th{text-align:left;background-color:#cedff2;padding:2px 8px}.eoTable3 td{padding:1px 8px}

.zoneTopTable{border:1px solid #b3c0cf;padding:2px}
.zoneTopTable th{background:#cedff2;font-weight:normal;padding:1px 6px}
.zoneTopTable td{padding:0px 2px}
.questTopTable{border:1px solid #b3c0cf;padding:4px;}
.questTopTable th{background:#cedff2;padding:3px 10px;font-weight:normal}
.questTopTable td{padding:3px 6px}

/* Provide a way to hide auto-numbering in Table of Contents;
see: https://www.mediawiki.org/wiki/Manual:Table_of_contents */
.noautonum .tocnumber { display: none; }