body { color: #444; background-color: #edf6e3; background-image: url(700_28.jpg); background-position: top center; background-repeat: repeat-y; font-size: 11px; line-height: 14px; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; }
Definition: This is a standard selector that will apply style to the body of the site. The font color will be #444, the background color will be #edf6e3, and there will be a background image that will be positioned in the center at the top and will repeat vertically down the y-axis. The font size is set at 11 pixels, the line height at 14 pixels, the text will be aligned to the left, and the font family is selected as Cochin, but in case that is not available it will be Georgia, etc. Finally the margin and padding are set at 0.
p { font-size: 11px; line-height: 14px; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; }
Definition: This is a standard selector that will apply style to the all of the p tags. The font size is 11 pixels, the line-height is 14 pixels, the font-family is selected as Cochin, but in case that is not available it will be Georgia, etc., and the text will be aligned to the left. Finally the margin and padding are set at 0.
h1, h2, h3 { font-size: 11px; line-height: 14px; font-weight: bold; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; }
Definition: This is a multiple selector that will apply style to all of the h1, h2, and h3 tags. The font size is 11 pixels, the line-height is 14 pixels, the font will be bold, the font-family is selected as Cochin, but in case that is not available it will be Georgia, etc., and the text will be aligned to the left. Finally the margin and padding are set at 0.
a:link { font-weight: bold; text-decoration: none; color: #6faf30; }
Definition: This is a pseudo-class selector that will apply style to all the "a" tags. The links will be bold with no decoration and have a color of #6faf30.
a:visited, a:visited:hover { font-weight: bold; text-decoration: none; color: #7fc937; }
Definition: This is a multiple pseudo-class selector that will apply style to all the "a" tags. The visited and hovered visited "a" tags will be bold with no text decoration and have a color of #7fc937.
a:hover, a:active { text-decoration: underline; color: #4f711f; }
Definition: This is a multiple pseudo-class selector that will apply style to all the "a" tags. When hovering over the "a" tags they will be underlined and the color will be #4f711f. The same attributes will be applied to active "a" tags.
acronym { font-weight: normal; font-style: normal; border: 0; }
Definition: This is a standard selector that will apply style to the all of the acronym tags. The font weight and style will be normal and the border will be 0.
#container { width: 700px; position: relative; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; }
Definition: This is a standard id selector that will apply style to everything within the id container. The width of the id container will be 700 pixels, and the position will be relative. The margin will be 0 pixels on the top and bottom and auto on the left and right sides. The padding is 0 on all sides.
#intro { width: 450px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
Definition: This is a standard id selector that will apply style to everything within the id intro. The width of the id intro will be 450 pixels and the margin and padding is 0 on all sides.
#supportingText { width: 450px; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; }
Definition: This is a standard id selector that will apply style to everything within the id supportingText. The width of the id supportingText will be 450 pixels and the margin will be 0 on all sides. The padding is 0 on the top and bottom and 10 pixels on the right and left sides.
#linkList { position: absolute; top: 255px; left: 0px; width: 220px; margin: 0px 0px 0px 482px; padding: 0px 0px 0px 0px; }
Definition: This is a standard id selector that will apply style to everything within the id linkList. The position of the id linkList will be absolute, the top will be 255 pixels, left 0 pixels, and the width is 220 pixels. The margin will be 0 pixels on all sides except the left side which will be 482 pixels. The padding will be 0 pixels on all sides.
#pageHeader { width: 700px; height: 20px; /* strange but ie6 needs this */ background-image: url(blatt02aa.jpg); background-position: top center; background-repeat: no-repeat; border-top: 0px; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; margin: 0px 0px 0px 0px; padding: 224px 0px 0px 0px; }
Definition: This is a standard id selector that will apply style to everything within the id pageHeader. The id pageHeader will have a width of 700 pixels, a height of 20 pixels, and a background image that does not repeat. The top border will be 0px, and the right, bottom and left border will be 1px, solid, and have a color of #aaa. The margin will be 0px on all sides and have top padding of 224px.
#pageHeader h1 { width: 600px; color: #fff; font-size: 24px; line-height: 24px; font-weight: bold; text-transform: uppercase; margin: -30px 0px 0px 10px; padding: 0px 0px 0px 0px; }
Definition: This is a contextual id selector that will apply style to all h1 tags within the id pageHeader. All h1 tags within the id pageHeader will have a width of 600px, a color of #fff, a font size of 24px, line height of 24px, have bold font, and will be in uppercase. The margin will be -30px on the top and 10px on the left side, and the padding will be 0px on all sides.
#pageHeader h2 { width: 600px; color: #fff; font-size: 11px; line-height: 16px; font-weight: normal; padding: 0px 0px 0px 3px; text-transform: uppercase; margin: 0px 0px 0px 10px; padding: 0px 0px 10px 4px; }
Definition: This is a contextual id selector that will apply style to all h2 tags within the id pageHeader. All h2 tags within the id pageHeader will have a width of 600px, a color of #fff, a font size of 11px, line height of 16px, have normal font, and will be in uppercase. The margin will be 10px on the left side, and the padding will be 3px on the left side and another padding will be 10px on the bottom and 4px on the left side.
#quickSummary { width: 450px; background-image: url(stone_24.gif); background-position: top center; background-repeat: repeat; background-color: #284C00; border: 1px solid #aaa; margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; }
Definition: This is a standard id selector that will apply style to everything within the id quickSummary. The id quickSummary will have a width of 450px, a background image that is positioned at the top and center and repeats, a background color of #284c00, and a border that is 1px wide, solid, and is the color #aaa. The margin is 10px on the top and bottom and the padding is 10px on all sides.
#preamble { width: 450px; border: 1px solid #aaa; background-image: url(leaf_09d.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; margin: 0px 0px 0px 0px; padding: 10px 10px 20px 10px; }
Definition: This is a standard id selector that will apply style to everything within the id preamble. The id preamble will have a width of 450px, a border that is 1px wide, solid, and is the color #aaa, a background image that is positioned on the bottom in the center and doesn't repeat, a background color of #fff, a margin of 0px on all sides, and 10px padding on the top, right and left sides and 20px on the bottom.
#explanation, #participation, #benefits, #requirements { width: 450px; border: 1px solid #aaa; background-image: url(leaf_09d.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; margin: 10px -10px 0px -10px; padding: 10px 10px 20px 10px; }
Definition: This is a multiple id selector that will apply style to everything within the ids explanation, participation, benefits and requirements. These ids will have a width of 450px, a border that is 1px wide, solid and has the color #aaa. There is a background image that is positioned at the bottom and center and doesn't repeat. The background color is #fff, the margin is 10px on the top, -10px on the right and left and 0px on the bottom, and the padding is 10px on all sides except the bottom, which is 20px.
#footer { width: 450px; border: 1px solid #aaa; background-image: url(stone_19.gif); background-position: center center; background-repeat: repeat; background-color: #284C00; margin: 10px -10px 20px -10px; padding: 10px 10px 10px 10px; text-align: center; }
Definition: This is a standard id selector that will apply style to everything within the id footer. The id footer will have a width of 450px, a border that is 1px wide, solid, and has a color of #aaa, a background image that is centered and repeats, a background color of #284C00, a margin of 10px on the top, -10px on the right and left sides and 20px on the bottom, padding of 10px on all sides, and the text is aligned in the center.
#explanation p, #participation p, #benefits p, #requirements p, #preamble p { padding-bottom: 8px; text-align: justify; }
Definition: This is a multiple and contextual id selector that will apply style to all p tags within the ids explanation, participation, benefits, requirements, and preamble. These tags within these ids will have bottom padding of 8px and the text will be justified.
#preamble h3, #supportingText h3 { color: #284C00; background-color: #ddd; background-image: url(stone_21.gif); background-position: bottom center; background-repeat: repeat; font-size: 11px; line-height: 16px; text-transform: uppercase; margin: -10px -10px 4px -10px; padding: 4px 4px 4px 10px; }
Definition: This is a multiple and contextual id selector that will apply style to all h3 tags within the ids preamble and supportingText. These tags within these ids will have a color of #284c00, a background color of #ddd, a background image that is positioned on the bottom in the center and repeats, a font size of 11px, line height of 16px, text in uppercase, a margin of -10px on all sides except the bottom which has 4px, and padding of 4px on all sides except the left which has 10px.
#quickSummary .p1 { color: #fff ! important; font-size: 10px ! important; line-height: 14px; font-weight: bold; text-transform: uppercase; text-align: left; margin: 0px 50px 0px 0px; padding: 0px 0px 10px 0px; }
Definition: This is a contextual id selector of a class that will apply style to the class p1 within the id quickSummary. The class p1 within the id quickSummary will have the color #fff (not sure what the ! important means), a font size of 10px, a line height of 14px, bold font, text in uppercase and aligned left, a margin of 0px on all sides except the right which is 50px, and padding of 0px on all sides except the bottom which is 10px.
#quickSummary .p2 { color: #fff ! important; font-size: 10px ! important; line-height: 14px; font-weight: normal; text-transform: uppercase; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
Definition: This is a contextual id selector of a class that will apply style to the class p2 within the id quickSummary. The class p2 within the id quickSummary will have the color #fff (not sure what the ! important means), a font size of 10px, a line height of 14px, normal font, text in uppercase and aligned left, a margin of 0px on all sides, and padding of 0px on all sides.
#linkList ul { border-top: 1px dotted #ccc; margin: 5px 5px 0px 5px; padding: 0px 0px 0px 0px; }
Definition: This is a contextual id selector that will apply style to all ul tags within the id linkList. All ul tags within the id linkList will have a border that is 1px wide, dotted and has a color of #ccc, a margin of 5px on all sides except the bottom which is 0px, and padding of 0px on all sides.
#linkList li { display: block; list-style-type: none; color: #6c9e2d; background-color: #f8f8f8; font-size: 11px; line-height: 14px; font-weight: normal; font-style: italic; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; border-bottom: 1px dotted #ccc; margin: 0px 0px 0px 0px; padding: 3px 5px 3px 5px; }
Definition: This is a contextual id selector that will apply style to all li tags within the id linkList. All li tags within the id linkList will be displayed as blocks so the entire area is clickable. They will have no list style (no bullets etc.), a color of #6c9e2d, a background color of #f8f8f8, a font size of 11px, a line height of 14px, normal font weight and italic font, a font family is selected as Cochin, but in case that is not available it will be Georgia, etc., text alignment of left, the bottom border is 1px wide dotted and has a color of #ccc, the margin is 0px on all sides, and the padding is 3px on the top and bottom, and 5px on the right and left sides.
#linkList li a:link, #linkList li a:visited, #linkList li a:visited:hover, #linkList li a:hover, #linkList li a:active { font-style: normal; padding-right: 5px; }
Definition: This is a multiple and contextual id selector that will apply style to all "a" tags within the li tags within the id linkList. The "a" tags will have a normal font style and right padding of 5px.
.c { color: #6c9e2d ! important; font-weight: normal ! important; font-style: italic ! important; margin: 0px 0px 0px 0px; padding: 0px 14px 0px 0px; }
Definition: This is a standard class selector that will apply style everything within the class "c". The class "c" will have a color of #6c9e2d (not sure what the ! important means), a normal font weight, a font style of italic, a margin of 0px on all sides, and padding of 0px on all sides except the right side which has 14px.
#linkList h3 { color: #7fc937; background-color: #ddd; background-image: url(stone_24.gif); background-position: center right; background-repeat: repeat-x; font-size: 11px; line-height: 16px; font-weight: bold; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-transform: uppercase; text-align: left; border-bottom: 1px solid #aaa; margin: 0px 0px 0px 0px; padding: 3px 5px 3px 5px; }
Definition: This is a contextual id selector that will apply style to all h3 tags within the id linkList. All h3 tags within the id linkList will have a color of #7fc937, a background color of #ddd, a background image that is positioned in the center right and repeats horizontally on the x-axis, a font size of 11px, a line height of 16px, a font weight of bold, a font family is selected as Cochin, but in case that is not available it will be Georgia, etc., uppercase text that is aligned left, a bottom border that is 1px wide, solid, and has a color of #aaa, a margin of 0px on all sides, and padding of 3px on the top and bottom and 5px on the right and left sides.
#lselect, #lfavorites, #larchives, #lresources { background-image: url(leaf_09a.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; border: 1px solid #aaa; margin: 0px 0px 10px 0px; padding: 0px 0px 30px 0px; }
Definition: This is a multiple id selector that will apply style to everything within the ids lselect, lfavorites, larchives and lresources. These ids will have a background image that is positioned at the bottom center and doesn't repeat, a background color of #fff, a border that has a width of 1px, solid, and has a color of #aaa, a margin of 0px on all sides except the bottom which is 10px, and padding of 0px on all sides except the bottom which is 30px.
#preamble:hover { background-image: url(leaf_09f.gif); }
Definition: This is a standard id pseudo-class selector that will apply style to the hover of the preamble id. A background image will appear when the id preamble is hovered over.
#linkList li:hover { background-color: #fefefe; }
Definition: This is a contextual id pseudo-class selector that will apply style to the hover of the li tag within the linkList id. A background color of #fefefe will appear when the tag li is hovered over within the id linkList.
#lresources:hover { background-image: url(leaf_09b.gif); }
Definition: This is a standard id pseudo-class selector that will apply style to the hover of the lresources id. A background image will appear when the id lresources is hovered over.