MediaWiki:Common.css

/* Kogath and SandovalCurse's Upgrade Path CSS Bonanza */
.celltitle {
    background: #3A5766;
    color: #ffffff;
}

.cellname {
    text-weight: bold;
    padding-left: 5px;
}

table.hover tr {
	background-color: transparent;
}
table.hover tr:hover {
	background-color: #282828;
}
table.hover2 tr:hover {
	background-color: #282828;
}
table.hover3 tr {
	background-color: #282828;
}
table.hover3 tr:hover {
	background-color: #282828;
}

/* Alternate Colouring for Tables */
table.sortable {
    border: 1px solid #7E1F00;
}

.sortable th,
.unsortable th {
    color: #ffffff;
}

.sortable tr:nth-child(2n+1),
.pyjama tr:nth-child(2n+1) {
    background: none repeat scroll 0 0 #1C1E20;
}

.sortable tr:nth-child(2n),
.pyjama tr:nth-child(2n) {
    background: none repeat scroll 0 0 #000000;
}

/* Tabber Styles */
/* This will style the div that contains the whole tabber object. Generally this can be left alone. */
body .tabberlive {
}

/* This will style each tab's content area. */
body .tabberlive .tabbertab {
border-left: 1px solid #7E1F00;
border-bottom: 1px solid #7E1F00;
border-right: 1px solid #7E1F00;
}

/* This is the box that surrounds all the tabs. */
body ul.tabbernav {
border-bottom: 1px solid #7E1F00;
padding: 0px 5px 0px 5px;
margin-top= -2px;
}

.tabberlive .tabbertab,
.tabber .tabbertab {
    border: 1px solid #7E1F00;
}

/* This is a box that surrounds each of the tabs. */
body ul.tabbernav li {

}

/* This is the style for the tabs, parts of this can be overridden for the current tab with the next selector */
body ul.tabbernav li a,
body ul.tabbernav li a:link,
body ul.tabbernav li a:visited,
body ul.tabbernav li a:hover {
background: #000;
color: #fff;
text-shadow: 1px 1px 0 #000000;
border: 1px solid #7E1F00;
}

/* This is the style for the currently selected tab */
body ul.tabbernav li.tabberactive a,
body ul.tabbernav li.tabberactive a:link,
body ul.tabbernav li.tabberactive a:visited,
body ul.tabbernav li.tabberactive a:hover {
background: #7E1F00;
color: #fff;
text-shadow: 1px 1px 0 #000000;
border: 1px solid #7E1F00;
}


















.heading2 {
    background: url('https://hydra-media.cursecdn.com/titanfall.gamepedia.com/f/fd/Mainpagetag.PNG') no-repeat;
    border: none;
    color: #FFFFFF; /*rausnehmen, wenn zentral auf Weiß! */
    margin-bottom: 5px;
    padding: 4px;
    text-shadow: 1px 1px 0 #000000;
}

.heading {
 background-color:#7E1F00;
 color:#ffffff;
 margin-top:2px;
 margin-left:2px;
 margin-right:15px;
 margin-bottom:2px;
} 

table.backgroundz { background: url("http://hydra-media.cursecdn.com/titanfall.gamepedia.com/3/30/Tiledimage.png") repeat; }

 .tooltip{display:inline;position:relative}
 .tooltip:hover{text-decoration:none}
 .tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.75);
   border-radius:5px;
   bottom:26px;
   color:#fff;
   content:attr(title);
   display:block;
   left:5%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:20px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;z-index:0;overflow:hidden;position:relative;}

.item:hover{overflow:visible;z-index:100;}
.item:hover .inner{z-index: 100;}
.inner{position: absolute;
background: white;
width: 100%;
}

/* Infoboxes */

