!!How to achieve an effect

Lens can use absolute positioning or floats because each technique lends 
itself to different effects, and has its own good and bad points.

'''Floats'''
* Layout can break if there are unexpected clearing elements.
* Footer can span all columns. (I decided to keep Lens' footer in the 
content column so that Lens could switch-hit and have the (:nofooter:) 
directive work reliably.)
* If width is fixed, then the body can have a different background colour 
than the container.  This can look quite nice.

'''Absolute positioning'''
* Layout cannot be broken by unexpected clearing elements.
* Footer can only span one column unless the longest column is 
predictable.  (The longest column is ''not'' predictable, though, so I 
decided that the footer only spans the content column.)
* Cannot have different backgrounds for body and container except by 
using a faux columns technique.

!!!Before modifying Lens

It's best to copy the stylesheet you want to modify, or study the 
stylesheets that apply the same kind of properties.  Otherwise, you might 
find that your custom CSS only works when certain other options are on or 
off.  I found that making the styles independent of eachother was one of 
the hardest things about writing Lens.

You should also consider how advanced your CSS is, and whether it should 
be loaded for lo-fi mode, or only for hi-fi mode.  Colour and font 
effects are fairly safe for lo-fi, but most layout changes should only be 
done in hi-fi mode.  

!!!Styling the sidebar

You might want to apply a background colour or border to the sidebar and 
have it continue down to the very bottom, even when the content column 
is longer than the sidebar.  You can't do that in the obvious way 
(@@#sidebar-inner {background-color:whatever;}@@ or @@#sidebar-inner 
{border:whatever;}@@), because the CSS specification says the browser is 
only supposed to colour the area under the sidebar's content, not the 
whole space set aside for it.  You can achieve the desired effect 
through the faux columns technique.  More information about faux columns:

* http://www.alistapart.com/articles/fauxcolumns
* http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html
* http://www.communitymx.com/content/article.cfm?cid=AFC58

!!Other implementation details

@Import rule syntax is used as a CSS filter.  Hi-fi mode is applied with 
@@@import'styles.css';@@, and you can get more information about this 
filter over at http://www.dithered.com/css_filters/css_only/import_single_quotes_no_space.html.  

The internal navigation links in the header and footer are hidden with 
the "hidden off top" method from 
http://www.access-matters.com/testcases/tc5-2-8.html, because it worked 
well in their screenreader tests and did not cause any layout bugs. 

The template has double divs for the masthead, content, and sidebar 
sections, because it makes precise layout a snap.  This way, I can set 
widths on the outer divs -- e.g. 75% content, 25% sidebar -- and set the 
margins, padding, and borders on the inner divs, and it all Just Works.  
I could not do that with just one div apiece, because the box model 
would make the math much, much more difficult: width does not include 
padding, borders, or margins.