/* ----------------- BODY ----------------- */

body {
  font-family: Georgia, serif;
  font-size: 100%;
  color:#a9a9a9;
  margin-bottom: 1px; 
  padding:0; 
  position:absolute; 
  height:100%;
  background: white;
  width:99%; 
   }
   
h1 {font-family: Arial, Helvetica, sans-serif}
h2 {font-family: Arial, Helvetica, sans-serif}
h3 {font-family: Arial, Helvetica, sans-serif}
 
a:link {
  color: cadetblue;}
a:visited {
  color: cadetblue}
 
#wrap 
{padding: 0px 15px 15px 15px; margin:0px auto 10px auto; background:white; width:800px; display:block; align:center;}


#header
	{
	clear: both;
	width:100%;
	border-collapse:collapse;
	color:black;
	padding: 0px 10px 10px 10px;
	margin: 0;
	border-width: 3px;
	border-color: black;
	border-style: none none solid none
	}

#smallerheaderscript {font-size: 90%}
#headerleft {width:20%}
#headercenter {width:60%; text-align: center; vertical-align:center; }
#headerright {width:20%; text-align: right; vertical-align:bottom; }

#feet {float: left; margin-top: 1px;}

/* ----------------- NAVIGATION BAR ON LEFT ----------------- */

#nav {clear: both}

/*I think the width fixed ie problem */ 
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
  float: left;
  width: 150px;
  font-size: 80%;
   		}		
   			
ul.navbar li {
  margin: 0.5em 0;
  padding: 0.3em;
  margin-right: 3em
 }

ul.navbar a {
  text-decoration: none;
  color: cadetblue;
  font-weight:bold;
  font-family: Arial, Helvetica, sans-serif;}  
  
/* ----------------- CONTENT ----------------- */

#content {
	color: black;
	margin-left: 200px;
	margin-right: 100px;
	margin-top: 5px;
    width: auto;
    padding: 10px 10px 50px 10px;
	 	  }


/* ----------------- FOOTER ----------------- */
  
#smallnote { font-size: 8pt; }
#footer {
	font-size: 8pt;
	clear: both;
	color: #666;
	background-image: none;
	 }
#footer a {
  text-decoration: none }
#footer a:link {
  color: #666}
#footer a:visited {
  color: #666 }




/* NOTES

Body bottom margin to force scroll bar so contents are always centered - had to decrease width to 99% to avoid other scroll bar for some reason

THE WRAP
the wrap is the direct container of all the middle content
made it into a block element so that the square can't get too small and then have the text against background instead of wrap
Block elements can be aligned by setting the left and right margins to "auto".
Note: Using margin:auto will not work in Internet Explorer, unless a !DOCTYPE is declared.
Would be nice to set min-height: 800px;  but need footer to line up at bottom.

code to adapt if I want column in middle to go completely to top or bottom using CSS - can be done of course with tables too...
<style type="text/css">
	body { margin:0; padding:0; position:absolute; height:100%;
		background-color:orange; width:100%; }
	div.full { position:absolute; top:0; left:25%; width:50%;
		height:100%; background-color:white; padding:0 1em; }
	div.normal { position:absolute; top:0; left:25%; width:50%;
		height:auto; background-color:white; padding:0 1em; }
</style>
 */