WoWWiki

This wiki contains inaccurate and out-of-date information. Please head over to https://wowpedia.fandom.com for more accurate and up-to-date game information.

READ MORE

WoWWiki
Don't have an account?
Register
Register

Changes: WoWWiki:Styling/wowwiki.css

< WoWWiki:Styling
Back to page
Sign in to edit
m (reformatted for better reading)
(further editing, added the content from the current CSS, separately)
Line 1: Line 1:
  +
__FORCETOC__
−
<pre><nowiki>/* The goal of this project is to eliminate or greatly decrease
  
  +
{{breadcrumb1|Styling}}
−
the amount of styling code in the text that editors write. By writing such code
 
−
we allow other skins to either ignore the code that we intend, or the users of
 
−
that skin can port the class, or they can reformat the class to fit their skin.
  
   
  +
See [[WoWWiki:Styling]] for information on the project, and resources to CSS editors.
−
;Examples:
  
   
  +
== Projected ==
−
On this skin you want a specific div to have a black background and white
 
  +
<pre>
−
borders, and white text. But on another skin, when they see it, they go blind
 
  +
// these classes could apply to divs and tables, so you wouldn't want to specify
−
because of the high contrast.
 
  +
// either way: (using <nowiki> {| and |} </nowiki> renders a table, remember)
−  
−
If the same formatting was applied via CSS classing instead of inline formatting,
 
−
the formatting would amount to the same on the one skin (where that class was
 
−
described), but all other skins could completely ignore that div's formatting.
 
−
Those skins that had no formatting to render the div would simply display it as
 
−
any other div, however that class would normally format any other div. Those skins
 
−
that had formatting for that class would apply that formatting to the div. */
  
−  
−  
−
// these classes could apply to divs and tables, so you wouldn't want to specify
 
−
either way: (using <nowiki> {| and |} </nowiki> renders a table, remember)
  
   
 
.navboxright { border: 1px solid black; padding: 0.5ex 1em; margin: 0;
 
.navboxright { border: 1px solid black; padding: 0.5ex 1em; margin: 0;
Line 40: Line 28:
 
font-family: Tahoma, sans-serif; background-color: #282828;
 
font-family: Tahoma, sans-serif; background-color: #282828;
 
margin: 0em 0em 1em 2em; padding: 1ex; border: 1px solid #000000; }
 
margin: 0em 0em 1em 2em; padding: 1ex; border: 1px solid #000000; }
−
// from [[template:listboxformat]] (could easily be the same as navboxright, but maybe we want them distinct
 +
// from [[template:listboxformat]]
  +
// (could easily be the same as navboxright, but maybe we want them distinct
   
 
.npov { background:#382820; border-top:1px #a06020 solid;
 
.npov { background:#382820; border-top:1px #a06020 solid;
Line 59: Line 48:
 
// the two above are from [[template:ratified]] and [[template:rejected]]
 
// the two above are from [[template:ratified]] and [[template:rejected]]
 
// (viewing source from browser--wouldn't have wanted to wade through all that template code!)
  
// (viewing source from browser--wouldn't have wanted to wade through all that template code!)
−  
   
   
Line 78: Line 66:
 
border-right:1px solid gray; font-size:8pt; padding:2px 8px 0px 8px; }
 
border-right:1px solid gray; font-size:8pt; padding:2px 8px 0px 8px; }
 
// from [[template:articletab]]
  
// from [[template:articletab]]
  +
</pre>
   
  +
== Current ==
  +
The current contents of the default CSS file [http://www.wowwiki.com/skins/wowwiki/main.css] follows. Much of the file is probably not used at all. However, care needs to be taken to look at special pages such as editing pages, history pages, and various others, to be sure we don't remove a class that is used on some pages. Also, some normal articles may have these classes, but they might be able to be replaced.
  +
  +
One example of a class that is rarely seen is the one used to tell a user that there is a new message on their talk page.
  +
  +
: ''Is there a way to determine that no element at all has a given class? It seems like there should be, but I wouldn't know what it is.'' [[User:D. F. Schmidt|Schmidt]] 07:59, 23 June 2006 (EDT)
  +
  +
<pre>
 
/*
  
/*
  +
** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
−
The rest of the CSS file would of course be here, too, with possibly new formatting,
 
  +
** Copyright Gabriel Wicke - http://wikidev.net/
−
according to how we want it to look.
 
  +
** License: GPL (http://www.gnu.org/copyleft/gpl.html)
  +
**
  +
** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
  +
** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
  +
** Michael Zeltner and Geir Bækholt)
  +
** All you guys rock :)
 
*/
  
*/
  +
−
</nowiki></pre>
  
  +
#column-content {
  +
width: 100%;
  +
float: right;
  +
margin: 0 0 .6em -12.2em;
  +
padding: 0;
  +
}
  +
#content {
  +
margin: 2.8em 0 0 12.2em;
  +
padding: 0 1em 1.5em 1em;
  +
background: #333;
  +
border: 1px solid #aaa;
  +
border-right: none;
  +
line-height: 1.5em;
  +
position: relative;
  +
z-index: 2;
  +
}
  +
#column-one {
  +
padding-top: 160px;
  +
}
  +
/* the left column width is specified in class .portlet */
  +
  +
/* Font size:
  +
** We take advantage of keyword scaling- browsers won't go below 9px
  +
** More at http://www.w3.org/2003/07/30-font-size
  +
** http://style.cleverchimp.com/font_size_intervals/altintervals.html
  +
*/
  +
  +
body {
  +
font: x-small sans-serif;
  +
background: rgb(30,30,30);
  +
color: #eee;
  +
margin: 0;
  +
padding: 0;
  +
}
  +
  +
/* scale back up to a sane default */
  +
#globalWrapper {
  +
font-size: 127%;
  +
width: 100%;
  +
margin: 0;
  +
padding: 0;
  +
}
  +
.visualClear {
  +
clear: both;
  +
}
  +
  +
/* general styles */
  +
  +
table {
  +
font-size: 100%;
  +
background: #444;
  +
}
  +
a {
  +
text-decoration: none;
  +
color: #70b8ff;
  +
background: none;
  +
}
  +
a:visited {
  +
color: #7078ff;
  +
}
  +
a:active {
  +
color: orange;
  +
}
  +
a:hover {
  +
text-decoration: underline;
  +
}
  +
a.stub {
  +
color: #aa2233;
  +
}
  +
a.new, #p-personal a.new {
  +
color: #f05048;
  +
}
  +
a.new:visited, #p-personal a.new:visited {
  +
color: #c06060;
  +
}
  +
  +
img {
  +
border: none;
  +
vertical-align: middle;
  +
}
  +
p {
  +
margin: .4em 0 .5em 0;
  +
line-height: 1.5em;
  +
}
  +
p img {
  +
margin: 0;
  +
}
  +
  +
hr {
  +
height: 1px;
  +
color: #aaa;
  +
background-color: #aaa;
  +
border: 0;
  +
margin: .2em 0 .2em 0;
  +
}
  +
  +
h1, h2, h3, h4, h5, h6 {
  +
color: #f8f8f8;
  +
background: none;
  +
font-weight: normal;
  +
margin: 0;
  +
padding-top: 0em;
  +
margin-top: .5em;
  +
padding-bottom: .17em;
  +
border-bottom: 1px solid #888888;
  +
}
  +
h1 { font-size: 188%; }
  +
h2 { font-size: 150%; }
  +
h3, h4, h5, h6 {
  +
border-bottom: none;
  +
font-weight: bold;
  +
}
  +
h3 { font-size: 132%; }
  +
h4 { font-size: 116%; }
  +
h5 { font-size: 100%; }
  +
h6 { font-size: 80%; }
  +
  +
ul {
  +
line-height: 1.5em;
  +
list-style-type: square;
  +
margin: .3em 0 0 1.5em;
  +
padding: 0;
  +
list-style-image: url(bullet.gif);
  +
}
  +
ol {
  +
line-height: 1.5em;
  +
margin: .3em 0 0 3.2em;
  +
padding: 0;
  +
list-style-image: none;
  +
}
  +
li {
  +
margin-bottom: .1em;
  +
}
  +
dt {
  +
font-weight: bold;
  +
margin-bottom: .1em;
  +
}
  +
