html, body, img, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0px none;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 240px;
color: #000;
}

#header, #content img {
height: 50%;
width: 50%;
}

#wrapper {
width: 210px;
background-color:#FFFFFF;
margin:10px 10px;
text-align:left;
}

#header {
display: none 
}

#nav ul {
background-color: transparent;
list-style-type: none;
margin: 0; 
padding: 0;
font-size: 80%;
/*border: 1px solid #000000;/*this adds a second line to the bottom of the nav, if you prefer a single line you can remove it by uncommenting the other properties and commenting out this one. I think it gives a nice raised effect, the choice is your's :)*/
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;*/
}

#nav ul li {
padding: 0;
margin: 0; 
}

#nav ul li a{
background-color: #869BCC;
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 4px 0 6px 4px;
text-decoration: none; 
height: 1%;
}

#nav a:hover, #nav a:focus { 
background-color: #FF0000;
/*background-color: #003366;*/
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}

#content h1{
margin-bottom: 15px;
margin-top: 20px;
font-size: 100%;
color: #003366;
padding: 0;

}

#content h2{
font-size: 80%;
color: #003366;
padding: 0;
}

#content p{
font-size: 60%;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 15px;
}

.leftimage{
margin-bottom: 10px;
margin-top: 10px;
float: left;
margin-right: 15px;
border: 1px solid #000000;
}

.rightimage{
margin-bottom: 10px;
margin-top: 10px;
float: right;
margin-left: 15px;
border: 1px solid #000000;
}

#footer {
   clear: both;
}

#footer p {
   margin-bottom: 10px;
  margin-top: 30px;
   color: #999;
   padding: 8px;
   text-align: right;
}