<style  type="text/css">

body { margin: 0; }
html { font-family: Verdana, Arial, Helvetica, sans-serif; }

h1 { font-weight: normal; font-size: 1.8em; color: #95af44; }
h2 { font-weight: normal; font-size: 1.5em; color: #95af44; }

a:link { color: #95af44; }
a:visited { color: #95af44; }
a:hover: { color: #95af44; }
a:active: { color: #95af44; }

.topnav {
  overflow: hidden;
  background-color: #eeeeee;
}

.topnav a {
  float: left;
  display: block;
  color: #b2d966;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #b2d966;
  color: white;
}

.active {
  background-color: #95af44;
  color: #black;
}

.topnav .icon {
  display: none;
}


#banner { 
 width:100%; 
 height:auto; 
}


#main-content {
 padding:10px;
 width:auto; 
 float:left;
}  


@media screen and (min-width: 1024px) {
 #main { width:980px; }  
 #main-content { width:980px; float:left; }
 img#banner { width:auto; }
} 


@media (min-width: 501px) and (max-width: 1023px) {
 #main { width:auto; }  
 #main-content { width:auto; float:left; }
} 


@media screen and (max-width: 500px) {
 #main { width:auto }  
 #main-content { width:auto;}
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon { float: right; display: block;  }
 .topnav.responsive {position: relative;}
 .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
 .topnav.responsive a { float: none; display: block; text-align: left; }
 img#my_image { display:none; }
 img#banner { display:none; }

}

</style>