* { margin: 0; }
   body { position: relative; height: 100%; background: #111; color: #FFF; font: 12pt Arial,sans-serif; }
   
   #splash { position: fixed; top: 0; left: 0; height: 100%; width: 300px; 
             background-image: url('layout/splash.jpg'); background-repeat: no-repeat; background-size: cover; 
             border: 0; border-right: 2px solid #666; color: #DDD; z-index: 6; } 
   #splash h1 { position: absolute; bottom: 246px; left: 14px; line-height: 1em; 
         transform: rotate(-90deg); width: 530px; font: italic 33pt Georgia,serif; 
         text-shadow: -1px 0 #111, 0 1px #111, 1px 0 #111, 0 -1px #111; }
   .container { width: 600px; border: 1px solid #888; border-left: 2px; padding: 20px 40px; 
         margin-left: 302px; background: #000 url('images/marble-background.jpg') fixed; }

  a { text-decoration: none; color: #789; }
  p { text-align: justify; }

  .entry {  margin: auto; border: 1px solid #FFF; z-index: 3; }
  .top        { width: 580px; background: #600; padding: 5px 10px; position: relative; }
  .gb-id      { position: absolute; top: 99px; right: -120px; width: 222px; height: 22px; transform: rotate(90deg);  opacity: 0.7; z-index: 1; }
  .top span   { word-spacing: 1px; color: #9AB;  margin: 0px 6px; font-style: italic; }
  .middle     { width: 600px; height: 132px; background: #333; border-width: 0px 1px; position: relative; }
  .icon       { border: 3px solid #800;   display: block; float: left; margin: 12px;  }
  div.field   { margin-left: 123px; padding: 9px 7px 0px 7px ; font: 11pt Verdana,sans-serif; border-bottom: 1px dotted #555;   }
  div.field span { font-weight: bold; margin-right: 9px; }
  .comments   { width: 580px; background: #600; padding: 10px;  clear:both;  text-align: justify; }

  .reply { width: 600px; margin: auto;  opacity: 0.77; background: #111 url('/archen/guestbook/files/images/gb-archen.jpg') no-repeat; border: 1px solid #888; border-width: 0px 1px 1px 1px; min-height: 133px; }
  .reply-text { padding: 4px 10px 6px 168px; font: 11pt Arial,sans-serif ; color: #EEE; margin-left: auto;  }
  .reply a { color: #944; }
  .i-r-archen { display: block; font: italic 22px Georgia,serif; border-bottom: 3px dotted #666; padding-left: 168px; letter-spacing: 0.33em; color: #999; }
  .mori { background: #111 url('/archen/guestbook/files/images/gb-mori.jpg') no-repeat; min-height: 166px; opacity: 0.81; }

  div.sp { width: 600px; border-top: 2px solid #600; margin: 20px auto; }

  div.side-nav { position: fixed; bottom: 0; left: 0; width: 234px; z-index: 9; opacity: 0.8; }
  div.side-nav a { display: inline-block; width: 166px; border: 1px solid #FFF;  margin: 5px; background: #800; color: #FFF;  font-weight: bold;  padding: 1px 32px; margin: 11px; }    
  div.side-nav a:hover, div.page-nav a:hover { background: #333; }

  div.page-nav { text-align: center; margin-bottom: 22px; }
  div.page-nav a { display: inline-block; width: 166px; border: 1px solid #FFF;  margin: 5px; background: #800; color: #FFF;  font-weight: bold;  padding: 1px 32px; margin: 11px; }    

  .the-end { background: #FFF; width: 592px; margin: auto; border: 6px double #300; }
  .the-end img { float: left; margin: 0px 5px 0px 3px; }
  .the-end p {  color: #333; clear: none; margin: 1em; }
  .the-end br { clear: both; }
  .btn { border: 1px solid #FFF;  margin: 0px 9px; background: #800; color: #FFF;  font-weight: bold;  padding: 4px 44px; }