body {
  margin: 1em;
  border: none;
  padding: 0;
  font-family: "Hoefler Text", "Georgia", "Times", "Times New Roman", serif;
  background-color: white;
  /*background-color: #E0E2E4;*/
  color: black;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lucida Grande", sans-serif;
  font-weight: bold;
  text-align: left; 
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0.1em 0.2em gray;
}
h1 {
  text-align: center;
}
h2 {
  border: 1px solid #BBB;
  padding: 0 0.5em;
  background: #EEE;
  color: black;
}
h3 {
  padding: 0 0.6em; /* less disconnected left-marginwise from the h2s */
  border-bottom: 1px solid #BBB;
}

h6 { font-size: 0.9em;   max-width: 45.0em; }
h5 { font-size: 1.025em; max-width: 39.0em; }
h4 { font-size: 1.1em;   max-width: 38.0em; }
h3 { font-size: 1.2em;   max-width: 38.0em; }
h2 { font-size: 1.5em;   max-width: 40.5em; }
h1 { font-size: 2em;     max-width: none;   }

.toclist > li {
  font-size: 105%;
}

ul, ol, dl, table { padding: 0 3em; }
p, address        { padding: 0; }

/* pre-outer is so we can have a consistent max-width for pre even though its em size might be different due to browser styles. */

p, address, ul, ol, dl, table, pre, .pre-outer, blockquote {
  margin: 1em auto;
}
p, address, dl, .pre-outer { max-width: 38em; }
ul, ol, blockquote         { max-width: 35em; }
.pre-outer > pre { margin: 0 }

li > table, li > p {
  margin: 0.6em 0;
  padding: 0;
}

.thumbnail-paras, .thumbnail-paras p {
  max-width: 44em;
}

.content-adjunct {
  margin: 0.5em;
  border: 1px solid #BBB;
  padding: 0.5em;
  float: right;
  display: table;
  border-spacing: 0.5em;
  max-width: 50%;
}

.thumbnail-paras {
  border-top: 1px solid #BBB;
  padding-top: 1.2em;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.thumbnail-paras + *, .thumbpar + * {
  clear: both;
  padding-top: 1.2em;
}

ul.thumbnail-paras > li {
  display: block;
}

.thumbnail-paras > dt, .thumbnail-paras > dd, .thumbnail-paras > li {
  clear: both;
}

.thumbnail-row, .image-row {
  text-align: center;
  max-width: none;
}

dd { margin-top: 0; margin-bottom: 1em; }
dd p.first { margin-top: 0; }
dd p.last { margin-bottom: 0; }

dfn { font-style: italic; }


.footer {
  clear: both;
  margin: 1em -0.7em -0.7em -0.7em;
  border: 1px solid #BBB;
  padding: 0.5em;
  color: black;
  background-color: white;
}
.upLinkList {
  display: block;
  max-width: none;
  margin: 0;
  border: none;
  padding: 0;
  text-align: center;
}
.upLinkList > li {
  display: inline;
}
.upLinkList > li:before {
  content: " \bb  ";
}
.upLinkList > li:first-child:before {
  content: "";
}

/* --- Links --- */

a:link,        a:link:hover     { color: #22F; }
a:visited,     a:visited:hover  { color: #72A; }
a:link:active, a:visited:active { color: #F22; }

a:link        .thumbnail                              { border-color: #22A; outline-color: #22A; }
a:visited     .thumbnail, a:visited:hover  .thumbnail { border-color: #627; outline-color: #627; }
/*:link:hover  .thumbnail                             { border-color: #22F; outline-color: #22F; }*/
a:link:active .thumbnail, a:visited:active .thumbnail { border-color: #F22; outline-color: #F22; }


/* --- Kinds of images --- */

.badge {
  border: none;
  vertical-align: middle;
}

.thumbnail {
  margin: .3em;
  border: none;
  padding: 0;
  box-shadow: 0px .1em .3em #888; 
  -webkit-box-shadow: 0px .1em .3em #888;
  -moz-box-shadow: 0px .1em .3em #888;
}
a:link .thumbnail, a:visited .thumbnail {
  border: none;
  padding: .1em;
  background-color: white;
}
a:link .thumbnail { /* no box-shadow-color property 'cos there are multiple shadows :( */
  box-shadow: 0px .1em .3em #22A; 
  -webkit-box-shadow: 0px .1em .3em #22A;
  -moz-box-shadow: 0px .1em .3em #22A;
}
a:visited .thumbnail {
  box-shadow: 0px .1em .3em #627; 
  -webkit-box-shadow: 0px .1em .3em #627;
  -moz-box-shadow: 0px .1em .3em #627;
}
a:link:hover .thumbnail, a:visited:hover .thumbnail {
  outline: 2px outset;
}
a:link:active .thumbnail, a:visited:active .thumbnail { 
  outline: 2px inset;
}

.parthumb {
  float: left;
}

.filesmall {
  border: none;
  vertical-align: middle;
  margin: .1em;
}
.bigimage {
  margin: .4em;
  border: 1px solid #BBB;
}

.embed-block {
  display: table;
  margin: 1em auto;
  border: 1px inset #E0E2E4;
  padding: 0;
  border-spacing: 0;
}
.embed-block.flexible {
  display: block;
}

.embedded-main, object.embedded-main embed {
  margin: 0;
  border: none;
  padding: 0;
  vertical-align: middle;
}
.embedded-main.flexible, object.embedded-main.flexible embed {
  width: 100%;
  /* height: auto would be appropriate here, but implementations aren't doing CSS 2.1 yet */
}

/* --- Special rules --- */

/* #picture-of-kpreid-paragraph {
  text-align: center;
}
#picture-of-kpreid-paragraph object, #picture-of-kpreid-paragraph img, */
h1 .picture-of-kpreid {
  margin: 0;
  vertical-align: middle;
  border: 1px solid;
  padding: 1px;
}