body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#ffffff; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

/* for internet explorer */
* html body {
  padding:120px 0 50px 0; 
  }

#container {
  font-family:"arial", serif;
  font-size: 1.2em;
  position:fixed; 
  top:80px;
  left:0;
  bottom:0px; 
  right:0; 
  overflow:auto; 
  background:#ffffff;
  padding:20px;
  text-align:center;
  }

* html #container {
  height:100%; 
  width:100%; 
  }

#header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:77px; 
 
  background:#6d76c1;
  border-bottom:3px solid #bdced6;
  }
* html #header {height:80px;}




/* end of bit that does the work */

h1 {font-size:4em; margin:0; padding:0;}

#footer p {
  color:#fff; 
  margin:5px 10px 0 10px;
  }


#header img {
  margin:10px 10px 0 10px;
  }
#container img {margin:5px;}
#absolute {
  position:absolute; 
  top:400px; 
  right:100px; 
  width:200px; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000;
  }

#left {
  float:left; 
  background:#eee; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  width:50%;
  }

#right {
  float:right; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  }

a, a:visited {
  font-size:1.1em;
  text-decoration:none;
  color:#98dafd;
  }

a:hover {
  font-size:1.2em;
  color:#ff8840; 
  text-decoration:none;
  }

.grey {color:#888;}

.ltgrey {color:#ddd;}

img#mascot {float:right;}

#header ul {
  clear:both; 
  text-align:center; 
  border-top:1px solid #73a2bd;
  }

#header ul {
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent; 
  height:1em;
  }

#header ul li {
  display:inline; 
  color:#73a2bd;
  }



.strike {text-decoration:line-through;}
.lft {float:left;}
.rgt{float:right;}

.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}

.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;}
.columnthree a:hover {color:#888; text-decoration:none;}

<!-- popup sliding image ------------------------------------->

.style4 { font-size: 12px;
font-family: Tahoma;
}
.style5 {font-size: 12px; font-family: Tahoma; font-weight: bold; }
a.screen, a.screen:visited {
color:#c00; position:relative; z-index:10;border:0px;
}
a.screen, a.screen:visited {color:#c00; position:relative; z-index:10;
}
a.screen b {
border:0px;
visibility:hidden; /* hide the image */
position:absolute; width:0; /* make the image zero size */ height:0; /* for Opera bug */
top: -27px; left: -20px;
border:0; /* with no border */
}
a.screen:hover {
text-decoration:none; border:0; /* needed for this to work in */ IE z-index:-10;
}
a.screen:hover b {
visibility:visible; /* make the image visible */ width:150px; /* give it the actual size */
height:150px; border:0px solid #345; /* add a border */
cursor:pointer; /* for IE */
}
a.screen:hover b img {
border:0; /* get rid of the default link border */
}

<!-- Exemple of linked image ----------------------------------->
<div><a class="screen"><img style="width: 30px; height: 30px;" alt="help" src="Bhelp2.gif"><b><img src="help1.GIF" alt="help" title="help"></b></a></div>
<!-- Exemple of linked image ----------------------------------->