  * {margin: 0;  padding: 0; }
  h1, h2, h3, h4, p, blockquote, ul, ol, dl, address { margin: 1em 5%; }
li, dd { margin-left:5%; }

  
body { border: 20px solid #645462; border-top: 10px solid #645462;}
#page {margin: 0 auto;  /*width: 800px;*/ text-align: left;}
img.skipimg {  height: 1px; width: 1px; border: 0;}

#header { height: 160px; background-image: url(/topimages/washmon2.jpg); background-color: #d5b3b1;
  background-repeat: repeat-x; margin: 0; border-top: 1px solid #645462;}

#main {float: right; width: 80%; font-family: Arial, sans-serif;  padding-right: 10px;}

#footer {clear: right; border: 1px dotted blue;}
.clear { clear: both;}


div#header h1 { margin-top: 115px; margin-bottom: 0; margin-left: 0.3em; color: #3A313A; }
div#main h3 {font-size: 105%; margin: 15px 0 8px;}
div#main p {margin: 8px 0 8px 1.5em; }
div#main ul {margin-left: 2em;}
h2 {margin-bottom: 20px;}
h2 span {border-bottom: 1px dashed #b1a2af;}
h3 {margin-top: 5px; margin-bottom: 2px;}
.small {font-size: 85%;}
p.note {text-align: right; font-size: 85%; margin-right: 1em; margin-top: 10px;}

#navtop { float: left; width: 17%; background-color: #b1a2af;/* height: 100%;*/ }
/* navigation */
ul#navlist  {  padding: 0px; border-top: 0px; margin: 0px; font: bold 80% verdana,helvetica,arial,sans-serif;  margin-bottom: 5px;}
#navlist li {list-style-type: none; margin: 5px 0px; border: 0px;  }
#navlist li a {display: block; padding: 4px 8px 4px 8px; border: 0px; border-right: 20px solid #645462; border-left: 0px solid #645462; background: #ccccdd; text-decoration: none; text-align: right;}
#navlist li a:link { color: #3A313A; }
#navlist li a:visited { color: #3A313A; }
#navlist li a:hover {border-color: #ffffff; color: #ffffff; background: #3a313a;} 
#navlist li a#current { border-color: #B9817E; }


#image {float: right; width: 252px; border-left: 5px solid #645462; border-bottom: 1px solid #645462; height: 158px; /* auto, or You can use a predefined height here if you can have images with the similar height;*/ }

  /* nav bar bottom */
#navbottom ul {padding: .3em 0; margin: 0; list-style-type: none; 
  background-color: #ffffff; color: #000000;  width: 100%; font: normal 80% arial, helvetica, sans-serif; text-align: center;  border-top: 1px solid #b1a2af; border-bottom: 1px solid #b1a2af;}
#navbottom li {display: inline; }
#navbottom li a {text-decoration: underline; 
  background-color: #ffffff; color: #0000ff; padding: .3em 1em; }
#navbottom li a:hover {background-color: #ffffff; color: #ff0000;}
/* end navbar */
/*
div#events {margin-top: 5px; width: 90%; background: #ccccdd; margin-left: auto; margin-right: auto; padding: 8px 5px;}
#navtop div#events ul {margin-left: 30px;}
#navtop div#events li {list-style-type: disc; margin-top: 1px; margin-bottom: 0px;}

#navtop div#events li a {color: #645462; text-decoration: udnerline; border: 0px; background: transparent;}

*/