MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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: silver;
--th1: slategray;
--th2: lightslategray;
--th3: darkgray;
--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-std {
display: grid;
grid-column-gap: 1px;
}
.grid-container-user {
display: grid;
grid-column-gap: 1px;
}
@media only screen and (max-width: 600px) {
grid-template-columns; 12;
grid-template:
'bctop bctop bctop badge badge badge badge badge badge badge badge badge'
'notice notice notice notice notice notice notice notice notice notice notice notice'
'pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent'
'sources sources sources sources sources sources sources sources sources sources sources sources';
}
@media (min-width: 601px) {
grid-template-columns; repeat(12, minmax(50px, 1fr));
grid-template:
'bctop bctop bctop bctop notice notice notice notice badge badge badge badge'
'pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent pagecontent'
//'breadcrumb breadcrumb breadcrumb breadcrumb empty empty empty empty empty empty empty empty'
'sources sources sources sources sources sources sources sources sources sources sources sources';
}
.grid-container-12 {
display: grid;
grid-template-columns; repeat(12, minmax(50px, 1fr));
grid-column-gap: 1px;
}
/* ===== 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: var(--shaded);
}
-->
div.gi {
grid-item {
text-align: center;
}
}
div.gi-main {
grid-item: pagecontent;
grid-column: 1 / span 12;
grid-row-start:3;
}
div.user-main {
grid-item: pagecontent;
grid-column: 1 / span 9;
grid-row-start:3;
}
div.notice {
grid-item: noticeitem;
grid-column: 5 / span 4;
text-align: center;
}
div.badge {
grid-item: badgeitem;
grid-column: 9 / span 4;
grid-row-start: 2;
}
div.user-badge {
grid-item: badgeitem;
grid-column: 10 / span 3;
grid-row: 2 / span 2;
}
div.bctop {
grid-item: bctopitem;
grid-column: 1 / span 4;
grid-row-start: 2;
}
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: 5;
}
div.gi-3 {
griditem: grid-container-3;
}
/* --- 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;
}
/* 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 {
display: block;
width: fit-content;
border-type: solid;
border-width: 1px;
border-color: var(--bordercolor);
border-radius: 0.5em;
background: honeydew;
max-width: 98%;
}
/* table {
display: block;
width: fit-content;
max-width: 98%;
border-type: solid;
border-width: 1px;
border-color: var(--bordercolor);
border-radius: 0.5em;
overflow-x: auto;
} */
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(--th2);
font-color: white;
}
th.th1 {
background: var(--th1);
font-color: white;
} /* 1st header color */
th.th2 {
background: var(--th2);
font-color: white;
} /* 2nd header color */
th.th3 {background: var(--th3);} /* other headers color */
td {
background: white;
}
/* 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 ================ */
/* ========================================== */
/* === 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);
background: HoneyDew;
}
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: Gainsboro;
}
/* ======= 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:rgb(238, 227, 164); !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;
}