/* CSS layout experiments
If the boxes have no positioning specified, then they stack one on top of the other, like paragraphs in the order that the divs appear in the html. This is because a div is a block-level item. This is "normal" flow. (If you force the divs to be display:inline, weird things happen. The borders disappear, but the divs still stack.) If you specify position:relative without any offset, then it should be the same as normal, and that is the case.
Because I didn't specify one, the body is by default the "containing block" of all these. For example, if you set body to have position:fixed, then that locks all the divs in place. Likewise, position:relative with a margin-left moves all the divs to the right. The distance of the offset is relative to the position the box would have in the normal flow.
A position:float moves the box horizontally out of the normal flow. Content below moves up to take up the space. A float should have a width specified (if the content would make it too wide), otherwise it would be too wide to have anything flow around it. To push subequent boxes down, use clear. Multiple floats will line up side by side aligned at the top. Keep the floats all left or all right so the edges touch. If there isn't room for the floats (window was resized), then the floats will be forced to stack.
Because my divs are out of order, I can't use float:left on the content, nav, and links because they end up with content on the left instead of the middle. Also the head ends up at the end, so all elements have to be absolutely positioned. Head can't be relatively positioned, because the "top" would have to be some undetermined negative number to move the head up relative to its normal flow position at the bottom.
When positioning the boxes, allow room for margins, otherwise boxes may overlap.
Background images must have "url" using a path relative to this style sheet, not the page.
How to do Z layering, so shadow is "behind" content?
If the drop shadows are 
Make the shadows their own boxes... maybe position relative to content?
An empty div with a background image , the image won't show up unless there's something in the div.
Couldn't get liquid center column working with percentages. The shadows wouldn't move proportionally when the window was resized.
Font size 10px seems to work out so that 0.1em is 1 pixel.
" Links" didn't work until I added a z-index higher than shadowright.
Site width: total 730 center image 410 left: 150 170
height 230
Study and implement the box model hack: http://www.tantek.com/CSS/Examples/boxmodelhack.html
home styles should ShadowLeft_Home instead of other pages being "default"
If a picture is the last thing in content, then it hangs outside the content box. One fix is adding empty paragraph below.
Need a template for PAW pictures.
 */

/* PAW index section 
Put the description and techincal stuff in divs and float them left and right? */

/* Gallery section
Want the navigation to always be in the same place,
so this would means:
1) above the photo (photos are a different size; no room to the left)
2) on same line as title, then left aligned.
div for both with width = photo width in ems 
Tried to different text-aligns in the same p (using span), but it doesn't work.
Need to have block-level elements.
*/

/* div
for some reason, the contents of the div are appearing below it.
Answer at http://www.alistapart.com/articles/practicalcss/
"However when we do this we run into a problem. When you float an element with CSS, it no longer takes up any ³space² and the background and border show up above the images instead of surrounding them. We need to put some content other than the floated DIVs into the container DIV. Like a spacer DIV:" */
#GalleryWrapper {position:relative; /* must be positioned so "left" will work */
/* width of the photo, so title is right-aligned */
left:.1em;
top:.1em;

/* border-bottom: 1px #BBBBBB solid;  the border won't work unless there is some content other than divs in this div */
/* margin-bottom:.5em; */

font-size:10px;
background-color:#DDDDDD;}

.dummy {clear:both;
font-size:10px;}

#GalleryPhoto {position:relative;
left:.1em;
padding-top:1em;
font-size:10px;}

/* padding does not change the relative alignment of these two boxes. */
/* Can't get nav and title to align in IE */
.PhotoTitle {float:right;
color:#000000;
background-color:#DDDDDD;
text-align:right;
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 13px;
font-weight: bold;
padding-right:.5em;}

.NavGallery2 {float:left;
padding-top:.3em; /* to align the baseline with PhotoTitle */
width:11em;

/* text-align:left; */
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
padding-left:.5em;
/* text-indent:0em;

margin-top:.6em;
margin-bottom:.1em; */
color:#999999;
background-color:#DDDDDD;}

/* img tag in gallery will be specified in ems; we set font size to 10px for easy conversion from pixels. */
IMG.Gallery {font-size:10px;}

.NavGallery {position:absolute;
right:1.2em;
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: right;
text-indent: 0px;}

BODY {background-color: rgb(255,255,255);}

#Head {position:absolute;
top:5px; /* top and left are relative to the containing block: the body */
left:6px;
clear:both;
font-size:10px;
width:73em;}

#Menu {position:absolute;
top:13em;
left:1.5em;
width:15em;
font-family:verdana;
font-size:10px;
color:#616157;
background:transparent;}

#ShadowLeft {position:absolute;
background: transparent url(../img/shadowleft.jpg) repeat-y top left;
top:12.5em;
left:14.4em;
z-index:0;
font-size:10px;}

#ShadowRight {position:relative;
background: transparent url(../img/shadowright.jpg) repeat-y top left;
left:41.1em; /* 41.6 */
z-index:1;
font-size:10px;}

#Content {position:relative;
left:-36.3em; /* -36.4 */
padding:10px;
width:35.2em;
border:1px black solid;
background:#F3F3F3;
/* background:#F7F7F2; */
height:auto;
font-family:verdana, sanserif;
font-size:11px;	
line-height:18px;
color:#616157;
z-index:2;}

#Links {position:absolute;
top:13em;
left:57.8em; /* was 56em; */
width:17em;
font-family:verdana;
font-size:10px;
color:#616157;
z-index:3;
background: transparent;}

 
#Head_Home {position:absolute;
top:5px; /* top and left are relative to the containing block: the body */
left:6px;
clear:both;
font-size:10px;
width:73em;}

