/* $Id: elf.css $ */
/* so, the problems with css
**
** I orignally put my 230 pixel background on the body, but when I reduced
** the #container max-width to less than the screen width, because the lines
** int the main text looked too long, I found that the background stayed aligned
** to the window edge rather than to the left sidebar.
**
** Moving the 230 pixel background to #wrapper found that it also tracked
** the window edge.
**
** Moving the 230 pixel background to #container made the background track
** the left sidebar.
**
** But another issue appeared when converting to relative measurements.  When
** scaling the browser content with Control-+ or Control--, the size of the
** left sidebar changes to accommodate the changed fontsize, but the 230 pixel
** background does not adjust, so it becomes too large or too small for the
** layout.
**
** At the moment I am not entirely sure how to solve the above mentioned
** difficulty.
*/
body {
  /* background: #fff url(/elf/elf/bg230.png) repeat-y left; */
  font: 100% Verdana, sans-serif; /* 12px/170% */
  background: #f7f7f7;
}

input {
  font: 100% Verdana, sans-serif; /* 12px/100% */
  color: #494949;
}

textarea, select {
  font: 100% Verdana, sans-serif; /* 12px/160% */
  color: #494949;
}

body.sidebars {
  min-width: 640px;
}

#header-region {
  background: transparent;
}

#wrapper {
  /* this fails to background the header-region, above the logo
     and also fails to track when we reach max width */
  /* background: #fff url(/elf/elf/bg230.png) repeat-y left; */
  background: transparent;
}

#wrapper #container {
  max-width: 988px;
  padding-top: 32px;
  background: #fff url(/elf/elf/bg230.png) repeat-y left;
}

#wrapper #container #center #squeeze {
  background: transparent
}

#wrapper #container #center .right-corner {
  background: transparent;
}

#wrapper #container #center .right-corner .left-corner {
  background: transparent;
}

#header {
  /* adding a top margin on header makes header-region larger */
  /* margin-top: 32px; */
  /* adding top padding makes the header logo taller */
  /* padding-top: 32px; */
  background-color: #0001fc;
  background-image: url(/elf/elf/clouds.jpg);
  background-repeat: repeat;
}

#wrapper #container #header img#logo {
	  padding-left: 8px;
	  padding-top: 8px;
}

#wrapper #container #header h1 {
	  padding-left: 8px;
}

#sidebar-left {
  background-color: #ffcc99;
}