body {font: normal 1em helvetica;
    background-color: #cca;} /*CCF*/
.bodydiv {float:left; /*position:absolute; doesn't work with the menu navigation*/
    left:110px;
    top:0px;
    border:0px coral solid; 
    width:650px;
    color:black; 
    text-align: justify; 
    margin: 10px auto;
    padding: 10px;}

/*Navigation*/
.navdiv {float:left;
    width:100px; 
    margin:0 auto;
    text-align:center; 
    border:0px black solid;
    font: normal .7em verdana;}

.navdiv ul {margin: 0;
	padding: 0;
	list-style: none;
	width: 100px; /* Width of Menu Items */
	border-bottom: 1px solid #cca;}
.navdiv img {margin-top:9px;}
.navdiv ul li {position: relative;}
.navdiv li ul {position: absolute;
	left: 99px; /* Set 1px less than menu width */
	top: 0;
	display: none;}
.navdiv li ul li ul {display:none;}

/* Styles for Menu Items */
.navdiv ul li a {display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #cca; /* IE6 Bug */
	border-bottom: 0;}
	
/* Holly Hack. IE Requirement \*/
* html .navdiv ul li { float: left; height: 1%; }    /*not sure about .navdiv here....???? */
* html .navdiv ul li a { height: 1%; }
/* End */

.navdiv li:hover ul, li.over ul { display: block; } /* The magic */





/* for all pages */
h1 {font-size:1.5em;
    color:#990000;
    text-align:center;}
h2 {font-size:1.1em;
    color:#990000;}
h3 {font-size:1em;
    color:#990000;}

code {color:#CC0000;}
a:link {color:#000099;} /*or 0000CC */
a:visited {color:purple;}
a:hover {background-color:#BDB76B; color:#000099;} /* background-color:#FFFFAA; color:#000099; */
a:active {color:red;}
.hide, .hideimage {display:none;}
.show {display:inline;}
.sectionhead {font-weight:bold;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background-color:#996600; 
    color:#99CC00;}
.sectionhead:hover {background-color:#99CC00;
    color:#996600;}
dt {font-weight:bold;}


hr {color: #000000;
    background-color: #000000;
    border: 0;
    height: 2px;
    margin-bottom: 4px; }

ol.mc {list-style-type: upper-alpha;}



/* NOTES and extra examples
selector {property: value; property: value;}

DON'T forget the semicolon

Font style possibilities:
color:any
text-decoration: none underline overline
font-weight: bold normal
font-style:italic normal
font-family: any e.g. Verdana, Arial, Helvetica, sans-serif;
font-size: use em units. 1 em is "normal" size
background-color: any valid color, or "transparent"

Possible display values: block | inline | list-item | none

<br style="clear:both;" /> <!-- this says that no floats are allowed on all sides, meaning it will line up below all the float:left's above! -->

creating my own tags works, but probably is bad: blahblah {color:purple;}
use classes instead: .blahblah {color:purple}
ol {color:green;}
the following works. Is there a way to override it so some figures can be a different size?:
    img {height:360px; width:480px;} 
body {margin: 0px; padding: 0px; text-align: center;}
div {margin: 0 auto;} centers the div on the page

img {vertical_align: text-bottom; margin: 10px; align:right;}
.centereddiv {width: 230px; align: center; border: 3px coral solid; margin: 0 auto;}
.floatleft {float:left; border: 3px yellow solid; }
.floatright {float:right; border: 3px red solid; }
.caption2 {color:black; text-align: justify; width: 600px; margin: 0 auto;
    padding: 10px;
    background-color: #BDB76B; 
    background-image: url(antLate03/thumbnails/001Campanile.jpg); background-repeat: repeat-y; 
    background-attachment: fixed; background-position: center bottom;}
p::first-letter {font-size: 200%; padding: 3px; border: solid black; border-width: 2px 0 0 2px; border-color: red;}
p:first-child::first-line {text-transform: uppercase; }

<div class="swatch" style="background-color:#996600; color:#99CC00;">#996600</div>
<div class="swatch" style="background-color:#996600; color:#99CC00;">#996600</div>


*/