Master stylesheet

_master stylesheet

This is a complete stylesheet for everything in HTML 4.01, including some useful classes -- not really for use on a website, but a good reference.

	<!--master styles-->
	<link rel="stylesheet" type="text/css" media="all" href="css/master_main.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/master_classes.css" />
	<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="css/master_IE.css" /><![endif]-->
	<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="all" href="css/master_IE6.css" /><![endif]-->

master_classes.css

/**************************************************************************************************/
/*This stylesheet was created for HTML 4.01 using CSS 3 (and older)
/*Tested on Windows versions of Firefox 1.5-3.0, IE 6-7, Safari 3.2, Opera 9.2-9.6, and K-Meleon 1.5
/*
/*REPLACE "example.com" WITH YOUR OWN DOMAIN in the paged media styles near the bottom! (Search for "TODO".)
/*
/*1.0: Layout
/*2.0: Paragraphs
/*3.0: Lists
/*4.0: Tables
/*5.0: Miscellaneous
/*6.0: Form Errors
/*7.0: Media-Specific
/**************************************************************************************************/

/*******************/
/*** 1.0: Layout ***/
/*******************/

.break {
	clear:both;
	height:0;
	overflow:hidden;
}
.clear { clear:both; }

/*sometimes javascript has trouble setting elem.style.float, so you can set elem.className instead:*/
.floatLeft { float:left !important; }
.floatRight { float:right !important; }
.floatNone { float:none !important; }

/*Note: these don't work in IE at all; other browsers may have issues*/
.table		{ display:table; }
.tcaption	{ display:table-caption; }
.tcolgroup	{ display:table-column-group; }
.tcol		{ display:table-column; }
.thead		{ display:table-header-group; }
.tbody		{ display:table-row-group; }
.tfoot		{ display:table-footer-group; }
.tr			{ display:table-row; }
.th, .td	{ display:table-cell; }

.centerBlock {
	display:table;
	margin-left:auto;
	margin-right:auto;
}

body.fullHeight {
	height:100%;
	padding:0;
	border-top:1px solid transparent; margin-top:-1px;	/*defeat Firefox bug*/
}

/***********************/
/*** 2.0: Paragraphs ***/
/***********************/

/*indented paragraphs are usually used in books*/
.indent p + p { margin-top:-1em; }	/*no space between the paragraphs*/
.indent p, p.indent { text-indent:1.25em; }
p.noIndent, .indent p:first-child, 
.indent h1 + p, .indent h2 + p, .indent h3 + p, 
.indent h4 + p, .indent h5 + p, .indent h6 + p {
	text-indent:0;	/*if this is the first paragraph or it immediately follows a header, it shouldn't be indented*/
}
.indent p.indent { text-indent:1.25em; }

/*hanging paragraphs/indents are usually used for bibliographies*/
.hang p, p.hang { padding-left:1.25em; text-indent:-1.25em; }
p.noHang { padding-left:0; text-indent:0; }

/******************/
/*** 3.0: Lists ***/
/******************/

ol.noBullets, ul.noBullets {
	list-style-type:none;
	padding-left:0;
}

ol.bullets { list-style-type:disc; }
ol.bullets ol { list-style-type:circle; }
ol.bullets ol ol { list-style-type:square; }

ul.inside, ol.inside {
	padding-left:0;
	list-style-position:inside;
}

ul.inline, ol.inline {
	display:inline;
	list-style-type:none;
	padding-left:0;
}
ul.inline>li, ol.inline>li {
	display:inline;
}

