Paragon Wiki
Don't have an account?
Register
Advertisement
Register
Paragon Wiki
Paragon Wiki
1,102
pages

Common.css

MediaWiki page
Revision as of 17:20, 12 December 2017 by Jtanooki (Message Wall | contribs)
Sign in to edit

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/***** CSS placed here will be applied to all skins on the entire site. *****/

@import 'http://fonts.googleapis.com/css?family=Open+Sans';

body, .category-gallery-item .snippet .text, a.wikia-button, .wikia-single-button a, .wikia-menu-button, input, .button, button, select, ul.tabbernav {font-family: 'Open Sans' !important;}

.WikiaPageHeader > h1 {
 font-family: 'Open Sans'; /* This changes the header on every article */
}
.WikiaArticle {
 font-family: 'Open Sans'; /* This changes the text in the content space only */
}
/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: #808080; content: " (redirect)"
}
.watchlistredir {
   font-style: italic;
}

/**Mainpage**/
.mainbox {
    border-image: url(/wiki/Special:Filepath?file=border-mainbox.png) fill 48 60 repeat;
    border-width: 32px 40px;
    border-style: solid;
    margin-top: 28px;
    margin-bottom: 28px;
}
.mainbox .head {
    color: #aecad4;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-align: center;
}
.mainbox .head:after {
    display: block;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    height: 18px;
    content: '';
    margin-top: 5px;
}
.mainbox h2.head {
    border-bottom: 0;
    margin: 0;
}
.mainbox hr {
    border: 0;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    background-color: transparent;
    height: 18px;
}

.mainboxside {
    margin-top: 28px;
    margin-bottom: 28px;
}
.mainboxside .head {
    color: #aecad4;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-align: center;
}
.mainboxside .head:after {
    display: block;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    height: 18px;
    content: '';
    margin-top: 5px;
}
.mainboxside h2.head {
    border-bottom: 0;
    margin: 0;
}
.mainboxside hr {
    border: 0;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    background-color: transparent;
    height: 18px;
}
.mainboxmini {
    margin-top: 4px;
    margin-bottom: 4px;
}
.mainboxmini .head {
    color: #aecad4;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-align: center;
}
.mainboxmini .head:after {
    display: block;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    height: 18px;
    width: 65%;
    margin: auto;
    content: '';
    margin-top: 5px;
}
.mainboxmini h2.head {
    border-bottom: 0;
    margin: 0;
}
.mainboxmini hr {
    border: 0;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    background-color: transparent;
    height: 18px;
}
/** Tables **/

.article-table-brown {
    width: 54%;
    background: #070707;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid #676767;
	border-collapse: separate;
	text-align: center;
}

.article-table-brown tr  {
    background-color: #070707;
}

.article-table-brown th  {
    background-color: #070707;
}

.article-table-brown tr:hover {
    background-color: #1e1e1e;
}

.center-article-table {
    width: 100%; 
    margin: auto;
    background: #0d0d0d;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border-collapse: separate;
	border-spacing: 2px;
	text-align: center;
}

.center-article-table th {
    background-color:#000000;
}

.center-article-table tbody {
    background-color: rgba(46,46,46,.2) ;
}
.mainpagebody {
    background:rgba(0,0,0,.5);
    padding: 1em;
    box-shadow: 0 0 4px #000000;
    border-radius: 3px;
}
/* Welcome. */
.page-Paragon_Wiki #welcome {
  overflow: hidden;
  padding: 1em;
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 4px #222;
  border-radius: 32px;
  line-height: 1.6;
  text-align: center;
}

