/************ overall layout ************/
#flash, #flower9 {
/*  position: absolute;
  top: 100px;
  left: 100px; */
  z-index: 1;
}
#head, #body, #foot
{
  margin: 0 auto; 
  padding: 0;
  position: relative;
}
#head
{
/*  background: #8B4DC7 url(../images/header.gif) -23px 0% repeat-x;  */
/*  background: transparent url(../images/header.gif) -23px 0% repeat-x; */
  background: transparent url(../images/header.gif) 15px 0% repeat-x;
  border-bottom: 1px solid #7fadd9;
/*  height: 103px;   netscape6/win */
  height: 129px;
  width: 100%;
/*  margin: 0 auto; */
z-index: 10;
}
#body {
/*    height: 800px;*/ /*  netscape6/win   */
    height: auto; /* can use height:auto for IE & FF */
}

body#body04 #body {
    height: 1400px; /*  netscape6/win   
                    can use height:auto for IE & FF */
}

* html #body {
  height: auto;
}

#body, #foot
{
/*  background: transparent url(../images/page.png) top center repeat-y !important; 
  background-image: url(../images/page.gif); */
  background: transparent url(../images/page.gif) 0 -2px repeat-y;
  padding: 20px;
  width: 721px; 
}
/**************** header **************/
#logo {
  float: left;
  margin: 0;
  padding: 0;
background: green;
}
a#logo {
  background: url(../images/logo.gif) -40px 0% no-repeat; 
  display: block;
  text-decoration: none;
  text-indent: -999em; 
  height: 103px;
  width: 540px; 
}
a#logo img {
  display: inline;
}
/* SEARCH FORM */
#search {
  float: right;
  width: 200px; 
  padding: 0;
  margin-top: 15px; 
/*  position: absolute;
  top: 10px;
  right: 0; */
}
#search fieldset
{
  border: 0;
}
#search label
{
  color: #fff;
  font-size: .8em;
  padding-top: 5px;
}
#search input
{
  float: none;
  display: inline;
/*  width: auto; */
  width: 80px; 
  margin: 0;
}
/*
#search input#searchbox
{
  width: 100px; 
}
*/
/* LANGUAGE FORM */
#lang {
  float: right;
  width: 145px; 
  padding: 4px 4px 4px 4px;
  margin-top: 30px; 
  list-style: none;
}
#lang li {
  margin: 2px 0;
}
#lang li a {
  text-decoration: none;
  color: #ddd;
  font-size: 100%;
  font-family: Georgia, serif; 
  padding-left: 32px;
/*  background: url(../images/flag_china.gif) 0 50% no-repeat; */
}
#lang li a:hover {
  color: #fff;
}
/*
#lang li#eng a  {
  background-image: url(../images/flag_uk.gif);
}
*/

/**************** mainnav *****************/
ul#mainNav
{ 
  clear: both; 
  margin: 0 auto; 
/*  position: absolute;
  top: 300px;
  left: 305px; */
  display: block; 
  width: 840px;
/*  height: 26px;   netscape6/win */
  padding: 0;
  z-index: 11;
/* debug 
background: yellow;
*/
}
ul#mainNav li {
  padding: 0;
  margin: 0;
  list-style: none;  
}
ul#mainNav li.lvl1 {
  float: left;  
  display: block; 
  height: 26px;  /* netscape6/win   
                    if not, all buttons overlaps to the left
                    can use height:auto for IE & FF */
  position: relative; 
  background: url(../images/nav/mainnav_bg.gif) 0 0 no-repeat;
  background-position: 0 -52px; 
/* debug 
background: green; 
*/
}
ul#mainNav li#tm01 {
  background-image: url(../images/nav/mainnav_bg_left.gif);
}
ul#mainNav li#tm05 {
  background-image: url(../images/nav/mainnav_bg_right.gif);
}
body#body01 ul#mainNav li#tm01,
body#body02 ul#mainNav li#tm02,
body#body03 ul#mainNav li#tm03,
body#body04 ul#mainNav li#tm04,
body#body05 ul#mainNav li#tm05,
body#body07 ul#mainNav li#tm07 {
  background-position: 0 -78px;
}