dl {
  +
margin-top: .2em;
  +
margin-bottom: .5em;
  +
}
  +
dd {
  +
line-height: 1.5em;
  +
margin-left: 2em;
  +
margin-bottom: .1em;
  +
}
  +
  +
fieldset {
  +
border: 1px solid #2f6fab;
  +
margin: 1em 0 1em 0;
  +
padding: 0 1em 1em;
  +
line-height: 1.5em;
  +
}
  +
legend {
  +
padding: .5em;
  +
font-size: 95%;
  +
}
  +
form {
  +
border: none;
  +
margin: 0;
  +
}
  +
  +
textarea {
  +
width: 100%;
  +
padding: .1em;
  +
}
  +
  +
input.historysubmit {
  +
padding: 0 .3em .3em .3em !important;
  +
font-size: 94%;
  +
cursor: pointer;
  +
height: 1.7em !important;
  +
margin-left: 1.6em;
  +
}
  +
select {
  +
vertical-align: top;
  +
}
  +
abbr, acronym, .explain {
  +
color: inherit;
  +
border-bottom: 1px dotted;
  +
cursor: help;
  +
}
  +
q {
  +
font-family: Times, "Times New Roman", serif;
  +
font-style: italic;
  +
}
  +
/* disabled for now
  +
blockquote {
  +
font-family: Times, "Times New Roman", serif;
  +
font-style: italic;
  +
}*/
  +
code {
  +
background-color: #191919;
  +
}
  +
pre {
  +
padding: 1ex 2em 1ex 1ex;
  +
border: 1px dashed #2f6fab;
  +
color: black;
  +
background-color: #f9f9f9;
  +
line-height: 1.1em;
  +
font-size: 95%;
  +
display: table;
  +
margin-right: 3em;
  +
overflow: scroll;
  +
}
  +
small {
  +
font-family: Tahoma, sans-serif;
  +
font-size: 85%;
  +
}
  +
  +
/*
  +
** the main content area
  +
*/
  +
  +
#siteSub {
  +
display: none;
  +
}
  +
#contentSub {
  +
font-size: 84%;
  +
line-height: 1.2em;
  +
margin: 0 0 1.4em 1em;
  +
color: #7d7d7d;
  +
width: auto;
  +
}
  +
span.subpages {
  +
display: block;
  +
}
  +
  +
/* Some space above and below the headers in the content area */
  +
#bodyContent h1 {
  +
margin-top: 2em;
  +
}
  +
#bodyContent h2 {
  +
margin-top: 1.5em;
  +
}
  +
#bodyContent h1, #bodyContent h2 {
  +
margin-bottom: .6em;
  +
}
  +
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
  +
margin-top: 1em;
  +
margin-bottom: .3em;
  +
}
  +
.firstHeading {
  +
margin-bottom: .1em;
  +
}
  +
  +
.editsection {
  +
margin-top: 1.5em;
  +
margin-left: 2em;
  +
margin-bottom: 1ex;
  +
}
  +
  +
/* user notification thing */
  +
.usermessage {
  +
background-color: #ffce7b;
  +
border: 1px solid #ffa500;
  +
color: black;
  +
font-weight: bold;
  +
margin: 2em 0 1em;
  +
padding: .5em 1em;
  +
vertical-align: middle;
  +
}
  +
#siteNotice {
  +
text-align: center;
  +
font-size: 95%;
  +
padding: 0 .9em;
  +
}
  +
#siteNotice p {
  +
margin: 0;
  +
padding: 0;
  +
}
  +
.error {
  +
color: red;
  +
font-size: larger;
  +
}
  +
#catlinks {
  +
border: 1px solid #000000;
  +
background-color: #202020;
  +
padding: 0.5ex 2em 0.5ex 1em;
  +
margin-top: 4em;
  +
clear: both;
  +
}
  +
/* currently unused, intended to be used by a metadata box
  +
in the bottom-right corner of the content area */
  +
.documentDescription {
  +
/* The summary text describing the document */
  +
font-weight: bold;
  +
display: block;
  +
margin: 1em 0;
  +
line-height: 1.5em;
  +
}
  +
.documentByLine {
  +
text-align: right;
  +
font-size: 90%;
  +
clear: both;
  +
font-weight: normal;
  +
color: #76797c;
  +
}
  +
  +
/* emulate center */
  +
.center {
  +
width: 100%;
  +
text-align: center;
  +
}
  +
*.center * {
  +
margin-left: auto;
  +
margin-right: auto;
  +
}
  +
/* small for tables and similar */
  +
.small, .small * {
  +
font-size: 94%;
  +
}
  +
table.small {
  +
font-size: 100%;
  +
}
  +
  +
  +
  +
/*
  +
** content styles
  +
*/
  +
  +
#toc,
  +
.toc {
  +
border: 1px solid black;
  +
background-color: #282828;
  +
padding: 0.5ex 2ex 1ex 1ex;
  +
font-size: 85%;
  +
font-family: Tahoma, sans-serif;
  +
}
  +
#toc h2,
  +
.toc h2 {
  +
display: inline;
  +
border: none;
  +
padding: 0;
  +
font-size: 100%;
  +
font-weight: bold;
  +
}
  +
#toc #toctitle,
  +
.toc #toctitle,
  +
#toc .toctitle,
  +
.toc .toctitle {
  +
text-align: center;
  +
}
  +
#toc ul,
  +
.toc ul {
  +
list-style-type: none;
  +
list-style-image: none;
  +
margin-left: 0;
  +
padding-left: 1em;
  +
text-align: left;
  +
text-indent: -1em;
  +
}
  +
#toc ul ul,
  +
.toc ul ul {
  +
margin: 0 0 0 1ex;
  +
}
  +
#toc .toctoggle,
  +
.toc .toctoggle {
  +
font-size: 94%;
  +
}
  +
  +
  +
/* images */
  +
div.floatright, table.floatright {
  +
clear: right;
  +
float: right;
  +
position: relative;
  +
margin: 0 0 .5em .5em;
  +
border: 0;
  +
/*
  +
border: .5em solid white;
  +
border-width: .5em 0 .8em 1.4em;
  +
*/
  +
}
  +
div.floatright p { font-style: italic; }
  +
div.floatleft, table.floatleft {
  +
float: left;
  +
position: relative;
  +
margin: 0 .5em .5em 0;
  +
border: 0;
  +
/*
  +
margin: .3em .5em .5em 0;
  +
border: .5em solid white;
  +
border-width: .5em 1.4em .8em 0;
  +
*/
  +
}
  +
div.floatleft p { font-style: italic; }
  +
/* thumbnails */
  +
div.thumb {
  +
margin-bottom: .5em;
  +
border-style: solid;
  +
/* should use transparent, but IE renders that as black. */
  +
border-color: #333;
  +
width: auto;
  +
}
  +
div.thumb div {
  +
border: 1px solid #ccc;
  +
padding: 3px !important;
  +
background-color: #393939;
  +
font-size: 94%;
  +
text-align: center;
  +
overflow: hidden;
  +
}
  +
div.thumb div a img {
  +
border: 1px solid #ccc;
  +
}
  +
div.thumb div div.thumbcaption {
  +
border: none;
  +
text-align: left;
  +
line-height: 1.4em;
  +
padding: .3em 0 .1em 0;
  +
}
  +
div.magnify {
  +
float: right;
  +
border: none !important;
  +
background: none !important;
  +
}
  +
div.magnify a, div.magnify img {
  +
display: block;
  +
border: none !important;
  +
background: none !important;
  +
}
  +
div.tright {
  +
clear: right;
  +
float: right;
  +
border-width: .5em 0 .8em 1.4em;
  +
}
  +
div.tleft {
  +
float: left;
  +
margin-right: .5em;
  +
border-width: .5em 1.4em .8em 0;
  +
}
  +
  +
.hiddenStructure {
  +
display: none;
  +
}
  +
img.tex {
  +
vertical-align: middle;
  +
}
  +
span.texhtml {
  +
font-family: serif;
  +
}
  +
  +
  +
/*
  +
** edit views etc
  +
*/
  +
.special li {
  +
line-height: 1.4em;
  +
margin: 0;
  +
padding: 0;
  +
font-size: 94%;
  +
font-family: Tahoma, sans-serif;
  +
}
  +
  +
