body {
  margin: 1% 2% 0 1%;
  padding: 0;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 80%;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
  xfont-family: "Lucida Grande","Lucida Sans Unicode","Eras Medium ITC","DejaVu Sans",Helvetica,Verdana,sans-serif;
  }



/*** colours -------- */
/* colours
light fawn    background-color: #ffff9b;     color: #000064;
ligh  lilac   background-color: #fae6ff;     color: #051900;
light green   background-color: #c8ffc8;     color: #370037;
*/
body { color: Black; 
      background-color: #f8f8f0;   }

div.CHIHead { color: white;
       background-color: #008040; }

div.menu0, div.map0 {
  /* allow to merge into background */
}
a.menu0, a.map0 { 
  background-color: #e2f7ff; // #f0fff0;
  xcolor: #051900;  /* leave to hover */
  border-color: #aaaaaa;
}
a.menu0#current0 {
  background-color: #ffffbb;
  color: color: #000064;
}
a.menu1, a.map1 {
  color: #370037;
  background-color: #ffffbb;
  xcolor: color: #000064;  /* leave to hover */
  border-color: #aaaaaa;
}
a.menu1#current1 {
  xborder-color: #ff8080;
  background-color: #efefef;
  xcolor: white;
}

a.menu2, a.map2 {
  border-color: #ff8080;
  background-color: #efefef;
  xcolor: white;
}

a.menu2#current2 {
  xborder-color: #ff8080;
  background-color: white;
  xcolor: white;
}

a:active {
  color: #ffffff;
  background-color: #000000;
}
a:link {
  zcolor: #800000;
}

a:visited {
  color: #000080;
}
a:hover {
  color: #ff0000;
}

