body {background-color: #ebdac6; color: black; font: normal 500 100% "times new roman", helvetica, serif; margin:2px; 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 #ebdac6; letter-spacing: normal;}

div#treehead h2 {font: normal 800 200% arial, verdana, "sans-serif"; color: #fff; margin:0;padding: 0 1em 0 0; border: solid #ebdac6; border-width:1px 0.2em 0 0.3em; text-align:right; letter-spacing: normal;}

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

p#author {text-align:center;margin: 2em 0;}

p#author span{font: normal 600 130% arial, helvetica, serif; color: #663300; background-color: #fbd5b3; border-bottom:2px solid #663300; padding:0.5em 0.5em;}

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

 /* 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.*/

p.central {text-align:center}

p#notes {margin: 2em 6% 3em 6%; padding-left:1em; font: normal 500 100% arial, verdana, "sans-serif"; color: #663300; border-left: 10px solid #663300;  background-color: #fbd5b3; line-height:2}

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

/* perhaps p span is adequate with cascade effect */

p#tale {font: normal 500 100% arial, verdana, "sans-serif"; color: #663300; padding: 1em}
p#tale img {margin-left:4em}

img { margin:0 2%; border: 1px solid #000000}

img.shift {margin-top: 3em}

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

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.none {border: none }

a {text-decoration:none;}
a:link {color: #ff3300;} /*red */
a:visited {color: #006600;} /* dark green */
a:hover {color: #339933;} /*light green */

/*  space paragraph a necessary hack to end float divisions. Otherwise div allmid border starts at top of first float */

div#allmid {width:100%; text-align:center;}

div#allmid p, div#allmid p#notes{width:80%; margin-left:auto; margin-right:auto; padding:1em 0 1em 0;  border: 1px solid #663300; background-color: #fbd5b3; line-height: 2; text-align:center;  font: normal 600 90% "times new roman", helvetica, serif;}

div#allmid p#notes {border-left:10px solid #663300;}

div#allmid p a{padding:0em 3em; border:1px solid red;}

div#allmid p#prntout {font: normal 500 80% arial, helvetica, serif;padding:1em 0em}

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