/* --// basic elements --// */ body {
font: 11px/18px verdana,arial,helvetica,sans-serif;
color: #512720;
background: #512720 url(bodyBg.gif) center top repeat-y;
margin: 0;
padding: 0;
text-align: center;
}

This is a standard selector that affects the content of the body. It gives the font size, font family in order of preference, and font color of reddish brown. It also gives a background color of redish brown, and a backgtround image called bodyBg.gif which is centered and repeats vertically. It also gives the margin and padding a value of 0 to override any browser defaults.

acronym {
cursor: help;
border-bottom: 1px dotted #B0915F;
}

This is a standard selector which affects the acronym tag "acronym". It gives it a border bottom of 1 px in the dotted style that is light brown. It also gives it a curso property that I don't know about.

/* --// layout // */
#container {
width: 765px;
background: url(mainBg.gif) repeat-y;
margin: 0 auto;
padding: 0;
text-align: left;
}

This is a standard selctor that effects the id called "container". It gives it a width of 765px, a background image called mainBg.gif which repeats vertically. It gives it a 0 margin on the top and bottom and auto margins on the left and right. It gives it a padding of 0 and aligns the text to the left.

#pageHeader {
width: 765px;
height: 343px;
background: url(headerBg.jpg) no-repeat;
}

This is a standard selector that affects the id called "pageHeader". It gives it a width of 765px, a height of 343px, a background image called headerBg.jpg which does not repeat.

#preamble, #supportingText {
text-align: left;
width: 455px;
margin: 0 0 0 43px;
}

This is a multiple selector that affect both the id called "preamble" and the id called "supportingText". It gives them a text align of left, a width of 455px and a margin of top 0 right 0 bottom 0 and left 43px.

#preamble p, #supportingText p {
margin: 0 0 12px 0;
}

This is a multiple contextual selector that affects the p tags inside the id "preamble" and the p tags inside the id "suppporintText". It gives them a margin of 0 top 0 right 23px on the bottom and 0 on the left.

#quickSummary { position: relative; }

This is a standard selector that affects the id quickSummary. It gives it a position of relative.

#quickSummary .p2 {
position: absolute;
margin-top: -70px;
left: 615px;
font: 9px/14px Georgia,Times,Serif;
text-transform: uppercase;
width: 100px;
padding: 0;
}

This is a contextual selector that affects the class p2 inside the id quickSummary. It gives it a position of absolute a margin top of -70px, a position left of 615px, a font size, a font family in order of preference. It also gives it a text transform of upper case, a width of 100px and 0 padding.

#linkList {
position: absolute;
top: 343px;
margin-left: 529px;
color: #2B0101;
width: 175px;
}

This is a standard selector that affects the id linkList. It gives it a position absolute, a position of top 343 px, a left margin of 529px a font color of dark brown and a width of 175px.

#footer {
display: block;
padding: 12px 0 0 0;
margin: 20px 0 0 120px;
text-align: center;
background: url(footer.gif) no-repeat;
height: 43px;
width: 204px;
}

This is a standard selector that affects the id called "footer". It gives it a display of block, padding of 12 px on top and 0 on each of the remaining sides. It gives it a margin of 20px on top 0 on the right 0 on the bottom and 120px to the left

.p1,.p2,.p3,.p4,.p5 { padding-left: 8px; }

This is a multiple selector that affects the classes p1, p2, p3, p4, and p5. It gives them a left padding of 8px.

/* --// headers // --*/
#preamble h3,#explanation h3, #participation h3, #benefits h3, #requirements h3 {
height: 60px;
text-indent: -8000px;
margin: 0;
padding: 0;
}

This is a multiple contextual selector which affects the h3 tags of the preamble, explanation, participation, benefits and requirements id's. It gives them a hieght of 60px, a text indent of -8000px, a margin and padding of 0.

#lselect h3, #lresources h3, #larchives h3 {
height: 23px;
margin: 0;
padding: 0;
text-indent: -8000px;
}

This is a multiple contextual selector that affects the h3 tags in the lselect, lresources, and larchives id's. It gives them a height of 23px, a text indent of -8000px, and a margin and padding of 0.

#preamble h3 { background: url(hdRoad.gif) no-repeat; }

This is a contextual selector which affects the h3 tag inside the preamble id. It gives it a background image called hdRaod.gif that does not repeat.

#explanation h3 { background: url(hdAbout.gif) no-repeat; }

This is a contextual selector that affects the h3 tag inside the explanation id. It gives it a background image called hdAbout.gif that does not repeat.

#participation h3 { background: url(hdPart.gif) no-repeat; }

This is a contextual selector that affects the h3 tag of the participation id. It gives it a background image called hdPart.gif that does not repeat.

#benefits h3 { background: url(hdBen.gif) no-repeat; }

This is a contextual selector that affects the h3 tag in the benefits id. It gives it a background image called hdBen.gif that does not repeat.

#requirements h3 { background: url(hdReq.gif) no-repeat; }

This is a contextual selector that affects the h3 tag of the requirements id. It gives it a background image called hdReq.gif that does not repeat.

#lselect h3 { background: url(hdSelect.gif) no-repeat; }

This is a contextual selector that affects the h3 tag of the lselect id. It gives it a background image called hdSelect.gif that does not repeat.

#larchives h3 { background: url(hdArch.gif) no-repeat; margin-top: 15px;}

This is a contextual selector that affects the h3 tag inside the larchives id. It gives it a background image called hdArch.gif that does not repeat. It also gives it a top margin of 15px.

