html {
    background: #fafafa;
    color: #555;
    font: 11pt/11pt normal "Helvetica Neue", "Calibri", "Helvetica", "Arial", sans-serif;
    letter-spacing: .05em;
}

body {
    margin-left: 10px;
    width: 800px;
}

/* Blocking */

#header {
    top: .5em;
    position: relative;
    height: 10pt;
    background: #ddd;
    width: 12em;
    margin: 10pt 0;
}

h1 {
    color: #333;
    position: absolute;
    bottom: -5pt;
}

#wrap {
    margin: 30px 0 0 50px;
}

#nav {
    position: relative;
    top: 2em;
    display: block;
}

#nav li {
    display: inline;
}

#nav li a {
    background: #ddd;
    padding: 3px 12px;
    text-decoration: none;
}

#nav li a.here {
    background: #ddf;
}

.project {
    position: relative;
    margin: 30px 0;
    padding: 30px 30px 30px 0;
    border-bottom: thin dotted #555;
    overflow: hidden;
}

h2 {
    color: #333;
    margin-bottom: 22pt;
}

.meta {
    position: absolute;
    top: 4em;
    left: 0;
    color: #777;
    font: 10pt/10pt normal "Gill Sans", "Helvetica", "Arial", sans-serif;
}

.meta a,
.meta a:link,
.meta a:visited { color: #777; text-decoration: none;}
.meta a:hover,
.meta a:active { color: #8aa;}

.meta span { margin-right: 1em; }

.thumb { 
    float: left; 
    margin: 1px 10pt 3pt 0;
    background: #ddd;
    border: 3px solid #ddd;
}

.shots {
    float: left;
    margin-top: 10px;
}

.shots li { display: inline; }

.shots img {
    margin-right: 6px; padding: 3px;
    border: thin solid;
}

.shots a img, .shots a:link img, .shots a:visited img {
    border-color: #aa2;
}

.shots a img, .shots a:hover img, .shots a:active img {
    border-color: #0aa;
}

/* Typography */

p {
    margin-bottom: 1em;
    line-height: 1.2;
}

#header {
    font: 28pt/32pt normal "Palatino", "Palatino Linotype", Georgia, serif;
}

h2 {
    font: 16pt/20pt normal "Gill Sans", "Helvetica", "Arial", sans-serif;
}

.rationale {
    font-family: "Palatino", "Palatino Linotype", Georgia, serif;
    font-style: italic;
    line-height: 1.32;
}

.rationale em { font-style: normal; color: #666;}

hr {
    height: 0;
    border-top: thin dashed #000;
}

/* Links */

a, a:link, a:visited {
    color: #111;
    text-decoration: underline;
}

a:hover, a:active {
    color: #8aa;
    text-decoration: none;
}

em { font-style: italic; }
em em { font-style: normal; }