html {margin:0; padding:0;}
This is a standard selector that applies to all areas of the html code and zero's out all the margins and padding.
body {font-family:Arial, Helvetica, sans-serif; line-height:18px; font-size:12px; color: #06185c; background: #e6fad6 url(body_bg.jpg) no-repeat top center; margin:0; padding:0;}
This is a standard selector that applies to the body tag. It assigns a font family of Arial, a line height of 18px, a font size of 12px that is dark blue, a background color of a very pale green, and a background image that is aligned at the top center that does not repeat. It also includes zero margin and padding.
body a:link, a:active, a:visited {text-decoration:none; color:#720a0b;}
This is a multiple and contextual selector that applies to pseudo classes of the links in the body tag. The link before it's been clicked on, while it is being clicked on and after it's been clicked on, will not be underlined and will have a text color of dark maroon.
body a:hover {text-decoration:underline;}
This is a contextual selector that applies to the link pseudo class of hover. When a link is hovered on in the body of this site, it will have an underline.
p {margin:10px; padding:0;}
This is a standard selector for all p tags within this site that applies a margin of 10px top, right, left and bottom with padding of 0px on all sides.
h3 {display:none;}
This standard selector applies to the h3 tag and causes it to not appear on the page.
ul {list-style-type:none; padding-left:0; margin-left:0;}
This standard selector applies to all unordered lists. It removes the bullets, the margins and the padding.
li {background:url(bullet.gif) left center no-repeat; padding-left:7px; margin-bottom:5px;}
This standard selector applies to the list items at this site. It gives each item a background image that is aligned left center and does not repeat. It also applies a left padding of 7px and bottom margin of 5px to all list items.
acronym {border-bottom: none;}
This standard selector removes the bottom border off the acronym tag.
#container {margin:auto; width:892px; background:url(content_bg_top.jpg) no-repeat top center; position:relative;}
This selector is for the ID with the name of container and will apply to all items between the div tags of container. It has an automatic margin, width of 892px, a background image that is aligned top center and does not repeat. It's position is aligned relative to it's default position on the page.
#intro {width:892px; height:451px;}
This is a selector for the ID called intro that has a width of 892px and a height of 451px.
#pageHeader {background:url(header_what_about.gif) no-repeat top center; height:34px; overflow:hidden; position:absolute; top:462px; left:205px; width:587px;}
This is a selector for the ID with the name of PageHeader. This ID has a height of 34px a postion that is based on the location of the body tag, 462 px from the top and 205px from the left. This ID has a width of 587px and a background image that is aligned at the top, center of the ID that does not repeat.
#pageHeader span{display:none;}
This is a contextual selector and will hide all span tags within the ID of pageHeader.
#quickSummary {display:none;}
This selctor will hide the entire ID of quickSummary.
#preamble {padding:240px 100px 0 205px;}
This selector applies padding of 240px top, 100px right, 0px bottom, and 205px left for the ID of Preamble.
#preamble p.p1 {margin-top:20px;}
This is a contextual selector that applies to the class of p1 located within the ID of preamble. It applies a top margin of 20px.
#supportingText {background-image:url(content_tile.jpg); height:100%;}
This selector applies a background image to the ID of supportingText. This ID will also have a height of 100%.
#explanation {padding:50px 100px 30px 205px; background:url(content_bg_bottom.jpg) top no-repeat; height:100%;}
This is a selector for the ID of explanation. It will have padding top 50px, right 100px, bottom 30px, and left 205px. It will have a height of 100% and a background image aligned at the top that does not repeat.
#participation {margin:20px 100px 30px 205px; padding-top:40px; background:url(header_participation.gif) no-repeat top center; height:100%;}
This selector applies to the ID of participation. It will have margins of top 20px, right 100px, bottom 30px and left 205px. it has top padding of 40px and a background image aligned top, center that does not repeat. This ID has a height of 100%.
#benefits {margin:65px 100px 30px 205px; padding-top:40px; background:url(header_benefits.gif) no-repeat top center; height:100%;}
This selector applies to the ID of benefits and has margins of top 65px, right 100px, bottom 30px and left 205px. It has top padding of 40px a height of 100% and a background image aligned top center that does not repeat.
#requirements {margin:65px 100px 30px 205px; padding:40px 0 15px 0; background:url(header_requirements.gif) no-repeat top center; border-bottom:1px solid #720a0b; height:100%;}
This selector applies to the ID of requirements. It apllies margins of top 65px, right 100px, bottom 30px and left 205px. It applies padding of top 40px, right 0px, bototm 15px and left 0px. It has a background image that does not repeat and is sligned top center. It also has a solid line of 1 px that is dark maroon along the bottom. It has a height of 100%.
#footer {padding:10px; text-align:center;}
This is a selector for the ID of footer and has padding on all four side of 10 px and has center aligned text.
#linkList {position:absolute; width:150px; top:603px; z-index:5; color: #666666; font-size:10px; left:25px; height:550px; line-height:13px;}
This is a selector for the ID of linkList. It's position is absolute, it's location is based on the location of the body tag 603px from the top, 25 from the left. It has a width of 150px and font size of 10px, color medium grey. The ID height is 550px and the line height is 13px.
#linkList a:link, a:active, a:visited {color:#113c05; text-decoration:none;}
This is a multiple contextual selector that applies to the link pseudo classes in the ID of linkList. the unvisited, active and visited links will not be underlined and will have a text color of dark green.
#linkList a:hover {text-decoration:underline;}
This is a contextual selector for the link pseudo class of hover to be underlined.
#lselect {background:url(header_select_design.gif) top left no-repeat; margin: 5px 0 0 0; padding: 20px 0 0 0; width:150px;}
This selector applies to the ID of lselect. It applies a background image aligned at the top left and does not repeat. It has a top margin of 5px, top padding of 20px and width of 150px.
#larchives {background:url(header_archives.gif) top left no-repeat; margin: 10px 0 0 0; padding: 30px 0 0 0; width:150px;}
This selector is applied to ID larchives. It applies a top left aligned background image that does not repeat, top margin of 10px, top padding of 30px and a width of 150px.
#lresources {background:url(header_resources.gif) top left no-repeat; margin: 15px 0 0 0; padding: 30px 0 0 0; width:150px;}
This selector applies to the ID of lresources and applies a backround image aligned top left that does not repeat. It has a top margin of 15px, top padding of 30px and width of 150px.
I chose this design because I thought it was a great balance between an image rich design, and a clean, simple, professional look. I think it has crisp eye catching images without being too distracting so that the user can still navigate easily through the site. I was surprised when I analyzed the css to find how simple it really is. The images look complicated but it seems that they were designed elsewhere, and then sliced and inserted very simply into the page. This is a beautiful, user friendly site and it felt great being able to understand the css that created it!