/*Alerts and Notices*/
.stubarticle {
    margin: auto;
    border-radius: 30px;
    width: 300px;
    height: 120px;
    margin-bottom: 5px;
    overflow:hidden;
    box-shadow: 0 0 15px #222;
    text-align: center;
    font-size: 85%;
    position: relative;
}
/*Hero Backgrounds for articles*/
.Aurora_Background {
    background-image: url("http://vignette1.wikia.nocookie.net/paragonthegame/images/0/05/Aurora_Banner.png/revision/latest?cb=20170201202711");
}
.Countess_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/e/ef/Countess_Banner.png/revision/latest?cb=20161021191815");
}
.Crunch_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/4/43/Crunch_Banner.png/revision/latest?cb=20161111190006");
}
.Dekker_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/1/1d/Dekker_Banner.png/revision/latest?cb=20160730022518");
}
.Feng_Mao_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/a/ae/Feng_Mao_Banner.png/revision/latest?cb=20160728234715");
}
.Gadget_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/2/2f/Gadget_Banner.png/revision/latest?cb=20160728233340");
}
.Gideon_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/e/e0/Gideon_Banner.png/revision/latest?cb=20160728234733");
}
.Greystone_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/f/fa/Greystone_Banner.png/revision/latest?cb=20170220193955");
}
.Grux_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/e/e8/Grux_Banner.png/revision/latest?cb=20160728233643");
}

.Howitzer_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/5/5f/Howitzer_Banner.png/revision/latest?cb=20170220193956");
}

.Iggy_and_Scorch_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/5/53/Iggy_Banner.png/revision/latest?cb=20170220193956");
}

.Kallari_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/3/3f/Kallari_Banner.png/revision/latest?cb=20170220193957");
}

.Kwang_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/b/b2/Kwang_Banner.png/revision/latest?cb=20161009012801");
}

.Legacy_Background {
    background-image: url("https://vignette3.wikia.nocookie.net/paragonthegame/images/b/b7/Legacy_Banner.png/revision/latest?cb=20170806144505");
}
.Lt_Belica_Background {
    background-image: url("http://vignette4.wikia.nocookie.net/paragonthegame/images/5/5e/Lt._B%C3%A9lica_Banner.png/revision/latest?cb=20160909214433");
}
.Morigesh_Background {
    background-image: url("http://vignette1.wikia.nocookie.net/paragonthegame/images/f/f6/Morigesh_Banner.png/revision/latest?cb=20170403185215");
}
.Muriel_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/3/34/Muriel_Banner.png/revision/latest?cb=20160730021956");
}
.Narbash_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/d/d4/Narbash_Banner.png/revision/latest?cb=20160820080627");
}
.Serath_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/c/c1/Serath_Banner.png/revision/latest?cb=20170105152024");
}
.Sevarog_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/1/16/Sevarog_Banner.png/revision/latest?cb=20160730021948");
}
.Shinbi_Background {
    background-image: url("http://vignette2.wikia.nocookie.net/paragonthegame/images/2/28/Shinbi_Banner.png/revision/latest?cb=20170220193957");
}
.Sparrow_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/8/81/Sparrow_Banner.png/revision/latest?cb=20161009012742");
}
.The_Fey_Background {
    background-image: url("http://vignette3.wikia.nocookie.net/paragonthegame/images/5/5b/Fey_Stub_Banner.png/revision/latest?cb=20160728212950");
}
.TwinBlast_Background {
    background-image: url("http://vignette4.wikia.nocookie.net/paragonthegame/images/2/2d/TwinBlast_Banner.png/revision/latest?cb=20160728232439");
}
.Yin_Background {
    background-image: url("http://vignette4.wikia.nocookie.net/paragonthegame/images/c/c3/Yin_Banner.png/revision/latest?cb=20170403185221");
}



/*Tooltip Backgrounds*/
.Hero_Tooltip {
    width: 495px;
    height: 450px;
}
.alertquote {
    padding:1px 15px 1px 15px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.35);
    color: white; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.6), 
    0px 8px 13px rgba(0,0,0,0.1), 
    0px 18px 23px rgba(0,0,0,0.1);
    text-align: center;
    position: absolute;
    top: 0;
    left: -15px;
    width: 300px;
    margin: auto;
    font-size: 90%;
}
.alertbody {
    margin-top: 11px;
    padding-bottom: 15px;
    background-color: rgba(0,0,0,0.35); 
    color: white;
    font-size: 85%;
    position: absolute;
    top: 61px;
}
.heronavbox {
    margin: auto;
    margin-bottom: 20px;
    overflow: hidden;
    background: black;
    background: rgba(0,0,0,.5);
    box-shadow: 0 0 15px #222;
    border-radius: 15px;
    text-align: center;
}

