body {background-color: #ffffff; font: normal 90% "arial", "helvetica", sans-serif;}

.quote {font: normal 75% "arial"}

#outside {margin-left: 5%; margin-right: 5%; border-top: solid 10px #0000a0; background-color: #ffffff;}

#outside h1 {margin: 1%; margin-left: 8px; color: #0000a0; font-weight: normal; letter-spacing: -1px;}


#middle-nav {margin: 0; margin-top: 13px; margin-bottom: 13px;  padding: 6px;  background-color: #777777; color: #ffffff;}
#middle-nav a {margin-left: 5px; margin-right: 5px; padding: 3px; color: #ffffff; text-decoration: none; border: solid 1px #777777;}
#middle-nav a:hover {border: solid 1px #ffffff; background-color: #888888; color: #ff9933;}


#main {margin-right: 200px; margin-top: 10px;  margin-bottom20px; padding: 5px; color: #777777;}
#main h2 {margin: 0; color: #0000a0;}
#main a {color: #0000a0; text-decoration: underline;}
#main a:hover {color: #dd0000;}

#footer {margin: 10px; padding: 5px; background-color:  #0000a0;color: #ffffff;}
#footer h5 {margin: 0;}

img.floatLeft { float: left; margin: 4px; clear:left;}
 img.floatRight { float: right; margin: 4px; clear:right} 

/*
Fire fox : If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them. At present, this requires a bit of a structural hack. Since we want the bottom of the containing element to be placed clear past the bottom of the float, then clear is our answer. We need only insert a block-level element just before the end of the container, and clear it.



*/


 hr {display: block; clear: right; margin: -0.66em 0;  visibility: hidden;}