/* General */
html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
}
li { margin-bottom: 5px; }
h2 { font-size: 20pt; color: #009fd1; }
h3 { font-size: 15pt; color: #ef9b20; }
.quote { color: #efd070; }
p.quote { padding-left: 15px; }
a { color: #ef9b20; }

.copy { text-align: center; font-size: 10pt; }

/* Header */
h1.intro { display: none; }
img.intro, img.low {
  display: block;
  margin: auto;
}
.nav { text-align: right; font-size: 17pt; margin-bottom: 5px; }
.nav.port { font-size: 11pt; font-style: italic; }
.nav a { text-decoration: none; }
.nav a:hover { font-weight: bold; }
#portfolio .nav.port { text-align: center; }

/* Page wrapper */
div#wrap {
  min-height: 100%;
  padding: 0;
  background: url(grunge1-top.jpg) repeat-x, url(grunge1.jpg) 0 350px;
}
div#content {
  width: 1000px;
  min-height: 800px;
  margin: auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 200px 20px rgb(0, 0, 0);
  color: white;
  font-family: Lato;
  font-size: 13pt;
}

/* Portfolio */
#resolution { float: right; margin-left: 15px; margin-bottom: 15px; }

#portfolio { font-size: 13pt; }
#portfolio h2 {
  margin-top: 60px;
  text-align: center;
}
.description { font-size: 12pt; }

.collage img, .collage div {
  float: left;
  margin-bottom: 1px;
}
.mr { margin-right: 1px; }
.clear { clear: both; }

.convert { margin-left: 15px; font-style: italic; color: #009fd1; }
.convert span { font-size: 20pt; }

#collage { text-align: center; font-size: 60pt; }