ul#mainNav a,
ul#mainNav a:link,
ul#mainNav a:visited  {
  display: block;
  float: left;   
  text-decoration: none;
  font-size: 85%;
  font-family: verdana, helvetica, arial, sans-serif; 
}

ul#mainNav li.lvl1 a, 
ul#mainNav li.lvl1 a:link, 
ul#mainNav li.lvl1 a:visited {
  height: 16px;
  width: 120px;  
  color: #fff; 
  text-align: center;
  padding: 7px 10px 3px 10px;
  margin: 0;
  background: url(../images/nav/mainnav_bg.gif) 0 0 no-repeat;
  background-position: 0 0px; 
}
ul#mainNav li#tm01 a, 
ul#mainNav li#tm01 a:link, 
ul#mainNav li#tm01 a:visited {
  background-image: url(../images/nav/mainnav_bg_left.gif);
}
ul#mainNav li#tm05 a, 
ul#mainNav li#tm05 a:link, 
ul#mainNav li#tm05 a:visited {
  background-image: url(../images/nav/mainnav_bg_right.gif);
}
body#body01 ul#mainNav li#tm01 a,
body#body02 ul#mainNav li#tm02 a,
body#body03 ul#mainNav li#tm03 a,
body#body04 ul#mainNav li#tm04 a,
body#body05 ul#mainNav li#tm05 a,
body#body07 ul#mainNav li#tm07 a {
  background-position: 0 -26px;
}

ul#mainNav li.lvl1 a:hover,
ul#mainNav li#tm01 a:hover,
ul#mainNav li#tm05 a:hover  {
  background: transparent;
}

ul#mainNav li.lvl1 div {
display:none;
/*float: left;*/
position: absolute;
left: 0;
top: 25px;
padding:0 8px 8px 0;
margin:0;
border: 1px solid #ddd;
border-width: 1px 0 0 1px;
background: url(images/imgshadow2.gif) 100% 100% no-repeat;
}
* html ul#mainNav li.lvl1 div {
top: 26px;
z-index:11;
}
/*
#head>ul li.lvl1 div {
left: 0;
}
*/
ul#mainNav li.lvl1 div ul {
    float: left;
    margin:0;
    padding:0;
  height: 162px;  /* netscape6/win   
                    can use height:auto for IE & FF */
    background: white;
/* debug  
background: green;
 */
}
* html ul#mainNav li.lvl1 ul {
  height: auto;
}
ul#mainNav>li.lvl1 div ul {
  height: auto;
}

/*
#head>ul li ul {
  margin-left:0; 
}
#head>ul li ul {
width: 300px;
margin:0;
padding:0;
}
*/
/* no longer necessary, now js directly control 'display' property 
ul#mainNav li.lvl1:hover div, ul#mainNav li.over div { 
  display: block;
}
*/
ul#mainNav li.lvl1 li.lvl2 {
/*  float: left; */
  clear: left;  
  display: block;
/*  width: 300px;  */
  height: 40px;  /* netscape6/win   
                    can use height:auto for IE & FF */
