@import url("dropdown.css");


/* get rid of browser default settings -----------------------------*/
body, html, p, div, span, img, form, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, td, table, code {
margin: 0px;
border: 0px;
padding: 0px;
background-color: transparent;
}

/*typography -------------------------------------------------------*/
body {font: small/1.3 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;}

body, div, ol, ul, li, p, table, td, th, dd, form {
color: #606060;
}

h1 {font-size: 1.7em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.0em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.75em;}

h1, h2, h3, h4, h5, h6 {
text-align: center;
color: #444;
font-weight:bold;
}

/*basic elements --------------------------------------------------*/

a:link{
 color: #1f9c37;
}

a:visited{
color: #827746;
}

a:hover{
text-decoration:underline;
}

a:visited:hover {
}

a:link:hover {
}


h1, h2, h3, h4, h5, h6 {
margin: .75em 0em;
}

p {
margin: 1.2em 0em 1.2em 0em;
}

/*ol and ul uses padding to indent stuff*/
ol, ul {
padding: 0 0 0 2em;
}

ol li{
	padding-bottom: .5em;
}

li.none {
list-style: none;
}

ol.lower-alpha, li.lower-alpha { 
list-style-type:lower-alpha;
}

ol.upper-alpha, li.upper-alpha { 
list-style-type:upper-alpha;
}


img {
border: 0;
}

img.bottom {
vertical-align: baseline;
}

em {
font-style: normal;
font-weight:bold;
text-transform: uppercase;
}

cite {
font-style:italics;
}

strong {
font-weight:bold;
}

small {font-size: 85%;}

big {font-size: 1.75em;
line-height:.5em;}


/*netscape 4.4 screws up, puts small square box of color under the hr; ie treats hr like inline-uses color; geecko treats as block-uses background and border*/
hr {
height: 2px;
color: #8F8E6B;
background-color: #8F8E6B;
border:0;
}

/*default table */

table {
border: 1px solid #bacc99;
margin-top: 10px;
margin-bottom: 10px;
}
 td {
 border: 1px solid #bacc99;
padding: 3px 5px;
}

th {
padding: 3px 5px;
text-align:center;
background-color: #bacc99;
border: 1px solid #dde6b6;
}

th.left, th {
border-right: 1px solid #bacc99;
}

th.right {
border-right: 1px solid #dde6b6;
}

th.top, th.vertical {
border-right: 1px solid #dde6b6;
border-bottom: 1px solid #bacc99;
}


th.bottom {
border-right: 1px solid #dde6b6;
}

/*custom classes ----------------------------------------------------------*/
.right {
text-align: right; 
}

.left {
text-align: left; 
}
.center{
text-align: center; 
}

.nowrap {
white-space:nowrap;
}

.note {
color: #999;
}

.strike {
text-decoration: line-through;
}

.underline {
text-decoration: underline;
}

.footnote {
font-size: .75em;
vertical-align:super;
}

.bottomless {
margin-bottom:0;
}

.topless{
margin-top:0;
}



/* next prev for translation */
.next {
text-align:center;
}

.next a {
margin: 20px 10px 0 10px;
}

/* headings with no reduced margin ie anchors on links page*/
.bottomless {
margin-bottom:0;
}

.topless{
margin-top:0;
}


/* table is centered, must put table in div class=center*/


div.center table
{ 
margin-left: auto;
margin-right: auto;
text-align: left;
}



/* border, centered text, padding; similiar to default except text in cells are centered*/

table.center td{
text-align:center;
}

table.borderless {
border: none;
}

table.borderless td{
border: none;
}


/*end custom classes */


/* layout of main div --------------------------------------*/

body { 
text-align: center; /* IE doesn't always understand auto margin */
background-color: #e2e6d0;
}

#wrap {
background: #fff;
width: 770px;
margin: 1em auto;
text-align: left; /* IE doesn't always understand auto margin */
}

* html #wrap {
width: 770px;
}

body > #wrap {
 /* be nice to Opera */ }

/*header */
#header {
}
#header a {
text-decoration:none;
}

h1#logo {
margin: 0;
padding: 0;
text-indent: -9999px;
height: 40px;
background: #000 ;
}

h1#logo a {
display:block;
background: #627e32 url(../images/logo.gif) 0 50% no-repeat;
margin: 0;
padding: 0;
height: 100%;
}



 ul.dropdown {
	width: 770px;
	 background-color: #bacc99;
	font-weight: bold;	
}

ul.dropdown li {
	 padding: 7px 10px;
	 line-height: 1.3em;
}

ul.dropdown ul {
 width: 160px;
border-top: 1px solid white;
}

ul.dropdown ul li {
 font-weight: normal;
 background-color: #dde6b6;
}

ul.dropdown a:link, #header ul.dropdown a:visited, #header ul.dropdown a:hover, #header ul.dropdown a:active	{ 
	color: #606060; 
	text-decoration: none;
}

ul.dropdown li:hover {
	 background-color: #dde6b6;
}

ul.dropdown ul li:hover {
	 background-color: #bacc99;
}