.special li .comment {
  +
font-style: normal;
  +
color: #bbbbbb;
  +
font-size: 94%;
  +
}
  +
  +
/* Page history styling */
  +
/* the auto-generated edit comments */
  +
.autocomment {
  +
color: gray;
  +
}
  +
#pagehistory span.user {
  +
margin-left: 1.4em;
  +
margin-right: .4em;
  +
}
  +
#pagehistory span.minor {
  +
font-weight: bold;
  +
}
  +
#pagehistory li {
  +
border: 1px solid white;
  +
}
  +
#pagehistory li.selected {
  +
background-color: #484048;
  +
border: 1px dashed #aaa;
  +
}
  +
  +
/*
  +
** Diff rendering
  +
*/
  +
table.diff, td.diff-otitle, td.diff-ntitle {
  +
background-color: black;
  +
}
  +
td.diff-addedline {
  +
background: #030;
  +
font-size: smaller;
  +
}
  +
td.diff-deletedline {
  +
background: #220;
  +
font-size: smaller;
  +
}
  +
td.diff-context {
  +
background: #333;
  +
font-size: smaller;
  +
}
  +
span.diffchange {
  +
color: red;
  +
font-weight: bold;
  +
}
  +
  +
/*
  +
** keep the whitespace in front of the ^=, hides rule from konqueror
  +
** this is css3, the validator doesn't like it when validating as css2
  +
*/
  +
#bodyContent a[href ^="http://"],
  +
#bodyContent a[href ^="gopher://"] {
  +
background: url(external.png) center right no-repeat;
  +
padding-right: 13px;
  +
}
  +
#bodyContent a[href ^="https://"],
  +
.link-https {
  +
background: url(lock_icon.gif) center right no-repeat;
  +
padding-right: 16px;
  +
}
  +
#bodyContent a[href ^="mailto:"],
  +
.link-mailto {
  +
background: url(mail_icon.gif) center right no-repeat;
  +
padding-right: 18px;
  +
}
  +
#bodyContent a[href ^="news://"] {
  +
background: url(news_icon.png) center right no-repeat;
  +
padding-right: 18px;
  +
}
  +
#bodyContent a[href ^="ftp://"],
  +
.link-ftp {
  +
background: url(file_icon.gif) center right no-repeat;
  +
padding-right: 18px;
  +
}
  +
#bodyContent a[href ^="irc://"],
  +
.link-irc {
  +
background: url(discussionitem_icon.gif) center right no-repeat;
  +
padding-right: 18px;
  +
}
  +
/* disable interwiki styling */
  +
#bodyContent a.extiw,
  +
#bodyContent a.extiw:active {
  +
color: #68e;
  +
background: none;
  +
padding: 0;
  +
}
  +
#bodyContent a.external {
  +
color: #68e;
  +
}
  +
/* this can be used in the content area to switch off
  +
special external link styling */
  +
#bodyContent .plainlinks a {
  +
background: none !important;
  +
padding: 0;
  +
}
  +
/*
  +
** Structural Elements
  +
*/
  +
  +
/*
  +
** general portlet styles (elements in the quickbar)
  +
*/
  +
.portlet {
  +
border: none;
  +
margin: 0 0 .5em;
  +
padding: 0;
  +
float: none;
  +
width: 11.6em;
  +
overflow: hidden;
  +
}
  +
.portlet h4 {
  +
font-size: 95%;
  +
font-weight: normal;
  +
white-space: nowrap;
  +
}
  +
.portlet h5 {
  +
background: transparent;
  +
padding: 0 1em 0 .5em;
  +
display: inline;
  +
height: 1em;
  +
text-transform: lowercase;
  +
font-size: 91%;
  +
font-weight: normal;
  +
white-space: nowrap;
  +
}
  +
.portlet h6 {
  +
background: #ffae2e;
  +
border: 1px solid #2f6fab;
  +
border-style: solid solid none solid;
  +
padding: 0 1em 0 1em;
  +
text-transform: lowercase;
  +
display: block;
  +
font-size: 1em;
  +
height: 1.2em;
  +
font-weight: normal;
  +
white-space: nowrap;
  +
}
  +
.pBody {
  +
font-size: 95%;
  +
background-color: #333;
  +
border-collapse: collapse;
  +
border: 1px solid #aaa;
  +
padding: 0 .8em .3em .5em;
  +
}
  +
.portlet h1,
  +
.portlet h2,
  +
.portlet h3,
  +
.portlet h4 {
  +
margin: 0;
  +
padding: 0;
  +
}
  +
.portlet ul {
  +
line-height: 1.5em;
  +
list-style-type: square;
  +
list-style-image: url(bullet.gif);
  +
font-size: 95%;
  +
}
  +
.portlet li {
  +
padding: 0;
  +
margin: 0;
  +
}
  +
  +
/*
  +
** Logo properties
  +
*/
  +
  +
#p-logo {
  +
z-index: 3;
  +
position: absolute; /*needed to use z-index */
  +
top: 0;
  +
left: 0;
  +
height: 155px;
  +
width: 12em;
  +
overflow: visible;
  +
}
  +
#p-logo h5 {
  +
display: none;
  +
}
  +
#p-logo a,
  +
#p-logo a:hover {
  +
display: block;
  +
height: 155px;
  +
width: 12.2em;
  +
background-repeat: no-repeat;
  +
background-position: 35% 50% !important;
  +
text-decoration: none;
  +
}
  +
  +
/*
  +
** the navigation portlet
  +
*/
  +
  +
#p-navigation {
  +
position: relative;
  +
z-index: 3;
  +
}
  +
  +
/*
  +
** Search portlet
  +
*/
  +
#p-search {
  +
position: relative;
  +
z-index: 3;
  +
}
  +
#p-search .pBody {
  +
text-align: center;
  +
}
  +
input.searchButton {
  +
margin-top: 1px;
  +
font-size: 95%;
  +
}
  +
#searchGoButton {
  +
padding-left: .5em;
  +
padding-right: .5em;
  +
font-weight: bold;
  +
}
  +
#searchInput {
  +
width: 10.9em;
  +
margin: 0;
  +
font-size: 95%;
  +
}
  +
#p-search .pBody {
  +
padding: .5em .4em .4em .4em;
  +
}
  +
  +
/*
  +
** the personal toolbar
  +
*/
  +
  +
#p-personal {
  +
width: 100%;
  +
white-space: nowrap;
  +
padding: 0;
  +
margin: 0;
  +
position: absolute;
  +
left: 0;
  +
top: 0;
  +
z-index: 0;
  +
border: none;
  +
background: none;
  +
overflow: visible;
  +
line-height: 1.2em;
  +
}
  +
  +
#p-personal h5 {
  +
display: none;
  +
}
  +
#p-personal .portlet,
  +
#p-personal .pBody {
  +
padding: 0;
  +
margin: 0;
  +
border: none;
  +
z-index: 0;
  +
overflow: visible;
  +
background: none;
  +
}
  +
/* this is the ul contained in the portlet */
  +
#p-personal ul {
  +
border: none;
  +
line-height: 1.4em;
  +
color: #3f9ffb;
  +
padding: 0 2em 0 3em;
  +
margin: 0;
  +
text-align: right;
  +
text-transform: lowercase;
  +
list-style: none;
  +
z-index: 0;
  +
background: none;
  +
}
  +
#p-personal li {
  +
z-index: 0;
  +
border: none;
  +
padding: 0;
  +
display: inline;
  +
color: #3f9ffb;
  +
margin-left: 1em;
  +
line-height: 1.2em;
  +
background: none;
  +
}
  +
#p-personal li a {
  +
text-decoration: none;
  +
color: #6080e0;
  +
padding-bottom: .2em;
  +
background: none;
  +
}
  +
#p-personal li a:hover {
  +
text-decoration: underline;
  +
padding-bottom: .2em;
  +
}
  +
  +
  +
/* the icon in front of the user name, single quotes
  +
in bg url to hide it from iemac */
  +
li#pt-userpage,
  +
li#pt-anonuserpage,
  +
li#pt-login {
  +
background: url(user.gif) top left no-repeat;
  +
padding-left: 20px;
  +
text-transform: none;
  +
}
  +
  +
/*
  +
** the page-related actions- page/talk, edit etc
  +
*/
  +
#p-cactions {
  +
position: absolute;
  +
