Style Sheets: This Site's CSS
Below is the actual style sheet files used for these pages.
Notice that Arial and Helvetica are defined in addition to sans-serif. This is for support with various operating systems. Arial is generally found on most systems but not so common on the MacIntosh which uses Helvetica. As a last option sans-serif is defined which is a browser font similar in font type to the prior two desired font types.
If you would like to specify a serif font you would use:
font-family: 'Times New Roman','Times',serif
For a fixed width font use:
font-family: 'Courier New','Courier',monospace
You should note, however, that the sans-serif, serif, and monospace fonts are generally unique to each browser. These are fall back fonts, provided within the browser itself, should the previous font definitions not be available from the computer's installed font sets.
The basic design of the site uses two style sheet files:
- "core.css" provides the basic structure and contextual formatting. This file standardizes the rendering aspects of the site for all browsers. (More details and notes will be provided later about the use of this 'Core CSS.')
- "body.css.php" provides the design and formatting elements for the presentation of the pages. This document is also a dynamic PHP file and can be modified on the fly. (Notice the changing logo design as you browse when using the Plain Design.)
"core.css"
/* =============================================================================
'Core CSS' Typical CSS formatting of all XHTML elements. The complete
template with comments can be found at http://www.melvinwallerjr.com/tutorial/
============================================================================= */
/* RENDER METHOD */
bdo[dir="rtl"], bdo[dir="ltr"] {
unicode-bidi: bidi-override;
}
*[dir="rtl"], *[dir="ltr"] {
unicode-bidi: embed;
}
bdo[dir="rtl"], *[dir="rtl"] {
direction: rtl;
}
bdo[dir="ltr"], *[dir="ltr"] {
direction: ltr;
}
/* OBJECT PROPERTIES */
body, h1, h2, h3, h4, h5, h6, frame, frameset, iframe, noframes, dl, dt, dd, ol, ul, li,
table, caption, colgroup, col, thead, tfoot, tbody, tr, th, td,
form, input, select, textarea, fieldset, legend, label, pre, kbd,
p, div, strong, em, b, i, address, blockquote, q, cite, var,
big, small, sub, sup, abbr, acronym, hr, a, noscript, object, applet,
dir, menu, s, strike, del, u, ins, center, tt, samp, code {
unicode-bidi: embed;
}
body, h1, h2, h3, h4, h5, h6, frame, frameset, iframe, noframes, dl, dt, dd, ol, ul,
form, textarea, pre, p, div, address, blockquote, hr, dir, menu, center, code {
display: block;
}
noscript, object, applet {
display: run-in;
}
strong, em, b, i, q, cite, var, big, small, sub, sup, abbr, acronym, a,
input, select, legend, label, kbd, s, strike, del, u, ins, tt, samp {
display: inline;
}
head {
display: none;
}
/* VISUAL CHARACTERISTICS */
body {
margin: 0px;
padding: 8px;
font-family: 'Arial', 'Helvetica', sans-serif;
background-color: #fff;
color: #000;
}
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
}
input, select, textarea, pre, pre *, kbd, kbd *, tt, samp, code {
font-family: 'Courier New', 'Courier', monospace;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 1px;
font-weight: 900;
}
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.93em;
}
h6 {
font-size: 0.86em;
}
table {
display: table;
caption-side: top;
empty-cells: show;
background-image: none;
}
caption {
display: table-caption;
margin: 0px;
padding: 0px;
text-align: center;
}
colgroup {
display: table-column-group;
}
col {
display: table-column;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
tbody {
display: table-row-group;
}
tr {
display: table-row;
background-image: none;
}
th {
display: table-cell;
vertical-align: middle;
text-align: center;
background-image: none;
font-size: 83%;
font-weight: 800;
}
td {
display: table-cell;
vertical-align: top;
text-align: left;
background-image: none;
}
dl, dt {
margin-top: 1.33em;
}
dd {
margin: 0px 0px 0px 2em;
}
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
li {
margin-top: 3px;
}
ol {
list-style: outside upper-alpha;
}
ul {
list-style: outside square;
}
ul ol, ol ol {
list-style: outside decimal;
}
ol ol ol, ol ul ol, ul ol ol, ul ul ol {
list-style: outside lower-alpha;
}
ol ul, ul ul {
list-style: outside disc;
}
ol ol ul, ol ul ul, ul ol ul, ul ul ul {
list-style: outside circle;
}
input, select, textarea, pre, pre *, kbd, kbd * {
font-size: medium;
color: #000;
}
form {
margin: 0px;
padding: 0px;
}
input {
vertical-align: top;
line-height: 1em;
}
input[type="hidden"] {
visibility: hidden;
}
input[type="image"] {
vertical-align: top;
border: 0px;
}
input[type="radio"], input[type="checkbox"] {
vertical-align: top;
background-color: inherit;
}
input[type="file"] {
font-weight: normal;
}
select {
vertical-align: top;
line-height: 1em;
}
textarea {
line-height: 1em;
}
fieldset {
margin: 0px 0px 1.33em 0px;
border: 2px solid #ccc;
padding: 0.25em;
}
legend {
padding: 2px;
}
label:focus, label:active, label:hover {
outline: thin;
}
input[type="submit"], input[type="reset"], input[type="file"], input[type="button"], label {
cursor: pointer;
}
pre, pre * {
margin: 0px 0px 1.33em 0px;
padding: 0.25em;
background-color: #f9f9f9;
}
kbd, kbd * {
padding: 0px 2px 0px 2px;
border: outset #ccc;
border-width: 1px 2px 2px 1px;
background-color: #f9f9f9;
}
p {
margin: 0px 0px 1.33em 0px;
}
em, strong em, em strong, i, address, cite, var {
font-style: italic;
}
strong, strong em, em strong {
font-weight: 900;
}
em, b {
font-weight: 800;
}
address {
font-weight: 700;
}
blockquote {
border: 1px solid #ccc;
margin: 0px 0.25em 1.33em 0.25em;
padding: 0.25em;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
abbr {
border-bottom: 1px dotted #ccc;
cursor: help;
}
acronym {
letter-spacing: 0.1em;
white-space: nowrap;
border-bottom: 1px dotted #ccc;
font-variant: small-caps;
cursor: help;
}
hr {
outline: 0px;
height: 2px;
border: 0px solid #ccc;
background-color: #ccc;
color: #ccc;
}
a {
text-decoration: none;
}
a:link, a:visited, a:focus, a:active, a:hover {
text-decoration: underline;
}
a:link {
color: #00f;
}
a:visited {
color: #909;
}
a:focus {
outline: thin;
}
a:active, a:hover { /* default */
color: #c00;
}
a[name], a[name]:focus, a[name]:active, a[name]:hover { /* named overrides default */
text-decoration: none;
color: inherit;
}
a[href]:active, a[href]:hover { /* href overrides named */
color: #c00;
}
/* Depricated Elements */
dir, menu {
margin: 0px 0px 1.33em 3em;
}
s, strike, del {
text-decoration: line-through;
}
u, ins {
text-decoration: underline;
}
center {
text-align: center;
}
tt, samp, code {
font-size: medium;
}
/* PRINTING CHARACTERISTICS */
@page {
margin: 0.5in;
size: portrait;
}
@media print {
body {
background: #fff none;
color: #000;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
h1, h2, h3, h4, h5, h6 , tbody, tr, th, td, blockquote, pre {
page-break-inside: avoid;
}
ul, ol, dl {
page-break-before: avoid;
}
}
/* SCREEN READER CHARACTERISTICS */
@media aural {
h1, h2, h3, h4, h5, h6 {
voice-family: 'paul', male;
richness: 90;
stress: 20;
}
h1 {
pitch-range: 90;
pitch: x-low;
}
h2 {
pitch-range: 80;
pitch: x-low;
}
h3 {
pitch-range: 70;
pitch: low;
}
h4 {
pitch-range: 60;
pitch: medium;
}
h5 {
pitch-range: 50;
pitch: medium;
}
h6 {
pitch-range: 40;
pitch: medium;
}
li, dt, dd, pre, em, i, strong, b {
pitch-range: 60;
pitch: medium;
richness: 60;
}
dt {
stress: 80;
}
pre {
pitch-range: 0;
richness: 80;
stress: 0;
}
em {
richness: 50;
stress: 60;
}
i {
richness: 50;
stress: 50;
}
strong {
richness: 90;
stress: 90;
}
b {
richness: 90;
stress: 80;
}
a:link {
voice-family: 'harry', male;
}
a:visited, a:active, a:hover {
voice-family: 'betty', female;
}
a:focus, a:active, a:hover {
pitch-range: 80;
pitch: x-high;
}
code, tt {
pitch-range: 0;
pitch: medium;
richness: 80;
stress: 0;
}
dfn {
pitch-range: 60;
pitch: high;
stress: 60;
}
s, strike, u {
richness: 0;
}
}
|
"body.css.php"
This particular CSS is for the current design, skin #3. This CSS will change depending on the site design skin that is in use.
body {
padding: 0px;
background: #696;
color: #333;
}
h1, h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {
text-decoration: none;
color: #030;
}
h2, h2 a, h2 a:link, h2 a:visited, h2 a:active, h2 a:hover {
text-decoration: none;
color: #033;
}
h3 {
margin-bottom: 0.25em;
border: double #fc0;
border-width: 6px 0px 0px 6px;
padding-left: 6px;
background: #963 url('/common/skin3/corner.gif') right bottom no-repeat;
color: #fefefe;
}
h3 a {
color: #fefefe;
}
h3 a:link, h3 a:visited {
color: #ff9;
}
h3 a:active, h3 a:hover {
color: #ff0;
}
h3 a[name], h3 a[name]:focus, h3 a[name]:active, h3 a[name]:hover { /* named overrides default */
text-decoration: none;
color: #fefefe;
}
h3 a[href]:active, h3 a[href]:hover { /* href overrides named */
color: #ff0;
}
h4 {
margin-bottom: 0.25em;
border: double #fc0;
border-width: 3px 0px 0px 3px;
padding-left: 3px;
color: #366;
}
h5 {
border: double #fc0;
border-width: 1px 0px 0px 1px;
padding-left: 1px;
color: #366;
}
h6 {
color: #366;
}
img {
border-width: 0px;
}
input {
color: #000;
}
input[type="image"] {
color: #000;
}
input[type="radio"] {
color: #000;
}
input[type="checkbox"] {
color: #000;
}
input[type="submit"] {
color: #000;
}
input[type="reset"] {
color: #000;
}
input[type="file"] {
color: #000;
}
input[type="button"] {
color: #000;
}
select {
color: #000;
}
option {
color: #000;
}
textarea {
width: auto;
color: #000;
}
a:link, a:link * {
color: #963;
}
a:visited, a:visited * {
color: #960;
}
a:hover, a:hover *, a:active, a:active * {
color: #039;
}
kbd strong, pre strong, code strong {
color: #000;
}
kbd, pre, .code {
font-size: 93%;
}
.code kbd, .code kbd * {
border-width: 0px;
}
#code, .code, .code font {
font-family: 'Courier New','Courier',monospace;
background-color: #f9f9f9;
}
.code font {
font-size: 93%;
}
.hiderule {
position: absolute;
left: -9000px;
width: 100%;
}
div.navbtn {
margin: 0px;
text-align: right;
}
p.navbtn {
margin: 0px;
float: right;
}
h3 .navbtn {
padding: 1.5em 3px 0px 6px;
float: right;
}
/* Design and Layout */
#masthead {
position: relative;
height: 97px;
border-bottom: 3px solid #363;
background: url('/common/skin3/grass.gif') bottom center repeat-x;
}
#logo {
position: absolute;
top: -30px;
left: -15px;
z-index: 100;
}
#sitename {
position: absolute;
top: 0px;
left: 0px;
float: left;
margin: 15px 0px 0px 140px;
padding: 0px;
}
#sitename a:link {
padding-bottom: 1px;
background: url('/common/skin3/uline-a.gif') bottom right repeat-x;
text-decoration: none;
color: #963;
}
#sitename a:visited {
padding-bottom: 1px;
background: url('/common/skin3/uline-b.gif') bottom right repeat-x;
text-decoration: none;
color: #960;
}
#sitename a:hover, #sitename a:active {
padding-bottom: 1px;
background: url('/common/skin3/uline-c.gif') bottom right repeat-x;
text-decoration: none;
color: #000;
}
#skiplinks {
visibility: hidden;
}
div#textsize {
width: 100%;
text-align: center;
}
div#textsize table {
margin: auto;
border: 1px solid #000;
background: #630 none;
}
div#myTextSize {
text-align: center;
color:#eee;
}
div#myTextSize a {
padding: 1px 1px 3px 1px;
font-weight: 900;
font-size: small;
color: #eee;
cursor: pointer;
}
#contents {
margin: 0px 160px 0px 0px;
border: solid #ccc;
border-width: 1px 1px 0px 0px;
padding: 1em 1em 1em 1em;
background: #fff none;
}
#breadcrumbs {
margin-bottom: 1em;
font-size: 83%;
}
#breadcrumbs div {
float: right;
}
#breadcrumbs a {
text-decoration: none;
}
#breadcrumbs a:hover, #breadcrumbs a:active {
text-decoration: underline;
}
#feature {
border: 2px solid #696;
background-color: #eee;
}
#feature th {
border: 0px;
vertical-align: middle;
text-align: center;
background-color: #fff;
}
#feature td {
border: 0px;
vertical-align: middle;
text-align: center;
background-color: #fff;
}
#feature th.bold, #feature td.bold {
background-color: #696;
color: #fefefe;
}
#feature th.bold h2, #feature td.bold h2 {
background-color: #696;
color: #fefefe;
}
#anchors {
border: 1px solid #ccc;
padding: 3px;
background: #eee none;
font-size: 83%;
}
#anchors ul {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#anchors li {
display: inline;
border-left: 1px dashed #999;
padding: 0px 3px 0px 5px;
}
#anchors a {
white-space: nowrap;
}
#navbar {
top: 100px;
right: 0px;
float: right;
width: 160px;
margin: 0px;
border: solid #ccc;
border-width: 1px 0px 0px 0px;
padding: 0px;
background-color: #696;
}
#navbar div.sel {
margin: 0px;
border-bottom: 1px solid #ccc;
padding-bottom: 0.25em;
background-color: #030;
}
#navbar h2 {
margin: 0px;
border: 0px;
padding: 0px;
font-size: 0.9em;
background: #ff9 none;
color: #333;
}
#navbar h2 a:link, #navbar h2 a:visited {
display: block;
border-bottom: 1px solid #ccc;
padding: 3px 3px 3px 20px;
background: #363 none;
font-family: 'Times New Roman','Times',serif;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: 900;
color: #ff6;
}
#navbar h2 a:active, #navbar h2 a:hover {
display: block;
border-bottom: 1px solid #ccc;
padding: 3px 3px 3px 20px;
background: #000 url('/common/skin3/paw_cy.gif');
background-position: left;
background-repeat: no-repeat;
font-family: 'Times New Roman','Times',serif;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: 900;
color: #fefefe;
}
#navbar div.sel h2 a:link, #navbar div.sel h2 a:visited {
display: block;
border: 0px;
padding: 3px 3px 3px 20px;
background: #030 none;
font-family: 'Times New Roman','Times',serif;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: 900;
color: #fefefe;
}
#navbar div.sel h2 a:active, #navbar div.sel h2 a:hover {
display: block;
padding: 3px 3px 3px 20px;
background: #000 url('/common/skin3/paw_cy.gif');
background-position: left;
background-repeat: no-repeat;
font-family: 'Times New Roman','Times',serif;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: 900;
color: #fefefe;
}
#navbar h3 {
margin: 0.3em 0.5em 0px 0.5em;
border: 0px;
padding: 2px;
font-size: 0.73em;
background: #030 none;
color: #fefefe;
}
#navbar h3 a {
display: block;
text-decoration: none;
}
#navbar a:link, #navbar a:visited {
font-family: 'Times New Roman','Times',serif;
text-decoration: none;
color: #fefefe;
}
#navbar a:active, #navbar a:hover {
font-family: 'Times New Roman','Times',serif;
text-decoration: underline;
color: #ff0;
}
#navbar ul {
list-style-type: none;
margin: 2px 0.5em 0px 1em;
padding: 0px;
}
#navbar li {
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
font-size: 87%;
}
#navbar li a:link, #navbar li a:visited {
display: block;
margin: 1px 0px 2px 0px;
border: 0px;
padding: 0px 10px 0px 20px;
text-decoration: none;
background: #963 none;
color: #ff9;
}
#navbar li a:active, #navbar li a:hover {
display: block;
border: 0px;
padding: 0px 10px 0px 20px;
text-decoration: underline;
background: #930 url('/common/skin3/paw_cy.gif');
background-position: left;
background-repeat: no-repeat;
color: #ff0;
}
#navbar li.sel a:link, #navbar li.sel a:visited {
background: #930 none;
color: #ff9;
}
#navbar li.sel a:active, #navbar li.sel a:hover {
background: #930 url('/common/skin3/paw_cy.gif');
background-position: left;
background-repeat: no-repeat;
color: #ff0;
}
#footer {
position: relative;
clear: both;
margin: 0px 161px 0px 0px;
border-top: 1px solid #ccc;
padding: 0px 1em 0px 1em;
text-align: center;
font-size: 83%;
}
#footer img {
padding: 0px 4px 4px 0px;
vertical-align: middle;
}
#footer * {
color: #fefefe;
}
.clean {
font-size: 0px;
clear: both;
}
@page {
margin: 0.5in;
size: portrait;
}
|
[Updated: Sunday, November 18, 2007]
