body {
background-image : url(http://www.websuite.co.uk/coefamilytree/parchment.jpg);
margin: 0 10% 0 10%;
padding : 0;
font-family : georgia, verdana, arial, helvetica, sans-serif;
font-size : .9em;
color : #002255;
}

/* links and headers general */

a {
color : #002255;
font-weight : bold;
text-decoration : none;
background-color : transparent;
}
a:hover {
color : #0055aa;
text-decoration : underline;
background-color : transparent;
}

/* Heading styles. H2 is used for the name, H3 for sub-headings (e.g., 'Notes'). */

h1 {
font-family : verdana, arial, helvetica, sans-serif;
color : #002255;
font-weight : bold;
font-size : 18pt;
background-color : transparent;
padding-top: 0px;
margin-top: 0px;
}
h2 {
font-family : verdana, arial, helvetica, sans-serif;
color : #002255;
font-weight : bold;
font-size : 16pt;
background-color : transparent;
padding-top: 40px;
margin-top: 0px;

}
h3 {
font-family : verdana, arial, helvetica, sans-serif;
color : #002255;
font-size : 14pt;
background-color : transparent;
}
hr {
color : #440000;
background-color : transparent;
}

p {
font-size : 11pt;
color : #002255;
background-color : transparent;
margin-bottom : 5px;
}
.node {
font-size : 8pt;
font-family : verdana, arial, helvetica, sans-serif;
}

.selectedNode {
color : #660000;
background-color : transparent;
font-weight : bold;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 8pt;
}

/*seem to need this below otherwise the red dots andarrows in the menus gets a border */
img {
border : 0;
}



#dsearch {
position : absolute;
text-align : center;
top : 6em;
left : 2in;
}
#dbox {
position : absolute;
text-align : left;
top : 9em;
left : 18%;
margin : 5px;
border-style : double;
border-width : 4px;
border-color : gray;
padding : 6px;
width : 58%;
background-color : transparent;
font-family : georgia, verdana, arial, helvetica, sans-serif;
font-size : 11pt;
font-weight : 200;
color : #282828;
}
#d1 {
position : absolute;
text-align : left;
top : 270px;
left : 18%;
width : 1.4in;
font-family : georgia, verdana, arial, helvetica, sans-serif;
}
#d2 {
position : absolute;
text-align : left;
top : 270px;
left : 40%;
width : 1.4in;
}
#d3 {
position : absolute;
text-align : left;
top : 270px;
left : 62%;
width : 1.4in;
}
span.spcolorhome {
background-color : transparent;
}
span.spcolorppp {
background-color : transparent;
}
span.spcolorchart {
background-color : transparent;
}
span.spcoloralbum {
background-color : transparent;
}
span.spcolorcontact {
background-color : transparent;
}
span.hereforexample {
background-color : #ecf4ff;
}
.picright {
text-align : left;
float : right;
margin-left : 20px;
margin-bottom : 10px;
}
.picleft {
text-align : left;
float : left;
margin-right : 20px;
margin-bottom : 10px;
}
.caption {
font-size : 0.8em;
text-align : left;
}
/* trifecta code for rollover 
This started out as the trifecta code, but that relied on having the main image declared in the html and having a background image in the css. Then when you hover you make the main image invisible and the background image shows through. This was OK except it when the background image was an animated gif it didn't work - the background image was the still last frame of the animation. 
OK but if you only introduce the hover image for a:hover it works. If you /only/ have a:hover however it animated once then never again. You seem to need the sequence of link - visited - active - hover, then it works, but then of course you declare the top image in CSS for all three states. You can't actually take out the top image from the html because then you have nothing to give an "alt" for.
Another nice thing I discovered recently is giving an element two classes in the html:
<div class="swapper ppp">. If any items from the two classes clash, it will take the second one.
*/
.swapper {
position : relative;
background-repeat : no-repeat;
white-space : nowrap;
display : block;
width : 120px;
height : 137px;
margin : 0;
padding : 0;
}
.swapper a {
display : block;
width : 120px;
height : 137px;
float : left;
}
.swapper a:hover img {
visibility : hidden;
}
.ppp a:link {
background-image : url(pics/frameppp3.jpg);
}
.ppp a:visited {
background-image : url(pics/frameppp3.jpg);
}
.ppp a:active {
background-image : url(pics/frameppp3.jpg);
}
.ppp a:hover {
background-image : url(pics/frameppphover3.jpg);
}
.charts a:link {
background-image : url(pics/framecharts2.gif);
}
.charts a:visited {
background-image : url(pics/framecharts2.gif);
}
.charts a:active {
background-image : url(pics/framecharts2.gif);
}
.charts a:hover {
background-image : url(pics/framecharts2hover.gif);
}
.albums a:link {
background-image : url(pics/cf11.gif);
}
.albums a:visited {
background-image : url(pics/cf11.gif);
}
.albums a:active {
background-image : url(pics/cf11.gif);
}
.albums a:hover {
background-image : url(pics/coefamilyanim2.gif);
}






.borderless  {
	margin: 0px;
	border-style: solid	;
	border-width: 0;
}


table td#cell1 {width:25%}
table td#cell2 {width:25%}
table td#cell3 {width:25%}
table td#cell4 {width:25%}

td.albumtable
	{
	border-style: solid;
	margin: 100px;
	border-width: 1px;
	border-top-color:    #ECE9D8;
	border-right-color:  #ACA899;
	border-bottom-color: #ACA899;
	border-left-color:   #ECE9D8;
	padding: 4px
	}

#portrait {	padding: 6px;
		float: right;
		margin: 10px 0px 0px 15px;


	}

#portraitframe
	 {	padding: 6px;
		border-width: 2px;
		border-style: ridge;
		border-color: #FFFBE8;
		margin: 10px 10px 10px 0px;

	}



/* Style for the "Created by GetTree" string */

p.creator {
color: #224466;
font-size: x-small;
font-family: Arial, georgia, verdana, helvetica, sans-serif;
text-align: left;
background-color: transparent;
}

/* Notes style */

p.notes {
font-size: smallt;
color: #002255;
margin-bottom: 5px;
background-color: transparent;
}