.clearfix:after {
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}

.clearfix {zoom: 1.0;} /* to trigger hasLayout in IE (zoom is not part of the css standard) */

/*
OR
.clearfix {display: inline-block;} to trigger hasLayout in IE
.clearfix {display: block;}
*/

/*----------------------------------------------------------------------------*/

body {
   margin: 0px;
   padding: 0px;
}

#top {
   position: relative;
   z-index: 2;
   
   margin-bottom: 10px;
}

#menu {
   position: absolute;
   z-index: 1;
   
   top: 106px;
   width: 100%;
   height: 29px;
}

#seperator {
   position: relative;
}

* html #seperator {
   /* height: 1%; */ /* IE6 fix for relative container else curvers move out of position - do not know about IE7 */
}

#IE #seperator {
   /* height: 1%; */ /* IE6 fix for relative container else curvers move out of position - do not know about IE7 */
}

#seperator-left {
   float: left;
  
   width: 135px;
   height: 33px;
}

#seperator-right {
   float: right;
   
   width: 160px;   
   height: 50px;
}

#seperator-middle {
   margin-left: 135px;
   margin-right: 160px;

   /*
   left: 135;
   width: expression(document.body.clientWidth - 295);
   */

   height: 33px;
}

* html #seperator-left {
   margin-right: -3px;  /* IE6 fix for 3px margin bug */
}

* html #seperator-right {
   margin-left: -3px;  /* IE6 fix for 3px margin bug */
}

* html #seperator-middle {
   margin-left: 0;   /* IE6 fix for 3px margin bug */
   margin-right: 0;  /* IE6 fix for 3px margin bug */

   /* height: 1%; */
   /* width: 100%; */
}

#left-curver {
   position: absolute;

   top: 33px;
   left: 135px;
   
   width: 19px;
   height: 17px;
   
   font-size: 1px;  /* preseves the correct top position of the curver when 'View ==> Text Size is set to Largest' */   
}

#right-curver {
   position: absolute;
   
   top: 33px;
   right: 160px;
   
   width: 19px;
   height: 17px;
   
   font-size: 1px;  /* preseves the correct top position of the curver when 'View ==> Text Size is set to Largest' */   
}

#main {
   clear: both;
}

#main-left {
   float: left;

   margin-left: 10px;
   width: 175px;
}

#main-right {
   float: right;

   margin-right: 0px;
   width: 160px;
}

#main-middle {
   /* Note: adding height here causes IE to have a small gap between the middle and floats */
  
   margin-right: 175px;
   margin-left: 200px;
}

* html #main-left {
   margin-left: 5px; /* IE6 fix for margin bug */
}

* html #main-right {
}

#IE #main-middle {
   /* seems nothing here is needed */
}

* html #main-middle {
   /* width: 100%; IE6 quirks mode fix, else main-middle content - I guess having tables with 100% width - expands and drops bellow columns */
   zoom: 1.00; /* fire haslayout - fixes problems for both IE6 quirks and standards modes */
}

#page-footer {
   clear: both;
   
   /*
   position: relative;
   top: 0%;
   left: 0%;
    
   width: 100%
   */   
}

#general-footer {
   clear: both;
}

.clearDiv { /* is this needed ?! */
   clear: both;
   height: 1em;
   height: 1%;
   height: 0px;
   width: 100%;
   background-color: olive;
}