Difference between revisions of "MediaWiki:Common.css"

Revision as of 23:51, 22 August 2008

/** CSS placed here will be applied to all skins */

/*
 * Setup content containers for various types of articles.  This allows each type's
 * content container to have its own style.
 *
 * The content container types are as follows:
 *   species, plant, and article.
 *
 *   Note 1.  Article is a generic container for both uncategorized articles, and for other
 *     categories lacking an specific type container.
 */

div.pii_species_content_container,
div.pii_plant_content_container,
div.pii_article_content_container,
div.pii_pa_minigame_content_container {
    width: 100%;
}

/*
 * These are all going the way of the dodo, and will be removed once all plant articles
 * have been migrated to the new PlantInfobox and pii_plant_content_container.
 */

div.pii_flower_content_container,
div.pii_waterflower_content_container,
div.pii_vegetable_content_container,
div.pii_weed_content_container,
div.pii_bush_content_container,
div.pii_tree_content_container {
    width: 100%;
}

/*
 * Can't set width to 100% and also specify padding in same div, due to browser bugs.
 * (Renders wider than it should, leading to horizontal scrollbars.)
 *
 * Bug/workaround documented at:
 *   http://www.webreference.com/authoring/style/sheets/layout/advanced/
 *
 * Thus, content is nested in two sets of divs, e.g.:
 *   <nowiki><div class="pii_species_content_container">
 *     <div class="pii_species_classic_content">
 *        ...
 *     </div>
 *   </div></nowiki>
 */

/*
 * Setup content for various types of articles, by game.  This allows each type's game
 * content to have its own style.
 *
 * The games (tabs) are as follows:
 *   classic, tip, tipStd, tipJff, pp, pa, tv
 *
 *   Note 1.  If the TiP content applies to both Standard mode (Std) and Just for Fun
 *     mode (Jff), please use the general tip game designation.  Content should match
 *     their tabs (e.g Trouble in Paradise, TiP - Standard, or TiP - Just for Fun).
 *
 *   Note 2.  tv is a special case (non-game) tab for species TV show details.
 */

div.pii_species_content,                /* obsolete, use pii_species_classic_content */
div.pii_species_classic_content,
div.pii_plant_classic_content {
    margin: 0;
    padding: 1em;
    background-color:#EBFAFF;
}

div.pii_species_tip_content {
    margin: 0;
    padding: 1em;
    background-color:#FFF0F0;
}

div.pii_species_tipStd_content,
div.pii_plant_tipStd_content {
    margin: 0;
    padding: 1em;
    background-color:#FFF0F0;
}

div.pii_species_tipJff_content,
div.pii_plant_tipJff_content {
    margin: 0;
    padding: 1em;
    background-color:#FFEBD6;
}

div.pii_species_pp_content, 
div.pii_plant_pp_content {
    margin: 0;
    padding: 1em;
    background-color:#FFFFD6;
}

div.pii_species_tv_content {            /* _tv_ content only exists for species */
    margin: 0;
    padding: 1em;
    background-color:#DFFBDF;
}

/*
 * All sour content gets the same style, regardless of game/tab.
 */

div.pii_species_sour_content {
    margin: 0;
    padding: 1em;
    background-color:#f0e1ff;
}

/*
 * These old content divs are obsolete.  Use pii_plant_<game>_content.
 */

div.pii_flower_content,
div.pii_waterflower_content,
div.pii_vegetable_content,
div.pii_weed_content,
div.pii_bush_content,
div.pii_tree_content {
    margin: 0;
    padding: 1em;
    background-color:#ccffcc;
}

/*
 * New _<game>_ content divs for styles by tab.
 *
 * Even if plants happen to be common to both tipStd and tipJFF, we still need to display
 * both tabs, as the plant uses will be different for each difficulty.
 */

div.pii_article_classic_content,
div.pii_article_tip_content,
div.pii_article_tipStd_content,
div.pii_article_tipJff_content,
div.pii_article_pp_content,
div.pii_article_pa_content {
    margin: 0;
    padding: 1em;
    background-color:#FFFFFF;
}

/*
 * This was poorly named, prior to the Reorg, but there's no need to fix it.
 *
 * It would have been better named as pii_minigame_pa_content to match
 * the pii_<type>_<game>_content convention.
 */

div.pii_pa_minigame_content {
    margin: 0;
    padding: 1em;
}

/* Indent for Species page Requirements section data */

div.pii_species_requirements {
    margin: 1em 1em 1em 2em;
}

div#pii_minifaq_content_container {
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #0B198C;
    background: #E1E4F2 none;
}

/* Substitute vB-style image for external link */

div#pii_minifaq_content_container a.external {
    background: url(http://pinataisland.info/forum/images/buttons/lastpost.gif) center right no-repeat;
    padding-right: 16px;
}

