/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */

/* basic elements */
html {
margin: 0;
padding: 0;
}
Change margin and padding to 0 to override browser defaults.
body {
font: 75% georgia, sans-serif;
line-height: 1.88889;
color: #003333;
background: #fff url(blossoms.jpg) no-repeat bottom right;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}

Set the body font to be 75% of browser size, style georgia sans-serif. Set line heigt to be 1.889 browser and font color to be black. Set the background to be white with a non-repeating image at the bottom right. Set margin and padding to be zero to enforce consistencies across browsers.
p {
margin-top: 0;
text-align: justify;
}

Set the top margin for the paragraph tag to be 0 pixels. Align the text left.
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}

Set the header tag to be italic 1.4x normal browser size, and use the georgia font first, default sans-serif second. Set spacing between letters to be 1 px. Set the color to be light brown and bottom margin 0
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}

Set the link appearance to be bold without underlines, color purple.
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}

Visited class of links. Set the visited state of links to be bold without underlines, color light purple
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
acronym {
border-bottom: none;
}
Hover class for link. Set the acronym tag to not have a bottom border.

/* specific divs */
#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative;
background-color: #99CCFF;
}

Set the container div to have a non-repeating image background.

#intro {
min-width: 470px;
background-color: #99FFCC;
}

Set the intro div tag to havea minimum width o 470 pixels with a background color of light green.

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}

In the header 1 tag in the Page Header ID div (contextual selector), make the background clear and show the h1.gif non repeating. make the top margin 10 pixels, width 219 pixels and height 87 pixels. Float the div left.
#pageHeader h1 span {
display:none
}

Contextual selector: In the header 1 tag in the Page Header ID div, disable the display of an element assigned to the span tag

#pageHeader h2 {
background: transparent url(h2.gif) no-repeat top left;
margin-top: 58px;
margin-bottom: 40px;
width: 200px;
height: 18px;
float: right;
}
Contextual selector: In the header 2 tag in the Page Header ID div, make the background clear and show the h2.gif image non repeating. Make the top margin 58 pixels, bottom margin 40 px, width 200 pixels and height 18 pixels. Float the div right.

#pageHeader h2 span {
display:none
}

Contextual selector: In the header 2 tag in the Page Header ID div, disable the display of an element assigned to the span tag

#pageHeader {
padding-top: 20px;
background-color: #FFFFCC;
}

In the pageHeader div, set top padding to 20 pixels and background color to be yellow.

#quickSummary {
clear:both;
margin: 20px 20px 20px 10px;
width: 160px;
float: left;
background-color: #6699CC;
}

For the #quickSummary, clear floats, set the margin to be 20 pixels top right and bottom and 10 left, set the width to be 160 px, set the div float to be left, and set the background color to be blue.

#quickSummary p {
font: italic 10pt/22pt georgia;
text-align:center;
}

For the #quickSummary paragraph contextual selector, set the font to italic and align text center.

#preamble {
clear: right;
padding: 0px 10px 0 10px;
background-color: #CCCC66;
}

For the #preamble div, clear the right float, set the background color to be light brown/green and set padding.
#supportingText {
padding-left: 10px;
margin-bottom: 40px;
background-color: #CCFFFF;
}

For the #supportingText, set left padding to 10 pixels and bottom margin to 40 pixels. Set background color to light blue.

#footer {
text-align: center;
background-color: #FFCCCC;
}

For the #footer div, set the text alignment to center and color to pink.

#footer a:link, #footer a:visited {
margin-right: 20px;
}

Multiple contextual selector: For the #footer div links and link visited state, set the right margin to 20 pixels.

#linkList {
margin-left: 600px;
position: absolute;
top: 0;
right: 0;
background-color: #663333;
}

For the #linkList, set the left margin to 600 pixels and set the position to be absolute on the page at the top right corner.
#linkList2 {
font: 10px verdana, sans-serif;
background: transparent url(paper-bg.jpg) top left repeat-y;
padding: 10px;
margin-top: 150px;
width: 130px;
background-color: #FFCC66;
}

For the #linkList2 set the font to be 10 px and the background to be transparent with a jpg repeating horizontally. Set the padding all aroud to be 10 pixels. Set top margin to be 150 pixels and width to be 130 pixels.

