Cookies help us deliver our services. By using our services, you agree to our use of cookies. More information

We are currently changing the appearance of the wiki to a responsive theme to eliminate switching between desktop and mobile themes. Please report any issues on the Wiki Support page

 Actions

MediaWiki

Difference between revisions of "Common.css"

From Dragon Mania Legends Wiki

m
m (Add some styles for a scroll to top button)
Line 187: Line 187:
 
.mw-changeslist-legend dt {
 
.mw-changeslist-legend dt {
 
     font-size: 0.8em;
 
     font-size: 0.8em;
 +
}
 +
/* ---- Scroll to Top button ---- */
 +
 +
#topBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 16px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: rgba(0, 0, 0, 0.3);
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 10px;
 +
  border-radius: 4px;
 +
}
 +
#topBtn:hover {
 +
  background-color: #555;
 
}
 
}
  

Revision as of 23:34, 13 July 2019

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

/* ------------------------------- NOTE ------------------------------- */
/* - Code formatted using current MediaWiki convention/recommendation - */
/* - See https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS - */
/* -------------------------------------------------------------------- */

/* ------------------------------------------------ */
/* --------------------- Staff ---------------------*/
/* ------------------------------------------------ */

/* ---- Mark staff members ---- */
/* Bureaucrats */
a[href="/User:Kimberly"], 
a[href="/User:Soukupmi"], 
a[href="/User:Star_Warden"],
a[href="/User:Vercanos"] {
	color: #aa00bb !important
}
/* Administrators */
a[href="/User:Blazing_Aquila"], 
a[href="/User:Ophexis"] {
	color:#ff6700 !important
}
/* Moderators */
a[href="/User:Stormy"], 
a[href="/User:Cryscryb2"], 
a[href="/User:Yannick"] {
	color: green !important
}

/* ---- Mark Staff on history pages ---- */-text
/* Bureaucrats */
.history-user a[href="/User:Kimberly"]:after,
.history-user a[href="/User:Star_Warden"]:after,
.history-user a[href="/User:Soukupmi"]:after,
.history-user a[href="/User:Vercanos"]:after {
    content: " (Bureaucrat)";
    color: #b57edc;
    font-size: 85%;
}
/* Administrators */
.history-user a[href="/User:Blazing_Aquila"]:after,
.history-user a[href="/User:Ophexis"]:after {
    content: " (Administrator)";
    color: #b7410e;
    font-size: 85%;
}
/* Moderators */
.history-user a[href="/User:Stormy"]:after,
.history-user a[href="/User:Cryscryb2"]:after,
.history-user a[href="/User:Yannick"]:after {
	content: " (Moderator)";
	color: #228b22;
	font-size: 85%;
}

/* ---- Format staff page tables ---- */
.bureaucrats-purple {
	border:1px solid purple!important; 
	vertical-align:top;
}
.administrators-orange {
	border:1px solid orange!important;  
	vertical-align:top;
}
.moderators-green {
	border:1px solid green!important;  
	vertical-align:top;
}
.former-staff-black {
	border:1px solid black!important;  
	vertical-align:top;
}
.bureaucrats-purple tr,
.administrators-orange tr, 
.moderators-green tr, 
.former-staff-black tr {
	border-top: 1px solid lightgray;
	padding: 0.2em 0.4em;
}
.bureaucrats-purple tbody tr td,
.administrators-orange tbody tr td, 
.moderators-green tbody tr td, 
.former-staff-black tbody tr td {
	border: none;
}
.bureaucrats-purple tr:first-of-type,
.administrators-orange tr:first-of-type,
.moderators-green tr:first-of-type,
.former-staff-black tr:first-of-type {
	border-top: none !important;
}

/* ---- Main Page ----*/
/* Hide title */
body.page-Main_Page .firstHeading, body.page-Main_Page #lastmod {
    color: #fff;
    font-size: 1em;
	border-bottom: 0px;
}
/* Hide comments on mainpage */
body.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns-0.ns-subject.page-Main_Page.rootpage-Main_Page.skin-pivot.action-view.webfonts-changed div.off-canvas-wrap.docs-wrap div.inner-wrap section#main-section.main-section div#page-content div.row div#p-cactions.large-10.medium-9.columns div#categories.row div.small-12.columns div.group div#cs-comments {
	display:none;
}
/* Element table fix */
.element-table tbody tr th sup a.image img {
	position: relative;
	top: 4px;
}
/* Hide translation tool 
#google_translate_element {
    margin-left: 10px;
}*/

/* ------------------------------------------------ */
/* --------------- General styling ---------------- */
/* ------------------------------------------------ */

/* ---- Import Grobold webfont across themes ---- */
@font-face {
	font-family: 'grobold';
	src: url('customizations/fonts/grobold.woff2') format('woff2'), /* Super Modern Browsers */
	   url('customizations/fonts/grobold.woff') format('woff'), /* Pretty Modern Browsers */
	   url('customizations/fonts/grobold.ttf')  format('truetype'); /* Safari, Android, iOS */
}
/* Set global root font size, all font rem (not em) values below this resize in relation to this in all themes */
html {
	font-size:16px;
}

/* ---- Custom cursor ---- */
/* Global cursor */
body {
	cursor: url('http://dragon-mania-legends-wiki.mobga.me/images/1/1a/Cursor_Icon.png'), pointer;
}
/* Link cursor */
a:hover,
label {
  cursor: url('http://dragon-mania-legends-wiki.mobga.me/images/f/f4/Indicator_Arrow_Icon.png'), pointer; 
}
/* ---- End ---- */