.heroheader {
    height: 100px;
    width: 500px;
    padding: 5px;
    border-radius: 25px 0px 0px 25px;
    background-image: url(http://vignette1.wikia.nocookie.net/paragonthegame/images/2/22/Headerback.png/revision/latest?cb=20160725195429);
    text-transform: uppercase;
    vertical-align: auto;
    letter-spacing: 5px;
    text-decoration: none;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                 0px 8px 13px rgba(0,0,0,0.1),
                 0px 18px 23px rgba(0,0,0,0.1);
    font-size: 250%;
}

.heroicon img {
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 6px #222;
}

.heroicon img:hover {
    box-shadow: 0 0 4px #aac, 0 0 6px #222;
}

.header {
    margin: auto;
    margin-bottom: 20px;
    height: 10%;
    width: 55%;
    overflow: hidden;
}
.heroquote {
    height: 10%;
    width: 30%;
    background: black;
    background: rgba(0,0,0,.5);
    box-shadow: 0 0 15px #222;
    border-radius: 1px;
    text-align: center;
}
.page-Paragon_Wiki #header {
    margin: 0px auto 10px auto;
    height: 10%;
    width: 65%;
    overflow: hidden;
    background: #00000;
    background: rgba(107,88,34,.5);
    box-shadow: 0 0 4px #222;
    border-radius: 6px;
    text-align: center;
}

.heropenta li {
  min-width: 66px;
  width: 80px;
  font-size:14px;
  list-style: none;
  display: inline-block;
  text-align: center;
}

/* Navigation. */
.navigation {
  width: 85%;
  margin: 0px auto 10px auto;
  padding: .2em 0em .2em 0em;
  text-align: center;
}
.navigation li {
  min-width: 66px;
  width: 66px;
  margin: 1px;
  font-size:13px;
  list-style: none;
  display: inline-block;
}
.navigation img {
  border-radius: 15px;
  box-shadow: 0 0 6px #222;
}
.navigation img:hover {
  box-shadow: 0 0 4px #aac, 0 0 6px #222;
}

.moba-footer > div {
    border: 0 !important;
    border-image: url(/wiki/Special:Filepath?file=border-mainbox.png) fill 48 60 repeat !important;
    border-width: 48px 60px !important;
    border-style: solid !important;
    box-shadow: 0 0 !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
}
.moba-footer > div > div {
    text-align: center !important;
}
.moba-footer > div > div > div {
    text-decoration: none !important;
}
.moba-footer > div > div > div > b {
    color: #aecad4;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.moba-footer > div > div > div > b:after {
    display: block;
    content: '';
    border: 0;
    background-image: url(/wiki/Special:Filepath?file=hr-mainbox.png);
    background-position: center;
    height: 22px;
    margin: 10px 0;
}

.textitem {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 60px;
}
.textitem img {
    width: 60px;
    height: 60px;
    background-color: none;
}
.itemcaption {
    font-family: 'Open Sans';
    font-size: .55em;
    font-weight: bold;
    display: block;
}

.textbubble {
    display: inline-block;
    text-align: center;
    width: 80px;
    height: 80px;
}
.bubblecaption {
    font-family: 'Open Sans';
    font-size: .8em;
    font-weight: bold;
    display: block;
}

