Common.css

/* CSS placed here will be applied to all skins */
/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}



/* --- TOOLTIP --- 
Below is imported from the wowpedia wiki, courtesy of PCJ
It will allow to make links hoverable, with embedded content, from the page. See Template:Itemtip
*/

/* WoW Style Tooltip */
.wtooltip {
 width: 18em;
 min-width: 15em;
 padding: 0.3em;
 margin: 5px;
 background-color: #101010;
 border: 1px #b0b0b0 solid;
 border-radius: 0.75ex;
 text-align: left; 
}

.infoboxtable{z-index:2997;}
.infoboxtable > *{z-index:2997;}

.wtooltip ul {margin: 0; padding: 0; list-style: none; list-style-type: none; list-style-image: none;}
.wtooltip, .wtooltip li, .wtooltip li > a {color: #f0f0f0;}
.wtooltip .outericon {position: absolute; left: -38px; top: 0}

/* itemtooltip and others MUST be used in conjunction with wtooltip */
.itemtooltip { width: 18em; margin-top: 0; }
.proftip {width: 22em}
.tooltip-contentX{z-index:2998;position:relative;float:left; }
.htt .tooltip-contentX ul {margin: 0; padding: 0; list-style: none; list-style-type: none; list-style-image: none;}
.htt .tooltip-contentX, .tooltip-contentX a, .htt .tooltip-contentX li, .htt .tooltip-contentX li > a {color: #f0f0f0;}
.htt > .tooltip-contentX {clear: both}
li.socket, li.socket a, .htt .tooltip-contentX li.socket, .htt .tooltip-contentX li.socket a {color: #999;}
li.glyph, li.glyph a, .htt .tooltip-contentX li.glyph, .htt .tooltip-contentX li.glyph a {color:#71d5ff;}
li.relic, li.relic a, .htt .tooltip-contentX li.relic, .htt .tooltip-contentX li.relic a {color:#BFA760;}
li.req, li.req a, .htt .tooltip-contentX li.req, .htt .tooltip-contentX li.req a {color: #999;}
li.locked, li.locked a, .htt .tooltip-contentX li.locked, .htt .tooltip-contentX li.locked a {color: #d22;}
li.bonus, li.bonus a, .htt .tooltip-contentX li.bonus, .htt .tooltip-contentX li.bonus a {color: #0f0;}
li.flavor, li.flavor a, .htt .tooltip-contentX li.flavor, .htt .tooltip-contentX li.flavor a, .wtooltip li.description, .wtooltip li.description a {color: #ffd517;}
li.detail, li.detail a, .htt .tooltip-contentX li.detail, .htt .tooltip-contentX li.detail a {color: #66c;}
li.set, li.set a, .htt .tooltip-contentX li.set, .htt .tooltip-contentX li.set a {color: #ffd100;}
li.setbonus, li.setbonus a, .htt .tooltip-contentX li.setbonus, .htt .tooltip-contentX li.setbonus a {color: #999;}
div.htt .setdesc { display:none; }
.setdesc .linkicon { display: none; }
.setdesc strong.selflink {font-weight: normal}
.tooltip, .htt .tooltip-contentX {
 font-size: 1em;
 float: left;
 width: auto;
 padding: 0px;
 margin: 0px;
 color: #fff;
 background-color: #111;
 border: 1px #bbb solid;
 border-radius: 0.75ex;
}
.htt .tooltip-contentX table {color: white}
 .tooltip ul, .htt .tooltip-contentX ul {
 margin: 0;
 padding: 0;
 list-style: none;
 list-style-type: none;
 list-style-image: none;
}

.htt .tooltip-contentX { background-color: #070A1A }
.htt .tooltip-contentX {/*max-width: 22em;*/ background-color: rgba(11, 16, 41, 0.9) }

.htt .ach-tt {/*max-width: 35em !important;*/}

#templatetfb .tooltip-contentX { /*max-width: 300px !important;*/ }
.htt .tooltip-contentX .tooltip-hide { display:none; }
.tooltip-ready { visibility:hidden; display:block; z-index: 2999; }

/* Template:itemtip and co. */
.tt-icon {float: right; position: relative; margin-left: 4px}
.tt-icon-stack {text-shadow: #202020 1px 1px, #202020 0px 0px 3px; position: absolute; bottom: 1px; right: 2px}
.hometip > ul > .awayline, .awaytip > ul > .homeline {display: none}
.wtooltip.awaytip {font-size: 0.85em}
.hometip {float: right}
.awaytip {float: left}
.createline > .itemtooltip {background: transparent; border: none; font-size: 0.90em; margin: 0.75em 0; padding: 0}
.awaytip > ul > .createline > .itemtooltip {margin: 0.90em 0}

.ajaxttlink > img, .linkicon img {vertical-align: text-bottom}

.infoboxtable{
    margin-bottom: 0.5em; 
    margin-left: 1em; 
    padding: 0.2em; 
}

.tooltip-contentX > .infoboxtable{
margin:1px;
}
.tooltip-contentX > .wikitable{
margin:1px;
}
 
footer#footer{
z-index:0;
position:relative;
}

/*Flags*/

.flagicon { 
    transition: transform .2s;   
    display:inline-block;
}

.flagicon img {
  min-width: 25px;
  min-height: 15px;
}

.flagiconbottom {
  transition: transform 0s;
  opacity: 0;
  position: absolute;
  bottom: 8.5%;
  left: 0%;
  width: 100%;
  text-align: center;
  z-index:9999;
}

.flagicontext {
  background-color: #152c41;
  color: #e0e0e0;
  font-size: 2px;
  font-family: initial; 
  transition: transform 0s;
}

.flagicon > div:nth-child(1) { 
    transition: transform .2s;
    opacity: 1;
    height:0px;
}

.flagicon:hover > div:nth-child(1){
    opacity: 0;
} 

.flagicon > div:nth-child(2) { 
    transition: transform .2s;
    opacity: 0;
    pointer-events: none;
}

.flagicon:hover > div:nth-child(2) {
    transform: scale(10.5); 
    opacity: 0.9;
    position: absolute;
  z-index:9999;
}

.flagicon:hover > div:nth-child(2) > div { 
    opacity: 0.95;
}

/* Flagbox */
.flagdisplayclass{
  text-align:left;
  float:left; 
  vertical-align:middle;
  margin-right:10px;
  margin-bottom:2px; 
  margin-top:2px;
  padding-right:2px;  
  -webkit-box-shadow: 3px 0 6px -3.4px #555;
  box-shadow: 3px 0 6px -3.4px #555;
}

.languagetable {
    background-color: rgba(0,0,0,0.1);
    border: 1px solid #505050;
    color: #ffffff; 
    font-size: 89%; 
}

.fullwidth{
  max-width:100%;
}

.forcedfullwidth{
  width:100%;
}

#mw-head{
	z-index:999;
}
#p-logo{
	z-index:9999 !important;
}
#content{
position:relative;
z-index:1;
}

.table-align-top{
margin:0px;padding:0px;
border-spacing: 0px 1px;
border-collapse: separate;
}

.table-align-top > tbody{
margin:unset;padding:unset;
border-spacing: unset;
border-collapse: unset;
}

.table-align-top > tbody > tr > td{
vertical-align:top;
}

.top-content-table > tbody > tr > td:nth-child(1){
background-color: rgba(0,0,0,0.1); 
border: 1px solid #505050; 
color: #ffffff; 
font-size: 89%;
}

.blockquote {
  background-color: rgba(0,0,0,0.1);
  border-left: 10px solid #0d192c;
  margin: 1.5em 25px;
  padding: 0.5em 5px;
  color: #E0E0E0;
  quotes: "\201C""\201D""\2018""\2019";
}
.blockquote:before {
  color: #E0E0E0;
  content: open-quote;
  font-size: 4em;
  line-height: 0.4em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}
.blockquote p {
  display: inline;
}

.dot {
    height: 9px;
    width: 9px;
    background-color: #226094;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 8px 0px 8px;
}

/* Styling for infocards */

.infocard_outer { /*Shares style with infoboxtable */
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #505050;
    color: #ffffff;
    float: right;
    font-size: 89%; 
    width: 300px;
}

.infocard_inner > tbody > tr > td:nth-of-type(2) {
width:90px;
background-color: #0d192c; 
padding:5px;
text-align:center;
vertical-align:middle;
}

.infocard_title > tbody > tr:nth-of-type(1) > td{ 
    background-color: #0d192c; 
    font-size: 110%; 
    font-weight: bold;
    padding: 0.1em; 
    text-align:center; 
} 

.infocard_list > tbody > tr > td:nth-of-type(1),.infocard_list > tbody > tr > td:nth-of-type(4){
    background-color: #0d192c; 
    border: 2px solid inherit; 
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; 
    font-weight: bold;
    padding: 0.5px 0px 3px 3px;
    text-align: right;
    max-width: 20px;
    overflow:hidden;
}

.infocard_list > tbody > tr > td:nth-of-type(2),.infocard_list > tbody > tr > td:nth-of-type(5){
    background-color: #0d192c; 
    border: 2px solid inherit; 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; 
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
    height: 100%;
    padding-right: 7px;
}

.infocard_list > tbody > tr > td:nth-of-type(3),.infocard_list > tbody > tr > td:nth-of-type(6){
  width:30%;
  position:relative;
}

.infocard_list > tbody > tr > td:nth-of-type(3) > div:nth-of-type(1),.infocard_list > tbody > tr > td:nth-of-type(6) > div:nth-of-type(1){
  position:relative;
  display:block;
  z-index:999;
}

.infocard_list > tbody > tr > td:nth-of-type(3) > div:nth-of-type(2),.infocard_list > tbody > tr > td:nth-of-type(6) > div:nth-of-type(2){
  top: 0px; 
  position: absolute;
  height: calc(100% - 2px);
  opacity: 0.7;
  z-index: 998;
  text-shadow: 1px 1px 1px aliceblue;
  font-weight: bold;
}


.infocard_single > tbody > tr > td:nth-of-type(3){
  width:70% !important;
}

.infocard_negative{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAF0lEQVQYlWNgIAK8YWDYPKqInooYGBgAAPIQN4YJBosAAAAASUVORK5CYII=) repeat;
   border-top: 1px solid #f8060699;
   border-bottom: 1px solid #f8060699;
}
.infocard_positive{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVQYlWNgIAa81t88qoiuihgYAGc1EgN7yI8jAAAAAElFTkSuQmCC) repeat;
   border-top: 1px solid #0d8b3cb3;
   border-bottom: 1px solid #0d8b3cb3;
}

.infocard_tab{
background-color: #0d192c; 
padding-right: 5px; 
border-radius: 5px; 
padding-left: 5px; 
margin: 1px; 
font-weight: bold;
}

.infocard_ammunition{ 
padding-left: 0px;
padding-right: 5px;
background-image: url('/media/4/45/Icon_Weapon_Ammunition.png');
background-position: 0px 0px;
background-size: 25px 25px;
background-repeat: no-repeat;
}

.infocard_range_right{
background-image: url('/media/f/fe/Icon_Range_Right.png');
width: 18px;
height: 20px;
background-position: 0px 3px;
background-size: 15px 15px;
background-repeat: no-repeat;
}
.infocard_range_center{
background-image: url('/media/d/da/Icon_Range_Middle.png'); 
background-repeat: repeat-x; 
background-position: 0px 3px; 
background-size: 100% 15px;
}
.infocard_range_left{
background-image: url('/media/6/6e/Icon_Range_Left.png');
width: 18px;
height: 20px;
background-position: 3px 3px;
background-size: 15px 15px;
background-repeat: no-repeat;
}


/*fix*/
div#mw-head{
	width: calc(100% - 10em) !important;
}

div#left-navigation{
	margin-left: 2em !important;
}