﻿
/* COLUMN WIDTHS for use on SGM Lifewords website. XIM Ltd 2007-Oct
   Widths and positioning are calculated as follows. All content columns are 
   contained within div id="mainWrap". The left column is used for the 
   navigation tree (and is hidden in some layouts). Columns have padding of
   20px on left and 19px on right (defined in .column{} in lifewords.css).
   
   leftColumn:  left  = 0px; width: 145px;
   midColumn:   left  = leftColumn.width + 40px (unless leftColumn is hidden)
                width = dependent on style.
   rightColumn: left  = midColumn.left + midColumn.width + 40px
                width = dependent on style.
   spanColumn:  (used in 3colWide): left as for midColumn. 
                Width is enough to span mid and right
*/


	/* CSS CODE SPECIFIC FOR IE5.5 and IE6 */
	/* earlier browsers incl IE55 and IE6 that don't render the column layout
	 * properly get a scrollbar on mainWrap (one scrollbar at right to scroll
	 * all columns together). Newer browsers that understand the child selector 
	 * ">" don't get this scrollbar but implement scrollbars "properly" on the
	 * individual columns.
	 *
	 * This code is ONLY required for this span layout. Other layouts that use 
	 * 100% of the height of mainWrap for the columns use height: 100% for the mid
	 * and right columns, which results in correct column height in IE6 */
#mainWrap {height: 100%; overflow-y: auto; }
 body>#mainWrap {overflow: hidden; }
   /* END OF CSS CODE SPECIFIC FOR IE5.5 and IE6 */


div#leftColumn { 	
	width: 145px; 
	left: 0px;
	text-align: left;
	height: 100%; /* required for correct rendering in IE6 */
} 

div#spanColumn {
	width: 733px;  height: 160px;
	left: 185px;
	z-index: 9; /* DW bug doesn't render top margins of mid and right: use z-iindex to bring Span to front*/
}

div#midColumn {	
	width: 346px;   
	top: 0px; /* top of this column is masked out by spanColumn */
	margin-top: 170px;  
	left: 185px;
	/* height: 100%; ** CANNOT USE HEIGHT 100% with SPAN column above and margin-top > 0 */
	/* height: 262px;  breaks height stuff in FireFox and IE7*/
}

div#rightColumn {	
	width: 347px; 
	top: 0px; /* top of this column is masked out by spanColumn */
	margin-top: 170px;
	left:  571px; /*185+ 342 + 40 */
	/* height: 100%; ** CANNOT USE HEIGHT 100% with SPAN column above and margin-top > 0 */
	/*height: 262px;  breaks height stuff in FireFox and IE7*/
}