top: 1.3em;
  +
left: 11.5em;
  +
margin: 0;
  +
white-space: nowrap;
  +
width: 76%;
  +
line-height: 1.1em;
  +
overflow: visible;
  +
background: none;
  +
border-collapse: collapse;
  +
padding-left: 1em;
  +
list-style: none;
  +
font-size: 95%;
  +
}
  +
#p-cactions .hiddenStructure {
  +
display: none;
  +
}
  +
#p-cactions ul {
  +
list-style: none;
  +
}
  +
#p-cactions li {
  +
display: inline;
  +
border: 1px solid #aaa;
  +
border-bottom: none;
  +
padding: 0 0 .1em 0;
  +
margin: 0 .3em 0 0;
  +
overflow: visible;
  +
background: #333;
  +
}
  +
#p-cactions li.selected {
  +
border-color: #fabd23;
  +
padding: 0 0 .2em 0;
  +
}
  +
#p-cactions li a {
  +
background-color: #333;
  +
color: #6080e0;
  +
border: none;
  +
padding: 0 .8em .3em .8em;
  +
text-decoration: none;
  +
text-transform: lowercase;
  +
position: relative;
  +
z-index: 0;
  +
margin: 0;
  +
}
  +
#p-cactions .selected a {
  +
z-index: 3;
  +
}
  +
#p-cactions .new a {
  +
color: #d04040;
  +
}
  +
#p-cactions li a:hover {
  +
z-index: 3;
  +
text-decoration: none;
  +
}
  +
#p-cactions h5 {
  +
display: none;
  +
}
  +
#p-cactions li.istalk {
  +
margin-right: 0;
  +
}
  +
#p-cactions li.istalk a {
  +
padding-right: .5em;
  +
}
  +
#p-cactions #ca-addsection a {
  +
padding-left: .4em;
  +
padding-right: .4em;
  +
}
  +
/* offsets to distinguish the tab groups */
  +
li#ca-talk {
  +
margin-right: 1.6em;
  +
}
  +
li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
  +
margin-left: 1.6em;
  +
}
  +
  +
/*
  +
** the remaining portlets
  +
*/
  +
#p-tbx,
  +
#p-lang {
  +
position: relative;
  +
z-index: 3;
  +
}
  +
  +
/*
  +
** footer
  +
*/
  +
#footer {
  +
background-color: #333;
  +
border-top: 1px solid #fabd23;
  +
border-bottom: 1px solid #fabd23;
  +
margin: .6em 0 1em 0;
  +
padding: .4em 0 1.2em 0;
  +
text-align: center;
  +
font-size: 90%;
  +
}
  +
#footer li {
  +
display: inline;
  +
margin: 0 1.3em;
  +
}
  +
/* hide from incapable browsers */
  +
head:first-child+body #footer li { white-space: nowrap; }
  +
#f-poweredbyico, #f-copyrightico {
  +
margin: 0 8px;
  +
position: relative;
  +
top: -2px; /* Bump it up just a tad */
  +
}
  +
#f-poweredbyico {
  +
float: right;
  +
height: 1%;
  +
}
  +
#f-copyrightico {
  +
float: left;
  +
height: 1%;
  +
}
  +
  +
/* js pref toc */
  +
#preftoc {
  +
float: left;
  +
margin: 1em;
  +
width: 13em;
  +
}
  +
#preftoc li {
  +
border: 1px solid #555;
  +
}
  +
#preftoc li.selected {
  +
background-color: #555;
  +
border: 1px dashed #aaa;
  +
}
  +
#preftoc a,
  +
#preftoc a:active {
  +
display: block;
  +
color: #0054f6;
  +
}
  +
#prefcontrol {
  +
clear: both;
  +
float: left;
  +
margin-top: 1em;
  +
}
  +
div.prefsectiontip {
  +
font-size: 95%;
  +
margin-top: 1em;
  +
}
  +
fieldset.operaprefsection {
  +
margin-left: 15em;
  +
}
  +
  +
/*
  +
** IE/Mac fixes, hope to find a validating way to move this
  +
** to a separate stylesheet. This would work but doesn't validate:
  +
** @import("IEMacFixes.css");
  +
*/
  +
/* tabs: border on the a, not the div */
  +
* > html #p-cactions li { border: none; }
  +
* > html #p-cactions li a {
  +
border: 1px solid #aaa;
  +
border-bottom: none;
  +
}
  +
* > html #p-cactions li.selected a { border-color: #fabd23; }
  +
/* footer icons need a fixed width */
  +
* > html #f-poweredbyico,
  +
* > html #f-copyrightico { width: 88px; }
  +
* > html #bodyContent,
  +
* > html #bodyContent pre {
  +
overflow-x: auto;
  +
width: 100%;
  +
padding-bottom: 25px;
  +
}
  +
  +
/* more IE fixes */
  +
/* float/negative margin brokenness */
  +
* html #footer {margin-top: 0;}
  +
* html #column-content {
  +
display: inline;
  +
margin-bottom: 0;
  +
}
  +
* html div.editsection { font-size: smaller; }
  +
#pagehistory li.selected { position: relative; }
  +
  +
/* Mac IE 5.0 fix; floated content turns invisible */
  +
* > html #column-content {
  +
float: none;
  +
}
  +
* > html #column-one {
  +
position: absolute;
  +
left: 0;
  +
top: 0;
  +
}
  +
* > html #footer {
  +
margin-left: 13.2em;
  +
}
  +
.redirectText {
  +
font-size: 150%;
  +
margin: 5px;
  +
}
  +
  +
.printfooter {
  +
display: none;
  +
}
  +
  +
.not-patrolled {
  +
border-left: 4px solid red;
  +
background: inherit;
  +
text-indent: 4px;
  +
border-top: 1px solid transparent;
  +
border-bottom: 1px solid transparent;
  +
}
  +
div.patrollink {
  +
font-size: 75%;
  +
text-align: right;
  +
}
  +
span.newpage, span.minor, span.searchmatch {
  +
font-weight: bold;
  +
}
  +
span.unpatrolled {
  +
font-weight: bold;
  +
color: red;
  +
}
  +
  +
span.searchmatch {
  +
color: red;
  +
}
  +
.sharedUploadNotice {
  +
font-style: italic;
  +
}
  +
  +
span.updatedmarker {
  +
color: black;
  +
background-color: #0f0;
  +
}
  +
span.newpageletter {
  +
font-weight: bold;
  +
color: black;
  +
background-color: yellow;
  +
}
  +
span.minoreditletter {
  +
color: black;
  +
background-color: #c5ffe6;
  +
}
  +
  +
table.gallery {
  +
border: 1px solid #ccc;
  +
margin: 2px;
  +
padding: 2px;
  +
background-color: #333;
  +
}
  +
  +
table.gallery tr {
  +
vertical-align: top;
  +
}
  +
  +
table.gallery td {
  +
vertical-align: top;
  +
background-color: #f9f9f9;
  +
border: solid 2px white;
  +
}
  +
  +
div.gallerybox {
  +
margin: 2px;
  +
width: 150px;
  +
}
  +
  +
div.gallerybox div.thumb {
  +
text-align: center;
  +
border: 1px solid #ccc;
  +
margin: 2px;
  +
}
  +
  +
div.gallerytext {
  +
font-size: 94%;
  +
padding: 2px 4px;
  +
}
  +
  +
span.comment {
  +
font-style: italic;
  +
}
  +
  +
span.changedby {
  +
font-size: 95%;
  +
}
  +
  +
.previewnote {
  +
text-align: center;
  +
color: #cc0000;
  +
}
  +
.editExternally {
  +
border: 1px solid gray;
  +
background-color: #ffffff;
  +
padding: 3px;
  +
margin-top: 0.5em;
  +
float: left;
  +
font-size: small;
  +
text-align: center;
  +
}
  +
.editExternallyHelp {
  +
font-style: italic;
  +
color: gray;
  +
}
  +
  +
li span.deleted {
  +
text-decoration: line-through;
  +
color: #888;
  +
font-style: italic;
  +
}
  +
  +
.toggle {
  +
margin-left: 2em;
  +
text-indent: -2em;
  +
}
  +
  +
/* Classes for EXIF data display */
  +
