/* layout styles ------------------------------------------------------------------------------------------------------------------ */

  body, html {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  body {
    background-image: url('../images/background_day.jpg');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-color: #D3E6FA;
  }
  
  body.night {
    background-image: url('../images/background_night.jpg');
    background-color: #172632;
  }
  
  body.day-clear {
    background-image: url('../images/background_day_clear.jpg');
  }
  
  #layout {
    position: absolute;
    left: 50%;
    top: 0px;     
    height: 100%;
    margin-left: -420px;
  }
  
  /* navigation styles */
  
  #navi {
    position: absolute;
    left: 50%;
    margin-left: -438px;
    bottom: 0px;
    height: 100%;
    width: 215px;
    padding: 0px;
    background-image: url('../images/navibar_winter.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 300;
  }
  
  #navi-main {
    height: 186px; /* 186px + 74px = 260px = height of navi_bond.png */
    padding: 74px 0px 0px 66px;
    margin: 34px 0px 0px 1px;
    background-image: url('../images/navi_bond.png');
    background-position: 0px 0px;
    background-repeat: no-repeat;
  }
  
  #navi-aux {
    position: absolute;
    left: 0px;
    bottom: 52px;
    padding-left: 60px;
    margin: 0px;
  }
  
  #navi-page {
    margin: 22px 0px 0px 0px;
    clear: both;
  }
  
  /* content area layout styles */
  
  #content {
    position: absolute;
    left: 50%;
    margin-left: -261px;
    bottom: 36px;
    width: 490px;
    height: 75%;
    overflow: auto;
    z-index: 100;
    
    padding: 0px 80px 0px 80px;
  }
  
  /* header / footer */
  
  #header {
    position: absolute; 
    left: 50%; 
    margin-left: -261px;
    bottom: 82%;
    background-image: url('../images/header_day.gif'); 
    background-position: bottom center;  
    background-repeat: no-repeat; 
    height: 90px; 
    width: 650px;
    z-index: 200; 
  }
  
  body.night #header {
    background-image: url('../images/header_night.gif'); 
  }
  
  #footer {
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    background-image: url('../images/footer_day.gif'); 
    background-position: bottom center;  
    background-repeat: repeat-x; 
    height: 64px; 
    width: 100%;
    z-index: 50; 
  }
  
  body.night #footer {
    background-image: url('../images/footer_night.gif'); 
  }
  
  #footerTop {
    position: absolute; 
    bottom: 0px; 
    left: 50%; 
    margin-left: -232px;
    background-image: url('../images/footertop_day.gif'); 
    background-repeat: no-repeat; 
    height: 64px; 
    width: 570px;
    z-index: 200; 
  }
  
  body.night #footerTop {
    background-image: url('../images/footertop_night.gif'); 
  }
  
  #spacer {
    margin-top: 36px;
    clear: both;
  }