body {width:100%; background-color: #fefebf; color: black; font: normal 500 10pt "times new roman", helvetica, serif; margin:0; padding:0}

div#treehead {background:#663300;}

div#treehead h1 {font: normal 800 200% "times new roman", helvetica, serif; color: #fff; margin:0; padding: 0em 0 0em 10%; border-right: .5em solid #fff; letter-spacing: normal;}

p{text-align: left; padding: 1em 0 1em 0; line-height: 1.2; margin:0;}

p.author {text-align:center;margin: 1em 0;}

p.author span{font: normal 600 120% arial, helvetica, serif; color: #663300; background-color: #ffffaa;  border-bottom:1px solid #663300; padding:0.5em 0.5em;}

p.central {text-align:center}
p.rtext {text-align:right;margin:0; padding:0}

div.frame {float:left; width:98%; margin: 1em 0;padding:0 1%}

 /* This ensures that when one img float follows another, it appears below it. Achieved by each img contained in a 'float left (or right), width 100%' container. To bring flow below the last float, a blank paragraph is used below and outside last float. It is as though floated elements act on another plane separate from flow plane.*/

div.frame p span {font: italic 600 120% arial, helvetica, serif; color: #663300; padding:2em  0em 2em 1em; line-height:2}

img {margin:0 1em}

img.top {vertical-align:top}
img.left {float: left;}
img.right {float: right;}

img.azure {border: 10px ridge #a1c7fb}
img.oliv {border: 10px ridge #a3a300}
img.grey {border: 10px ridge #cccccc}
img.pink {border: 10px ridge #ff6666}
img.brown{border: 10px ridge #ff9e04}
img.white {border: 10px ridge #ffffff}
img.none {border: none }

div#select {display:none;}

p.fin {position:relative; top:0; left:0; width:100%; page-break-before:always;}

div.newpage {page:preset; page-break-before:always;}