Tremor Mod Wiki
Don't have an account?
Register
Advertisement
Register
Tremor Mod Wiki
Tremor Mod Wiki
969
pages

Hydra.css

MediaWiki page
Revision as of 03:39, 12 January 2019 by ReedemtheD3ad! (talk | contribs) (itemlist css)
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 affect users of the Hydra skin */
/* For elements which only display in the mobile view */
.mobileonly {
    display: none;
}

/* Hide first header on main page */
body.page-Tremor_Mod_Wiki h1.firstHeading {
    display:none;
}

/* Logo */
#p-logo,
#p-logo a {
    height: 85px;
    width: 250px;
}

/* MsUpload color fixes */
#upload-list .file {
	background-color: #353535;
	border-top: #333;
	border-bottom: #444;
}

#upload-list .file .file-title,
#upload-list .file .file-size,
#upload-list .file .file-warning {
	color: #E0E0E0;
}

#upload-list .file a {
    color: #add8e6;
}

#upload-list .file .small-warn {
    background: #A31517;
}

/* Framework */
body {
	background: #6cb8b1; /* Old browsers */
	background: -moz-linear-gradient(top, #4d847e 1%, #6cb8b1 46%, #262a33 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, 4d847e 1%,#6cb8b1 46%,#262a33 100%); /* Chrome10-25,Safari5.1-6 */
	background: fixed linear-gradient(to bottom, #4d847e 1%,#6cb8b1 46%,#262a33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#697f72', endColorstr='#262a33',GradientType=0 ); /* IE6-9 */
}

#pageWrapper {
    margin-right: 10px;
}

#mw-page-base {
    background: transparent !important;   
}

#mw-head-base {
    background: transparent !important; 
    border: 0px solid black;
    bottom: 0;
    height: 40px;
}

/* Adds bulletpoints styled after links to all lists on the wiki, replaces the default, gauche blue of the Mediawiki, that's so drab and ugly, mon Dieu! */

ul {
list-style-type: disc;
list-style-image: url(//ark.gamepedia.com/media/7/75/Bulletpoint.png);
list-style-image: url(//ark.gamepedia.com/media/7/75/Bulletpoint.png) !ie;
}

/**************************
/* Article navigation bar *
/**************************/
#right-navigation {
    margin-right: 1em;
    margin-top: 4.5em;
}

#left-navigation {
    left: 11em;
    margin-top: 4.5em;
}

div.vectorMenu h3 a {
  background-image: none;
}

div.vectorTabs {
    background-image: none;
}

div.vectorTabs span {
    background-image: none;
}

div.vectorTabs ul {
    background-image: none;
}

div.vectorTabs ul li {
    background-color: transparent;
    background-image: none;
    color: #000000;
}

div.vectorTabs ul li.selected {
    background-color: transparent;
    background-image: none;
    color: #ffffff;
}

div.vectorTabs ul li span {
    background-image: none;
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
}

div.vectorTabs ul li.selected span {
    background-image: none;
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
}

div.vectorTabs li span a {
    background-image: none;
    color: #ffffff;
}

div.vectorTabs span a:visited {
    color: #ffffff;
}

div.vectorTabs li span a:hover, div.vectorTabs span a:visited:hover {
    color: #ffffff;
}

div.vectorTabs li.selected span a {
    background-color: transparent;
    color: #ffffff !important;
}

div.vectorTabs li.new span a:visited {
    color: #ffffff;
}

div.vectorTabs li.new span a:hover, div.vectorTabs li.new span a:visited:hover {
    color: #ffffff;
}

div.vectorMenu h5 a {
    background-image: none;
}

div.vectorMenu:hover, div.menu, div.vectorMenu div.menuForceShow {
    display: block;
}

div#p-cactions div.menu ul {
    border: 1px solid #000000;
}

div#p-cactions div.menu ul li a {
    background: #ffffff;
    color: #000000;
}

div#p-cactions div.menu ul li a:visited {
    color: #666;
}

div#p-cactions div.menu ul li a:hover, div#p-cactions div.menu ul li a:visited:hover {
    display: block;
}

div#mw-head div.vectorMenu h4 {
    color: #FFFFFF;
    font-weight: bold;
}

div.vectorMenu ul {
    background: #000000;
    border: 1px solid #ffffff;
}


/* Sidebar */
div#mw-panel div.portal, 
div#mw-panel div.portal div.body {
    background-image: none;
}

