MediaWiki:Common.css: Difference between revisions

Latest revision as of 07:27, 20 December 2023

/* CSS placed here will be applied to all skins */
/* Base copied from http://dnd-wiki.org         */

/***** CSS placed here will be applied to all skins on the entire site. *****/

/* Printer-friendly rules */
@media print {
  #toc { display: none; }
}

/* ===== Color Variables ===== */
:root {
--vside: #f8f9fa;
--vsideborder: #a7d7f9;
--vshade: #f8f9f0;
--vshadeborder: #eaecf0;
--shaded: Lavender;
--th1: LightSkyBlue;
--th2: LightSteelBlue; 
--th3: LightGray;
--bordercolor: #c8c9f0;
}

/* ===== Grids ===== */

 /* Extra small devices (phones, 600px and down) */
 /* @media only screen and (max-width: 600px) {...} */

 /* Small devices (portrait tablets and large phones, 600px and up) */
 /* @media only screen and (min-width: 600px) {...} */

 /* Medium devices (landscape tablets, 768px and up) */
 /* @media only screen and (min-width: 768px) {...} */

 /* Large devices (laptops/desktops, 992px and up) */
 /* @media only screen and (min-width: 992px) {...} */

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* @media only screen and (min-width: 1200px) {...} */

/* ----- Grid Areas ----- */
.noticeitem {
  grid-area: notice;
}
.emptyitem {
  grid-area: empty;
}
.badgeitem {
  grid-area: badge;
}
.bctopitem {
  grid-area: bctop;
}
.breadcrumbitem {
  grid-area: breadcrumb;
}
.mycontent {
  grid-area: pagecontent;
}
.sourcesitem {
  grid-area: sources;
}
.emptyitem {
  grid-area: empty;
}
.spaceritem {
  grid-area: spacer;
}
/* ----- Grid Containers ----- */
.grid-container-3 {
  display: grid;
  grid-template-columns; repeat(3, 1fr);
  grid-column-gap: 3px;
}
.grid-container-6 {
  display: grid;
  grid-template-columns; repeat(6, 1fr);
  grid-column-gap: 3px;
}
.grid-container-12 {
  display: grid;
  grid-template-columns; repeat(12, 1fr));
  grid-column-gap: 1px;
}
.grid-container-std {
  display: grid;
  grid-column-gap: 1px;
}
.grid-container-user {
  display: grid;
  grid-column-gap: 1px;
}
@media screen and (max-width: 600px) {
  grid-template-columns: 12;
  grid-template:
    'notice notice notice notice notice notice notice notice notice notice notice notice'
    'bctop bctop bctop badge badge badge badge badge badge badge badge badge'
    'pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent'
    'sources sources sources sources sources sources sources sources sources sources sources sources';
  body: background-color:yellow;
  max-width:90vw;
}  
@media screen and (min-width: 601px) {
  grid-template-columns: repeat(12, minmax(30px, 1fr));
  grid-template:
    'bctop bctop bctop notice notice notice notice notice notice badge badge badge'
    'pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent'
    'sources sources sources sources sources sources sources sources sources sources sources sources';
  body: background-color:green;
  max-width:80vw;
} 
@media only print {
  grid-template-columns: repeat(12, minmax(50px, 1fr));
  grid-template:
    'bctop bctop bctop notice notice notice notice notice notice badge badge badge'
    'pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent badge badge badge'
    'sources sources sources sources sources sources sources sources sources sources sources sources';
} 

/* ===== Div ===== */
<!-- under global div
div.ringed {
  border-style: solid;
  border-color: var(--bordercolor);
  border-width: 1px;
  border-radius: 0.3em;
  padding: 3px;
}

div.shaded {
  background: silver;
  border: solid 1px silver;
  border-radius: 0.5em;
}
-->
div.gi {
  grid-item {
    text-align: center;
  }
}

div.gi-main {
  grid-item: pagecontent;
  grid-column: 1 / span 12; 
  grid-row-start:2;
}