table.metadata {
  +
font-size: 85%;
  +
font-family: Tahoma, sans-serif;
  +
margin-left: 0.5em;
  +
margin-bottom: 0.5em;
  +
}
  +
  +
table.metadata caption {
  +
font-weight: bold;
  +
}
  +
  +
table.metadata th {
  +
font-weight: normal;
  +
}
  +
  +
table.metadata td {
  +
padding: 0.1em;
  +
}
  +
  +
table.metadata {
  +
border: none;
  +
border-collapse: collapse;
  +
}
  +
  +
table.metadata td, table.metadata th {
  +
text-align: center;
  +
border: 1px solid #888888;
  +
padding-left: 0.1em;
  +
padding-right: 0.1em;
  +
}
  +
  +
table.metadata th {
  +
background-color: #444444;
  +
}
  +
  +
table.metadata td {
  +
background-color: #444444;
  +
}
  +
  +
/* filetoc */
  +
ul#filetoc {
  +
text-align: center;
  +
border: 1px solid #000000;
  +
background-color: #282828;
  +
padding: 5px;
  +
font-size: 95%;
  +
margin-bottom: 0.5em;
  +
margin-left: 0;
  +
margin-right: 0;
  +
}
  +
  +
#filetoc li {
  +
display: inline;
  +
list-style-type: none;
  +
padding-right: 2em;
  +
}
  +
  +
/* @bug 1714 */
  +
input#wpSave, input#wpDiff {
  +
margin-right: 0.33em;
  +
}
  +
  +
  +
/* Classes for article validation */
  +
  +
table.revisionform_default {
  +
border: 1px solid #000000;
  +
}
  +
  +
table.revisionform_focus {
  +
border: 1px solid #000000;
  +
background-color:#00BBFF;
  +
}
  +
  +
tr.revision_tr_default {
  +
background-color:#EEEEEE;
  +
}
  +
  +
tr.revision_tr_first {
  +
background-color:#DDDDDD;
  +
}
  +
  +
p.revision_saved {
  +
color: green;
  +
font-weight:bold;
  +
}
  +
  +
#mw_trackbacks {
  +
border: solid 1px #bbbbff;
  +
background-color: #eeeeff;
  +
padding: 0.2em;
  +
}
  +
  +
  +
/* Allmessages table */
  +
  +
#allmessagestable th {
  +
background-color: #02023f;
  +
}
  +
  +
#allmessagestable tr.orig {
  +
background-color: #3f0202;
  +
}
  +
  +
#allmessagestable tr.new {
  +
background-color: #023f02;
  +
}
  +
  +
#allmessagestable tr.def {
  +
background-color: #303033;
  +
}
  +
  +
/*
  +
** MonoBook
  +
** Basic table styling by Goldark
  +
** Allows alternating background colours between rows
  +
*/
  +
  +
table.basic {
  +
font-size: 100%;
  +
color: white;
  +
}
  +
thead.basic {
  +
text-align: center;
  +
background: #000080;
  +
font-weight: bold;
  +
}
  +
th.basic {
  +
text-align: center;
  +
font-weight: bold;
  +
padding: 0em 1em;
  +
}
  +
th.basic-lft {
  +
text-align: left;
  +
font-weight: bold;
  +
padding: 0em 1em;
  +
}
  +
tr.basic1 {
  +
text-align: center;
  +
background: black;
  +
}
  +
tr.basic2 {
  +
text-align: center;
  +
background: #444;
  +
}
  +
td.basic {
  +
text-align: left;
  +
}
  +
td.basic-lft {
  +
text-align: left;
  +
}
  +
td.basic-ctr {
  +
text-align: center;
  +
}
  +
  +
/*
  +
** End of basic table styles
  +
*/
  +
  +
  +
  +
/*
  +
** classes for special content elements like town boxes
  +
** intended to be referenced directly from the wiki src
  +
*/
  +
  +
/* table standards */
  +
table.rimage {
  +
float: right;
  +
position: relative;
  +
margin-left: 1em;
  +
margin-bottom: 1em;
  +
text-align: center;
  +
}
  +
.toccolours {
  +
border: 1px solid #aaa;
  +
background-color: #f9f9f9;
  +
padding: 5px;
  +
font-size: 95%;
  +
}
  +
  +
/* townBox -- is this used anywhere? /mikk */
  +
div.townBox {
  +
position: relative;
  +
float: right;
  +
background: #555;
  +
margin-left: 1em;
  +
border: 1px solid gray;
  +
padding: .3em;
  +
width: 200px;
  +
overflow: hidden;
  +
clear: right;
  +
}
  +
div.townBox dl {
  +
padding: 0;
  +
margin: 0 0 .3em;
  +
font-size: 96%;
  +
}
  +
div.townBox dl dt {
  +
background: none;
  +
margin: .4em 0 0;
  +
}
  +
div.townBox dl dd {
  +
margin: .1em 0 0 1.1em;
  +
background-color: #f3f3f3;
  +
}
  +
</pre>

Revision as of 11:59, 23 June 2006

Template:Breadcrumb1

See WoWWiki:Styling for information on the project, and resources to CSS editors.

Projected

// these classes could apply to divs and tables, so you wouldn't want to specify 
// either way: (using  {| and |}  renders a table, remember)

.navboxright { border: 1px solid black; padding: 0.5ex 1em; margin: 0; 
		background-color: #282828; color: #e0e0e0; float: right; } 
	// from [[template:apinav]], for all or most boxes floated right

.policy { background: #282830; border: 1px #7777bb solid; padding: 0.3em 2em; 
		margin: 1em 3em 2em; } 
	// from [[template:guideline]] -- this would look better changed, probably

.notice { margin: 0.2ex 3em; border-top:1px solid #ffffff; 
		border-bottom:1px solid #ffffff; text-align: center; 
		padding: 0.4ex 1em 0.5ex; color: white; background-color: #000000; } 
	// from [[template:guild]]

.itembox { background-color:#000; border:1px outset; width:20em; padding:1ex; 
		margin:0 0 1ex 1ex; color: white; } // from [[template:itemboxcss]]

.listbox { float:right; text-align: center; font-size: 85%; 
		font-family: Tahoma, sans-serif; background-color: #282828; 
		margin: 0em 0em 1em 2em; padding: 1ex; border: 1px solid #000000; } 
	// from [[template:listboxformat]] 
        // (could easily be the same as navboxright, but maybe we want them distinct

.npov { background:#382820; border-top:1px #a06020 solid; 
		border-bottom:1px #a06020 solid; margin-left:2%; margin-right:2%; 
		align:center; text-align:center; padding-left:2%; padding-right:2%; } 
	// from [[template:NPOV]]

.voteaffirmative { margin: 0.2ex 3em; border-top:1px solid #409090; 
		border-bottom:1px solid #409090; text-align: center; 
		padding: 0.3ex 4em 0.4ex; color: white; background-color: #103038; } 
	// this could be a successful vote on policy or failed vote to delete, and 
	// could stand to look a lot better, IMO

.votenegative { margin: 0.2ex 3em; border-top:1px solid #b05050; 
		border-bottom:1px solid #b05050; text-align: center; 
		padding: 0.3ex 4em 0.4ex; color: white; background-color: #401010; }
	// this could be a failed vote on policy or successful vote to delete
// the two above are from [[template:ratified]] and [[template:rejected]] 
// (viewing source from browser--wouldn't have wanted to wade through all that template code!)


// span classes
span.artifact { color:{{qual-color-artifact}}; } 
span.legendary { color:{{qual-color-legendary}}; }
span.epic { color:{{qual-color-epic}}; }
span.rare { color:{{qual-color-rare}}; }
span.uncommon { color:{{qual-color-uncommon}}; }
span.common { color:{{qual-color-common}}; }
span.poor { color:{{qual-color-poor}}; }
// from [[template:lartifact]], and so on. the templates such as [[template:lrare]] 
// could have in the span 'class="rare"' and in each skin it could have either the 
// generic color, nothing at all (meaning just normal text color), or could include a 
// background such as black or white, whatever, to make it more visible

span.tab { border-left:1px solid gray; border-top:1px solid gray; 
		border-right:1px solid gray; font-size:8pt; padding:2px 8px 0px 8px; } 
	// from [[template:articletab]]

Current

The current contents of the default CSS file [1] follows. Much of the file is probably not used at all. However, care needs to be taken to look at special pages such as editing pages, history pages, and various others, to be sure we don't remove a class that is used on some pages. Also, some normal articles may have these classes, but they might be able to be replaced.

One example of a class that is rarely seen is the one used to tell a user that there is a new message on their talk page.

Is there a way to determine that no element at all has a given class? It seems like there should be, but I wouldn't know what it is. Schmidt 07:59, 23 June 2006 (EDT)
/*
** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
** Copyright Gabriel Wicke - http://wikidev.net/
** License: GPL (http://www.gnu.org/copyleft/gpl.html)
**
** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
** Michael Zeltner and Geir Bækholt)
** All you guys rock :)
*/

#column-content {
    width: 100%;
    float: right;
    margin: 0 0 .6em -12.2em;
    padding: 0;
}
#content {
    margin: 2.8em 0 0 12.2em;
    padding: 0 1em 1.5em 1em;
    background: #333;
    border: 1px solid #aaa;
    border-right: none;
    line-height: 1.5em;
    position: relative;
    z-index: 2;
}
#column-one {
    padding-top: 160px;
}
/* the left column width is specified in class .portlet */

/* Font size:
** We take advantage of keyword scaling- browsers won't go below 9px
** More at http://www.w3.org/2003/07/30-font-size
** http://style.cleverchimp.com/font_size_intervals/altintervals.html
*/

body {
    font: x-small sans-serif;
    background: rgb(30,30,30);
    color: #eee;
    margin: 0;
    padding: 0;
}

/* scale back up to a sane default */
#globalWrapper {
    font-size: 127%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.visualClear {
    clear: both;
}

/* general styles */

table {
    font-size: 100%;
    background: #444;
}
a {
    text-decoration: none;
    color: #70b8ff;
    background: none;
}
a:visited {
    color: #7078ff;
}
a:active {
    color: orange;
}
a:hover {
    text-decoration: underline;
}
a.stub {
    color: #aa2233;
}
a.new, #p-personal a.new {
    color: #f05048;
}
a.new:visited, #p-personal a.new:visited {
    color: #c06060;
}

