/*
This is a more generic 2 col layout. 
It has no built in margins or padding on the sides of the content box, so will fit in updated site layouts as well. Default widths can be overridden inline, as is use $templateOR['boxwidth']=900 with this.


basic page setup would go like so:

<div id="centering">
<div id="container">
<div id="leftColumn">
<div id="leftColMargin">
<div id="breadcrumb></div>
<img src="header image" id="headerImage">
<div id="bananaBox> <!-- for the gray outlined box layout -->
left
</div><!-- END bananaBox -->
</div><!-- END leftCOlMargin -->
</div><!-- END leftColumn -->

<div id="rightColumn">
right
</div><!-- END rightColumn -->

</div><!-- END container -->
</div><!-- END contering -->
*/


div#centering {
  text-align:center;
}

div#container {
  margin:0 auto;
  text-align:left;
  width:790px;
  padding-top: 10px;
}

div#container div#leftColumn{
  width:490px;
  float:left;
}

div#container div#leftColMargin {
  margin-right:30px;
}

div#container div#rightColumn{
  width:300px;
  float:left;
}

div#breadcrumb {
  margin-bottom:5px;
}

div#bananaBox {
  border:1px solid #999999;
  border-top:none;
}

/* to defeat that extra white space in IE */
img#headerImage {
  vertical-align:bottom;
}