/* Font, color etc */
body {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
  text-align: left;
  text-transform: lowercase;
  font-size: 16px;
  font-family: Garamond,serif;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

.section { font-size: 100%; font-weight: normal; font-style: italic; color: rgb(0, 0, 0); }

a { font-size: 100%; font-weight: normal; line-height: 130%; text-decoration: none; color: rgb(25, 59, 177); }
a:visited { text-decoration: none; color: rgb(25, 59, 177); }
a:hover { text-decoration: none; color: rgb(0, 0, 0); }

a.menu { font-size: 100%; font-weight: normal; line-height: 130%; text-decoration: none; color: rgb(25, 59, 177); }
a.menu:visited { text-decoration: none; color: rgb(25, 59, 177); }
a.menu:hover { text-decoration: none; color: rgb(0, 0, 0); }
a.menu_this { font-size: 100%; font-weight: bold; line-height: 130%; text-decoration: none; color: rgb(25, 59, 177); }

a.title { font-size: 180%; font-weight: normal; text-decoration: none; color: rgb(25, 59, 177); margin-bottom: -1px; }
a.title:visited { text-decoration: none; color: rgb(25, 59, 177); }
a.title:hover { text-decoration: none; color: rgb(0, 0, 0); }
a.title_this { font-size: 180%; font-weight: normal; text-decoration: none; color: rgb(25, 59, 177); margin-bottom: -1px; }

img { padding: 0px 0px 30px 0px; border: none; max-width: 100%; }

/* Main page content. Left margin should match navbar width. */
.main-block {
  margin: 0px;
  margin-left: 175px;
  border: none;
  padding-top: 30px;
  padding-right: 0;
  padding-bottom: 0px;
  padding-left: 0;
  position: relative;
}

/* Description block */
.desc-block {
  margin: 0px;
  max-width: 700px;
  border: none;
  line-height: 130%;
  padding-top: 0px;
  padding-right: 5%;
  padding-bottom: 10px;
  padding-left: 5%;
}

/** Content block (images etc) */
.content-block {
  margin: 0px;
  max-width: 700px;
  padding-top: 0px;
  padding-right: 5%;
  padding-bottom: 50px;
  padding-left: 5%;
  border: none;
}

/* Navigation menu */
.navbar {
  width: 175px;
  margin: 0;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  padding: 30px;
  text-align: left;
  overflow: hidden;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  border: none;
  border-right: 2px dotted;
  border-color: rgb(192, 192, 192);
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 30px;
}

.navbar-phantom-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On narrow screens, make the navbar into a topbar */
@media screen and (max-width: 700px) {
  .main-block { margin: 0px; }

  .navbar {
    width: 100%;
    height: auto;
    position: relative;
    border: none;
    border-bottom: 2px dotted;
    border-color: rgb(192, 192, 192);
  }

  .navbar ul { position: relative; top: 0; margin: 0 auto; }
  .navbar li { display: inline; padding-right: 20px; }

  .navbar-phantom-ul { max-height: 0px; }
}

/* On screens that are even narrower, display the topbar vertically, instead of horizontally */
@media screen and (max-width: 500px) {
  .main-block { margin: 0px; }

  .navbar ul { position: relative; top: 0; margin: 0; }
  .navbar li { display: block; padding-right: 0px; }

  .navbar-phantom-ul { max-height: 0px; }
}
