body {background: #ebebeb; color: black; font: normal 500 12pt  "times new roman", helvetica, serif; margin:0%}

p {text-align: left; width: 100%; line-height: 1.2;}

div#heading {background:#537016;}

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

h2 {font: normal 800 160% arial, verdana, "sans-serif"; color: #fff; margin:0;padding: 0 0 0 45%; border: solid #fff; border-width:1px 0.3em 0 0.5em;}

div#seniors {background:#e0e0e0; padding:2em 0 1em 0;}
div#seniors {margin:0 5% 1em 5%; border-bottom: 2px solid #537016}
div#seniors h3, div#seniors p {text-align:center}
div#seniors p {margin-bottom:0}

h3 { font: normal 500 100% arial, helvetica, serif; color: #000066; margin:0;  padding:0 0 1em 5%;}

h4 { font: normal 600 90% arial, helvetica, serif; color: #000066;  padding:0 0 0 7%;}

div.allmid p, div.allmid h4, div.allmid h3 {text-align:center;}
div.allmid p a {display:none}

div#offspring p {line-height:1.0; top:0; left:0; position:relative; width:80%; margin-left:10%;}

div#offspring p a {display:block; position:relative;left:60%; top:-1.0em; line-height:1.0; width:5em; background-color: azure; border:1px solid blue;text-align:center; text-decoration:none;}
div#offspring p span {display:block; position:relative; left:50%; top: -1em;}

div#offspring p a:link {color: #330066;} /*violet */
div#offspring p a:visited {color: #ff6633;} /* light red */
div#offspring p a:hover {color: #339933;} /*light green */


div#story {float:left;width:100%;}
div#story p {width:auto; margin:0 5%;  background-color:#ebebeb; padding:0 1% 1em 2%;}

img {border: 1px solid #000000}
.right{float:right; margin: 0em 0 1em 0.5em;}
.left{float:left; margin: 0em 1em 1em 0; }

.rhs {text-align:right; padding-right: 5%}

div#letter {float:left;width:100%; padding-bottom:2em;}

div#letter p {width:auto; margin:0 15%; background-color:#ebebeb; padding:2em 0 0 0;font: italic 500 100% arial, helvetica, serif;}

div#juniors {float:left; width:100%}
div#lcol {float:left; width:38%; border:1px solid red}
div#ccol { float:left; width:30%;border:1px solid red}
div#rcol { float:left; width:30%;border:1px solid red}

div#return {display:none}
div#return {float:left; width:100%;margin-bottom:1em;}
div#return p { margin: 0 10% 0 10%; width:auto; padding-bottom:1em; text-align:center; background-color:azure;}

div#return p a#s0w30 {position: relative; top: 0; left: -20%}
div#return p a#s0e30 {position: relative; top: 0; left: 20%}
div#return p a#s3c0 {position: relative; top: 3em; left: 0%}

div#return p#prntout {font: normal 500 80% arial; color:#333333;}

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


p#fin {position:relative; top:0; left:0; width:100%; page:preset; page-break-before:always; margin:0; padding:1px;}

/* the para is given some height with 1px padding Some uncertainty here as without some page breaks do not occur? */