body {
	background: url("/images/d/de/DMLWIKI-Background-Initial-Size.jpg") no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
/* Allow centered tables */
div.centered,
table.centered,
ul.centered,
.centered {
	margin-left: auto;
	margin-right: auto;
}
.thumbinner {
	border: transparent;
	padding: 3px !important;
	background-color: transparent;
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}

/* ---- New special pages ---- */
a.new[title~="Special:MultiUpload"] {
	color: #002BB8 !important;
}
a.new[title~="Special:NewPage"] {
	color: #002BB8 !important;
}

/* ---- Heading fonts to sans-serif (no feet) ---- */
h2, h3, h4, h5, h6, 
.mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
	font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}
#firstHeading {
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
}
/* Recent page legend */
.mw-changeslist-legend dd,
.mw-changeslist-legend dt {
    font-size: 0.8em;
}
/* ---- Scroll to Top button ---- */

#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}
#topBtn:hover {
  background-color: #555;
}

/* --------------------------------------- */
/* ---------- Template classes ----------- */
/* --------------------------------------- */

.roundy {
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-icab-border-radius: 10px;
	-o-border-radius: 10px;
}
.leaderboard-table img {
	position: relative;
	bottom: 5px;
}

/* ---- Side infoboxes ---- */
.side-infobox {
	width: 300px;
	float:right;
	margin-left:30px;
	margin-bottom:30px;
	min-width:270px;
}
.side-infobox table {
	max-width:500px;
}
.side-infobox p {
	margin-bottom: 5px;
    padding-top: 4px;
}
.gallery-infobox span.oo-ui-iconElement-icon.oo-ui-icon-imageGallery {
	display:none;
}

/* ---- Dragonbox and infobox heading styles go here ---- */
.dragonbox-header-links {
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#fff; 
	font-size: 1.3rem; 
	letter-spacing: 1px; 
	text-shadow: 1px 1px #000000;
}
.dragonbox-header-links > a, 
.dragonbox-header-links > a:hover {
	color:#fff;
}
/* ---- Legend styles (event legend, type legend) ---- */
.legend {
	font-size: 0.9em;
}

/* ---- DML Calendar styles ---- */
.wikitable.dml-calendar {
	background-color: #ebc01b;
	text-align: center;
}
.wikitable.dml-calendar > tr > th, 
.wikitable.dml-calendar > * > tr > th {
	color:#fff;    
	background-color: #ebc01b;
}
.wikitable.dml-calendar > tr > td,
.wikitable.dml-calendar > * > tr > td {
	height: 120px;
	font-size: 0.8rem!important;
	min-width: 110px;
	vertical-align: bottom;
	border-top: #ebc01b;
	padding-bottom: 5px;
}
.wikitable.dml-calendar > tr > td img,
.wikitable.dml-calendar > * > tr > td img {
	max-width: 90px;
}
/* Header rows */
table.wikitable.dml-calendar > * > tr > th {
	border-bottom:#ebc01b;
}
.wikitable.dml-calendar > * > tr > th.purple,
.wikitable.dml-calendar > * > tr > td.purple {
    background-color:#a634e4!important;
}
.wikitable.dml-calendar > * > tr > th.ltblue,
.wikitable.dml-calendar > * > tr > td.ltblue {
    background-color:#52a2eb!important;
}
/* Text + links for purple cells white */
.wikitable.dml-calendar > tr > td.purple,
.wikitable.dml-calendar > tr > td.purple a,
.wikitable.dml-calendar > * > tr > td.purple,
.wikitable.dml-calendar > * > tr > td.purple a,
.wikitable.dml-calendar > tr > td.ltblue,
.wikitable.dml-calendar > tr > td.ltblue a,
.wikitable.dml-calendar > * > tr > td.ltblue,
.wikitable.dml-calendar > * > tr > td.ltblue a {
	color:#fff!important;
}
.wikitable.dml-calendar > tr > th span, 
.wikitable.dml-calendar > * > tr > th span {
    color: #000;
    font-weight:normal;
}

/* ---- mainpage specific box classes ---- */
.ltd-countdown div.floatright a img {
	margin-left: 0.3em;
}