div.user-main {
  grid-item: pagecontent;
  grid-column: 1 / span 12; 
  grid-row-start:2;
}

div.notice {
  grid-item: noticeitem;
  grid-column: 3 / span 8; 
  text-align: center;
  grid-row-start:1;
}

div.badge {
  grid-item: badgeitem;
  grid-column: 11 / span 2; 
  grid-row-start: 1;
}

div.user-badge {
  grid-item: badgeitem;
  grid-column: 11 / span 2; 
  grid-row: 1 / span 1;
}

div.bctop {
  grid-item: bctopitem;
  grid-column: 1 / span 2; 
  grid-row-start: 1;
}

div.breadcrumb {
  grid-item: bctopitem;
  grid-column: 1 / span 4; 
  grid-row-start: 4;
}

div.source {
  grid-item: sourceitem;
  grid-column: 1 / span 12; 
  grid-row-start: 3;
}

div.gi-3 {
  griditem: grid-container-3;
}

/* --- Flex Container --- */
.flex-container {
  display: flex;
}

/* --- Flex Grid --- */
.flex-grid {
  display: block;
}
.flex-col {
  flex: 1;
}
.flex-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    grid-template-rows: auto 1fr auto;
}
.flex-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(50px, 1fr));
    grid-template-rows: auto 1fr auto;
}

/* collapse */
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right: 0;
    float: left;
    margin-bottom: 25px;
}

.hide:hover, .show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}

/* Mediawiki > 1.23 put serif fonts in the page title, which looks worse for us than sans. */
#firstHeading {
  font-family: sans-serif;
}

/* For hiding stuff like arraymaps */
.blank {
  display: none;
}

/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: #808080; content: " (redirect)"
}
.watchlistredir {
   font-style: italic;
}

/* Giving headers and TOC a little extra space */
h2 {
   margin-top: 20px;
}
.toc {
   margin-top: 20px;
}

/* ===== Global Div ===== */
div.ringed {
  border-style: solid;
  border-color: var(--bordercolor);
  border-width: 1px;
  border-radius: 0.3em;
/*  padding: 3px; */
}

div.shaded {
  background: var(--shaded);
}



/* ===== Global Table ===== */
table {
  width: fit-content;
  border-type: solid;
  border-width: 1px;
  border-color: var(--bordercolor);
  border-radius: 0.5em; 
  background: honeydew;
  max-width: 98%;
  overflow-x: auto; 
}
table tr:nth-child(1) th:first-child {
  border-top-left-radius:0.5em;
}
table tr:nth-child(1) th:last-child {
  border-top-right-radius:0.5em;
}

tr.th1 {background: var(--th1);} /* 1st header color */
tr.th2 {background: var(--th2);} /* 2nd header color */
tr.th3 {background: var(--th3);} /* other headers color */
th {
  background: var(--th3);
}
.th1 th {
  background: var(--th1);
  font-color: white;
  border-top: 1px solid var(--th1);
} /* 1st header color */
.th1 th:first-child {
  border-top-left-radius:0.5em;
}
.th1 th:last-child {
  border-top-right-radius:0.5em;
}
.th2 th {
  background: var(--th2);
  font-color: white;
} /* 2nd header color */
.th3 th {background: var(--th3);} /* other headers color */
td {
  background: white;
}
td.toptext {
  display: inline block; 
  vertical-align: top;
}

th.locked {
  position: sticky; 
  top: 0;
}

/* Shades. */
.ivory th td {background:ivory;}
.powderb th td {background:powderblue;}

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