img {
    border: none;
    vertical-align: middle;
}
p {
    margin: .4em 0 .5em 0;
    line-height: 1.5em;
}
p img {
    margin: 0;
}

hr {
    height: 1px;
    color: #aaa;
    background-color: #aaa;
    border: 0;
    margin: .2em 0 .2em 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #f8f8f8;
    background: none;
    font-weight: normal;
    margin: 0;
    padding-top: 0em;
    margin-top: .5em;
    padding-bottom: .17em;
    border-bottom: 1px solid #888888;
}
h1 { font-size: 188%; }
h2 { font-size: 150%; }
h3, h4, h5, h6 {
    border-bottom: none;
    font-weight: bold;
}
h3 { font-size: 132%; }
h4 { font-size: 116%; }
h5 { font-size: 100%; }
h6 { font-size: 80%;  }

ul {
    line-height: 1.5em;
    list-style-type: square;
    margin: .3em 0 0 1.5em;
    padding: 0;
    list-style-image: url(bullet.gif);
}
ol {
    line-height: 1.5em;
    margin: .3em 0 0 3.2em;
    padding: 0;
    list-style-image: none;
}
li {
    margin-bottom: .1em;
}
dt {
    font-weight: bold;
    margin-bottom: .1em;
}
dl {
    margin-top: .2em;
    margin-bottom: .5em;
}
dd {
    line-height: 1.5em;
    margin-left: 2em;
    margin-bottom: .1em;
}

fieldset {
    border: 1px solid #2f6fab;
    margin: 1em 0 1em 0;
    padding: 0 1em 1em;
    line-height: 1.5em;
}
legend {
    padding: .5em;
    font-size: 95%;
}
form {
    border: none;
    margin: 0;
}

textarea {
    width: 100%;
    padding: .1em;
}

input.historysubmit {
    padding: 0 .3em .3em .3em !important;
    font-size: 94%;
    cursor: pointer;
    height: 1.7em !important;
    margin-left: 1.6em;
}
select {
    vertical-align: top;
}
abbr, acronym, .explain {
    color: inherit;
    border-bottom: 1px dotted;
    cursor: help;
}
q {
    font-family: Times, "Times New Roman", serif;
    font-style: italic;
}
/* disabled for now
blockquote {
    font-family: Times, "Times New Roman", serif;
    font-style: italic;
}*/
code {
    background-color: #191919;
}
pre {
    padding: 1ex 2em 1ex 1ex;
    border: 1px dashed #2f6fab;
    color: black;
    background-color: #f9f9f9;
    line-height: 1.1em;
    font-size: 95%;
    display: table;
    margin-right: 3em;
    overflow: scroll;
}
small {
  font-family: Tahoma, sans-serif;
  font-size: 85%;
}

/*
** the main content area
*/

#siteSub {
    display: none;
}
#contentSub {
    font-size: 84%;
    line-height: 1.2em;
    margin: 0 0 1.4em 1em;
    color: #7d7d7d;
    width: auto;
}
span.subpages {
    display: block;
}

/* Some space above and below the headers in the content area */
#bodyContent h1 {
    margin-top: 2em;
}
#bodyContent h2 {
    margin-top: 1.5em;
}
#bodyContent h1, #bodyContent h2 {
    margin-bottom: .6em;
}
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
    margin-top: 1em;
    margin-bottom: .3em;
}
.firstHeading {
    margin-bottom: .1em;
}

.editsection {
    margin-top: 1.5em;
    margin-left: 2em;
    margin-bottom: 1ex;
}

/* user notification thing */
.usermessage {
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    color: black;
    font-weight: bold;
    margin: 2em 0 1em;
    padding: .5em 1em;
    vertical-align: middle;
}
#siteNotice {
    text-align: center;
    font-size: 95%;
    padding: 0 .9em;
}
#siteNotice p {
    margin: 0;
    padding: 0;
}
.error {
    color: red;
    font-size: larger;
}
#catlinks {
    border: 1px solid #000000;
    background-color: #202020;
    padding: 0.5ex 2em 0.5ex 1em;
    margin-top: 4em;
    clear: both;
}
/* currently unused, intended to be used by a metadata box
in the bottom-right corner of the content area */
.documentDescription {
    /* The summary text describing the document */
    font-weight: bold;
    display: block;
    margin: 1em 0;
    line-height: 1.5em;
}
.documentByLine {
    text-align: right;
    font-size: 90%;
    clear: both;
    font-weight: normal;
    color: #76797c;
}

/* emulate center */
.center {
    width: 100%;
    text-align: center;
}
*.center * {
    margin-left: auto;
    margin-right: auto;
}
/* small for tables and similar */
.small, .small * {
    font-size: 94%;
}
table.small {
    font-size: 100%;
}



/*
** content styles
*/

#toc,
.toc {
	border: 1px solid black;
	background-color: #282828;
	padding: 0.5ex 2ex 1ex 1ex;
	font-size: 85%;
	font-family: Tahoma, sans-serif;
}
#toc h2,
.toc h2 {
	display: inline;
	border: none;
	padding: 0;
	font-size: 100%;
	font-weight: bold;
}
#toc #toctitle,
.toc #toctitle,
#toc .toctitle,
.toc .toctitle {
	text-align: center;
}
#toc ul,
.toc ul {
	list-style-type: none;
	list-style-image: none;
	margin-left: 0;
	padding-left: 1em;
	text-align: left;
        text-indent: -1em;
}
#toc ul ul,
.toc ul ul {
	margin: 0 0 0 1ex;
}
#toc .toctoggle,
.toc .toctoggle {
	font-size: 94%;
}


