Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 11:39, 22 September 2012

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


/** Override the body skin definition, mainly to replace logo
body {
        font: x-small sans-serif;
        background: #f9f9f9 url(images/9/9c/Dotb-wiki-background.png) 0 0 no-repeat;
        color: black;
        margin: 0;
        padding: 0;
}  **/


/* Temporary measure to tell people to ^F5/shift-refresh to get the CSS */
.haveskillcss {
  display: none;
}

/* For progression tables, [[Template:Progression]] (used in [[Template:Skill box]]) */
table.progression {
  padding: 2px;
  background: #f9f9f9;
  border: 2px solid black;
  border-collapse: collapse;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

table.progression td, table.progression th {
  width: 3%;
  border: 1px solid black;
  text-align: center;
}

table.progression td.firstcol {
  font-weight: bold;
  border-right: 2px solid black
}

table.progression tr.firstrow td {
  border-bottom: 2px solid black;
}

table.progression tr.firstrow td.firstcol {
  white-space: nowrap;
}

table.progression tr.firstrow td.p0, table.progression tr.firstrow td.p12 {
  font-weight: bold;
}

table.progression td.p12 {
  border-right: 2px solid black;
}

/* For the basic skill box, [[Template:Skill box]] */
div.skillbox {
  position: relative;
  float: right;
}

div.editskill {
  font-size: 80%;
  text-align: right;
}

table.skillbox {
  margin-left: 1em; 
  margin-bottom: 1.25em;
  border-collapse: collapse;
  padding: 0px;
}

table.skillbox td.name {
  text-align: center;
  font-weight: bold;
  background: lightgreen;
  border:1px black solid;
}

table.skillbox td.icon {
  text-align: center;
  padding: 1px;
  border: 1px black solid;
}

table.skillbox td.stats {
  border: 1px black solid;
  padding: 0px;
}

table.skillbox td.properties {
  border: 1px black solid;
}

table.skillproperties {
  border:none;
  padding:2px;
}

table.skillproperties td.campaign, table.skillproperties td.type, table.skillproperties td.profession, table.skillproperties td.attribute {
  text-align: right;
  font-weight: bold;
}

table.skillproperties td.campaigndata, table.skillproperties td.typedata, table.skillproperties td.professiondata, table.skillproperties td.attributedata {
  white-space: nowrap;
}

/* For various displays of skill stats, used in many skill boxes */
table.skillstats {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0px;
  margin: 0px;
}

table.skillstats td.stat {
 text-align: right;
 width: 13%;
 border: none;
 padding: 0px;
 margin: 0px;
}

table.skillstats td.statdata {
  text-align: left;
  width: 12%;
  border: none;
  padding: 0px;
  margin: 0px;
}

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

/* For other types of skill boxes (qr, ias, fail, etc.)
   qr mostly gets its own classes since it specifies widths to get multiple, separate tables on the same page to align columns
   other templates should try to use the other classes */
table.qr {
  width: 100%;
  padding: 1px;
  border: 1px solid black;
  border-collapse: collapse;
  clear: right;
}

table.qr td, table.qr th {
  vertical-align: middle;
  text-align: left;
  border: 1px solid black;
  padding: 1px;
}

table.qr td.name {
  padding-left: 2px;
  text-align: left;
  font-weight: bold;
}

table.qr td.smallskillicon {
  width: 25px;
  height: 25px;
}

table.qr td.skillicon {
  width: 64px;
  width: 64px;
}

table.qr td.qrname {
  width: 100px;
  padding: 0px 6px;
  font-weight: bold;
} /* no idea why padding is set like this, someone else did it */

table.qr td.qrdesc {
  padding: 0px 6px;
} /* still no idea.  Don't ask me.  I just work here. */

table.qr td.qrstats {
  width: 176px;
  height: 27px;
  padding: 0px;
  margin: 0px;
} /* height is the height of the recharge image, the tallest icon (I think) */

table.qr td.qrcampaign {
  width: 121px;
  text-align: center;
}

table.qr td.qrdupe {
  width: 30px;
  text-align: center; 
  padding: 2px
} 

table.qr td.qrquest {
  width: 17px;
  text-align: center; 
  padding: 2px;
}

table.qr div.editsection {
  font-weight: normal;
}

table.qr span.desctype {
  font-weight: bold;
}

table.qr td.elite {
  background: gold;
}

table.qr td.nonelite {
  background: lightgreen;
}

table.qr td.qrnonelite {
  background: black;
}

table.qr td.data {
  text-align: center;
}

table.qr td.notes {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

table.qr td.type {
  text-align: center;
  font-weight: bold;
}

table.qr td.stats {
  padding: 0px;
  width: 180px;
}

table.qr td.shorthandattr {
  white-space: nowrap;
  padding-right: 0.5em;
}

table.qr td.shorthandcam {
  font-weight: bold;
  text-align: center;
}

/*
== Styles for the build template ==
*/

div.build-types li {
  display: inline;
  list-style: none;
}

div.build-types a {
  display: block;
  float: left;
  width: 5em;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  margin: 1px;
  color: black;
  text-decoration: none;
}

div.build-types .pvp a {
  background: #fed;
  border: 3px solid #f40;
}

div.build-types .pve a {
  background: #ddf;
  border: 3px solid #22f;
}

div.build-types .campaign a {
  background: #cf9;
  border: 3px solid #0c0;
}

/*
== Styles for profession colours ==
*/

.warrior	{ background-color: #FF8; border: 1px solid #EA3; }
.ranger 	{ background-color: #CF9; border: 1px solid #5A0; }
.monk 		{ background-color: #ACF; border: 1px solid #44B; }
.necromancer 	{ background-color: #9FC; border: 1px solid #0A5; }
.mesmer 	{ background-color: #DAF; border: 1px solid #80A; }
.elementalist 	{ background-color: #FBB; border: 1px solid #B33; }
.assassin 	{ background-color: #FCE; border: 1px solid #A08; }
.ritualist 	{ background-color: #BFF; border: 1px solid #0AA; }
.paragon 	{ background-color: #FC9; border: 1px solid #960; }
.dervish 	{ background-color: #DDF; border: 1px solid #77C; }
.no-profession 	{ background-color: #DDD; border: 1px solid #666; }


/*
== Front page divider boxes ==
*/

.main-page-header1 {
margin:0;
font-size:120%;
font-weight:bold;
border:1px;
text-align:left;
color:#000;
padding:0.2em 0.4em;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}

table.main-page-table tr:last-child td:first-child {
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px
}

/* INFOBOX css borrowed from gw2 wiki */
/**INFOBOXES**/
div.infobox {
float:right;
position:relative;
width:250px;
background:#FFF;
font-size:.923em;
border:1px solid #aaa;
margin:0 0 1em 1em;
padding:0
}

div.infobox,div.nav .box {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffeeeeee);
background-image: linear-gradient(top, #fff 0%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee))
}

div.infobox .icon {
float:right;
position:relative;
z-index:2;
width:auto;
margin:5px
}

div.infobox .icon p {
text-align:center;
color:#444;
font-size:9px!important;
background-color:rgba(255,255,255,0.5);
border-radius:.75em;
line-height:1em;
margin:.25em -.5em;
padding:2px
}

div.infobox .wrapper {
clear:both;
padding:0
}

div.infobox .statistics {
text-align:center;
margin:0 8px
}

div.statistics span + span { margin-left: 5px; }

div.infobox .heading,div.nav .heading {
font-weight:700;
background-image:url(http://wiki.guildwars2.com/images/c/cc/Infobox_header_overlay.png)!important;
text-align:center;
border:1px solid rgba(0,0,0,0.25);
border-bottom-width:0;
position:relative;
z-index:1;
font-size-adjust:.52;
margin:-1px -1px 5px!important
}

div.infobox .heading {
font-family:EasonPro, "Times New Roman", serif!important;
font-size:1.417em!important;
color:#fff!important;
background-color:#444;
text-shadow:rgba(0,0,0,0.75) 0 0 .25em;
line-height:1.176em;
font-size-adjust:.43;
padding:.5em!important
}

div.infobox .subheading,div.nav .subheading {
font-weight:700;
background-color:#888;
background-image:url(http://wiki.guildwars2.com/images/c/cc/Infobox_header_overlay.png)!important;
border-left:1px solid rgba(0,0,0,0.25);
border-right:1px solid rgba(0,0,0,0.25);
line-height:100%;
text-align:center;
position:relative;
margin:0 -1px!important
}

div.infobox .subheading {
font-family:EasonPro, "Times New Roman", serif;
font-size:1.25em!important;
color:#fff!important;
background-color:#444;
text-shadow:rgba(0,0,0,0.75) 0 0 .25em;
z-index:1;
line-height:1.333em;
font-size-adjust:0.43;
padding:.567em!important
}

div.nav dl,div.infobox dl {
margin:10px 0
}

div.infobox dt {
float:left;
text-align:right;
width:78px;
line-height:1em;
font-weight:700;
clear:left;
border-right:2px solid #999;
margin:0 -2px 0 0;
padding:2px 8px 2px 3px
}

div.infobox dd {
float:left;
width:125px;
font-weight:400;
border-left:2px solid #999;
margin:0;
padding:2px 7px
}

div.infobox::after,div.nav .box::after,div.infobox .heading::after,div.nav .heading::after,div.infobox .subheading::after,div.nav .subheading::after,.table::after {
content:"";
position:absolute;
width:100%;
left:0;
height:3px;
background-image:url(http://wiki.guildwars2.com/images/4/45/Shadow_after.png);
background-size:100% 3px
}

div.infobox::after,div.nav .box::after {bottom:-4px}
div.infobox .heading::after,div.nav .heading::after,div.infobox .subheading::after,div.nav .subheading::after,.table::after {bottom:-3px}

div.infobox table,div.nav table {background-color:transparent}

div.infobox.guardian dd,div.infobox.guardian dt {
border-color:#066!important
}

div.infobox.guardian .heading,div.infobox.guardian .subheading {
background-color:#066!important
}

div.infobox.warrior dd,div.infobox.warrior dt {
border-color:#c60!important
}

div.infobox.warrior .heading,div.infobox.warrior .subheading {
background-color:#c60!important
}

div.infobox.engineer dd,div.infobox.engineer dt {
border-color:#630!important
}

div.infobox.engineer .heading,div.infobox.engineer .subheading {
background-color:#630!important
}

div.infobox.ranger dd,div.infobox.ranger dt {
border-color:#360!important
}

div.infobox.ranger .heading,div.infobox.ranger .subheading {
background-color:#360!important
}

div.infobox.thief dd,div.infobox.thief dt {
border-color:#933!important
}

div.infobox.thief .heading,div.infobox.thief .subheading {
background-color:#933!important
}

div.infobox.elementalist dd,div.infobox.elementalist dt {
border-color:#c00!important
}

div.infobox.elementalist .heading,div.infobox.elementalist .subheading {
background-color:#c00!important
}

div.infobox.mesmer dd,div.infobox.mesmer dt {
border-color:#606!important
}

div.infobox.mesmer .heading,div.infobox.mesmer .subheading {
background-color:#606!important
}

div.infobox.necromancer dd,div.infobox.necromancer dt {
border-color:#063!important
}

div.infobox.necromancer .heading,div.infobox.necromancer .subheading {
background-color:#063!important
}

div.infobox.asura dd,div.infobox.asura dt {
border-color:#63c!important
}

div.infobox.asura .heading,div.infobox.asura .subheading {
background-color:#63c!important
}

div.infobox.charr dd,div.infobox.charr dt {
border-color:#900!important
}

div.infobox.charr .heading,div.infobox.charr .subheading {
background-color:#900!important
}

div.infobox.human dd,div.infobox.human dt {
border-color:#c90!important
}

div.infobox.human .heading,div.infobox.human .subheading {
background-color:#c90!important
}

div.infobox.norn dd,div.infobox.norn dt {
border-color:#069!important
}

div.infobox.norn .heading,div.infobox.norn .subheading {
background-color:#069!important
}

div.infobox.sylvari dd,div.infobox.sylvari dt {
border-color:#060!important
}

div.infobox.sylvari .heading,div.infobox.sylvari .subheading {
background-color:#060!important
}

div.infobox.boon dd,div.infobox.boon dt {
border-color:#399!important
}

div.infobox.boon .heading,div.infobox.boon .subheading {
background-color:#399!important
}

div.infobox.condition dd,div.infobox.condition dt {
border-color:#363!important
}

div.infobox.condition .heading,div.infobox.condition .subheading {
background-color:#363!important
}

div.infobox.armor dd,div.infobox.weapon dd,div.infobox.item dd,div.infobox.armor dt,div.infobox.weapon dt,div.infobox.item dt {
border-color:#c30
}

div.infobox.armor .heading,div.infobox.weapon .heading,div.infobox.item .heading,div.infobox.armor .subheading,div.infobox.weapon .subheading,div.infobox.item .subheading {
background:#c30
}

div.infobox.recipe {
width:250px;
display: inline-block;
float:none;
clear:none;
vertical-align:top;
font-size:1em;
margin:0 1em 1em 0
}

div.infobox.recipe .heading,div.infobox.recipe .subheading {
font-size:1.133em;
background:#533610
}

div.infobox.recipe .wrapper {
padding:0 10px
}

div.infobox.crafting .heading,div.infobox.crafting .subheading {
background:#533610
}

div.infobox.crafting dd,div.infobox.recipe dd,div.infobox.crafting dt,div.infobox.recipe dt {
border-color:#533610
}

div.infobox.npc dd,div.infobox.npc dt {
border-color:#390
}

div.infobox.npc .heading,div.infobox.npc .subheading {
background:#390
}

div.infobox.npc .image_wrapper {
text-align:center;
padding:0;
margin:10px 0
}

div.infobox.skill dd,div.infobox.trait dd,div.infobox.skill dt,div.infobox.trait dt {
border-color:#999
}

div.infobox.skill .heading,div.infobox.trait .heading,div.infobox.skill .subheading,div.infobox.trait .subheading {
background:#444
}

div.infobox.skill .icon > div {
border:2px solid #111
}

div.infobox.trait .icon {
margin:5px 7px
}

div.infobox.effect .condition {
background:#363
}

div.infobox.effect .boon {
background:#399
}

div.infobox.pet dd,div.infobox.pet dt {
border-color:#360
}

div.infobox.pet .heading,div.infobox.pet .subheading {
background:#360
}

div.infobox.quest dd,div.infobox.quest dt {
border-color:#f90
}

div.infobox.quest .heading,div.infobox.quest .subheading {
background:#f90
}

div.infobox.area dd,div.infobox.area dt {
border-color:#306
}

div.infobox.area .heading,div.infobox.area .subheading {
background:#306
}

/** END INFOBOX **/

.main-page-title {
    background: url(images/2/2e/Background-title-white.jpg) repeat-x scroll center top #efefef;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 15px;
    border: 1px solid #ccc;
}