/* Forum formatting (by -Algorithm & -Splaka) */
.forumheader {
   border: 1px solid #aaa;
   margin-top: 1em;
   padding: 12px;
}
.forumlist td.forum_edited a {
   color: black;
   text-decoration: none;
}
.forumlist td.forum_title a {
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new {
   font-weight: bold;
   /* @embed */
   background: url(/images/4/4e/Forum_new.gif) center left no-repeat;
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new:visited {
   font-weight: normal;
   background: none;
   padding-left: 20px;
}
.forumlist th.forum_title {
   padding-left: 20px;
}

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

/* Image frame fix */
div.tright, div.tleft {
   border: 1px solid silver;
}

div.thumbinner {
   background: inherit;
   border: none;
   color: inherit;
}
#article div.thumb {
   color:inherit;
}

/* === Babel === */

div.babelbox {
   float: right;
   margin-left: 1em;
   margin-bottom: 0.5em;
   width: 246px;
   border: 1px solid #99B3FF;
   padding: 2px 0 2px 0;
}
.lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 {
   margin: 2px 4px 2px 4px; /* t, l, b, r */
   width:238px;
   border-collapse: collapse;
}
td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 {
   text-align:center;
   font-size:14pt;
   width:45px;
   height:45px;
}
td.lang-descriptionN, td.lang-description0, td.lang-description1,
td.lang-description2, td.lang-description3 {
  font-size:8pt;
  padding:4pt;
  line-height:1.25em;
}

.lang-block0 {
   border:1px solid #FFB3B3;
}
td.lang-code0 {
  background-color: #FFB3B3;
  color: black;
}
td.lang-description0 {
  background-color: #FFE0E8;
  color: black;
}

.lang-block1,  .lang-block2, .lang-block3  {
   border:1px solid #99B3FF;
}
td.lang-code1, td.lang-code2, td.lang-code3 {
  background-color: #99B3FF;
  color: black;
}
td.lang-description1,  td.lang-description2, td.lang-description3 {
  background-color: #E0E8FF;
  color: black;
}

.lang-blockN {
   border:1px solid #6EF7A7;
}
td.lang-codeN {
  background-color: #6EF7A7;
  color: black;
}
td.lang-descriptionN {
  background-color: #C5FCDC;
  color: black;
}

img {
	border: none;
	vertical-align: middle;
}

p img {
	margin: 0;
}

ul {
	line-height: 1.5em;
	list-style-type: square;
	margin: .3em 0 0 1.5em;
	padding: 0;
	/* @embed */
	list-style-image: url("w/skins/MonoBook/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;
}
#contentSub, #contentSub2 {
	font-size: 84%;
	line-height: 1.2em;
	margin: 0 0 1.4em 1em;
	color: #7d7d7d;
	width: auto;
}
span.subpages {
	display: block;
}

/* Heading changes */
#bodyContent h3 .mw-headline { border-bottom: 1px solid #8c794e; padding-bottom: .113em; }
#bodyContent h4, #bodyContent h5 { font-weight: bold; }
#bodyContent h6 {
  font-style: italic;
}
#bodyContent h4, #bodyContent h5, #bodyContent h6 {
	border-bottom: none;
}
#bodyContent h1, #bodyContent h2, #bodyContent h3 {
	margin-bottom: .6em;
}
#bodyContent h4, #bodyContent h5 {
	margin-bottom: .3em;
}
.firstHeading {
	margin-bottom: .1em;
}

.left {
        text-align: left !important;
}

/* 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%;
}

/* table standards */
table.rimage {
	float: right;
	position: relative;
	margin-left: 1em;
	margin-bottom: 1em;
	text-align: center;
}
.toccolours {
	border: 1px solid #8c794e;
	background-color: #e6d88d;
	padding: 5px;
	font-size: 95%;
}
div.townBox {
	position: relative;
	float: right;
	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;
}


/* ========================================== */
/* ================  Tables  ================ */
/* ========================================== */

.th1round th {
  background: var(--th1);
  font-color: white;
  border: solid 1px var(--bordercolor);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
} 

.th1roundleft th {
  background: var(--th1);
  font-color: white;
  border: solid 1px var(--bordercolor);
  border-top-left-radius: 0.5em;
} 

.th1roundright th {
  background: var(--th1);
  font-color: white;
  border: solid 1px var(--bordercolor);
  border-top-right-radius: 0.5em;
} 

