body {
            margin: 0;
            padding: 0;
            background: #cacacc;
            text-align: center;  /* IE hack to centre main container */
            font-family: 'Lucida Grande', 'Trebuchet MS', 'Bitstream Vera Sans', Sans-Seri
f;
font-size: 10pt;
          }

          /* text formatting styles */

          h1, h2, h3 {
          font-family: 'Lucida Grande', 'Trebuchet MS', 'Bitstream Vera Sans', Sans-Seri
f;
}
          h1 {
            padding-bottom: 20px; 
            padding-top: 20px; 
            margin-bottom: 0px; 
            margin-top: 0px; 
            font-weight: bold; 
            font-size: 20pt; 
            text-align: center;
          }
          h2 {
            border-bottom: 1px solid black; 
            padding-bottom: 0px; 
            padding-top: 0px; 
            margin-bottom: 20px; 
            margin-top: 0px; 
            font-size: 14pt; 
          }
          h2 a {
            border-bottom: 3px solid black;
            padding-bottom: 0px;
            margin-bottom: 0px;
          }
          h2 span.h2 {
            border-bottom: 3px solid black;
          }
          /* h3 and h3 a are deprecated, use dt.title instead */
          h3 {
            border-bottom: 1px solid black; 
            font-size: 12pt;
          }
          h3 a {
            padding-bottom: 0px;
            margin-bottom: 0px;
          }
          dt.title {
            font-family: 'Lucida Grande', 'Trebuchet MS', 'Bitstream Vera Sans', Sans-Seri
f;
font-size: 12pt;
            border-bottom: 1px solid black; 
            margin-top: 12pt;
            margin-bottom: 12pt;
          }    
          dt.title a {
            padding-bottom: 0px;
            margin-bottom: 0px;
          }
          p, dt, dd, li, td, th {
            text-align: justify;
/*            font-size: 10pt;*/
            line-height: 16pt;
          }
          p {
            margin: 0;
            margin-left: 3em;
            margin-top: 15px;
            margin-bottom: 15px;
          }
          p.callout {
            background: #eeeeee;
            margin: 0;
            margin-left: 4em;
            margin-right: 1em;
            border: solid black 1px;
            padding: 10px;
            -moz-border-radius: 8px;
          }
          p.callout a:hover {
            background: white;
          }
          a {
            text-decoration: none;
            font-weight: bold;
            padding: 2px;
            margin: -2px;
          }
          a:link {
            color: #339933;
          }
          a:hover {
            background: #dddddd;
          }
          a:active {
            color: #006600;
          }
          a:visited {
            color: #006600;
          }
          img {
            border: none;
          }

          /* Containers */

          #container {
            background: white url('/i/left.gif') repeat-y top left;
            max-width: 50em;
            width: 50em;  /* really want 'auto' - see next rule */
            text-align: left;  /* undo IE centering hack */
            margin: 0 auto
          }
          html>body #container {
            width: auto;
          }
          #innercontainer {
            background: url('/i/right.gif') repeat-y top right;
          }
          #content {
            padding-left: 120px;
            padding-right: 40px;
            background: url('/i/topleft2.gif') no-repeat top left;
          }
          #footer {
            position: relative;  /* Needed for Safari */
          }
          #footerc {
            text-align: center;
            font-size: 8pt;
            color: #999999;
            border-top: solid #ccc 1px;
            margin-left: 20px;
            margin-right: 20px;
            padding-top: 10px;
            padding-left: 100px;
            padding-right: 40px;
          }
          #topm {
            height: 20px;
            background: url('/i/top.gif') repeat-x top left; height: 20px
          }
          #topl1 {
            background: url('/i/topleft1.gif') no-repeat top left; height: 20px
          }
          #topr {
            background: url('/i/topright.gif') no-repeat top right; height: 20px
          }
          #botm {
            height: 20px;
            background: url('/i/bottom.gif') repeat-x top left; height: 20px
          }
          #botl {
            background: url('/i/bottomleft.gif') no-repeat top left;
          }
          #botr {
            background: url('/i/bottomright.gif') no-repeat top right;
          }
          #foaf {
            float: right;
            margin: 10px 20px 0 0;
          }
          div.spacer {
            clear: both;
          }

          /* Navigator */

          #navigator {
            position: absolute;  /* set it to absolute for IE, but see next rule */
            top: 42px;
            padding: 0;
            border: 0px none;
            list-style-type: none;
            z-index: 99999; margin-left:-130px; margin-right:0; margin-top:0; margin-bottom:0
          }
          /* this next rule will not be read by IE Win v4.0-6.0 */
          html>body #navigator {
            position: fixed;  /* we really want it to be fixed to the viewport like this */
          }
          /* background and height are rules for IE only (see next rule) */
          #navigator li {
            background: ;
            height: 20px;  /* need some height here to scale the dot in IE, but not fixed like this because then you can't zoom */
            filter:progidDXImageTransform.Microsoft.AlphaImageLoader(srcigreen_dot_50.png, sizingMethodscale;
            padding-right: 1px;
            border-right: 2px solid #f90;
            width: 6em;
            max-width: 130px; margin-left:0px; margin-right:2px; margin-top:0px; margin-bottom:4px
          }
          /* this is what we really want */
          html>body #navigator li {
            background: url('/i/green_dot_50.png') top left;
            height: inherit
          }
          #navigator li a {
            display: block;
            margin: 0;
            padding-right: 5px;
            font-family: 'Lucida Grande', 'Trebuchet MS', 'Bitstream Vera Sans', Sans-Seri
f;
font-weight: bold;
            font-size: 10pt;
            color: black;
            text-decoration: none;
            line-height: 20px;
            text-align: right;
          }
          #navigator li a:link {
            color: inherit;
          }
          #navigator li a:visited {
            color: inherit;
          }
          /* special rule for IE only */
          #navigator li a:hover {
            background: transparent; /* cancel the grey hover link background for the navigator (reqd by IE) */
            color: #f90;  /* change the text colour bacause IE can't change the background */
          }
          /* this is what we really want */
          html>body #navigator li a:hover {
            color: black;  /* i.e. don't change the text colour */
          }
          #navigator li:hover {
            background: #32ce32;
          }
          #navigator li.spacer {
            line-height: 19px;
            border-right: 0px none;
            background: ;
            filter: none
          }
          html>body #navigator a {
            /* When we are in a section we specify that there is a px solid black border on the
            right of the link.  We need a placeholder there so that the links don't move by 1px.
            IE can't handle transparent borders. */
            border-right: 1px solid transparent;
          }

          div.thumb {
            float: left;
          }
          div.thumb p {
            text-align: center;
            margin: 10px 10px;
            max-width: 200px;
          }
          div.thumb a:hover {
            background: transparent;
          }