recursal/Fanatic-Fandom huggingface dataset:
Themes/LotRF/theme2.css

/\*

```
\*/
.portable-infobox a {
 color:#337800;
}

.portable-infobox {
 background:#f0f0f0;
 color:#000;
 border-bottom: 20px solid #B87333;
 border-radius: 0 0 5px 5px;
}

.portable-infobox .pi-title {
 background-color: #B87333;
 background-image: -moz-linear-gradient(top,#964E02 35%,#B87333 65%);
 background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,#964E02),color-stop(65%,#B87333));
 background-image: -o-linear-gradient(top,#964E02 35%,#B87333 65%);
 background-image: -ms-linear-gradient(top,#964E02 35%,#B87333 65%);
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #B87333;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#F5F5DC;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header,
.portable-infobox .pi-title {
 background-color: #B87333;
}

.portable-infobox .pi-navigation {
 background-color: #e7f4d2;
}

.portable-infobox .pi-navigation,
.portable-infobox .pi-data {
 border: 1px solid #808080;
}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Orientation

**Orientation** usually refers to the typical height and width of the screen when viewing a web page. The traditional variants are *portrait*, where the screen is usually taller than wide, or *landscape*, where the screen is wider than it is tall. If the browser window size is adjustable, the orientation of the screen may be irrelevant and the aspect ratio (ratio if width to height) is what's important.

Most desktop and laptop screens have fixed landscape-style orientation and most mobile devices will dynamically switch the orientation between a default of portrait and landscape when turned on its side (although some mobile devices are traditionally used in landscape mode most of the time).

Portability should support nearly any reasonable aspect ratio or screen orientation.
Infobox

An infobox is a box containing a summary of an article.

## Description

Most infoboxes are created with <div> tags, <table> tags or wikitext markup, or some other way (Portable Infoboxes) to put something in a box with info about a page topic that usually floats at the upper right of the page.

## Types

On this wiki, we classify different types of Infoboxes and apply certain terms that you may become familiar with:

* Portable Infoboxes - The radically different and trendy newcomer. See tips, frequently asked questions (FAQ), and benefits of using them.
* Classic Infoboxes - Built (often from the Fandom starter kit) with tables and/or divs, inline styling, and parserfunctions. Moderately easy to automatically convert to Portable Infoboxes.
* "Legacy" Infoboxes - Built (often from scratch) with tables and/or divs, inline styling, and parserfunctions. Older in origin, and moderately difficult to automatically convert to Portable Infoboxes.
* "Kitchen Sink" - Used to describe a feature-heavy infobox design that has functions well beyond the typical.
* "Death Star" - A massive feat of engineering (often 200kb+ of code) with a lot of power. Takes an entire alliance to attack, can still be killed with a single lucky shot.

## Designing

  *Main article: Infobox/Basics*
There are several ways to design infoboxes. They can be created using JavaScript, HTML, CSS, and Lua. Each has its specific pros and cons. For example, some JavaScript cannot be rendered on a mobile device due to the hardware limitations or features. The type of infobox being used will mainly depend on the flexibility the user requires.

## Converting

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
An infobox can be converted from one to another to gain certain benefits, such as portability or parsing ability, but generally non-Lua or non-portable infoboxes will be converted to Lua or Portable Infoboxes.
Themes/Pyre/theme.css

/\*

```
\*/
.pi-theme-pyre {
 background:#000000;
 font-size: 84%;
 color:#FFFFFF;
 border-radius: 0 0 10px 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 margin-left:10px;
 margin-bottom:10px;
 }
.pi-theme-pyre a {
 color: #2a00fc;
 }
.pi-theme-pyre .pi-secondary-background {
 background:#000000;
 }