#lresources h3 { background: url(hdResc.gif) no-repeat; margin-top: 15px; }

his is a contextual selector that affects the h3 tag of the lresources id. It gives it a background image called hdResc.gif that does not repeat. It also gives it a top margin of 15px.

/* --// links --// */
a {
color: #683A33;
text-decoration: none;
border-bottom: 1px dotted #683A33;
}

This is a standard selector that affects a tags (links). It gives them a reddish brown font color, it removes the default text decoration of underline and gives it a 1 px reddish brown dotted border bottom.

a:hover,a:active {
border-bottom: 1px solid #512720;
background: #C3A680;
}

This is a multiple psuedo class selector that affects the a tags both in the hover and in the active state. It gives them a 1 px solid brown border bottom. It also gives them a background color of beige.

a acronym { border: 0; }

This is a contextual selector that affects the acronym tag inside the a tag. It gives it a border of 0.

li a {
display: block;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
padding: 0 0 0 10px;
background: url(star.gif) no-repeat;
border-bottom: 0;
}

This is a contextual selector that affects the a tags inside the li tags. It gives them a display of block, a bold font-weight, a font size of 10px, a text transform of uppercase and padding of top 0 right 0 bottom 0 and left 10px. It also gives it a background image called star.gif that does not repeat and a border bottom of 0.

li a.c {
font-size: 9px;
font-weight: normal;
display: inline;
padding: 0;
background: none;
}

This is a contextual selector that affects the a tags inside of li tags which have a class of c. It gives them a font zize of 9px, a font-weight of normal, a display of inilne, a padding of 0 and no background.

#larchives li a, #lresources li a {
display: inline;
font-weight: normal;
font-size: 9px;
margin: 0;
text-transform: uppercase;
}

This is a multiple contextual selector. It affects the a tags inside of the li tags inside of the archives id, and also the a tags inside of the li tags inside of the lresources id. It gives them a display of inline, a fontweight of normal, a fontsize of 9px a margin of 0 and a text transfrom of uppercase.

#larchives li a { background: none; }

This is a contextual selector that affects the a tags inside the li tags inside the larchives id. It gives them a background of none.

li a:hover, li a:hover.c { color: #5E1919; border-bottom: 0; }

This is a multiple contextual psuedo class selector that affects the a tags inside the li tags during the hover state and also the a tags inside the li tags with a class of c during the hover state. It gives them a font color of reddish brown and a border bottom of 0.

li a:hover { background: url(star_over.gif) no-repeat; }

This is a contextual psuedo class selector that affects the a tags inside the li tags during the hover state. It gives them a background image called star_over.gif that does not repeat.

li a:hover.c { background: none; }

This is a contextual psuedo class selector that affects the a tags inside the li tags with a class of c during the hover state. It gives them a background of none.

#footer a {
text-decoration: none;
border: none;
font: 10px georgia,times,serif;
padding: 1px;
text-transform: uppercase;
}

This is a contextual selector that affects the a tags inside the footer id. It gives them a text decoratin of none which removes the default of underline. It gives them no border, a font size of 10 px, font family in order of preference, padding of 1px and a text transform of uppercase.

#footer a:hover {
background: none;
border-top: 1px solid #683A33;
border-bottom: 1px solid #683A33;
}

This is a contextual psuedo class selector that affects the a tags in the footer id during the hover state. It gives them a background of none, a border top that is 1px solid reddish brown and a border bottom that is 1px solid reddish brown.

/* --// no display // -- */
#quickSummary .p1, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pageHeader h1,h2 { display : none; }

This is a multiple contextual selector that affects the class of p1 inside of the quickSummary id as well as the extraDiv1, extraDiv2, extraDiv3, extraDiv4, extraDiv5, extraDiv6 id's, as well as the h1 and h2 tags inside the pageHeader id. It gives them a display of none.

/* --// lists --// */
ul,li {
list-style: none;
padding: 0;
margin: 0;
line-height: 15px;
}

This is a multiple selector that affects the li and ul tags. It gives them a list-style of none, pading and margin of 0, and line height of 15px.

#lselect, #lresources, #larchives {
padding-bottom: 6px;
background: url(liBttmBg.gif) center bottom no-repeat;
}

This is a multiple selector that affects the lselect, lresources and larchives id's. It gives them a padding bottom of 6px and a background image called liBttnBg.gif that is centered and does not repeat.

li {
padding: 5px 5px 12px 5px;
background: url(liBg.gif) center bottom no-repeat;
text-transform: uppercase;
font-size: 9px;
/*border-bottom: 1px solid #A68858;*/
}

This is a standard selector that affects the li tags. It gives them a padding of top 5px right 5px bottom 12px and left 5px. It gives them a background image called liBg.gif that is centered at the bottom with no repeat. It also gives them a text transform of uppercase a font size of 9px.

/* --// hover effects //-- */
.p1:hover,.p2:hover,.p3:hover,.p4:hover,.p5:hover { border-left: 2px solid #B0915F; padding-left: 6px; }

This is a multiple psuedo class selector that affects the classes of p1, p2, p3, p4 and p5 in the hover state. It gives them a left border that is solid 2 px and light brown. It also gives them a padding left of 6px.

#quickSummary .p2:hover { border: 0; padding: 0; }

This is a contextual selctor that affects the p2 class inside the auickSummary id in the hover state. It goves them a border and a padding of 0.