/* Based on a tutorial from www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/ */
/* Unlike many other methods for a fixed header- and footer section, THIS ONE worked with Firefox and IE 8 .   */

body {
  font: 62.5% Arial, Helvetica, sans-serif;
  /* color: black; */
  margin: 0;
  padding: 0;
  background: white;
}

p,div,table,ul,ol { margin-left:10px; }


h1, h2,h3 {
  color: black;
  /* three levels of nested headlines, left-aligned less margin than text paragraphs (etc) */
  margin-top:20px;
  margin-right:0px;
  margin-bottom:10px;
  margin-left:-10px;
}

hr {
  /* same left-alignment at the 3 'major' headline levels */
  margin-left:-10px;  
}

h4 {
  text-decoration:underline;
  /* used, for example, for a list of user controls in settings.htm */
}


p {
  margin: 10px 0;
  padding: 0;
}

blockquote {
  font-style: italic;	
}

#header-wrap
{ position: fixed;
  top: 0;
  right: 0;
  width: 400px;  /* doesn't matter that much, because this thing is completely transparent */
}

#header-container
{ height: 2em;
  /* background: #DDDDFF; */
}

#header /* for the LINKS on the left side of the fixed header */
{ /* On the RIGHT side because the header always obstructs the 'anchored headline': */
  margin: 0 auto;
  position: relative;
 margin-right: 2px;
}


#header ul {
  background: #DDDDFF;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 1px;
  right: 0;
}

#header ul li {
  float: left;
  margin-right: 5px;
}

#header ul li a{
  color: #4444FF;
  font-size: 1.2em;
}

#header ul li a:hover {
  color: #FF4444;	
}

#container {
  /* width: 940px; */
  margin: 0 auto;
  font-size: 1.4em;
  overflow: auto;
  padding: 0px 0 40px;
  /* The padding-top (same value as the header) doesn't cure the effect
     that when the browser jumps to a certain text mark (anchor), 
     the headline of the anchor is hidden under the fixed header.
     Yuccc. 
     That's why the 'fixed header' was moved to the right side of the window.
   */
}

#content {
  float: left;
  /* width: 625px; */
}


#footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;	
}

#footer-container {
  font-size: 1.2em;
  height:    1.3em;
  /* background: #DDDDFF; now transparent for the same reason as for the HEADER */
  /* background: url(../images/footer-bg.png) repeat-x left bottom; */
}

#footer {
  /* width: 940px; */
  margin: 0 auto;
  position: relative;
  /* added because the lower left corner is obstructed by the link-info-bubble: */
  text-align: right;
  margin-right: 2px;
}

#footer ul {
  background: #DDDDFF; /* only unordered-list elements have a background since 2011-09-18 */
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 2px;
  right: 0;
}

#footer ul li {
  float: left;
  margin-right: 5px;
}

#footer ul li a{
  color: #4444FF;
  font-weight: bold;
  margin-right: 5px;
  /* text-decoration: underline; unnecessary ! */
}

#footer ul li a:hover {
  color: #FF4444;	
}