body {
  font-size: 110%; margin: 0px; background-color: #f0d0a0; height: 100%;
  font-family: "Times New Roman", Serif; }
hr {
  height: 2px; width: 95%; clear: both; 
  color: #F9D9B0; } 
h1 {
  font-size: 160%; text-shadow: 0.6px 0.6px #000000;
  color: #990000; text-align: center; }
h2 {
  font-size: 120%; line-height: 100%; text-shadow: 0.6px 0.6px #000000;
  color: #990000; text-align: center; padding: 0px 20px; }
h3 {margin: 0px; padding: 0px 5px; }
h4 {text-align: center; margin: 0px 0px;}
p {text-align: justify; margin: 5px;}
blockquote, dl {font-size: 90%; margin: 2px 20px;} 
img { display: block; width: 100%; }
ins { font-size: 95%; color:gray; text-decoration: none; }
select { font-size: 100%; }
input { font-size: 100%; }
q:before { content:"\201C"; }
q:after { content:"\201D"; }
a:link { color: #990000; }
a:visited { color: #666666; }
a:hover { color: #FF0000; }
a:active { color: #990000; }
td { position: relative; }

#picDisplay {
  top: 10%; left: 10%; height: 80%; width: 80%; position: fixed; z-index: 2; 
  margin: auto auto; display: none; overflow: scroll; padding: 0px 0px;
  border: 4px solid #990000; background-color: #F9D9B0; }
#picButton { position: fixed; z-index: 2; top: 12%; right: 12%; }
#picButton td { 
  border: 1px solid darkred; background-color: #F9D9B0; 
  font-weight: bold; text-align: center; cursor: pointer; }
#bibliography { font-size: 90%; color: #333333;}
#navbarframe { height: 36px; width: 100%; border: none; overflow: hidden; }
#email_image { display: inline; position: relative; top: 5px; height: 2.7ex; width: 27.0ex; }

.wrapper { width: 100%; }
.bpan { width: 120px; background-image:url("border01.png"); background-repeat: repeat-y; }
.mpan { width: auto;  margin: 0px; padding: 0px 20px; }

  .foreword {
    border: 1px solid #999999; width: 90%; font-style: italic; margin: 10px auto;
    padding: 10px 10px; background-color:#F9D9B0; text-align: justify; }
  .innerhr { 
    border: 0; height: 1px; background: #333; 
    background-image: linear-gradient(to right, #ccc, #333, #ccc);}
  .left { float: left; margin: 0 0.5em 0 0.2em; }
  .right { float: right; margin: 0 0.2em 0 0.5em; }
  .center { margin: 0 auto; width: 94%; }
  .bottom { position: absolute; bottom: 0; }
  .image { padding: 0; border: 2px solid #999999; background-color: #FAE5C5; }
  .image td { border: inherit; padding: inherit; }
  .red { border-color: #CC0000; cursor: pointer; }
  .redtext { color: darkred; }
  .text { padding: 4px; border: 2px solid #C0A090; background-color: #F9D9B0; }
  .text td { border: inherit; padding: inherit; }
  .caption { text-align: center; padding: 4px; border: 2px solid #C0A090; background-color: #F9D9B0; }
  .caption td { border: inherit; padding: inherit; }
  .trans { font-size: 90%; color: gray; font-style: italic; }
  .big { font-size: 110%; font-weight: bold; }
  .small, .tiny { font-size: 90%; }
  .labels td { 
    text-align: right; color: blue; font-size: 1em; font-weight: bold;
    position: relative; top: 1.5em; right: 0.3em; }
  .hidden { display: none; }
  .minipic { display: inline; position: relative; top: 3px; height: 1.2em; width: 0.8em; }
  .paypalbtn { height: 68px; margin-left: 20px; width: 100%; border: none; }
  .paypalbuybtn { display: inline; position: relative; top: 3px; height: 31px; width: 62px; }
  .closebtn { height: 19px; width: 19px; }
  .tabular td { border:1px solid #F9D9B0; vertical-align: bottom; padding: 2px 5px;}
  .container { border: 1px solid #990000; padding: 0px; font-size: 1.5em; }
  .advert { 
    width: 24%;  text-align: center; border-collapse: collapse; 
    font-style: normal; border: 1px solid black; background-color: white; }
  .advert a:link, .advert a:visited { color: lightgray; }
  .advert a:hover, .advert a:active { color: white; }
  .rune { 
    background-image: url("nordic-medieval-runes.png"); 
    background-size: 30em 10em; padding: 0.1em 0.5em; }

  @font-face { font-family: hnias-font; src: url(hnias.ttf); }  
  .runic { 
    font-family: hnias-font; font-size: 1.2em; font-style: normal; 
    display: inline; position: relative; top: 2px; }

/* portrait override */
@media (orientation: portrait) {
  .bpan { width: 20px; background-image: none; }
}

/* mobile override */
@media (pointer:none), (pointer:coarse) {
  body { font-size: 10px; }
  #email_image { top: 3.5px; }
  .small { font-size: 80%; }
  .image, .caption, .text { border-width: 1px; }
  .runic { display: inline; position: relative; top: 2px; }
  .paypalbtn { height: 13px; margin-left: 0px; }
  .paypalbuybtn { height: 20.3px; width: 40.6px; }
  .closebtn { height: 14px; width: 14px; }
}

/* portrait mobile override */
@media (pointer:none), (pointer:coarse) and (orientation: portrait) {
  .mpan { padding: 0px; }
  .bpan { width: 5px; }
  .tiny { font-size: 60%; }
}
/* landscape mobile override */
@media (pointer:none), (pointer:coarse) and (orientation: landscape) {
  .mpan { padding: 0px; }
  .bpan { width: 75px; background-size: contain; }
  .tiny { font-size: 75%; }
}