<!--To produce printable pages I have changed the screen.css thus: 
1. put 'display: none;' after elements I don't want to appear: logo, banner, navigation buttons;
2. duplicated "content" into content1 and content2, but used only "content" on the page (this prevents text being lost between printed pages); I cannot explain why this works!
3. adjusted content parameters in % values (q.v.) (trial and error process, placing text centre-page)
4. changed content position from absolute to relative;
5. increased content padding from 0 to 25px with margin remaining at 0px (this makes sure text stays within invisible margins)
6. changed h1, h2 colors to black
7. photos still appear to cross page boundaries. This could possibly be sorted by introducing a "#photo" element and adding 'page-break-before: always;').-->

body { 
background-color: #ffffee; 
}

#logo { 
position: absolute; 
top: 75px; 
left: 3%; right: 70%; 
z-index: 
}

#logo { 
display: none; 
}

#banner { 
position: absolute; 
top: 50px; 
left: 21%; 
right: 5%; 
z-index: 3; 
display: none; 
}

#navigation { 
background-color: #ffffee; 
position: absolute; 
top: 150px; 
left: 2%; 
right: 80%; 
line-height: 100%; 
padding: 72px 10px 575px 10px; 
border-style: inset; 
border-width:  0 0 0 0px; 
border-color: #ffffee; 
display: none; 
z-index: 2; 
}

#content1 { 
background-color: transparent; 
padding: 25px; 
margin: 0px; 
position: relative; 
top: 110px; 
left: 3%; 
right: 55%; 
z-index: 1; 
}

#content1 a:link { 
color: green; 
}

#content1 a:visited { 
color: green; 
}

#content1 a:hover { 
color: maroon; 
}

#content1 a:active { 
color: red; 
}

#content2 { 
background-color: transparent; 
padding: 25px; 
margin: 0px; 
position: relative; 
top: 110px; 
left: 3%; 
right: 55%; 
z-index: 1; 
}

#content2 a:link { 
color: green; 
}

#content2 a:visited { 
color: green; 
}

#content2 a:hover { 
color: maroon; 
}

#content2 a:active { 
color: red; 
}

#list { 
position: relative; 
line-height: 120%; 
font-style: normal; 
font-size: 12pt; 
font-family: garamond; 
color: black; 
text-align: 
justify; margin: 0 0
}

p { 
position: relative; 
font-style: normal; 
line-height: 120%; 
font-size: 12pt; 
font-family: garamond; 
color: black; 
text-align: justify; 
text-indent: 5px; 
margin: 0px 0px; 
}

blockquote { 
position: relative; 
left: 0px; 
font-style: normal; 
line-height: 120%; 
font-size: 12pt; 
font-family: garamond; 
color: black; 
text-align: justify; 
text-indent: 0; 
}

h1 { 
position: relative; 
left: 0px;  
font-weight: 400; 
font-size: 24pt; 
font-style: italic; 
font-family: garamond; 
color: black; 
}

h2 { 
position: relative; 
left: 0px; 
color: black; 
font-family: verdana; 
font-weight: 400; 
font-size: 12pt; 
margin: 15px 0 0 0; 
}

h3 { 
position: relative; 
display: none; 
font-size: 12pt; 
font-family: garamond; 
font-style: bold; 
color: black; 
margin: 15px 0 0 0 
}

h4 { 
position: relative; 
font-size: 8pt; 
font-family: times; 
font-style: italic; 
color: black; 
text-align: center; 
}