margin: 0;
padding: 0;
/* debug 
background: orange;
*/
}
* html ul#mainNav li.lvl1 li.lvl2 {
  float: left; 
  height: auto;
}
ul#mainNav>li.lvl1 li.lvl2 {
  float: left; 
  height: auto;
}
ul#mainNav li.lvl1 li.lvl2 a,
ul#mainNav li.lvl1 li.lvl2 a:link,
ul#mainNav li.lvl1 li.lvl2 a:visited {
  display: block;
  float: left; 
  white-space: nowrap; 
  padding: 5px 10px 5px 10px;
  margin: 0;
  height: 40px;  /* netscape6/win   
                    can use height:auto for IE & FF */
  text-align: left;
  color: #335d99;
  font-weight: bold;
  border-bottom: 1px dotted #ddd;
  background-image: none;
}
* html ul#mainNav li.lvl1 li.lvl2 a,
* html ul#mainNav li.lvl1 li.lvl2 a:link,
* html ul#mainNav li.lvl1 li.lvl2 a:visited {
  height: auto;
}
ul#mainNav>li.lvl1 li.lvl2 a,
ul#mainNav>li.lvl1 li.lvl2 a:link,
ul#mainNav>li.lvl1 li.lvl2 a:visited {
  height: auto;
}
ul#mainNav li.lvl1 ul.lvl2 li.cont a,
ul#mainNav li.lvl1 ul.lvl2 li.cont a:link,
ul#mainNav li.lvl1 ul.lvl2 li.cont a:visited {
  background: url(../images/nav/arrow_right.gif) 97% 50% no-repeat;
}
ul#mainNav>li.lvl1 div#tm02d {
  width: 240px;
}
ul#mainNav li.lvl1 div#tm02d li.lvl2 a,
ul#mainNav li.lvl1 div#tm02d li.lvl2 a:link,
ul#mainNav li.lvl1 div#tm02d li.lvl2 a:visited {
  width: 220px;
}
ul#mainNav>li.lvl1 div#tm03d {
  width: 240px;
}
ul#mainNav li.lvl1 div#tm03d li.lvl2 a,
ul#mainNav li.lvl1 div#tm03d li.lvl2 a:link,
ul#mainNav li.lvl1 div#tm03d li.lvl2 a:visited {
  width: 300px;
}
ul#mainNav>li.lvl1 div#tm04d {
  width: 140px;
}
ul#mainNav li.lvl1 div#tm04d li.lvl2 a,
ul#mainNav li.lvl1 div#tm04d li.lvl2 a:link,
ul#mainNav li.lvl1 div#tm04d li.lvl2 a:visited {
  width: 120px;
}
ul#mainNav li.lvl1 li.lvl2 a:focus,
ul#mainNav li.lvl1 li.lvl2 a:hover {
  background-color: #FAEFFA;
/*  border-bottom-color: white; */
}
/********* 3rd level menu ***********/
/*
div#tm03 li.lvl2 {
  position: relative;
}
div#tm03 ul li.lvl2 div {
  display:block;
  position: absolute;
  top:  0;
  left: 165px;
  font-size: 100%;
  padding:0 8px 8px 0;
  border: 1px solid #ddd;
  border-width: 1px 0 0 1px;
  background: url(images/imgshadow2.gif) 100% 100% no-repeat;
}
div#tm03 ul li div ul {
    text-align: left;
    margin-left:0;
    padding:0;
    background-color: white;
}
div#tm03>ul li ul {
  margin-left:0; 
  width: 25em;
}
div#tm03 ul li:hover div, div#tm03 ul li.over div { 
  display: block;
}
*/
/*********************** subnav ******************/
#subNav0
{
  float: left;
  margin: 0;
  padding: 0;
  width: 166px;
}
div#debug1 {
  width: 166px;
height: 30px;
  border-right: 1px solid #E7D9EA;
}
#subNav
{
  border-right: 1px solid #E7D9EA;
  float: left;
  font-size: 85%;
  font-family: verdana, helvetica, arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: right;
  width: 166px;
/* debug 
background: yellow;
*/
}
#subNav h2
{
  border-bottom: 1px solid #E7D9EA;
  padding: 5px;
  text-align: center;
  font-size: 200%;
  margin: 0 0 0 0; 
}
#subNav ul
{
  float: left;
  margin: 0;
  padding: 0;
/* debug 
background: red;
*/
}
#subNav li
{
width: 166px; /* netscape6/win */
  float: left;
  position: relative; 
  list-style: none;
  margin: 0;
/*  padding:0.1em; */
  padding: 0;
/* debug 
background: blue;
*/
}
#subNav li.lvl1 {
  text-align: right;
}

#subNav li a,
#subNav li a:link,
#subNav li a:visited
{ 
  padding: 6px 20px 6px 0px;
  margin: 0;
  color: #3F78A9;
  display: block;
  font-weight: bold;
  width: 146px; 
/* height: 20px; */
/* debug 
background: gray;
*/
}
#subNav li.cont a,
#subNav li.cont a:link,
#subNav li.cont a:visited {
  background: url(../images/nav/arrow_right.gif) 97% 50% no-repeat;