#Menu_Home {position:absolute;
top:24em;
left:1.5em;
width:15em;
font-family:verdana;
font-size:10px;
color:#616157;
background:transparent;}
 
#ShadowLeft_Home {position:absolute;
background: transparent url(../img/shadowleft.jpg) repeat-y top left;
top:23.5em;
left:14.4em;
z-index:0;
font-size:10px;}

#ShadowRight_Home {position:relative;
background: transparent url(../img/shadowright.jpg) repeat-y top left;
left:41.1em; /* 41.6 */
z-index:1;
font-size:10px;}

/* the remaining boxes could be floated and relatively positioned down */
#Content_Home {position:relative;
left:-36.3em; /* -36.4 */
padding:10px;
width:35.2em;
border:1px black solid;
background:#F3F3F3;
/* background:#F7F7F2; */
height:auto;
font-family:verdana, sanserif;
font-size:11px;	
line-height:18px;
color:#616157;
z-index:2;}

#Links_Home {position:absolute;
top:24em;
left:57.8em; /* was 56em; */
width:17em;
font-family:verdana;
font-size:10px;
color:#616157;
z-index:3;
background: transparent;}


#Menu P {line-height:16px;
margin-top: 0px; /* no space between paragraphs */
margin-bottom: 0px;}

#Links P {line-height:15px;
margin-top: 0px; /* no space between paragraphs */
margin-bottom: 0px;}

/* these background colors work on the content section, but not against white */
A {text-decoration: none;}
A:link {color: rgb(153, 102, 51);
background-color: #F3F3F3;}
A:visited {color: rgb(102, 51, 0);
background-color: #F3F3F3;}
A:active {color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);}
A:hover {color: rgb(204, 153, 102);
background-color: #F3F3F3;
text-decoration: underline;}

/* links in the gallery section */
.NavGallery2 A {text-decoration: none;}
.NavGallery2 A:link {color:#999999;
background-color: #DDDDDD;}
.NavGallery2 A:visited {color:#999999;
background-color:#DDDDDD;}
A:active {color: rgb(0, 0, 0);
background-color:#DDDDDD;}
A:hover {color:#000000;
background-color: #DDDDDD;
text-decoration: underline;}

P.NavLev1 A:link, P.NavLev2 A:link, P.NavLev3 A:link, P.NavLev4 A:link {color: rgb(102, 51, 0);
background-color: rgb(255, 255, 255);}
P.NavLev1 A:visited, P.NavLev2 A:visited, P.NavLev3 A:visited, P.NavLev4 A:visited {color: rgb(102, 51, 0);
background-color: rgb(255, 255, 255);}
P.NavLev1 A:active, P.NavLev2 A:active, P.NavLev3 A:active, P.NavLev4 A:active {color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);}
P.NavLev1 A:hover, P.NavLev2 A:hover, P.NavLev3 A:hover, P.NavLev4 A:hover {color: rgb(153, 102, 51);
background-color: rgb(255, 255, 255);
text-decoration: none;}

/* The P tag is used to mark up most text, and styles are applied using classes. */
P {text-indent: 16px; /* indented paragraph */
text-align: left;
margin-top: 0px; /* no space between paragraphs */
margin-bottom: 0px;
color:#616157;}

.NavLev1 {font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
color: rgb(204, 153, 102);
line-height: 14px;
text-indent: 0px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

.NavLev2 {font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 9px;
font-weight: bold;
color: rgb(204, 153, 102);
line-height: 14px;
text-indent: 8px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

.NavLev3 {font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 9px;
font-weight: normal;
color: rgb(204, 153, 102);
line-height: 16px;
text-indent: 20px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

.NavLev4 {font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 9px;
font-weight: normal;
color: rgb(204, 153, 102);
line-height: 14px;
text-indent: 24px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

/* photo title; use with an H3, it adds italic */
.pTitle {font-size: 13px;
font-weight: bold;
font-style: italic;
line-height: 14px;
color: rgb(102, 51, 0);
background-color: #F3F3F3;
text-align: left;
margin-top: 14px;
margin-bottom: 0px;}

/* photo description; use with P */
.pDesc {font-size: 11px;
line-height: 13px;
text-indent: 12px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

/* photo technical info; use with P */
.pTech {font-size: 11px;
background-color: rgb(204, 204, 204);
line-height: 13px;
text-indent: 0px;
text-align: left;
padding-left: 3px;
padding-bottom:3px;}

.date {font-family: Arial, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
color: rgb(153, 102, 51);
line-height: 14px;
text-indent: 0px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

.fl {text-indent: 0em;}

.caption {font-family: Verdana, Arial, Geneva, sans-serif;
color: rgb(102, 51, 0);
background-color: #F3F3F3;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 0px;
text-align: left;
margin-top: 4px;
margin-bottom: 6px;}

/* Level 1 indent */
.codeAS {font-family: Geneva, Arial, sans-serif;
color: rgb(0, 0, 0);
background-color: #F3F3F3;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 36px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

/* Level 2 indent */
.codeAS2 {font-family: Geneva, Arial, sans-serif;
color: rgb(0, 0, 0);
background-color: #F3F3F3;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 56px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

.html {color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
font-family: Courier, "Courier New", sans-serif;
font-size: 11px;}

.rpg {width:51em;
color: rgb(36, 216, 48);
background-color: rgb(0, 0, 0);
font-family: "Courier New", monospace;
font-size: 11px;
line-height:12px;
padding:1px;}

.sb {font: normal normal normal .75em/.8em Verdana, Helvetica, sans-serif;
text-indent: 0em;
text-align: left;
margin-top: .1em;
margin-bottom: 0em;}