div.roll {
	background-color: white;
	width: 39em;
	margin-right: 0em;
	padding-top: 0.5em;
	height: 100%;
	z-index: 1;
	border-right: solid 26em #F1F1F1;
	}
P, .mainbody, UL, DL, OL {
	padding-right: 0em; 
	padding-bottom: 0em; 
	padding-left: 1em; 
	padding-top: 0em; 
	width: 36em;
	font-family: verdana, arial, helvetica, sans-serif;
	line-height: 1.5;
	text-align: left;
	background-color: white;
	}
UL { /* standardizes layout across Firefox and IE, so that the sidenotes will align vertically */
	margin-left: 2em;
	width: 34em;
	}
span.sidenote {
	position: relative;
	float: right; 
	clear: right; /*ensures that successive float boxes do not overlap one another vertically*/
	background-color: #F1F1F1;
	overflow: visible; 
	border-left: #F1F1F1 solid 7px; 
	border-right: #F1F1F1 solid 7px; 
	z-index: 0; 
	margin-right: -28em; /* flips the float box so that instead of cutting in leftwards, it projects outwards to the right*/
	margin-left: 3em; /* establishes the separation between main text and sidenotes */
	width: 25em; /* WARNING: to ensure that boxes clear in IE, the sum of of margin-right, margin-left and width must be equal to or greater than zero */
	top: -1.3em; /* shifts the sidenote up about one text line to an optically pleasing position */
	font-family: serif;
	font-size: ; /* unsolved problem: diminishing font size triggers overlapping */
	line-height: 1.2;
	text-align: left;
	text-indent: 1em;
	}

H1 {text-align: center;}

H3 span.sidenote {
	text-align: center;
	position: relative;
	left: -3em;
	width: 22em;
	/*fixes right-side cantilever, but the exact reason must be investigated*/
	}

/* next come the style declarations for the hyperlinks. A primary declaration for the a:hover state is essential. Otherwise nothing will happen and the frustrated reader will click on the hyperlink: the page will then reload, jerking to the top! */
A {text-decoration: none; background-color: #ddd;}
A:hover {background-color: lightslategray;}

/* finally, the two colours for the notes, unilluminated and illuminated, are formally set, though the first of these declarations is superseded by the span declaration above: */  
A span {background-color: yellow;}
A:hover span {background-color: #F6FFF6;}

/* hovering on a symbol makes the appropriate note light up yellow: note as well that this helpful feature works in reverse: you can hover over a note and its symbol will darken to colour "lightslategray", thanks to the A:hover declaration above */

/* the first table following is that for Cassiodorus, the second is that for the Biblical series */

table.major {
	width: 65em;
	font-family: "Times New Roman", Georgia, Times, "Century Schoolbook L", serif;
	}
table.folios {
	width: 93em; 
	font-family: Tahoma, Helvetica, Arial, "URW Gothic L", sans-serif; 
	font-size: 0.7em;
	}
td.hires {
	background-color: gold;
	}