div.pii_minifaq_content,
div.pii_minifaq_content_header,
div.pii_minifaq_content_footer {
    margin: 1px;
    padding: 10px 6px 10px 6px;
    background: #F5F5FF none;
    border: 0px none #F5F5FF;
    text-align: left;
    font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

div.pii_minifaq_content b {
    background: #F5F5FF url(http://pinataisland.info/forum/images/icons/icon1.gif) no-repeat scroll top left;
    font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #D1D1E1;
    padding-top: 0;
    padding-bottom: 0.3em;
    padding-left: 18px;
    margin-top: 0;
    margin-bottom: 0.2em;
    display: block;
}

div.pii_minifaq_content ul {
    list-style-type: disc;
    list-style-image: none;
}

/* Commonly asked questions header */

div.pii_minifaq_content_header {
    background: #5C7099 url(http://pinataisland.info/forum/images/gradients/gradient_thead.gif) repeat-x top left;
    color: white;
    font-weight: bold;
}

/* Optional See also footer */

div.pii_minifaq_content_footer {
    background: #5C7099 url(http://pinataisland.info/forum/images/gradients/gradient_thead.gif) repeat-x top left;
    color: #E0E0F6;
    text-align: right;
}

div.pii_minifaq_content_footer b {
    font-weight: bold;
}

/* Override link colors in footer */

div.pii_minifaq_content_footer a {
    color: #E0E0F6;
}

/* Speechbox */

div.pii_speechbox {
    background-image: url(/skins/common/images/Speech_Box.jpg);
    height: 190px;
    width: 366px;
    padding: 90px; 
}

/* FAQ keytable message box  (migrated to CSS - was Template:FAQkeytable) */

div.pii_faq_keytable {
    width: 80%;
    border: 4px solid #f6f2d1;
    background: #fdffeb;
    padding: 0.8em;
    margin: 1em auto 1em auto;
    text-align: center;
}

/* Gameplay Tip message box */

div.pii_gameplay_tip {
    width: 80%;
    border: 4px solid #cef2e0; ! blue=#cedff2;
    background: #f5fffa; ! blue=#f5faff;
    padding: 0.8em;
    margin: 1em auto 1em auto;
    text-align: center;
}

div.pii_gameplay_tip b {
    color: #8eb2a0; ! blue=#8e9fb2;
    font-weight: bold;
}

/* Accessories item box */

div.pii_accessories {
    width: 90%;
    border: 4px solid #cedff2;
    background: #f5faff;
    padding: 0.6em;
    margin: 1em auto 1em auto;
    text-align: center;
}

div.pii_accessories b {
    color: #8e9fb2;
    font-weight: bold;
    font-size: 120%;
    text-decoration: none;
    border-bottom: 2px solid #cedff2;
    padding-bottom: 0.2em;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0.2em;
    display: block;
}

div.pii_accessories ul {
    text-align: center;
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    display: block;
    cursor: default;
}

div.pii_accessories li {
    padding: 0;
    display: block;
    margin-left: -1.5em;
}

/* Species page Variants table */

table.pii_species_variants {
    padding: 5px;
    border-spacing: 0px;
    margin: 1em 1em 1em 1em;
    border: 1px #aaaaaa solid;
    border-collapse: collapse;
    vertical-align: top;
    text-align: center;
}

table.pii_species_variants td {
    background: #fdffeb;
    padding: 5px;
}

table.pii_species_variants th {
    background: #fdf2ce;
    padding: 5px;
}

/* General table, auto-width */

table.pii_wikitable {
    padding: 5px;
    border-spacing: 5px;
    margin: 1em;
    border: 1px #aaaaaa solid;
    border-collapse: collapse;
    vertical-align: top;
}

table.pii_wikitable th {
    padding: 5px;
}

table.pii_wikitable td {
    padding: 5px;
}

table.pii_pa_minigame_table {
    padding: 4px;
    border-spacing: 0px;
    margin: 0 0 1em 1em;
    border: 1px #aaaaaa solid;
    border-collapse: collapse;
    vertical-align: top;
    width: 200px;
    text-align: left;
    font-size: 95%;
}

table.pii_pa_minigame_table th {
    padding: 4px;
}

table.pii_pa_minigame_table td {
    padding: 4px;
}

table.pii_pa_controls_table {
    padding: 3px;
    border-spacing: 0px;
    margin: 0;
    border: 1px none;
    border-collapse: collapse;
    vertical-align: top;
    text-align: left;
}

table.pii_pa_controls_table th {
    padding: 3px;
}

table.pii_pa_controls_table td {
    padding: 3px;
}

/*
 * Color variations for table headings and rows
 *
 * Attract: Yellow (E.g. Attracting new species)
 * Tame: Red (E.g. Taming sour pinatas)
 * Game: Green (E.g. Site Map Game)
 * Merchandise: Blue (E.g. Site Map General info)
 * TV: Purple (E.g. Site Map TV show)
 *
 */

/* Yellow */

#pii_attract th {
    background: #fdf2ce;
    padding: 5px;
}

