html, body {
	height: 100%;         /* required */
	 
}

div#distance { 
	margin-bottom: -10em; /* half of content height */
	width: 1px;           /* required to "hide" distance div */
	height: 45.5%;          /* required */
	float: left;          /* required */

}
div#content {
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 19em;         /* required - desired height */
	width: 48em;          /* required - desired width */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
}

/* the bit that does the work */

body {
text-align: center;     /* horizontal centering hack for IE */
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#424B4D; 
  overflow: hidden; 
  font-family: verdana, geneva, tahoma, arial;
  font-size: 10px;
  font-color: #fff;

  }






#container {
  font-family: verdana, geneva, tahoma, arial;
  font-size: 8px;
  font-color: #ccc;
  position:fixed; 
  height:100%;
  top:78px;
  left:0;
  bottom:42px; 
  right:0; 
  overflow:auto; 
  padding:0px;
  text-align:center; 
   }
   
div.wrap img {
     margin: 0 auto;
     }
     
img {border-color: #60686A;}

* html #container {
  height:100%; 
  width:100%; 
  }

#header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:50px; 
  overflow:hidden; 
  background:#000000;
  color:#FFFFFF
    }
* html #header {height:50px;}


#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:42px; 
  line-height: 42px;
  overflow:hidden; 
  text-align:center; 
  background:#60686A; 
  line-height: 42px;
  
  }

* html #footer {height:50px;}



/* end of bit that does the work */

h1 {font-size:4em; margin:0; padding:0;}

#footer p {
  color:#fff; 
  margin:0px 0px 0 0px;
  }


#header img {
  margin:0px 0px 0px 0px;
  }
#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  {
  font-size:10px;
  text-decoration:none;
  color:#ccc;
  font-weight:bold
  }
  
a:hover {
  color:#fff; 
  text-decoration:none;
  }

table.menu a {                         ///Sets properties for the menu block
width: auto;                           ///width of blocks
border:1px transparent;            //// border properties
display: block;

}
div.menu a {                            ////Properties for the Menu (static)
background: transparent;                   //// BG color
text-decoration:none;                  //// bold, italic, ext.
font-weight:bold;                      ////none underline overline line-through blink
font-size:11px;                       ////font size

text-align: center;
line-height: 16px;
padding: 1px 10px 1px 10px;
border: 1px solid transparent; 
}
div.menu a:link {                      ////Link Properties (static)
     color: #ccc;
     font-weight:bold; 
     text-decoration:none;
     border:1px solid;
     border-color: #60686A;

      }
div.menu a:active {                    ///// Active link properties
     color: #ccc;
     font-weight:bold; 
     text-decoration:none;
     text-decoration:none;
     border:1px solid;
     border-color: #CCC #000 #000 #CCC;
      }
      


div.menu a:visited {

     font-weight:bold; 
     text-decoration:none;
     border:1px solid;
     border-color: #60686A;

          }
     
div.menu a:hover {                     ///// Hover (rollover ) properties    
     color: #fff;
     font-weight:bold; 
     text-decoration:none;
     border:1px solid;
     border-color: #000 #CCC #CCC #000;}
     
div.menu (                            /// Position
   )

}
div.gallery a {                            ////Properties for the gallery (static)
color: #ccc;                        //// font color
background: transparent;                   //// BG color
text-decoration:none;                  //// bold, italic, ext.
font-weight:bold;                      ////none underline overline line-through blink
font-size:10px;                       ////font size
text-align: center;
}
div.gallery a:link {                      ////Link Properties (static)
     color: #ccc;
      }
div.gallery a:active {                    ///// Active link properties
     color: #fff;
      }
div.gallery a:visited {
     color: #ccc;
          }
div.gallery a:hover {                     ///// Hover (rollover ) properties    
     color: #fff;
     text-decoration:none;
     div.gallery (                            /// Position
     position:absolute;
     top:0;
     left:0;
  )



.grey {color:#888;}

.ltgrey {color:#ddd;}

img#mascot {float:right;}

#header ul {
  clear:both; 
  text-align:center; 
  border-top:1px solid #000000;
  }

#header ul {
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent; 
  height:3em;
  }

#header ul li {
  display:inline; 
  color:#73a2bd;
  }
  
  <style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

}
a:link {
	color: #cccccc;
	
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #cccccc;
}
a:hover {
	text-decoration: underline;
	color: #cccccc;
}
a:active {
	text-decoration: none;
}

-->


html, body
{
  height: 100%;
}