display: block;
/* debug 
background: gray;
*/
}
/*
#subNav>ul a, #subNav>ul a:link, #subNav>ul a:visited {
  width: auto;
}
*/
#subNav li a:focus,
#subNav li a:hover
{
  color: #335d99;
  font-weight: bold;
  text-decoration: none;
  background-color: #E6FECE;
}
#subNav li.cont a:focus,
#subNav li.cont a:hover
{
  background: #E6FECE url(../images/nav/arrow_right.gif) 97% 50% no-repeat;
}

#subNav li.lvl1 li.lvl2 a,
#subNav li.lvl1 li.lvl2 a:link,
#subNav li.lvl1 li.lvl2 a:visited {
  white-space: nowrap; 
  display: block;
  border-bottom: 1px dotted #ddd;
}
#subNav li.cont li.lvl2 a,
#subNav li.cont li.lvl2 a:link,
#subNav li.cont li.lvl2 a:visited {
  background-image: none;
}
#subNav li.lvl1 li.lvl2 a:focus, 
#subNav li.lvl1 li.lvl2 a:hover {
  background-color: #F7FEEF;
}
#subNav li.lvl1 li.lvl2 a,
#subNav li.lvl1 li.lvl2 a:link,
#subNav li.lvl1 li.lvl2 a:visited {
/*  width: 12em; */
  width: 150px;
  padding: 5px 10px;
}
#subNav li.lvl1 div {
display:none;
position: absolute;
top:  0;
left: 165px;
font-size: 100%;
padding:0 8px 8px 0;
border: 1px solid #ddd;
border-width: 1px 0 0 1px;
background: url(images/imgshadow2.gif) 100% 100% no-repeat;
}
#subNav li.lvl1 ul {
    text-align: left;
    margin-left:0;
    padding:0;
    background-color: white;
}
#subNav>ul li.lvl1 ul {
  margin-left:0; 
}
#subNav>ul li.lvl1 div li.lvl2 {
  width: 170px;
}
#subNav>ul li.lvl1 div {
  width: 170px;
}
/*
#subNav ul li:hover div, #subNav ul li.over div { 
  display: block;
}
*/
/******************* content ********************/
#content
{
  border: solid #E7D9EA;
  border-width: 0 1px;
  float: left;
  margin: 0 -1px;
  padding: 0 13px 0 20px;
  width: 378px; 
}

body.twoCol #content {
  width: 509px;
  border-width: 0 0 0 1px;
}

#content h2, h3 {
  color: #66529A;
}
#content p {
  margin: 1em 0 1em 0;
  line-height: 1.8em;
}
#content p.p1 {
/*  text-indent: .8em; */
}
#content p.p1:first-letter {
  font-weight: bold;
  font-size: 200%;
  background-color:#eee;
  padding: 2px 2px 2px 2px;
  margin: 0 2px 0 2px ;
  color: #888; 
  line-height: 1em;
}
#content p a, #content ul a, #content ol a {
  text-decoration: underline;
}
#content img {
  margin: 20px 0;
}
#content ol li ol.loweralpha li {
  list-style-type: lower-alpha;
}

#content ol li ol li {
  list-style-type: lower-roman;
}
#content ol li ol li ul.disc li {
  list-style-type: disc;
}

#content ul, #content ol
{
  margin-top: 1em;
  line-height: 1.8em;
}
div.contentClear  {
  clear: left;
}

#content .note dt {
  font-weight: normal;  
  font-style: italic;
}
#content .note strong {
/*  text-decoration: underline; */
  border-bottom: 1px solid #333;
}
#content table#homemid,
#content table#homemid tr, 
#content table#homemid td,
#content table#hometop,
#content table#hometop tr, 
#content table#hometop td 
{
  border: 0px solid #7fadd9;
}

#content table#hometop {
 margin-bottom: 0;
}

#content table#homemid #ifc {
 float: left;
 width: 200px;
}
#content table#homemid #welcome_c {
 float: right;
 width: 260px;
}

#content table#homemid {
 margin-top: 0;
 background: url(../images/watermark8.gif) 100% 100% no-repeat; 
}

#content table#hometop a {
 width:125px;
 height:94px;
display: block;
 margin: 0;
 cursor: pointer;
}

