/* section margins */

html { margin: 0; padding: 0 }
body { margin: 0; padding: 0 0 1.6em }

#wrapper {
  margin: 0 auto 0;
  width: 96%;
  max-width: 61em;
  min-width: 55% }
  
#leftwrapper700 {
  margin: 0 auto 0 10px;
  width: 96%;
  max-width: 700px }


* html #wrapper { width: 65% }
* html #leftwrapper700 { width: 700px }

/* fonts */

p.topline, p b.phead {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold }

h1,h2,h3,h4,div#statcounter {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal }

div#statcounter {font-weight: bold }

p,ol,ul,dl,.caption,td {
  font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana,"MS Reference Sans Serif","Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Lucida,"DejaVu Serif","Bitstream Vera Serif",Geneva,Tahoma,sans-serif;
  font-weight: normal }
  
/* font sizes */

body { font-size: 62.5% }

h1 { font-size: 3.0em } /* 30px */
h2 { font-size: 2.1em } /* 21px */
h3 { font-size: 1.8em } /* 18px */
h4 { font-size: 1.6em } /* 16px */

div#statcounter { font-size: 1.2em } /* 12px */

div#wrapper p, div#wrapper ul, div#wrapper ol, div#wrapper dl, div#wrapper td { font-size: 1.4em } /* 14px */

p b.phead { font-size: 1.214em } /* 1.214 * 14 = 17px */  
p span.attention, p span.details { font-size: 0.857em } /* 0.857 * 14 = 12px */

div#wrapper ul ol, div#wrapper ul ul, div#wrapper ol ul, div#wrapper ol ol, div#wrapper ul p, div#wrapper ol p {
  font-size: 1em } /* 1 * 14 = 14px */

/* vertical spacing */

p,ol,ul,dl  { margin: 1.286em 0; line-height: 1.286em } /* 1.286 * 14 = 18 px */

div.index p { margin: 1em 0;     line-height: 1em     } /* 1 * 14     = 14 px */
p.topline   { margin: 0;         line-height: 1.8em   } /* 18px */
div#statcounter { margin: 1.8em 0 0 0 }


table.data td { padding: 0.06em 0.5em 0.23em; line-height: 1.12 }

.caption { padding: 4px 4px 7px }

/* colours */

body          { color: #000; background: #f0f0f0 }
h1,h2,h3,h4   { color: #009; background: #f0f0f0 }
.oldiewarning { color: #900; background: #f0f0f0 }
.details      { color: #00c; background: #f0f0f0 }
.attention    { color: #f00; background: #f0f0f0 }
.standout     { color: #f00; background: #f0f0f0 }
.info         { color: #f00; background: transparent }

/* alignment */

p,ol,ul,dl,td { text-align: left   }
td.caption    { text-align: center }

h1 { text-align: left }
h1.short { text-align: center }
#leftwrapper700 h1.short { text-align: left }

/* links */

a:link    { color: #00f; background: #f0f0f0; text-decoration: none }
a:visited { color: #c0c; background: #f0f0f0; text-decoration: none }
a:hover   { color: #fff; background: #66c;    text-decoration: none }

a:link    b { color: #12c; background: #f0f0f0; text-decoration: none }
a:visited b { color: #707; background: #f0f0f0; text-decoration: none }
a:hover   b { color: #fff; background: #66c;    text-decoration: none }

/* misc */

.oldiewarning { display: none }
.hidescreen   { display: none }
#statcounter  { clear: both }

/* topline */

p.topline {
  margin: 0;
  padding: 0.5em 0;
  line-height: 3.4em;
  color: #000;
  background: #e1e9fc;
  background-image: url(recbg.jpg);
  border-top   : 2px solid #000;
  border-bottom: 3px solid #000 }
  
span.toplinks { font-size: 1.7em }           /* 17 px */
span.toplogo, span.info { font-size: 2.4em } /* 24px */

.toplinks a:link    { color: #000; background: transparent; text-decoration: none }
.toplinks a:visited { color: #000; background: transparent; text-decoration: none }
.toplinks a:hover   { color: #fff; background: #000; text-decoration: none }

/* headings */

h1.var1 {
  margin: 0.9em 0 0.7em;
  font-size: 2.4em;
  letter-spacing: 1px;
  font-weight: bold;
  color: #009;
  background: #f0f0f0 }

h1.var2 {
  margin: 0.9em 0 0.6em;
  letter-spacing: 1px;
  font-weight: bold;
  color: #009;
  background: #f0f0f0 }

h2.sectionhead { margin-top: 1.7em }

h2.var1 {
  text-align: left;
  font-size: 1.6em; /* 16px */
  line-height: 1.5em; /* 24px */
  padding: 0;
  margin: 1.375em 0; /* 22px */
  color: #009;
  background: #f0f0f0;
  border-bottom: 2px solid #009;
  border-top: 2px solid #009;
  font-weight: bold }

h2.var2 {
  text-align: left;
  font-size: 1.14em;
  color: #f00;
  background: #f0f0f0 }

h2.var3 {
  text-align: left;
  font-size: 1.14em;
  color: #000;
  background: #f0f0f0 none }