body { background-color: maroon;
font-size: small;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

#intro { background-color: white; 
margin: 10px;
padding-top: 8px;
padding-bottom: 8px; }

#intro h1 { color: maroon; 
text-align: center; }


#allcontent { width: 900px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto; }
/*setting margin-left and -right to auto ("jello" property), allows the margins to move a little bit.
 the pages will maintain style when widened.*/


#main { width: 630px;
background-color: white;
padding: 15px;
margin: 0px 10px 10px 10px;
float: left;
 }


#navigation {
background-color: white;
padding: 15px;
margin: 0px 10px 10px 680px;
 }
/*setting the left margin here to accomodate the size of the #main column allows
for the standardizing of the column sizes, plus the gutter in between - by adding the padding and 
margins to the width of #main.*/

.note { font-style: italic; }

#footer { background-color: white;
text-align: center;
padding: 15px;
margin: 10px;
font-size: x-small;
clear: left; }

/*the clear property tells the browser not to display anything to the left of the footer. this helps
with aligning the columns.*/

table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}

td, th { border: thin dotted gray;
padding: 5px;
}

th { background-color: #CD2626; }
/*this modifies the background color of the heading row, without requiring the use of a class (as below, with .cellcolor.*/

caption { font-style: italic;
padding-top: 10px;
}

.cellcolor { background-color: #FFFFAA; 
}


a:link { color: maroon; }
a:visited { color: black; }
a:hover { background-color: #FFFFAA; }