/* ---- Unclear if below styles are still used ---- */
.infotextwidget {
	background-color:rgba(255,255,255,0.5);
	border-color:rgba(255,255,255,0.7);
	border-style:solid;
	border-width:2px;
	border-radius:10px;
	text-align:center;
	font-size:24px;
	font-weight:600;
	position:relative;
}
.textwidget, .cd {
	padding:5px;
	background-color:rgba(255,255,255,0.5);
	border-color:rgba(255,255,255,0.7);
	border-style:solid;
	border-width:2px;
	border-radius:10px;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.textwidget {
    width: 100%;
}
.textwidget2 {
	padding:5px;
	background-color:#FBAC33;
	border-color:#FDFF00;
	border-style:solid;
	border-width:2px;
	border-radius:10px;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.intothing {
	box-shadow:0px 0px 15px white inset;
	border: 3px solid #8a8;
	border-color:#F0BF11;
	margin-top: 0.2em;
	padding: 0.2em;
	text-align: center;
}
.intothing2 {
	box-shadow:0px 0px 15px white inset;
	width: 50%;
	border-style:solid;
	border-color:#858585;
	border-radius:10px;
	border-width:10px 0 10px 0;
	position:relative;
	padding:4px;
}
.intothing3 {
	box-shadow:0px 0px 15px white inset;
	width: 65%;
	border-style:solid;
	border-color:#9E0021;
	border-radius:10px;
	border-width:10px 0 10px 0;
	position:relative;
	padding:1px;
}
.intothing4 {
	background-color:#F69705;
	box-shadow:0px 0px 15px white inset;
	width: 65%;
	border-style:solid;
	border-color:#FBAC33;
	border-radius:10px;
	border-width:10px 0 10px 0;
	position:relative;
	padding:4px;
}
/* ---- End unclear if still used ----*/

/* ------------------------------------------------------------------------------------ */
/* ----------- Gallery adjustments OLD styles were causing issues, removed ------------ */ 
/* -- Use the right syntax https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax -- */
/* ------------------------------------------------------------------------------------ */

/* New gallery (mode=slideshow) styles */
/* Wrap gallery in a div class="gallery-sm" */
.gallery-sm img { /* use on div wrapped around gallery to limit height */
	max-height:100px;
}
/* Wrap gallery in a div class="gallery-med" */
.gallery-med img { /* use on div wrapped around gallery to limit height */
	max-height:200px;
}
/* Wrap gallery in a div class="gallery-med" */
.gallery-lg img { /* use on div wrapped around gallery to limit height */
	max-height:300px;
}
/* Fix broken thumbnails when showthumbnails is set as parameter on slideshow */
li.gallerybox {
    display: inline-block;
}
/* ---- Slideshow gallery ---- */
/*  Thumbnails, reduce padding and thus height */
.side-infobox li.gallerybox > div > div.thumb > div {
	margin:0.5em auto!important;
}
/* Reduce gallerytext size and make bold */
.side-infobox .gallerytext p {
    font-size: 0.8rem!important;
    font-weight: bold;
}
/* Align thumbs to the bottom so text lines up - all galleries*/
li.gallerybox {
	vertical-align: bottom;
}
/* Adjustments to only galleries with .gallery-infobox class */
.gallery-infobox ul.gallery.mw-gallery-slideshow {
    margin-bottom: 1em!important; /* gallery thumbnails hidden */
}
.gallery-infobox .mw-gallery-slideshow-caption {
	display:none; /* Don't need captions below imge and thumbs */
}
.gallery-infobox > ul > li.mw-gallery-slideshow-thumbnails-toggled {
	margin-bottom: 0px; /* no margin between img and thumbs when thumbs visible */
}
.gallery-infobox ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled {
    margin-bottom: 0.2em; /* small margin below thumbnails when visible */
}

/* ------- Fixed header scrolling tables ------- */
/* ---- DO NOT CHANGE STUFF IN THIS SECTION ---- */	
/*---------------------------------------------- */	
/* Fixed Header Wiki Table Styles */	
.fixed_header{	
    table-layout: fixed;
    border-collapse: collapse;	
}	
.fixed_header tbody {	
	display:block;	
	/* width: 100%; */	
	overflow: auto;	
	height: 550px;	
	-webkit-overflow-scrolling: touch;	
}	
.fixed_header thead tr {	
	display: block;	
}	
.fixed_header thead {	
	/* background: black; */	
	color:#fff;	
}		
.fixed_header th, .fixed_header td {	
	/* padding: 5px; */	
	text-align: left;	
	/* width: 200px;*/	
}	
/* ---- END fixed header scrollable tables ----*/
/* ------------------------------------------------------------- */
/* ---------------------- Resuable Styles ---------------------- */
/* ------------------------------------------------------------- */

.unreleased {
    width: 60%;
    height: auto;
    min-height: 110px;
    line-height: 1.5em;
    text-align: center;
    border-top: 10px solid #858585;
    border-bottom: 10px solid #858585;
    padding: 20px 10px 10px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #fff;
    box-shadow: -1px 1px 4px 0px rgba(101,101,101,0.75);
    -webkit-box-shadow: -1px 1px 4px 0px rgba(101,101,101,0.75);
    -moz-box-shadow: -1px 1px 4px 0px rgba(101,101,101,0.75);
    margin:0px auto 30px auto;
}
.unreleased .floatleft {
	margin-top: -10px;
}
/* layers on top of unreleased style, changes border + bg color */
.uncertain {
	background-color: #f3bc5b;
    border-color: #e79403;
}

.note, 
.reference-text {
	font-size: 0.8rem;
    font-style: italic;
}
.note-box {
	background-color:#fff; 
	border:1px; border-style:solid; 
	border-color:#969696;
	padding:10px;
}

.orange-box {
    background-color: #f0bf11;
    padding: 1px 7px 1px 7px;
    border-right: 5px solid #f6f6f6;
}
.white-inner {
    background-color: #fff;
    border-radius: 1em;
    margin: 7px 0px 7px 0px;
	padding: 20px 14px;
	position: relative;
}
.purple-gradient-inner {
    border-radius: 1em;
    margin: 7px 0px 7px 0px;
	padding: 20px 14px;
	position: relative;
	background: rgb(19,18,51); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(19,18,51) 0%, rgb(162,85,157) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(19,18,51) 0%,rgb(162,85,157) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(19,18,51) 0%,rgb(162,85,157) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131233', endColorstr='#a2559d',GradientType=0 ); /* IE6-9 */
}

/* Apply Grobold text styles anywhere as needed (for light or dark backgrounds) */
.dml-text-light,
.dml-text-light a { /* White text, black dropshadow */
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:1.2rem;
	color: #fff;
    text-shadow: 1px 1px #000;
    line-height:normal;
}
.dml-text-light a:active,
.dml-text-light a:hover {
	color: #fff!important;
	text-decoration:none;
}
.dml-text-dark,
.dml-text-dark a { /* Black text, white dropshadow */
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:1.2rem;
	color: #444!important;
	text-decoration:none;
	line-height:normal;
}
.dml-text-dark a:active,
.dml-text-dark a:hover {
	color: #444!important;
	text-decoration:none;
}

/* ---- Reusable Banners ---- */
.dml-banner {
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff;
    text-shadow: 1px 1px #000;
	letter-spacing: 1px;
	line-height: 1.2em;
	text-decoration: none;
	text-transform: uppercase;
	border: 5px solid #fff;
	width:100%;
	/* button color with fallback color for older browsers */
	background: rgb(231,148,17); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(231,148,17) 0%, rgb(240,191,17) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(231,148,17) 0%,rgb(240,191,17) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(231,148,17) 0%,rgb(240,191,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e79411', endColorstr='#f0bf11',GradientType=0 ); /* IE6-9 */
	-moz-border-radius: .4em .4em;
	-webkit-border-radius: .4em .4em;
	display: inline-block;
	padding: 10px 8px 10px 10px;
	border: 3px solid #fff;
	margin-top: 8px;
	overflow: hidden;
}
.criss-cross { /* Adds CSS to skew the banners as per game shapes */
    border-radius: 15px 5px;
}
.skew { /* Adds a shape skew to be layered with other styles */
	-moz-transform: skew(-2deg, 0deg);
	-webkit-transform: skew(-2deg, 0deg);
	-o-transform: skew(-2deg, 0deg);
	-ms-transform: skew(-2deg, 0deg);
	transform: skew(-2deg, 0deg);
}
/* ---- Main page title text, targeted in media queries to adjust to screen size ---- */
.lg-text  { /* font adjusted on mobile below */
	font-size:2.5rem;
	line-height:normal;
}
.med-text { /* font adjusted on mobile below */
	font-size:1.8rem;
	line-height:normal;
}
.sm-text { /* font adjusted on mobile below */
	font-size:1.3rem;
	line-height:normal;
}
.sm-bdy-text {
	font-size:1rem;
}

/* ---- Styling options ---- */
.center {
    text-align: center!important;
}
.no-padding {
	padding:0px!important;
}
.no-lrpadding {
	padding-left:0px!important;
	padding-right:0px!important;
}
.no-tbpadding {
	padding-top:0px!important;
	padding-bottom:0px!important;
}
.no-margins {
	margin: 0px!important;
}
.uppercase {
	text-transform:uppercase;
}
.lowercase {
	text-transform:lowercase;
}
.capitalize {
	text-transform: capitalize;
}
.full-width {
	width:100%;
}

/* Flip horizontal */
.flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
/* Flip vertical */
.flip-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.scroll-all {
	overflow:auto!important;
	-webkit-overflow-scrolling: touch;
}
.float-r {
	float:right;
	margin-left:1em;
	margin-bottom:1em;
	text-align:right;
	max-width:400px; /* Avoid images stretching too large on very large screens */
}
.float-l {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	text-align:left;
	max-width:400px; /* Avoid images stretching too large on very large screens */
}

/* ---- Base CSS for DML Buttons followed by colors ---- */
.dmlbtn,
.dmlbtn a {
	/* button base shared by all buttons, affecting all buttons and tabs */
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	position: relative;
	display: inline-block;
	letter-spacing: 1px;
	line-height: 1.2em;
}
.dmlbtn {
	/* base affecting all buttons and tabs */
	font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	position: relative;
	display: inline-block;
	letter-spacing: 1px;
}
.sz-sm {
	font-size: 0.7rem;
	text-shadow: 1px 1px #333333;
	border-bottom: 0.1rem solid #1e9813;
	border-radius: 0.2rem;
	padding: 0.3rem 0.3rem 0.1rem 0.3rem;
	top: -1px;
	min-width: 0.9rem;
}
.sz-med {
	font-size: 0.8rem;
	text-shadow: 1px 1px #333333;
	border-bottom: 0.2rem solid #1e9813;
	border-radius: 0.3rem;
	padding: 0.5rem 0.5rem 0.3rem 0.5rem;
	min-width: 1.2rem;
	margin: 0px 5px 5px 0px;
}
.sz-lg {
	font-size: 1rem;
	text-shadow: 1px 1px #333333;
	border-bottom: 0.3rem solid #1e9813;
	border-radius: 0.5rem;
	padding: 0.7rem 0.7rem 0.4rem 0.7rem;
	min-width: 1.6rem;
	margin: 0px 5px 5px 0px;
}
.style-cir {
	border-radius: 3rem;
	padding: 0.17rem 0.2rem 0.1rem 0.2rem;
}
.sz-sm.style-cir {
    font-size: 0.65rem;
    padding-top: 0.33rem;
    min-height: 2em;
    min-width: 2em;
}
.sz-med.style-cir {
	padding-top: 0.45rem;
	min-height: 2em;
	min-width: 2em;
}
.sz-lg.style-cir {
	padding-top: 0.6rem;
	min-height: 2em;
	min-width: 2em;
}
.style-tab {
	border-radius: 0.4rem 0.4rem 0rem 0rem;
}
.style-tab-lt {
	border-radius: 0.3rem 0rem 0rem 0.3rem;
}
.style-tab-rt {
	border-radius: 0rem 0.3rem 0.3rem 0rem;
}

/* button colors for dmlbtn bases that already have sizes/shapes assigned */
.green {
  	/* button color with fallback color for older browsers */
	background: rgb(159,222,35); /* Old browsers */
	background: -moz-linear-gradient(top,  rgb(159,222,35) 0%, rgb(60,189,54) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgb(159,222,35) 0%,rgb(60,189,54) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgb(159,222,35) 0%,rgb(60,189,54) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fde23', endColorstr='#3cbd36',GradientType=0 ); /* IE6-9 */
	border-color: #1e9a14;
}
.green:hover {
  /* button color with fallback color for older browsers */
	background: rgb(189,229,80); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(189,229,80) 0%, rgb(99,202,94) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(189,229,80) 0%,rgb(99,202,94) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(189,229,80) 0%,rgb(99,202,94) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bde550', endColorstr='#63ca5e',GradientType=0 ); /* IE6-9 */
}
.lt-blue {
  /* button color with fallback color for older browsers */
	background: rgb(81,176,235); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(81,176,235) 0%, rgb(22,115,249) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(81,176,235) 0%,rgb(22,115,249) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(81,176,235) 0%,rgb(22,115,249) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51b0eb', endColorstr='#1673f9',GradientType=0 ); /* IE6-9 */
  	border-color: #0d4c8d;
}
.lt-blue:hover {
	background: rgb(93,198,245); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(93,198,245) 0%, rgb(26,130,253) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(93,198,245) 0%,rgb(26,130,253) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(93,198,245) 0%,rgb(26,130,253) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dc6f5', endColorstr='#1a82fd',GradientType=0 ); /* IE6-9 */
}
.blue {
	/* button color with fallback color for older browsers */
	background: rgb(72,132,247); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(72,132,247) 0%, rgb(31,72,156) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(72,132,247) 0%,rgb(31,72,156) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(72,132,247) 0%,rgb(31,72,156) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4884f7', endColorstr='#1f489c',GradientType=0 ); /* IE6-9 */
	border-color: #0e2459;
}
.blue:hover {
	background: rgb(84,151,252); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(84,151,252) 0%, rgb(37,83,181) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(84,151,252) 0%,rgb(37,83,181) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(84,151,252) 0%,rgb(37,83,181) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5497fc', endColorstr='#2553b5',GradientType=0 ); /* IE6-9 */
}
.red {
	/* button color with fallback color for older browsers */
	background: rgb(247,124,123); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(247,124,123) 0%, rgb(226,56,56) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(247,124,123) 0%,rgb(226,56,56) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(247,124,123) 0%,rgb(226,56,56) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77c7b', endColorstr='#e23838',GradientType=0 ); /* IE6-9 */
	border-color: #cb1414;
}
.red:hover {
	background: rgb(254,150,152); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(254,150,152) 0%, rgb(246,69,69) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(254,150,152) 0%,rgb(246,69,69) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(254,150,152) 0%,rgb(246,69,69) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9698', endColorstr='#f64545',GradientType=0 ); /* IE6-9 */
}
.orange {
  /* button color with fallback color for older browsers */
	background: rgb(250,218,75); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(250,218,75) 0%, rgb(231,166,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(250,218,75) 0%,rgb(231,166,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(250,218,75) 0%,rgb(231,166,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fada4b', endColorstr='#e7a600',GradientType=0 ); /* IE6-9 */
  	border-color: #df8600;
}
.orange:hover {
	/* button color with fallback color for older browsers */
	background: rgb(252,226,76); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(252,226,76) 0%, rgb(239,177,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(252,226,76) 0%,rgb(239,177,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(252,226,76) 0%,rgb(239,177,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce24c', endColorstr='#efb101',GradientType=0 ); /* IE6-9 */
	border-color: #df8600;
}
.gray,
.grey {
	/* button color with fallback color for older browsers */
	background: rgb(151,151,162); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(151,151,162) 0%, rgb(88,94,105) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(151,151,162) 0%,rgb(88,94,105) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(151,151,162) 0%,rgb(88,94,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9797a2', endColorstr='#585e69',GradientType=0 ); /* IE6-9 */
	border-color: #383a42;
}
.gray:hover,
.grey:hover {
	/* button color with fallback color for older browsers */
	background: rgb(170,170,182); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(170,170,182) 0%, rgb(100,108,121) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(170,170,182) 0%,rgb(100,108,121) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(170,170,182) 0%,rgb(100,108,121) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaab6', endColorstr='#646c79',GradientType=0 ); /* IE6-9 */
	border-color: #383a42;
}
/* --- End reusable buttons --* /

/* ------------------------------------------------ */
/* ------------------ Extensions ------------------ */
/* ------------------------------------------------ */
/* ---- Forum ---- */
.mw-wikiforum-rightside img {
  width: 25px;
  margin: 5px 10px;
}
/* Prevent forum posts breaking words */
td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub {
    word-break: normal;
}

/* ---- Comment Streams ---- */
.cs-button img {
    width:30px;
    height:30px;
}
/* fix comment (below pages) buttons from taking up so much space making rows huge */
.cs-button {
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
.cs-comment-button-label {
    padding-left: 5px;
    color: #222;
}
.cs-comment-body p {
margin-bottom:0px;
}
h2.flow-topic-title {
    font-size: 1.2em!important;
}
/* ---- Facebook ---- */
.facebook-widget {
	background: #6B437D; /* Old browsers */
	background: -webkit-linear-gradient(top, rgb(28,25,61) 0%,rgb(174,95,160) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -moz-linear-gradient(top, rgb(28,25,61) 0%, rgb(174,95,160) 100%); /* FF3.6-15 */
	background: linear-gradient(to bottom, rgb(28,25,61) 0%,rgb(174,95,160) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c193d', endColorstr='#ae5fa0',GradientType=0 ); /* IE6-9 */
	border-radius: 1em;
}
/* -- Responsive Video Embed Container -- */
.embed-wrapper {
	max-width:600px;
	max-height:338px;
}
.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- Tabber ---- */
/* Wildcard selector - starts with () */

div[id^="tabber-"] {
	margin:5px!important;
}
ul.tabbernav {
    margin-left: 0px!important;
}
.tabber .tabbertab {
    background-color: #fff;
}

/* ---- Other interface elements and widgets --- */

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #fde5bc;
}

/* ---- Notifications ---- */
.oo-ui-popupWidget-popup {
    font-size: .8em!important;
}
.oo-ui-popupWidget .oo-ui-popupWidget-anchor {
    margin-left: 0px!important;
}
.oo-ui-popupWidget-body {
	width:100%!important;
}
.oo-ui-decoratedOptionWidget .oo-ui-labelElement-label {
	line-height: 1em;
	margin: 0px 5px;
	font-size:1em!important;
}
div.mw-indicator-mw-helplink,
div#mw-indicator-mw-helplink,
.mw-indicator,
.mw-indicators,
div.mw-indicator
div.mw-indicators,
div.mw-indicators.mw-body-content,
#mw-indicator-mw-helplink a {
	float:right;
	display:none!important;
}

/* ------------------------------------------------------------------ */
/* -------- Adjustments to Theme for Mobile Responsive views -------- */
/* ----------------------- Via Media Queries ------------------------ */
/* ------------------------------------------------------------------ */

/*    Most common screen sizes to media query
/*    --------------------------------
/*    1920x1080 (large desktop): 7.35%
/*    1440x900 (average desktop): 3.17%
/*    1366x768 (average laptop): 11.98%
/*    720x1280 (large mobile): 2.74% 
/*    375x667 (average mobile): 5%
/*    360x640 (small mobile): 22.64%
*/

/* ---------- Mobile tweaks for future responsive theme ---------- */
/* -- Most tweaks are due to mainpage page within a page design -- */
/* ------ Hence why these don't all adhere to common sizes ------- */

/* -------------------- At 1920 px wide or more ------------------ */
@media only screen and (min-width: 1920px) {
	.main-pg small-8 {
		max-width: 1240px;
	}
	.main-page small-4 {
		max-width:414px;
	}
}
/* --------------- At 1330 px wide or less ---------------- */
/* -- To prevent issues that arise on mainpage at this size */
@media only screen and (max-width: 1330px) {
    .main-pg.medium-6 {
    	width: 100%;
    }
	.small-block-grid-5 > li {
    	font-size: 0.8rem;
	}
	.lg-text { /* font adjusted on mobile below */
		font-size:1.9rem;
	}
	.sm-text {
	    font-size: 0.9rem;
	}
}
/* ---- At 1080 px wide or more ---- */
@media only screen and (min-width: 1080px) {
	/* -- Mainpage only grid changes for mobile views --*/
	.main-pg.small-8 {
	    width: 75%;
	}
	.main-pg.small-4 {
	    width: 25%;
	}
}
/* ---- At 1130 px wide down to 960px (TEMP) ---- */

@media only screen and (max-width: 1130px) and (min-width: 960px)  {
/* Temp setting for leaderboard table that needs to be redesigned + concensed with divs */
	.leaderboard-table th,
	.leaderboard-table td {
		font-size:0.9rem;
	}
}
/* ---- At 1080 px wide or LESS ---- */
@media only screen and (max-width: 1080px) {

	.lg-text { /* font adjusted on mobile below */
		font-size:1.4rem;
	}
	.small-block-grid-3 > li {
		width: 100%;
	}
	ul .small-block-grid-3 {
		margin-left: 0.2em;
	}
	div.event-slider {
	    max-height: 400px;
	    overflow-y: scroll;
	}
	li.gallerybox div.thumb img {
	    max-width: 280px;
	}
	/* Class that adds a more indicator to scrolling objects */
	.more-scroll { /* For smooth transition */
		-webkit-overflow-scrolling : touch!important;
	}
	/* Action message inserted and positioned to parent div */
	.more-scroll:after {
		font-size: 0.8em;
		line-height: 1.2rem;
	    content:"more \2195";
	    position:absolute;
	    bottom: 20px;
	    color: #fff;
	    z-index: 999;
	    background-color: rgba(0, 0, 0, 0.3);
	    padding: 0px 5px 0px 5px;
	    border-radius: 5px;
	    -webkit-box-shadow: 0px 0px 6px 0px rgba(255,255,255,255.52);
	    -moz-box-shadow: 0px 0px 6px 0px rgba(255,255,255,0.52);
	    box-shadow: 0px 0px 6px 10px rgba(255,255,255,0.52);
	    -webkit-transform: translate3d(0,0,0); /* silly safari fix */
	    -webkit-overflow-scrolling : touch!important;
	}	
}

/* -- At 1024 px wide or less -- */
@media only screen and (max-width: 1024px) {
	.small-block-grid-5 > li {
    	font-size: .7rem;
	}
	.side-infobox {
		width:100%;
		margin-left:0px;
		text-align: center;
		clear: both; /* Required so content doesn't disappear behind now centered eventbox */
    	float: none; /* Required so content doesn't disappear behind now centered eventbox */
	}
}
/* -- At 961 px wide or more -- */
@media only screen and (min-width: 961px) {
    .small-8, 
    .small-4 {
        padding-right: 0px;
    }
    .small-4.columns div.orange-box {
	    border-right: 0px;
	}
}

/* -- At 960 px wide or less -- */
@media only screen and (max-width: 960px) {
    .small-8, 
    .small-4 {
	    padding-right: 0px;
	    padding-left: 0px;
	    width: 100%;
	}
	.main-pg .small-4 {
	    width: 32%;
	    margin-right: 2%;
	}
	.main-pg .small-4:last-child {
		margin-right:0;
	}
	    .small-4.columns .orange-box, 
	    .small-8.columns .orange-box {
	    border-right: 0px;
	}
	.small-block-grid-5 > li {
    	font-size: .7rem;
	}
	.med-text { /* font adjusted on mobile below */
		font-size:1.5rem;
	}
	.sm-text { /* font adjusted on mobile below */
		font-size:1.5rem;
	}
	.sm-bdy-text {
		font-size:1rem;
	}
	div.events-legend, div.legend {
		display: flex;
		width:100%;
		margin-left:0px;
		text-align: center;
	}
	.nomobile, span.nomobile {
		display:none;
	}
	.mobile-width {
		width:100%!important;
	}
	div.eventbox-pagebody {
		clear:both; /* Force headers and content following this to begin BELOW eventbox when it goes to 100% width */
	}
}
/* -- At 720 px wide or less -- */
@media only screen and (max-width: 720px) {
	ul.tabbernav li a {
    	display: block!important;
    	margin-left: 0px!important;
	}
	ul.tabbernav {
	    margin-left: 0px!important;
	    margin-right: 0px!important;
	}
	.leaderboard-table th,
	.leaderboard-table td {
		font-size:0.9rem;
	}
}

/* -- At 640 px wide or less -- */
@media only screen and (max-width: 640px) {
	.show-for-small-only > img {
		display:none!important;
	}
	.oo-ui-popupWidget-popup {
	    margin-left: 0px!important;
	    font-size: .7em!important;
	    max-width: 300px!important;
    	/* left: 188px; */
	}
	.oo-ui-popupWidget-anchored-top {
	    /* left: -430px!important;*/
	    left: -240px!important;
	}
	.oo-ui-popupWidget .oo-ui-popupWidget-anchor {
    margin-left: -190px!important;
	}
	.mw-echo-ui-notificationItemWidget-content-table {
    	width: 100%;
	}
	.mw-echo-ui-menuItemWidget-prioritized {
    display: block;
	}
	.oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
    width: 100%!important;
    max-width: unset!important;
	}
	.nomobile-640 {
		display:none;
	}
}
/* -- At 501 px wide or more -- */
@media only screen and (min-width: 501px) {
	.small-block-grid-3 li {
    	width: 33%;
	}
}
/* -- At 500 px wide or less -- */
@media only screen and (max-width: 500px) {
	.small-block-grid-5 > li {
    	font-size: 0.6rem;
	}
	.lg-text { /* font adjusted on mobile below */
	font-size:1.5rem;
	}
	.med-text { /* font adjusted on mobile below */
		font-size:1.2rem;
	}
	.sm-text { /* font adjusted on mobile below */
		font-size:1.2rem;
	}
	.large-10, .medium-9, .columns, .medium-9.columns {
		padding-left: 0em!important;
		padding-right: 0em!important;
	}
	.white-inner {
    	padding: 10px 10px;
    	position:relative;
	}
	[class*="block-grid-"] > li {
    	padding: 0 0.3rem 1.25rem;
	}
	ul[class*="block-grid"] {
	    margin-left: 0!important;
	}
	.oo-ui-popupWidget .oo-ui-popupWidget-anchor {
    	/* margin-left: -210px!important;*/
	}
	div#ytWidget {
    margin-left: 0px!important;
	}
	.nomobile-500 {
		display:none;
	}
	.leaderboard-table {
		min-width:500px;
	}
}
/* -- At 400 px wide or less -- */
@media only screen and (max-width: 400px) {
	#yt-widget .yt-listbox {
	    width: 200px!important;
    	min-width: 200px!important;
	}
	#yt-widget {
	    position: absolute;
	    right: -0.8em;
	}
	#echo-notifications li {
    margin: 0 0 0 10px;
	}
	.nomobile-400 {
		display:none;
	}
	.mw-collapsible-content {
		width:100%;
		margin-left:0px;
	}
	div.mw-indicators {
		display:none!important;
	}
	fieldset {
    	max-width: 300px!important;
    	padding: 0 0em 0em 0em;
    	margin: 0 auto;
	}
	.mw-recentchanges-table table tr td,
	#mw-prefsection-personal fieldset table tr td,
	#mw-prefsection-rendering fieldset table tr td,
	#mw-prefsection-editing fieldset table tr td,
	#mw-prefsection-rc fieldset table tr td,
	#mw-prefsection-watchlist fieldset table tr td,
	#mw-prefsection-echo fieldset table tr td {
	    display: block;
	    margin-left:0;
	    margin-right:0;
	}
	.mw-recentchanges-table table tr td, #mw-prefsection-personal fieldset table tr td, #mw-prefsection-rendering fieldset table tr td, #mw-prefsection-editing fieldset table tr td, #mw-prefsection-rc fieldset table tr td, #mw-prefsection-watchlist fieldset table tr td, #mw-prefsection-echo fieldset table tr td {
	    display: block;
	    margin-left: 0;
	}
	#mw-prefsection-personal fieldset table tr td.mw-label,
	#mw-prefsection-rendering fieldset table tr td.mw-label,
	#mw-prefsection-editing fieldset table tr td.mw-label,
	#mw-prefsection-rc fieldset table tr td.mw-label,
	#mw-prefsection-watchlist fieldset table tr td.mw-label,
	#mw-prefsection-echo fieldset table tr td.mw-label {
	    width: 100%;
	    text-align: left;
	}
	/* ---- Forum extension adjustments on very small mobiles ---- */
	.mw-wikiforum-title tr th,
	.mw-wikiforum-title tr th p,
	.mw-wikiforum-title tr td p,
	.mw-wikiforum-thread-main,
	.mw-wikiforum-thread-main p,
	.mw-wikiforum-thread-main ol li,
	.mw-wikiforum-thread-main ul li,
	.mw-wikiforum-thread-main blockquote,
	.mw-wikiforum-thread-main blockquote p,
	.mw-wikiforum-thread-sub,
	.mw-wikiforum-thread-sub p,
	.mw-wikiforum-thread-sub ol li,
	.mw-wikiforum-thread-sub ul li,
	.mw-wikiforum-thread-sub blockquote,
	.mw-wikiforum-thread-sub blockquote p,
	.mw-changeslist div table td {
	    font-size: 0.8rem!important;
	}
	.mw-wikiforum-thread-sub blockquote, 
	.mw-wikiforum-thread-sub blockquote p {
	    line-height: 1em;
	    padding: 0.3em;
	    margin: 0.3em;
	}
	.mw-wikiforum-thread-main pre,
	.mw-wikiforum-thread-sub pre {
    	overflow: scroll;
    	max-width: 250px;
	}
	.mw-recentchanges-table tr td {
	    display: block;
	}
	/* IRC chat on very small mobile */
	#ircui {
	    overflow: unset;
	    min-height: 400px;
	}
	.mw-changeslist-legend {
    width: 100%;
	}
	.mw-changeslist-legend dd, .mw-changeslist-legend dt {
	    font-size: 0.8em;
	    display: table-cell;
	}
	ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
    	margin: 0 1em;
	}
}

/* -- At 320 px wide or less -- */
@media only screen and (max-width: 320px) {
	.oo-ui-popupWidget-popup {
	    margin-left: 0px!important;
	    font-size: .7em!important;
	    max-width: 280px!important;
	    left: 8%;
	}
	.nomobile-320{
		display:none;
	}
}
/* Fixes for updated themes and responsive grids/layouts */
/* 5-block-grid style fix from imported pivot foundation */
/* Applies to all themes as all themes can now use grid- */

.small-block-grid-5 > li {
    list-style: none;
}
.show-for-small-only {
    content: "DML Wiki";
}
.large-12 {
    padding-left: 0px;
    padding-right: 0px;
}
.medium-6 {
    width: 100%;
}
.main-pg.medium-6:first-of-type {
    margin-bottom: 1em;
}
/* ---------------------------- */
/* ---------- Tweaks  --------- */
/* ---------------------------- */
/* Remove related changes from sidebar */
li#t-recentchangeslinked, 
li#t-permalink,
li#t-specialpages {
	display:none;
}
.main-pg small-8,
.main-page small-4 {
	float:left;
}
pre, code, tt, kbd, samp, .mw-code {
    font-family: monospace, "Courier New", Courier;
}
/* Editor and view source text in Monospace */
.wikiEditor-ui-text, 
.mw-editfont-monospace,
#mw-content-text > textarea {
    font-family: monospace, "Courier New", Courier;
}