/*Admin Colors in username*/
a[href$="/wiki/User:Jtanooki"] {
    color: #33cc33 !important;
    font-weight: bold !important;
    font-family: 'Open Sans' !important;
}
a[href$="/wiki/User:Tollsunited7"] {
    color: #33cc33 !important;
    font-weight: bold !important;
    font-family: 'Open Sans' !important;
}
.inner-circle {
   background: #aecad4; /* Old browsers */
background: -moz-linear-gradient(top, #aecad4 0%, #5c676b 70%, #5c676b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #aecad4 0%,#5c676b 70%,#5c676b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #aecad4 0%,#5c676b 70%,#5c676b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   border-radius: 50%;
   height: 85px;
   width: 85px;
   margin: 5px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }

.inner-circle img {
     border-radius: 50%;
     height: 80px;
     width: 80px;
     margin: 6px 0px 0px 0px;
     transition: all 0.3s ease 0s;
 }

.Newhero {
    height: 300px;
     width: 300px;
    background: #aecad4; /* Old browsers */
background: -moz-linear-gradient(top, #aecad4 0%, #5c676b 70%, #5c676b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #aecad4 0%,#5c676b 70%,#5c676b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #aecad4 0%,#5c676b 70%,#5c676b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   border-radius: 50%;
}
.Newhero img {
     border-radius: 50%;
     height: 300px;
     width: 300px;
     margin: 6px 0px 0px 0px;
     transition: all 0.3s ease 0s;
 }

.skintable img{
    display:inline-block; 
    vertical-align:middle
}

.ability {
    width: 100%;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: 0,0;
    background-image: url(/wiki/Special:Filepath?file=Ability_background.jpg);
    background-size: 100%;
    background-attachment: local;
    padding: 5px;
    margin-bottom: 5px;
}
.ability .icon {
    width: 70px;
    border-right: 1px solid #dbbd63;
    vertical-align: top;
    padding-right: 5px;
}
.ability .icon > a img {
    top: -4px;
    left: -4px;
}
.ability .name {
    border-bottom: 1px solid #dbbd63;
    text-transform: uppercase;
    padding: 0 0 5px 5px;
}
.ability .name:after {
    float: right;
    background: #dbbd63;
    font-weight: bold;
    font-size: 14px;
    text-indent: 10px;
    color: #1e1e1e;
    margin: -5px -5px 0 0;
    padding: 3px 15px;
}

.ability.hotkey-LMB .name:after {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-image: url(/wiki/Special:Filepath?file=PS4_R2_Ico_128x.png);
    content: 'LMB';
}
.ability.hotkey-RMB .name:after {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-image: url(/wiki/Special:Filepath?file=PS4_R1_Ico_128x.png);
    content: 'RMB';
}
.ability.hotkey-Q .name:after {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-image: url(/wiki/Special:Filepath?file=PS4_Square_Ico_128x.png);
    content: 'Q';
}

.ability.hotkey-E .name:after {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-image: url(/wiki/Special:Filepath?file=PS4_Circle_Ico_128x.png);
    content: 'Q';
    content: 'E';
}
.ability.hotkey-R .name:after {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-image: url(/wiki/Special:Filepath?file=Ps4_triangle.png);
    content: 'Q';
    content: 'R';
}

.ability .description {
    border-bottom: 1px solid #dbbd63;
    font-size: 13px;
    line-height: 1.3;
    padding: 5px;
}
.ability .description .selflink {
    font-weight: normal;
}
.ability .meta-left, .ability .meta-right {
    width: 50%;
    vertical-align: top;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.3;
    padding: 5px;
}
.ability b {
    color: #dbbd63;
}

/*New Card Infobox*/
.card_container {
  background-color: #1e1e1e;
  width: 280px;
  text-align: center;
  
  margin-left: 9px;
  position: relative;
  z-index: -3;
}


.card_header {
  width: 280px;
  background-color: rgb(81,101,154);
  margin: 0;
  
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2em;
  color: white;
  line-height: 50px;
  margin-left: 9px;
}

/*New Card Template*/

.cardcontainer {
  position: relative;
  background: none;
  width: 190px;
  height: 300px;
  display: inline-block;
  margin: 25px 10px;
  
  cursor: pointer;
}

.cardlevel {
    color: #000;
    position: absolute;
    
    font-weight: 600;
    top: 15px;
    left: 148px;
    
    font-size: 0.88em;
}
.card_image {
  position: absolute;
  
  top: -200;
  left: -30;

  display: inline-block;
  padding: 0;
  margin: 0;
  width: 190px;
  height: 300px;
  z-index: -151;
}

/*Bronze Cards*/
.common1card, .Common1card {
  position: absolute;

  margin-top: -7px;
  margin-left: -7px;
  height: 314px;
  width: 204px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_bordercommon.png);
  
  
  z-index: 4;
}

.uncommon1card, .Uncommon1card{
  position: absolute;

  margin-top: -12px;
  margin-left: -8px;
  height: 326px;
  width: 205px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderuncommon.png);
  
  
  z-index: 4;
}