/* images */
div.floatright, table.floatright {
    clear: right;
    float: right;
    position: relative;
    margin: 0 0 .5em .5em;
    border: 0;
/*
    border: .5em solid white;
    border-width: .5em 0 .8em 1.4em;
*/
}
div.floatright p { font-style: italic; }
div.floatleft, table.floatleft {
    float: left;
    position: relative;
    margin: 0 .5em .5em 0;
    border: 0;
/*
    margin: .3em .5em .5em 0;
    border: .5em solid white;
    border-width: .5em 1.4em .8em 0;
*/
}
div.floatleft p { font-style: italic; }
/* thumbnails */
div.thumb {
    margin-bottom: .5em;
    border-style: solid;
    /* should use transparent, but IE renders that as black. */
    border-color: #333;
    width: auto;
}
div.thumb div {
    border: 1px solid #ccc;
    padding: 3px !important;
    background-color: #393939;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
}
div.thumb div a img {
    border: 1px solid #ccc;
}
div.thumb div div.thumbcaption {
    border: none;
    text-align: left;
    line-height: 1.4em;
    padding: .3em 0 .1em 0;
}
div.magnify {
    float: right;
    border: none !important;
    background: none !important;
}
div.magnify a, div.magnify img {
    display: block;
    border: none !important;
    background: none !important;
}
div.tright {
    clear: right;
    float: right;
    border-width: .5em 0 .8em 1.4em;
}
div.tleft {
    float: left;
    margin-right: .5em;
    border-width: .5em 1.4em .8em 0;
}

.hiddenStructure {
    display: none;
}
img.tex {
    vertical-align: middle;
}
span.texhtml {
    font-family: serif;
}


/*
** edit views etc
*/
.special li {
    line-height: 1.4em;
    margin: 0;
    padding: 0;
    font-size: 94%;
    font-family: Tahoma, sans-serif;
}

.special li .comment {
    font-style: normal;
    color: #bbbbbb;
    font-size: 94%;
}

/* Page history styling */
/* the auto-generated edit comments */
.autocomment {
    color: gray;
}
#pagehistory span.user {
    margin-left: 1.4em;
    margin-right: .4em;
}
#pagehistory span.minor {
    font-weight: bold;
}
#pagehistory li {
    border: 1px solid white;
}
#pagehistory li.selected {
    background-color: #484048;
    border: 1px dashed #aaa;
}

/*
** Diff rendering
*/
table.diff, td.diff-otitle, td.diff-ntitle {
    background-color: black;
}
td.diff-addedline {
    background: #030;
    font-size: smaller;
}
td.diff-deletedline {
    background: #220;
    font-size: smaller;
}
td.diff-context {
    background: #333;
    font-size: smaller;
}
span.diffchange {
    color: red;
    font-weight: bold;
}

/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
*/
#bodyContent a[href ^="http://"],
#bodyContent a[href ^="gopher://"] {
    background: url(external.png) center right no-repeat;
    padding-right: 13px;
}
#bodyContent a[href ^="https://"],
.link-https {
    background: url(lock_icon.gif) center right no-repeat;
    padding-right: 16px;
}
#bodyContent a[href ^="mailto:"],
.link-mailto {
    background: url(mail_icon.gif) center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="news://"] {
    background: url(news_icon.png) center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="ftp://"],
.link-ftp {
    background: url(file_icon.gif) center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="irc://"],
.link-irc {
    background: url(discussionitem_icon.gif) center right no-repeat;
    padding-right: 18px;
}
/* disable interwiki styling */
#bodyContent a.extiw,
#bodyContent a.extiw:active {
    color: #68e;
    background: none;
    padding: 0;
}
#bodyContent a.external {
    color: #68e;
}
/* this can be used in the content area to switch off
special external link styling */
#bodyContent .plainlinks a {
    background: none !important;
    padding: 0;
}
/*
** Structural Elements
*/

/*
** general portlet styles (elements in the quickbar)
*/
.portlet {
    border: none;
    margin: 0 0 .5em;
    padding: 0;
    float: none;
    width: 11.6em;
    overflow: hidden;
}
.portlet h4 {
    font-size: 95%;
    font-weight: normal;
    white-space: nowrap;
}
.portlet h5 {
    background: transparent;
    padding: 0 1em 0 .5em;
    display: inline;
    height: 1em;
    text-transform: lowercase;
    font-size: 91%;
    font-weight: normal;
    white-space: nowrap;
}
.portlet h6 {
    background: #ffae2e;
    border: 1px solid #2f6fab;
    border-style: solid solid none solid;
    padding: 0 1em 0 1em;
    text-transform: lowercase;
    display: block;
    font-size: 1em;
    height: 1.2em;
    font-weight: normal;
    white-space: nowrap;
}
.pBody {
    font-size: 95%;
    background-color: #333;
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 0 .8em .3em .5em;
}
.portlet h1,
.portlet h2,
.portlet h3,
.portlet h4 {
    margin: 0;
    padding: 0;
}
.portlet ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url(bullet.gif);
    font-size: 95%;
}
.portlet li {
    padding: 0;
    margin: 0;
}

/*
** Logo properties
*/

#p-logo {
    z-index: 3;
    position: absolute; /*needed to use z-index */
    top: 0;
    left: 0;
    height: 155px;
    width: 12em;
    overflow: visible;
}
#p-logo h5 {
    display: none;
}
#p-logo a,
#p-logo a:hover {
    display: block;
    height: 155px;
    width: 12.2em;
    background-repeat: no-repeat;
    background-position: 35% 50% !important;
    text-decoration: none;
}

/*
** the navigation portlet
*/

#p-navigation {
    position: relative;
    z-index: 3;
}

/*
** Search portlet
*/
#p-search {
    position: relative;
    z-index: 3;
}
#p-search .pBody {
    text-align: center;
}
input.searchButton {
    margin-top: 1px;
    font-size: 95%;
}
#searchGoButton {
    padding-left: .5em;
    padding-right: .5em;
    font-weight: bold;
}
#searchInput {
    width: 10.9em;
    margin: 0;
    font-size: 95%;
}
#p-search .pBody {
    padding: .5em .4em .4em .4em;
}

/*
** the personal toolbar
*/

#p-personal {
    width: 100%;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border: none;
    background: none;
    overflow: visible;
    line-height: 1.2em;
}

#p-personal h5 {
    display: none;
}
#p-personal .portlet,
#p-personal .pBody {
    padding: 0;
    margin: 0;
    border: none;
    z-index: 0;
    overflow: visible;
    background: none;
}
/* this is the ul contained in the portlet */
#p-personal ul {
    border: none;
    line-height: 1.4em;
    color: #3f9ffb;
    padding: 0 2em 0 3em;
    margin: 0;
    text-align: right;
    text-transform: lowercase;
    list-style: none;
    z-index: 0;
    background: none;
}
#p-personal li {
    z-index: 0;
    border: none;
    padding: 0;
    display: inline;
    color: #3f9ffb;
    margin-left: 1em;
    line-height: 1.2em;
    background: none;
}
#p-personal li a {
    text-decoration: none;
    color: #6080e0;
    padding-bottom: .2em;
    background: none;
}
#p-personal li a:hover {
    text-decoration: underline;
    padding-bottom: .2em;
}


/* the icon in front of the user name, single quotes
in bg url to hide it from iemac */
li#pt-userpage,
li#pt-anonuserpage,
li#pt-login {
    background: url(user.gif) top left no-repeat;
    padding-left: 20px;
    text-transform: none;
}

/*
** the page-related actions- page/talk, edit etc
*/
#p-cactions {
    position: absolute;
    top: 1.3em;
    left: 11.5em;
    margin: 0;
    white-space: nowrap;
    width: 76%;
    line-height: 1.1em;
    overflow: visible;
    background: none;
    border-collapse: collapse;
    padding-left: 1em;
    list-style: none;
    font-size: 95%;
}
#p-cactions .hiddenStructure {
    display: none;
}
#p-cactions ul {
    list-style: none;
}
#p-cactions li {
    display: inline;
    border: 1px solid #aaa;
    border-bottom: none;
    padding: 0 0 .1em 0;
    margin: 0 .3em 0 0;
    overflow: visible;
    background: #333;
}
#p-cactions li.selected {
    border-color: #fabd23;
    padding: 0 0 .2em 0;
}
#p-cactions li a {
    background-color: #333;
    color: #6080e0;
    border: none;
    padding: 0 .8em .3em .8em;
    text-decoration: none;
    text-transform: lowercase;
    position: relative;
    z-index: 0;
    margin: 0;
}
#p-cactions .selected a {
    z-index: 3;
}
#p-cactions .new a {
    color: #d04040;
}
#p-cactions li a:hover {
    z-index: 3;
    text-decoration: none;
}
#p-cactions h5 {
    display: none;
}
#p-cactions li.istalk {
    margin-right: 0;
}
#p-cactions li.istalk a {
    padding-right: .5em;
}
#p-cactions #ca-addsection a {
    padding-left: .4em;
    padding-right: .4em;
}
/* offsets to distinguish the tab groups */
li#ca-talk {
    margin-right: 1.6em;
}
li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
    margin-left: 1.6em;
}

