body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: verdana, arial;
background: #000000 url(bg.gif);
font-size: 8pt;
color: #FFFFFF;
}
This will create a 0 margin, 0 padding, it will make the width and height of everything be 100% of the standard size of the browser. The font will be verdana but fall back to arial if the browser does not have arial. The font color will be white and 8pt in size. The background will be black and bg.gif will be the background image.
a {
color: #99FF00;
text-decoration: none;
}
All links will be #99FF00 with no text decoration.
h3 span {
display:none;
}
This will make all spans within the h3 tag to not display.This is a contextual selector.
a:hover {
color: #FF6600;
}
All links will hover with a color of FF6600.
#container {
position: relative;
margin: 10px auto;
padding: 10px;
width: 600px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 594px;
border: 10px solid #ffffff;
background: #000000 url(zentop.gif) no-repeat top left;
}
The container will be relative, with a top and bottom margin of 10px with a auto margin of left and right. A padding of 10px. The width of the container will be 600px. The text will align to the left. The border will have a 10px white border. The background will be black with an alignment of being on the top left with the zentop.gif. The voice family is a prioritized list. This is an ID selector.
#pageHeader {
margin-top: 390px;
position: relative;
}
This div header will have a top margin of 390px with a relative position. This is an ID selector.
#pageHeader span {
display:none;
}
This is a contextual selector, the span with the ID tag of #pageheader and will not display.
#quickSummary .p1 {
position: absolute;
width: 586px;
padding: 14px;
font-size: 8pt;
text-transform: uppercase;
background: #000000 url(bg2.gif);
color: #99FF00;
text-align: center;
top: 327px;
left: -1px;
border: 1px solid #ffffff;
}
This is a contextual class selector within the ID selector of "quickSummary". The class "p1" within the quickSummary will have an absolute position, a width of 586 pixels, a 14px padding, a font size of 8pt, all the text will be uppercase, the background image will be bg2 and black. The font color will be #99FF00 with a center alignment. This will have a top of 327px, a -1px to the left and a 1px solid white border.
#quickSummary .p2 {
position: absolute;
font-size: 7.5pt;
text-transform: uppercase;
font-family: Arial;
color: #CCCCCC;
top: 307px;
left: 345px;
width: 270px;
}
This is a contextual class selector within the ID selector of "quickSummary". It will have an absolute position, a font size of 7.5points, all uppercase, the color gray, the font Arial, it will have a top of 307 pixels, a left of 345 pixels and a width of 270 pixels.
#quickSummary a {
color: #FFFFFF;
text-decoration: none;
}
This is a contextual selector that applies to active links within the ID class quickSummary. It will have no text decoration and a white color.
#quickSummary a:hover {
background: #99FF00;
color: #000000;
}
This is a contextual selector that applies to active links within the ID class quickSummary. The hover will have a color of black, and a background color of 99FF00.
#footer {
position: absolute;
font-size: 7.5pt;
text-transform: uppercase;
font-family: Arial;
color: #FFFFFF;
top: 307px;
}
This is a ID selector, with a position of absolute, a font size of 7.5 pt, all uppercase, a font of Arial, a white color and be 307 pixels from the top.
#footer a {
color: #FFFFFF;
text-decoration: none;
}
This is a contextual selector that applies to active links within the ID of "footer" it will have no text decoration ( no underline) and be a white color.
#footer a:hover {
background: #99FF00;
color: #000000;
}
This is a contextual selector that applies to active links within the ID of "footer". They will have a hover color of black, and a background color of 99FF00.
#preamble {
width: 440px;
text-align: justify;
}
This is an ID selector that has a width of 440 pixels and justifies the text alignment.
#preamble h3 {
position: relative;
background: transparent url(theroad.gif) no-repeat;
margin-top: 10px;
height: 45px;
left: -10px;
}
This is a contextual selector that applies to the h3 tags within the ID class of preamble. It has a relative position, a transparent background with theroad.gif, a no repeat, a margin top of 10pixels, a height of 45pixels and a negative 10 pixels to the left.
#preamble .p1 {
text-indent: 20px;
margin-top: -28px
}
This is a contextual selector that applies to the "p1" class. The text indention will be 20 pixels, and a margin top of -28pixels.
#explanation {
width: 440px;
text-align: justify;
}
This is an ID selector with a width of 440pixels, a text alignment of justify.
#explanation h3 {
position: relative;
background: transparent url(sowhat.gif) no-repeat;
margin-top: 25px;
height: 45px;
left: -10px;
}
This is a contextual selector that applies to the h3 tags within the ID of explanation. The position will be relative, a tranparent image "sowhat.gif" a margin top of 25 pixels, a height of 45 pixels and a negative left of 10 pixels.
#explanation .p1 {
text-indent: 20px;
margin-top: -28px
}
This is a contextual selector that applies to the "p1" class within the ID of explanation. It will have a text indent of 20 pixels, and have a -28 pixels of the margin of the top.
#participation {
text-align: justify;
}
This is a ID selector that will set all the text to justify.
#participation h3 {
position: relative;
background: transparent url(parti.gif) no-repeat;
margin-top: 25px;
height: 45px;
left: -10px;
}
This is a contextual selector for the h3 tags within the ID of participation. The position will be relative, a background that does not repeat of parti.gif. A margin top of 25pixels, a height of 45 pixels, and have a negative left pixel of -10.
#participation h3 span {
display: none;
}
This is a contextual selector that applies to the span tag within the h3 tags of the ID "participation. It will not display.
#participation .p1 {
text-indent: 20px;
margin-top: -28px
}
This is contextual select that will apply to the p1 class that are within the ID participation. It will have a text indent of 20 pixels, and a margin top of -28 pixels.
#participation .p2 {
width: 440px;
}
This is contextual select that will apply to the p2 class that are within the ID of participation. It will have a 440 pixel width.
#participation .p1{
width: 440px;
}
This is contextual select that will apply to the p1 class that are within the ID of participation, it will have a 440 pixel width.
#benefits {
text-align: justify;
}
This is a ID selector that will set the text to justify.
#benefits h3 {
position: relative;
background: transparent url(beni.gif) no-repeat;
margin-top: 25px;
height: 45px;
left: -10px;
}
This is a contextual selector that will apply to the h3 tags within the ID of benefits It will have a relative position, a tranparent image of no repeat. It will have a margin top of 25 pixels, a height of 45 pixels, and a negative - 10 pixels.
#benefits .p1 {
text-indent: 20px;
margin-top: -28px
}
This is a contextual selector that will apply to the ID of benefits. It will have a 20 pixel text indent, and margin top of -28 pixels.
#requirements {
text-align: justify;
}
This is a ID selector that will have a text justify.
#requirements h3 {
position: relative;
background: transparent url(reqs.gif) no-repeat;
margin-top: 25px;
height: 45px;
left: -10px;
}
This is a contextual selector that will apply to h3 tags within the ID of requirements. It will have a relative postion, a transparent background of reqs.gif and not repeat. It will have a 25 pixel margin top, a 45 pixel height, and a negative left of 10pixels.
#requirements .p1 {
text-indent: 20px;
margin-top: -28px
}
This is a contextual selector that will apply to the p1 class within the ID of requirements. It will have a text indent of 20 pixels, and a margin top of -28 pixels.
/* Force carriage return before 'by' */
#lselect li a:link, #lselect li a:visited {display: block;}
#linkList li a.c:link, #linkList li a.c:visited {display: inline;}
This is a multiple contextual selector that will make the active links display as a block within the list order of the ID selectors. This will also make the display inline for the other two tags.
#lselect {
width: 160px;
position: absolute;
top: 395px;
left: 457px;
background: transparent url(top-menu.gif) no-repeat;
height: 400px;
}
This is a ID selector that has a width of 160 pixels, absolute position, a top of 395 pixels, a left of 457 pixels, a no repeating background image of top-menu.gif and a height of 400 pixels.
#lselect ul {
list-style: none;
margin-left: 18px;
margin-top: 50px;
}
This is a contextual selector that applies to an unordered list, it will make the list display no list. A margin left of 18 pixels and margin top of 50 pixels.
#lselect ul li {
padding: 0px 0px 0px 16px;
background: url(arrow.gif) no-repeat 6px 2px;
margin-bottom: 5px;
}
This is a multiple contextual selector that will apply to list orders that are in the ID class of "lselect". There will be a top, right, bottom padding of 0. A left padding of 16 pixels, a background image of arrow.gif that is sized at 6pixels by 2 pixels and a 5px margin bottom.
#larchives {
width: 160px;
position: absolute;
top: 725px;
left: 457px;
background: transparent url(mid-menu.gif) no-repeat;
height: 200px;
text-transform: capitalize;
}
This is a ID selector with a width of 160 pixels, an absolute position, a top pixel of 725 pixels, left of 457 pixels, a transparent background of mid-menu.gif with no repeat. A heigh of 200px, and all the text will be uppercase.
#lresources {
width: 160px;
position: absolute;
top: 847px;
left: 457px;
background: transparent url(bot-menu.gif) no-repeat;
height: 200px;
}
This is a ID selector with a width of 160, an absolute position, a top of 847 pixels, a left of 457 pixels, a transparent image of "bot-menu.gif" not repeat itself with a height of 200px.
#larchives ul, #lresources ul {
list-style: none;
margin-left: 26px;
margin-top: 46px;
}
This is a multiple contextual selector that applies to two ID selectors. The unordered list will have no style, a margin left of 26px and a margin top of 46 pixels.