As is usually the case, we'll start at the top of the document and work our way down. After getting the masthead put together, we'll move on to the main content and sidebar. This will let us effectively divide the layout into two zones: "masthead" and "the rest of the page." While it's true that the main content and sidebar will be placed in relation to each other, they'll both be placed in relation to the masthead, so in many ways it is the most important aspect of the design. Two Images Behind the MastheadSince the masthead is a key portion of the design, it stands to reason that it should look pretty. It's hard to create beautiful Web design without images, and in this case, we have two images to use in the masthead. They're shown in Figure 9.3. Figure 9.3. The images available for use in the masthead.All right, so it's really two variants of the same image, masthead.jpg and mh-light.jpg, the latter of which is a washed-out version of the former. We'll be able to use them together to create a translucency effect, as we did in Project 4, "Positioning in the Background." First let's get the h1 element styled. It will be getting masthead.jpg for its background, so we need to match its background color to the background of the image. We're also going to be placing the image to the right edge of the element. @import url(project08.css); #sitemast h1 {background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} </style> For reasons that will become clear later (and were explored in Project 4), we need to explicitly set the font-size of the h1 and define any margins or padding. These will all be set using ems for the sake of consistency…and also to make life easier for us later on. Let's do the padding and margin first. #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} Now for the size of the h1 font. Making it twice as big as that of its parent element (the sitemast div) seems like a good size. That's large enough to be easily noticeable but not so large as to completely overwhelm everything else. For consistency, let's also make the font family the same as the titles in our weblog. That leads us to make the following addition: #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: 2em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} This will have exactly the result we declared and no more which means the text won't be boldfaced. Our new declaration sets the font-weight, font-style, and font-variant all to normal. That's just how shorthand properties like font work. So let's just drop bold into the declaration, thus restoring the boldfacing, as shown in Figure 9.4. #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} Figure 9.4. Dramatic improvements to the masthead's appearance.It's already looking pretty good, but there are some improvements yet to make. First, let's get the descender in the "y" to stick out of the background of the h1. We can accomplish this by reducing the line-height of the element to a sufficiently low number. Some experimentation reveals that 0.75em is a good choice for Arial. We'll take advantage of font's unique ability to accept a line-height value after the font-size value, so long as the two are separated by a forward slash. #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em/0.75em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} Now for the link itself. It's kind of weird having normal link styles in the masthead, so let's both set the color and remove the underline. #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em/0.75em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} </style> Okay, now for the masthead div itself. Since we gave the h1 the normal-color image, we'll apply the washed-out version to the div. At the same time, let's remove any possible margins that might be applied. @import url(project08.css); #sitemast {margin: 0; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% 0 no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em/0.75em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} All right, so now we have a div that's wrapped around an h1. That means none of the div is actually visible at the moment; if we added borders they'd be visible, but that doesn't do much for the background. We need to get some of that background visible. Easy enough: We'll add some bottom padding to the div, and as Figure 9.5 shows, some of the background is thus revealed. #sitemast {margin: 0; padding: 0 0 1em; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% 0 no-repeat;} Figure 9.5. Adding the lighter image to the masthead div and making it visible.Shifting Versus Image Editing
Shifts and BordersAs it stands, the masthead is in pretty darned good shape, but let's take things a step further. Let's reveal more of the butterfly by shifting it upward. We can do this by changing the positions of the background images in both the h1 and the div. Since they both line up along their top edges, we can just shift them upward by the same number of pixels. #sitemast {margin: 0; padding: 0 0 1em; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em/0.75em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% -30px no-repeat;} There's one last touch to apply to the masthead. By creatively using borders, we can actually shift over the h1 and the visible portion of the div. Consider the styles shown here and illustrated by Figure 9.6. #sitemast {margin: 0; padding: 0 0 1em; border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} Figure 9.6. Putting the finishing touches on the masthead.This works because we've added an em-and-a-half left border to the masthead div and also set the color of that border to match the background color of the h1. Visually, the two blend together with nary a seam. Changing the border color to anything else will clearly show how the effect works. The one-pixel border along the bottom of the masthead also serves to subtly separate it from the rest of the design. In fact, it's about time we turned our attention to the rest of the design. Content and SidebarAs you'll recall, the main content of the page is contained in a div with an id of content, and the sidebar is contained in a div with an id of navpres and a class of panel. It's also the case that our project goals call for us to put the navigation and presentation links to the right of the main content. To make that happen, we'll need to do one of two things:
Let's position the sidebar. Doing so will make it easy for us to move it around at will, and this is actually a little less prone to strange interactions (see "Positioning Rather Than Floating" at the end of this section for details). To do so, however, we'll need to open up space for it to appear; otherwise, it will overlap the main content. The content could use some padding anyway, to push its contents away from the edges of the browser window as well as from the masthead. #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} #main {padding: 2em 25% 3em 1.5em;} </style> The 1.5em left padding is taken from the width of the left border on the masthead. By setting them to be the same, the left visible edge of the content will line up with the left visible edge of the masthead's text. As for the 25% right padding, that value was picked because it sounded like a good amount of space to leave for a sidebar. We don't want the sidebar to fill that entire space, though if it did, the main and sidebar content would practically touch each other. We'll absolutely position the sidebar into the top-right corner and supply a width of 17%. Again, that's a number that was picked more or less on a whim. We'll also add a dotted red border so that we can see the edges of the sidebar, as seen in Figure 9.7. #main {padding: 2em 25% 3em 1.5em;} .panel {position: absolute; right: 0; top: 0; width: 17%; border: 1px dotted red;} </style> Figure 9.7. The sidebar is positioned in the top-right corner.Well, there's certainly enough room to the right of the main content for the sidebar! The real problem, of course, is that we positioned the sidebar over the masthead. We'll need to move it down so that it's just underneath the masthead's bottom border. How far is that? Well, the h1 has a font-size of 2em (in comparison to normal-size text), which means everything about it is doubled. It has 1.5em of top padding but a 0.75em content height (thanks to the line-height value). That's a total of 2.25em, which doubled is 4.5em. The masthead div has another em of bottom padding, so that's a total of 5.5em. .panel {position: absolute; right: 0; top: 5.5em; width: 17%; border: 1px dotted red;} This change will actually cause the top border of the sidebar to overlap the bottom border of the masthead. Why? Because that one pixel of bottom border is placed below the 5.5em we just added up. So the top edge of the masthead's bottom border is 5.5em below the top of the document, and the top edge of the top border of the sidebar is in exactly the same place. That's actually a good thing because, in this case, we want the two borders to overlap. Using Margins When Positioning
Now might be a good time to get rid of some of the list indentation, too. We don't want to remove all of it; some of the vertical separation created by top and bottom margins and padding is a good thing. In addition, the sublist under "Eric" should be indented with respect to the rest of the links. So we'll leave a bottom margin and some top and bottom padding on the top-level lists. For the nested lists, we'll remove everything except some left padding. This is shown in Figure 9.8. .panel {position: absolute; right: 0; top: 5.5em; width: 17%; border: 1px dotted red;} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em;} </style> Figure 9.8. The repositioned sidebar and its slightly restyled lists.Some of you may have noticed that the bullets don't appear in IE6. So far as I could tell, this happens because IE clips anything sticking out of the positioned element. We could try to fix the problem by explicitly changing the value of overflow for the sidebar, except we're about to remove the bullets anyway, so that would be sort of silly.
Simple Sidebar StylingThe bullets really have to go. Doing so is easy. .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none;} This will remove the bullets from all ul elements that descend from the sidebar div (because of its panel class), no matter how deeply they're nested inside other lists. Let's back up for a moment and change the font used in the sidebar. The weblog titles are all in Arial and so is the site's masthead, so let's have the sidebar use Arial as well. We'll supply Verdana as a fallback in case Arial is not available for some reason. .panel {position: absolute; right: 0; top: 5.5em; width: 17%; font-family: Arial, Verdana, sans-serif; border: 1px dotted red;} Then there are the h4 elements, the ones containing the words "Navigation" and "Presentation." We should take off their margins, add in a darker green background, and slide in a little padding for visual appeal, as shown in Figure 9.9. We'll also set the font-size to 1em to keep the text from getting bigger or smaller than the rest of the text. .panel {position: absolute; right: 0; top: 5.5em; width: 17%; font-family: Arial, Verdana, sans-serif; border: 1px dotted red;} .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%); font-size: 1em;} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none;} Figure 9.9. The seeds of a better-looking sidebar.Let's keep going with the h4 elements. Rather than black on green, let's have them be dark green on green. .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%); font-size: 1em;} color: rgb(20%,40%,20%);} The addition of some borders would make the headings stand out even more, but just adding solid borders is kind of dull. To increase their visual appeal, we'll make the left-edge borders a little thicker, the bottom border dotted, and set them all to the same color. This can be done in any number of ways, but we'll try adding in one rule for each aspect of the borders: style, width, and color. .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%); font-size: 1em; border-style: solid solid dotted; border-width: 1px 0 1px 2px; border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} Not bad, but there's so much more we could do! Italicizing them would add more interest while also making them visually distinct from the rest of the text in the sidebar, so we'll do that. We can also reduce the line-height, just like we did for the masthead, so that the descenders stick down past the bottom border of the element itself. .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%); font-size: 1em; font-style: italic; line-height: 0.7em; border-style: solid solid dotted; border-width: 1px 0 1px 2px; border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} Reduced Line Heights
This will have the desired effect for "Navigation," but "Presentation" doesn't have any letters that descend. Of course, it would if we changed all of the letters to be lowercase; the "P" would then become a "p." Let's make that change plus spread out the letters just a bit to give them more of an airy feel. We get the result shown in Figure 9.10. .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%); font-size: 1em; font-style: italic; line-height: 0.7em; text-transform: lowercase; letter-spacing: 1px; border-style: solid solid dotted; border-width: 1px 0 1px 2px; border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} Figure 9.10. Polishing the headings to a high sheen.Adding Another LeafAt this point, things have been almost too easy, so let's take on a small challenge. Notice the blank space to the right of the links in the sidebar? Let's put something there. It should have visual appeal without being overly distracting. A good choice would be a small graphic. That part's easy. To make it more interesting, let's have the same image straddle the bottom border of the headings so that the image starts in the headings and stretches down below the bottom border. Visually speaking, anyway. To do this, we'll use the image shown in Figure 9.11. (It appears there at 500% normal size.) Figure 9.11. The leaf image we'll be using in the sidebar.The first thing to do is add the leaf image to the background of the headings. We want it all the way to the right and partway down the element box, so that its top starts somewhere near the middle of the heading. The top padding plus content height is 1.03em, and there's another pixel of bottom padding. So we'll guess and say around 0.66em. .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%) url(nav-bg.gif) 100% 0.66em no-repeat; font-size: 1em; font-style: italic; line-height: 0.7em; text-transform: lowercase; letter-spacing: 1px; border-style: solid solid dotted; border-width: 1px 0 1px 2px; border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} That takes care of the top part of the leaf effect. Now we need to continue the leaves on past the bottom border. Fortunately, we have elements ready-made for this purpose. We'll just put the same image in the background of the unordered lists and shift it upward so that the two come together. How far up should it be shifted? Well, we know that the top of the image is about 0.37em above the bottom of the heading content's bottom edge. Then there are the top and bottom borders, each of which adds a pixel, and the one-pixel bottom padding. So we'll take a guess and say it's in the rough vicinity of 0.5em. .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none; background: url(nav-bg.gif) 100% -0.5em no-repeat;} The results are shown in Figure 9.12. Figure 9.12. The leaves are added to the sidebar.Pretty cool, except for one oddity: There's an extra leaf piece! That's because we applied the background image to all ul elements in the sidebar, and that includes the nested list. We need to get rid of it, and we'll do so by adding a declaration to the .panel ul ul rule. Sliced Opera
.panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none;} While we're here, let's italicize the text in that nested list. .panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none; font-style: italic;} Sidebar LinksNow we'll deal with the actual links. The link text has been far too cramped for far too long in this project, and a little padding on the list items is just the thing to give them some room. With top and bottom padding we can push them away from each other, and with left padding we can indent the text a bit from the edge of the sidebar. .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none; background: url(nav-bg.gif) 100% -0.5em no-repeat;} .panel ul li {padding: 0.15em 0 0.1em 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none; font-style: italic;} We don't want the exact same spacing rules to apply to the nested list, though. To tighten those nested links up a bit, we'll take the top padding off of the list items. .panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none; font-style: italic;} .panel ul ul li {padding-top: 0;} </style> Now for the colors. Blue and purple, the default unvisited and visited colors, don't really go well with the green theme we have in place. Let's define some basic colors for these link styles, providing a dark green for unvisited links and a lighter green for the visited links. This is what's shown in Figure 9.13. .panel ul ul li {padding-top: 0;} .panel a:link {color: rgb(30%,50%,30%);} .panel a:visited {color: rgb(50%,60%,50%);} </style> Figure 9.13. Improving the presentation of the links.We can take things a step further by styling the presentation links differently than the navigation links. Since the presentation options aren't really navigation related, they probably shouldn't look like unvisited links. The simplest thing to do is make them look like visited links. .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} This will set the presentation link colors to be a consistent color no matter whether a browser thinks they've been visited or not. Since we're talking about the colors of sidebar links, a hover effect might be nice. We want this to apply to any navigation link but not the presentation links. (Why? Just because.) So we'll add a new rule that makes any hovered navigation link a woodsy brown. .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} .panel a:hover {color: rgb(50%,30%,20%);} </style> This rule won't affect the presentation links because the specificity of #presolinks a is higher than that of .panel a:hover. Thus, the hover color will lose out to the color assigned by #presolinks a. The order the rules come in doesn't matter in this case, thanks to the differences in specificity. Link Specificity
Border ChangesAt this stage, it's time to remove that dotted red border probably well past time, really. So we'll take that declaration out of the .panel rule. .panel {position: absolute; right: 0; top: 5.5em; width: 17%; font-family: Arial, Verdana, sans-serif;} This change means that the top border of the "navigation" heading will now overlap the bottom border of the masthead, the same as the dotted red border did before we removed it. Having removed the sidebar's border, we need to restore some form of visual separation between the sidebar links and the main content. Rather than add a left border back onto the panel, let's instead add left borders to the unordered lists that contain the links. .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none; border-left: 1px solid rgb(45%,65%,45%); background: url(nav-bg.gif) 100% -0.5em no-repeat;} Remember what happened with the leaf, the way it showed up at the top of the nested list? We need to prevent a recurrence of that nested-list repetition here by removing the left border from any nested lists. This is shown in Figure 9.14. .panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none; border-left: none; font-style: italic;} Figure 9.14. Adding borders to the lists enforces visual separation.Natural HighlightingWe're almost done, but there are a few minor things left to do. One is to fulfill the third of our project goals: to highlight the name of this theme in some fashion. The theme's name is, appropriately enough, "Natural." If we take a look at the markup for that link, we can see an easy way to highlight the theme's name. <li ><a href="#" onclick="setActiveStyleSheet('Natural'); return false;" title="Wildlife and greenery">Natural</a></li> This id gives us all we need to style the theme's name different from the others. For starters, let's make the link color a dark green. .panel ul ul li {padding-top: 0;} .panel #natural a {color: rgb(30%,40%,30%);} .panel a:link {color: rgb(30%,50%,30%);} With that done, let's boldface and italicize the text by styling the #natural list item directly. These new font styles will be inherited by the link, although the color will not because we just explicitly assigned it a color. .panel ul ul li {padding-top: 0;} .panel #natural {font-weight: bold; font-style: italic;} .panel #natural a {color: rgb(30%,40%,30%);} Come to think of it, this is starting to make the link look like the headings, so let's bring in a couple more of the styles we used for the headings: the increased letter spacing and the lowercase text. .panel #natural {font-weight: bold; font-style: italic; letter-spacing: 1px; text-transform: lowercase;} In that same vein, let's add a dotted border to this list item to set it apart from the others. We don't want it to appear on the right edge, so we'll just define an overall border and then turn off the right side. We'll also add a background color that's just a touch darker than the page background. .panel #natural {font-weight: bold; font-style: italic; letter-spacing: 1px; text-transform: lowercase; border: 1px dotted rgb(45%,65%,45%); border-right: none; background: rgb(83%,90%,78%);} If we consider the presentation of the "natural" link, it's definitely different from its neighbors. There's just one little detail the left border. It's sitting just inside the list's border, which doesn't look all that great. We could remove it, but here's a better idea: Let's make it overlap the list's border, effectively punching a hole in that border and visually blurring the distinction between the theme name and the rest of the page. All that's required is a one-pixel negative left margin for the list item, as shown in Figure 9.15. .panel #natural {font-weight: bold; font-style: italic; letter-spacing: 1px; text-transform: lowercase; border: 1px dotted rgb(45%,65%,45%); border-right: none; background: rgb(83%,90%,78%); margin-left: -1px;} Figure 9.15. Highlighting the name of the current theme.Removing Accessibility
Finishing TouchesThere are but a few things left to do. First, the skip-link doesn't really have to stay in place. We could use one of several methods to remove it from display, including just setting it to display: none. In fact, let's just do that, as it's the simplest course of action. We'll drop this style in at the top of the style sheet for no good reason other than to get it out of the way early. @import url(project08.css); .skipper {display: none;} #sitemast {margin: 0; padding: 0 0 1em; border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} We might also do something about the color of links in the overall page instead of just in the sidebar. We'll go with sort of a bright medium green for unvisited links and a more washed-out green for visited links. This will apply to any links that aren't already being styled by other means, which means the rule will not affect the sidebar links nor the weblog links that we styled in the preceding chapter. Background Warnings
We'll put the rules to drive the new link-color effects at the end of the style sheet for no good reason other than we can. .panel a:hover {color: rgb(50%,30%,20%);} a:link {color: rgb(0%,50%,40%); background: transparent;} a:visited {color: rgb(30%,50%,30%); background: transparent;} </style> The result of removing the skip-link and coloring the document's links can be seen in Figure 9.16. Figure 9.16. Removing the skip-link and changing link colors.Now let's style the footer at the bottom of the page. We don't have to worry about its separation from the text in the main content because that's been handled by the bottom padding on the content div itself. All we need do is concentrate on styling the footer. We'll start with a double border across the top, a zeroed-out margin, and some padding on the top and bottom of the footer itself. a:visited {color: rgb(30%,50%,30%); background: transparent;} #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;} </style> The padding ensures that the footer's content doesn't crowd up against the edges of the browser window. Now, footers are usually given over to boring stuff like copyright statements and other legalese, so we'll crank down the size of the text. Text Reduction
#footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em; font-size: 75%;} To finish off the visual separation of the footer, we'll alter its text and background colors. These colors are based on variations of the overall page background and the page theme. (If you don't like them, feel free to use different values.) #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em; font-size: 75%; color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} There's just one more thing to do, and that's close up the space between the two paragraphs in the footer. By stripping the margins and padding off of the paragraphs, we get them to look like two lines in the same paragraph, as illustrated in Figure 9.17. #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em; font-size: 75%; color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} #footer p {margin: 0; padding: 0;} </style> Figure 9.17. Giving the footer some style.The end result of all our work is shown in Listing 9.2. Listing 9.2. The Full Style Sheet@import url(project08.css); .skipper {display: none;} #sitemast {margin: 0; padding: 0 0 1em; border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em; background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0; font: bold 2em/0.75em Arial, Verdana, sans-serif; background: rgb(45%,65%,45%) url(masthead.jpg) 100% -30px no-repeat;} #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} #main {padding: 2em 25% 3em 1.5em;} .panel {position: absolute; right: 0; top: 5.5em; width: 17%; font-family: Arial, Verdana, sans-serif;} .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em; background: rgb(75%,85%,70%) url(nav-bg.gif) 100% 0.66em no-repeat; font-size: 1em; font-style: italic; line-height: 0.7em; text-transform: lowercase; letter-spacing: 1px; border-style: solid solid dotted; border-width: 1px 0 1px 2px; border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em; list-style: none; border-left: 1px solid rgb(45%,65%,45%); background: url(nav-bg.gif) 100% -0.5em no-repeat;} .panel ul li {padding: 0.15em 0 0.1em 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em; background: none; border-left: none; font-style: italic;} .panel ul ul li {padding-top: 0;} .panel #natural {font-weight: bold; font-style: italic; letter-spacing: 1px; text-transform: lowercase; border: 1px dotted rgb(45%,65%,45%); border-right: none; background: rgb(83%,90%,78%); margin-left: -1px;} .panel #natural a {color: rgb(30%,40%,30%);} .panel a:link {color: rgb(30%,50%,30%);} .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} .panel a:hover {color: rgb(50%,30%,20%);} a:link {color: rgb(0%,50%,40%); background: transparent;} a:visited {color: rgb(30%,50%,30%); background: transparent;} #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em; font-size: 75%; color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} #footer p {margin: 0; padding: 0;} |