* {padding: 0;margin: 0;} Universal selector will set the default padding and margins of all elements to zero.

body { color: #fff; background: #fff url(bg.jpg) repeat; font: normal 70% Georgia, Palatino, Times, Times New Roman, serif; color: #666;} The body tag has a text color and background color of white. There is a background image called BG:.jpg that will repeat in the browser if linked properly. The font size is 70% or 11.2(if the default font size is 16px), the font-family is Georgia, Palatino, Times, Times New Roman and has a serif style in a normal font weight and color of dark gray.

a:link {text-decoration: none;border-bottom: 1px solid #BEB9AA; color: #968C5A;} When the mouse clicks on an “a” link, it does not have an underline, but has a border bottom 1 pixels wide in a solid tan color that is displayed at all times. The text color is a mustard yellow.

a:visited {text-decoration: none; border-bottom: 1px solid #BEB9AA; color: #B3AE94;} When the mouse has clicked on an “a” link and gone to the page, it does not have an underline, but has a border bottom 1 pixels wide in a solid tan color that is displayed at all times. The text color is a light taupe color.

a:hover {text-decoration: none; border-bottom: 1px solid #AAA08C; color: #AA7846;} When the mouse moves over a link, it does not have an underline, but has a border bottom 1 pixels wide in a solid taupe color that is displayed at all times. The text color is a pumpkin color.

a:active {text-decoration: none; border-bottom: 1px solid #AAA08C; color: #8C7846;} When an “a” link is being clicked on, it does not have an underline, but has a border bottom 1 pixels wide in a solid taupe color that is displayed at all times. The text color is a brown-green color.

p { font: 100% Georgia, Palatino, Times, Times New Roman, serif; line-height: 17px; margin-top: 0px; text-align: justify; padding-left: 14px; padding-bottom: 10px; padding-right: 100px;} The p tag text attributes are font size of 16px or 100% (if the default text size is 16px) from the family Georgia, Palatino, Times, Times New Roman. The font is serif style and is spaced to have a line-height of 17px. The contents begin 0 pixels from the top margin anything the text has a justified alignment. The text has left padding of 14 pixels, bottom padding of 10 pixels and right side padding of 100 pixels.

.p5 {padding-bottom: 40px;} The p tag, which is located at the very bottom of the page/above the footer, has bottom padding of 40 pixels.

h3 { text-indent: -1000em;} The heading 3 tag is indented in the middle of the browser or -1000 'em.

acronym {font-style: italic; border: 0px; cursor: help;} The acronym tag has an italic font style with no border. The cursor:help attribute or help cursor adds a question mark to let the view know that additional help is available.

#container { url(back.jpg) center center repeat-y; width: 750px; height: auto; margin-left: auto; margin-right: auto;} The block element and div tag named container has a background of named back.jpg that repeats on the –y axis. The container has a width of 750 pixels with automatic height adjustment depending on the amount of content added. The left margin and right margin is set to automatic. This is a 3-column fixed-width layout.

#intro {display: block;} The div tag called intro is displayed as a block element.

#pageHeader {url(header.jpg) no-repeat; position: relative; width: 660px; height: 175px; top: 0px; left: 80px; text-indent: -1000em;} The div tag pageHeader positions the non-repeating header.jpg graphic relative to other div tags. It is 660 pixels wide and 175 pixels tall, positioned to the left 80 pixels and indented -1000em.

#quickSummary .p1 {url(summary.jpg) no-repeat; left: 80px; position: relative; width: 660px; height: 155px; text-indent: -1000em;} This div tag has a class of p1 that styles the non-repeating summary.jpg graphic relative to other div tags. It is 660 pixels wide and 155 pixels tall, positioned to the left 80 pixels and indented -1000em.

#quickSummary .p2 {url(download.jpg) top right no-repeat; font: 100% Georgia, Times, Times New Roman, serif; line-height: 20px; position: absolute; top: 1500px; display: block; width: 126px; height: 420px; z-index: 5;} This div tag has a class of p2 that styles the non-repeating download.jpg graphic absolute to other div tags and displayed as a block element. The serif Georgia, Times, Times New Roman font set is 10 pixels (if the default is 10px) with a line height of 20 pixels and set 1500 pixels from the top. The dimensions of the graphic are 126 pixels wide and 420 pixels tall. The stack order is listed as 5.

#quickSummary .p2 span {display: block; position: relative; top: 80px; left: 90px; width: 100px; text-align: center;} This div tag has a class of p2 and element of span that styles text in the center as a block element and relative to other divs 80 pixels from the top and 90 pixels from the left. The width is 100 pixels.

#preamble {url(preamble.jpg) no-repeat; position: relative; top: -10px; left: 240px; width: 500px; height: 540px;} The preamble div styles the non-repeating preamble.jpg graphic is 500 pixels wide and 540 pixels tall and positions it relative to others -10 pixels from the top, 240 pixels from the top.

#supportingText {url(paper.jpg) repeat-y; display: block; position: relative; top: 0px; left: 92px; margin-top: -270px; width: 500px; height: auto; padding-left: 150px;} This div styles the repeating paper.jpg graphic is 500 pixels wide and the height is adjustable. on the –y axis. This block element is relative to other divs and is positioned zero pixels from the top and 92 pixels from the left. The top of the margin is -270 pixels and the padded from the left 150 pixels.

#preamble h3 {url(preamble.gif) no-repeat; position: relative; width: 306px; height: 50px; top: 0px; left: 0px;} The heading 3 graphic preamble.gif is found under the preamble div tag. This non-repeating element is positioned relative zero pixels from the top and zero pixels from the left. The graphic is 306 pixels wide and 50 pixels tall.

#explanation h3 {url(explanation.gif) no-repeat; position: relative; width: 250px; height: 50px; top: 0px; left: 0px;} The div tag explanation contains a non-repeating heading 3 graphic, explanation.gif, that is 250 pixels wide and 50 pixels tall and is positioned relative zero pixels from the top and zero pixels from the left in the preamble div.

#participation h3 {url(participation.gif) no-repeat; position: relative; width: 164px; height: 50px; top: 0px; left: 0px;} The div tag participation contains a non-repeating heading 3 graphic, participation.gif, that is 164 pixels wide and 50 pixels tall and is positioned relative zero pixels from the top and zero pixels from the left in the supporting text div.

#benefits h3 {url(benefits.gif) no-repeat; position: relative; width: 100px; height: 50px; top: 0px; left: 0px;} The div tag benefits contains a non-repeating heading 3 graphic, benefits.gif, that is 100 pixels wide and 50 pixels tall and is positioned relative zero pixels from the top and zero pixels from the left.

#requirements h3 {url(requirements.gif) no-repeat; position: relative; width: 157px; height: 50px; top: 0px; left: 0px;} The div tag requirements contains a non-repeating heading 3 graphic, requirements.gif, that is 157 pixels wide and 50 pixels tall and is positioned relative zero pixels from the top and zero pixels from the left.

#linkList {position: absolute; top: 330px;} The linkList div tag is positioned absolute to the relative elements 330 pixels from the top.

#linkList ul {margin-top: 35px; list-style-type: none;} The linkList div tag’s margin is 35 pixels from the top and does not contain any list styles (bullets).

#linkList ul li {list-style-image: url(button.gif); font-size: 90%; width: 120px; margin-left: 15px; margin-top: 5px;} The linkList div tag’s unordered list line items contain a graphic (button.gif) that displays as the list style (bullet). The font size is 9 pixels and the width is 120 pixels nested from the top margin 5 pixels and from the left margin 15 pixels.

#linkList ul li a {display: block; font-size: 110%; width: 120px; border: 0px; line-height: 15px;} The a link in the unordered list under the linkList div tag is displayed as a block element with a font size of 11 pixels with no border, width is 120 pixels and the line height is 15 pixels tall.

#linkList ul li a:hover {text-decoration: underline;} The a:hover link in the unordered list line item in the div linkList is underlined.

#lselect {url(lselect.jpg) no-repeat; width: 210px; height: 540px; padding-left: 25px; position: relative; left: 30px;} The lselect div tag has a non-repeating select.jpg graphic that is 210 pixels wide and 540 pixels tall and is padded from the left 25 pixels, positioned relative to other divs positioned 30 pixels to the left.

#lselect h3.select {url(select.gif) no-repeat; display: block;width: 106px;height: 31px; position: relative; top: 25px; left: 15px;} The heading 3 tag has a class under the lselect div tag. The non-repeating select.gif graphic is displayed as a block measuring 106 pixels wide and 31 pixels tall and positions relative to other divs 25 pixels from the top and 15 pixels from the left.

#lselect li a.c {font: 100% Georgia, Times, Times New Roman, serif; text-transform: none; display: inline; color: #64645A;} The style for the “a” tag with a class of c in the list in the div tag l select is listed as having a serif font of , Times, Times New Roman sized to 10 pixels and displayed as an inline element in a gray color.

#lselect ul li a:hover.c {color: #8C7846;text-decoration: underline;} The a:hover tag for the lselect div tag in the unordered list is underlined and the color is a mustard yellow.

#larchives {background: url(archives.jpg) no-repeat; width: 210px; height: 200px; position: relative; left: 30px; padding-left: 45px; padding-top: 35px;} The div tag sets the non-repeating archives.jpg graphic, which is 210 pixels wide and 200 pixels tall, is position relative in the browser 30 pixels from the left, padded on the left 45 pixels, and padded 35 pixels from the top.

#larchives ul li a {font: 110% Georgia, Times, Times New Roman, serif; line-height: 17px;} This div tag controls the unordered list line items “a” link. The serif font of Georgia, Times, Times New Roman is 11 pixels with a line-height of 17 pixels tall.

#larchives h3.archives {url(archives.gif) no-repeat; display: block; width: 145px; height: 145px; position: absolute; top: -100px; left: 20px; text-indent: -1000em;} The larchives div tag controls the attributes for the heading 3 and has a class of archives. This div tag positions the non-repeating archives.gif graphic as a block element, which is 145 pixels wide and 145 pixels tall. This div tag is positioned -100 pixels from the top and 20 pixels from the left, indented -1000em to position it absolute to the div tag that is relatively positioned on the page.

#larchives h3.resources {url(resources.gif) no-repeat; display: block; width: 69px; height: 31px; position: relative; top: 25px; left: 30px;} The larchives div tag controls the attributes for the heading 3 and has a class of resources. This div tag positions the resources.gif graphic, which is 69 pixels wide and 31 pixels tall, as a block element relative to the other div tags positioned on the page 25 pixels from the top and 30 pixels from the left.

#lresources {url(resources.jpg) no-repeat; width: 210px; height: 470px; position: relative; left: 30px; padding-left: 45px;} This div tag is located in the left column of the page and displays the non-repeating graphic resources.jpg that is 210 pixels wide and 470 pixels tall. This graphic is relatively positioned to other div tags 30 pixels from the left and is padded 45 pixels from the left.

#lresources ul li a {font: 110% Georgia, Times, Times New Roman, serif; line-height: 17px;} This div tag is for a contextual selector in the resources column that displays an unordered list line item. The font is 11 pixels (if default size is 10px) from the font family Georgia, Times, Times New Roman. This font has a serif. The line height is 17 pixels tall.

#lresources h3.resources {url(resources.gif) no-repeat; display: block; width: 69px; height: 31px; position: relative; top: 25px; left: 30px; } The 3rd heading in the resources div tag is located on the left side of the browser. This div tag has a class of resources that displays a heading graphic called resources.jpg that is not repeated as a block element. The width of the graphic is 69 pixels and the height is 31 pixels. The position is relative to the other div tags on the page positioned 25 pixels from the top and 30 pixels from the left.

#footer {display: block; background: url(footer.jpg) no-repeat; width: 400px; height: 45px; font: 11px Verdana, Tahoma, Arial, Helvetica, sans-serif; line-height: 45px; text-align: center; text-transform: uppercase; padding-bottom: 20px;} The div tag for the footer displays as a block element with a background image of footer.jpg that does not repeat. The width of the footer is 400 pixels and the height is 45 pixels tall. The text font is from the font family Verdana, Tahoma, Arial, Helvetica and is sans-serif. The line-height for the text is 45 pixels tall and aligned to the center. The text is in uppercase lettering and the bottom is padded 20 pixels.

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display: none; } Extra div tags are not displayed.

Valid CSS!

Valid CSS!