body {
  margin:0px;
  margin-bottom:100px;
}
h1 {
  position:relative;
  left:20px;
  margin-top:40px;
}
h2 {
  position:relative;
  left:30px;
}
h3 {
  position:relative;
  left:40px;
}
h4 {
  position:relative;
  left:50px;
}
pre {
  position:relative;
  left:60px;
  width:80%;
}
p {
  position:relative;
  left:50px;
  width:80%;
}

/* All this relative positioning seems to confuse lists. The bullets are still displayed at the 'margin' rather than at the 'position'. So just hide bullets as a work-around. */
ul { list-style-type:none; }

div.footer {
  clear: both;
  color: #888888;
  padding: 2em;
  font-size: smaller;
  text-align: center;
}

div.colored-box {
  background-color: #dee7ec;
}

table.header {
  border-style:none;
  font-family: sans-serif;
  font-size: smaller;
}
table.header th {
  padding:10px;
  border-right: 3px solid #8cacbb;
  text-align: center;
}
table.header td {
  padding:10px;
  border-right: 1px dotted #8cacbb;
  text-align: center;
}