@charset "UTF-8";

/*******************************************************************************
*  crf_layout.css : 2010.14.10
* -----------------------------------------------------------------------------
*  A two column layout.
*
*  Small and simple in design (for a multi-column CSS layout) this should
*  provide web site managers with a solid, compatible design from which
*  to deliver content to their users.
*
* ------------------------------------------------------------------------------
*  This stylesheet is released into the public domain.
*******************************************************************************/

/* http://blog.urbanmainframe.com/2009/05/create-a-dynamically-resizing-background-image-using-css/ */

@import url(rMenu.css);

.clear {
	clear: both;		/* generic clearing element so that whatever comes after this element will appear below all floating elements above it */
}
.hide {
	display: none;		/* generic class to hide elements from CSS-capable browsers */
}

body {font-size:100%;}	/* set some default font sizes  */
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
h3 {font-size:1.375em;}
p {font-size:1.0em;}

html,body {
	background-color: #fff;
	color: #000;
	margin: 0;			/* void out browser-defined gutterspace */
	padding: 0;
	font-family: calibri, helvetica, sans-serif;
						/* calibri, the "IN" font for reading text on screens */

	width: 100%; 		/* added these for full-image bg */
	height: 100%;
}
#bg_image {				/* added this for full-image bg */
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 1;			/* This second layer contains the background image.   It is an img within a div. */
}
#scrollable {			/* added this for full-image bg */
	position: absolute; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0; 
	z-index: 2;			/* This 3rd layer contains the body content.  */
}
#sleeve {
	max-width: 999px;	/* max resolution - 25px to accomadate for the vertical scrollbar */
	min-width: 615px;	/* min resolution - 25px */
	margin: 0 auto;		/* auto horizontal margins will cause the layout to be horizontally centered (usually) */
}
#book {
	/*margin: 1em;*/		/* reserve some gutter space around the layout even in very low resolution */
	margin: 0.2em 1em 0.2em 1em;
	border: solid 1px #ccc;
	background-color: #fff;

	-moz-border-radius: 2em/2em;	/*New in Firefox 3.5*/
	-webkit-border-radius: 2em 2em;
	border-radius: 2em/2em; 
}
#masthead,
#page_title,
#footer {
	border: solid 1px #ccc;
	/*margin: 0.5em;*/
	margin: 0.2em 0.5em 0.5em 0.5em;
	padding: 1px 0.5em;

	border-top-style:none;	/* added these for crf */
	border-left-style:none;
	border-right-style:none;
}
#page_title,
#footer {					/* added this for crf */
	margin-bottom:0.2em;
	border-bottom-style:none;
}
#masthead {
	/*padding: 1em;*/
	padding: 0.2em 1em 0.2em 1em;
	margin-top: 0;
	margin-bottom: 0;
	background-image: url(../images/flair3.png);
	background-repeat: no-repeat;
	background-position: 100% 20%;
}
#masthead h1 {
	font-size: 1em;
	margin: 0;
}
#masthead h2 {
	font-size: 2em;
	margin: 0;
}
#main-menu {
	margin-top: -0.85em;	/* ( 1.2em (line height) + .5em (gutter) ) / 2 */

	
}
#main-menu ul.rMenu li a {
	border-color: #ccc;
	color: #000;
	background-color: #dff;

	padding-top: 0.25em;
	padding-bottom: 0.25em;
	line-height: 1.2em;		/* these last three are important to define if we're to vertically center this element on
							   the bottom border of the mastead. see previous selector */
 
	-moz-border-radius: 1em/1em;	/*New in Firefox 3.5*/
	-webkit-border-radius: 1em 1em;
	border-radius: 1em/1em; 
}
#main-menu ul.rMenu li a:hover {
	border-color: #ccc;
	/*background-color: #eee;*/
	background-color: white;
	color: #009;
}
#binding {
	/*padding-right: 2.1em;*/	/* 1.6em (width of #toolbox) + .5em (gutterspace) */
	padding-right: none;
}
#page {
	float: left;			/* #toolbox will float next to #page */
	width: 100%;
}
div.panel {
	border: solid 1px #ccc;
	padding: 1px 1em;
	margin: 0.5em;
	margin-bottom: 0;		/* don't rely on margin collapsing. simply have no bottom margin */

	border-top-style:none;	/* added these for crf */
	border-left-style:none;
	border-right-style:none;
}
div.borderpanel {
	border: solid 0px #ccc;
	padding: 1px 1em;
	margin: 0.5em;
	margin-bottom: 0;		/* don't rely on margin collapsing. simply have no bottom margin */
	/*background: white;*/
	background-color: #ffc;

	-moz-border-radius: 1em/1em;	/*New in Firefox 3.5*/
	-webkit-border-radius: 1em 1em;
	border-radius: 1em/1em; 
}