.shaded td {
  background:silver;
  border: solid 1px silver;
  border-radius: 0.5em;
}

/* === Table alignment formatting classes === */

.leftall td, .leftall th {
  text-align: left !important;
}
.left1 td:nth-child(1), .left1 th:nth-child(1) {
  text-align: left !important;
}
.left2 td:nth-child(2), .left2 th:nth-child(2) {
  text-align: left !important;
}
.left3 td:nth-child(3), .left3 th:nth-child(3) {
  text-align: left !important;
}
.left4 td:nth-child(4), .left4 th:nth-child(4) {
  text-align: left !important;
}
.left5 td:nth-child(5), .left5 th:nth-child(5) {
  text-align: left !important;
}
.left6 td:nth-child(6), .left6 th:nth-child(6) {
  text-align: left !important;
}
.left7 td:nth-child(7), .left7 th:nth-child(7) {
  text-align: left !important;
}
.left8 td:nth-child(8), .left8 th:nth-child(8) {
  text-align: left !important;
}

.centerall td, .centerall th {
  text-align: center !important;
}
.center1 td:nth-child(1), .center1 th:nth-child(1) {
  text-align: center !important;
}
.center2 td:nth-child(2), .center2 th:nth-child(2) {
  text-align: center !important;
}
.center3 td:nth-child(3), .center3 th:nth-child(3) {
  text-align: center !important;
}
.center4 td:nth-child(4), .center4 th:nth-child(4) {
  text-align: center !important;
}
.center5 td:nth-child(5), .center5 th:nth-child(5) {
  text-align: center !important;
}
.center6 td:nth-child(6), .center6 th:nth-child(6) {
  text-align: center !important;
}
.center7 td:nth-child(7), .center7 th:nth-child(7) {
  text-align: center !important;
}
.center8 td:nth-child(8), .center8 th:nth-child(8) {
  text-align: center !important;
}

.rightall td, .rightall th {
  text-align: right !important;
}
.right1 td:nth-child(1), .right1 th:nth-child(1) {
  text-align: right !important;
}
.right2 td:nth-child(2), .right2 th:nth-child(2) {
  text-align: right !important;
}
.right3 td:nth-child(3), .right3 th:nth-child(3) {
  text-align: right !important;
}
.right4 td:nth-child(4), .right4 th:nth-child(4) {
  text-align: right !important;
}
.right5 td:nth-child(5), .right5 th:nth-child(5) {
  text-align: right !important;
}
.right6 td:nth-child(6), .right6 th:nth-child(6) {
  text-align: right !important;
}
.right7 td:nth-child(7), .right7 th:nth-child(7) {
  text-align: right !important;
}
.right8 td:nth-child(8), .right8 th:nth-child(8) {
  text-align: right !important;
}


/* ====== Zebra Table ====== */

table.zebra {
  margin:0 1px 1px 0;
  border-radius: 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: var(--bordercolor);
}

table.zebra tr:nth-child(1) th {
  background: var(--th1);
  font-color: white;
  border-top: solid 1px var(--bordercolor);
}
table.zebra tr:nth-child(1) th:first-child {
  border-top-left-radius:0.5em;
}
table.zebra tr:nth-child(1) th:last-child {
  border-top-right-radius:0.5em;
}
table.zebra tr:nth-child(5n+0) td {
  background: white;
}
table.zebra tr:nth-child(5n+1) td {
  background: white;
}
table.zebra tr:nth-child(5n+2) td {
  background: white;
}
table.zebra tr:nth-child(5n+3) td {
    background:  white;
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: gainsboro;
}
table.zebra tr:nth-child(5n+4) td {
  background: white;
}
table.zebra tr:nth-child(5n+5) td {
  background: AliceBlue;
} 


/* ======= The d20 table ======== */

