MediaWiki:Mobile.css

/* Header and footer */ .overlay-enabled, #mw-mf-page-center #content { background-color: #000000; }

.header { border-top: none; }

.header-container.header-chrome, .header-container { background: black; color: white; border-bottom: 1px solid #7E5900; }

.header .branding-box h1, .header .branding-box a { color: white; }

footer { color: white; background-color: #404040; }

footer > .post-content > h2:first-child, footer > .post-content > .license, footer > .post-content > .footer-info, footer > .post-content > .footer-places { padding: 0 20px; }

footer > .post-content > h2:first-child { padding-top: 10px; padding-bottom: 10px; }

footer > .post-content > * { margin-top: 10px; }

.overlay #secondary-button.user-button, .header #secondary-button.user-button, .overlay .user-button, .header .user-button { background: transparent; }

display: initial; }
 * 1) footer-hydra-hydrafooter {

.footer-logo, .footer-social, .footer-properties, .footer-overview, .footer-community, .footer-advertise { padding: 0 18px; }

/* end header and footer */

.nomobile { display: none; }

/* TOC - Table of contents */

.client-js .toc-mobile { background-color: transparent !important; border: 1px solid #7E5900 !important; }

.client-js .toc-mobile:focus, .client-js .toc-mobile .collapsible-heading:focus { outline: none; }

.client-js .toc-mobile .collapsible-block { margin-left: 0px !important; }

/* End TOC */

/* General styles */

.content dd { margin-left: 1.6em; }

.mw-ui-button, .last-modified-bar #mw-mf-last-modified { color: #ffffff; background-color: #d19e26; }

.overlay-enabled, #content { background: #000000; background-size: cover; color: #ffffff; }

a, a:visited, a.external { color: #f2c462; }

a.new, a.new:visited { color: #ff6644; }

.mw-selflink.selflink { color: #E0E0E0; }

.content .mw-parser-output > h2, .content .section-heading { border-bottom: 1px solid #7E5900; }

/* For hydradark only - makes the section collapse arrow visible */ .mw-ui-icon-arrow::before { filter: invert(100%); }

.thumb, li.gallerybox div.thumb { background-color: rgba(0, 0, 0, 0); border: 1px solid #7E5900; }
 * 1) content_wrapper .thumb,

.content table { display: table; }

.content table th { background-color: transparent; }

.content table.wikitable { color: #ffffff; border-collapse: separate; border-spacing: 0; padding: 0; background: transparent; }

.content table.wikitable > tr > th, .content table.wikitable > tr > td, .content table.wikitable > * > tr > th, .content table.wikitable > * > tr > td { background-color: transparent; }

.content table.wikitable p { margin: 0.5em 0; }

.content table.wikitable > tr > th, .content table.wikitable > tr > td, .content table.wikitable > * > tr > th, .content table.wikitable > * > tr > td { border: 1px solid #7E5900; }

.content table.wikitable tr th+th, .content table.wikitable tr td+td, .content table.cargoTable tr th+th { border-left: 0px !important; }

.content table.wikitable thead tr:first-child th:first-child, .content table.wikitable tbody tr:first-child th:first-child, .content table.wikitable tbody:first-child tr:first-child td:first-child { border-top-left-radius: 7px; }

.content table.wikitable thead tr:first-child th:last-child, .content table.wikitable tbody tr:first-child th:last-child, .content table.wikitable tbody:first-child tr:first-child td:last-child { border-top-right-radius: 7px; }

.content table.wikitable thead+tbody tr:last-child td:first-child, .content table.wikitable tbody tr:last-child td:first-child, .content table.wikitable tfoot tr:last-child td:first-child { border-bottom-left-radius: 7px; }

.content table.wikitable thead+tbody tr:last-child td:last-child, .content table.wikitable tbody tr:last-child td:last-child, .content table.wikitable tfoot tr:last-child td:last-child { border-bottom-right-radius: 7px; }

table.quote td { border: 0px solid #f2c462; }

/* Fix for family tree tables having borders. Non-wikitable tables should probably not have borders at all, but this needs to be tested to make sure it doesn't break anything */ .content table.familytree td { border: none; }

/* Responsive main page stuff */ /******************** /* Main menu styles * /********************/

.primary-navigation-enabled { background: #101010 !important; }

background: transparent; }
 * 1) mw-mf-page-left ul {

border-bottom: 12px solid #f2c462; }
 * 1) mw-mf-page-left ul:first-child {

border-top: 1px solid #404040; border-bottom: 1px solid #f2c462; background: transparent; list-style: none; text-shadow: none; }
 * 1) mw-mf-page-left ul li {

border: none; color: #f2c462; }
 * 1) mw-mf-page-left ul li a,
 * 2) mw-mf-page-left ul.hlist li a {

border-left: 12px solid #eaecf0; background: #404040; }
 * 1) mw-mf-page-left ul li:hover {

border: none; }
 * 1) mw-mf-page-left ul.hlist li:hover {

color: #ffffff; }
 * 1) mw-mf-page-left ul li:hover a,
 * 2) mw-mf-page-left ul.hlist li:hover a {

/********************* /* Front page styles * /*********************/ .fpbox { border-radius: 5px; border: 2px solid #7E5900; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset; background: transparent; color: inherit; margin: 5px; padding: 5px; }

.fpbox .welcome { border-bottom: 1px solid #7E5900; background: transparent; /* color: #e0e0e0; */ font-family: EB Garamond; font-size: 150%; text-align: center; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading, .fptab { border-bottom: 1px solid #7E5900; background: transparent; /* color: #e0e0e0; */ font-family: EB Garamond; font-size: 132%; font-weight: bold; text-transform: uppercase; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading .smalllink { color: #3674b3; font-weight: bold; font-size: 75%; }

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

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

.fplinks { margin: -2px -3px; }

.fplinks .linkslabel { border-bottom: 2px solid #f2c462; margin: 6px 3px 0 3px; }

.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 { display: table; width: 100%; border-spacing: 2px 3px; border-collapse: separate; }

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

.fplink .box .row .cell { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; /*    background-color: #000000; background-image: -moz-linear-gradient(center top, #151515 0%, #000000 100%); background-image:-webkit-gradient(linear, center top, left bottom, color-stop(0%,#151515), color-stop(100%,#000000)); background-image:-webkit-linear-gradient(top, #151515 0%, #000000 100%); background-image:-o-linear-gradient(top, #151515 0%, #000000 100%); background-image:-ms-linear-gradient(top, #151515 0%, #000000 100%); background-image: linear-gradient(to bottom, #151515 0%, #000000 100%); */ border: 2px solid #f2c462; border-radius: 2px; box-shadow: 0 0 0 2px #f2c462 inset; /* color: #e0e0e0; */ display: table-cell; font-weight: bold; position: relative; text-align: center; text-transform: uppercase; vertical-align: middle; }

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

.fplink.image { width: 78px; height: 78px; }

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

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

.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: 3px 5px; }

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

.fplink.image .link a { border-top: 2px solid #f2c462; background: #ddddb7 !important; }

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

.fplink.image a { top: auto; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; max-width: 480px; }

.fpvideo { position: relative; padding-top: 25px; padding-bottom: 56.25%; height: 0; }

.fpvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* END OF LOADOUT, NOT MUCH CHANGED */

.content ul { list-style-type: disc; margin: 0.15em 0px 0.15em 1.6em; padding: 0px; }

.content li { margin-bottom: 0; }

.skin-hydradark .mw-code, .content code, code { padding: 1px 4px; background-color: rgba(0,0,0,0.075); border-radius: 0px; color: #c0c0c0; border: 1px solid #7E5900 } pre { padding: 0.7em 1em; background-color: #d3c6ad; background-color: rgba(0,0,0,0.115); border: 1px dashed #79633e; border-radius: 7px; color: white; }   background-color: transparent; border: 1px solid #404040; border-radius: 7px; }
 * 1) catlinks {

/* image and galleries  */

li.gallerybox { border: 1px solid #7E5900; border-radius: 7px; background-color: rgba(150,90,15,.1); } li.gallerybox div.thumb { background-color: rgba(255,255,255,0.1); border: medium none; } div.thumb { background-color: rgba(255,255,255,.1); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); border-radius: 7px; }

div.thumbinner { background-color: transparent; border: 1px solid #7E5900; border-radius: 7px; }

html .thumbimage { border: 0px solid #7E5900; border-radius: 7px; } img.thumbborder { border: 0px solid #7E5900; }

.skin-hydradark #preftoc, .skin-hydradark #preftoc li, .skin-hydradark #preferences, .skin-hydradark #preftoc li a { background-color: rgba(0, 0, 0, 0); background-image: none; color: #c0c0c0; }

.skin-hydradark #preftoc li.selected a { background-color: #000000; background-image: none; border: none; color: #869ae0; }

.ambox { background-color: #282828; border-bottom-color: #383838; border-right-color: #383838; border-top-color: #383838; border-collapse: separate; border-radius: 7px; font-size: 95%; margin: 0 auto 2px auto; width: 80%; }

.ambox-gray { border-left-color: #383838; }

.ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; }

.ambox + .ambox { margin-top: -2px; }

.ambox-text { padding: 0.25em 0.5em; }

.ambox-image { padding: 2px 0px 2px 0.5em; text-align: center; width: 60px; }

.ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; }

/* Ambox colors */ .ambox-blue { border-left: 10px solid #1e90ff; }

.ambox-red { border-left: 10px solid #b22222; }

.ambox-orange { border-left: 10px solid #f28500; }

.ambox-yellow { border-left: 10px solid #f4c430; }

.ambox-purple { border-left: 10px solid #9932cc; }

.ambox-gray { border-left: 10px solid #bba; }

.ambox-green { border-left: 10px solid #228b22; }

/* Ambox small text */ .amsmalltext { font-size: smaller; margin-left: 0.8em; margin-top: 0.5em; }

/* ===== Navigation boxes =====*/ /* Default style for navigation boxes */ .navbox {						/* Navbox container style */ width: 100%; margin: auto; padding: 1px; clear: both; font-size: 88%; text-align: center; border: 1px solid #404040; border-radius: 7px; }

.navbox-inner, .navbox-subgroup { width: 100%; }

.navbox-group, .navbox-title, .navbox-abovebelow { padding: 0.25em 1em;		/* Title, group and above/below styles */ line-height: 1.5em; text-align: center; }

th.navbox-group {				/* Group style */ white-space: nowrap; /* @noflip */ text-align: right; }

.navbox, .navbox-subgroup { background-color: rgba(244,236,221,0.1);	/* Background color */ }

.navbox-list { line-height: 1.8em; border-color: transparent;	/* Must match background color */ }

.navbox th, .navbox-title { color: #F0DCDD; background-color: #000000;		/* Level 1 color */ border: 0px solid #f2c462; border-radius: 7px; background-image: -moz-linear-gradient(center top, #0A0B0C 80%, #505050 100%); background-image: -webkit-gradient(linear, center top, left bottom, color-stop(80%,#0A0B0C), color-stop(100%,#505050)); background-image: -webkit-linear-gradient(top, #0A0B0C 80%, #505050 100%); background-image: -o-linear-gradient(top, #0A0B0C 80%, #505050 100%); background-image: -ms-linear-gradient(top, #0A0B0C 80%, #505050 100%); background-image: linear-gradient(to bottom, #0A0B0C 80%, #505050 100%); }

.navbox-title a { color: #F0DCDD !important; }

th.navbox-group > a, .navbox-abovebelow a { color: darkblue; }

.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: #8C753E; /* Level 2 color */ color: black; border: none; border-radius: 7px; }

.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #DDC495;		/* Level 3 color */ }

.navbox-odd { background: transparent;	/* Even row striping */ }

.navbox-even { background-color: rgba(221,196,149,.2);	/* Odd row striping */ border-radius: 7px; } table.navbox + table.navbox {	/* Single pixel border between adjacent navboxes */ margin-top: -1px;			/* (doesn't work for IE6, but that's okay)	  */ }

table.nowraplinks.navbox-subgroup { border-radius: 7px; }

/* ===== Default styling for Navbar template =====*/ .navbar { display: inline; font-size: 88%; font-weight: normal; }

/* Navbar styling when nested in infobox and navbox */ .navbox .navbar { display: block; font-size: 100%; } .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 6em; }

/* ===== Infobox Styles ===== */

/* OLD - Used in Template:Infobox, Template:Infobox/row, and Template:Infobox2 */ /* Currently only used in NPC_infobox */

.infobox { width: 275px; float: right; margin: 0em 0em 0.5em 1em !important; padding: 1px; background-color: #000000; border: 1px solid #7E5900; font-size: 88%; line-height: 1.5em; border-radius: 0px; border-collapse: separate; }

.infobox-above { padding: 0.5em; background-color: #000000; border: none; background: #7E5900; background-image: -moz-linear-gradient(center top,#000000 0%,#7E5900 100%); background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#000000),color-stop(100%,#7E5900)); background-image: -webkit-linear-gradient(top,#000000 0%,#7E5900 100%); color: white; font-size: 120%; font-weight: bold; }

.infobox-header { padding: 0.35em; border: 1px solid #7E5900; background: #7E5900; background-image: -moz-linear-gradient(center top,#000000 0%,#7E5900 100%); background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#000000),color-stop(100%,#7E5900)); background-image: -webkit-linear-gradient(top,#000000 0%,#7E5900 100%); background-image: -o-linear-gradient(top,#000000 0%,#7E5900 100%); background-image: -ms-linear-gradient(top,#000000 0%,#7E5900 100%); background-image: linear-gradient(to bottom,#000000 0%,#7E5900 100%); coloe: white; font-size: 95%; font-weight: bold; }

.infobox-row > * { border-bottom: 1px dotted #7E5900; }

.infoboxtable { background: #000000; border: 1px solid #7E5900; border-radius: 0px; border-collapse: separate; color: #ffffff; float: right; font-size: 85%; margin: 0 0 0.5em 1em !important; padding: 0.2em; width: 300px; }

.infoboxtable td { vertical-align: top; }

.infoboxtable td > div { color: #ffffff; background-color: rgba(140,117,62,0.4); border: 1px solid #8C753E; border-radius: 5px; font-weight: bold; padding: 0px 5px; text-align: left; }

.infoboxtable .value { background-color: transparent; border: 1px solid #7E5900; text-align: center; color: #ffffff; padding: 0px 2px; font-weight: normal; }

.infoboxtable td img { max-width: 284px; max-height: 400px; height: auto; }

.infoboxdetails1, .infoboxdescription1 { border-radius: 0px; padding: 0.2em; font-weight: bold; text-align: center; }

.infoboxname1, .infoboxdetails1, .infoboxdescription1 { background: #7E5900; background-image: -moz-linear-gradient(center top, #000000 0%, #7E5900 100%); background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#000000), color-stop(100%,#7E5900)); background-image: -webkit-linear-gradient(top, #000000 0%, #7E5900 100%); background-image: -o-linear-gradient(top, #000000 0%, #7E5900 100%); background-image: -ms-linear-gradient(top, #000000 0%, #7E5900 100%); background-image: linear-gradient(to bottom, #000000 0%, #7E5900 100%); color: #ffffff; }

.infoboxname1 { font-size: 120%; font-weight: bold; border-radius: 0px; padding: 0.5em; }

/* Infobox-Icons */ div.icons { display: table-cell; vertical-align: middle; text-align: center; }

div.icons img, div.icons span { display: inline-block; }

div.icons span { width: 280px; }

div.icons img { margin-top: -0.5em; margin-bottom: -0.5em; } /* end Infobox-Icons */

/* === Colitem === */

.colitem { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }

.colitem:not(:last-child) { margin-bottom: 5px; }

/* Map background images from Common.css */

.poe1map { width: 1024px; height: 576px; margin: auto; background: url(https://static.wikia.nocookie.net/eternitywiki/images/5/58/World_map_background_cropped_loss.jpg/revision/latest); background-size: 100%; position:relative; }

.px1map { width: 1084px; height: 610px; margin: auto; background: url(https://static.wikia.nocookie.net/eternitywiki/images/2/23/PX1_world_map_background_loss.jpg/revision/latest); background-size: 100%; position: relative; }

.poe2map { width: 1200px; height: 1200px; margin: auto; background: url(https://static.wikia.nocookie.net/eternitywiki/images/c/c6/PoE2_World_Map_Full.jpg/revision/latest); background-size: 100%; position: relative; }

.worldmap { overflow: auto; }

.mapnode, .mapnode a, .mapnode img { display: inline-flex; }

.mapnode a { color: inherit; text-decoration: none; }

.poe1poinode { font-family: "EB Garamond"; font-size: 17px; text-shadow: 1px 2px 1px #000; line-height: 19px; }