/*******************************************
   CSS FILE FOR BAYLEYS WATERFRONT - LAYOUT STYLES
   COPYRIGHT 2008  gerard@phosphor.co.nz
*******************************************/
/*
   <body>
     <div id="mainContainer">
       <div id="header">
         ...
       </div>
       <div id="content">
         ...
       </div>
       <div id="footer">
         ...
       </div>
     </div>
   </body>
*/

body { background-color: white; }
html, body { height: 100%; }
body.flash { 
  margin: 0;
  padding: 0;
  height: 100%;
}

#flashContainer { 
  width: 100%;
  height: 100%;
}

#mainContainer { 
  width:900px;
  margin: 0 auto;
}

/**********
   HEADER
   
   <div id="header">
     <img class="logo" />
     <ul id="featureNavigation" />
     <form id="search" />
   </div>

*********/ 

#header { padding-top: 36px; }

#homeLink h1 { 
  background: white url(/userfiles/images/header.png) top left no-repeat;
  padding-top: 64px;
  height: 0;
  overflow: hidden;
}


#navBar { 
  background: #789CB0;
  padding: 0;
  margin: 0 3px;
}

#featureNavigation { 
  float: right;
  background: transparent;
  padding: 0;
  margin: 0 inherit;
}

/*********
   Content
   **********/

#content { 
}

#content .body { 
  clear: both;
  padding: 20px 0 20px;
  height: 298px;
  background: transparent url(/userfiles/images/content.jpg) top left no-repeat; 
}

/* Frontpage - Template
<div id="content">
  <div id="textBlock">
    ...
  </div>
  <div id="map">
   ...
  </div>
</div>
*/

#textBlock { 
  margin: 0 0 10px 30px;
  float: left;

  width: 475px; /* +5px padding*/
  height: 270px; /* +20px padding*/
  padding: 0 5px 10px 0;

  /*overflow: auto;*/
}

#map { 
  /* margin-left = #textBlock:( width + padding + margin ) + 0px; */
  /*   (the 0px is the gap between #map and #textBlock) */
  /* Didn't work in firefox 2 */
  /* margin-left: 540px ; */
  margin-left: 20px;
  float: left;
  /* width = #mainContainer:width(800px) - margin; */ 
  width: 355px;
  height: 300px;
  background: transparent;
}

/********
   Footer
*******/
#footer { 
  height: 40px;
  clear: both;
  background: white;
}

#flashContainer a { 
  display: block;
  margin: 40px auto;
  font-size: 15px;
  width: 100%;
  height: 100%;
  text-align: center;
}
