html
{ height: 100%; /* required for all browsers? */ }

body {
  /* fix basic frame to visible display area
     (This helps us ensure the content background is always long enough) */
  position: fixed;
  height: 100%;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  background: white url('liegemantile.gif');
  margin: 0px;
  border: 0px none;
  padding: 0px;
  font-size: 100%;  /* fixes em scaling bug in IE */
  font-family: Georgia,"Palatino Linotype","Book Antiqua",Palatino, serif;
  color: black; 
}

a, dl, dt, dd, ol, ul, li, p {
  font-size: 1.10em; 
  font-family: Verdana,Geneva,sans-serif;
}

h1 {font-size: 2.50em;}
h2 {font-size: 2.05em;}
h3 {font-size: 1.70em;}
h4 {font-size: 1.45em;}
h5 {font-size: 1.30em;}
h6 {font-size: 1.20em;}

/*
The left, menu-box and menu classes are designed for non-adjustable
side-bar menus. Accompanying content should be contained in div.right.

The heights of div.left and div.right should be set to 100% if there is no
footer. If there is a footer, set them to 100% - footer % height.
The heights and top/bottom borders of div.logo and div.header should be equal. 
*/

div.left {
  display: block;
  float: left;
  height: 100%;
  width: 160px;
  max-width: 20%;
  background-color: transparent;
  overflow: auto;
}

div.logo {
  display: block;
  width: 100%;
  height: 112px;
  margin: 0px;
  border-top: 1px solid gray; /* border needed to align header & logo in FF */
  border-bottom: 5px solid gray;
  padding: 0px;
  background-color: transparent;
}

div.menu-box {
  display: block; 
  width: 140px;
  max-width: 88.5%;
  margin: 10px 5px 10px 5px;
  border: 0px none;
  padding: 5px;
  background-color: gray;
}

a.menu {
  display: block;
  height: 25px;
  width: 140px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  margin-top: 0px;
  font-size: 20px;
  background: url(greybutton.gif) no-repeat center center;
  white-space:nowrap;
  overflow: hidden;
}

a.menu:link {
  color:blue;   max-width: 100%; background-image: url(greybutton.gif);}
a.menu:visited {
  color:purple; max-width: 100%; background-image: url(greybutton.gif);}
a.menu:hover {
  color:green;  max-width: 100%; background-image: url(hoverbutton.gif);}
a.menu:active {
  color:red;    max-width: 100%; background-image: url(chosenbutton.gif);}

a.menu2 {
  display: block;
  height: 23px;
  width: 140px;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 18px;
  background: url(greybutton2.gif) no-repeat center center;
  white-space:nowrap;
  overflow: hidden;
}

a.menu2:link {
  color:blue;   max-width: 100%; background-image: url(greybutton2.gif);}
a.menu2:visited {
  color:purple; max-width: 100%; background-image: url(greybutton2.gif);}
a.menu2:hover {
  color:green;  max-width: 100%; background-image: url(hoverbutton2.gif);}
a.menu2:active {
  color:red;    max-width: 100%; background-image: url(chosenbutton2.gif);}

#m0 .m0, #m1 .m1, #m2 .m2, #m3 .m3, #m4 .m4 {
  /* commands for current menu selection go here */
  color:red;    max-width: 100%; background-image: url(chosenbutton.gif);
 }

#m-1 .m-1, #m-2 .m-2, #m-3 .m-3, #m-4 .m-4, #m-5 .m-5 {
  /* commands for current menu selection go here */
  color:red;    max-width: 100%; background-image: url(chosenbutton2.gif);
 }
div.right {
  display: block;
  height: 100%;
  width: auto;
  border-left: 1px solid gray;
  background-color: transparent;
  overflow: auto;
}

div.header {
  display: block; 
  width: 100%;
  height: 112px;
  margin: 0px;
  border-top: 1px solid gray; /* border needed to align header & logo in FF */
  border-bottom: 5px solid gray;
  padding: 0px;
}

h1.header {
  margin-top: 0.9em;
  margin-bottom: 0;
  text-align: center;
}

div.content {
  display: block; 
  width: auto;
  height: auto;    /* ensures background is always long enough for text*/
  min-height: 95%; /* ensures screen is always filled */
  margin: 0px;
  border: 0px none;
  padding: 1.5em;
  background-image: url(whitewash.gif);
}

div.footer {
  padding: 0.5em;
  color: white;
  background-color: gray;
  clear: both;
}