MediaWiki:Mobile.css

/* All CSS here will be loaded for users of the mobile site */

/* por mobilefrontend hay que replicarlo aquí */
.content .thumbcaption { color:#fff; }

/* Caption size in thumbs. Note that both selectors are counted, so it first applies 95% and then applies another 95% from that. This is how MW does it as standard. */
.thumbinner, .thumbinner .caption { font-size: 95%; }

.thumbinner .caption { color: #fff; }

img.thumbimage {
	background-color:#f9f9f9;
	border:none;
	border-radius:3px;
}

/* Appearance of galleries in articles (gallery tag) */
.gallerybox {
	background-color:#333;
	background:linear-gradient(to bottom, #888, #333);
	color:#fff;
	padding:4px 2px 4px 4px !important;
	margin:6px 7px 6px 0 !important;
	border-radius:5px;
	box-shadow:2px 2px 5px #333;
	display: -webkit-box;
}

.gallerybox .gallerytext a { color:#fec423; }
.gallerybox .gallerytext a.new { color:#e7401e; }

.galleryfilename-truncate { white-space: normal; }

.gallerybox div.thumb {
	height:auto !important;
	background:#ffffff url('data:image/gif;base64,R0lGODdhBQAFAOMJANHR0dLS0tbW1u7u7u/v7/Dw8PX19fb29vf39////////////////////////////ywAAAAABQAFAAAEDzBJA+QBJSFAdOiJMEhJBAA7') repeat;
	border:none !important;
	margin-right:2px !important;
    border-radius: 3px;
}

ul.mw-gallery-nolines li.gallerybox div.gallerytext {
	text-align:left;
}

/*** END OF IMAGES ***/
/* With dotted line in the headlines (de fr.wikipedia.org) */
.mw-parser-output h3 {padding-top:0.6em; border-bottom:dotted 1px #AAA; padding-bottom:0.1em;}
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {padding-top:0.55em; border-bottom:dotted 1px #DDD}

/* Section heading style */
body.ns-0 .mw-parser-output > h2 {
	margin:8px 0px 12px -12px;
	padding:8px 0 0 10px;
	height:30px;
	line-height:28px;
	border-bottom:1px solid #FED663;
	color:#222;
	overflow:visible;
}

/* Recent changes */
.mw-plusminus-pos { color:#006500; }
.mw-plusminus-neg { color:#8B0000; }
.mw-plusminus-null { color:#aaa; }

/* special links */
.whitelinks a, .whitelinks a:visited { color: white; }

/*** Table styling ***/
/*** General ***
Table styling (from [[Wikipedia:es:MediaWiki:Common.css]])

The idea is, if you want the first column of the table to be aligned to the right, the second to the center, and the third to the left, use

{| class="col1right col2cen col3left"
en vez de repetir "style='text-align:right'", etc, en '''cada''' celda
*/

table.col1right td:first-child { text-align:right; }
table.col1left td:first-child { text-align:left; }
table.col1center td:first-child { text-align:center; }

table.col2right td:first-child + td { text-align:right; }
table.col2left td:first-child + td { text-align:left; }
table.col2center td:first-child + td { text-align:center; }

table.col3right td:first-child + td + td { text-align:right; }
table.col3left td:first-child + td + td { text-align:left; }
table.col3center td:first-child + td + td { text-align:center; }

table.col4right td:first-child + td + td + td { text-align:right; }
table.col4left td:first-child + td + td + td { text-align:left; }
table.col4center td:first-child + td + td + td { text-align:center; }

table.col5right td:first-child + td + td + td + td { text-align:right; }
table.col5left td:first-child + td + td + td + td { text-align:left; }
table.col5center td:first-child + td + td + td + td { text-align:center; }

table.col6right td:first-child + td + td + td + td + td { text-align:right; }
table.col6left td:first-child + td + td + td + td + td { text-align:left; }
table.col6center td:first-child + td + td + td + td + td { text-align:center; }

table.col7right td:first-child + td + td + td + td + td + td { text-align:right; }
table.col7left td:first-child + td + td + td + td + td + td { text-align:left; }
table.col7center td:first-child + td + td + td + td + td + td { text-align:center; }

table.col8right td:first-child + td + td + td + td + td + td + td { text-align:right; }
table.col8left td:first-child + td + td + td + td + td + td + td { text-align:left; }
table.col8center td:first-child + td + td + td + td + td + td + td { text-align:center; }

table.col9right td:first-child + td + td + td + td + td + td + td + td { text-align:right; }
table.col9left td:first-child + td + td + td + td + td + td + td + td { text-align:left; }
table.col9center td:first-child + td + td + td + td + td + td + td + td { text-align:center; }

table.col10right td:first-child + td + td + td + td + td + td + td + td + td { text-align:right; }
table.col10left td:first-child + td + td + td + td + td + td + td + td + td { text-align:left; }
table.col10center td:first-child + td + td + td + td + td + td + td + td + td { text-align:center; }

tr.header { background:#ccf; color:#000; }

/*
General table formats:
* wiki: standard
* list: standard + row highlighting on hover, closer rows
* gallery: standard + centering + minimum column width of 100px (yes, and only if it contains headings)

Usage example:
{| class="list"
*/

table.wiki, table.list, table.gallery {
	border-collapse:collapse;
	background:#f8f8ff;
	color:#000;
	margin-bottom:1.5em;
}

table.list {
	font-size:95%;
	line-height:1.1em;
}

table.gallery {
	text-align:center;
	margin:auto;
}

table.wiki td, table.wiki th,
table.list td, table.list th,
table.gallery td, table.gallery th
	{ padding:2px; border:1px solid #88a; }

table.wiki caption, table.list caption, table.gallery caption {
	line-height:1.1em;
/*	margin: 2px; --> Firefox bug? If we use {| class="lista" align="center" with a caption, it appears aligned to the left, regardless of whether the table is in the center. Using padding doesn't work. */
	padding:5px 2px;
}

/* change color on mouse hover */
table.list tr:hover { background:#f5f5dc; color:#000; }
table.highlighted tr:hover { background:#f5f5dc; color:#000; }

/** Removal for the headers **/
table.list tr.header:hover { background:#ccf; color:#000; }
table.highlighted tr.header:hover { background:#ccf; color:#000; }

table.gallery tr.header th { width:105px; }

table.group {
	border-collapse: collapse;
}
table.group td, table.group th {
	border: 1px solid #C0C0C0;
	padding: 2px;
}
table.group tr.header, table.group tr.header:nth-child(odd), table.group tr.header:nth-child(even) {
	background-color: #7cc666;
	color: white;
}
table.bandas tr:nth-child(odd) {
	background-color: #F1F4F8;
}

/*** Navigation templates ***/
/** horizontal **/
.hnav {
	border:1px solid #aaa;
	border-spacing:0;
	font-size:90%;
	clear:both;
	margin:0.5em auto;
	padding:0.5em;
	text-align:center;
}

table.hnav th, table.hnav td {
	padding-left:.3em;
	padding-right:.3em;
}

table.hnav th {
	background:#dfdfff;
	color:#000;
}

table.hnav th + td {
	padding-left:.5em;
}

.hnav .caption, .hnav .caption th, .hnav .header, .hnav .header th {
	background:#ccccff;
	color:#000;
	text-align:center;
	padding:0.15em 1em;
	font-weight:bold;
	font-size:103%;
}

table.hnav.borders td {
	border-bottom: 1px solid #dfdfff;
}
table.hnav.borders tr:last-child > td {
	border-bottom: none;
}

/** Vertical **/

.vnav {
	float:right;
	text-align:center;
	color:black;
	background:white;
}

.vnav .title {
	font-size:200%;
	line-height:1.2em;
	font-weight:bold;
}

.vnav .vnav_data {
	overflow:hidden;
	width:100%; /* For IE: MUST specify width if overflow: hidden; ¬_¬U */
	background:white;
	color:black;
}

.vnav table {
	width:100%;
	border-collapse:collapse;
}

.vnav table.highlight tr:hover {background:#fff68f; color:#000; }
.vnav table.data tr {border-top:1px dotted #888;}
.vnav table.data tr:first-child {border-top:none;}

/* mobilefrontend: tables within tables that remain tables */
.content .vnav table, .content .infobox table {
	margin: auto;
	display: table;
}

.vnav .h {font-weight:bold;}
.infobox .h {
	font-weight:bold;
	text-align:center;
	padding: 1px;
}
.infobox table.data {
	width: 100%;
}
.infobox table.data th {
	text-align:right;
	padding-right:5px;
}
.infobox table.data td {
	text-align:left;
}

/* Table emulation with div (subdivision of cells within another cell) */
.emu-row {
	display:flex;
	justify-content: space-around;
	align-items:center;
	border-bottom: 1px solid #C0C0C0;
}
.emu-row:last-child {
	margin-bottom:-1px;
}
.emu-row > .emu-cell {
	display:inline-block;
}
.emu-row > .emu-cell:first-child {
	border-right: 1px solid #C0C0C0;
}

/* general margin table emulation with background color border */
.center_margin {
	padding: 1px;
}
.center_margin .cnt {
	margin: 1px;
}
.center_margin .cnt {
	background-color: #fff;
}

/* Padding general */
.center_padding .cnt {
	padding: 2px;
}

/* center text */
.center-text {
  text-align: center;
}

/* Vertical centered div emulating the vertical-align of a cell with flex */
.centered-vertical {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* border-box general */
.border-box * {
	box-sizing: border-box;
}

/* Background associated with Pokémon types */
.type	{color:#000;}
.type1-Normal .type {background:#ddccaa; border-color:#C4B597;} h1.type1-Normal {border-color:#C4B597 !important;}
.type1-Water .type {background:#b0e2ff; border-color:#9ECBE6;} h1.type1-Water {border-color:#9ECBE6 !important;}
.type1-Bug .type {background:#99cc33; border-color:#86B32D;} h1.type1-Bug {border-color:#86B32D !important;}
.type1-Electric .type {background:#ffd700; border-color:#E6C100;} h1.type1-Electric {border-color:#E6C100 !important;}
.type1-Fire .type {background:#ff7f00; border-color:#D96C00;} h1.type1-Fire {border-color:#D96C00 !important;}
.type1-Fighting .type {background:#ff6a6a; border-color:#E65F5F;} h1.type1-Fighting {border-color:#E65F5F !important;}
.type1-Flying .type {background:#baaaff; border-color:#a99be6;} h1.type1-Flying {border-color:#a99be6 !important;}
.type1-Grass .type {background:#99ff66; border-color:#82D957;} h1.type1-Grass {border-color:#82D957 !important;}
.type1-Steel .type {background:#cccccc; border-color:#B3B3B3;} h1.type1-Steel {border-color:#B3B3B3 !important;}
.type1-Dragon .type {background:#ab82ff; border-color:#916ED9;} h1.type1-Dragon {border-color:#916ED9 !important;}
.type1-Ghost .type {background:#778899; border-color:#637180;} h1.type1-Ghost {border-color:#637180 !important;}
.type1-Ice .type {background:#add8e6; border-color:#A3CCD9;} h1.type1-Ice {border-color:#A3CCD9 !important;}
.type1-Psychic .type {background:#ffb5c5; border-color:#E6A3B1;} h1.type1-Psychic {border-color:#E6A3B1 !important;}
.type1-Rock .type {background:#cd853f; border-color:#B37437;} h1.type1-Rock {border-color:#B37437 !important;}
.type1-Dark .type {background:#a9a9a9; border-color:#8F8F8F;} h1.type1-Dark {border-color:#8F8F8F !important;}
.type1-Ground .type {background:#deb887; border-color:#C4A377;} h1.type1-Ground {border-color:#C4A377 !important;}
.type1-Poison .type {background:#cc88bb; border-color:#b078a1;} h1.type1-Poison {border-color:#9A75E6 !important;}
.type1-Fairy .type {background:#ffb0ff; border-color:#E79FE7;} h1.type1-Fairy {border-color:#E79FE7 !important;}
.type1-Dark .type {background:#775577;}
.type1-Unknown .type {background:#68a090;}

/* internal box */
.rbox .rboxint {padding:4px;}/* Wide border */
.rbox .rboxint .xtop b, .rbox .rboxint .xbottom b {
	background:white;
	color:black;
}

/*** [[Template:Pokémon move infobox]] ***/
div.move_infobox {width:16em;}
div.move_infobox table.data th {text-align:right;}
div.move_infobox .effect .h, .move_infobox .gen3 .h, .move_infobox .gen4 .h {background:#dcdcdc; color:#000;}
div.move_infobox .effect table td {padding:0 1em;}

/* Collapsible template */
span.collapsible-ctrl {float:right; font-weight:normal; font-size:90%; padding:0 0.5em; cursor:pointer;}
table.hnav.collapsible .caption th .collapsible-ctrl, table.hnav.collapsible .header th .collapsible-ctrl {margin-right:-1em;}
table.collapsible {display: table !important;}

/* Plantilla:SVG activo */
.svg-enabled { display:none; }
/* Estilos de [[Template:Browser]] */
#browser {
	font-size:90%;
	position:absolute;/*B/C, pending removal*/
	left:1em;
	top:0.4em;
	color:#888888;
}
.mw-indicator > #browser {
	position: static;
}
#mw-indicator-aa-0-browser {
	position: absolute;
	left: 1em;
}

body.ns-10.action_view #browser { display:none }

#browser a { color:#0052A3; }
#browser a:hover { color:#008000; text-decoration:none; }

/* Responsive design of some divs with fixed width */
@media only screen and (max-width: 720px) {
    .vnav {
    	width: 100% !important;
		float: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
    .small-clear {
    	clear:both;
    }
}

/* Horizontal alignment of gallery images */
body.ns-0 ul.gallery {
    display: -webkit-box;
    overflow-x: auto;
}
body.ns-0 li.gallerybox {
    display: -webkit-box;
}

/* Tabber titles */
.tabbertab:Before {
    content: attr(title);
    display: block;
    font-weight: bold;
    margin-top: 2em;
}

/* If tablemanager is enabled, do not make images small */
.content .tablemanager-table a > img {
    max-width: none !important;
}

/* Forcing 100% width in tables like tcgmov*/
.content .mobilewidth {
    width: 100% !important;
}

/* Flexible box */
.flexible_box {
	display: flex; 
	flex-flow: row wrap;
	justify-content:center;
	margin:auto; 
}

/* mw-collapsible, hide custom toggle because collapsibles don't work on mobile */
span[class^="mw-customtoggle-"] {
  display: none;
}

@media only screen and (max-width: 720px) {
	/* Flexible table */
	.tfx, .tfx > tbody, .tfx > tbody > tr > th, .tfx > tbody > tr > td {
		display:block;  
	}
	.tfx .tfx-hid {
		display: none;
	}
	.tfx > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.tfx > tbody > tr > th, .tfx > tbody > tr > td {
		flex: 1;
	}
	.tfx .tfx-fw {
		box-sizing: border-box;
		flex: 1 0 100%;
		max-width: 100%;
	}
	
	/* Images in float without border, we remove the float */
	.content .floatright {
		float: none;
		margin: auto;
		text-align: center;
	}
	
	/* Mathematical formulas are images and cannot be scrolled. */
	.mwe-math-element {
		display: inline-block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* footer */
.read-more-container {
    border-bottom: 1px solid #c8ccd1;
    padding-bottom: 1em;
}

/* header */
header.header-container.header-chrome {
	background: #90CD44;
}

.header .branding-box {
	width:13em;
	background: #90CD44 url() no-repeat left center;
	background: #90CD44 url() no-repeat left center/60px 60px;
}
.branding-box > a > span {
	display: inline-block;
	height: 2em;
	width: 80%;
	text-indent: -9999px;
}

.branding-box > a::before {
	content: "Piklodex.com";
	position: absolute;
	font-size: 25px;
	top: 12px;
	left: 55px;
}

abbr[title], acronym[title] {
    text-decoration: dotted underline;
}

/* evolution table */
table.evolution {
	text-align:center;
	margin:1em auto;
	border:1px solid #e0e0e0;
	font-size:smaller;
	line-height:1.4em;
	background:#fff;
	color:#000;
}
table.evolution td {padding:0.2em 1em 0.2em; vertical-align:bottom;}

table.evolution td.arrow {
	background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTAiIGhlaWdodD0iMjgiPjxwYXRoIHN0eWxlPSJmaWxsOiNkZGQiIGQ9Im0gMCw2LjUgMzMyLDAgMCwtNi41IDE4LDE0IC0xOCwxNCAwLC02LjUgLTMzMiwwIHoiIC8+PC9zdmc+') no-repeat right center;
	color:#000;
	height:30px;
	padding:0 1.5em;
	font-size:larger;
	vertical-align:middle;
}

/* Because tipsy removes the title and replaces it with original-title, we add it for these cases */
abbr[original-title],
.explain[original-title] {
	border-bottom:0;
	text-decoration:underline dotted
}

/* Black border & cell tables */
table.table, table.table {background:#fff;margin:1em 0;border-collapse:collapse;color:black}
table.table > * > tr > td, table.table > * > tr > th, table.table > * > tr > td, table.table > * > tr > th {border:1pt solid #000;padding:0.2em 0.4em}
/* </pre> */