/* Generated by GTalbot :) */

body
{
  width: 1000px;
  /* why 1000px? because the largest image serving as background
  is header.jpg and it is 1000px wide, large. One way to make this
  template displays on larger scr. resolution would be to create a
  larger, wider image. E.g. header.jpg could have been made to be
  1280px wide.
  One way to make this webpage template more usable for
  different scr. res. would be to create a very large
  background-image */
  position: absolute;
  /* That means everything will have to be
  pixel-precisely positioned since normal flow will not apply */
  top: auto;
  left: auto;
  /* These 2 declarations (top: auto; and left: auto;) can be
  removed. They serve to show that body element is at position
  (0, 0) of the viewport according to CSS1 box model */
  background-color: silver;
  margin: 0px;
  border: 0px solid red;
}

#page
{
  height: 750px;
  border: 0px solid yellow;
}

#header
{
  height: 150px;
  background-image: url("../GRAPHICS/JPG/header.jpg");
  /* width = 1000px large; height = 150px tall */
  background-repeat: no-repeat;
  border: 0px solid red;
}

h1
{
  font-family: sans-serif;
  text-align: center;
  color: #FFC;
  padding-top: 1.3em;
  margin-top: 0px;
  /* MSIE 6 and MSIE 7 do not collapse adjoining margins (see section 8.3.1 of CSS 2.1):
  this is a nasty, persistent and frustrating bug in MSIE 6 and in MSIE 7 !
  So here, it may look like we need to remove the default margin on block-level elements
  in Firefox but that's not true. There is a gap at the top because Firefox collapse
  adjoining margins and MSIE 6 and MSIE 7 do not! */
}

#content
{
  background-image: url("../GRAPHICS/JPG/content.jpg");
  /* width = 572px large; height = 448px tall */
  background-attachment: scroll;
  background-position: left top;
  background-repeat: no-repeat;
  color: #FF9;
  float: left;
  font-family: sans-serif;
  font-size: 1.2em; /* originally was font-size: 1.8em; */
  height: 548px;
  overflow: auto;
  padding-left: 30px;
  /* If you give a padding left to a block-level element,
  then you should give an equal padding-right too to create a balanced
  view, visual coherence, visual symetry */
  padding-right: 30px;
  width: 640px; /* width = 700px minus padding-left and padding-right */
  border: 0px solid red;
}

#content p
{
  text-indent: 2em;
}

#menu1
{
  background-image: url("../GRAPHICS/JPG/menu1.jpg");
  /* width = 163px large; height = 447px tall */
  background-repeat: no-repeat;
  height: 548px;
  width: 200px;
  float: left;
}

#menu1 ul
{
  list-style-type: none;
  list-style-image: url("../GRAPHICS/GIF/blattlinksklein.gif");
  /* vertical-align: middle; vertical-align must not apply
  to ul; only on inline-elements and table-cells. So, this is
  another bug in MSIE 6 and MSIE 7. To perfectly vertically align
  blattlinksklein.gif with the baseline of the list item, you would
  need to cut off, crop the first 2 or 3 bottom pixels of
  blattlinksklein.gif */
  color: #FFC;
  list-style-position: inside;
  /* line-height: 2em; line-height is replaced with li {padding-top: 16px;}
  Bye, bye line-height */
  font-size: 1.8em;
  margin-left: 0px;
  padding-left: 30px;
  /* Consistent list indentation :
  "if you want consistent rendering of lists between Gecko,
  Internet Explorer, and Opera, you need to set both the left
  margin and left padding of the <ul> element."
  http://developer.mozilla.org/en/docs/Consistent_List_Indentation
  With margin-left: 0px; and padding-left: 30px;, the list item are
  now horizontally positioned the same in MSIE 7, Firefox 2 and Opera
  9. */
}

#menu1 li
{
padding-top: 16px; /* This replaces #menu1 ul {line-height: 2em;} */
}

#menu1 a
{
  font-family: sans-serif;
  color: #FFC;
}

#menu1 a:hover, #menu1 a:focus
{
  color: #FF9;
  font-weight: bold;

}

#menu1 a:active
{
  color: #CF9;
}

#menu2
{
  background-image: url("../GRAPHICS/JPG/menu2.jpg");
  background-repeat: no-repeat;
  height: 548px;
  width: 100px;
  float: right;
}

#list a, #footer a
{
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  font-weight: bold;
  color: white;
}

#list a:hover, #footer a:hover
{
  text-decoration: underline;
}

#menu2 ul
{
  display: none;
}

#footer
{
  width: 1000px;
  background-image: url("../GRAPHICS/JPG/automn-footer.jpg");
  /* width = 1000px large; height = 52px tall */
  background-repeat: no-repeat;
  border: 0px solid red;
  clear: both;
  height: 26px;
  padding-top: 26px;
  /* CSS height + CSS padding-top = height of background-image.
  The padding-top is equal to half of the background-image
  height in order to vertically center the text within the
  background-image.*/
}

#footer p
{
margin-top: 0px;
margin-left: 100px;
font-size: larger;
color: #FFC;
background-color: transparent;
}