/* May be needed now and in future for all versions */
/* Prevent tables from stretching to 100% by default */
table.wikitable {
    width: auto;
    min-width:275px;
}
/* No bottom margin on scrolling tables */
.scroll-all table.wikitable {
	margin-bottom:0px;
}
table tr th, table tr td {
    text-align: inherit;
}
table {
    background: transparent;
    border: none;
    margin-bottom:0px;
}
table tr th, table tr td {
    color: inherit;
    line-height: inherit;
    padding: inherit;
    /* padding: 0rem 0.625rem 0rem 0.625rem; */
    font-size: inherit;
    text-align: inherit;
}
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    line-height: inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
    background: inherit;
}
table.wikitable > tr > th,
table.wikitable > tr > th p,
table.wikitable > tr > td, 
table.wikitable > tr > td p,
table.wikitable > * > tr > th, 
table.wikitable > * > tr > th p, 
table.wikitable > * > tr > td,
table.wikitable > * > tr > td p,
table.wikitable li {
    font-size: 0.9rem!important;
}
table.wikitable td p,
table.wikitable th p {
	padding: 1px 4px 1px 5px;
    margin-bottom: 0px;
}

/* Margin on Recent table too large */
table.mw-enhanced-rc {
    border: 0;
    border-spacing: 0;
    margin-bottom: 0.2em;
}
/* Force DOTW/DOTM collapsible table header text to not be that nasty red color */
.wikitable.mw-collapsible tr:first-of-type th { 
	color:#fff!important;
	background-color: #999;
}
.mw-collapsible tr:first-of-type th a, 
.mw-collapsible tr:first-of-type th a:hover {
	color:#fff;
}
/* Collapsible table toggle button spacing */
.mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
    margin-left: 20px;
}
/* Hide external link arrow from dml buttons */
	.dmlbtn a.external, 
	.dmlbtn .external,
	.dmlbtn .link-https {
	background: none;
	background-image: none;
	padding-right: 0px;
}
.row {
    max-width: auto;
}