/* Note that the d20 table border is set by the header of the table and the individual cells, NOT the table entity itself.
 * This allows us to do things like have the class skill list as part of the table without the table border extending to cover
 *them as well (see any 3.5e class page for an example of this).
*/
/*table.d20, table.wikitable {
  margin: 0 1em 1em 0;
  border-collapse: collapse;
  text-align: center;
}*/

table.d20, table.wikitable {
  margin: 0 1em 1em 0;
  border-radius:0.5em;
  text-align: center;
}

table.d20 th, table.wikitable th {
  vertical-align: bottom;
}

table.d20 td, table.wikitable td {
  vertical-align: top;
}

table.d20 th, table.d20 td, table.wikitable th, table.wikitable td {
  border-color: #8c794e;
  border: 1px #8c794e solid;
  padding: 0.077em 0.385em;
}

table.d20 caption, table.wikitable caption, table.monstats caption {
  margin: 0 0 0.231em;
  text-align: left;
  font-weight: bold;
  vertical-align: bottom;
  padding-top: 0.5em;
}

table.d20 caption *,
#bodyContent table.d20 caption *,
table.wikitable caption *,
#bodyContent table.wikitable caption * {
  padding: 0;
  margin: 0;
  line-height: 1.25em;
}

table.d20 caption h5,
table.d20 caption div,
table.wikitable caption h5,
table.wikitable caption div {
  float: left;
}

table.d20 caption p,
table.wikitable caption p {
  text-align: center;
}

table.d20 td.skill, table.wikitable td.skill {
  border: none;
  padding: 0;
  text-align: left;
}

table.d20 td.foot, table.wikitable td.foot {
  text-align: left;
  font-size: 0.8em;
}

table.d20 caption h5 .editsection {
  display: none;
}

table.d20 caption h5:after,
#bodyContent table.d20 caption h5:after {
  content: " ";
  white-space: pre;
}

/* ======= The FifthEd Table ======== */

/* 
 * it deviates enough from the d20 table that it warranted a separate class
 */

table.FifthEd {
  margin: 0 1em;
  border-collapse: collapse;
  min-width: 400px;
  text-align: center;  
}

table.FifthEd th {
  vertical-align: bottom;
}

table.FifthEd td {
  vertical-align: top;
}

/* ====== Dragon / Monstats tables ====== */

/* Identical to table.d20. We may not really need this to look good. */
table.monstats {
  margin-bottom: 1em;
}

table.dragon th, table.dragon td {
  border:none;
}

/* Identical to table.d20 to make things look right. Clean up our use of CSS classes with Tarkis's replacetext later. */
table.monstats th, table.monstats td {
  padding: 0.077em 0.385em;
}

