html, body {margin: 0; padding: 0; width: 100%; height: 100%; /*background: #cdd9e3 url('../gf/tree/new/bg.jpg') repeat-x left top;*/ text-align: left;}
div, span, table, tr, th, td, p, h1, h2, h3, a, textarea, input, select, optgroup, fieldset, legend {font-family: Verdana, Tahoma, Sans-serif; font-size: 9px;}
h1 {font-size: 11px; font-weight: bold; color: #7a5d22;}
h2 {font-size: 14px; font-weight: bold; color: #fffe90; font-family: Georgia, Century Gothic; }
span.hh2 {font-size: 14px; font-weight: bold; color: #000; font-family: Georgia, Century Gothic; }

h3 {font-size: 11px; font-weight: bold; color: #7a5d22; margin-bottom: 10px;}
span.s-bold {font-weight: bold;}
span.s-in {padding-left: 15px;}
a:active, a:visited, a:link {text-decoration: underline; color: #7A5D22; outline: none; font-weight: bold;}
a:hover {color: #900;}
img.nb {border: none;}

#mc {height: 98%; display: table; margin: 0; padding: 0;}
#sc {height: 100%; display: table-cell; background: url('../gf/tree/per/bg.png') repeat left top;}
#top {width: 100%; height: 241px; background: url('../gf/tree/per/bg-top.png') repeat-x left top;}
#fc {width: 100%; height: 281px; background: url('../gf/tree/per/bg-bot.png') repeat-x left top;}

#lt {float: left; width: 112px; height: 241px; background: url('../gf/tree/per/left.png') no-repeat left -5px;}
#lb {float: left; width: 145px; height: 281px; background: url('../gf/tree/per/left-bot.png') no-repeat left -26px;}


td {vertical-align: top;}
img.midimg {text-align: left; padding: 0; margin: 10px -1px 0 0; float: right;}

td.firstAndLast {width: 28px; background: url('../gf/tree/new/con/fandl.png') no-repeat 0px 15px;}
td.first {width: 28px; background: url('../gf/tree/new/con/midbg.png') repeat-y 13px top; height: 100%; margin: 0; padding: 0;}
td.last {width: 28px; background: url('../gf/tree/new/con/last.png') no-repeat 13px top;}
td.middle {width: 28px; background: url('../gf/tree/new/con/midbg.png') repeat-y 13px top;}
td.middot {background: url('../gf/tree/new/con/middot.png') repeat-y center top; height: 100%;}
td.showNode {width: 1px;}
div.firstscale {width: 28px; background: url('../gf/tree/new/con/first-t.png') no-repeat left top; height: 41px;}



table.node {border-bottom: 1px solid #6d3f2c; border-right: 1px solid #6d3f2c; margin-bottom: 10px; width: 240px; height: 30px; background: url('../gf/tree/per/bg-cell.jpg') repeat-x left top;}
table.node-i {border-bottom: 1px solid #6d3f2c; border-right: 1px solid #6d3f2c; margin-bottom: 10px; width: 240px; height: 120px; background: url('../gf/tree/per/bg-cell.jpg') repeat-x left top;}
table.node-d {border-bottom: 1px solid #6d3f2c; border-right: 1px solid #6d3f2c; margin-bottom: 10px; width: 240px; height: 60px; background: url('../gf/tree/per/bg-cell.jpg') repeat-x left top;}
table.node-id {border-bottom: 1px solid #6d3f2c; border-right: 1px solid #6d3f2c;  margin-bottom: 10px; width: 240px; height: 120px; background: white url('../gf/tree/per/bg-cell.jpg') repeat-x left top;}

td.nodetd {text-align: center; padding: 5px; vertical-align: middle;}
td.rings {vertical-align: middle; text-align: center; width: 20px;}


td.probant {border: 0px solid #763300;}

td.probant a:active, td.probant a:visited, td.probant a:link {color: #d00; font-size: 10px;}
td.probant a:hover {color: #900;}

a.probanttext:active, a.probanttext:visited, a.probanttext:link {color: #d00; font-size: 10px;}
a.probanttext:hover {color: #900;}


div.imgDiv {vertical-align: middle; height: 67px; text-align: center;}

td.couple td.nodetd {width: 110px; text-align: center; vertical-align: middle;}


#lefttop {background: transparent url('../gf/tree/per/lefttop.png') no-repeat left 0; width: 223px; height: 264px;}
#reptop {background: transparent url('../gf/tree/per/top-rep.png') repeat-x left 7px; /*height: 246px; width: 90%;*/}
#righttop {background: transparent url('../gf/tree/per/righttop2.png') no-repeat right 0; width: 111px; height: 246px;}
#leftcenter {background: transparent url('../gf/tree/per/left.png') repeat-y left top; width: 223px;}
#cencenter {background: transparent url('../gf/tree/per/rep.png') repeat left top; padding: 20px;}
#rightcenter {background: transparent url('../gf/tree/per/right.png') repeat-y right top; /*width: 223px;*/}
#leftbot {background: transparent url('../gf/tree/per/leftbot.png') no-repeat left -35px; width: 223px; height: 311px;}
#repbot {background: transparent url('../gf/tree/per/bot-rep.png') repeat-x left -15px; height: 268px;}
#rightbot {background: transparent url('../gf/tree/per/rightbot.png') no-repeat right -36px; width: 1111px; height: 311px;}

#menu-top {width: 734px; height: 268px; background: url('../gf/tree/per/topmenu.png') no-repeat 0 0;}

div#textoff {background: url('../gf/tree/per/btn/text.png') no-repeat left -27px; width: 72px; height: 26px;}
div#graphoff {background: url('../gf/tree/per/btn/graf.png') no-repeat left -27px; width: 80px; height: 26px;}
#graphbtn {background: url('../gf/tree/per/btn/graf.png') no-repeat left 0px; display: block; width: 80px; height: 26px;}
#graphbtn:hover {background: url('../gf/tree/per/btn/graf.png') no-repeat left -27px;}
#textbtn {background: url('../gf/tree/per/btn/text.png') no-repeat left 0px; display: block; width: 72px; height: 26px;}
#textbtn:hover {background: url('../gf/tree/per/btn/text.png') no-repeat left -27px;}
#hdatebtn {background: url('../gf/tree/per/btn/hdate.png') no-repeat left 0px; display: block; width: 82px; height: 26px;}
#hdatebtn:hover {background: url('../gf/tree/per/btn/hdate.png') no-repeat left -27px;}
#sdatebtn {background: url('../gf/tree/per/btn/sdate.png') no-repeat left 0px; display: block; width: 85px; height: 26px;}
#sdatebtn:hover {background: url('../gf/tree/per/btn/sdate.png') no-repeat left -27px;}
#hphotobtn {background: url('../gf/tree/per/btn/hphoto.png') no-repeat left 0px; display: block; width: 99px; height: 26px;}
#hphotobtn:hover {background: url('../gf/tree/per/btn/hphoto.png') no-repeat left -27px;}

#gedcbtn {background: url('../gf/tree/per/btn/gedcom.png') no-repeat left 0px; display: block; width: 120px; height: 26px;}
#gedcbtn:hover {background: url('../gf/tree/per/btn/gedcom.png') no-repeat left -27px;}

#sphotobtn {background: url('../gf/tree/per/btn/sphoto.png') no-repeat left 0px; display: block; width: 100px; height: 26px;}
#sphotobtn:hover {background: url('../gf/tree/per/btn/sphoto.png') no-repeat left -27px;}
#closebtn {background: url('../gf/tree/per/btn/close.png') no-repeat left -1px; display: block; width: 131px; height: 29px;}
#closebtn:hover {background: url('../gf/tree/per/btn/close.png') no-repeat left -29px;}
#fullbtn {background: url('../gf/tree/per/btn/fullscreen.png') no-repeat left -1px; display: block; width: 100px; height: 29px;}
#fullbtn:hover {background: url('../gf/tree/per/btn/fullscreen.png') no-repeat left -29px;}

#showurl {background: url('../gf/tree/per/btn/showadr.png') no-repeat left -1px; display: block; width: 116px; height: 29px;}
#showurl:hover {background: url('../gf/tree/per/btn/showadr.png') no-repeat left -29px;}

#help {background: url('../gf/tree/per/btn/help.png') no-repeat left -1px; display: block; width: 76px; height: 82px;}
#help:hover {background: url('../gf/tree/per/btn/help.png') no-repeat left -84px;}

div.loupe {padding-top: 4px;}
a.aloupe:active, a.aloupe:visited, a.aloupe:link {font-size: 9px; text-decoration: none; color: #000; font-weight: normal;}
a.aloupe:hover {color: #900;}

a.aloupe img {border: none; width: 11px; height: 9px; position: relative; top: 1px;}


/* ie   */
div#textoffie {background: url('../gf/tree/per/btn/ie/text-on.png') no-repeat left top; width: 72px; height: 26px;}
div#graphoffie {background: url('../gf/tree/per/btn/ie/graf-on.png') no-repeat left top; width: 80px; height: 26px;}
#graphbtnie {background: url('../gf/tree/per/btn/ie/graf.png') no-repeat left top; display: block; width: 80px; height: 26px; cursor: pointer;}
/*#graphbtnie:hover {background: url('../gf/tree/per/btn/ie/graf-on.png') no-repeat left top;}*/
#textbtnie {background: url('../gf/tree/per/btn/ie/text.png') no-repeat left top; display: block; width: 72px; height: 26px; cursor: pointer;}
/*#textbtnie:hover {background: url('../gf/tree/per/btn/ie/text-on.png') no-repeat left top;}*/
#hdatebtnie {background: url('../gf/tree/per/btn/ie/hdate.png') no-repeat left top; display: block; width: 82px; height: 26px; cursor: pointer;}
/*#hdatebtnie:hover {background: url('../gf/tree/per/btn/ie/hdate-on.png') no-repeat left top;}*/
#sdatebtnie {background: url('../gf/tree/per/btn/ie/sdate.png') no-repeat left top; display: block; width: 85px; height: 26px; cursor: pointer;}
/*#sdatebtnie:hover {background: url('../gf/tree/per/btn/ie/sdate-on.png') no-repeat left top;}*/
#hphotobtnie {background: url('../gf/tree/per/btn/ie/hphoto.png') no-repeat left top; display: block; width: 99px; height: 26px; cursor: pointer;}
/*#hphotobtnie:hover {background: url('../gf/tree/per/btn/ie/hphoto-on.png') no-repeat left top;}*/
#sphotobtnie {background: url('../gf/tree/per/btn/ie/sphoto.png') no-repeat left top; display: block; width: 100px; height: 26px; cursor: pointer;}

/*#sphotobtnie:hover {background: url('../gf/tree/per/btn/ie/sphoto-on.png') no-repeat left top;}*/
#closebtnie {background: url('../gf/tree/per/btn/ie/close.png') no-repeat left top; display: block; width: 131px; height: 29px; cursor: pointer;}
/*#closebtnie:hover {background: url('../gf/tree/per/btn/ie/close-on.png') no-repeat left top;}*/
#fullbtnie {background: url('../gf/tree/per/btn/ie/fullscreen.png') no-repeat left top; display: block; width: 100px; height: 29px; cursor: pointer;}
/*#fullbtnie:hover {background: url('../gf/tree/per/btn/ie/fullscreen-on.png') no-repeat left top;}*/

#showurlie {background: url('../gf/tree/per/btn/ie/sadr.png') no-repeat left -1px; display: block; width: 100px; height: 29px;}
/*#showurl:hover {background: url('../gf/tree/per/btn/showadr.png') no-repeat left -29px;}*/

#helpie {background: url('../gf/tree/per/btn/ie/help.png') no-repeat left top; display: block; width: 76px; height: 82px; cursor: pointer;}
/*#help:hover {background: url('../gf/tree/per/btn/help.png') no-repeat left -84px;}*/