ul.gallery {
    text-align: center;
}

input#searchInput {
height:20px;
}

ul, ol, dl {
    font-size: inherit;
    line-height: inherit;
}
ol.references {
	font-size: .8em;
}
.mw-body-content,
.mw-body-content p {
    line-height: 1.5;
}
#mw-content-text {
	font-size: 1rem;
}

/* Editor buttons too large, reduce padding */
.wikiEditor-ui-buttons button {
    margin-left: 0.5em;
    padding: 8px;
}
pre {
    padding: 1em;
}
pre, code, tt, kbd, samp, .mw-code {
    font-family: monospace,"Courier New",Courier;
    font-size: smaller;
}
hr {
    margin: inherit;
}


/* Remove print cuttoff linne in CSS editing view */
.ace_print-margin {
    display: none;
}
.label {
    background-color: unset;
}
.mw-history-histlinks {
	margin-right:10px;
}
/* Remove bottom margin on input fields so they can be aligned with text */
input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, input[type="file"], input[type="checkbox"], input[type="radio"], select {
	margin-bottom: 0;
}
.mw-label {
    padding: 0.5em;
}
input[type="number"] {
    width:auto;
}
/* Dropdown field fit to contents not 100% width */
select {
    width: auto;
    margin-bottom:0;
    padding-right: 20px;
}
/* Testing fix for input number spinners, this verion of MW using depreciated version of jquery */
/* Remove number field spinners in webkit browsers (Chrome etc.) */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
/* Remove number field spinners in Firefox */
input[type=number] {
    -moz-appearance:textfield;
}
ul[class*="block-grid"] {
	margin-left: 0.2em;
}