<!-- here we set the basics. All body backrounds default to white and all
unmarked text defaults to 9 pt sans serif. we use point rather than
pixels because it is relative ... the visually limited user can make the
fonts bigger on their machines All text begins as black. -->
BODY {background: #FFFFFF; font-family: arial, helvetica, sans-serif;
font-size: 9pt}
TABLE, TD {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt}
<!-- for paragraphs and forms, the default alignment is to the left and
there is a 5 pixel indentation on the left and right margins, just to
get the text off the edges of the window. We have a margin bottom of
0em — the size of the width of a lower case M, an old printing term,
but it could be pixels or percent — to bring the first line of lists
up to butt the paragraph -->
P, FORM {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt; text-align: left; margin-left: 5px; margin-right: 5px;
margin-bottom: 0em}
<!-- we want our blockquotes indented 2 ems left and right. An em is a
relative term; if you have 18 pt type, it will be twice as much as 9 pt
type, and stay logical if you make the fonts bigger in your
preferences -->
BLOCKQUOTE {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt; text-align: left; margin-left: 2em; margin-right: 2em}
<!-- this defines the characteristics of lists -->
OL, DL, UL {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt; text-align: left; margin-top: 0em;}
UL {list-style-type: disc}
LI {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt; text-align: left; }
DD {color: #000000; font-family: arial, helvetica, sans-serif;
font-size: 9pt; text-align: left; }
<!-- now we talke about the sizes and fonts for headings -->
H2, H1 {font-size: 18pt; font-family: arial, helvetica, sans-serif;
margin-left: 5px; margin-right: 5 px}
H3 {font-size: 15pt; font-family: arial, helvetica, sans-serif;
margin-left: 5px; margin-right: 5 px}
H4 {font-size: 12pt; font-family: arial, helvetica, sans-serif;
margin-left: 5px; margin-right: 5 px}
H5 {font-size: 9pt; font-family: arial, helvetica, sans-serif;
margin-bottom: 0em; margin-left: 5px; margin-right: 5 px}
H6 {font-size: 8pt; font-family: arial, helvetica, sans-serif;
margin-bottom: 0em; margin-left: 5px; margin-right: 5 px}
PRE {font-family: monotype; font-size: 9pt}
<!-- here we begin creating pseudo-elements for specific purposes. in the
context of a command it would be <p class="stx">... </p> etc. -->
<!--8 point text -->
.stx {font-size: 8pt; margin-top: 0em; margin-bottom: .5em;}
.btx {font-size: 8pt; margin-top: 0em; margin-bottom: 0em;}
.hdr {font-size: 8pt; text-align: right; font-weight: bold; margin-top:
0em; margin-bottom: 0em; margin-left: 5px; margin-right: 5 px}
<!-- sometimes we don't want links to be underlined... as in when we are
making something similar to buttons <a href="....Link...."
class="splink">... </a> OR OR OR ... id="splink" The element with
the pound sign is ID=, the ones with the periods are CLASS= the
reason is that you can't have more than one class or id call in a
command... but you can have both class AND id -->
<!--special links -->
.splink {text-decoration: none}
#splink {text-decoration: none}
<!-- more specialty stuff, this for sports -->
.news {font-size: 11pt; font-family: arial, helvetica, sans-serif;
font-weight: bold; margin-left: 5px; margin-right: 5 px}
#news {font-size: 11pt; font-family: arial, helvetica, sans-serif;
font-weight: bold; margin-left: 5px; margin-right: 5 px}
<!-- more specialty stuff, this for catalog -->
.minihead {font-size: 11pt; font-family: arial, helvetica, sans-serif;
font-weight: bold; margin-left: 5px; margin-right: 5 px; margin-bottom:
0em;}
#minihead {font-size: 11pt; font-family: arial, helvetica, sans-serif;
font-weight: bold; margin-left: 5px; margin-right: 5 px; margin-bottom:
0em;}
.minitag {margin-left: 2em; margin-top: 0em; margin-bottom: 0em}
#minitag {margin-left: 2em; margin-top: 0em; margin-bottom: 0em}
.indent {margin-left: 2em; }
#indent {margin-left: 2em; }
.notes {text-indent: 1.5em; margin-top: 0em; margin-bottom: 0em}
#notes {text-indent: 1.5em; margin-top: 0em; margin-bottom: 0em}
<!-- class and id elements for the variety of alignments ... center and right -->
<!--alignments follow -->
.ctr {text-align: center; margin-top: 0em}
.rt {text-align: right}
#ctr {text-align: center}
#rt {text-align: right}
.tight {text-indent: 0; margin-top: 0em; margin-bottom: 0em }
#tight {margin-top: 0; margin-bottom: 0}
.tag {margin-left: 2em; margin-top: .2em}
#tag {margin-left: 2em; margin-top: .2em}
<!-- now we create class and id files for colors. These are the stock
colors on our site. With the combinations of text and background
colors, you can create almost anything, even buttons. those starting
with TX are for text colors, those starting with BG are for background
colors. You can use these in TABLE, TR, TD easily, but you can also use
them in text P, SPAN, B, BLOCKQUOTE, DIV, etc. -->
<!-- color IDs follow -->
#txdkgrn {color: #016B43}
#txdkbrn {color: #6E2f20}
#txdkblu {color: #024b8f}
#txdkpur {color: #66336c}
#txdkyel {color: #EAB203}
#txmroon {color: #7b2e4c}
#txltgrn {color: #B7CFB8}
#txltbrn {color: #E7CAAA}
#txltblu {color: #B7CAE0}
#txltpur {color: #E4CBE3}
#txmdgrn {color: #6FA071}
#txmdblu {color: #6F96c1}
#txmdbrn {color: #CF9565}
#txmdpur {color: #C997C8}
#txmdyel {color: #FFE390}
#txltyel {color: #FFE9B1}
#txvlgrn {color: #E2EEE4}
#txvlblu {color: #E8F0F9}
#txvlbrn {color: #EFE3DA}
#txvlpur {color: #F0E2F0}
#txvlyel {color: #FAF3E1}
#txwhite {color: #FFFFFF}
#bgdkgrn {background: #016B43}
#bgdkbrn {background: #6E2f20}
#bgdkblu {background: #024b8f}
#bgdkpur {background: #66336c}
#bgdkyel {background: #EAB203}
#bgmroon {background: #7b2e4c}
#bgltgrn {background: #B7CFB8}
#bgltbrn {background: #E7CAAA}
#bgltblu {background: #B7CAE0}
#bgltpur {background: #E4CBE3}
#bgmdgrn {background: #6FA071}
#bgmdblu {background: #6F96c1}
#bgmdbrn {background: #CF9565}
#bgmdpur {background: #C997C8}
#bgmdyel {background: #FFE390}
#bgltyel {background: #FFE9B1}
#bgvlgrn {background: #E2EEE4}
#bgvlblu {background: #E8F0F9}
#bgvlbrn {background: #EFE3DA}
#bgvlpur {background: #F0E2F0}
#bgvlyel {background: #FAF3E1}
#bghilite {background: #FFFF99}
<!--color class files follow -->
.txdkgrn {color: #016B43}
.txdkbrn {color: #6E2f20}
.txdkblu {color: #024b8f}
.txdkpur {color: #66336c}
.txdkyel {color: #EAB203}
.txmroon {color: #7b2e4c}
.txltgrn {color: #B7CFB8}
.txltbrn {color: #E7CAAA}
.txltblu {color: #B7CAE0}
.txltpur {color: #E4CBE3}
.txmdgrn {color: #6FA071}
.txmdblu {color: #6F96c1}
.txmdbrn {color: #CF9565}
.txmdpur {color: #C997C8}
.txmdyel {color: #FFE390}
.txltyel {color: #FFE9B1}
.txvlgrn {color: #E2EEE4}
.txvlblu {color: #E8F0F9}
.txvlbrn {color: #EFE3DA}
.txvlpur {color: #F0E2F0}
.txvlyel {color: #FAF3E1}
.txwhite {color: #FFFFFF}