.rare1card, .Rare1card {
  position: absolute;

  margin-top: -8px;
  margin-left: -10px;
  height: 316px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderrare.png);
  
  
  z-index: 4;
}
.epic1card, .Epic1card {
  position: absolute;

  margin-top: -25px;
  margin-left: -10px;
  height: 350px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderepic.png);
  
  
  z-index: 4;
}

/*Silver Cards*/
.common2card, .Common2card, .Common3card, .Common4card {
  position: absolute;

  margin-top: -7px;
  margin-left: -7px;
  height: 314px;
  width: 204px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_bordercommonsilver.png);
  
  
  z-index: 4;
}

.uncommon2card, .Uncommon2card, .Uncommon3card, .Uncommon4card{
  position: absolute;

  margin-top: -12px;
  margin-left: -8px;
  height: 326px;
  width: 205px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderuncommonsilver.png);
  
  
  z-index: 4;
}

.rare2card, .Rare2card, .Rare3card, .Rare4card {
  position: absolute;

  margin-top: -8px;
  margin-left: -10px;
  height: 316px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderraresilver.png);
  
  
  z-index: 4;
}
.epic2card, .Epic2card, .Epic3card, .Epic4card {
  position: absolute;

  margin-top: -25px;
  margin-left: -10px;
  height: 350px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderepicsilver.png);
  
  
  z-index: 4;
}

/*Gold Cards*/

.common5card, .Common5card, .Common6card, .Common7card, .Common8card, .Common9card {
  position: absolute;

  margin-top: -7px;
  margin-left: -7px;
  height: 314px;
  width: 204px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_bordercommongold.png);
  
  
  z-index: 4;
}

.uncommon5card, .Uncommon5card, .Uncommon6card, .Uncommon7card, .Uncommon8card, .Uncommon9card {
  position: absolute;

  margin-top: -12px;
  margin-left: -8px;
  height: 326px;
  width: 205px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderuncommongold.png);
  
  
  z-index: 4;
}

.rare5card, .Rare5card, .Rare6card, .Rare7card, .Rare8card, .Rare9card {
  position: absolute;

  margin-top: -8px;
  margin-left: -10px;
  height: 316px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderraregold.png);
  
  
  z-index: 4;
}
.epic5card, .Epic5card, .Epic6card, .Epic7card, .Epic8card, .Epic9card {
  position: absolute;

  margin-top: -25px;
  margin-left: -10px;
  height: 350px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderepicgold.png);
  
  
  z-index: 4;
}

/*Foil Cards*/

.common10card, .Common10card {
  position: absolute;

  margin-top: -7px;
  margin-left: -7px;
  height: 314px;
  width: 204px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_bordercommonfoil.png);
  
  
  z-index: 4;
}

.uncommon10card, .Uncommon10card{
  position: absolute;

  margin-top: -12px;
  margin-left: -8px;
  height: 326px;
  width: 205px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderuncommonfoil.png);
  
  
  z-index: 4;
}

.rare10card, .Rare10card {
  position: absolute;

  margin-top: -8px;
  margin-left: -10px;
  height: 316px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderrarefoil.png);
  
  
  z-index: 4;
}
.epic10card, .Epic10card {
  position: absolute;

  margin-top: -25px;
  margin-left: -10px;
  height: 350px;
  width: 207px;

  /*background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);*/
  background-image: url(wiki/Special:Filepath?file=Card_borderepicfoil.png);
  
  
  z-index: 4;
}
.affinitytab {
  float: left;
  width: 22px;
  height: 100%;
  z-index: 2;
}