h1 {color: #008040;}
div.strap {color: #008040;}
p.donate {color: #000000;}
h2 {color: #008040;}
h3 {}
h4, h5 {color: #404080;}
strong { color: red; }

div.area1 {
  border: 1px solid #cccccc;
  background-color: #ffffbb;
  color: #000064;
  padding: 2% 10% 2% 10%;
}
div.area2 {
  border: 1px solid #cccccc;
  background-color: #e2f7ff;
  color: #051900;
  padding: 2% 10% 2% 10%;
}
div.area3 {
  border: 1px solid #cccccc;
  background-color: #c8ffc8;
  color: #370037;
  padding: 2% 10% 2% 10%;
}
div.quote {
  color: #000080;
  padding:  0% 5% 1% 5%;
}

/******************************************************************* */
/** shape ********************************************************** */

/** the variation is getting so small maybe we should remove it ? */
div.CHIAll{
  max-width : 1100px;
  min-width : 730px;
}

h1 {
  margin-left: -3.5em;
  margin-right: auto;  /* needed for ie8, why ??? */
}
h2, h3, h4 {
  margin-left: -4%;
}

div.strap {
  zfloat: right;
  font-size: 100%;
  font-weight: bold;
  font-style: italic;
  text-align: right;
  margin-top: 0.3em;
  line-height: 1.30em;  /* stop chopped descenders IE bug */
}

div.flashhead {
  color: #000000;
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 1em;
}

hr.flash {
  width: 100%; 
  height: 2px;
  margin-bottom: 0.6em;
}

h1 {
  width: 500px;
  font-size: 150%;
  font-weight: bold;
  text-align: left;
  margin-top: 0.1em;
  line-height: 1.2em;  /* stop chopped descenders IE bug */
}
h2 {
  font-size: 120%;
  text-align: left;
  clear: left;
}

h4, h5 {
  font-size: 110%;
  margin-top: 1em;
  margin-bottom: 0.5em;
  direction: ltr;
  widows: 2;
  orphans: 2;
}
dt {
  font-weight: bold;
  margin-top: 1em;
}
dd {
}
html {
  overflow: -moz-scrollbars-vertical;
}

sup {font-size: 65%; xline-height: 125%}

/**
helpful comments gettting around IE6 bugs 
position: relative;  http://archivist.incutio.com/viewlist/css-discuss/80170
display: inline;      ???
use div.CHIImage etc etc rather than div[type=CHIImage], 
and class/id= rather than type= becuase of css selector limitations 
**/

div.CHIImage, div#index {
  margin-left: -255px;
  width: 240px;
  float: left;
  display: inline;
  position: relative;
}

div.CHITranslate {
  margin-left: -255px;
  margin-top:-25px; 
  margin-bottom:-25px;
}

div.CHIContent {
  border-style: none;
  margin: 0 0 0 255px;
  text-align: justify;
  line-height: 1.2em;
  padding: 0;
  border: 0;
}

div.CHIMain {
  border-style: none;
  margin: 0 255px 0 255px;
  text-align: justify;
  line-height: 1.2em;
  padding: 0;
  border: 0;
}

div.CHIImage img {
  float: right;
}

div.latest {
    border: 0px none ; 
    padding: 10px; 
    background-color: rgb(230, 230, 230); 
    width: 90px; 
    float: right;
    text-align: left; 
    display: inline; 
    position: relative;
}

div.latest p {
  font-size: 90%;
  margin: 0 0 1em 0;
}

div.nolatest {
    margin: 0pt 125px 0pt 0pt;
}

/* this compensates for the fact that CSS defines a line-height
rather than a spacing, by taking the extra off the first line of para */
div.CHIContent > p {margin-top: -0.2em}

table {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: #ccc;
	border-collapse: collapsed;
}
table th, table td {
	border-width: 1px;
	padding: 3px 3px 3px 3px;
	border-style: solid;
	border-color: #ddd;
}

div.map {
  list-style: none;
  font-size: 120%;
  display: inline;
}

div.menu0, div.map0 {
  padding: 9px 0px 9px 0px;
  text-align: center;
  line-height: 1em;
  margin: 0;
  border-width: 0;
}
div.map0 {
  float: left;
  padding: 0.1em;
}

a.menu0, a.map0 {
  padding: 1px 3px 1px 3px;
  margin:  0px 1px 0px 1px;
  text-decoration: none;
  xfont-family: "Arial Black",Arial,Helvetica,sans-serif;
  border-width: 0px 2px 2px 0px; 
  border-style: solid;
  font-size: 100%;
  font-weight: bold;
}

a.map0 {
  margin-bottom: 0.3em;
  display: block;
}

a.menu0#current0 {
  border-width: 2px 0px 0px 2px; 
  border-style: solid;
}

div.menu0end {
  margin: 0px 0 4pt 0px;
  padding: 0 0 0 0;
  border-width: 0;
  color: gray;
  background-color: gray;
  height: 2px;
  width: 100%;
  font-size: 1%; /* fix ie6 bug */
}

div.menu1, div.map1 {
  border-width: 0px;
  padding: 0px 0px 0px 0px;
  text-align: right;
}

div.map1 {
  padding: 0.2em;
}


a.menu1, a.map1 {
  padding: 1px 4px 1px 4px;
  margin:  0px 0px 0px 0.1em;
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif;
  border-width: 0px 2px 2px 0px; 
  border-style: solid;
  font-size: 85%;
  font-weight: bold;
}
a.menu1#current1 {
  border-width: 2px 0px 0px 2px; 
  border-style: solid;
}

div.menu1end, div.menu2end {
  display: none;
  xxheight: 0px;
}
div.menuend {
  height: 4px;
}

div.menu2, div.map2 {
  margin: 0.7em 0 0 0;
  border: 0em;
  padding: 0em;
  text-align: right;
}

div.endmap {
  height: 25em;
  width: 100%;
}

a.map2 {
  font-size: 80%;
}



a.menu2 {
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 85%;
  padding: 1px 4px 1px 4px;
  margin:  0px 0px 0px 0.2em;
  border-width: 0px 2px 2px 0px; 
  border-color: #ccc;
  border-style: solid;
}

a.menu2#current2 {
  border-width: 2px 0px 0px 2px; 
  border-style: solid;
}




a.sm {
  padding: 10px;
}

div.CHIHead {
  border: none;
  padding: 8px;
  margin-bottom: 0;
  font-weight: bold;
  font-family: Arial Black,Arial,Helvetica,sans-serif;
  font-size: 24px;
  text-align: center;
  line-height: 1em;

}

img {
  position: relative;
}
img.CHIHead {
  height: 70px;
  text-align: right;
}



/* for newsletter lists */
/* what do the borders and margins think they are doing in Firefox?
IE7 gets them right, it seems clear enough? */
div.news dl {
  margin: 0;
  padding: 0;
  border: 00;
}
div.news dt {
  margin: 0;
  padding: 0;
  border: 0
  font-weight: bold;
  float: left;
  /*clear: left;*/
  display: inline;
  width: 6em;
}
div.news dd {
  margin-left: 6em;
  padding: 0;
  border: 0;
/*font-style: italic;*/
}
div.news h4 a {
  margin-left: 2em;
}

div.news {
  margin-left: 5em;
}

/** .-------- special tags for the trustee page ---- 
 * tried to design this with style sheets, but the differences in box models between IE and Gecko mad it impracticable,
so I resorted to tables.
..
This page is fairly different from all the others, being very image heavy.
Therefore I reduced text width and increased text spacing, to make the text better match the images.
..
To keep 'standard' image placement to look as much as possible like other CHI pages, I used:
. margin-left on the table to force images to the left column
. margin-right on the images to force the space between the images and the text
. all spacings etc on the table at 0 to keep all the sizing information together here.
.
Because css uses line-height rather than line-spacing, 
the top line is displayed lower than we might expect.
This also requires a change in the paragraph margin-top (see above).)
.
. The margin-left on the trusttable should be the sum of the width and margin-right on the trustim.
.
I use a dummy row including a div.trustspace between each real table row to get vertical spacing.
.
This is in the lines below.
**/
div.trustspace { height: 1em; }
img.trustim { width: 240px; margin: 0.5em 15px 0px 0px; border-width: 0px; padding: 0px;}
table.trusttable { 	border-width: 0px; width: 600px; margin-left: -255px; line-height: 2em; }
table.trusttable td {	border-width: 0px; 	padding: 0px;}
table.trusttable > p {margin-top: -1em;}


/***
added for dropdown menu structure
helped by .... http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html
---
Note that menu0x should not be a span, as this gives invalid span/ul nesting.
However, if we make it a div then IE7 and below render incorrectly,
as they do not interpret the "display: inline-block" correctly in that case.
Despite being technically incorrect, 
the span/ul combination seems to render correcly in all (most?) browsers.
***/

span.menu0x * {
  margin: 0;
  padding: 0;
}

span.menu0x { /* all lists */
  display: inline-block;
}

span.menu0x ul {   /* all dropdown */
  list-style: none;
  width: 11em;
  position: absolute;
  left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  padding: 0;
}

span.menu0x li {  /* all dropdown */
  width: 10em; /* width needed or else Opera goes nuts */
  padding: 0.0em 5px 0.0em 5px;
  xmargin: 0;
  text-align: left;
  border-color: #ddd;
  border-width: 0 1px 1px 1px;
  border-style: solid;
}

span.menu0x a {  /* all dropdown, no underline */
  text-decoration: none;
  display: block;
  line-height: 1.6em;
}

span.menu0x > a { /* top level menu */
  margin: 0.0em 0.3em 0 0.3em;
}

span.menu0x ul.nav0 {   /* first level dropdown */
  background-color: #ffffbb;
}

span.menu0x ul.nav1 {   /* second level dropdown */
  background-color: #eee;
  margin: -1em 0 0 9em;
}

span.menu0x ul.nav1 li { /* second level dropdown */
  background-color: #eee;
  }

span.menu0x:hover ul.nav0, li.nav1:hover ul.nav1,
span.menu0x.sfhover ul.nav0, li.nav1.sfhover ul.nav1 {
   left: auto;
}

#content {
	clear: left;
	color: #ccc;
}