MediaWiki:Common.css
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.
/* --------------------------------------------------------
consistent default styles
-------------------------------------------------------- */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0; font-size:100%; font-weight:normal; }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol { list-style:none }
:link, :visited { text-decoration:none }
a img, :link img, :visited img { border:none }
address { font-style:normal }
q:before, q:after {content:"";}
/* --------------------------------------------------------
layout styles
-------------------------------------------------------- */
html {
background-color: #FFF;
overflow-y: scroll;
}
body {
background-color: #FFF;
width:1000px;
margin:auto;
padding:0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:16px;
line-height:1.3;
}
/* --- The container encompasses and centers the site on the screen. --- */
.container {
position:absolute;
right:auto;
left:auto;
top:0;
width:990px;
height:auto;
background-color:#FFF;
margin: 0 auto;
padding: 0;
}
/* --- "section-nav" (left) and "site-nav" (right) frame the navigation sidebars. --- */
.section-nav, .site-nav {
float:left;
height:2100px; /* Extend the column beneath the bottom of the screen */
margin:0;
border:1px solid #930;
padding:1px;
font-size:14px;
font-weight:bold;
line-height:1.3em;
text-align:center;
background-color:#ECF1F2;
color: #930;
position:fixed;
}
.section-nav {
width:100px; /* 104px width counting column + padding + border */
padding-top:10px;
}
.site-nav {
width:80px; /* 84px width counting column + padding + border */
margin-left:910px;
margin-right:20px;
padding-top:3px;
}
.section-nav h5, .site-nav h5 {
margin-bottom:none;
margin-top:none;
}
@media print {
.section-nav, .site-nav {
display:none;
}
}
/* --- "Content" defines the central column where specific content appears. --- */
.content {
float:left;
width: 788px;
margin-left:0;
padding-top:1em;
padding-left:114px; /* establishes basic whitespace beteen text and navigation columns */
padding-right:5px;
}
/* --------------------------------------------------------
site element styles
-------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt {
margin:3px;
margin-bottom:8px;
margin-top:8px;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
clear:both;
}
h1 {font-size:36px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
h4 {font-size:18px; font-style:italic;}
h5 {font-size:14px;}
h6 {font-size:14px; font-style:italic;}
ul {
list-style:outside;
}
dt {
margin-left:19px;
margin-right:19px;
}
dd {
margin-left:35px;
margin-right:19px;
}
li { margin-left:35px;}
ul ul, ol ol { margin-left:51px;}
pre {font-size:12px;}
hr {width:67%;}
a:link {
font-weight:bold;
color:#930;
}
a:visited {
font-weight:normal;
color:#930;
}
table {
font-size:14px;
padding-left:2px;
padding-right:2px;
}
td {
vertical-align:top;
text-align:left;
}
/* --------------------------------------------------------
Classes for presenting content
/* --------------------------------------------------------
Class declarations for layout of substantive material.
These allow a lot of variations by mixing in compound class declarations for
<div>, <p> , <ul>, <ol>, <dl>, <blockquote>, <img>, <pre>, etc.
Classes for citation and identifying content.
par1 = numbers the paragraphs in the main text.
cite = numbers in the main text citing notes to it appearing to the right.
essaynote = corresponding number for the note to the right.
anno = creates a link to external material (wikipedia, etc.).
comment = numbers later commentary to a text.
par2, par3 and note = additional options if needed.
S (standard) classes for the size and orientation of blocks.
sl = left (normally for paragraphs in the main essay text as it was originally printed) .
r = right (normally with "bg" for footnotes to the original text or with "bc" for present-day comments/additions to the text).
f = full, centered (normally for major present-day comments/additions to the text).
B background/border options:
s = none/none (normally for lefthand paragraphs for original text).
g = gray/1px (normally for original footnotes to the text).
c = cream/1px (normally for present-day comments/additions added to the text).
Class declarations for numbered blocks will normally be
[class="par1 sl"] for the original main text;
[class="essaynote sr bg"] for original notes; and
[class="comment sf bc"] for current comments.
For unnumbered blocks within those sequences, the declarations would
be without the first component: [class="sl"], [class="sr bg"], and [class="sf bc"].
-------------------------------------------------------- */
.content {
counter-reset:par1 par2 par3 cite note1 note2 comment;
}
.par1:before {
content:counter(par1)"¶ ";
counter-increment:par1;
}
.par2:before {
content:counter(par2)"¶ ";
counter-increment:par2;
}
.par3:before {
content:counter(par3)"¶ ";
counter-increment:par3;
}
.anno {
font-weight:bold;
font-size:10px;
vertical-align:super;
color:#000;
}
.cite:before {
font-weight:bold;
font-size:10px;
vertical-align:super;
color:#000;
content:" [ "counter(cite)" ] ";
counter-increment:cite;
}
.bibli:before {
font-weight:bold;
font-size:10px;
vertical-align:super;
color:#000;
content:" [ A"counter(par2)" ] ";
counter-increment:par2;
}
.essaynote:before {
content:counter(note1)"— ";
counter-increment:note1;
}
.annotation:before {
content:"A"counter(par3)"— ";
counter-increment:par3;
}
.comment:before {
content:"Comment "counter(comment)": ";
counter-increment:comment;
}
.note:before {
content:"Note "counter(note2)": ";
counter-increment:note2;
}
/* --- Classes setting paragraph width and orientation. --- */
.sl { /* --- for a standard left paragraph --- */
max-width:500px;
}
.slc { /* --- for centered text in left paragraph --- */
max-width:500px;
text-align:center;
}
.sr { /* --- strandard paragraph to the right --- */
float:right;
width:400px;
margin-left:8px;
}
.srw { /* --- for wider paragraphs to the right --- */
float:right;
width:500px;
margin-left:8px;
}
.srq { /* --- for block quotations, screen-right --- */
float:right;
width:400px;
margin-left:8px;
padding:0 55px;
}
.bq { /* --- for block quotations, screen-left --- */
text-align:left;
margin-left:40px;
margin-right:40px;
}
.src { /* --- for centered text in a right paragraph, esp. picture captions --- */
float:right;
width:400px;
text-align:center;
}
.src-pic { /* --- for situating pictures in the right column --- */
float:right;
margin-right:8px;
margin-left:8px;
text-align:center;
}
.sf, .sfc { /* --- wide paragraph centered in the content column --- */
margin-left:57px;
width:650px;
}
.sfc { /* --- wide paragraph with centered text --- */
text-align:center;
}
.sff { /* --- paragraph filling the content column --- */
width:773px;
}
/* ----------- class framing the opening header for each text = title page --- */
.opening {
width:773px;
background-color:#FFC;
border:1px solid #930;
padding:10px;
}
.opening h1, h2, h3, h4, h5, h6, hr, p, ul, ol, li, dl, dd, dt {
color:#930;
}
.opening h1, h2, h3, h4, h5, h6 {
text-align:center;
line-height:1.5em;
}
.opening p, ul, ol, dl, li {
text-align:left;
}
/* ----------- classes setting colors and borders --- */
.bn { /* --- --- */
background-color:#FFF;
border:none;
}
.bg { /* --- light green background, with 1px border --- */
background-color: #E4FEDC;
border: 1px solid #666;
padding-left:5px;
padding-right:5px;
}
.bgd { /* --- darker green background, with 1px bordder --- */
background-color: #C6F0C7;
border: 1px solid #666;
padding-left:5px;
padding-right:5px;
}
.bgr { /* --- light gray background, with 1px border --- */
background-color: #ddd;
border: 1px solid #666;
padding-left:5px;
padding-right:5px;
}
.bc { /* --- cream background with 1px border --- */
background-color:#FFC;
border:1px solid #930;
padding-left:5px;
padding-right:5px;
}
/* ----------- specialized classes --- */
.pic {
float: right;
margin-left: 5px;
}
.left {
float:left;
}
.right {
float:right;
}
.tight {
margin-top:0;
margin-bottom:0;
}
.up { /* --- brings an identifier up to the right under something --- */
text-align:right;
margin-right:4em;
margin-top:-1em;
}
.upit { /* --- merges two bordered paragraphs with a 1px line between them --- */
margin-top:-1em;
border-top:none;
}
.sup { /* --- <span class="sup"></span> puts inline text in small superscript --- */
font-size:10px;
vertical-align:super;
}
.cl { /* --- clears a paragraph relative to those above it --- */
clear:both;
}
.clearfloat { /* --- clears at end of a file if necessary --- */
clear:both;
height:0;
font-size:1px;
line-height:0;
}
.no-clear { /* --- Prevents a block (a heading) from clearing as it normally does --- */
clear:none;
}
/* -------------------------------------
CSS for slideout menus
.section-menu in the left sidebar
.site-menu in the right sidebar
.contents-menu in the central column
------------------------------------- */
.section-menu, contents-menu, .site-menu {
float:left;
padding:0;
}
.section-menu, .site-menu {
background:#ECF1F2;
}
.contents-menu, .site-menu {
width:80px;
}
.section-menu {
width:101px;
}
.contents-menu {
background:#FFC;
}
.contents-menu ul, .contents-menu li, .contents-menu a, .contents-menu h5,
.section-menu ul, .section-menu li, .section-menu a, .section-menu h5,
.site-menu ul, .site-menu li, .site-menu a, .site-menu h5 {
display:block;
font-size:14px;
font-weight:bold;
list-style:none;
background:#ECF1F2;
color:#930;
margin:0;
padding:0;
}
.contents-menu ul, .contents-menu li, .contents-menu a, .contents-menu h5 {
background:#FFC;
}
/*
.site-menu a {
padding-right:5px;
}
*/
.site-menu a:hover, .section-menu a:hover, .contents-menu a:hover {
background:#fff;
}
.site-menu li, .section-menu li, .contents-menu li {
position:relative;
text-align:center;
}
.site-menu ul ul, .section-menu ul ul, .contents-menu ul ul {
position:absolute;
border:1px solid #930;
width:500px;
color:#930;
margin:0;
padding:5px;
}
.site-menu ul ul, .section-menu ul ul {
background-color:#ECF1F2;
padding-top:5px;
padding-bottom:5px;
}
.section-menu ul ul {
top:-5px;
left:96px;
border-left:none;
}
.site-menu ul ul {
top:-5px;
width:400px;
left:-395px;
border-right:none;
}
.contents-menu ul ul {
top:16px;
left:0;
background:#FFC;
}
.upmenu ul ul {
top:-160px;
}
.contents-menu ul ul li, .contents-menu ul ul a, .contents-menu ul ul a:hover,
.section-menu ul ul li, .section-menu ul ul a, .section-menu ul ul a:hover {
display:block;
text-align:left;
}
.site-menu ul ul li, .site-menu ul ul a, .site-menu ul ul a:hover {
display:block;
padding-right:10px;
text-align:right;
}
div.section-menu ul ul, div.section-menu ul li:hover ul ul,
div.contents-menu ul ul, div.contents-menu ul li:hover ul ul,
div.site-menu ul ul, div.site-menu ul li:hover ul ul {
display:none;
}
div.section-menu ul li:hover ul, div.section-menu ul li:hover ul ul,
div.contents-menu ul li:hover ul, div.contents-menu ul li:hover ul ul,
div.site-menu ul li:hover ul, div.site-menu ul ul li:hover ul {
display:block;
}
/* -------------------------------------
sets coloring to shades of gray for printing
------------------------------------- */
@media print {
.bg {
background-color: #D8D8D8;
}
.bgd {
background-color: #B0B0B0;
}
.bc, .opening {
background-color:#888;
}
}
/* CSS placed here will be applied to all skins on all Reflective Commons websites */
/*#mw-sidebar-button, #mw-panel { display: none; }
#mw-panel #p-logo, .generated-sidebar, #p-lang, #p-tb, #t-specialpages, #t-print { display:none; }
#column-content { margin: 0 0 1em 0; }
#content { margin: 0 0 0 0; }
#p-cactions { left: .1em; } */
/*********** Snippets ***********/
/* Combo: <div class="outbox lefty/righty thin/wide"><div class="inbox compact"> */
.mw-parser-output { max-width: 900px; margin: 0 auto 0 auto; font-family: Bahnschrift, Helvetica, Arial,
sans-serif; font-weight: 600; }
/* This turns off the Summary of the edit box and the Minor edit check box at the bottom to the Edit Form */
#wpSummaryLabel, #wpSummaryWidget .input, #mw-editpage-minoredit { display: none; }
/* This turns off anonymous contributions */
#pt-anoncontribs, #pt-anontalk, #pt-anonus.conterpage { display: none; }
/* Turn dislplay of the first heading off */
.firstHeading { display: none; }
/* .tocnumber { display: none; } */
.mw-footer li { font-size: 0.8em; }
.apts, .rmcc { max-width: 550px; font-size: 1.1em; line-height: 1.4em; font-weight: 500; padding: 0 2em 0 0; text-indent: 0; }
.indon { text-indent: 1.5em; }
.indoff p {text-indent: 0;}
.nums {counter-reset: ordered;}
.nums p::before, .nums li::before {counter-increment: ordered; content:counter(ordered); vertical-align: super; font-size: .7em; }
.nums .references li::before { display: none; }
.numsoff p::before, .numsoff li::before {display: none;}
/* .notoc {display: none;} */
.thin { width: 210px; }
.wide { max-width: 320px; }
.V {margin-left:0; text-indent: 0; font-weight: 700; }
.R {padding-left:2em; text-indent: 0; font-weight: 500; }
/* To insert an inline editorial comment <dfn> ... </dfn> */
dl {margin:0; padding: 0; text-indent: 0; font-size: 0.9em; line-height: 1.2em; }
dt {padding: 0; text-indent: 0; font-weight: 700; }
dd {padding-left: 2em; text-indent: -1em; font-weight: 500; }
dfn { font-weight: 700; color: blue;}
/* To insert an extended editorial comment in the right side of screen
/* <bdo> ... </bdo> */
.bdo {
float: right; clear: right;
width: 290px; margin: 0.5em -320px 0.5em 0;
text-indent: 0; font-size: 0.9em; line-height: 1.1em; font-weight: 700;
color: blue;
}
/* ul li {margin-left: 2em; text-indent: -2em; } */
.source { font-size: 0.8em; line-height: 1.1em; text-align: right; margin-top: -1em; }
.lt {font-family: Bahnschrift, Helvetica, Arial, sans-serif; }
.mx {color: #852d10; border: 1px solid #852d10; border-collapse: collapse; }
.m0 {color: #852d10; border: 1px solid #852d10; border-collapse: collapse; padding: 0.5em;}
.m1 {width: 9em; text-align: center; vertical-align: top; color: #852d10; border: 1px solid #852d10; padding: 0.5em; }
.m2 {width: 33%; text-align: center; vertical-align: top; font-size: large; font-weight: 800;color: #852d10; border: 1px solid #852d10; padding: 0.5em; }
.m3 {text-align: left; vertical-align: top; font-size: medium;color: #852d10; border: 1px solid #852d10; padding: 0.5em; }
.c25 {width: 25%; text-align: left; vertical-align: top; font-size: medium;color: #852d10; border: 1px solid #852d10; padding: 0.5em; }
.c33 {width: 33%; text-align: left; vertical-align: top; font-size: medium;color: #852d10; border: 1px solid #852d10; padding: 0.5em; }
.container {position: relative; margin: 1em 0 0 0; }
.NavBlockOut, .NavRmccOut {
float:right; clear: right;
color: #852d10; background: #ffdbb6;
border: 1px solid #852d10; border-radius: 4px;
margin: 0 -300px 4px 4px;
padding: 4px;
}
.NavBlockOutS, .NavRmccOutS {
float:right; clear: right;
color: #355269; background: #b4c7dc;
border: 1px solid #355269; border-radius: 4px;
margin: 0 -400px 4px 4px;
padding: 4px;
}
.NavBlockInUpper, .NavRmccInUp {
color: #852d10; background: #faebd7;
border: 1px solid #355269; border-radius: 4px;
margin: 4px;
padding: 10px 6px 10px 6px;
}
.NavBlockInUpperS, .NavRmccInUpS {
color: #355269; background: #dee6ef;
border: 1px solid #355269; border-radius: 4px;
margin: 4px;
padding: 10px 6px 10px 6px;
}
.NavBlockInMiddle, .NavRmccMid {
color: #852d10; background: #faebd7;
border: 1px solid #852d10; border-radius: 4px;
margin: 4px;
padding: 10px 6px 10px 6px;
}
.NavBlockInMiddleS,.NavRmccMidS {
max-width: 310px;
color: #355269; background: #dee6ef;
border: 1px solid #355269; border-radius: 4px;
margin: 1em auto 4px auto;
padding: 10px 6px 10px 6px;
}
.parabox {
position: absolute; top: -0.5em; left: 555px; bottom: auto;
border-left: 1px solid gray;
margin-right: 3em;
padding-left: 0.5em;
max-width: 5em;
text-align: center;
font-size: 0.8em;
color: gray;
}
.box300 {
position: absolute; top: -.5em; left: 605px; bottom: auto;
max-width: 300px;
}
.outbox, .rbox, .cbox, .lbox, .brbox, .wbox {
color: #852d10;
background: #ffdbb6;
border: 1px solid #852d10;
border-radius: 4px;
margin: .25em auto .25em auto;
padding: .25em;
}
.outboxb, .rboxb, .cboxb, .lboxb, .brboxb, .wboxb {
color: #355269;
background: #852d10;
border: 1px solid #355269;
border-radius: 4px;
margin: .25em 0 .25em 0;
padding: .25em;
}
.outboxg, .rboxg, .cboxg, .lboxg, .brboxg, .wboxg {
color: #224b12;
background: #3faf46;
border: 1px solid #224b12;
border-radius: 4px;
margin: .25em auto .25em auto;
padding: .25em;
}
.inbox, .navbar {
color: #852d10;
background: #faebd7;
border: 1px solid #852d10;
border-radius: 4px;
margin: .25em auto .25em auto;
padding: .5em;
}
.inboxb, .navbarb {
color: #355269;
background: #dee6ef;
border: 1px solid #355269;
border-radius: 4px;
margin: .25em auto .25em auto;
padding: .25em;
}
.inboxg, .navbarg {
color: #224b12;
background: #afd095;
border: 1px solid #224b12;
border-radius: 4px;
margin: .25em auto .25em auto;
padding: .25em;
}
.boxit {
color: #852d10;
border: 1px solid #852d10;
border-radius: 4px;
margin: .25em;
padding: .25em;
}
.compact, .navbar, .navbarb, .navbarg {
text-indent: 0;
font-size: 0.9em;
line-height: 1.1em;
font-weight: 600;
}
.squat {
text-indent: 0;
line-height: 1.1em;
font-weight: 600;
}
.links-id {
text-align: center;
font-size: 24px;
font-weight: 700;
text-indent: 0;
color: #f10d0c;
margin: .5em;
}
.lbox {float: left; margin-right: 1em; }
.rbox, .tbox { float:right; clear:right; max-width: 210px; margin-left: 1em;}
.cbox { max-width: 210px; margin: 1em; }
.brbox, .rtcl300 { float:right; clear:right; margin: 0.5em -300px 0.5em 1em; }
.rt300 { float:right; margin: 0.5em -300px 0.5em 1em; }
.top { padding-top: .5em; }
.poem { margin-left: 4em; }
h1, .bh1, .head1 { font-size: 2em; line-height: 1.1em; color:#852d10; border-bottom: 1px solid #852d10; font-weight: 700; margin: .5em 0 .5em 0; }
h2, .bh2, .head2 { font-size: 1.8em; line-height: 1.1em; color:#852d10; border-bottom: 1px solid #852d10; font-weight: 700; margin: .5em 0 .5em 0; }
h3, .bh3, .head3 { font-size: 1.6em; line-height: 1.1em; color:#852d10; border-bottom: 1px solid #852d10; font-weight: 700; margin: .5em 0 .5em 0; }
h4, .bh4 { font-size: 1.4em; line-height: 1.1em; font-weight:700; color:#852d10; }
h5, .bh5 { font-size: 1.2em; line-height: 1.1em; font-weight:700; color:#852d10; }
.h6 { font-size: 1em; font-weight:700; color:#852d10; }
.h0 { color:#852d10; font-size: 0.8em; font-weight:500; line-height: 0.8em; text-align: center; vertical-align: middle; margin: 0; padding: 0; }
.bq { text-indent: 0; padding: 0 2em; }
.rgt { float: right; border: 1px solid #852d10; border-radius: 4px; padding: 5px; text-indent: 0; }
.cent { text-align: center; text-indent: 0; }
.und { text-decoration: underline; }
hr { width: 60%; margin: 0.5em auto 0.5em auto; }
.references { font-size: 0.8em; }
a:link {color: black !important; text-decoration:underline; }
link {color: black !important; text-decoration:underline; }
a:visited {color: black !important; text-decoration:underline; }
a:hover {color: black !important; text-decoration:underline; }
.divide { border-top: 4px solid #1e6a39; width: 60%; }
.b3 { font-size: 1.6em; line-height: 1.8em; color: #852d10; }
.L3 { font-size: 1.6em; line-height: 1.6em; color: #852d10; }
.b2 { font-size: 1.4em; line-height: 1.6em; color: #852d10; }
.b1 { font-size: 1.2em; line-height: 1.4em; color: #852d10; }
.m0 { font-size: 1em; line-height: 1.2em; }
.s1 { font-size: 0.9em; line-height: 1.2em; }
.s2 { font-size: 0.8em; line-height: 1.1em; }
.s3 { font-size: 0.7em; line-height: 1em; }
.para {vertical-align: super; font-size: .7em; }
.lf, .lefty { float:left; margin: 0 1em 5px 0; }
.doit {text-align:right;}
.rt, .righty { float:right; clear: right; margin: 0 0 5px 1em; }
.navrt { float:right; clear: right; max-width: 210px; margin: 0 -280px 2em 1em; }
blockquote, .vector-body blockquote { border-style: none; border-left-style: none; text-indent: 0; margin: 1em 0; padding: 0 2.5em; }
.p0 {max-width: 550px;}
.delta {max-width: 550px;}
.p2 {float: right; margin-right: 50px; text-align: right;}
.up1 {float: right; margin: -1em 0 0 0;}
/* Table specs for listing a text */
.rmcclist {table-layout: fixed; width: 975px;}
/* Insert as follows
<table class="wikitable, rmcclist">
<tr class="tl">
<td id="c1">test</td>
<td id="c2">test</td>
<td id=<c3>c>test</td></tr></table> */