/* This file is a full 312 layout, the 1st column in the center, 2nd column on the right, 3rd column on the left. Make all columns automatically same height, without use of spacer images. Compatible with many browsers (has several CSS hacks) */
/* based on One True Layout, Equal Height */

body {
	min-width:35em; /* 34em so block_3 19%>6em, and block_2 25%==8.5em */
	}
#block_1
	{
	float: left;
	width: 55%;	/* 55% */
	margin-left: 19%;	/* 19% */
	text-align:left;
	}
#block_1 textarea {
	width:19em;	/* .55*35em */
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
  /* if padding too big for 312 layout, block 2 moves to bottom 
	and block 3 disappears, adjust width lower 0.5% if needed */
	float: left;
	width: 25%;    /* 25% (was 24%, IE7 columns failed on 1280 screen) */
	text-align:left;
/* Tried min-width:8em, to make column fall below block_1 at high text sizes, instead of displaying form fields past edge of screen. But, block_3 margin-left -99% sends off screen if block_2 falls below. Instead I tried to set min-width of body to 32em, so get body horizontal scroll bar if text zoom maximum. Then, 25% too narrow for long words, e.g. "communication," (7.5em), add 1 em for borders and padding, 8.5em=25%, so use 34em for body.
At max text zoom, 1em = 48px in Firefox (3x zoom); so 8.5em takes 408px, if that is to take 25% of the screen, would need a 1632px display width (plus window borders).
Also set input field min-width 8em (not auto).  */
	}
#block_3
	{
	float: left;
	/* adjust margin-left so doesn't overwrite left edge of middle column in FF */
	margin-left: -99%;	
	width: 19%;
	min-width:6em;
	text-align:left;
	}

/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#block_1, #block_2, #block_3
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#block_1:before, #block_2:before, #block_3:before
	{
	content: '[Lerner Consulting]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/* End Mac IE5 filter */
/* IE Win can be a bit out - you might need to adjust  
bottom value by -1px or as required */
.verticalalign
	{
	position: absolute;
	bottom: 0;
	}
#block_1 .verticalalign
	{
	width: 55%;
	}
#block_2 .verticalalign
	{
	width: 25%;
	}
#block_3 .verticalalign
	{
	width: 19%;
	}

/* hack for Opera 7+ */
@media all and (min-width: 0px){
.verticalalign
	{
	width: 100% !important;
	}
/* But Opera 9 does it right, so CSS3 hax to the max */
div[id^="wrapper"] #block_1 .verticalalign
	{
	width: 57% !important;
	}
div[id^="wrapper"] #block_2 .verticalalign
	{
	width: 23% !important;
	}
div[id^="wrapper"] #block_3 .verticalalign
	{
	width: 18% !important;
	}
}
/* hack for IEs of all persuasions before IE7 */
* html .verticalalign
	{
	width: 100% !important;
	}
.verticalalign p
	{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
	background: #996666;
	}
#wrapper_extra
	{
	position: relative;
	}
* html #wrapper
	{
	position: relative;
	}
#wrapper
	{
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	}
/* we need this for IE 5.01 - otherwise the columns vanish */
* html #wrapper_extra
	{
	float: left;
	width: 100%;
	/* IE 6 min/max-width hack, set values not equal or IE6 can lock up */
/* makes columns fail in IE7 on 1280 screen:  	min-width: expression(document.body.clientWidth < 742 ? "740px" : document.body.clientWidth > 1202 ? "1200px" : "auto");  */
min-width: expression(document.body.clientWidth < 742 ? "740px" : document.body.clientWidth > 1302 ? "1190px" : "auto");
	/* end min/max-width hack */
	}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
	{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[Lerner Consulting]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;
	float: left;
	width:99%;	/* match sum of columns above */
	}
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form
	{
	position: relative;
	z-index: 1000;
	}

/* done with One True Layout, Equal Height */


/* http://www.alistapart.com/articles/howtosizetextincss Best way to specify text size  -- tested in Safari 2, Firefox 2 and Opera 9.5a running on Mac OS X Tiger, along with Internet Explorer 6 (IE6) and Internet Explorer 7 (IE7) running on Windows XP with ClearType turned on */
/* -- in each browser, the default text size is consistently 16px when no styles are applied (other than the browser defaults)
-- for most people (designers, clients, and their customers) 16px is too large for body text. In our example, the body text was reduced to 14px, with the sidebar set at 12px
-- if specify font size in px, Safari and Firefox still resize the text, whereas IE6 and IE7 do not.
-- text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.
.875em = 14/16 of default size
.75em = 12/16 of default size
-- fix is to add line for body font-size=100% and sizing in ems works well
-- end of text size comment */


#site-link-menu {
	float: left;
}

#page-menu {
	position:absolute;
	top: 2.8em; left: 0; right:0px;
	padding:0px 5px;
	height: 1.5em;
}

/* left and right for things like sidebars or pictures with captions */
.left {
	float: left;
	margin-left: 6px;
	width: 43%;
	padding: 5px 5px 5px 0;
}
html>body .left {
/*** IE doubles the margin on the float. This sets
		the margin to the correct width for others ***/
	margin-left: 12px; 
	} 
.right {
	float: right;
	margin-right: 6px;
	width: 43%;
	padding: 5px 5px 5px 0;
	}
html>body .right {
/*** IE doubles the margin on the float. This sets
		the margin to the correct width for others ***/
	margin-right: 12px; 
	} 


/* Layout hacks for multiple-browser compatibility */

/* ===== Start of ClearFix */
/* from http://positioniseverything.net/easyclearing.html */
/* Non-IE make boxes enclose floated content, even if enclosed float would be longer than container's normal size */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
/* even simpler than clearfix, works wide range of browsers
adding a overflow:auto to the outer DIV
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */


/* for IE/Mac */
.clearfix {display: inline-block;}

/* for clearfix on IE - IE/Win spec violation causes all boxes to expand and enclose all content, regardless of any stated dimensions that may be smaller! So that 1% height will just be expanded to whatever value is needed to contain the float, and the mere fact of applying a dimension triggers the "auto-float-enclosing" behavior. As a side benefit, this stated dimension also prevents several other major IE/Win float bugs. However, should this container box be placed following a previous external float, the IE height fix will trigger Microsoft's proprietary and illegal Float Model, so watch out for that, okay? */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* ===== end of ClearFix */

/* ===== Start of box-clear */
/* ====================================================================
box-clear requires all sorts of hackery because of the way the
different browsers cope with clearing floats
see [#   #]
-------------------------------------------------------------------- */
.box-clear { clear: both; line-height: 0px; font-size: 1px; }
/* IE5 (mac) dealt with, now reset font-size for Geckos,
turn off for IE5 (PC) + OmniWeb and back on for IE6 (PC)
see [http://www.fu2k.org/alex/css/test/OmniWebInlineHack.mhtml] */
/*\*/
.box-clear { font-size: medium; }
.fake.box-clear { display: none; }
/* */
/* Turn off for Opera 6 and below */
html>body div.box-clear { display: none; }
/* And turn it back on again for good honest browsers
see [http://www.albin.net/CSS/OwenHack.html] */
head:first-child+body div.box-clear { display: block; }
/* ===== End of box-clear */