/*Adds delimiters for inline lists. For example (if the browser supports this class fully):
/*  <ul class="inline delimit"><li>bread</li><li>milk</li><li>peanut butter</li></ul>
/*becomes:
/*  bread, milk, and peanut butter
/*Note: these don't work in IE nor Opera 9.2; pseudo-element ::after and pseudo-classes :last-child and :nth-last-child()
/*  aren't supported.
/*Note: the "and" ones don't work in Firefox or K-Meleon; pseudo-class :nth-last-child() isn't supported.*/
ul.inline.delimit>li:after, ol.inline.delimit>li:after { content:", "; }
ul.inline.delimit>li::after, ol.inline.delimit>li::after { content:", "; }
ul.inline.delimit>li:nth-last-child(2):after, ol.inline.delimit>li:nth-last-child(2):after { content:", and "; }
ul.inline.delimit>li:nth-last-child(2)::after, ol.inline.delimit>li:nth-last-child(2)::after { content:", and "; }
ul.inline.delimit>li:first-child:nth-last-child(2):after, ol.inline.delimit>li:first-child:nth-last-child(2):after {
	content:" and ";
}
ul.inline.delimit>li:first-child:nth-last-child(2)::after, ol.inline.delimit>li:first-child:nth-last-child(2)::after {
	content:" and ";
}
ul.inline.delimit>li:last-child:after, ol.inline.delimit>li:last-child:after { content:""; }
ul.inline.delimit>li:last-child::after, ol.inline.delimit>li:last-child::after { content:""; }

ol.code {
	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
	background-color:#E6E6E6;
}
ol.code>li {
	font-family:"Envy Code R", "Courier New", Courier, monospace;
	white-space:pre-wrap;
}

/*lines class allows the line numbers to be styled separately by using counters; can't with list-style-type:decimal*/
/*Note: this doesn't work in IE; pseudo-element ::before isn't supported*/
ol.lines {
	padding-left:2em;
	counter-reset:codeLine;
	list-style-type:none;
}
ol.lines>li { position:relative; }
ol.lines>li:before {
	counter-increment:codeLine;
	content:counter(codeLine) ". ";
	white-space:pre;
	display:inline-block;
	min-width:2em;
	margin-left:-2em;
	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
}
ol.lines>li::before {
	counter-increment:codeLine;
	content:counter(codeLine) ". ";
	white-space:pre;
	display:inline-block;
	min-width:2em;
	margin-left:-2em;
	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
}

ol.code.lines {
	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
}
ol.code.lines>li:before {
	min-width:2.5em;
	margin-left:-2.5em;
	font-weight:bold;
}
ol.code.lines>li::before {
	min-width:2.5em;
	margin-left:-2.5em;
	font-weight:bold;
}

/*tree class displays the list like a file tree
/*Note: this doesn't work properly in K-Meleon, Firefox 1.5-2.0, and IE 6 (IE 6 is fixed in its stylesheet)
/*Note: IE doesn't support pseudo-class :last-child, so the bottom parts of the borders aren't hidden
/*besides the root `ol`, the `tree` class on elements is only required for IE 6
/*the HTML must be like this:
	Root
	<ol class="tree">
		<li><div class="tree"><span class="tree"></span>Item 1</div>
			<ol>
				<li><div class="tree"><span class="tree"></span>Item 1A</div></li>
				<li><div class="tree"><span class="tree"></span>Item 1B</div></li>
			</ol></li>
		<li><div class="tree"><span class="tree"></span>Item 2</div>
			<ol>
				<li><div class="tree"><span class="tree"></span>Item 2A</div></li>
			</ol></li>
	</ol>*/