div#mw-panel div.portal h3,
#mw-panel.collapsible-nav .portal h3 a,
#mw-panel.collapsible-nav .portal h3 a:visited,
#mw-panel.collapsible-nav div.portal h3 a,
#mw-panel.collapsible-nav div.portal h3 a:visited,
#mw-panel.collapsible-nav .portal.collapsed h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color: #ffffff;
    font-weight: bold;
}

#mw-panel.collapsible-nav .portal.collapsed h3 {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAABcRAAAXEQHKJvM/AAAAB3RJTUUH3wQBEikUI775dwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAT0lEQVQ4y9WTUQrAIAxDE9H7H3jC2wnqxKqw/OeRpq0BZVSU1FEAOxKwYwRs11QHwBNBpkuMIPfWaLsBfQkQmSWpzvhH5/6VwJkO/I9negFpGhkjDUKRdAAAAABJRU5ErkJggg==");
    background-position: left;
    background-repeat: no-repeat;
}

#mw-panel.collapsible-nav .portal h3 {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAABcRAAAXEQHKJvM/AAAAB3RJTUUH3wQBEiskN1GrWQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAT0lEQVQ4y+2TOwrAMAxD9Upy/wsH1KlQQlRcskabjSX/sa0dXNrEEZDaZFdXQqqAP+TUAlVynAHQK74oYHu8CUC3PZbJvk4ZaI9gjDm/oBt1WxYtuhHX/wAAAABJRU5ErkJggg==");
    background-position: left;
    background-repeat: no-repeat;
}
 
div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:link,
div#mw-panel div.portal div.body ul li a:visited, 
div#mw-panel div.portal div.body ul li a:hover {
    color: #ffffff;
}

/* social media add-on fix */
div#mw-panel div#p-socialProfiles.portal .body {
    margin: auto;
}

.socialSidebar {
    width: auto;
    max-width: 100%;
}

/* Sliver Fix */

div#mw-head div.vectorMenu h3 {
    background-image: none;
}

div.vectorMenu h3 span {
    padding-top: 1.3em;
    color: #ffffff;
    cursor: pointer;
}

/* Content */
div#content {
    background: rgba(255, 255, 255, 0.8);
    color: #111111;
    border: 1px solid #1a1a1a;
    box-shadow: rgba(26, 26, 26, 1) 0 0.1em 0.75em;
    margin-top: 70px;
}

h1, h2, h3, h4, h5, h6 {
    color: #303030;
}

h1, h2 {
    border-bottom: 1px solid #303030;
}

h3, h4, h5, h6 {
    border-bottom: 0px solid #dddad3;
}

.catlinks {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #000000;
}

.mw-warning {
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
}

#toc, .toc, .mw-warning {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #000000;
    font-size: 95%;
    padding: 5px;
}

/***************
/* Link styles *
/***************/
a {
    color: #397d75;
}

div#content a:visited, a:visited {
    color: #397d75;
}

a:hover, div#content a:visited:hover, a:visited:hover {
    color: #397d75;
}

div#content a.extiw, div#content a.external {
    color: #397d75;
}

div#content a.extiw:visited, div#content a.external:visited {
    color: #397d75;
}

div#content a.extiw:hover, div#content a.external:hover, div#content a.extiw:visited:hover, div#content a.external:visited:hover {
    color: #397d75;
}

a:active {
    color: #397d75;
}

/*****************
/* Footer styles *
/*****************/
div#footer {
    background-image: none;
}

div#footer ul li {
    color: #ffffff;
}

div#footer a {
    color: #d4d5b8;
    text-shadow: 1px 1px #000000;
}

div#footer a:hover {
    color: #397d75;
}

/* Wiki editor fixes */
.wikiEditor-ui {
    background: rgba(0, 0, 0, 0);
    border: medium none;
}

.wikiEditor-ui .wikiEditor-ui-view {
    border-bottom: medium none;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top : medium none;
}

div.wikiEditor-ui-buttons {
    background-color: rgba(0, 0, 0, 0);
    border-top: medium none;
    margin-right: 5px;
}

