body {
  margin: 0; padding: 0;
  background-color: #fc4; color: #070707;
  font-family: Arial, sans-serif;
}

div#page {position: relative; width: 100%; height: 100%;}

div#top {position: static; width: 100%; min-width: 54em; height: 10em; background-color: #6c3;}

div#left {
  position: absolute;
  left: 0em; top: 0em; width: 11.5em; height: 100%;
  background-color: #29d;
}

div#square {
  position: absolute;
  left: 0em; top: 0em; width: 11.5em; height: 10em;
  background-color: #f00;
}

div#content {
  position: relative;
  left: 14em; top: 0em; width: 53em;
  font-size: 85%;
  padding: 2em;
  z-index: 1;
}

div#title {
  position: absolute;
  left: 4.2em; top: 2.6em; max-width: 60em;
  z-index: 1;
}

div#menu {
  position: absolute; left: 15.7em; top: 9.5em; z-index: 2;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 82%; font-weight: bold; letter-spacing: 0.15em;
  color: #222;
}

img#picture {position: absolute; left: 2em; top: 12em;}

p, li {line-height: 150%;}

p {margin: 1.2em 0.2em;}

ul {margin-top: 1.2em; margin-bottom: 1.2em;}

h1 {
  font-size: 450%; font-weight: normal; letter-spacing: 25px;
  color: white;
  margin: 0;
}

h2 {
  font-size: 200%; font-weight: normal; letter-spacing: 3px;
  margin: 0em 0em 0.5em;
  color: #333;
  clear: both;
}

h3 {
  font-size: 155%; font-weight: normal; letter-spacing: 1px;
  margin: 0em 0em 0.7em;
  color: #333;
  clear: both;
}

h4 {
  font-size: 110%; font-weight: bold; letter-spacing: 1px;
  margin: 0em 0em 1em;
  color: #322;
  clear: both;
}

h5 {
  font-size: 100%; font-weight: bold;
  margin: 0em 0em 1em;
  color: #332;
  clear: both;
}

img {border: 0;}

img.left {float: left; margin: 0em 1.5em 1em 0em;}

img.preview {width: 120px; height: 120px;}

b {color: #222;}

p.preview img {width: 120px; height: 120px; margin: 0.25em; padding: 0;}

p.gallery span {
  display: inline-block;
  margin: 0.2em; padding: 0.1em; width: 150px;
  vertical-align: top;
  font-size: 82%; line-height: 140%;
}

p.gallery span img {margin: 0.1em;}

li {margin-bottom: 0.3em;}

li li {list-style: disc;}

.compact li {margin: 0;}
.spaced li {margin-bottom: 1em;}
ul ul {margin-top: 0.9em;}

.email {color: #a30; font-weight: bold;}

a:link {color: #a30; font-weight: bold;}
a:active {color: #ffc; font-weight: bold;}
a:hover {color: #ffc; font-weight: bold;}
a:visited {color: #830; font-weight: bold;}

#menu a {text-decoration: none; color: #333;}
#menu a:active {color: white;}
#menu a:hover {color: white;}
#menu a:visited {}

table {width: 105%; font-size: 100%;}
th {text-align: left; border-bottom: #555 solid 1px;}
th.name {width: 65%;}
th.size {width: 15%;}

.col {display: inline-block; width: 15em; margin-bottom: 0.5em; padding-right: 0.2em;}

.expanded {width: 100%;}

.vcenter {vertical-align: middle;}

.button {padding-top: 4px;}

hr {
  height: 0; margin: 0em 0em 0.7em;
  border-top: #863 dotted 1px; border-bottom: none;
}

#more {display: none;}

#hide {display: none;}

@media screen and (max-width: 70em) {
  body {font-size: 120%;}
  div#content {left: 11em; font-size: 105%; width: 36em;}
  div#menu {font-size: 100%; left: 13em; top: 7.7em;}
}