#pii_attract td {
    background: #fdffeb;
    padding: 5px;
}

/* Was Red - trying same purple shade as species Sour version section */

#pii_tame th {
    background: #d3baf2; ! ickyred = #f29494;
    padding: 5px;
    border-bottom-color: #cccccc;
}

#pii_tame td {
    background: #f0e1ff; ! ickyred = #ffb1b1;
    padding: 5px;
    border-color: #cccccc;
}

/* Green */

#pii_site_game th {
    background: #cef2e0;
    padding: 5px;
}

#pii_site_game td {
    background: #f5fffa;
    padding: 5px;
}

/* Blue */

#pii_site_merchandise th {
    background: #cedff2;
    padding: 5px;
}

#pii_site_merchandise td {
    background: #f5faff;
    padding: 5px;
}

/* Purple */

#pii_site_tv th {
    background: #ddcef2;
    padding: 5px;
}

#pii_site_tv td {
    background: #faf5ff;
    padding: 5px;
}

/* Fake (monobook) H2 to keep FAQ's TOC in order */

#pii_faq_h2 {
   font-size: 150%;
   color: black;
   background: none;
   font-weight: normal;
   margin: 0;
   padding-top: .5em;
   padding-bottom: .17em;
   border-bottom: 1px solid #aaa;
}


/* Colored watchlist numbers */
.mw-plusminus-pos {
  color:darkgreen;
}

.mw-plusminus-neg {
  color:darkred;
}

/* Food Chain */
td.pii_food_chain_box_top
{
    background-color: #FFBBAA;
    border: thin solid black;
    width: 100px;
    text-align: center;
}

td.pii_food_chain_box_middle
{
    background-color: #FFFFCC;
    border: thin solid black;
    width: 100px;
    text-align: center;
}

td.pii_food_chain_box_bottom
{
    background-color: #CEF2E0;
    border: thin solid black;
    width: 100px;
    text-align: center;
}

td.pii_food_chain_line_blank
{
    width: 30px;
}

td.pii_food_chain_line_left
{
    border-left: thin solid black;
    width: 30px;
}

td.pii_food_chain_line_bottom
{
    border-bottom: thin solid black;
    width: 30px;
}

td.pii_food_chain_line_leftbottom
{
    border-left: thin solid black;
    border-bottom: thin solid black;
    width: 30px;
}

.tagcloud {
        width: 98%;
        text-align: center;
        background-color: #FDFDFD;
        border: 1px solid #EEEEEE;
        padding: 15px 10px 15px 10px;
}
.tagcloud a {
        color: #0052CB;
        margin-left: 10px;
        margin-right: 10px;
        font-weight: bold;
}

/* default skin for navigation boxes */
table.navbox {            /* navbox container style */
  border:1px solid #aaa;
  width:100%; 
  margin:auto;
  clear:both;
  font-size:88%;
  text-align:center;
  padding:1px;
}
table.navbox + table.navbox {
  margin-top:-1px;        /* single pixel border between adjacent navboxes (doesn't work for IE6, but that's okay) */
}
.navbox-title, .navbox-abovebelow, table.navbox th {
  text-align:center;      /* title and above/below styles */
  padding-left:1em;
  padding-right:1em;
}
.navbox-group {           /* group style */
  white-space:nowrap;
  text-align:right;
  font-weight:bold;
  padding-left:1em;
  padding-right:1em;
}
.navbox, .navbox-subgroup {
  background:#fdfdfd;     /* Background color */
}
.navbox-list {
  border-color:#fdfdfd;   /* Must match background color */
}
.navbox-title, table.navbox th {
  background:#ccccff;     /* Level 1 color */
}
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
  background:#ddddff;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
  background:#e6e6ff;     /* Level 3 color */
}
.navbox-even {
  background:#f7f7f7;     /* Even row striping */
}
.navbox-odd {
  background:transparent; /* Odd row striping */
}
 
@media print {
    .navbox {
        display: none;
    }
}

.plainlinksneverexpand {
    background: none ! important;
    padding: 0 ! important;
}

.plainlinksneverexpand .urlexpansion {
    display: none ! important;
}

/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
   the arrow...
*/
.plainlinksneverexpand a {
    background: none !important;
    padding: 0 !important;
}

/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
   following the anchor A, the anchor itself now has class "external autonumber" and the
   expansion is inserted when printing (see the common printing style sheet at
   http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo-
   element of CSS. We have to switch this off for links due to Template:Ref!
*/
.plainlinksneverexpand a.external.text:after {
    display: none !important;
}
.plainlinksneverexpand a.external.autonumber:after {
    display: none !important;
}

/* Messagebox templates */
.messagebox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    width: 80%;
    margin: 0 auto 1em auto;
    padding: .2em;
}

/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
    margin-left: inherit;
}