#left-column {
	float: left;
	width: 70%;				/* width of main column as a percent of the available horizontal space */
}
#left-column div.panel {
	margin-right: 0.25em;
}
#right-column {
	float: left;
	width: 30%;				/* 100% - <width of #left column> */
	font-size: 0.85em;		/* gutter space of panels inside #right-column is defined in EMs. If you change the font size of this column YOU MUST CHANGE
							   the gutter space dimensions of panels in this column. the formula here is simple:

							   ( 1 / <font size> ) * <target size>

							   Apply this formula and round to the nearest hundreth. Look below for some examples. */
}
#right-column div.panel {
	margin-left: 0.29em;	/* ( 1em / 0.85em ) * 0.25em = 0.29em */
	margin-right: 0.59em;	/* ( 1em / 0.85em ) * 0.5em = 0.59em */
	margin-top: 0.59em;		/* ( 1em / 0.85em ) * 0.5em = 0.59em */
}
#footer {
	padding: 1px 1em;
	text-align: center;
}
div.page_title {						/* added this for crf */
	padding: 1px 1em;
	text-align: center;
}
div.two-columns {
	width: 100%;
}
div.two-columns div.tc-left-column {
	float: left;
	width: 50%;
	vertical-align: top;
}
div.two-columns div.tc-right-column {
	float: left;
	width: 50%;
	vertical-align: top;
}
div.two-columns div.tc-right-align {
	text-align: right;
}
div.two-columns div.tc-left-column div.tc-panel {
	margin-right: 1em;
}
div.two-columns div.tc-right-column div.tc-panel {
	margin-left: 1em;
}
div.tc-border div.tc-left-column {
	margin-right: -1px;
/*	border-right: solid 1px #ccc; */
}
div.tc-border  div.tc-right-column {
/*	border-left: solid 1px #ccc;  */
}


/* CSS Hacks
 * --
 * These things are a necessity of CSS life. While I wish we didn't have to 
 * resort to such sillyness, if you want to keep your layout as compatible
 * as possible you need to invest in some CSS trickery like this for layouts
 * that go beyond a single column.
 *
 * The Key Hacks Used In this Layout
 *
 * [* html]			Any rule that starts with this will only be applied by
 *				Win/IE 6, Mac/IE 5 and earlier versions. This is a quick
 *				and dirty way to hide CSS from non-IE browsers
 *
 * [\*]			The backslash acts as an escape character for Mac/IE. Thus
 *				changing how it interprets the closing comment mark, 
 *				essentially causing Mac/IE to ignore it and treat anything
 *				that follows as part of a CSS comment until another,
 *				unescaped closing comment mark is found. This allows us
 *				to hide IE hacks specific to Windows from Mac users.
 *
 * [min-width:0]		- IE 7
 * [position:relative]	- IE 6
 * [height:0.01%]		- IE 5
 *				This is used to trigger hasLayout in Win/IE. hasLayout is 
 *				a unique property of IE's rendering engine that is the 
 *				root of almost every IE rendering bug. triggering hasLayout
 *				will often resolve a rendering issue in IE, although it
 *				can sometimes lead to other rendering bugs.
 *
 */
.clear {						/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;	/* this padding/margin hack is here for older Mozilla engines (Netscape 7, 6,
							   FireFox pre 2.0) which will not allow an element to clear unless it has some 
							   effect on how the rest of the layout renders (ie, it takes up space). 
							   Hidden from IE/Mac as it triggers a horizontal scrollbar. */
}
#page,
#left-column,
#right-column,
#toolbox {
	overflow: visible;		/* an old hack for Win/IE where the width of italicized text is not properly calculated
							   and leads to possibly breaking the layout. */
}
#main-menu {
	padding-left: 1em;
	padding-right: 1em;		/* for clients that can't center the menu, such as Mac/IE and Netscape 6 */
}
#book {
	min-width: 0;			/* for IE 7 */
}
* html #book {					/* hide from IE/Mac \*/
	position: relative;		/* for IE 6 */
}
* html #binding {
	height: 100%;			/* for IE 5.5 */
}
div.tc-right-column,
#right-column {
	margin-right: -1px;		/* for IE's rounding bug */
}
* html #masthead {
	background-image: none;	/* for IE 6 and earlier - can't really do
							   transparent PNGs */
}
* html #toolbox {
	margin-right: -100%;	/* for Mac/IE \*/
	margin-right: -1.6em;	/* reset for Win/IE */
}
* html div.tc-border div.tc-right-column {
	margin-right: -100%;	/* for IE */
}
* html div.tc-panel {			/* hide from Mac/IE \*/
	padding: 1px 0;			/* help IE ignore margin collapse */
}

/******************************************************************************/