ol.tree, ol.tree ol {
	list-style-type:none;
	padding:0;
	margin:0;
	margin-left:1.5ex;			/*distance between left edge of div and border of sublist items*/
}
ol.tree li {
	padding-left:1.55ex;		/*= A = width of item "bullet"*/
	text-indent:-1.55ex;		/*= -A*/
	border-left:1px solid #BBB;	/*= B = border width*/
}
ol.tree li:last-child {
	border-left:0;
}
ol.tree li > div:first-child {
	padding-top:0.2em;			/*= C*/
	padding-right:0.4ex;
	padding-bottom:0.2em;
	padding-left:0;
}
ol.tree li:last-child > div:first-child {
	margin-left:1px;			/*= B*/
}
ol.tree li > div:first-child > span:first-child {
	display:inline-block;
	vertical-align:top;
	margin-top:-0.2em;			/*= -C*/
	height:0.825em;				/*= C + (line-height)/2*/
	border-bottom:1px solid #BBB;
	width:1.55ex;				/*= A*/
	border-left:0;
	margin-right:0.4ex;			/*= D = div content's apparent padding-left*/
}
ol.tree li:last-child > div:first-child > span:first-child {
	border-left:1px solid #BBB;	/*= B*/
	margin-left:-1px;			/*= -B*/
}

/*******************/
/*** 4.0: Tables ***/
/*******************/

table.basic td, table.basic th {
	padding:0.25em 0.4em;
	border-width:1px;
}
table.basic th {
	font-weight:bold;
	text-align:center;
}

/**************************/
/*** 5.0: Miscellaneous ***/
/**************************/

