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.
/* All CSS here will be loaded for users of the mobile site */
/* Designed for Vector skin but will need to be modified for Citizen Skin */
/* Fix compressed image width on mobile in Citizen skin */
img {
max-width:600px;
}
/* Hide the Main Page title */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading {
display: none;
}
/* Main Page Grid */
.container { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 0.8em 0.8em;
grid-auto-flow: row;
grid-template-areas:
"Banner Banner"
"Intro Intro"
"Nested NestedR"
"Misc Misc"
". .";
}
/* Mobile Styling */
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.container { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 0.8em 0.8em;
grid-auto-flow: row;
grid-template-areas:
"Banner Banner"
"Intro Intro"
"NestedR NestedR"
"Nested Nested"
"Misc Misc"
". .";
}
}
.Banner { grid-area: Banner; }
.Intro { grid-area: Intro; }
.Featured { grid-area: Featured; }
.FeaturedSponsor { grid-area: FeaturedSponsor; }
.MoreFeatured { grid-area: MoreFeatured; }
.Contents { grid-area: Contents; }
.Lore { grid-area: Lore; }
.FAQ { grid-area: FAQ; }
.Misc { grid-area: Misc; }
/* Nested Grid Styling */
.Nested { grid-area: Nested; }
.NestedR { grid-area: NestedR; }
.Nested {
display: grid;
grid-auto-rows: min-content;
grid-template-areas:
"Featured"
"FeaturedSponsor"
"MoreFeatured"
"Lore"
".";
/* grid-template-columns: repeat(1, 1fr);
grid-gap: 1em; */
}
.NestedR {
display: grid;
grid-auto-rows: min-content;
grid-template-areas:
"Contents"
"FAQ"
".";
/* grid-template-columns: repeat(1, 1fr);
grid-auto-rows: auto;
grid-gap: 1em; */
}
/* Main Page Disclaimer styling */
.mp-bordered {
margin-bottom: 0.4em;
padding: 0.4em;
border-width: 1px;
border-style: solid;
border-color: #ddd;
border-radius: 0.5em;
overflow: auto;
}
/* Removed - white-space: nowrap; background-color: #f9f9f9; added border-radius */
/* START - Styling the Main Page content boxes */
/* Changing the margins on the thumbnail in the intro */
div.Intro > div > div >.tleft {
margin: 0em 1.4em 0em 0;
}
.box {
display: inline-block;
border: 1px solid #d9d9d9;
border-radius: 0.5em;
}
/* Removed - width: 100%; border-radius: 10px 10px 0 0; background-color: #fff; */
.box .box-header {
display: block;
clear: both;
margin: 0;
border-bottom: 1px solid #d9d9d9;
padding: 8px 20px;
overflow: hidden;
}
/* Removed - border-radius: 10px 10px 0 0; border-top: 1px solid #fff; background-color: #f2f2f2; */
.box-header {
text-align: right;
font-size: 120%;
font-weight: bold;
font-family: inherit;
margin: 0.5em;
}
.box-content {
margin: 0.5em;
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.6em;
}
.Featured > .box > .box-header {
background-color: #cef2e0;
border-bottom-color: #cef2e0;
}
.Featured > .box {
border-color: #cef2e0;
background-color: #f5fffa;
}
.MoreFeatured > .box > .box-header {
background-color: #cef2e0;
border-bottom-color: #cef2e0;
}
.MoreFeatured > .box {
border-color: #cef2e0;
background-color: #f5fffa;
}
/* FEATURED SPONSOR SECTION */
.FeaturedSponsor > .box {
border-color: #afa3bf;
background-color: #faf5ff;
}
.FeaturedSponsor > .box > .box-header {
background-color: #ddcef2;
border-bottom-color: #afa3bf;
}
.featuredtable {
background-color:#faf5ff;
color:#202122;
margin:1em 0;
border:1px solid #afa3bf;
border-collapse:collapse
}
.featuredtable > tr > th,
.featuredtable > tr > td,
.featuredtable > * > tr > th,
.featuredtable > * > tr > td {
border:1px solid #afa3bf;
padding:0.2em 0.4em;
}
.featuredtable > tr > th,
.featuredtable > * > tr > th {
background-color:#ddcef2;
text-align:center
}
.featuredtable > caption {
font-weight:bold
}
/* END FEATURED SPONSOR */
.Lore > .box > .box-header {
background-color: #cef2e0;
border-bottom-color: #cef2e0;
}
.Lore > .box {
border-color: #cef2e0;
background-color: #f5fffa;
}
/* GREEN TABLES */
.web3table {
background-color:#f5fffa;
color:#202122;
margin:1em 0;
border:1px solid #ABC9BA;
border-collapse:collapse
}
/* border:1px solid #cef2e0; */
.web3table > tr > th,
.web3table > tr > td,
.web3table > * > tr > th,
.web3table > * > tr > td {
border:1px solid #ABC9BA;
padding:0.2em 0.4em;
}
.web3table > tr > th,
.web3table > * > tr > th {
background-color:#cef2e0;
text-align:center
}
.web3table > caption {
font-weight:bold
}
/*BLUE BOX*/
.Contents > .box > .box-header {
background-color: #cedff2;
border-bottom-color: #cedff2;
}
.Contents > .box {
border-color: #cedff2;
background-color: #f5faff;
}
.FAQ > .box > .box-header {
background-color: #cedff2;
border-bottom-color: #cedff2;
}
.FAQ > .box {
border-color: #cedff2;
background-color: #f5faff;
}
/* BLUE TABLES */
.arttable {
background-color:#f5faff;
color:#202122;
margin:1em 0;
border:1px solid #ABB9C9;
border-collapse:collapse
}
/* border:1px solid #cedff2; */
.arttable > tr > th,
.arttable > tr > td,
.arttable > * > tr > th,
.arttable > * > tr > td {
border:1px solid #ABB9C9;
padding:0.2em 0.4em;
}
.arttable > tr > th,
.arttable > * > tr > th {
background-color:#cedff2;
text-align:center
}
.arttable > caption {
font-weight:bold
}
/* ORANGE TABLES */
.orgtable {
background-color:#FFF8EB;
color:#202122;
margin:1em 0;
border:1px solid #ABB9C9;
border-collapse:collapse
}
.orgtable > tr > th,
.orgtable > tr > td,
.orgtable > * > tr > th,
.orgtable > * > tr > td {
border:1px solid #ABB9C9;
padding:0.2em 0.4em;
}
.orgtable > tr > th,
.orgtable > * > tr > th {
background-color:#FFDEA6;
text-align:center
}
.orgtable > caption {
font-weight:bold
}
/* PURPLE BOX */
.Misc > .box > .box-header {
background-color: #ddcef2;
border-bottom-color: #afa3bf;
}
.Misc > .box {
border-color: #afa3bf;
background-color: #faf5ff;
}
.mp-bordered {
background-color: #eeeeee;
}
/* END */