.weapon {
    background: transparent url(http://hydra-media.cursecdn.com/weaponheroes.gamepedia.com/c/c9/Title-bgsm.png) repeat-x;
}

.weapon1 {
    background: transparent url("http://hydra-media.cursecdn.com/weaponheroes.gamepedia.com/2/24/TextBox.png") repeat-x;
}

/* Gradients */

.weapon2 {
    background:#1271a2;
    background:-moz-linear-gradient(top,  #0d83be, #1271a2 30%, #0d83be 80%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop (0% #0d83be), color-stop(30%,#1271a2), color-stop(80%,#0d83be ));
    background:-webkit-linear-gradient(top, #0d83be 0%, #1271a2 30%, #0d83be 80%);
    background:-o-linear-gradient(top, #0d83be 0%, #1271a2 30%, #0d83be  80%);
    background:-ms-linear-gradient(top, #0d83be 0%, #1271a2 30%, #0d83be  80%);
    background:linear-gradient(to bottom, #0d83be 0%, #1271a2 30%, #0d83be  80%);
    border: 1px solid #00aaff;
    font-family: verdana,tahoma,arial,sans-serif;
}

.weaponinfobox {
   color: #FFFFFF;
   width: 300px
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 5px;
   float: right;
}
.weaponinfobox td,
.weaponinfobox th {
   vertical-align: top;
}
.weaponinfobox caption {
   font-size: larger;
   margin-left: inherit;
}
.weaponinfobox.bordered {
   border-collapse: collapse;
}
.weaponinfobox.bordered td,
.weaponinfobox.bordered th {
   border: 1px solid #555555;
}
.weaponinfobox.bordered .borderless td,
.weaponinfobox.bordered .borderless th {
   border: 0;
}


/* CSS placed here will be applied to all skins */
.mainex {
    height: 81px;
    width: 200px;
    border: 1px solid white;
    overflow: hidden;
}

.mainex .activator {
    height: 200px;
    width: 200px;
    float: left;
    display: block;
}
.img {
    text-align: center;
    margin: 15px;
    height: 49px;
    width: 197px;
    float: left;
}


.expandcontent {
    display: none;
    margin: 15px;
}
.activator:hover {
    width: 900px;
}
.activator:hover .expandcontent {
    display: block;
}
.activator:hover .img {
    float: left;
}

body.page-Titanfall_Wiki h1.firstHeading { display:none; }

body.page-Titanfall_2_Wiki h1.firstHeading { display:none; }

.ctbox {
  border: 1px solid #000000;
  background: url("http://hydra-media.cursecdn.com/titanfall.gamepedia.com/6/66/Metal-texture-black.jpg") repeat center top padding-box;
  box-shadow: #000000;
  color: #ffffff;
  margin: 0 0 10px 0;
  padding: 29px;
  vertical-align: top;
}

table.ctrow {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px;
  margin: -10px 0 0 0;
  padding: 0px;
  width: 33%;
}










/* this CSS governs the responsive 2 column main page layout */

.fpcontent {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpmaybecols {
    overflow: hidden;
    margin: -5px 0 -5px 0;
}

.fpmaybecols + .fpmaybecols {
    margin: 0 0 -5px 0;
}

.fpbox {
    background: rgba(0,0,0,.75);
    color: #e0e0e0; /* change for hydra (light) wikis */
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.fpplainbox {
    padding: 5px 8px 10px 8px;
    margin: 0 5px 10px 5px;
    vertical-align: top;
}

.fpbox .welcome {
    border-bottom: 2px solid #7E1F00;
    color: #e0e0e0; /* change for hydra (light) wikis */
    font-size: 150%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    text-transform: uppercase;
}

.fpbox .heading {
    border-bottom: 1px solid #505050;
    color: #e0e0e0; /* change for hydra (light) wikis */
    font-size: 132%;
    font-variant: small-caps;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpbox .heading .smalllink {
    color: #e0e0e0; /* change for hydra (light) wikis */
    font-size: 75%;
    font-weight: bold;
}

.fpbox hr {
    border: none;
    border-bottom: 2px solid #7E1F00;
}

div#content hr {
    background-color: #7E1F00;
    color: #7E1F00;
}

.fplinks {
    margin: -5px;
}

.fplinks .linkslabel {
    background: rgba(0,0,0,.75);
    border-bottom: 2px solid #7E1F00;
    font-weight: bold;
    margin: 15px 5px 5px 5px;
    padding: 0 0 5px 0;
}

.fplink {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
    border-collapse: separate;
    border-spacing: 5px;
    display: table;
    width: 100%;
}

.fplink .box .row {
    display: table-row;
}

.fplink .box .row .cell {
    background: rgba(0,0,0,.75);
    color: #e0e0e0; /* change for hydra (light) wikis */
    display: table-cell;
    font-weight: bold;
    position: relative;
    vertical-align: middle;
}

.fplink.wide .box .row .cell {
    padding: 0 5px;
}

#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image 
    height: 114px;{
    width: 114px;
}

.fplink.image .box .row .cell {
    height: 100px;
    width: 100px;
    vertical-align: bottom;
}

.fplink.image .box .row .cell .image img {
    height: 100px;
    width: 100px;
}

@media (min-width: 470px) {
  .fplink {
    width: 50%;
  }

  .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 580px) {
  .fplink {
    width: 33.333%;
  }

  .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 690px) {
  .fplink {
    width: 25%;
  }

  .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .fplink {
    width: 20%;
  }

  .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 910px) {
  .fplink {
    width: 16.666%;
  }

  .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 990px) {
  .fpcontent { 
    padding-right: 520px; 
    width: auto; 
  }

  #fptopsection { 
    float: left; 
    width: 100%; 
  }

  #fpflexsection { 
    float: right;
    width: 520px;
    margin-right: -520px 
  }

  #fpbottomsection { 
    float: left; 
    width: 100%; 
    margin-top: -5px; 
  }

  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 50%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 100%;
  }

  #fpflexsection .fplink {
    width: 25%;
  }

  #fpflexsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1100px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 33.333%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1210px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 25%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1320px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 20%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 1430px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 16.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 33.333%;
  }

  .fplink a {
    padding: 3px 5px;
  }
}

@media (min-width: 1540px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 14.285%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 28.571%;
  }

  #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
    background-image: none;
  }

  .fpmaybelcol {
    float: left;
    width: 70.886%;
  }

  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }

  .fpmaybercol {
    float: right;
    width: 29.113%;
  }

  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 50%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 1650px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 12.5%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 1697px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 16.666%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 1760px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 11.111%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 1850px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 14.285%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 28.571%;
  }
}