#content table#hometop a#homepic1 {
  background: url(photos/topphoto1.jpg) 0 0 no-repeat;
}
#content table#hometop a#homepic2 {
  background: url(photos/topphoto2.jpg) 0 0 no-repeat;
}
#content table#hometop a#homepic3 {
  background: url(photos/topphoto3.jpg) 0 0 no-repeat;
}
#content table#hometop a#homepic4 {
  background: url(photos/topphoto4.jpg) 0 0 no-repeat;
}
#content img.fullpage {
  margin: 0;
}
#content h5 {
  clear: left;
}
#contact img {
  float: left;
  margin: 12px 10px 20px 0;
}
.signature {
  margin-top: 30px;
}
.signature dd {
  margin-left: 0;
}
/*********************** sidebar ******************/
div#debug2 {
  width: 142px;
  background: red;
  height: 30px;
  float: right;
}
div#debug3 {
  clear: right;
}
#sideBarClear {
  clear:left;
}
#sideBar
{
  float: right; 

  font-size: 100%;
  font-family: verdana, helvetica, arial, sans-serif;
  padding: 0;
  margin: 0;
/* debug 
background: green;
*/
}
body.twoCol #sideBar
 {
  float: right; 
/*  border-right: 1px solid #E7D9EA; */
/* width: 166px; */
  width: 142px;
/*  text-align: center; */
}
body.threeCol #sideBar {
  float: right; 
  padding: 0 0 0 0;
  border-left: 1px solid #E7D9EA;
  width: 142px; /* required for FF, because float-to-fix failed ,
                   box auto become full screen wide */
/* debug
background: green;
*/
}
#sideBar h2
{
  margin: 0;
  margin-top: 10px;
  border-bottom: 1px solid #E7D9EA; 
  padding: 5px;
  font-size: 170%;
  text-align: center;
}
.box { 
/* display: block; */
/*  display: inline;  fix IE/win double margin bug */
/*  float: right;     cannot use float-to-fix method  
                      coz text in h2 box strangely wrap
                      to next line after space. this occurs in the 2nd .box */
    float: right;     /* seems okay to use now */
                      /* maybe fixed the IE double margin problem */
/* height: 200px; */
	margin: 10px 6px 20px 8px;
	padding: 0 0 12px 0;
        width: 128px;  
	font-size: 85%; 
	line-height: 1.5em;
	color: #666;
        background: #FAEFFA;
	background: #FAEFFA url(../images/box_b.gif) no-repeat bottom right;
	}
.box h3 {
	margin: 0;
	padding: 12px 2px 5px 2px; 
/*	font-family: Georgia, serif; */
        font-family: verdana, helvetica, arial, sans-serif;
	font-size: 100%; 
	font-weight: bold;
        text-align: center;
	color: #693;
	background: #FAEFFA url(../images/box_t.gif) no-repeat top left; 
/*        width: 148px;  */
}
.box ul.lvl1 {
/* width: 118px; */
     float: right;
        margin: 0;
	padding: 0 5px 0 5px;
/* debug 
background: orange;
*/
 text-align: left; 

}
.box ul.lvl2 {
/* width: 118px; */
display: none;
      float: right;
	padding: 0 0 0 0;
        margin: 0 0 0 0;
 text-align: center; 
background: #fff;
}
.box ul.lvl1 li.lvl1 {
/* width: 118px; */
        float: right;
	margin: 0;
	padding: 0;
	list-style: none;
        border-bottom: 1px dotted #ddd;
/* debug 
background: purple;
*/
}
.box ul.lvl1 li.lvl1 ul.lvl2 li.lvl2 {
/* width: 118px; */
  display: inline; /* fix IE/win double margin bug */
        float: right;
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;
        border-bottom: 1px dotted #ddd;
/*	background: url(../images/li-bullet.gif) no-repeat 0 10px; */
/* debug 
background: gray;
*/
}
.box ul.lvl1 li.lvl1 a {
        float: right; 
        display: block;
        margin: 0;
	padding: 5px 0px 5px 18px;
        width: 100px; 
/* debug 
background: brown;
*/
	background: url(../images/li-bullet.gif) no-repeat 0 10px;
}
.box ul.lvl1 li.lvl1 ul.lvl2 li.lvl2 a {
       float: right; 
        display: block;
        margin: 0 0 0 0;
	padding: 5px 5px 5px 0px;
        width: 113px; 
/* debug 
background: purple;
*/
        background-image: none;
}
/*
.box ul.lvl1 li.lvl1 a:hover,
.box ul.lvl1 li.lvl1 ul.lvl2 li.lvl2 a:hover
 {
  background: #000;
}
*/

