MediaWiki:Common.css

From Education & Outreach

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 */

body {
  font-family: "Noto Sans", "Trebuchet MS", sans-serif;
  background: #fffaf5;
  color: black;
  line-height: 1.35;
  font-size: 111%
}

img {
  border-style: none; /* Undo Mozilla UA style sheet */
  vertical-align: baseline;
  max-width: 100%; /* Scale images down on narrow windows */
  height: auto !important;
}

form { /* Undo MacIE5 UA style sheet */
  margin: 0;
  padding: 0;
}

a:link {
  color: #036;
}
#content a:link {
  border-bottom: 1px solid #767676;
}

a.new::after {
  content: ' (create new page)';
  color: #930;
}

#content a:visited {
  color: #603;
  text-decoration: none !important;
  border-bottom: 1px solid #767676;
}

#content a:hover, #content a:focus {
  text-decoration: none;
  border-bottom: 3px double currentColor;
}

#toc a:link, #toc a:visited {
    text-decoration: none !important;
    border-bottom: none !important;
}

#toc a:hover, #toc a:focus {
  border-bottom: none !important;
    text-decoration: underline !important;
}

h1, h2, h3, h4, h5 {
  font-family: inherit;
  font-weight: bold;
}

h1 {
  margin: 0;
  padding: 1.3em 0 0 0;
  font-size: 1.45em;
  font-family: "Georgia", serif;
}

h1 .subtitle {
  font-size: 85%;
}

h2 {
  color: #000; /* shawn doesn't want WAI colors 'cause makes it look too much like a live page */
  border-bottom: 1px solid #000;
  font-size: 1.35em;
  margin-top: 2em;
  margin-bottom: 0;
}

h3 {
  font-size: 1.25em;
  margin-top: 1.5em;
}

h4 {
  color: #4d4d4d;
  font-size: 1.15em;
  margin-top: 1em;
}

h5 {
  font-size: 1.05em;
  margin-top: 1em;
}

ul {
  list-style-image: none;
}

li {
    margin-bottom: 0.3em;
}

.subhead {
  font-size: 0.75em;
  display: block;
}

/*
* spacing around lists
*/

.listspaced1 li {
  margin-bottom: 1em;
}

.listspaced05 li {
  margin-bottom: 0.5em;
}

.listtight li {
  margin-bottom: 0;
}

dt {
  margin-top: 0.5em;
}

/*
* misc
*/

hr {
  color: #369;
  background-color: #369;
}

blockquote {
  background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNiIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI2IDI4Ij48cGF0aCBmaWxsPSIjODQ4NDg0IiBkPSJNMTIgMTV2NnEwIDEuMjUtMC44NzUgMi4xMjV0LTIuMTI1IDAuODc1aC02cS0xLjI1IDAtMi4xMjUtMC44NzV0LTAuODc1LTIuMTI1di0xMXEwLTEuNjI1IDAuNjMzLTMuMTAydDEuNzExLTIuNTU1IDIuNTU1LTEuNzExIDMuMTAyLTAuNjMzaDFxMC40MDYgMCAwLjcwMyAwLjI5N3QwLjI5NyAwLjcwM3YycTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xcS0xLjY1NiAwLTIuODI4IDEuMTcydC0xLjE3MiAyLjgyOHYwLjVxMCAwLjYyNSAwLjQzOCAxLjA2MnQxLjA2MiAwLjQzOGgzLjVxMS4yNSAwIDIuMTI1IDAuODc1dDAuODc1IDIuMTI1ek0yNiAxNXY2cTAgMS4yNS0wLjg3NSAyLjEyNXQtMi4xMjUgMC44NzVoLTZxLTEuMjUgMC0yLjEyNS0wLjg3NXQtMC44NzUtMi4xMjV2LTExcTAtMS42MjUgMC42MzMtMy4xMDJ0MS43MTEtMi41NTUgMi41NTUtMS43MTEgMy4xMDItMC42MzNoMXEwLjQwNiAwIDAuNzAzIDAuMjk3dDAuMjk3IDAuNzAzdjJxMCAwLjQwNi0wLjI5NyAwLjcwM3QtMC43MDMgMC4yOTdoLTFxLTEuNjU2IDAtMi44MjggMS4xNzJ0LTEuMTcyIDIuODI4djAuNXEwIDAuNjI1IDAuNDM4IDEuMDYydDEuMDYyIDAuNDM4aDMuNXExLjI1IDAgMi4xMjUgMC44NzV0MC44NzUgMi4xMjV6Ij48L3BhdGg+PC9zdmc+Cg==') no-repeat top left;
  padding-left:22px;
  font-family:inherit;
  background-size: 18px;
}
li>blockquote {
  margin-left:0;
}