div.wikiEditor-ui-controls {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-tabs {
    background-color: #28333f;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
}

.wikiEditor-ui-tabs div {
    background-color: #28333f;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-tabs div a {
     background: #28333f;
     color: #c0c0c0;
}

.wikiEditor-ui-tabs div.current {
    background-color: #28333f;
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-tabs div.current a {
    color: #ffffff;
    font-weight: bold;
}

.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-toolbar {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .group {
    border-right: 1px solid #000000;
}

.wikiEditor-ui-toolbar .group-search {
    border-left: 1px solid #000000;
    border-right: none;
}

.wikiEditor-ui-toolbar .group .label {
    color: #000000;
}

.tab {
    border-color: rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a:visited {
    color: #000000;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: #000000;
}

.wikiEditor-ui-toolbar .group .tool-select .label {
    color: #000000;
}

.wikiEditor-ui-toolbar .sections .section {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #000000;
}

.wikiEditor-ui-toolbar .booklet .index div {
    color: #efefef;
}

.wikiEditor-ui-toolbar .booklet .index .current {
    background-color: rgba(0, 0, 0, 0);
    color: #000000;
}

.wikiEditor-ui-toolbar .booklet .pages {
    background-color: rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid #000000;
    color: #000000;
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #000000;
    color: #efefef;
}

.wikiEditor-ui-toolbar .page-table td {
    border-top: 1px solid #000000;
    color: #000000;
}

.wikiEditor-preview-loading {
    background-color: rgba(0, 0, 0, 0);
}

.wikiEditor-preview-contents {
    background-color: rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color #000000 #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

.editOptions {  
    background-color: rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color #000000 #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

/* Page history */
#pagehistory li {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 3px;
}

#pagehistory li.selected {
    background-color: rgba(0, 0, 0, 0.1);
    background-image: none;
    border: 1px dashed #aaaaaa;
    padding: 3px;
}

table.diff {
    background: transparent;
}

td.diff-context {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #666666;
    color: #000000;
}

td.diff-deletedline {
    background-color: #FFE49C;
    border-color: #FFE49C;
    color: #000000;
}

td.diff-addedline {
    background-color: #A3D3FF;
    border-color: #A3D3FF;
    color: #000000;
}

/* Preferences */
.client-js #preftoc {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0px;
}

.client-js #preftoc,
.client-js #preftoc li,  
.client-js #preferences, 
.client-js #preftoc li a {
    background-image: none;
    background-color: rgba(0, 0, 0, 0);
    color: #666666;
}

.client-js #preftoc li:first-child {
    margin-bottom: 4px;
    margin-left: 5px;
}

.client-js #preftoc li.selected a {
    background-color: rgba(255, 255, 255, 0.5);
    background-image: none;
    border-color: #aaaaaa #aaaaaa rgba(255, 255, 255, 0.5);
    border-style: solid;
    border-width: 1px;
    color: #000000;
}

.client-js #preferences {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #aaaaaa;
}

.client-js #preferences fieldset {
    border-color: #aaaaaa;
}

