/* 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) */

#block_1
	{
	float: left;
	width: 57%;
	margin-left: 18%;
	/* padding: 0px 5px 0px 5px;  */
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
  /* if padding too big for 312 layout, block 2 moves to bottom 
	and block 3 disappears, adjust width lower 0.5% if needed */
	width: 23%;    /* was 24%, IE7 columns fail on 1280 screen */
	}
#block_3
	{
	float: left;
	width: 18%;
	margin-left: -98%;	
	/* calculator said 98%, 99% doesn't overwrite left edge of middle column in FF */
	}
#block_1 .lulv, #block_2 .lulv, #block_3 .lulv { width: auto; min-width:4.5em; max-width:95%; }
#block_2 .lulv li, #block_3 .lulv li { max-width: 95%; }
#block_1 #tablist, #block_2 #tablist, #block_3 #tablist  {
	white-space:nowrap; min-width: 20em; overflow:auto;
	/* overflow scroll doesn't work on Droid (truncates menu), and shows scroll bar always.
	Overflow auto shows scroll bar only if needed, e.g. huge text size. 
	Best to keep menu narrow instead */
	}



/* 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: '[DO NOT LEAVE IT IS NOT REAL]';
	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: 57%;
	}
#block_2 .verticalalign
	{
	width: 23%;
	}
#block_3 .verticalalign
	{
	width: 18%;
	}

/* 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: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;
	float: left;
	}
/* 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, * > #notes, * > .output
	{
	position: relative;
	z-index: 1000;
	}

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



.box-footer
	{
	clear				: both;
	}
#site-link-menu {
	float				: left;
}

#column-one-content, #column-two-content, #column-three-content
	{
	margin				: 0px;
	padding				: 2px;
	border				: none;
	text-align:left;
	}
/* GUTTERS BETWEEN COLUMNS */
#column-one-content
	{
	margin-left: 5px;
	margin-right: 5px;
	}


/***************************/
/* ie8 fix for the links   */
/***************************/
/*/
#column-one a, #column-two a, #column-three a {position:relative;}
/**/



/* 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 */

/* best way to specify line-height
-- Specifying a body line-height 18px the value gets inherited throughout the page. If a unitless line-height had been specified, the multiplier would have been inherited, resulting in line-heights being rendered proportionally to the text size, thus breaking the vertical rhythm. 18px line-height is not scaled by IE6 and IE7 when text is resized, meaning the largest setting appears to squash the text. 
-- body tag - line-height:1.125em; (16pt×1.125=18pt)
accurate, consistently resized text and line-height across all browsers.
*/

body {
	/* allow room for putting siteheader after content */
	/* margin-top: 3.5em; */
	}

/* ====================================================================
box styling
-------------------------------------------------------------------- */
.box-wrap
	{
	padding: 0px;
	margin-top: 0em; 
	}
.box-header
	{
	margin: 0 0 2.2em 0; /* height of page menu */
	padding: 0px;
	border: none;
	}
.box-footer
	{
	margin: 0px;
	width:98%; /* necessary for IE7 or gives horiz-scroll bar */
	padding: 6px;
	border: none;
	}

#page-menu {
	position:absolute;
	top: 2.8em; left: 0; right:0px;
	padding:0px 5px;
	height: 1.5em;
}
.box-wrap #tablist {
	/* tablist menu within column 2 or 3 */
	line-height:2.0em;
}

#block_1 .tabcontainer, #block_1 #tablist { margin: 0 5px 0 5px; }