/*
* Tables
*/
.mw-content-ltr table ol, .mw-content-rtl .mw-content-ltr table ol {
  margin: 0 0 0 1.2em;
}

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

table.zebra {
  border-collapse: collapse;
}

table.zebra tr:nth-child(2n+1) {
  background-color: #f5f5f5;
}

table.zebra tr:first-child {
  background-color: #ffffff;
  border-bottom: 1px solid;
}

table.zebra td {
  padding: 8px;
}

/*
* classes
*/

.toc { line-height: 1.5; }

/* 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).
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none;
}

.page-EO-plan_agenda #toc,
.page-EO-plan_agenda_Archive #toc,
.page-Style #toc {
  float:right;
}

.no-display { /* hide visual rendering*/
  position: absolute;
  left: -999px;
  width: 990px;
}

.float-right {
/* for images, put in img (doesn't disply in some browsers when in div or span) */
  float: right;
}

.float-left {
  float: left;
}

.align-right {
  text-align: right;
}

.center {
  text-align: center;
}

.subtext {
  font-size: 0.9em;
  font-style: italic;
  color: #333333;
}

.border1c60 {
  border-style: solid;
  border-color: #930;
  border-width: 1px;
}

.changed {
  background: #FFFFCC;
}

.done {
  color: #777;
}

.done a {
  color: #777;
}
.open {background-color: #CFC;}

.tbd {
  background-color: #ff0;
  padding: 0 5px;
}

.quiet {
  color: #595959;
}

.quiet a {
  color: #595959;
}

.who { background: #99FFCC; }

.example {
  background: #FFFAF5;
  margin: 0.5em 1em;
  padding: 1em;
}

.example.float-right {
  margin-right: 0;
  width: 40%
}

/* ************ links back to top *************** */

p.totop {
  display: block;
  text-align: right;
  background-color:#eff5fb;
}

p.totop a {
  background: url(http://www.w3.org/Icons/topofpage.png) left no-repeat;
  padding-left: 1em;
}

/*
 * Notes with a background highlight
 */
.note-with-background {
    background-color: #FFEDE5;
    border-radius: 3px;
    margin: 1em;
    padding: 5px 10px 8px;
}

/*
 * Mark obsolete/outdated pages
*/

.obsolete {
border: 1px solid rgb(138, 57, 27);
background-color: rgba(138, 57, 27, .1);
padding: 1em;
margin: 1em 0;
}
span.obsolete {
padding: 0;
font-style: italic;
font-weight: bold;
color: rgb(138, 57, 27);
border:none;
}

/*
Deliverables table
Example: https://www.w3.org/WAI/EO/wiki/Gallery_of_accessible_web_components
*/

table.deliverable {
float:right;
margin-left: 1em;
}

.scientific ol {
  counter-reset: one, two, three;
}
.scientific ul {
  margin-left: 4.2em;
}
.scientific ol>li {
  list-style:none;
}

.scientific ol>li,
.scientific ol>li>ol>li,
.scientific ol>li>ol>li>ol>li {
  counter-increment: one;
}

.scientific ol>li:before {
  content: counter(one) ".";
}

.scientific ol>li>ol>li {
  counter-increment: two;
}

.scientific ol>li>ol>li:before {
  content: counter(one) "." counter(two) ".";
}
.scientific ol>li>ol>li>ol>li {
  counter-increment: three;
}
.scientific ol>li>ol>li>ol>li:before {
  content: counter(one) "." counter(two) "." counter(three) ".";
}

.indent {
display:inline-block;
padding-left: 2em;
}

div.thumbinner {
max-width:100%;
box-sizing: border-box;
}

html .thumbimage {
width: auto;
height: auto
}

 .mw-collapsible-toggle {
float:none;
}

mark {background-color: #ffff99;}