.cardinfotop {
  position: absolute;
  left: 22px;
  width: 208px;
  height: 40%;

  color: white;
}

.cardimg img {
  top: 0;
  left: 0;
  width: 190px;
  height: 300px;
  position: absolute;
  z-index: -1;
}
.cardshadow {
  top: 0;
  left: 0;

  width: 190px;
  height: 300px;

  background-image: url(wiki/Special:Filepath?file=Card_Shadow.png);
  
  position: absolute;
  z-index: 1;
}
.cardinfotop div {
  font-weight: 700;
  z-index: 4;
  text-transform: uppercase;
  font-size: 0.8em;
  text-shadow: 0px 1px 4px #000000;
  padding: 10px;
}
.cardinfobot {
  position: absolute;
  top: 60%;
  left: 22px;
  width: 208px;
  height: 40%;
  
  text-shadow: 0px 1px 4px #000000;
  z-index: 4;
  color: white;
  display: flex;
}

.cardinfobot div {
    text-shadow: 0px 1px 4px #000000;
    font-size: 0.75em;
    font-weight: 700;
  text-transform: uppercase;
  padding: 10px;
  flex: 1;
  flex-basis: 100%;
  align-self: flex-end;
}
.affinitytab span {
  color: #ffffff;
  position: absolute;
  top: 30px;
  left: 24px;
  transform: rotate(90deg);
  transform-origin: left top -10px;
  text-transform: uppercase;

  width: 100%;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 1.5px;
  
  text-align: left;
  z-index: 2;
}

.growth, .Growth {
  background-image: url(wiki/Special:Filepath?file=icon_growthcard.png);
  background-size: 15px;
  background-position: 4px 6px;
  background-repeat: no-repeat;
  background-color: rgba(104,133,83,0.7 );
}

