MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0em auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {   text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

/* Front page fix */ body.page-World_of_Speed_Wiki h1.firstHeading { display:none; }

/* Radial Gradient */ .Radial { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNDIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%); background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%); background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%, rgba(0,0,0,0.65) 61%, rgba(0,0,0,0.42) 75%, rgba(0,0,0,0) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(37%,rgba(0,0,0,0.65)), color-stop(61%,rgba(0,0,0,0.65)), color-stop(75%,rgba(0,0,0,0.42)), color-stop(100%,rgba(0,0,0,0))); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ }

/*************************** /* Template example styles * /***************************/ span.templateexmaple { font-family: fixed-width; }

span.templateexample span.templatelink { font-weight: bold; }

span.templateexample span.paramname { }

span.templateexample span.paramvalue { color: #777777; font-style: italic; }

/******************** /* Notice templates * /********************/ .topNotice { border: 2px solid #ff9900; background: #ffffff; color: #333333; margin: 0 0 10px 0; padding: 3px 6px; overflow: auto; }

.topNotice .heading { color: #222222; font-size: 132%; font-weight: bold; margin: 0 0 8px 0; padding: 0; }

.topNotice.delete { border: 2px solid #ff0000; }

.topNotice.move, .topnotice.merge, .topnotice.split { border: 2px solid #bb8800; }

.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough { border: 2px solid #008000; }

/****************** /* Image licenses * /******************/ div.imageLicense { border: 2px solid #ff6600; background: #ffffff; color: #333333; margin: 0 0 10px 0; padding: 3px 6px; }

div.imageLicense.nolicense { border: 2px solid #ff0000; }

/******************** /* Main Page Styles * /********************/

.mp-welcome-heading { font-size: 150%; font-weight: bold; } .mp-left { float: left; width: calc( 70% - 1em ); }

.mp-right { float: right; width: 30%; }

.mp-box { padding: 1em; background: rgba(0,0,0,.6); margin-bottom: 1em; }

.mp-heading { font-size: 150%; text-align: center; font-weight: bold; }

.mp-row { display: flex; maring-bottom: 1em; }

.mp-cell { flex: auto 1 0; margin-right: 1em; }

.mp-cell:last-child { margin-right: 0; }

/****************** /* General styles * /******************/ .contentbox { border: 1px solid #aaaaaa; background: #eeeeee; color: #333333; margin: 0 0 10px 0; padding: 3px 6px; overflow: auto; }

span.bullet { background: transparent no-repeat center 60%; width: 9px; font-size: 11px; vertical-align: baseline; }

.dablink { padding: 2px 36px 10px 36px; font-style: italic; }

span.ghost { color: #777777; /* For any text that appear fainter for some reason */ }

.columns { padding: 0; margin: 10px 0 0 0; overflow: hidden; }

.columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }

.columns .centercol { float: left; margin: 0; padding: 0; }

.columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; }

/******************** /* Notice templates * /********************/ .topNotice { border: none; background: rgba(0, 0, 0, 0.47); color: #ffffff; margin: 0 0 10px 0; padding: 3px 6px; }

.topNotice .heading { border: none; background: transparent; font-weight: bold; font-size: 116%; color: #ffffff; margin: 0 0 8px 0; padding: 0; }

.topNotice.delete { border: none; background: rgba(64, 0, 0, 0.47); color: #ffffff; }

.topNotice.move, .topnotice.merge, .topnotice.split { border: none; background: rgba(48, 24, 0, 0.47); color: #ffffff; }

.topNotice.pagestub { border: none; background: rgba(0, 48, 0, 0.47); color: #ffffff; }

/****************** /* Image licenses * /******************/ div.imageLicense { border: none; background: rgba(0, 0, 0, 0.47); color: #ffffff; margin: 0 0 10px 0; padding: 3px 6px; }

div.imageLicense table { margin: 5px 0; }

div.imageLicense p { margin: 5px 0; }

div.licenseHeading { border: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAACCAIAAABHIQbHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QIVCAsab/YglQAAAC5JREFUeNrt0AEBAAAEAzD073w92CKskxQAAAAAAAAAAFw3CgAAAAAAAAAA+GAB/FQDAQx4i2AAAAAASUVORK5CYII=") no-repeat left top / 75% 2px, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAABCAIAAAAXRrrYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QIVCAUEC3oweAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12N89OgxPx/f379/GWCAEcb4DxdCZkKV/EdSSBgwYhiBCZiZmT5+/AQAjiQMp4MXK5MAAAAASUVORK5CYII=") no-repeat left bottom; font-variant: small-caps; font-weight: bold; font-size: 150%; color: #ffffff; margin: 0 0 8px 0; padding: 5px 0 10px 0; }

/********************* /* Front page styles * /*********************/ .fpmain, .fpinner { display: table; border-spacing: 20px; margin: 0 -20px -20px -20px; }

.fproworcell { display: table-row; }

.fprow { display: table-row; }

.fpcell { display: table-cell; vertical-align: top; }

.fpbox { border: none; background: rgba(0, 0, 0, 0.47); color: #ffffff; margin: 0 0 0 0; padding: 3px 6px; }

.fpheading, .fpcell .heading { font-size: 132%; font-weight: bold; color: #ffffff; }

.fpcell .bottomborder { border: 1px solid #ffffff; }

div.fauxbutton.plainlinks a { display: inline-block; border: none; background: -moz-linear-gradient(top, #f3821d 0%, #c85203 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3821d), color-stop(100%, #c85203)) !important; background: -webkit-linear-gradient(top, #f3821d 0%, #c85203 100%) !important; background: -o-linear-gradient(top, #f3821d 0%, #c85203 100%) !important; background: -ms-linear-gradient(top, #f3821d 0%, #c85203 100%) !important; background: linear-gradient(to bottom, #f3821d 0%, #c85203 100%) !important; color: #ffffff !important; margin: 0; padding: 6px !important; }

div.fauxbutton.plainlinks a:hover { background: -moz-linear-gradient(top, #f5953f 0%, #ec6104 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5953f), color-stop(100%, #ec6104)) !important; background: -webkit-linear-gradient(top, #f5953f 0%, #ec6104 100%) !important; background: -o-linear-gradient(top, #f5953f 0%, #ec6104 100%) !important; background: -ms-linear-gradient(top, #f5953f 0%, #ec6104 100%) !important; background: linear-gradient(to bottom, #f5953f 0%, #ec6104 100%) !important; }

div.fauxbutton.plainlinks a:active { background: -moz-linear-gradient(top, #c85203 0%, #f5953f 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c85203), color-stop(100%, #f5953f)) !important; background: -webkit-linear-gradient(top, #c85203 0%, #f5953f 100%) !important; background: -o-linear-gradient(top, #c85203 0%, #f5953f 100%) !important; background: -ms-linear-gradient(top, #c85203 0%, #f5953f 100%) !important; background: linear-gradient(to bottom, #c85203 0%, #f5953f 100%) !important; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; }

.fpvideo { display: inline-block; margin: 0 5px; }

.fpboxcols { padding: 0; margin: 0; }

.fpbox .preorder { width: 298px; padding-left: 50px; }

.fpbox .preorder .content { margin-top: -100px; }

.fpbox .divider { background: -moz-linear-gradient(top, transparent 0%, #757575 50%, transparent 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent 0%), color-stop(50%, #757575)), color-stop(0%, transparent 100%) !important; background: -webkit-linear-gradient(top, transparent 0%, #757575 50%, transparent 100%) !important; background: -o-linear-gradient(top, transparent 0%, #757575 50%, transparent 100%) !important; background: -ms-linear-gradient(top, transparent 0%, #757575 50%, transparent 100%) !important; background: linear-gradient(to bottom, transparent 0%, #757575 50%, transparent 100%) !important; background-size: 1px 100%; width: 1px; }

/****************** /* Infobox styles * /******************/ float: right; border: none; background: rgba(0, 0, 0, 0.47); color: #ffffff; margin: 0 0 10px 20px; padding: 3px 6px; vertical-align: top; width: 280px; }
 * 1) bodyContent .infobox {

border: none; border-bottom: 1px solid #ffffff; font-weight: bold; color: #ffffff; font-size: 150%; margin: 0 0 8px 0; padding: 5px 0 10px 0; }
 * 1) bodyContent .infobox .title {

margin: 0; padding: 0 5px 5px 5px; }
 * 1) bodyContent .infobox .body {

text-align: center; padding: 10px 0 0 0; margin: 0; }
 * 1) bodyContent .infobox .image {

padding: 0; margin: 0; }
 * 1) bodyContent .infobox .image .image {

margin: 0; padding: 0; }
 * 1) bodyContent .infobox .image img {

margin: 0; padding: 0; }
 * 1) bodyContent .infobox .image .image img {

width: 100%; }
 * 1) bodyContent .infobox table {

border: none; background: transparent; font-weight: bold; color: #ffffff; text-align: left; vertical-align: top; white-space: nowrap; width: 1%; }
 * 1) bodyContent .infobox table tr th {

border: none; background: transparent; color: #ffffff; text-align: left; vertical-align: center; padding: 0 0 1px 3px; }
 * 1) bodyContent .infobox table tr td {

border: none; border-bottom: 1px solid #ffffff; font-weight: bold; color: #ffffff; font-size: 132%; text-align: center; margin: 0 0 8px 0; padding: 0 0 5px 0; }
 * 1) bodyContent .infobox table tr td.subtitle {

border: none; border-bottom: 1px solid #ffffff; font-weight: bold; color: #ffffff; text-align: center; font-size: 116%; margin: 0 0 8px 0; padding: 0 0 5px 0; }
 * 1) bodyContent .infobox table tr td.listlabel {

text-align: center; color: #ffffff; margin: 0 0 0.1px 0; padding: 0 0 0 0; }
 * 1) bodyContent .infobox table tr td.listentries {

/****************** /* General styles * /******************/ .contentbox { border: none; background: rgba(0, 0, 0, 0.47); color: #ffffff; margin: 0 0 10px 0; padding: 3px 6px; }

span.bullet { background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAABmJLR0QAyABSAAPWF7MBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsOBhAmaTkIbQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOklEQVQY02NgGETg////DP///2/4////hv///ztgU2DwHwEuwMSZcBgogMuKBf///7/w////AKLdBgAxZiodAGVkaAAAAABJRU5ErkJggg==") no-repeat center 60%;; width: 9px; font-size: 11px; vertical-align: baseline; }

.dablink { padding: 2px 30px 2 30px; font-style: italic; }