/* When complete, remove unnecessary style defs, such as the many IMG classes that came here from another site's stylesheet (Noble?) */

/* position:fixed  for DIV.navside and max-width for DIV.content work in IE6 because of use of Dean Edwards' IE7 script package.

Oct/2007 - changed  #navside from position: fixed; back to position: absolute; because on 800x600 resolution like Dad's PC, he can't get to the bottom link. Need to either move nav higher in viewport, or change position based on viewport height. Or, add "overflow" style to enable scrolling or something for nav content that isn't visible.
-> Or, use script to fix position to bottom of viewport?
http://www.gunlaug.no/contents/wd_additions_15.html
http://www.google.ca/search?hl=en&q=css+position+fixed+bottom+of+viewport&meta=

except that on larger resolutions, I want it just below the sun bg, not down at the bottom of viewport.

or, this idea? http://divinentd.com/experiments/emulating-position-fixed.html
http://www.gunlaug.no/contents/wd_additions_17.html

can't use border-color:transparent in IE, but don't want links to jump when hovered as a new border is added.  someone wrote:
I usualy get around the border on hover displacement of content by adjusting the margin/padding at the same time.
so if the margin/padding before hover was 4px for instance, on hover it would be 4px minus width of border. that way you don't get that twitchy shift...

http://www.cssplay.co.uk/boxes/transparent_borders

Could I add a DIV inside #navside but before the links, with a set height, to "push down" the links further on the page? Then I could set a max-height on that DIV as a %, hopefully as a % of viewport so on larger resolutions nav would be positioned further down, but on low resolutions with small viewport height then nav would appear entirely in viewport?
*/


/* 1 @ Body ---------------------------------------- */

HTML, BODY {margin:0;padding:0;border:none; }

BODY {background: #e7eaf3 url(../Images/bkgdSun.jpg) no-repeat fixed;
      color: #0F2157;
      font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-style: normal; }

/* #F3F4F7 #FAFAFA #CFD5E5 #e7eaf3 repeat-x  fixed top right F3F4F7
conversions of bg colour
Hex: #E7EAF3
HSL: 225° 33% 93%
RGB: 231 234 243
*/



H1, H2, H3 {color: #57380f;}
/* complementary and split complementary
 dark taupe  #736026  dark brown #57380f  dark blue #0F2157
light taupe #D9c68c  warm light brown #D9B88C (< goes with dark brown)
ochre? #D9AC26
very pale pinky? #F3F0E7
white FFFFFF  for navigation highlighting?
add highlights - thick underline horizontal line
*/

HR {color: #D9B88C; background-color: #D9B88C; border-bottom: 1px solid black; height: 4px;  }

H1 {margin-bottom: 0px;}
H1, H2 {margin-top: 30px; font-weight: lighter; }


DIV.content { margin-left: 190px; padding: 75px 12% 10px 6%; max-width: 600px; }

BODY.celebrations DIV.content { padding-left: 2%; padding-right: 0; max-width: 1300px; }




DIV.content a:link {color: #0F2157; border-bottom: 1px dashed;
                    text-decoration: none; }
DIV.content a:visited {color: #0F2157;  border-bottom: 1px dashed;
                   text-decoration: none; }
DIV.content a:hover {color: #D9B88C; border-bottom: 1px dashed; }
DIV.content a:active {color: #FFFFFF; }

#navside { position: absolute; top: 320px; left: 15px; z-index: 10; }

#navside A {display: block; width: 125px; height: auto; margin: 0 0 6px 0; font-size: 24px; font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; padding-left: 5px;}
#navside .nav2 { margin-left: 25px;  font-size: 16px; }

#navside a:link, #navside a:visited {color: #57380f; text-decoration: none;
      border: 2px solid #e7eaf3; }

/* border was #e7eaf3  would like to use transparent for border here, but IE6 doesn't seem to support that (I read that final version of IE7 supports it)

can't use border-color:transparent in IE, but don't want links to jump when hovered as a new border is added.  someone wrote:
I usualy get around the border on hover displacement of content by adjusting the margin/padding at the same time.  so if the margin/padding before hover was 4px for instance, on hover it would be 4px minus width of border. that way you don't get that twitchy shift...


another approach, but finicky to get color right
http://www.hedgerwow.com/360/dhtml/css-ie-transparent-border.html
    _border-color:tomato;  _filter:chroma(color=tomato);
http://www.uselesspickles.com/triangles/demo.html
*/

#navside a:hover {color: #D9B88C; border: 2px outset white; }
#navside a:active {color: #FFFFFF; border: 2px inset white; }
A#current:link, A#current:visited {color: #0F2157; text-decoration: none; border: 2px solid #e7eaf3; cursor: default; }

/* IMPORTANT DISCOVERY
 Regarding navigation behaviour: if I place that final navigation declaration, A#current:link ... , ahead of the declarations for hover and active (which is the normal recommended sequence), then even the link for the current page will "light up" with the hover color and border when hovered over. However, if I place that declaration out of the normal sequence and put it at the bottom as I now have it, then the link for the current page will not change color or show its border when cursored over. I think that is kind of a nice behaviour, as the link for the current page sort of "goes dead" because you are already on that page.
Update: I should be able to achieve this, with the correct sequence, by styling "current" link differently.
 */

IMG { border: none; }
.center { margin: 1em auto 1.7em auto; display: block; text-align: center;}
BODY.celebrations IMG { margin: 5px;  }
IMG.tight {    margin: 1em 0 .8em 0; }
IMG.tightrt {     margin: 1em 0 .8em auto; text-align: right; display: block; }
IMG.left { float: left; margin: 1em 35px 1.7em 0; position: relative;}
IMG.right { float: right; margin: 1em 0 1.7em 35px; position: relative; }
IMG.lefttight { float: left; margin: 1em 30px .8em 0; position: relative;}
IMG.righttight { float: right; margin: 1em 0 .8em 30px; position: relative;}
BR.clear { clear: both; line-height: 0px; display: block;  position: relative;}

LI {margin-bottom: 8px;}


/*  @ Home ---------------------------------------- */

BODY#index {background-image: none;}
#index DIV {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 950px;
	height: 562px;
	margin-left: -475px; /*set to negative number 1/2 of the width*/
	margin-top: -281px; /*set to a negative number 1/2 of the height*/
}