#linkList h3.select {
background: transparent url(h3.gif) no-repeat top left;
margin: 10px 0 5px 0;
width: 97px;
height: 16px;
}

Contextual selector with class definition: For the header 3 tag of the #linkList div, set the background to be transparent no repeating with a header image. Set the margin, width, and height as specified.
#linkList h3.select span {
display:none
}

Contextual selector with class definition: In the header 3 tag in the linkList ID div, disable the display of an element assigned to the span tag
#linkList h3.favorites {
background: transparent url(h4.gif) no-repeat top left;
margin: 25px 0 5px 0;
width: 60px;
height: 18px;
}

Contextual selector with class definition: In the header 3 tag in the linkList ID div, define a class of "favorites" with a non-repeating background in the top left of the screen displaying the h4 gif. Set the margin, width, and height for this class.
#linkList h3.favorites span {
display:none
}

Contextual selector with class definition: In the header 3 tag in the linkList ID div for the favorites class, disable the display of an element assigned to the span tag
#linkList h3.archives {
background: transparent url(h5.gif) no-repeat top left;
margin: 25px 0 5px 0;
width:57px;
height: 14px;
}

Contextual selector with class definition: In the header 3 tag in the linkList ID div, define a class of "archives" with a non-repeating background in the top left of the screen displaying the h4 gif. Set the margin, width, and height for this class.
#linkList h3.archives span {
display:none
}
Contextual selector with class definition: In the header 3 tag in the linkList ID div for the archives class, disable the display of an element assigned to the span tag

#linkList h3.resources {
background: transparent url(h6.gif) no-repeat top left;
margin: 25px 0 5px 0;
width:63px;
height: 10px;
}

Contextual selector with class definition: In the header 3 tag in the linkList ID div, define a class of "resources" with a non-repeating background in the top left of the screen displaying the h6 gif. Set the margin, width, and height for this class.

#linkList h3.resources span {
display:none
}
Contextual selector with class definition: In the header 3 tag in the linkList ID div for the resources class, disable the display of an element assigned to the span tag

#linkList ul {
margin: 0;
padding: 0;
}

Contextual selector: For the bulleted list in the linkList div, set margin and padding to zero.

#linkList li {
line-height: 2.5ex;
background: transparent url(cr1.gif) no-repeat top center;
display: block;
padding-top: 5px;
margin-bottom: 5px;
list-style-type: none;
}

Contextual selector: For the list item in the linkList div, set line-height to be 2.5 exs. Set the background to be the cr1 gif non-repeating and centered. Display the list item in block format. Set the list style type to be none so there is no bullet displayed.
#linkList li a:link {
color: #988F5E;
}

Contextual selector for a:link hover class: For the list item in the linkList div, set the color of the link to light brown.
#linkList li a:visited {
color: #B3AE94;
}

Contextual selector for a:visited hover class. For the list item in the linkList div, set the visited state to be light brown.

#extraDiv1 {
background: transparent url(cr2.gif) top left no-repeat;
position: absolute;
top: 40px;
right: 0;
width: 148px;
height: 110px;
background-color: #CC99CC;
}

For the #extraDiv1, set absolute position on the page at 40 pixels from the top and zero from the right. Set the width and height of the div, and background color.
.accesskey {
text-decoration: underline;
}

Define a class "accesskey" with underlined text.

The following are ID's I defined in order to colorize them. There was no definition in the stylesheet so I added them to colorize them.
#participation{
background-color: #CC9966;
}
#benefits{
background-color: #6666CC;
}
#requirements{
background-color: #339966;
}
#lselect{
background-color: #CCFFCC;
}
#larchives{
background-color: #FFFFCC;
}
#lresources{
background-color: #999999;
}
#explanation{
background-color: #CC9933;
}

The following are IDs I defined and added height to make them show up.
#extraDiv2{
background-color: #336600;
height:20px;
}
#extraDiv3{
background-color: #00FF33;
height:20px;
}
#extraDiv4{
background-color: #000099;
height:20px;
}
#extraDiv5{
background-color: #660099;
height:20px;
}
#extraDiv6{
background-color: #CC9933;
height:20px;
}