html {
  /* Specified colour shown for all visible screen */
  background: #F8F8F8; */
}

body {
}

h1 {
  font-size: 1.2em;
}

h2, h3, h4 {
  font-size: 1em;
}

/* The container for everything */
#page {
}

/* header-bar across top of page */
#header {
  margin: 0.5em 0; /* push banner away from top of window */
  text-align: center;
}

#header .title {
  font-size: 3em;
}

#header .desc {
  font-style: italic;
}

#footer {
  /* Draw a horizontal line above footer */
  border-top: 1px solid;
  margin-top: 20px;

  /* Indent the copyright declaration somewhat */
  padding-left: 50px;
}

/* The container for everything except header and footer */
#main {
  /* Lay out child elements from left to right */
  display: table;
}

/* sidebar containing navigation links */
#navpane {
  display: table-cell;

  /* Set width of menubar. */
  width: 230px;

  /* 
   * And in the ugly case where text is too long to fit, clip it rather than
   * let it overwrite the content pane 
   */
  overflow: hidden;

  /* Push text away from left and right sides */
  margin-left: 10px;
  margin-right: 10px;

  /* Draw vertical line between navbar and content */
  border-right: 1px solid;

  /* And ensure that vertical bar is separated from navpane content */
  padding-right: 5px;
}

ul#nav {
  /* Don't put bullet-points in front of a list of images! */
  list-style-type: none;
}

/* Put a nice white box around each image in the navigations icon-list. */
#navicons img {
  border: 2px solid #FFFFFF;
  border-radius: 2px 2px 2px 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

#navpane ol, #navpane ul {
  /* Don't put bullet-points in front of a list of nav links */
  list-style-type: none;

  /* Don't indent the list of nav links */
  padding: 0px;
  margin: 0px;
}

#navpane h1 {
  /* Put a nice horizontal rule under each navpane heading. */
  border-bottom: 1px solid #E0E0E0;
  padding: 0.5em 0;
}

#navpane li {
  /* Put a nice horizontal rule under each navlink. */
  border-bottom: 1px solid #E0E0E0;
  padding: 0.5em 0;
}

#navpane li a {
 /* Don't underline navigation links */
 text-decoration: none;
}

/* Area containing posts, documents, category-lists etc */
#content {
  display: table-cell;

  /* Push content-text away from border line. */
  padding-left: 10px; 
  padding-right: 10px; 
}

/* The "posted on" annotation for blog postings. */
.post aside {
  color: #888;
  padding-bottom: 8px;
  border-bottom: 1px solid #aaa;
}

/* The body of blog postings */
.post article {
  margin: 10px 0 60px 0;
}

/* preformatted text - mostly example output or sourcecode. */
pre {
  /* Override CodeRay stylesheet */
  background-color: #93A1A1 !important;

  border: 1px solid;
  border-radius: 0.4em 0.4em 0.4em 0.4em;
  padding: 0.8em 1em;
}