/*
CSS for the McGoodwin Family Website and other uses
Superced for most but not all HTML web file as of Feb. 2019
MASTER COPY: X:\MCM\Web\McNet\Web\shared\mcgoodwinperiodcss , copy to
X:\MCM\Photo_Family\mcgoodwin_css
www.mcgoodwin.net/shared/mcgoodwinperiodcss
Add to HTML file HEAD:
To Validate CSS: http://jigsaw.w3.org/css-validator/
To Validate HTML: http://validator.w3.org/
See also Warnings and Comments at bottom
CAUTION: Tags, Attributes, and Class names should be lower case in HTML5
NOAUTOSITEMAP
*/
/* body styles and classes
Background or background-color may not be observed by some browsers
Do not specify just "background" with a [fore] color here, it overrides background images
Do not specify a line height here, causes confusion in Front Page page design view for Footer */
/* REVISIONS:
7/17/2006: delete background-image:none; because this overrides the image used in certain pages
10/4/2016: Adjusted features in CSS to remove HTML
j, ,
2/19/2019: Superceded fully by mcgoodwin_HTML5.css
*/
body {
/* default, white background w black text*/
color: black;
background-color: white;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
body.paleblue {
background-color: #F1FAFD;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
body.white {
color:white;
background-color: #000000;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
/* added 9/29/2011 black background white text */
/* div division styles and classes
Do not define generic alignment style for classless div, affects and overrides all align="center" commands
*/
/* For centering paragraphs and images outside of tables */
div.centered
{text-align: center;}
/* For centering tables overall; NOTE: must combine with centered td class to center the cell contents as well */
div.centered table
{margin-left: auto; margin-right: auto; text-align: left; }
/* SPAN styles and classes for character formatting
Cannot use these across block element borders
Ok to not specify background-color to let underlying background shine through
Don't provide color for links like HiResLink12, let the underlying A:Link etc. colors apply
9e2960=mauve 217D02=Green #00ffff=aqua (cyan) */
span.boldaqua {color: #00ffff; font-weight: bold; }
span.aqua {color: #00ffff; }
span.boldmauve {color: #9e2960; font-weight: bold; }
span.mauve {color:#9E2960; }
span.boldgreen {color: #217D02; font-weight: bold; }
span.larger {font-size: larger;}
span.smaller {font-size: smaller;}
span.xxsmall {font-size: xx-small;}
span.xsmall {font-size: x-small;}
span.small {font-size: small;}
span.medium {font-size: medium;}
span.large {font-size: large;}
span.xlarge {font-size: x-large;}
span.xxlarge {font-size: xx-large;}
span.hireslink12 {font: bold 12pt "Arial Black", Arial, Helvetica, Tahoma, Verdana, sans-serif;}
span.hireslink10 {font: bold 10pt "Arial Black", Arial, Helvetica, Tahoma, Verdana, sans-serif;}
/* PRE style for fixed width character formatting */
pre {font-family: "Courier New", Courier, monospace;}
/* P paragraph styles and classes, Generic and Multipurpose
Indents are named in ems [height of m], Hanging Indents="Hind" are shown in First Line em's /Overall em's format
Note that Mozilla does not properly position bullets when hanging indent used as LI class,
use P class inside LI
See additional specialty classes further below. */
p {
margin-top: 0pt;
margin-bottom: 12pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
p.centered {
text-align: center;
margin-top: 0pt;
margin-bottom: 12pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
p.mauve {
color: #9e2960;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.hind33 {
text-indent: -3em;
margin-left: 3em; }
p.ar10blk {
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar12blk {
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar10blkhind33 {
text-indent: -3em;
margin-left: 3em;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar10blkhind33compact {
text-indent: -3em;
margin-left: 3em;
margin-top: 0;
margin-bottom : 0;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar10ltgray {
color: #808080;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar10mauve {
color: #9E2960;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar12mauve {
color: #9E2960;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
p.ar12blkind3 {margin-left: 3em;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
/* A Hyperlink Anchor Tag character formatting, Generic
Revised to mauve for Active and Hover
003399 = Dark Blue; 9e2960 = mauve
CSS requires the order to be exacely Link, Visited, Hover, Active */
a:link { color: #003399; text-decoration: none; font-weight: bold;}
a:visited { color: #003399; text-decoration: none; font-weight: bold;}
a:hover { color: #9e2960; text-decoration: none; font-weight: bold;}
a:active { color: #9e2960; text-decoration: none; font-weight: bold;}
/* A Hyperlink anchor tag character formatting, Navigation Bar
99CCFF = Lt. Blue FB0478 = Bright mauve #707070 = Gray
CSS requires the order to be exacely Link, Visited, Hover, Active
Revised in view of HTML5 CSS3 review 2019 */
.navbar a:link { color: #FFFFFF; background-color: #707070; text-decoration: none; font-weight: bold;}
.navbar a:visited { color: #FFFFFF; background-color: #707070; text-decoration: none; font-weight: bold;}
.navbar a:hover { color: #FF0000; background-color: #707070; text-decoration: none; font-weight: bold;}
.navbar a:active { color: #FFFFFF; background-color: #707070; text-decoration: none; font-weight: bold;}
/* The following added for hyperlinks of slideshows with black background
#DDDDDD = Lt. Gray 99CCFF = Lt. Blue 9e2960 = mauve
CSS requires the order to be exacely Link, Visited, Hover, Active */
a.blkbckgnd:link { color: #DDDDDD; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:visited { color: #DDDDDD; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:hover { color: #99CCFF; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:active { color: #9e2960; background-color: #000000; text-decoration: none; font-weight: bold;}
/* Headings 1-6, generic and multipurpose
9e2960 = mauve, #800000 = Dark Red */
h1 {
text-align: left;
margin-top: 30pt;
margin-bottom: 12pt;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h1.cent20arblk {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h1.cent20armauve {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
color:#9E2960; font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h1.left20armauve {
text-align: left;
color:#9E2960;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h2 {
text-align: left;
margin-top: 24pt;
margin-bottom: 12pt;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h2.left16arblk {
text-align: left;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h2.left16armauve {
text-align: left;
color:#9E2960;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h2.center16arblk {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h2.center16armauve {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
color: #9E2960;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h3 {
text-align: left;
margin-top: 21pt;
margin-bottom: 12pt;
font: bold 14pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h3.left14arblk {
text-align: left;
font: bold 14pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h3.left14armauve {
text-align: left;
color:#9E2960;
font: bold 14pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h3.center14arblk {
text-align: Center;
font: bold 14pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h3.center14armauve {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
color: #9E2960;
font: bold 14pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h4 {
text-align: left;
margin-top: 18pt;
margin-bottom: 12pt;
font: italic 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h4.left12arblk {
text-align: left;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h4.left12armauve {
text-align: left;
color:#9E2960;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h4.left12armauvebold {
text-align: left;
color:#9E2960;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
h4.center12armauve {
text-align: center;
margin-left: 1.0cm;
margin-right: 1.0cm;
color: #9E2960;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
/* table style, Generic and Multipurpose
Cannot specify inside cell margin-top etc. w td, use padding-right etc. instead
Note that default table adds top and bottom margins, so use class for NavBar and Title tables */
table {margin-top: 12pt; margin-bottom: 12pt; }
/* td table cells styles and classes, Generic and Multipurpose
Cannot specify inside cell margin-top etc. w td, use padding-right etc. instead */
td {
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.header {
text-align: left;
vertical-align: middle;
padding-left: 6pt;
padding-right: 6pt;
padding-top: 6pt;
padding-bottom: 6pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.headerc {
text-align: center;
vertical-align: middle;
padding-left: 6pt;
padding-right: 6pt;
padding-top: 6pt;
padding-bottom: 6pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.headercmauve {
text-align: center;
vertical-align: middle;
padding-left: 6pt;
padding-right: 6pt;
padding-top: 6pt;
padding-bottom: 6pt;
color: #9E2960;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.headercmauve16 {
text-align: center;
vertical-align: middle;
padding-left: 6pt;
padding-right: 6pt;
padding-top: 6pt;
padding-bottom: 6pt;
color: #9E2960;
font: bold 16pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.headerlw20mauvecompact {
width: 20%;
text-align: left;
vertical-align: middle;
padding-left: 6pt;
padding-right: 6pt;
color: #9E2960;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry {
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entryc {
text-align: center;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
td.entryhcvc {
text-align: center;
vertical-align: middle;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
td.entryr {
text-align: right;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry30 {
width: 30%;
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry33 {
width: 33%;
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry33c {
width: 33%;
text-align: center;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry20 {
width: 20%;
text-align: left;
vertical-align: top ;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry20c {
width: 20%;
text-align: center;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry70 {
width: 70%;
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.entry80 {
width: 80%;
text-align: left;
vertical-align: top;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
/* Navigation bar table
Don't try to set navbar td widths here.
#99CCFF = Lt. Blue
Due to browser irregular support, also add cellspacing="0" in HTML
since border-collapse and border-spacing properties are not uniformly supported
See above re IE6/Mozilla not correctly displaying link pseudo-classes
For reliable cellspacing, specify cellspacing="0" in HTML in addition to style border-collapse: collapse; border-spacing: 0px; */
table.tnavbar {
width: 100%;
margin-top: 0pt;
margin-bottom: 0pt;
border-spacing: 0px;
border-collapse: separate;}
tr.navbar {
color: #99CCFF;
background-color: #707070; }
tr.navbar {
color: #99CCFF;
background-color: #707070; }
td.navbarc {
text-align: center;
vertical-align: middle;
padding-top: 2px; padding-bottom: 2px; padding-left: 0pt; padding-right: 0pt;
color: #99CCFF;
background-color: #707070;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.navbarl {
text-align: left;
vertical-align: middle;
padding-top: 2px; padding-bottom: 2px; padding-left: 0pt; padding-right: 0pt;
color: #99CCFF;
background-color: #707070;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.navbarl12 {
text-align: left;
vertical-align: middle;
padding-top: 2px; padding-bottom: 2px; padding-left: 0pt; padding-right: 0pt;
color: #99CCFF;
background-color: #707070;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;
width: 12px}
td.navbarr {
text-align: right;
vertical-align: middle;
padding-top: 2px; padding-bottom: 2px; padding-left: 0pt; padding-right: 0pt;
color: #99CCFF;
background-color: #707070;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.navbarr80 {
text-align: right;
vertical-align: middle;
padding-top: 2px; padding-bottom: 2px; padding-left: 0pt; padding-right: 0pt;
color: #99CCFF;
background-color: #707070;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;
width: 80px}
/* Site Map tables and Image Index tables
Headers have hyperlinks, so keep black
For reliable cellspacing, specify cellspacing="0" in HTML in addition to style border-collapse: collapse; border-spacing: 0px; */
table.smfiles {
width: 100%;
border: black solid 1px;
margin-top: 6pt;
margin-bottom: 6pt; }
td.smheader1 {
text-align: center;
border: black solid 1px;
padding-left: 6pt; padding-right: 6pt; padding-top: 6pt; padding-bottom: 6pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.smheader2 {
text-align: center;
border: black solid 1px;
padding-left: 6pt; padding-right: 6pt; padding-top: 6pt; padding-bottom: 6pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
td.smcol1 {
text-align: left;
border: black solid 1px;
padding-left: 12px; padding-right: 12px;
font: bold 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.smcol2 {
text-align: left;
border: black solid 1px;
padding-left: 12px; padding-right: 12px;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.smcolsmall {
text-align: left;
border: black solid 1px;
padding-left: 12px; padding-right: 12px;
font: 9pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
/* Titlebar table at top
Do not set Background for tds that are supposed to be transparent
003399 = Dk Blue; 9E2960 = Mauve
For reliable cellspacing, specify cellspacing="0" in HTML in addition to style border-collapse: collapse; border-spacing: 0px;
Due to browser irregular support, also add cellspacing="0" in HTML
Note that bottom margin is 30pt so that spacing to first body content is builtin
Use the Transparent td for titles that consist of images and when background image is present
Note that for transparent background, specify background: transparent
per http://www.w3.org/tr/CSS21/cascade.html#value-def-inherit */
table.ttitlebar {
width: 100%;
margin-top: 0;
margin-bottom: 30pt;
border-spacing: 0;
border-collapse: separate;}
td.titleblue {
text-align: center;
vertical-align: middle;
padding-left: 30px; padding-right: 30px; padding-top: 12pt; padding-bottom: 12pt;
color: white;
background-color: #003399;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
td.titlebluecomic {
text-align: center;
vertical-align: middle;
padding-left: 30px; padding-right: 30px; padding-top: 12pt; padding-bottom: 12pt;
color: white;
background-color: #003399;
font: bold 20pt "Comic Sans MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;}
td.titlemauve {
text-align: center;
vertical-align: middle;
padding-left: 30px; padding-right: 30px; padding-top: 12pt; padding-bottom: 12pt;
color: white;
background-color: #9E2960;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
td.titletranspmauve {
text-align: center;
vertical-align: middle;
padding-left: 30px; padding-right: 30px; padding-top: 12pt; padding-bottom: 12pt;
color: #9E2960;
background-color: transparent;
font: bold 20pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
/* TOC table
unless you wish to have it's font style control the font appearance */
dl {
margin-top: 0pt;
margin-bottom: 12pt}
ul {
margin-top: 0pt;
margin-bottom: 12pt}
ol {
margin-top: 0pt;
margin-bottom: 12pt}
li {
margin-top: 0pt;
margin-bottom: 0pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
li.ar10blk {
margin-top: 0pt;
margin-bottom: 0pt;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
li.ar12blk {
margin-top: 0pt;
margin-bottom: 0pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
li.ar12blkbm3 {
margin-top: 0pt;
margin-bottom: 3pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
dt {
margin-top: 2pt;
margin-bottom: 0pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
dt.hi {
text-indent: -3em;
margin-left: 3em;
margin-top: 2pt;
margin-bottom: 0pt;
font: bold 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif; }
dd {
margin-top: 0pt;
margin-bottom: 0pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
dd.ar10blk {
margin-top: 0pt;
margin-bottom: 0pt;
font: 10pt Arial, Helvetica, Tahoma, Verdana, sans-serif;}
dd.ar12blk {
margin-top: 0pt;
margin-bottom: 0pt;
font: 12pt Arial, Helvetica, Tahoma, Verdana, sans-serif }
/* Horizontal Rulers
hrs are centered by default.
Cannot set color to 9E2960 or LtGray, so use single pixel images for light gray hr:
Margin usage not functional in IE4 and NS4 for hr; can't use padding, it enlarges the hr */
hr {
width: 85%;
margin-top: 30pt;
margin-bottom: 30pt;
color: black; }
hr.testvspacing {
width: 85%;
margin-top: 0pt;
margin-bottom: 0pt;
Padding: 0; }
p.horizontalrulesimulation {
text-align: center;
margin-top: 30pt;
margin-bottom: 30pt;}
/* Warnings and Comments:
CLASS NAME: Do not start class names with a digit. Class names are ALWAYS CASE-SENSITIVE in XHTML.
BACKGROUND-COLOR: W3C CSS checker asks for this if color is specified but not an error to omit if intend to inherit
FONT: Font must be specified in this fixed order, separated by no punctuation except "":
style: italic/normal
variant: [avoid]
weight: bold or 100-900 where 400 is normal
size: 10pt or small, medium, xlarge, etc.
height: 12pt
family: "Bookman Old Style", Arial, Helvetica, Tahoma, Verdana, sans-serif; NOTE quotes if spaces in name
span: Can't span
or center with span, use
and
table:
Do not add cell padding info in the table HTML if a table style is used that specifies these
For reliable cellspacing, specify cellspacing="0" in HTML in addition to
style border-collapse: collapse; border-spacing: 0px;
CENTERING:
For bulk centereing of tables:
(1) HTML: May also simply use
(2) A CSS-recommended centering technique FAILS to center in Mozilla & IE:
div.BulkCenter {margin-right:auto; margin-left:auto;} or
div.BulkCenter {margin:0 auto;}
(3) This CSS also fails:
.margin-test {margin-right:auto; margin-left:auto; }
(4) This CSS works but resets the centering of cell contents to left:
div.centered {text-align: center;}
div.centered table {margin-left: auto; margin-right: auto; text-align: left;}
(See theodorakis.net/tablecentertest.html)
CONCL: Probably best to just use
UNITS: No space between digit and units, e.g., 3em not 3 em
ABSOLUTE MEASUREMENTS: 1.0cm in 72dpi (the typical screen resolution) = c. 28 pixels = c. 3% of 1024 pixels
MARGIN: These are not correctly functional in IE4 and NS4. Cannot specify margin in td, use padding
LINE HEIGHT: Generally, avoid specifying absolute line height, since contained elements like superscripts etc.
may exceed it and not render correctly. Use instead a scaling factor like 1.2 (no units)
which defers the computation and allows for superscript etc to display properly in browsers.
But this confuses FP design mode, so maybe best to omit it entirely.
*/