table.dragon th {
  background-color: transparent !important;
  padding-right: 0.154em;
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

table.dragon td,
table.monstats tr:first-child th + th {
  text-align: left;
}

table.monstats tr.separator > * {
  border-top-color: #b39b5b;
  border-top-width: 1px;
  border-top-style: solid;
}

/* ====== Author table ====== */

table.author {
  float: right;
  clear: both;
  margin: 0 0 1em 1em;
  font-size: 90%;
  padding: 0.769em;
}

table.author caption {
  margin: 1em 0 0 1em;
  padding-bottom: 0.231em;
  font-size: smaller;
  font-style: italic;
  text-align: left;
}

table.author th.user {
  background: #8c794e;
  font-size: larger;
}

table.author tr + tr td,
table.author tr + tr th {
  vertical-align: top;
  padding: 0.077em 0.385em;
}

table.author tr + tr th {
  text-align: right;
  padding-right: 0.154em;
}

table.author tr + tr th {
  text-align: right;
  padding-left: 0.154em;
}

/* ====== AuthorLite table ====== */

table.authorlite {
  float: right;
  clear: both;
  margin: 0 0 1em 1em;
  font-size: 90%;
  padding: 0.25em;
}

table.authorlite caption {
  margin: 1em 0 0 1em;
  padding-bottom: 0.231em;
  font-size: smaller;
  font-style: italic;
  text-align: left;
}

table.authorlite th.user {
  background: #8c794e;
  font-size: larger;
}

table.authorlite tr + tr td,
table.authorlite tr + tr th {
  padding: 0.077em 0.385em;
}

table.authorlite tr + tr th {
  text-align: right;
  padding-right: 0.154em;
}

table.authorlite tr + tr th {
  text-align: right;
  padding-left: 0.154em;
}

/*  ====== Statblock table ======  */

table.statBlock caption {
  font-size: larger;
  font-weight: bold;
  line-height: 1.25em;
  padding-top: 0.5em;
  vertical-align: bottom;
}

table.statBlock caption div {
  float: left;
  padding-bottom: 0;
  margin-bottom: 0;
}

table.statBlock caption div:after {
  content: " ";
  white-space: pre;
}

table.statBlock caption p {
  text-align: right;
}

table.statBlock tr.separator td {
  border-top-color: #b39b5b;
  border-top-width: 1px;
  border-top-style: solid;
  padding: 0;
  height: 0px;
}

table.statBlock th, table.statBlock td {
  border: none;
  padding: 0.077em 0.385em;
}

table.statBlock th {
  background: inherit;
  padding-right: 0.154em;
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

table.statBlock td {
  text-align: left;
}

table.statBlock td div {
  margin: 0 0 0 1.5em;
  text-indent: -1.5em;
}

/* ====== Old-school Feat Table ====== */
table.feat {
  font-size: 0.9em;
  line-height: 1.35em;
}

table.feat caption {
  font-size: 1.2em;
  color: #180540;
}

table.feat th {
  font-size: 1.05em;
}

table.feat tr {
  vertical-align: top;
  white-space: nowrap;
}

/* Misc other useful table classes */
table.fullwidth {
  width: 100%;
}

/* Errata */
.errata {
  background: #e1f9b2;
}

/* Set the common background for elements that need it. Putting it here on the bottom in case we ever change it, easy to change everything at once by changing this value. */
div.townBox, table.dragon th {
  background: #fdf9d3;
}

table.cquote
{
  border-collapse: collapse;
  border-style: none;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
}

table.cquote td
{
  border-style: none;
  vertical-align: top;
  padding: 0.313em 10px;
}

table.cquote td.mark
{
  width: 1px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  padding: 10px;
}

.cquote .src
{
  padding-top: 10px;
  font-size: smaller;
  line-height:1em;
  text-align: right;
}

.showHideButton
{
  float: right;
  margin-left: 0.375em;
}

.showHideButton:hover
{
  cursor: pointer;
}

.collapseButton {		/* 'show'/'hide' buttons created dynamically by the        */
	float: right;		/* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
	font-weight: normal;	/* are styled here so they can be customised.              */
	text-align: right;
	width: auto;
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).

   If you want to use this feature, use Template:TOC Limit.
   Copied from Wikipedia.
*/
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 { display: none; }

/* "Column" tables, IE, having multiple columns of text on a single page. */
table.column tr { vertical-align: top; }

/* Add a new whatever Inputboxes. */

.createbox { text-align: left; width: 26em; margin: 0 2em 2em; }

/* Drop Caps */

.dropcap:first-letter { font-size: 2em; float:left; }

/* =======Striped list====== */
.zebra-list {
list-style: none;
padding: 0;
margin: 0;
color: #000;
background: inherit;
}
.zebra-list li:nth-child(3n+1) {
  text-align: left; background:inherit; !important;
}
.zebra-list li:nth-child(3n+2) {
  text-align: left; background:inherit; !important;
}
.zebra-list li:nth-child(3n+3) {
  text-align: left; background:honeydew; !important;
}


/* ===== Columns ===== */
article {
  -webkit-column-width: 240px;
     -moz-column-width: 240px;
          column-width: 240px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
article.col2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
article.col3 {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

div.col {
  -webkit-column-width: 240px;
     -moz-column-width: 240px;
          column-width: 240px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
div.col2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
div.col3 {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
div.col4 {
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}