/*********************
/* Front page styles *
/*********************/
.fpmain {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.fpbanner {
  border: 1px solid #82a8af;
  box-shadow: rgba(25, 35, 41, 1) 0 0.1em 0.5em;
  background: rgba( 0, 0, 0, .2 );
  color: #000000;
  margin: 0 5px 5px 5px;
  padding: 5px;
  min-height: 80px;
}

.fpbannertable {
  display: table;
  border: none;
  background: transparent;
  width: 100%; 
  min-height: 75px;
  margin: 0;
  padding: 5px;
}

.fpbannercell {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle;
}

.fpbannerblock {
  border: none;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
  font-size: 132%;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}

.fpmidsections {
  float: left;
  width: 100%;
  overflow: hidden;
}

.fpbox {
  border: 1px solid #82a8af;
  box-shadow: 0 2px 5px #687478;
  background: rgba(0, 0, 0, 0.10);
  color: #000000;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  overflow: auto;
}

.fpbox .mainheading {
  border: none;
  border-bottom: 1px solid #82a8af;
  color: #82a8af;
  font-size: 150%;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.fpbox .heading {
  border: none;
  border-bottom: 1px solid #82a8af;
  color: #ffffff;
  font-size: 132%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.fpmain .columns .leftcol {
  width: 100%;
  margin: 0;
  padding: 0;
}

.fpmain .columns .rightcol {
  width: 100%;
  margin: 0;
  padding: 0;
}

.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
  float: left;
  clear: both; 
  width: 100%;
}

div.fp2columnonly, div.fp3columnonly {
  display: none; 
}

@media (min-width: 790px) {
  .fpsection1 {
    float: left;
    clear: none;
    width: 50%;
  }

  .fpmidsections {
    clear: none;
    float: right;
    width: 50%;
  }

  .fpsection4 {
    float: left;
    clear: none;
    width: 50%;
  }

  div.fp2columnonly {
    display: block; 
  }
}

@media (min-width: 990px) {
  .fpmain .columns .leftcol {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .fpmain .columns .rightcol {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1390px) {
  .fpmidsections {
    clear: none;
    float: right;
    width: 66.667%;
  }

  .fpsection1 {
    clear: none;
    width: 33.333%;
  }

  .fpsection2 {
    clear: none;
    width: 50%;
  }

  .fpsection3 {
    clear: none;
    width: 50%;
  }
 
  .fpsection4 {
    clear: left;
    width: 33.333%;
  }

  div.fp2columnonly {
    display: none; 
  }

  div.fp3columnonly {
    display: block; 
  }
}

.fpbox.plain {
  border: none;
  box-shadow: none;
  background: transparent;
}

.fpimagelist ul {
  list-style-type: none;
  list-style-image: none;
}

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

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

/* -- item link ----------------------------------------------------- */
.item-link{
   white-space:nowrap;
   display: inline-block;
}
.item-link > a, 
.item-link > img{ 
   display: inline-block;
   line-height: 0.1;
   vertical-align: middle;
   margin-left: 2px;
}
.item-link > span{
   display: inline-block;
   margin-left: 3px;
   text-align: left;
}
.item-link > a:first-child,
.item-link > img:first-child,
.item-link > span:first-child{
   margin-left: auto;
}
.item-link.-w > span{
   vertical-align: middle;
   line-height: 1.25;
}
.item-link .note{
   color: #666;
   font-size: 85.7142%; /*12px/14px*/
}
.item-link div.note{ /*note2*/
   font-size: 100%;
   line-height: 1;
}
.item-link span.note{
   margin-left: 3px;
}
.item-link.-w span.note:last-child{
   display: block;
   margin-left: auto;
   line-height: 1;
}
.item-link.boldname >span span:first-child{
   font-weight: bold;
}
.item-link.notecolor span.note{
   color: inherit;
}
.item-link.note2color div.note{
   color: inherit;
}
.item-link.block,
.item-link.block > span{
   display: block;
}
.item-link.notesize span.note{
   font-size: 100%;
}
.item-link.note2size div.note{
   font-size: 100%;
   font-size: 85.7142%; /*12px/14px*/
}
.item-link.alignleft{
   text-align: left;
}
.item-link.aligncenter{
   text-align: center;
}
.item-link.alignright{
   text-align: right;
}
.item-link.textleft>span{
   text-align: left;
}
.item-link.textcenter>span{
   text-align: center;
}
.item-link.textright>span{
   text-align: right;
}
/* ------------------------------------------------------------------ */

/* -- Infobox & infobox wrapper template style ---------------------- */
/* some rules just kept for "old" template. */
.infobox td, .infobox th {
   vertical-align: top; 
}
.infobox caption {
   font-size: larger;
   margin-left: inherit;
}
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px #AAA solid;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}
/* styles for latest template */
.infobox{
   border: 1px solid #aaa;
   border-radius: 8px;
   padding: 6px;
   float: right;
   font-size: 12px;
   background: transparent;
   color: black;
   margin: 0 0 0.5em 1em;
}
@media(max-width:450px){
   .infobox{
      float: none;
   }
}
.infobox.float-right{
   float: right;
   margin: 0 0 0.5em 1em;
}
.infobox.float-left{
   float: left;
   margin:0 1em 0.5em 0;
}
.infobox.float-none{
   float: none;
   margin:0 1em 0.5em 0;
}
.infobox table{
   background-color: transparent;
   width: 100%;
   border-spacing: 0;
}
.infobox table th{
   white-space: nowrap;
   padding: 2px;
   text-align: right;
   border-right: 1px solid #f9f9f9;
   width: 5em;
   vertical-align: middle;
}
.infobox table td{
   padding: 2px;
   vertical-align: middle;
}
.infobox .title{
   background-color: #E4F0F7;
   color: #063B5E;
   font-weight: bold;
   text-align: center;
   padding: 2px 0;
}
.infobox > .title{
   font-size: 15px;
   padding: 8px 0;
   line-height: 1.2;
}
.infobox > .title span{
   display: block;
   font-size: 12px;
   color: slategray;
   font-style: italic;
}
.infobox > .title span::before{
   content: "(";
   font-style: normal;
}
.infobox > .title span::after{
   content: ")";
   font-style: normal;
}
.infobox .variant{
   background-color: #E4F0F7;
   color: #063B5E;
   font-weight: bold;
   text-align: center;
   font-size: 12px;
   padding: 4px 0;
   line-height: 1.2;
}
.infobox .images{
   position: relative;
   padding: 6px 0;
   min-height: 40px;
   text-align: center;
   display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;
   /* direction=column, for IE11 */
   -webkit-box-direction:normal;-webkit-box-orient:vertical;-moz-box-direction:normal;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
   -webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;
   -webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;
}
.infobox ul{
   list-style: none;
   margin: auto;
   text-align: center;
}
.infobox .stat td > small{
   font-size: 10.5px;
   font-weight: bold;
}
.infobox .stat td > small::before{
   content: "(";
}
.infobox .stat td > small::after{
   content: ")";
}
.infobox tr.buff th, .infobox tr.buff td{
   background-color: #E4F0F7;
   border: 1px solid #f9f9f9;
}
.infobox tr.buff th{
   border-left: 0;
}
.infobox tr.buff td{
   border-right: 0;
   padding-left: 3px;
}
.infobox tr.buff td b{
   font-weight: bold;
}
.infobox .variant{
   margin-bottom: 2px;
   white-space: nowrap;
}
.infobox .drops td:first-child{
   text-align: left;
}
.infobox .drops td:last-child{
   text-align: right;
}
.infobox .drops th:first-child{
   text-align: left;
   border-right: 0;
}
.infobox .section.drops{
   margin-top: 6px;
}
.infobox .drops.money{
   margin: 2px auto;
}
.infobox .image2{
   text-align: center;
   padding-top: 3px;
   border-top: 1px solid #aaa;
}
.infobox .drops.items{
   margin-bottom: 1px;
}
.infobox .drops.items li{
   border-bottom: 1px #AFCFE2 solid;
   padding: 3px 0;
   margin-bottom: auto;
   display:-webkit-box;
   display:-webkit-flex;
   display:-moz-flex;
   display:-ms-flexbox;
   display:flex;
   -ms-flex-wrap:nowrap;
   -webkit-flex-wrap:nowrap;
   -moz-flex-wrap:nowrap;
   flex-wrap:nowrap;
   -webkit-box-direction:normal;
   -webkit-box-orient:horizontal;
   -moz-box-direction:normal;
   -moz-box-orient:horizontal;
   -webkit-flex-direction:row;
   -ms-flex-direction:row;
   flex-direction:row;
   -webkit-box-pack:justify;
   -ms-flex-pack:justify;
   -webkit-justify-content:space-between;
   -moz-justify-content:space-between;
   justify-content:space-between;
   -webkit-box-align:center;
   -ms-flex-align:center;
   -webkit-align-items:center;
   -moz-align-items:center;
   align-items:center;
}
.infobox .drops.items li:first-child{
   background-color: #E4F0F7;
   color: #063B5E;
   padding: 2px 3px 0;
}
.infobox .drops.items li > div{
   display: block;
}
.infobox .drops.items li > div:first-child{
   text-align: left;
}
.infobox .drops.items li > div:last-child{
   text-align: right;
}
.infobox .drops.items li:last-child{
   border-bottom: none;
}
.infobox .drops.items li.caption{
   border-top:2px #AFCFE2 solid;
   margin-top: 2px;
   line-height:1;
   text-align: center;
   color:#063B5E;
   font-size: 10.5px;
   background:#f0f7fb;
   padding-top: 5px;
   display: block;
}
.infobox .drops.items li.group_end{
   border-bottom:5px #AFCFE2 solid;
   position: relative;
}
.infobox .drops.items li.group_end::after{
   content: "";
   display: block;
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 100%;
   height: 2px;
   background: transparent;
}
/* for item infobox */
.item.infobox{
   width: 21em;
}
.item.infobox .images .auto, .infobox.item .images .stack{
   position: absolute;
   right: 3px;
}
.item.infobox .images .instrument {
   position: absolute;
   left: 3px;
}
.item.infobox .images .auto{
   top: 3px;
} 
.item.infobox .images .stack, .item.infobox .images .instrument{
   bottom: 3px;
}
.item.infobox .images ul.inline li{
   display: inline-block;
   padding: 0 8px 0 9px;
   margin: 2px auto;
   position: relative;
}
.item.infobox .images ul.inline li::before{
   content: "";
   display: block;
   width: 1px;
   background: #ccc;
   height: 80%;
   position: absolute;
   left: 0;
   top: 10%;
}
.item.infobox .images ul.inline li:first-child::before{
   display: none;
}
.item.infobox .images ul.block li{
   display: block;
   padding: 13px 0 0 0;
   margin: auto;
   position: relative;
}
.item.infobox .images ul.block li::before{
   content: "";
   display: block;
   height: 1px;
   background: #ccc;
   width: 80%;
   position: absolute;
   left: 10%;
   top: 6px;
}
.item.infobox .images ul.block li:first-child{
   padding-top: 0;
}
.item.infobox .images ul.block li:first-child::before{
   display: none;
}
.item.infobox ul.toolpower{
   padding: 6px 0;
   cursor: pointer;
}
.item.infobox ul.toolpower li{
   display: inline-block;
   padding: 0 0.5em;
}
/* for npc infobox */
.npc.infobox{
   width: 23em;
}
.npc.infobox .statistics table th{
   width: 6em;
}
.npc.infobox .images .map{
   position: absolute;
   left: 3px;
   top: 3px;
}
/* infobox wrapper */
.infobox-wrapper.float-right{
   float: right;
   margin-left: 0.5em;
}
.infobox-wrapper.float-left{
   float: left;
   margin-right: 0.5em;
}
.infobox-wrapper.float-none{
   float: none;
}
.infobox-wrapper.float-right.direction-row .infobox,
.infobox-wrapper.float-right.direction-row-reverse .infobox,
.infobox-wrapper.float-right.direction-row .infobox.float-left,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-row .infobox.float-right,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-right.direction-row .infobox.float-none,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-none{
   float: none;
   margin: 0 0 0.5em 0.5em;
}
.infobox-wrapper.float-left.direction-row .infobox,
.infobox-wrapper.float-left.direction-row-reverse .infobox,
.infobox-wrapper.float-left.direction-row .infobox.float-left,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-row .infobox.float-none,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-row .infobox.float-right,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-none.direction-row .infobox,
.infobox-wrapper.float-none.direction-row-reverse .infobox,
.infobox-wrapper.float-none.direction-row .infobox.float-left,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-row .infobox.float-none,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-none.direction-row .infobox.float-right,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-right{
   float: none;
   margin: 0 0.5em 0.5em 0;
}
.infobox-wrapper.float-left.direction-column .infobox,
.infobox-wrapper.float-left.direction-column-reverse .infobox,
.infobox-wrapper.float-left.direction-column .infobox.float-left,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-column .infobox.float-none,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-column .infobox.float-right,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-right{
   float: left;
   margin: 0 0.5em 0.5em 0;
}
.infobox-wrapper.float-none.direction-column .infobox,
.infobox-wrapper.float-none.direction-column-reverse .infobox,
.infobox-wrapper.float-none.direction-column .infobox.float-right,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-right{
   float: right;
   margin: 0 0 0.5em 0.5em;
}
.infobox-wrapper.float-none.direction-column .infobox.float-left,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-column .infobox.float-none,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-none{
   float: left;
   margin: 0 0.5em 0.5em 0;
}
.infobox-wrapper.float-right.direction-column .infobox,
.infobox-wrapper.float-right.direction-column-reverse .infobox,
.infobox-wrapper.float-right.direction-column .infobox.float-left,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-column .infobox.float-none,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-right.direction-column .infobox.float-right,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-right{
   float: right;
   margin: 0 0 0.5em 0.5em;
}
/* ------------------------------------------------------------------ */

table.terraria {
   margin-top: 0.4em !important;
}

table {
	font-size: 100%;
	color: #000000;
	/* we don't want the bottom borders of <h2>s to be visible through
	 * floated tables */
}

/* "terraria"-classed tables */
table.terraria {
	margin: 1em 1em 1em 0;
	background: transparent;
        border: 1px #AFCFE2 solid;
        padding: 0.2em;
        border-radius: .7em;
	-moz-border-radius: .7em;
        -webkit-border-radius: .7em;
}
.terraria th, .terraria td {
	padding: 0.2em;
}
.terraria th {
	background: #E4F0F7;
        color: black;
	text-align: center;
}
.terraria caption {
	font-weight: bold;
}
/* ------------------ */


/* Auto line separators for tables */
table.lined td {
        border-bottom:1px #AFCFE2 solid;
}
table.lined tr:last-of-type td {
        border-bottom:0;
}
table tr.bottomline td {
        border-bottom:1px #AFCFE2 solid;
}
table tr.topline td {
        border-top:1px #AFCFE2 solid;
}
/* ------------------ */

div#content a.new:visited,
div#content a.new:hover,
div#content a.new:link {
    color: #ba0000 !important;
}

/*crafts table*/
div.crafts{
   margin-bottom: 4px;
   line-height: 1.5;
   display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex;
}

div.crafts .wrap{
   border:1px solid #aaa;
   border-radius: 8px;
   padding: 6px 6px 2px;
   position: relative;
}
div.crafts .wrap::after{
   content: "";
   display: block;
   height: 1px;
   width: auto;
   background: #fcfcfc;
   position: absolute;
   bottom: 2px;
   left: 6px; right: 6px;  
}
div.crafts caption{
   font-size: 1.17em;
   background: #E4F0F7;
   padding: 0.25em;
   position: relative;
   margin-bottom: 2px;
   font-weight: bold;
}
div.crafts caption div._nav{
   position: absolute;
   left: 1em;
   top: 0.5em;
   font-size: 10px;
   font-weight: normal;
}
div.crafts caption div._nav s{
   text-decoration: none;
}
div.crafts th{
   background: #E4F0F7;
   padding: 0.25em 0.5em;
   border-right: 1px solid #f9f9f9;
   border-left: 1px solid #f9f9f9;
}
div.crafts th:first-child{
   border-left: 0;
}
div.crafts th:last-child{
   border-right: 0;
}
div.crafts td{
   padding: 0.25em 0.5em;
   border-bottom: 1px solid #ccc;
}
div.crafts td.station{
   border-left: 1px solid #ccc;
}
div.crafts.nostation th.station,
div.crafts.nostation td.station{
   display: none;
}
div.crafts table ul{
   margin: 0;
   list-style: none;
}
div.crafts table li{
   margin: 3px auto;
}


/* {{infocard}} */
.infocard{
	margin: 0.5em 0; 
	padding: 1em;
	box-sizing: border-box;
	border: 1px solid #aaa;
	border-radius: 6px;
	width: 100%;
	min-width: 300px;
	position: relative;
	background: #f2f2f2;
	color: #000;
}
.infocard > .card{
	float: right; 
	margin: -1em 1em 0.75em 0.75em;
	box-shadow: 0 0 6px rgba(0,0,0,0.05);
	position: relative;
	z-index: 5;
}
.infocard > .card .image{
	background: #ddd;
	border-left: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
}
.infocard > .card .content{
	border: 1px solid #ddd;
	border-top: 0; margin: 0 1px;
	background: #fff;
	border-radius: 0 0 4px 4px;
	box-sizing: border-box;
	padding: 0 0.75em 0;
}
.infocard > .card .content > .intro{
	margin-top: 0.75em;
}
.infocard > .card .content > dl{
	margin: 0.75em 0;
}
.infocard > .card .content dt{
	font-weight: bold;
	margin-top: 0.75em;
}
.infocard > .card .content dd{
	margin: 0;
}
.infocard > .card .content > .outro{
	margin-bottom: 0.75em;
}
.infocard .main-heading{
	border-right: 3em solid transparent;
	padding-left: 1em;
	margin: 2em -1em 1em;
	position: relative;
	line-height: 1;	
}
.infocard > .main-heading,
.infocard .intro:first-child > .main-heading:first-child,
.infocard .outro:first-child > .main-heading:first-child{
	margin-top: 1em;
}
.infocard .main-heading .hgroup{
	background: #f2f2f2;
	padding: 0 1em;
	display: inline-block;
	position: relative;
	z-index:10;
	color: #999;	 
	font-weight: 100;
}
.infocard .main-heading .hgroup > .main{
	font-size: 2em;
	color: #000;
}
.infocard .main-heading .hgroup > .main span{
	font-size: 62.5%;
	color: #999;
}
.infocard .main-heading .icon{
	position: absolute;
	right: -2em;
	top: 0;
	height: 100%;
	z-index: 1;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	-moz-align-items:center;
	align-items:center;
	-webkit-align-content:center;
	-ms-flex-line-pack:center;
	align-content:center;	
}
.infocard > .intro{
	margin: 1em 0;
	min-width: 200px;
}
.infocard > .outro{
	margin: 1em 0;
	min-width: 200px;
}
.infocard > .box{
	margin: 1em 0;
}
.infocard > .intro:first-child,
.infocard > .outro:first-child,
.infocard > .box:first-child{
	margin-top: 0;
}
.infocard > .intro:last-child,
.infocard > .outro:last-child,
.infocard > .box:last-child{
	margin-bottom: 0;
}
.infocard > .intro > .box,
.infocard > .outro > .box{
	margin: 0 0 1em 0;
}
.infocard > .intro > .box:last-child,
.infocard > .outro > .box:last-child{
	margin: 0;
}
.infocard .box{
	border: 1px solid #ddd; 
	background: #fff; 
	border-radius: 4px;
	padding: 1em;
}
.infocard .box > .title{
	line-height: 1;
	display: inline-block;
	margin-left: -1em;
	padding: 0 1em 0 0.5em;
	min-width: 5em;
	border-left: 0.5em solid transparent;
}
.infocard .box > .title > span{
	font-weight: lighter;
	font-size: 1.5em;
}
.infocard .box > .content{
	margin-top: 1em;
}
.infocard .box > .content:first-child{
	margin-top: 0;
}
.infocard .heading{
	margin: 1em 0 0.25em;
	font-weight: bold;
}
.infocard.small{
	font-size: 12px;
}

.infocard.compact{
	padding: 0.5em;
	min-width: 240px;
}

.infocard.compact .main-heading{
	padding-left: 0.5em;
	margin: 0.75em -0.5em 0.5em;
}
.infocard.compact > .main-heading,
.infocard.compact .intro:first-child > .main-heading:first-child,
.infocard.compact .outro:first-child > .main-heading:first-child{
	margin-top: 0.5em;
}
.infocard.compact .main-heading .hgroup{
	padding: 0 0.5em;
	font-weight: normal;
}
.infocard.compact .main-heading .hgroup > :first-child,
.infocard.compact .main-heading .hgroup > :last-child
{
	font-size: 85%;
}
.infocard.compact .main-heading .hgroup > .main{
	font-size: 1.25em;
}
.infocard.compact .main-heading .hgroup > .main span{
	font-size: 80%;
}
.infocard.compact > .intro{
	margin: 0.5em 0;
}
.infocard.compact > .outro{
	margin: 0.5em 0;
}
.infocard.compact > .box{
	margin: 0.5em 0;
}
.infocard.compact > .intro:first-child,
.infocard.compact > .outro:first-child,
.infocard.compact > .box:first-child{
	margin-top: 0;
}
.infocard.compact > .intro:last-child,
.infocard.compact > .outro:last-child,
.infocard.compact > .box:last-child{
	margin-bottom: 0;
}
.infocard.compact > .intro > .box,
.infocard.compact > .outro > .box{
	margin: 0 0 0.5em 0;
}
.infocard.compact > .intro > .box:last-child,
.infocard.compact > .outro > .box:last-child{
	margin: 0;
}

.infocard.compact .box{
	padding: 0.5em;
}

.infocard.compact .box > .title{
	margin-left: -0.5em;
	padding: 0 0.5em 0 0.25em;
	border-left: 0.25em solid transparent;
}
.infocard.compact .box > .title > span{
	font-size: 100%;
	font-weight: bold;
}
.infocard.compact .box > .content{
	margin-top: 0.25em;
}
.infocard.compact .box > .content:first-child{
	margin-top: 0;
}
.infocard.compact .box > .content:first-child{
	margin-top: 0;
}
.infocard.compact .heading{
	margin: 0.5em 0 0;
}

.infocard.compact > .card{
	margin: -0.5em 0.5em 0.5em 0.5em;
}
.infocard.compact > .card .content{
	padding: 0 0.5em 0;
}
.infocard.compact > .card .content > .intro{
	margin-top: 0.5em;
}
.infocard.compact > .card .content > dl{
	margin: 0.5em 0;
}
.infocard.compact > .card .content dt{
	margin-top: 0.5em;
}
.infocard.compact > .card .content > .outro{
	margin-bottom: 0.5em;
}

.infocard.compact .main-heading .icon{
	right: -2.5em;
}
.infocard.terraria{
	background: #fcfcfc;
	border-color: #AFCFE2;
}
.infocard.terraria .main-heading .hgroup{
	background: #fcfcfc;
}

/* itemlist */
.itemlist > ul {
    list-style: none;
    margin: 0.25em 0 -0.25em 0;
}

.itemlist > ul > li {
    width: 10em;
    /* default width */
    margin: auto 1em 0.5em auto;
    display: inline-block;
}
Community content is available under CC BY-SA 3.0 unless otherwise noted.
Advertisement