.growthbox, .Growthbox {
  background-image: url(wiki/Special:Filepath?file=icon_growthcardbox.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-color: rgba(104,133,83,0.9 );
  
}

.death, .Death {
  background-image: url(wiki/Special:Filepath?file=icon_deathcard.png);
  background-size: 17px;
  background-position: 3px 6px;
  background-repeat: no-repeat;
  background-color: rgba(74,70,90,0.7 );
}

.deathbox, .Deathbox {
  background-image: url(wiki/Special:Filepath?file=icon_deathcardbox.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-color: rgba(74,70,90,0.9 );
}

.knowledge, .Knowledge {
  background-image: url(wiki/Special:Filepath?file=icon_knowledgecard.png);
  background-size: 17px;
  background-position: 3px 6px;
  background-repeat: no-repeat;
  background-color: rgba(65,93,130,0.7 );
}

.knowledgebox, .Knowledgebox {
  background-image: url(wiki/Special:Filepath?file=icon_knowledgecardbox.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-color: rgba(65,93,130,0.9 );
}

.chaos, .Chaos {
  background-image: url(wiki/Special:Filepath?file=icon_chaoscard.png);
  background-size: 15px;
  background-position: 4px 6px;
  background-repeat: no-repeat;
  background-color: rgba(142,74,72,0.7 );
}

.chaosbox, .Chaosbox {
  background-image: url(wiki/Special:Filepath?file=icon_chaoscardbox.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-color: rgba(142,74,72,0.9 );
}

.order, .Order {
  background-image: url(wiki/Special:Filepath?file=icon_ordercard.png);
  background-size: 15px;
  background-position: 4px 6px;
  background-repeat: no-repeat;
  background-color: rgba(164,158,122,0.7 );
}

.orderbox, .Orderbox {
  background-image: url(wiki/Special:Filepath?file=icon_ordercardbox.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-color: rgba(164,158,122,0.9 )
}

.statinfobox {
    display: inline-block;
}

.statcard {
    display: none;
}

/*Hero Infobox V42*/

.heroinfobody {
  position: relative;
  width: 750px;
  height: 450px;
  color: white;
  text-transform: uppercase;
  background: -webkit-radial-gradient(right top, circle, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0.9), rgba(0,0,0,1));
  
  margin-bottom: 25px;
  
  margin: 10px auto;
}

.herohoverbody {
  position: relative;
  width: 580px;
  height: 300px;
  color: white;
  text-transform: uppercase;
  background-size: 850px;
  /*background-repeat: no-repeat;*/
  background-position: 140px -40px;
}

.heroinfoimg {
  position: absolute;
   width: 750px;
  height: 450px;
  background-size: 975px;
  /*background-repeat: no-repeat;*/
  background-position: 140px -40px;
  z-index: -1;
}

.herohoverimg {
  position: absolute;
  width: 580px;
  height: 300px;
  background: -webkit-radial-gradient(right top, circle, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0.9), rgba(0,0,0,1));
  
  z-index: 0;
}

.heroinfoname {
  position: absolute;

  top: 20px;
  left: 30px;
  font-size: 2.4em;
  font-weight: bold;
  letter-spacing: 3px;

}

.heroinfocodename {
    position: absolute;
    top: 50px;
    left: 30px;
    
    font-size: 0.7em;
    color: rgba(255,255,255,0.5);
}
.heroinfoattr {
  position: absolute;

  font-size: 0.70em;

  top: 70px;
  left:30px;

  letter-spacing: 0.5px;
}

.heroinfoattr2 {
  position: absolute;

  font-size: 0.70em;

  top: 86px;
  left:30px;

  letter-spacing: 0.5px;
}

.herotitle {
    color: rgb(81,101,154);
}
.heroinfoattr span {
  font-weight: bold;
  
}
.heroinforelease {
  position: absolute;

  font-size: 0.7em;


  top: 110px;
  left: 30px;
  letter-spacing: 0.5px;

}

.heroinforelease2 {
  position: absolute;

  font-size: 0.7em;


  top: 126px;
  left: 30px;
  letter-spacing: 0.5px;

}

.heroinforelease span {
  font-weight: bold;
  line-height: 2px;
  color: rgb(81,101,154);
}

.heroinfodif {
  position: absolute;

  font-size: 0.7em;

  top: 150px;
  left: 30px;
  letter-spacing: 0.5px;
}


.heroinfodif2 {
  position: absolute;

  font-size: 0.7em;

  top: 166px;
  left: 30px;
  letter-spacing: 0.5px;
}

.heroinfodif span {
  font-weight: bold;
  color: #badaef;
}

.heroinfostattop {
  position: absolute;
  font-size: 0.7em;
  letter-spacing: 0.5px;

  top: 280px;
  left: 30px;
  font-weight: bold;
}
.heroinfostatleft {
  position: absolute;
  font-size: 0.7em;
  letter-spacing: 0.5px;

  line-height: 28px;
  top: 300px;
  left: 30px;

  font-weight: bold;
  color: rgb(81,101,154);
}

.heroinfonum {
  position: absolute;
  top: 190px;
  left: 30px;
}

.herohovernum {
  position: absolute;
  top: 200px;
  left: 30px;
}
.heroinfostatleftnum {
  position: absolute;
  font-size: 0.7em;

  line-height: 28px;
  top: 300px;
  left: 170px;


}
.heroinfostatright {
  position: absolute;
  font-size: 0.7em;
  letter-spacing: 0.5px;

  line-height: 28px;
  top: 300px;
  left: 260px;

  font-weight: bold;
  color: rgb(81,101,154);
}

.heroinfostatrightnum {
  position: absolute;
  font-size: 0.7em;

  line-height: 28px;
  top: 300px;
  left: 410px;
}

.gemtier {
    position: relative;
}

.gemoverlay {
    position: absolute;
    top: 0;
    left: 0;
}

.gemcenter {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gemcenter img {
    margin-left: 66% !important;
}
Community content is available under CC-BY-SA unless otherwise noted.
Advertisement