@media (min-width: 1870px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 10%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 20%;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 134px;
    height: 134px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 120px;
    height: 120px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1918px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 33.333%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1980px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 9.09%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 18.181%;
  }
}

@media (min-width: 2006px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 12.5%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 2090px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 8.33%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 16.666%;
  }
}

@media (min-width: 2161px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 11.111%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 2200px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.692%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 15.384%;
  }
}

@media (min-width: 2296px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 25%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 2310px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.142%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 14.285%;
  }
}

@media (min-width: 2316px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 10%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 20%;
  }
}

@media (min-width: 2420px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 6.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 13.333%;
  }

  .fplink a {
    padding: 5px 5px;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 164px;
    height: 164px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 150px;
    height: 150px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 150px;
    height: 150px;
  }
}

.fplink.image .image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 75%;
  z-index: 1;
}

.fplink.image a {
  z-index: 2;
}

.fplink a {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px 5px;
}

.fplink.image .image a {
  padding: 0;
}

.fplink.image .link a {
  background: rgba(0,0,0,.75);
  border-top: 2px solid #505050;
}

.fplink.wide a {
  margin: 0 -5px;
}

.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.fpvideo {
  display: inline-block;
  margin: 0 5px;
}



/* Infoboxes */

.infoboxtable {
    float: right;
    background:rgba(0,0,0,.75);
    border: 1px solid #E0E0E0 ;
    border-radius:5px;
    width: 350px;
}

.infoboxname {
    background:#7E1F00 ;
    color: #E0E0E0 ;
    font-size: 115%;
    border: 1px solid #7E1F00 ;
    border-radius:5px;
}

.infoboxlabel {
    width: 50%;
    background:#7E1F00 ;
    color: #E0E0E0 ;
    border: 1px solid #7E1F00 ;
    border-radius:5px;
    padding: 0.5px 7px;
    text-align: right;

}


.infoboxdetails {
    padding-right: 5px;
}