pre.code { background-color:#E6E6E6; }

.bold { font-weight:bold; }
.italic { font-style:italic; }

ins.update {
	font-style:normal;
	font-weight:bold;
}

abbr.define, acronym.define {
	border-bottom:1px dotted #000;
	border-bottom:1px dotted currentColor;
}

sup.footnote, sup.math, .math sup, sup.science, .science sup { vertical-align:super; }
sup.ordinal, sup.mark, sup.currency, sup.fraction, sup.abbr, sup.temperature { vertical-align:text-top; }
sub.fraction, sub.abbr { vertical-align:baseline; }
sub.math, .math sub, sub.science, .science sub { vertical-align:sub; }

/************************/
/*** 6.0: Form Errors ***/
/************************/

label.error, .error label { color:#F00; }

input[type="text"].error, .error input[type="text"], 
input[type="password"].error, .error input[type="password"], 
textarea.error, .error textarea, 
select.error, .error select {
	background-color:#FDD;
}

/***************************/
/*** 7.0: Media-Specific ***/
/***************************/
/*audio, aural (deprecated), braille, embossed, handheld, print, projection, screen, speech, tty, tv*/

@media embossed, handheld, print, projection, screen, tv {

.accessLink, .skipLink { display:none; }	/*to hide links like "skip to navigation"*/

}

@media handheld {

.indent p, p.indent { text-indent:1em; }
p.noIndent, .indent p:first-child, 
.indent h1 + p, .indent h2 + p, .indent h3 + p, 
.indent h4 + p, .indent h5 + p, .indent h6 + p {
	text-indent:0;
}
.indent p.indent { text-indent:1em; }

.hang p, p.hang { padding-left:1; text-indent:-1em; }

img.decoration, img.ornamental { display:none; }

}

@media embossed, print, projection, tv {

.newPage { page-break-before:always; }

}

@media embossed, print {

/*The printHref class adds the href of a link to the printed page.*/
a.printHref:after, 
/*.printHref a:after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
.printHref a[href^="http://"]:after, .printHref a[href^="https://"]:after {
/*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
	content:" (" attr(href) ")";
	color:#888;
	font-size:0.8em;
}
a.printHref::after, 
/*.printHref a::after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
.printHref a[href^="http://"]::after, .printHref a[href^="https://"]::after {
/*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
	content:" (" attr(href) ")";
	color:#888;
	font-size:0.8em;
}
a.printHref[href^="/"]:after, .printHref a[href^="/"]:after {
	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
	color:#888;
	font-size:0.8em;
}
a.printHref[href^="/"]::after, .printHref a[href^="/"]::after {
	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
	color:#888;
	font-size:0.8em;
}
.printHref a[href^="#"]:after, 
.printHref a.noPrintHref:after { content:""; }
.printHref a[href^="#"]::after, 
.printHref a.noPrintHref::after { content:""; }

}

@media aural, speech {

.male { voice-family:male; }
.female { voice-family:female; }
.child { voice-family:child; }

}

master_IE.css

hr {
	height:5px;
	margin:0;
}

ol.lines { list-style-type:decimal; }

legend {
	padding-left:0;
	padding-right:0;
}

master_IE6.css

dl { margin-top:0.5em; }

select { vertical-align:text-top; }

ul.inline li, ol.inline li {
	display:inline;
}

/*selector element `>` and pseudo-class :first-child aren't supported, so
  we'll have to use the `tree` class on everything*/
ol.tree li div.tree {
	text-indent:0;
	padding-left:0.4ex;		/*= D*/
}
ol.tree li div.tree span.tree {
	display:block;
	height:0;
	overflow:hidden;
	border-bottom:1px solid #BBB;
	width:1.55ex;			/*= A*/
	margin-left:-1.95ex;	/*= -(A + D)*/
	margin-bottom:-0.825em;	/*= C + (line-height)/2*/
}

master_main.css

/**************************************************************************************************/
/*This stylesheet was created for HTML 4.01 using CSS 3 (and older)
/*Tested on Windows versions of Firefox 1.5-3.0, IE 6-7, Safari 3.2, Opera 9.2-9.6, and K-Meleon 1.5
/*
/*I've put helpful classes into a separate stylesheet. PLEASE CUSTOMIZE THAT STYLESHEET AS NOTED!
/*IE-specific stylesheets include fixes or fallbacks for both of these stylesheets, so comment out relevant rules
/* if you won't be using the classes.
/*
/*Because of too many browser inconsistencies, I have:
/*- left the styling of form elements up to the browser (for the most part).
/*- not set the outline property on anything (e.g., `:focus`).
/*
/*Elements included:
/*  Obsolete:
/*     app, bgsound, blink, comment, listing, marquee, multicol, nobr, plaintext, sound, spacer, wbr, xmp
/*  Deprecated:
/*     applet, basefont, center, dir, font, isindex, menu, s, strike, u
/*  Non-standard:
/*     embed, noembed
/*  Standard:
/*     a, abbr, acronym, address, area, b, base, bdo, big, blockquote, body, br, button, caption, cite, 
/*     code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, 
/*     head, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, meta, noframes, noscript, 
/*     object, ol, optgroup, option, p, param, pre, q, samp, script, select, small, span, strong, style, sub, sup, 
/*     table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, ul, var
/*
/*1.0: The Basics
/*2.0: Block-Level Elements
/*     2.1: Headers
/*     2.2: Lists
/*     2.3: Tables
/*3.0: Inline Elements
/*     3.1: Hyperlinks
/*4.0: Forms
/*     4.1: Buttons
/*     4.2: Text Inputs
/*     4.3: Choices
/*5.0: Media-Specific
/*     5.1: Paged Media
/*     5.2: Audible Media
/**************************************************************************************************/

/***********************/
/*** 1.0: The Basics ***/
/***********************/

bgsound, comment, sound { display:none; }
listing, xmp { white-space:pre; }
app, blink, listing, marquee, multicol, nobr, plaintext, spacer, wbr, xmp, 
applet, center, dir, font, menu, s, strike, u, 
embed, noembed, 
a, abbr, acronym, address, b, big, blockquote, body, br, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, 
fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, ins, kbd, label, legend, li, map, 
noframes, noscript, object, ol, optgroup, option, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, 
th, thead, tr, tt, ul, var {
	margin:0;
	padding:0;
	border:0 solid #000;
	font-style:inherit;
	font-weight:inherit;
	font-size:inherit;
	text-decoration:inherit;
	background-color:transparent;
	color:inherit;
	line-height:1.25;
	font-family:inherit;
	text-align:inherit;
	vertical-align:baseline;
}

html {
	background-color:#FFF;
}
body {
	padding:8px;
	font-family:sans-serif;
	font-size:95%;	/*since sans-serif seems bigger*/
	color:#000;
	font-style:normal;
	font-weight:normal;
	text-decoration:none;
	text-align:left;
}

/*********************************/
/*** 2.0: Block-Level Elements ***/
/*********************************/

p, ul, ol, dl, pre { margin:1em 0; }
p:first-child, blockquote:first-child, ul:first-child, ol:first-child, dl:first-child, pre:first-child { margin-top:0; }
p:last-child, blockquote:last-child, ul:last-child, ol:last-child, dl:last-child, pre:last-child { margin-bottom:0; }

pre {
	font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
}

blockquote {
	margin:1em 1.25em;
	quotes:none;
}
blockquote:before, blockquote:after { content:""; }
blockquote::before, blockquote::after { content:""; }

address { font-style:normal; }

center { text-align:center; }

/*** 2.1: Headers ***/

h1, h2, h3, h4, h5, h6 {
	margin:1em 0;
	font-weight:bold;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top:0; }
h1 {
	font-size:2em;
	margin-bottom:0.5em;
}
h2 {
	font-size:1.7em;
	margin-bottom:0.59em;
}
h3 {
	font-size:1.4em;
	margin-bottom:0.71em;
}
h4, h5, h6 {
	font-size:1em;
}

hr {
	margin:0.5em 0;	/*no way to get rid of the margin in IE, so I'll include it for consistency*/
	border-width:2px;
	padding-top:1px;
	border-style:solid;
	border-color:#EAEAEA #BBB #676767 #EAEAEA;
	background-color:#BBB;
	color:#BBB;	/*for IE*/
}

/*** 2.2: Lists ***/

ul { list-style-type:disc; }
ul ul { list-style-type:circle; }
ul ul ul { list-style-type:square; }

ul, ol, dir {
	padding-left:1.25em;
	list-style-position:outside;
}
ol { padding-left:2em; }
menu { list-style-type:none; }

dt { margin-top:0.5em; }
dt:first-child { margin-top:0; }
dd { margin-left:1.25em; }

/*** 2.3: Tables ***/

table {
	border-collapse:collapse;
	border-spacing:0;
}
caption {
	caption-side:top;
	text-align:center;
}
td { vertical-align:top; }

/****************************/
/*** 3.0: Inline Elements ***/
/****************************/

em, i, cite, var, dfn, ins { font-style:italic; }
strong, b { font-weight:bold; }
code, kbd, samp, tt, var {
	font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
}
code, var { background-color:#E6E6E6; }
samp { color:#444; }
del, strike, s { text-decoration:line-through; }
u { text-decoration:underline; }

/*Except for IE, browsers automatically add quotes around a `q` element; this removes them.*/
q:before, q:after { content:""; }
q::before, q::after { content:""; }

big { font-size:120%; }	/*why isn't this deprecated?*/
small, sup, sub { font-size:80%; }

sup { vertical-align:super; }
sub { vertical-align:sub; }

/*** 3.1: Hyperlinks ***/

a img { border:0; }

/*
Browsers seem to ignore the implicit pseudo-classes for anchors in terms of specificity; you can override
 them all at once with the selector `a` even though they are more specific. This is corrected when set explicity,
 as below.
Note, however, that these will now be more tedious to override in other stylesheets.
*/
a, a:link {
	text-decoration:underline;
	color:#00E;
}
a:visited { color:#551A8B; }
a:focus {  }
/*I don't use `a` elements as anchors (why would you?), so I won't make these selectors so specific*/
/*a:link:hover, a:visited:hover {  }
a:link:active, a:visited:active { color:#F00; }*/
a:hover {  }
a:active { color:#F00; }

/******************/
/*** 4.0: Forms ***/
/******************/

fieldset {
	display:block;
	padding:0.5em;
	border:1px solid #BBB;	/*note: setting a border removes IE's curved corners*/
}
legend {
	padding-left:3px;
	padding-right:3px;
}

isindex {
	display:block;
	position:static;
}

input, button, select { vertical-align:middle; }
select[size], select[multiple], textarea { vertical-align:text-top; }

input[type="file"] {
}

/*** 4.1: Buttons ***/

input[type="submit"], input[type="reset"], input[type="button"], 
button {
}
input[type="image"] {
}

/*** 4.2: Text Inputs ***/

input[type="text"], input[type="password"] {
}
textarea {
	overflow:auto;
}

/*** 4.3: Choices ***/

input[type="checkbox"], input[type="radio"] {
}

select {
}
optgroup {
	font-weight:bold;
	font-style:italic;
}
optgroup option {
	font-weight:normal;
	font-style:normal;
	padding-left:1em;
}
option {
	padding-right:0.75em;	/*for Firefox*/
}
option[disabled] {
	color:#999;
}

/***************************/
/*** 5.0: Media-Specific ***/
/***************************/
/*audio, aural (deprecated), braille, embossed, handheld, print, projection, screen, speech, tty, tv*/

@media aural, braille, embossed, speech, tty {

/*img { content:attr(alt); }	/*this is what's implied for relevant media, correct?*/
img[alt=""] { display:none; }
img:not([alt]) { display:none; }

}

@media handheld {

*, *:before, *:after { float:none !important; }
*, *::before, *::after { float:none !important; }

body {
	padding:2px;
	font-size:100%;
}

pre { white-space:pre-wrap; }

blockquote { margin:1em 0 1em 1em; }

dd { margin-left:1em; }

h1 { margin-top:0.5em; }
h2 { margin-top:0.59em; }
h3 { margin-top:0.71em; }

ul, ol {
	padding-left:0;
	list-style-position:inside;
}

img { max-width:100%; }

}

@media tv {
}

/*** 5.1: Paged Media ***/

@media embossed, print, projection, tv {

* {
	page-break-before:auto;
	page-break-inside:auto;
	page-break-after:auto;
}

p, blockquote, li, dd, pre, h1, h2, h3, h4, h5, h6 {
	orphans:2;
	widows:2;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; }
dt { page-break-after:avoid; }
dd { page-break-before:avoid; }
table, address, a { page-break-inside:avoid; }

}

@media embossed, print {

body { padding:0; }
a { text-decoration:none; }	/*consider making sure it is still distinguishable on a B&W printer or to a color-blind user*/

}

@media print {

html, body { background:transparent; }
body {
	font-size:11pt;
	font-family:"Times New Roman", Times, serif;
}
pre, code, kbd, samp, tt, var {
	font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
}

a:visited { color:#00E; }
a[href^="#"] { color:inherit; }

}

/*** 5.2: Audible Media ***/

@media aural {	/*deprecated*/

* {
	/*pause-before:0;
	pause-after:0;
	cue-before:none;
	cue-after:none;
	play-during:auto;*/
}
html { play-during:none; }
body {
	voice-family:male;
	/*speak:normal;
	speak-punctuation:none;
	speak-numeral:continuous;
	volume:medium;
	speech-rate:medium;
	pitch:medium;
	pitch-range:50;
	stress:50;
	richness:50;
	azimuth:center;
	elevation:level;*/
}

th, td { /*speak-header:once;*/ }

small { volume:soft; }

}

@media speech {

* {
	/*voice-duration:;
	phonemes:;
	pause-before:;
	pause-after:;
	cue-before:none;
	cue-after:none;
	rest-before:;
	rest-after:;
	mark-before:none;
	mark-after:none;*/
}
body {
	voice-family:male;
	/*voice-volume:medium;
	voice-balance:center;
	speak:normal;
	voice-rate:;
	voice-pitch:medium;
	voice-pitch-range:;
	voice-stress:moderate;*/
}

small { voice-volume:soft; }

}

@media audio {
}