/*
** the remaining portlets
*/
#p-tbx,
#p-lang {
    position: relative;
    z-index: 3;
}

/*
** footer
*/
#footer {
    background-color: #333;
    border-top: 1px solid #fabd23;
    border-bottom: 1px solid #fabd23;
    margin: .6em 0 1em 0;
    padding: .4em 0 1.2em 0;
    text-align: center;
    font-size: 90%;
}
#footer li {
    display: inline;
    margin: 0 1.3em;
}
/* hide from incapable browsers */
head:first-child+body #footer li { white-space: nowrap; }
#f-poweredbyico, #f-copyrightico {
    margin: 0 8px;
    position: relative;
    top: -2px; /* Bump it up just a tad */
}
#f-poweredbyico {
    float: right;
    height: 1%;
}
#f-copyrightico {
    float: left;
    height: 1%;
}

/* js pref toc */
#preftoc {
    float: left;
    margin: 1em;
    width: 13em;
}
#preftoc li {
    border: 1px solid #555;
}
#preftoc li.selected {
    background-color: #555;
    border: 1px dashed #aaa;
}
#preftoc a,
#preftoc a:active {
    display: block;
    color: #0054f6;
}
#prefcontrol {
    clear: both;
    float: left;
    margin-top: 1em;
}
div.prefsectiontip {
    font-size: 95%;
    margin-top: 1em;
}
fieldset.operaprefsection {
    margin-left: 15em;
}

/*
** IE/Mac fixes, hope to find a validating way to move this
** to a separate stylesheet. This would work but doesn't validate:
** @import("IEMacFixes.css");
*/
/* tabs: border on the a, not the div */
* > html #p-cactions li { border: none; }
* > html #p-cactions li a {
    border: 1px solid #aaa;
    border-bottom: none;
}
* > html #p-cactions li.selected a { border-color: #fabd23; }
/* footer icons need a fixed width */
* > html #f-poweredbyico,
* > html #f-copyrightico { width: 88px; }
* > html #bodyContent,
* > html #bodyContent pre {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 25px;
}

/* more IE fixes */
/* float/negative margin brokenness */
* html #footer {margin-top: 0;}
* html #column-content {
    display: inline;
    margin-bottom: 0;
}
* html div.editsection { font-size: smaller; }
#pagehistory li.selected { position: relative; }

/* Mac IE 5.0 fix; floated content turns invisible */
* > html #column-content {
    float: none;
}
* > html #column-one {
    position: absolute;
    left: 0;
    top: 0;
}
* > html #footer {
    margin-left: 13.2em;
}
.redirectText {
    font-size: 150%;
    margin: 5px;
}

.printfooter {
    display: none;
}

.not-patrolled {
    border-left: 4px solid red;
    background: inherit;
    text-indent: 4px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
div.patrollink {
    font-size: 75%;
    text-align: right;
}
span.newpage, span.minor, span.searchmatch {
    font-weight: bold;
}
span.unpatrolled {
    font-weight: bold;
    color: red;
}

span.searchmatch {
    color: red;
}
.sharedUploadNotice {
    font-style: italic;
}

span.updatedmarker {
    color: black;
    background-color: #0f0;
}
span.newpageletter {
    font-weight: bold;
    color: black;
    background-color: yellow;
}
span.minoreditletter {
    color: black;
    background-color: #c5ffe6;
}

table.gallery {
    border: 1px solid #ccc;
    margin: 2px;
    padding: 2px;
    background-color: #333;
}

table.gallery tr {
    vertical-align: top;
}

table.gallery td {
    vertical-align: top;
    background-color: #f9f9f9;
    border: solid 2px white;
}

div.gallerybox {
    margin: 2px;
    width:  150px;
}

div.gallerybox div.thumb {
    text-align: center;
    border: 1px solid #ccc;
    margin: 2px;
}

div.gallerytext {
    font-size: 94%;
    padding: 2px 4px;
}

span.comment {
	font-style: italic;
}

span.changedby {
	font-size: 95%;
}

.previewnote {
	text-align: center;
	color: #cc0000;
}
.editExternally {
	border: 1px solid gray;
	background-color: #ffffff;
	padding: 3px;
	margin-top: 0.5em;
	float: left;
	font-size: small;
	text-align: center;
}
.editExternallyHelp {
	font-style: italic;
	color: gray;
}

li span.deleted {
	text-decoration: line-through;
	color: #888;
	font-style: italic;
}

.toggle {
	margin-left: 2em;
	text-indent: -2em;
}

/* Classes for EXIF data display */
table.metadata {
	font-size: 85%;
	font-family: Tahoma, sans-serif;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}

table.metadata caption {
	font-weight: bold;
}

table.metadata th {
	font-weight: normal;
}

table.metadata td {
	padding: 0.1em;
}

table.metadata {
	border: none;
	border-collapse: collapse;
}

table.metadata td, table.metadata th {
	text-align: center;
	border: 1px solid #888888;
	padding-left: 0.1em;
	padding-right: 0.1em;
}

table.metadata th {
	background-color: #444444;
}

table.metadata td {
	background-color: #444444;
}

/* filetoc */
ul#filetoc {
	text-align: center;
	border: 1px solid #000000;
	background-color: #282828;
	padding: 5px;
	font-size: 95%;
	margin-bottom: 0.5em;
	margin-left: 0;
	margin-right: 0;
}

#filetoc li {
	display: inline;
	list-style-type: none;
	padding-right: 2em;
}

/* @bug 1714 */
input#wpSave, input#wpDiff {
	margin-right: 0.33em;
}


/* Classes for article validation */

table.revisionform_default {
	border: 1px solid #000000;
}

table.revisionform_focus {
	border: 1px solid #000000;
	background-color:#00BBFF;
}

tr.revision_tr_default {
	background-color:#EEEEEE;
}

tr.revision_tr_first {
	background-color:#DDDDDD;
}

p.revision_saved {
	color: green;
	font-weight:bold;
}

#mw_trackbacks {
	border: solid 1px #bbbbff;
	background-color: #eeeeff;
	padding: 0.2em;
}


/* Allmessages table */

#allmessagestable th {
	background-color: #02023f;
}

#allmessagestable tr.orig {
	background-color: #3f0202;
}

#allmessagestable tr.new {
	background-color: #023f02;
}

#allmessagestable tr.def {
	background-color: #303033;
}

/*
** MonoBook
** Basic table styling by Goldark
** Allows alternating background colours between rows
*/

table.basic {
   font-size: 100%;
   color: white;
}
thead.basic {
   text-align: center;
   background: #000080;
   font-weight: bold;
}
th.basic  {
   text-align: center;
   font-weight: bold;
   padding: 0em 1em;
}
th.basic-lft  {
   text-align: left;
   font-weight: bold;
   padding: 0em 1em;
}
tr.basic1 {
   text-align: center;
   background: black;
}
tr.basic2 {
   text-align: center;
   background: #444;
}
td.basic {
   text-align: left;
}
td.basic-lft {
   text-align: left;
}
td.basic-ctr {
   text-align: center;
}

/*
** End of basic table styles
*/



/*
** classes for special content elements like town boxes
** intended to be referenced directly from the wiki src
*/

/* table standards */
table.rimage {
    float: right;
    position: relative;
    margin-left: 1em;
    margin-bottom: 1em;
    text-align: center;
}
.toccolours {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    padding: 5px;
    font-size: 95%;
}

/* townBox -- is this used anywhere? /mikk */
div.townBox {
    position: relative;
    float: right;
    background: #555;
    margin-left: 1em;
    border: 1px solid gray;
    padding: .3em;
    width: 200px;
    overflow: hidden;
    clear: right;
}
div.townBox dl {
    padding: 0;
    margin: 0 0 .3em;
    font-size: 96%;
}
div.townBox dl dt {
    background: none;
    margin: .4em 0 0;
}
div.townBox dl dd {
    margin: .1em 0 0 1.1em;
    background-color: #f3f3f3;
}
Community content is available under CC-BY-SA unless otherwise noted.
More Fandoms