body, html, p, td { margin: 0; padding: 0; border: 0 }

@font-face {
    font-family: 'FranklinGothicExtraCond';
    src: url('/fonts/FranklinGothic/franklin_gothic_extra_condensed-webfont.eot');
    src: url('/fonts/FranklinGothic/franklin_gothic_extra_condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/FranklinGothic/franklin_gothic_extra_condensed-webfont.woff') format('woff'),
         url('/fonts/FranklinGothic/franklin_gothic_extra_condensed-webfont.ttf') format('truetype'),
         url('/fonts/FranklinGothic/franklin_gothic_extra_condensed-webfont.svg#FranklinGothicExtraCond') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* TODO: switch to Arial? */
body {
  font: 86%/1.4em Verdana, Arial, sans-serif; 
  color: white; background: black;
  padding-bottom: 16px;
}

/* the main content div */
#content {
  margin: 0 auto 0 auto;
}

/* td */
td { vertical-align: top; }
td.text-column { width: 400px; }

/* p */
p { margin-top: 0.8em; }
p:first-child, p.tight { margin-top:0; }
p.more-space { margin-top: 1.6em; }

/* links */
/* TODO: make this all links (not p a), and fix where necessary */
/*  -- nope. can't do this unless hover uses only text decoration */
/*  -- problem is image links */
p a, li a, h1 a { 
  color: white; font-weight: bold;
  text-decoration: none; border-bottom: 1px dotted gray;
}
h1 a { border-bottom: 0; font-weight: normal }
p a:hover, li a:hover { background-color: #555; border-bottom: 1px solid gray; }
a img { border: none; }
a.plain { text-decoration: none; border: none; }
a.plain:hover { background-color: transparent; border: none; }

/* headers */
/* TODO: reconcile head & subhead with h1 */
h1, h2 {
  font:1.875em/100% FranklinGothicExtraCond, Arial, sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  margin: 1em 0 0 0;
}
h1:first-child, h2:first-child { margin-top:0 };
.head, .subhead {
  font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;  
}
h2 {
  text-transform: none;
}
.head {
  font-size: 1.5em;
  line-height: 1.3;
  letter-spacing: .08em;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: .2em;
}
.subhead {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: .2em;
}

/* navbar */
#navbar { text-align: center; margin: 0 auto 2em auto; /* TRBL */ }
#navbar img#logo { margin-bottom: 4px; }
#navbar h1 { margin-top:.8em; font-size:1.6em; font-weight:normal}
#navbar .menu { margin-top:0; }

/* photos */
.photo img, .photo iframe {
  border: 1px solid #222;
}

.photo .credit {
  color: gray;
  font: .8em Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: right;
  margin: 1px 0 0 3px;
  float: right;
}
.photo .caption {
  font-size: .9em;
  line-height: 1.3;
  margin-top: 0.2em;
}

/* cheats */
.all-caps {
  text-transform:uppercase;
}
.center {
  text-align:center;
}