.pi-theme-pyre .pi-title {
 background:linear-gradient(#91683c, #0217ff);
 text-shadow: 0 0 10px #1c1c1c;
 font-weight: bold;
 text-align: center;
 }
.pi-theme-pyre .pi-header {
 background:linear-gradient(#91683c, #0217ff);
 }
.pi-theme-pyre .pi-horizontal-group .pi-horizontal-group-item {
 vertical-align: middle;
 }
.pi-theme-pyre .pi-border-color {
 border-color: #365ac4;
 }
.pi-theme-pyre .pi-image-thumbnail {
 max-width:200px;
 height:auto;
 }
/\*

```
\*//\*Category:Stylesheets/\*/\*\*/
Themes/Rush/theme.css

/\*

```
\*/
.portable-infobox a {
 color:#D4D5D5;
}

.portable-infobox {
 background:#262626;
 color:#D4D5D5;
 border-bottom: 20px solid #f26100;
 border-radius: 7px 7px 7px 7px;
 -webkit-box-shadow:0 0 10px 0 rgb(0,0,0);
 -moz-box-shadow:0 0 10px 0 rgb(0,0,0);
 box-shadow:0 0 10px 0 rgb(0,0,0);
}

.portable-infobox .pi-title {
 background-color: #f26100;
 border-radius: 7px 7px 0 0;
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #f26100;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#F5F5DC;
 text-align: center;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header,
.portable-infobox .pi-title {
 background-color: #f26100;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group {
 border-color:#808080;
}

.portable-infobox .pi-navigation {
 background-color: #262626;
}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Themes/Oceanscollection/theme.css

/\*

```
\*/
.pi-theme-oceanscollection {
 background:#fff;
 color:#3a3a3a;
 border-top:1px solid #AAA;
 border-left:1px solid #AAA;
 border-right:1px solid #AAA;
}

.pi-theme-oceanscollection .pi-title,
.pi-theme-oceanscollection .pi-header {
 text-align: center;
}

.pi-theme-oceanscollection .pi-title {
 background-color: #B57222;
 color:#fff;
}

.pi-theme-oceanscollection .pi-header {
 background-color: #ccc6b2;
}

.pi-theme-oceanscollection .pi-secondary-background {
 background-color: #ccc6b2;
}

.pi-theme-oceanscollection .pi-header,
.pi-theme-oceanscollection .pi-navigation {
 background-color: #ccc6b2;
 color:#000;
}

.pi-theme-oceanscollection .pi-data-label {
 font-weight: bold;
 font-size: 82%;
}

.pi-theme-oceanscollection .pi-data-value {
 font-size: 82%;
}

.pi-theme-oceanscollection .pi-navigation,
.pi-theme-oceanscollection .pi-data {
 border-bottom: 1px solid #AAA;
}

.pi-theme-oceanscollection .pi-group,
.pi-theme-oceanscollection .pi-data:last-of-type + .pi-group,
.pi-theme-oceanscollection .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
\*/

```
\*/
Fandom app

The **Fandom app** is a mobile app that uses th Mercury skin and various integrated app features to present Fandom wikis on mobile devices.

## How can the app impact my wiki?

Research has shown that the amount of people who view and go on wiki grow everyday and with this, users are starting to view and edit on their mobile devices. Now, over 50% of people view Fandom and Fandom's content on mobile devices. The Fandom app makes it more simple by allowing users to get to a wiki with just a click from their home screens. This also allows easier content loading, mobility, etc.

## See also

* w:Help:Fandom app
* Mobile
* Skin

## External links

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
* Wikia, Inc. at iTunes store at Apple.com
* FANDOM powered by Wikia at Google Play store
Skytower

Vault'un bulunduğu vadideki en yüksek noktadaki bir yapıdır. Tırmanması oldukça güç ve bölgeye hakim bir noktada konumlanmıştır. An itibariyle Flatheads kontrolündedir.

Vault'dan çıkan bir grup tarafından geçici olarak kontrol altına alınmış ve bir radyo güçlendiricisi çalışır hale getirilmiştir. Oluşturulan bağlantı sayesinde Vault 46'nın, bu tesis ile dış dünya ile radyo bağlantısı sağlaması gerçekleşmiştir.
Themes/GOTF/theme.css

/\*

```
\*/
.portable-infobox {
 -webkit-box-shadow:0 0 10px 0 rgb(0,0,0);
 -moz-box-shadow:0 0 10px 0 rgb(0,0,0);
 box-shadow:0 0 10px 0 rgb(0,0,0);
 border-bottom: 20px solid #891100;
 border-radius: 5px 5px 5px 5px;
 color: #D5D4D4;
}

.portable-infobox .pi-title {
 border-radius: 5px 5px 0 0;
 background-image: -o-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#bc1700),color-stop(100%,#891100));
 background-image: -ms-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#bc1700),color-stop(100%,#891100));
 background-image: -moz-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#bc1700),color-stop(100%,#891100));
 background-image: -webkit-gradient(linear,0% 0%,0% 40%,color-stop(0%,#bc1700),color-stop(100%,#891100));
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #891100;
 border-top: 1px solid #404040;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header,
.portable-infobox .pi-title {
 background-color: #891100;
}

.portable-infobox,
.portable-infobox .pi-navigation {
 background-color: #2a2929;
}

.pi-navigation {
 border-top: 1px solid #404040;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Themes/Disney/theme.css

//

```
.pi-theme-disney {
 background: #fff;
 border: 1px solid #2c2c68;
 color: black;
 font-size: smaller;
 line-height: 1.5;
 width: 258px;
}
.pi-theme-disney .pi-item-spacing {
 padding: 4px;
}
.pi-theme-disney .pi-title {
 background-color: #229dfa;
 box-shadow: 0 -3px 7px 0 #002ed1 inset, 0 -11px 9px 4px #0070f6 inset, 0 3px 3px 0 #0070f6 inset, 0 4px 10px 1px #c6ecff inset, 0 4px 5px 0 #0063ff inset;
 color: #fff;
 font-weight: 700;
 text-align: center;
}
.pi-theme-disney .pi-title {
 font-size: larger;
 line-height: inherit;
}
.pi-theme-disney .pi-image {
 width: 258px;
}
.pi-theme-disney .pi-header {
 background-color: #000bdf;
 box-shadow: 0 -3px 7px 0 #000049 inset, 0 -11px 9px 4px #0001cb inset, 0 3px 3px 0 #0001cb inset, 0 4px 10px 1px #339bfc inset, 0 -32px 28px -17px white inset;
 color: #fff;
 text-align: center;
}
.pi-theme-disney .pi-data {
 border-bottom: 1px solid #999;
 border-top: 1px solid #999;
}
.pi-theme-disney .pi-data-label {
 flex-basis: 70px!important;
}
//

```
/\*\*/
How to fix portability issues

Some causes of portability issues include classic infoboxes, main pages with complex visual effects, complicated tables, problematic Javascript and non-portable templates. Some of these can be fixed by following suggested recommendations and using the Portability Checklist.

## I want to make my infoboxes portable!

**Help pages**

* w:Help:Infoboxes — An overview of how to build new infoboxes
* w:Help:Infobox migration — How to migrate existing infoboxes to the new markup
* w:Help:Infoboxes/Tags — Advanced help on infoboxes
* w:Help:Infoboxes/CSS — Advanced help on how to theme your infobox with CSS

**Notable discussions**

* Community Central: Infoboxes are evolving - can you help guide their progress?
* Community Central: Infobox Thread, continued!
* Community Central: Infobox Builder: share your feedback on the early version!

**Where to ask questions**

* Portability Hub: https://portability.fandom.com/f

## I want to make my main page portable!

The most straightforward way is to use the Curated Main Page tool.

**Help pages**

* w:Help:Mobile Main Page — An overview of how to set and manage your Main Page content

**Notable discussions**

* Community Central: Introducing Curated Main Pages

**Where to ask questions**

* Portability Hub: https://portability.fandom.com/f

## I want to make my page content portable!

**Help pages**

* w:Help:Wikitext best practices

Notable discussions
* Community Central:
	+ Fandom's portability progress check

* Portability Hub:
	+ November 19th Office Hours

## I want to organize my templates!

**Help pages**

* w:Help:Template types

**Notable discussions**

* Community Central:
	+ Template Types: A Smarter Categorization System

## I want to make my tables portable!

**Help pages**

* w:Help:Avoiding nested tables

**Notable discussions**

**Other help**

* Tables
Themes/Criminal Case/theme.css

/\*

```
 \*/
body.page-Themes\_Criminal\_Case{
 background: #fde url("https://screenshots.en.sftcdn.net/en/scrn/69706000/69706906/55477a5bba44bscr\_1430423821-700x437.png");
}
.portable-infobox {
 width: 255px !important;
 background: #fff;
 border: 2px solid #fff !important;
}
.portable-infobox .pi-title {
 font-size: 15px;
 background-color: #0000FF;
 margin: 4px 2px !important;
 font-weight: 900 !important;
 text-align: center;
 color: #fff;
}
.pi-image {
 border: #0000FF solid 1px;
 margin: 2px;
 line-height: 130%;
}
img.pi-image-thumbnail {
 max-width: 100%;
}
.portable-infobox .pi-secondary-background{
 background-color: ##000000;
}
.portable-infobox .pi-header {
 padding: 2px 0;
 margin: 0 2px 2px 2px;
 font-weight: bold;
 text-align: center;
 background-color: #000000;
 color: #fff;
}
.portable-infobox .pi-item-spacing {
 padding: 0 2px;
}
.pi-border-color {
 border-color: transparent;
}
.pi-data .pi-data-label {
 font-weight: bold;
 text-align: right;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 /\*flex-basis: auto;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;\*/
 line-height: 140%;
 background-color: #000000;
 color: #fff;
 width: 40%;
 padding-right: 10px !important;
}
.pi-data .pi-data-value {
 text-align: left;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 line-height: 140%;
 background: #fff;
 width: 60%;
}
.pi-data-value: last-child {
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 width: 100% !important;
 text-align: left;
}
div.pi-data-value.pi-font img {
 display: inline !important;
}
.portable-infobox .pi-data-label div {
background-color: ##0000FF !important;
color: White !important;
}

```
Themes/Whiteglow/theme.css

/\*

```
\*/
.pi-theme-whiteglow {
 border-radius:0;
 color:#3A3A3A;
 margin-right:3px;
 background-color:#EEEEEE;
 background-color:rgba(255,255,255,1);
 box-shadow: 0 0 4px 2px #CFCFCF;
 -moz-box-shadow: 0 0 4px 2px #CFCFCF;
 -webkit-box-shadow: 0 0 3px 3px #CFCFCF;
}

.pi-theme-whiteglow .pi-image {
 background-color:#EEEEEE;
}

.pi-theme-whiteglow .pi-header, .pi-theme-whiteglow .pi-title, .pi-theme-whiteglow .pi-navigation {
 font-family:Meiryo UI;
 border-radius:0;
 text-align:center;
 background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 100%, rgba(255,255,255,1) 100%);
 background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%, rgba(237,237,237,1) 100%,rgba(255,255,255,1) 100%);
 background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%, rgba(237,237,237,1) 100%,rgba(255,255,255,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0);
 color:#3A3A3A;
}

.pi-theme-whiteglow .pi-data-label, .pi-theme-whiteglow .pi-data-value {
 font-family:Meiryo UI;
}

.pi-theme-whiteglow a {
 color:black;
}

.pi-theme-whiteglow .pi-border-color {
 background-color:#EEEEEE;
 border:0;
}
/\*

```
 \*/
Getting the buttons you want on collapsible groups

By now, many of you probably know how to get a collapsible section in an infobox.

```
<group collapse=“closed”>
...  data ...
</group>

```

Easy, right? Sure. But the thing is that you get default arrows to indicate collapsed and expanded states. And maybe that’s just not what you want. Maybe your community has grown strongly attached to the [less]/[more] buttons that come with the old CSS collapsible classes.

So how do you get ‘em back?

Well, first you have to realize that the arrows aren’t really arrows. They’re two sides of a bordered square that’s been rotated 45 degrees. Take another, hard look. See it?

Once you see **that**, you’re halfway to a solution!

Take a look at some of what’s going on at the Avatar Wiki:

```
.pi-collapse-closed .pi-header::after {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 content:'[more]'!important;
 font-size:10px;
 color:#fff;
 border-color:transparent;
 border-width:0;
 width:35px;
 right:3px;
 top:40%;
}
.pi-collapse .pi-header:after {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 color:#fff;
 content:'[hide]';
 font-size:10px;
 border-color:transparent;
 border-width:0;
 width:35px;
 right:3px;
 top:40%;
}

```

Rotate the arrow back to 0 degrees, make the border-color transparent, change the content to '[more]' for the collapse-closed state and '[hide]' for the plain collapsed state — and you’ll be almost there. But notice this little trick: you’ve also got to !important the [more] content on the closed state, or else the collapsed state of [hide] will always be present.

## See also

* Captions versus headers in portable infoboxes
* Flex-centering and portable infoboxes
* Styling horizontal groups
* Styling lists within portable infoboxes
Themes/FandomWikis/theme.css

/\*

```
\*/
.portable-infobox {
 border-bottom: 20px solid #404a57;
 border-radius: 0 0 5px 5px;
}

.portable-infobox .pi-title {
 border-radius: 5px 5px 5px 5px;
 background-image: -o-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#566374),color-stop(100%,#404a57));
 background-image: -ms-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#566374),color-stop(100%,#404a57));
 background-image: -moz-linear-gradient(linear,0% 0%,0% 40%,color-stop(0%,#566374),color-stop(100%,#404a57));
 background-image: -webkit-gradient(linear,0% 0%,0% 40%,color-stop(0%,#566374),color-stop(100%,#404a57));
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #404a57;
 border-top: 1px solid #404040;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#fff;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header,
.portable-infobox .pi-title {
 background-color: #404a57;
}

.portable-infobox,
.portable-infobox .pi-navigation {
 background-color: #f9f9f9;
}

.pi-navigation {
 border-top: 1px solid #404040;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Themes/Orange/theme.css

/\*

```
\*/
.pi-theme-orange {
 border: 2px solid #e65c00;
 border-radius: 8px;
}

.pi-theme-orange .pi-title {
 text-align: center;
 border-bottom: 1px solid #e65c00 !important;
}

.pi-theme-orange .pi-title, .pi-theme-orange .pi-header {
 background-color: #ff6600;
 color: #ffff1a;
 text-shadow: -1px -1px 3px, 1px 1px 3px;
}

.pi-theme-orange .pi-header {
 text-shadow: -1px -1px 5px, 1px 1px 5px;
}

.pi-theme-orange .pi-image, .pi-theme-orange .pi-image-collection-tabs {
 background-color: #ffa31a;
}

.pi-theme-orange .pi-tab-link {
 border-color: #e65c00 !important;
}

.pi-theme-orange ul.pi-image-collection-tabs li.current {
 background-color: #ff751a;
}

.pi-theme-orange .pi-caption {
 color: #cc5200;
}

.pi-theme-orange .pi-data {
 background-color: #ffa31a;
}

.pi-theme-orange .pi-data, .pi-theme-orange .pi-group {
 border: 0;
}

.pi-theme-orange .pi-data-label {
 color: #FFFFFF;
}

.pi-theme-orange .pi-font, .pi-theme-orange a, .pi-theme-orange a:visited {
 color: #000000;
}
/\*

```
\*/
Lua in Templates

Lua is a very versatile programming language that can be used to greatly enhance any template. There are mainly two ways to use Lua in infoboxes: using it to generate the whole infobox or simply generate a part of it. Lua is interpreted by an extension called Scribunto, the Fandom version of which is a mostly feature-complete fork of the Scribunto core. Lua code is organized inside modules, which reside in the Module namespace. A module can hold multiple functions and data tables.

## Lua-based infoboxes

  *Main article: Lua infoboxes*
An infobox can be created using Fandom's own InfoboxBuilder, which facilitates its creation, or by generating template or HTML code using Scribunto's libraries. InfoboxBuilder was developed as a user-friendly markup to avoid infobox crafters needing to learn Lua's syntax, and is considered feature-complete, though not currently under development. It, like Scribunto, is enabled by default on all wikis.

It may even be possible to interface the lua-based infoboxes and the portable infoboxes.

## Lua within infoboxes

Lua functions can be invoked within wikitext templates or by other modules. In fact, calling one module from another is one of the significant reasons to use Lua, as it is faster and more powerful than nested wikitext templates.

Within Portable Infoboxes, Lua functions can make it easier to format or parse text. At present, this is accomplished with invoke statements; future Portable syntax will accomplish the same effect natively inside the design.

## Data in Modules

A data module is a "technical" jargon for a place to store information in a way that machines can read them. Some of the benefits of this are:

* Separating data - This allows data to be easily input or re-used and makes it faster to process related information.
* Avoiding template limits - If a page is too complex it may not load at all, data modules may improve the performance of some pages (see Lua Templating/Converting)
* Improving page performance - as noted above.
* Re-use - data can be re-used in many pages in different ways.

## Examples

  *Main article: Lua modules*There are many ways to use modules in templates for things such as:

* Parsing information - Module:String
* Formatting and calculations - Global Modules/Formatnum
* Charts - Module:Chart

## See also

* Lua
* Help:Lua
* InfoboxBuilder at dev.wikia.com
Themes/Pinata/theme.css

/\*

```
\*/
/\* Theme for Pinata infoboxes \*/
.portable-infobox.pi-theme-pinata .pi-title { /\* Header/Title Color \*/
 background-color: #ff3e3d; /\* Primary Background Color \*/
 color: #ffffff; /\* Text Color of white \*/
}
.portable-infobox.pi-theme-pinata .pi-secondary-background { /\* Header/Title Color \*/
 background-color: #ff3e3d; /\* Primary Background Color \*/
 color: #ffffff; /\* Text Color of white \*/
}
.portable-infobox.pi-theme-pinata .pi-data { /\* Data Padding Removal \*/
 background-color: #F2EDE8; /\* Tertiary Background Color \*/
 padding: 0px 0px;
 vertical-align: middle; /\* Align the text vertically centered \*/
}
.portable-infobox.pi-theme-pinata .pi-data .pi-data-label { /\* Data Label Color \*/
 background-color: #ff6563; /\* Secondary Background Color \*/
 padding: 0px 0px;
 border: 10px solid #ff6563; /\* Add the border of the same color as the secondary background color \*/
}
.portable-infobox.pi-theme-pinata .pi-data .pi-data-value { /\* Data Value Color \*/
 background: #F2EDE8; /\* Tertiary Background Color \*/
 padding: 0px 0px;
 border: 10px solid #F2EDE8; /\* Add the border of the same color as the tertiary background color \*/
}
.portable-infobox.pi-theme-pinata .pi-image { /\* Image Background Color \*/
 background: #F2EDE8; /\* Tertiary Background Color \*/
}
.pi-theme-pinata .pi-data, .pi-theme-pinata .pi-group {
 border-bottom-width: 0;
}
/\*

```
\*/
Themes/Cardfight/theme.css

//

```
.pi-theme-cardfight {
 background-color: #5b92e5;
 border-radius: 10px;
 border: 2px solid #000;
 padding: 2px;
 text-align: center;
 width: 248px;
}
.pi-theme-cardfight .pi-item-spacing {
 padding: 1px;
}
.pi-theme-cardfight .pi-title {
 font-size: larger;
 font-weight: bold;
 line-height: inherit;
}
.pi-theme-cardfight .pi-group {
 background-color: #e7feff;
 border-radius: 10px;
 margin-top: 2px;
 padding: 1px;
}
.pi-theme-cardfight .pi-header {
 background: transparent;
 color: inherit;
}
.pi-theme-cardfight .pi-data {
 align-items: center;
}
.pi-theme-cardfight .pi-data:not(:last-of-type) {
 border-bottom: 1px solid #aaa;
}
.pi-theme-cardfight .pi-data-label {
 flex-basis: 112px !important;
 text-align: right;
}
.pi-theme-cardfight > .pi-data .pi-data-value {
 background-color: #fff;
 border-radius: 8px;
 padding: 15px 3px 3px;
}
//

```
/\*\*/
Themes/Blood plus/theme.css

//

```
.pi-theme-blood .pi-item.pi-item-spacing.pi-title {
 color: #cccccc;
 text-align: center;
 font-family: 'High Tower Text';
 font-size: 150%;
 font-variant: small-caps;
 border-right: 1px solid #182d36;
 border-bottom: 1px solid #182d36;
}

.pi-theme-blood {
 background-color: black;
 border-top-left-radius: 15px;
 box-shadow: 1px 1px 5px 2px #182d36;
 color: #cccccc;
}
.pi-theme-blood .pi-border-color {
 border-bottom: none;
}

.pi-theme-blood .pi-header {
 background: black;
 padding-top: 10px;
 border-bottom: 1px solid #182d36;
 line-height: 1.2em;
 -moz-box-shadow: 0 2px 2px 0 #182d36;
 -webkit-box-shadow: 0 2px 2px 0 #182d36;
 -html-box-shadow: 0 2px 2px 0 #182d36;
 -xhtml-box-shadow: 0 2px 2px 0 #182d36;
 box-shadow: 0 2px 2px 0 #182d36;
 color: #bbbbbb;
 font-size: 120%;
 font-weight: bold;
}
//

```
/\*\*/
Portable Infoboxes/Syntax

A comprehensive reference to the Portable Infoboxes syntax.

## Image collections

### Tabbers

Unlike regular infoboxes which don't display tabbers properly on mobile devices, one can display images in tabs using the code below:

## Animals

* monkeys
* rabbits

```
<infobox>
 <header>Animals</header>
 <image>
 <default>
 <tabber>
 </tabber>
 </default>
 </image>
</infobox>

```

### Galleries

Galleries provide a way to add both images and video to an article. This functionality is also available in infoboxes:

## Animals

* Monkeys
* Rabbits

```
<infobox>
 <header>Animals</header>
 <image>
 <default>
 <gallery>
 Example.png|Monkeys
 Information_person.jpg|Rabbits
 </gallery>
 </default>
 </image>
</infobox>

```

### Alternate syntax

One way to have a variable number of parameters without using the gallery or tabber tag in a page is to use the
`#tag` parser function:

```
<!--Template:Infobox images -->
<infobox>
 <header>Animals</header>
 <image source="image">
 <caption source="caption" />
 <default>
 {{{image1|}}}{{!}}Image 1
 {{{image2|}}}{{!}}Image 2
 }}
 </default>
 </image>
</infobox>

```

The template can used by writing :

```
{{infobox images
}}

```

There are many other ways to do this using separate Wikitext or Lua templates.

### Sample CSS

You can change the look of the tabs using CSS.

```
.pi-image-collection {
 margin-top: 0.5em;
 text-align: center;
}

ul.pi-image-collection-tabs {
 border-bottom: 1px solid #778;
 font: bold 12px Verdana,sans-serif;
 list-style: none outside none;
 margin: 0 0 2px;
 overflow: visible;
 padding: 0 0 4px;
 text-align: center;
}

ul.pi-image-collection-tabs li.current {
 background: none repeat scroll 0 0 #FFF;
 border-bottom: 1px solid #FFF;
 font-weight: bold;
}

ul.pi-image-collection-tabs li.current:hover {
 background-color: #FFF;
 border-bottom: 1px solid white;
}

ul.pi-image-collection-tabs li {
 -moz-border-bottom-colors: none;
 -moz-border-left-colors: none;
 -moz-border-right-colors: none;
 -moz-border-top-colors: none;
 display: inline;
 line-height: normal;
 list-style: none outside none;
 background: none repeat scroll 0 0 #DDE;
 border-color: #778 #778 -moz-use-text-color;
 border-image: none;
 border-style: solid solid none;
 border-width: 1px;
 color: #448;
 margin: 0 0 0 3px;
 padding: 3px 0.5em;
 text-decoration: none;
}

ul.pi-image-collection-tabs li:hover {
 background: none repeat scroll 0 0 #AAE;
 border-color: #227;
 color: #000;
}

.pi-tab-link.pi-item-spacing {
 padding: 3px 5px 4px;
}

/\* Change background for transparent images \*/
.pi-image-collection-tab-content {
 background-color: #DDE;
}

```
Themes/Pinata

## Viva Piñata Piñata

### Authors

Matthew CenanceAuthor inspected code from the Plants vs. Zombies Heroes Plants infobox theme

Theme inspired by the old non-portable theme of the infoboxes found on the Viva Piñata Wiki. The main (title and header) background color is `#80bf41`. The data value label background color is `#a7d37c` and the data value background color is `#F2EDE8`.

*You don't have to add attribution but adding it is a way of saying thank to the author.*
VisualEditor

**VisualEditor** is a feature that was implemented to allow users edit an article quickly, easily, and more efficiently. The interface will automatically updates and reflect how the article will look when published. This is currently the most common editor on Fandom and the one that is set by default when you edit.

## What's the difference between classic editor and visual editor?

Unlike the classic editor (also known as the Rich Text Editor (RTE) or Source Editor) does not constantly reload the entire page in your browser and does not give you a visual of what the article will look like when it is published. The classic editor is simply a page where you can implement wikitext.

## How does the visual editor work with portability?

The visual editor only shows what an article would look like if it was published on a desktop screen. Although this is a very useful feature, when it comes to content portability, it is not.
Themes/Bleach/theme.css

/\*

```
\*/
/\*--------------------------------
 Bleach style infobox
 ------------------------------------\*/
.pi-theme-bleach {
 color: #AAB1B7;
 background-color: rgb(229, 240, 247);
 background-color: rgba(229, 240, 247, 0);
}
.pi-theme-bleach .pi-item-spacing {
 padding: 5px;
}
.pi-theme-bleach .pi-border-color {
 border-color: rgb(200, 54, 54);
 border-color: rgba(191, 218, 235, 0);
}
.pi-theme-bleach .pi-data-label {
 background: #CC8899;
 background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CC8899), color-stop(75%, #35171E));
 background-image: -webkit-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CC8899), color-stop(75%, #35171E));
 background-image: -moz-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -o-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -ms-linear-gradient(top, #CC8899 25%, #35171E 75%);
 width: 100%;
}
.pi-theme-bleach .pi-title, .pi-header, .pi-navigation {
 background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CC8899), color-stop(75%, #35171E));
 background-image: -webkit-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CC8899), color-stop(75%, #35171E));
 background-image: -moz-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -o-linear-gradient(top, #CC8899 25%, #35171E 75%);
 background-image: -ms-linear-gradient(top, #CC8899 25%, #35171E 75%);
 border-radius: 2ex;
}
/\*

```
\*/
Example communities

We showed you how you can find and fix portability issues on your wiki, convert your infoboxes to a portable markup, fill your mobile main page with curated content - but maybe you're just curious how other communities did it?

Here you can find some examples from wikis that have already started to move towards portability that may help and inspire you to do the same for your own community.

## Portable Infoboxes

### Riordan wiki

* Portable infobox on an article page
* Portable infobox template
* CSS Infobox styling

Portable Infobox on desktopPortable Infobox on mobile
#### **Using theme-source**

The Riordan Wiki has some nice examples of character infoboxes that use a changing `theme-source` based on the `pantheon` parameter to change the color scheme of the infobox.

* Percy Jackson - `|pantheon = Greek`
* Amos Kane - `|pantheon = Egyptian`

### Indiana Jones wiki

* Portable infobox on an article page
* Portable infobox template
* CSS Infobox styling

Portable infobox on desktopPortable infobox on mobile
## Curated main page

* **Wookieepedia's main page on mobile**

(*Note: You'll have to look at it on a mobile device such as a smartphone to see or append "?useskin=wikiamobile" to the URL in your desktop browser.*)

Wookieepedia's main page on mobile
Themes/Blue/theme.css

/\*

```
\*/
.pi-theme-blue {
 color: #FFFFFF;
 background: linear-gradient(to left, #7777DD, #000099);
 border: 2px ridge #000080;
 border-radius: 3px;
}

.pi-theme-blue a {
 color: #FFFF1A;
}

.pi-theme-blue a:visited {
 color: #FFD11A;
}

.pi-theme-blue .pi-secondary-background {
 background-color: #000066;
}

.pi-theme-blue .pi-image-collection, .pi-theme-blue .pi-image {
 background-color: #9999FF;
}

.pi-theme-blue .pi-caption {
 color: #00004D;
}

.pi-theme-blue .pi-item {
 border-bottom: 1px solid #00004D;
}

.pi-theme-blue .pi-title {
 background: linear-gradient(to bottom, #0000B3, #4D4DFF);
 text-align: center;
 font-weight: bold;
}

.pi-theme-blue .pi-tab-link {
 border-color: #00004D;
}

.pi-theme-blue .pi-tab-link.pi-item-spacing.current {
 background-color: #000080;
}

.pi-theme-blue .pi-horizontal-group-item:not(:first-child) {
 border-color: #00004D;
 border-width: 0 0 0 1px;
}
/\*

```
\*/
Infobox/Converting

An infobox can be converted from one type to another. The most common conversions are either from a classic infobox to Lua or Portable Infoboxes.

## Converting to Lua

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
There are mainly two ways to convert a classic or portable infobox to a Lua-based infobox. One can either use the InfoboxBuilder parser function or create modules that will construct the infoboxes based on either tables, HTML tags, or both.

## Converting to Portable infoboxes

  *Main page: Help:InfoboxMigration* The migration tool is an automated feature that helps convert a classic infobox to a Portable Infobox. However, the tool may not always migrate the original template correctly. In particular, infoboxes that make heavy use of JavaScript or parser functions may not always be migrated properly.

The tool also requires the user to accept the draft it creates and allows manual changes to be made before it replaces the original infobox. Lua-based infoboxes cannot currently be converted into Portable infoboxes using this tool.

## References

1. ↑ http://community.wikia.com/wiki/Thread:841717
Presentation

**Presentation** is how a page is "presented" or displayed to the user. It includes colors, fonts, styles, and all the pieces and parts that you can see. Some people call this "rendering".

Presentation can be distinguished from the data, code, or hidden structures that allow a browser or other rendering program to construct and show the page. Data is all the stats like character name, level, affiliations, appearances, etc. that can be shown in various ways like bulleted lists, infoboxes, tables, etc. How the data is shown is the presentation. Data can also be underlying values that represent the styling of the page like background color, border thickness, colors of things, font faces, and sizes of boxes. HTML or wikitext can also be considered data.

## Data vs. Presentation

A key concept in portability is separating the data from the presentation. What this means is taking various pieces of data and displaying them differently as needed based on the device (usually desktop vs. mobile), screen orientation or size, and with consideration to UI interaction (usually mouse vs. touch screen). A big goal for portability is to make the presentation flexible using mostly the same underlying data.
Wikitext

**Wikitext** is the special markup language for wikis that is seen in source editor. Fandom uses the MediaWiki engine, so it largely shares the same wikitext code support as Wikipedia. This coding can be used to add photos, tables, bold styles, links, and other many other visual changes and is usually manipulated in a source editor.

## How to use

It's not necessary to know how to use wikitext in order to edit a page due to the new VisualEditor or source editor. However, users who learn it may appreciate the vast amount of additional control they have over page content.

Wikitext can be used via source editor in either editor. To access an article's wikitext:

* VisualEditor: click the menu button towards the upper and choose Source Editor.

## How does this benefit portability?

Knowing wikitext allows you to go much further (definitely when it comes to personalization, effects, text changes, and visualization). It also can enhance your portable content and often times allow you to do more than you would do in a visual editor.

## See also

* w:Help:Wikitext
* w:Help:Galleries, Slideshows, and Sliders/wikitext
* w:Help:Main page column tags
* w:Help:Templates
* w:Help:Infoboxes
* w:Help:Tables
* w:Help:Magic words
* w:Help:Source editor
* w:Help:VisualEditor
Themes/Star wars/theme.css

//

```
.pi-theme-starwars {
 background-color: #f0f0f0;
 color: #3a3a3a;
 font-size: 0.75em;
 line-height: 1.5;
 width: 250px;
}
.pi-theme-starwars .pi-title {
 background-color: #a00;
 color: #fff;
 padding: 0;
 text-align: center;
}
.pi-theme-starwars .pi-title {
 font-size: larger;
 font-weight: bold;
 line-height: inherit;
}
.pi-theme-starwars .pi-image {
 width: 250px;
}
.pi-theme-starwars .pi-header {
 background-color: #e55;
 color: inherit;
 padding: 4px;
}
.pi-theme-starwars .pi-data {
 align-items: center;
}
.pi-theme-starwars .pi-item-spacing {
 padding: 4px;
}
.pi-theme-starwars .pi-data:nth-child(even) {
 background-color: #f9f9f9;
}
.pi-theme-starwars .pi-data-label {
 flex-basis: 70px!important;
 font-weight: normal;
}
.pi-theme-starwars .pi-navigation {
 background-color: #a00;
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 font-weight: normal;
 padding: 0 0 4px;
 text-align: center;
}
.pi-theme-starwars .pi-navigation a {
 color: #fff;
}
//

```
/\*\*/

/\*Category:Stylesheets/\*/\*\*/
Resources

This serves as a hub to quickly obtain information on infobox design or implementation.

## General information

* How to fix portability issues
* Themes - styling different infoboxes
* Portable Infoboxes
	+ Portable Infoboxes/Tips and tricks
	+ Portable Infoboxes/FAQ
	+ Portable Infoboxes/Benefits

### Portability-related info

* Infobox - information about infoboxes
	+ Infobox/Types

## Portable Infobox related links on other wikis

* Dev wiki: PortableCSSPad
* Fanz of Lucy Worsley wiki: The Styling of a PortableInfobox
* Templates wiki: Infobox templates category

## Non-Fandom links related to portability

### CSS

* W3Schools CSS Tutorial
* CanIUse.com for checking CSS compatibility and support on browsers

### JS and CSS

* JQUery API reference
* W3Schools JQUery Selectors

### Wikitext validator

Wiva - A python based tool that checks wiki pages for valid wikitext, and recommends fixes to make the content portable, e.g. not using inline styling.
### De-tabling infoboxes

* De-tabling infoboxes - A proposal to de-table Wikipedia’s info-boxes .
Themes/Matrix/theme.css

/\*

```
\*/
.pi-theme-matrix {
 background: linear-gradient(to right bottom, #333333, #262626, #1A1A1A, #0D0D0D, #000000);
 color: #2AE600;
 position: relative;
 margin: 20px;
 border-radius: 4px;
 box-shadow: inset 2px 2px 1px #000000;
}

.pi-theme-matrix:before {
 position: absolute;
 z-index: -1;
 content: "";
 top: -15px;
 right: -15px;
 bottom: -15px;
 left: -15px;
 background: linear-gradient(to right, #999999, #737373 90%);
 border: 2px solid #595959;
 border-radius: 4px;
 box-shadow: 2px 2px 1px #000000;
}

.pi-theme-matrix a, .pi-theme-matrix .new {
 color: #2FFF00 !important;
 text-shadow: 1px 0 1px #2AE600;
}

.pi-theme-matrix .pi-item-spacing {
 padding: 7px 10px;
}

.pi-title {
 border: none;
 color: #2FFF00;
 text-shadow: 1px 0 1px #2AE600;
}

.pi-theme-matrix .pi-caption {
 color: #58FF33;
}

.pi-theme-matrix .pi-title, .pi-theme-matrix .pi-image-collection-tabs, .pi-theme-matrix .pi-image-collection-tab-content, .pi-theme-matrix .pi-image, .pi-theme-matrix .pi-secondary-background, .pi-theme-matrix .pi-image-collection .pi-image-collection-tabs li {
 background: none;
}

.pi-theme-matrix .pi-item {
 border: none;
}

.pi-theme-matrix .pi-data-value {
 font-size: 12px;
}

.pi-theme-matrix .pi-header {
 text-align: center;
 font-size: 14px;
 border-style: solid;
 border-color: #2AE600;
 border-width: 1px 0 1px;
}

.pi-theme-matrix .pi-image-collection .pi-image-collection-tabs li {
 border-color: #2AE600;
 margin: 1px 0 3px;
}
/\*

```
\*/
Themes/Mewmew/theme.css

/\*

```
 \*/
body.page-Themes\_Mewmew {
 background: #fde url("http://vignette3.wikia.nocookie.net/tokyomewmewpower/images/5/50/Wiki-background/revision/latest?cb=20131215221531");
}
.WikiaPage .WikiaPageBackground,
.WikiaPage .WikiaPageBackground {
 opacity: 0.86;
}
.portable-infobox {
 border-radius: 10px;
 border: 3px ridge #ff84c4;
 color: white;
 width: 282px;
}
.portable-infobox .pi-header,
.portable-infobox .pi-title,
.portable-infobox .pi-navigation {
 margin: 2px;
 padding: 0;
}
.portable-infobox .pi-item-spacing {
 padding: 2px;
 text-align: center;
}
.pi-background {
 background: transparent;
}
.pi-image img {
 height: auto;
 width: 100%;
}
.pi-border-color {
 border-color: #ffff38;
}
.pi-title,
.pi-data-label,
.pi-secondary-background {
 background-color: #ff84c4;
}
.pi-title {
 border-radius: 6px 6px 0 0;
 font-weight: bold;
}
.pi-header,
.pi-data-label {
 border-radius: 0 8px 8px 0;
}
.pi-data-label {
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.pi-data-value {
 margin: 0.4em 0;
}
.pi-navigation:nth-child(2) {
 margin-bottom: 0;
}
.pi-navigation:nth-child(3) {
 border-top: 1px dotted black;
 font-style: italic;
 font-weight: normal;
 margin-top: 0;
}
.pi-navigation:last-child {
 border-radius: 0 0 6px 6px;
}
.pi-navigation:last-child a {
 color: white;
}

/\*

```
 \*//\*Category:Stylesheets/\*/\*\*/
Portable Infoboxes/Best practices

Portable Infoboxes allow a lot of flexibility, but this can be a double-edged sword, as too much clutter may make them hard to use. Below are some user-suggested best practices to keep them user-friendly and efficient.

## Things to do

### Use the right tags

Each tag has its intended purpose:

* The image tag is meant for images and videos; avoid using the data or navigation tag for this.
* The data tag is meant for just about any data, but not images.

### Use named parameters

Though a few numbered parameters can be easy to use, they are not user-friendly and make it harder to understand how to change them. One should try to also keep the number of `{{{parameters}}}` to a minimum and use the "`source`" attribute whenever possible.

### Choose an appropriate image

An image that is too long hides the information readers want to see. As such, the infobox automatically resizes the image to a maximum height of 500px, to make it easier to read. It also has a varying width depending on screen size, but the width is generally 270 pixels, so a good square image could be around 250 x 250 pixels.

## Things to avoid

### Avoid too many parser functions or magic words

The infoboxes were designed to make their creation simple. It is not a good idea to have too many parser functions or magic words, because this may make them harder to understand. Consider putting the extra functionality (if needed) in a helper template.

### Avoid inline styling

The idea behind the design of these infoboxes is to separate the presentation (styling) from the content, to easily make them portable to other platforms. So although these infoboxes are designed for portability and can strip unnecessary content if needed, inline styling makes the infoboxes complicated and harder to modify.

### Avoid generic infoboxes

Try to develop infoboxes for specific uses. Don't use one infobox for characters, books, and games. These tend to quickly become cumbersome and hard to maintain.

## References

1. ↑ The Future of Infoboxes on Fandom
2. ↑ w:User blog:Kirkburn/Technical Update: September 14, 2015
Themes/Whimsical/theme.css

/\*

```
\*/
.pi-theme-whimsical {
 background:linear-gradient(#b9b8c9, #d7e6fa) !important;
 font-size: 87% !important;
 color: #727272 !important;
 border-radius: 14px 14px 10px 10px !important;
 border-top-left-radius: 14px !important;
 border-top-right-radius: 14px !important;
 border-bottom-right-radius: 10px !important;
 border-bottom-left-radius: 10px !important;
 margin-left:4px !important;
 margin-bottom:4px !important;
 }
.pi-theme-whimsical a {
 color: #b49c9a !important;
 }
.pi-theme-whimsical a.new, a.new:visited {
 color: #bcb487 !important;
 }
.pi-theme-whimsical .pi-secondary-background {
 background:linear-gradient(#b9b8c9, #acb8c8) !important;
 border-radius: 0 0 0 0 !important;
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 border-bottom-left-radius: 0 !important;
 }
.pi-theme-whimsical .pi-title {
 background:linear-gradient(#9897b0, #94a4b8) !important;
 color: #FFF !important;
 border-radius: 14px 14px 0 0 !important;
 border-top-left-radius: 14px !important;
 border-top-right-radius: 14px !important;
 border-bottom-right-radius: 0 !important;
 border-bottom-left-radius: 0 !important;
 }
.pi-theme-whimsical .pi-header {
 background:linear-gradient(#b9b8c9, #acb8c8) !important;
 color: #FFF !important;
 border-radius: 0 0 0 0 !important;
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 border-bottom-left-radius: 0 !important;
 }
.pi-theme-whimsical .pi-border-color {
 border-color: #b9b8c9 !important;
 }
.pi-theme-whimsical .pi-image {
 opacity: 0.9 !important;
 }
.pi-theme-whimsical .pi-image-thumbnail {
 border-radius: 0 0 0 0 !important;
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 border-bottom-left-radius: 0 !important;
 }
/\*

```
\*//\*Category:Stylesheets/\*/\*\*/
Themes/Smooth/theme.css

/\*

```
\*/

@keyframes infobox-fade-in {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}
@keyframes roll-down {
 0% {
 overflow: hidden;
 border-radius: 10px;
 max-height: 0;
 }
 20% {
 border-bottom: 4px solid #fff;
 border-right: 4px solid #fff;
 }
 70% {
 border-right: 0 solid #fff;
 }
 100% {
 overflow: hidden;
 border-bottom: 0 solid #fff;
 max-height: 50px;
 }
}
.portable-infobox.pi-theme-smooth {
 animation-duration: 1s;
 animation-name: infobox-fade-in;
 border-radius: 10px;
 width: 300px;
 background: #c4d7eb;
 color: #fff;
}
.portable-infobox.pi-theme-smooth .pi-title {
 border-radius: 10px 10px 0 0;
 padding: 9px;
 background: #69f;
 font-size: 20px;
 font-weight: bold;
 text-align: center;
}
.portable-infobox.pi-theme-smooth .pi-header {
 margin: 2.5px 5px;
 border-bottom: 2px solid #fff;
 border-right: 2px solid #fff;
 border-radius: 10px;
 padding: 8px;
 background: #69f;
 font-size: 17px;
 text-align: center;
}
.portable-infobox.pi-theme-smooth .pi-data {
 padding: 8px 25px;
}
.portable-infobox.pi-theme-smooth .pi-border-color {
 border: none;
}
.portable-infobox.pi-theme-smooth .pi-data-value {
 animation-duration: 2.125s;
 animation-name: roll-down;
}
/\*

```
\*/