#content {
padding: 3em 2em;
}

/* used on family titles pages */
.anchors {
	text-align: center;
	margin: -1.2em 0 1.5em 0;
}

.anchors a{
	padding-left:1em;
	
}

#footer {
background: #e2e6d0;
padding: 1em;
}

#footer hr {
display: none;
}

#footer p{
text-align: center;
margin: 5px 0;
}

/*---------------------
home
-----------------------*/
#home #home_cat{
/*background-color: #dde6b6; */
}

#home h1 {
margin: 0;
padding: 0;
color: #333;
white-space: nowrap;
}

#home h2 {
margin: 0 ;
padding: 0;
font-size: 1.0em;
color: #333;
white-space: nowrap;
}


/*---------------------
kwan info
-----------------------*/

#info #info_cat{
/*background-color: #dde6b6; */
}

#info.surname #surname_nav, #info.woon #woon_nav, 
#info.poem_intro #poem_intro_nav, #info.poem_detail #poem_detail_nav, #info.census #census_nav {/*
border: 5px solid #627e32;
border-width: 0 0 0 5px;
*/}


#info tr.total td {
color: #993333;
font-weight: bold;
}







/*---------------------
genealogy
-----------------------*/
/* highlights current category */
#genealogy #genealogy_cat{
/*background-color: #dde6b6; */
}

/* highlights current sub-category */
#genealogy.intro #intro_nav, #genealogy.pwkwan #pwkwan_nav,
#genealogy.alankwan #alankwan_nav{/*
border: 5px solid #627e32;
border-width: 0 0 0 5px;
*/}

/* turn the html background to white since family tree is very wide*/
.kwan_tree {
background: #fff ;
}


ol.tree {
	background-color: #fff;
}

ol.tree li {
list-style: none;
background: #fff url(../images/tree/center.gif) left top no-repeat;
padding: .75em 0 0 15px;
border-left: 1px solid blue;
width: 400px;

}

ol.tree li.first {
background: #fff url(../images/tree/first.gif) left top no-repeat;
border: 0;
}

ol.tree li.last {
background: #fff url(../images/tree/last.gif) left top no-repeat;
border: 0;
}
ol.tree li.none{
background: none;
border: 0;
}

/* use jquery for IE since it doesn't understand last-child */
ol.tree li:last-child {
	background: #fff url(../images/tree/last.gif) left top no-repeat;
	border: 0;
}

ol.tree p {
	margin: 0 0 1.2em 0;
}





/*---------------------
culture
-----------------------*/
/* highlights current category */

#culture #culture_cat{
/*background-color: #dde6b6; */
}



/* highlights current sub-category */
#culture.gapou #gapou_nav, #culture.names #names_nav, #culture.exam #exam_nav, #culture.familytitles #familytitles_nav, #culture.familytitles_table #familytitles_nav, #culture.familytitles_diagram #familytitles_nav, #culture.language #language_nav, #culture.maps #maps_nav
{/*
border: 5px solid #627e32;
border-width: 0 0 0 5px;
*/}

/* kinship table */

.familytitles_diagram table, .familytitles_diagram td {
border: none;
padding: 0;
background-color: white;

}

.familytitles_table table {
	background-color: white;
}

.both{ 
color:purple;
 }

.cant{ 
color: blue;
 }

.man{ 
color: red;
 }
 



/*---------------------
links
-----------------------*/
/* highlights current category */
#links #links_cat{
/*background-color: #dde6b6; */
}

/* highlights current sub-category */
#links.misc #linksmisc_nav, #links.genealogy #linksgen_nav, #links.learn #linkslearn_nav, #links.computer #linkscomp_nav
{/*
border: 5px solid #627e32;
border-width: 0 0 0 5px;
*/}


#links h2 {
	text-align: left;
}

/*---------------------
site
-----------------------*/
/* highlights current category */
#site #site_cat{
/*background-color: #dde6b6; */
}



/* highlights current sub-category */
#site.updates #updates_nav, #site.sitenotes #sitenotes_nav, #site.thanks #thanks_nav, #site.contact #contact_nav {/*
border: 5px solid #627e32;
border-width: 0 0 0 5px;
*/}


/*thanks */
.thanks li {
padding: .5em 0;
}


/*updates headings are aligned left */

body.updates h2 { 
 text-align: left;
font-size: 1.2em;
}




/*---------------------
error page
-----------------------*/
 #error #content { 
line-height:1.5em;
text-align:center;
}


/*NS4 screws up puts icon right in middle of text */
.icon_wall {
padding: .25em 30px .25em 0; 
background: url(../images/smilies/wall.gif) no-repeat center right;
}

.icon_neener {
padding: .25em 38px .25em 0; 
background: url(../images/smilies/neener.gif) no-repeat center right;
}


.icon_cry{
padding: .25em 26px .25em 0; 
background: url(../images/smilies/cry.gif) no-repeat center right;
}

.icon_naughty {
padding: .25em 24px .25em 0; 
background: url(../images/smilies/naughty.gif) no-repeat center right;
}