Jump to content
Important notes:

This page is archived information that is not up-to-date.
Information about EOWG closing is in the 19 September 2024 blog post: Accessibility education and outreach: Another milestone in W3C's 30-year history and evolution.
This Wiki page was edited by participants of the EOWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

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)
  • Edge: Hold Ctrl while clicking Refresh, or 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;}