/**************** docbook ********/
.navheader,
.navfooter {
  clear: both;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 85%;
}
.navheader dl {
  line-height: 1.5em;  
  margin: 0;
}
.navheader dt {
  font-weight: bold;
}
.navheader dd {
  margin: 0 0 0 2em;
  padding: 0;
}
.navheader table, .navfooter table {
  width: 100%;
/*  border-collapse: collapse;  use HTML be gd to IE/MAC */
}
.navheader table, .navheader td, .navheader th,
.navfooter table, .navfooter td, .navfooter th {
  border: 0;
  background: #fff;
}
.navheader a, .navheader a:link, .navheader a:visited,
.navfooter a, .navfooter a:link, .navfooter a:visited {
  text-decoration: underline;
}
.docbody dt {
  font-weight: normal;
}
ol.docbody {
  font-weight: normal;
  list-style-type: lower-alpha; 
  line-height: 1.5em;
}

#content ol.docbody li ol li {
  font-weight: normal;
  list-style-type: lower-roman;
}
#content ol.docbody li ol.force-lower-alpha li {
  font-weight: normal;
  list-style-type: lower-alpha;
}
#content ol.docbody li ol li ol li {
  font-weight: normal;
  list-style-type: upper-roman;
}
/**************** organization chart ************/
.orgChartEntry {
    float: left;
    height: 235px;
    padding: 0 0.5em 0.5em 0;
    margin: 1em 0 0 0.5em;
    text-align: center;
/*    border: 1px dashed #95E8E8; */
    background: url(images/imgshadow2.gif) 100% 100% no-repeat;
}

.orgChartInner {
    float: left;
    height: 100%;
    padding: 1em 0.5em 0.5em 0.5em; 
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: white;
}

.orgChartEntry dl,
.orgChartEntry dt,
.orgChartEntry dd {
    padding: 0;
    margin: 0;
}

.orgChartEntry dd {
    font-size: 85%;
    font-weight: bold;
    width: 140px;
    margin: 1em 0 0 0;
}

/*
.orgChartEntry dt img {
    height: 135px;
}
*/

/**************** photo gallery ********/
.catalogueEntry {
    float: left;
    height: auto;
    padding: 0 0.5em 0.5em 0;
    margin: 1em 0.5em 0.5em 0.5em;
    text-align: center;
/*    border: 1px dashed #95E8E8; */
    background: url(images/imgshadow2.gif) 100% 100% no-repeat;
}

* html .catalogueEntry {
/*  height: 240px; */
    height: 280px;
}

.catalogueInner {
    float: left;
    height: 100%;
    padding: 1em 0.5em 0.5em 0.5em; 
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: white;
}

.catalogueFolder {
    border: 1px solid #95E8E8;
    background: #c2f2f2;
}

.catalogueEntry dl,
.catalogueEntry dt,
.catalogueEntry dd {
    padding: 0;
    margin: 0;
}

.catalogueFolder dd span {
    display: block;
    line-height: 1em;
}

.catalogueEntry dd {
    font-size: 85%;
    font-weight: bold;
    width: 140px;
    margin: 1em 0 0 0;
}

.catalogueEmpty {
    display: block;
    margin: 4em 0 4em 0;
}


/**************** footer **************/
#foot
{
  clear:both;
  font-size: .85em;
  padding: 0 20px 10px;
}
#foot p
{
  border-top: 1px solid #E7D9EA;
  margin: 0 20px;
  padding: 30px 0 0;
  text-align: center;
}
#foot ul
{
  float: left;
  width: 380px;
  position: absolute;
  top: 21px;
  left: 250px;
}
#foot li
{
  border-left: 1px solid #335d99;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0 5px;
  text-align: center;  
}
#foot li.first
{
  border-left-color: #fff;
}

/***************  HACKS:  IE6 *****************/