/*************************************************************************
*	two-column.css - page layout style sheet 
* ------------------------------------------------------------------------
*	D.C.Stone June 2007
* ------------------------------------------------------------------------
*  The following content is taken as-is or modified from 
*    skidoo_redux.css : 2007.01.31 : ruthsarian@gmail.com
*  and
*   "Full-length columns using CSS borders and negative margins"
*   http://www.bergamotus.ws/
*  which is based on the Ruthsarian design
* ------------------------------------------------------------------------
*  This provides the basic structure for a page layout with a continuous
*  side bar on the left and/or right
**************************************************************************/


html, body {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

body {
	color: #000000;					/* Default black text on white background */
	background-color: #FFFFFF;
	font-size: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.4;
}

/** page-container
*   --------------
*   - wraps the whole content to keep everything together.
*
*	Note that if you set a border here, you will need to compensate
*	by reducing the body's width correspondingly, or you will always
*	have a horizontal scroll bar on your window!
*
*	The CSS attribute min-width is not supported in Windows IE < latest 6
**/
.page-container {
	width: 100%;					/* use maximum available room */
	min-width: 600px;				/* limit how narrow the layout will
					   					shrink before it stops. */

	/** Un-comment the line below to explicitly set
		left-right margins for the entire page. **/
		
/*	margin: 0 14px;					/* horizontal margins here instead of on 
					   					the body because we're setting min-
					   					width on this element. if margins set 
					  					on body users will see an odd skip in 
					   					the layout's rendering as it's 
					   					resized below min-width. (JS-based 
					   					min-width only.) */
	
/*	remove comment to set background on this...

	background: green;				/* background colour to help locate elements during layout */
}

/** page-header
*   -----------
*   - extends across whole width of page, above the main content and side
*	panels
**/
.page-header {
	background-color: #EEEEEE;		/* default light-grey banner */
	color: #000099;					/* default dark blue text banner */
	border: 1px solid #CCCCCC;
	padding: 1px 0.7em; 			/* avoid margin collapse; 1 px tb and 0.7em lr */
}

/** main-wrapper
*   ------------
*   - this keeps everything between the page-header and the page-footer
*   together, regardless of how it is subdivided; pretty much entirely
*   layout organization only.
*
*	Set a different background to other classes if you want to reveal any
*	unused area in the central column; set the border-left and border-right
*	colours to the same as the left and right side panel backgrounds UNLESS
*	you want to see unused space there also.
*
*	NOTE: if you need to change the width of either the left or right panels,
*	be sure to change the corresponding border here!
**/
.main-wrapper {
	border-left: 10em solid #F8F8F8;	/* Reserve 10em of space on left for side panel */
	border-right: 1px solid #F8F8F8;	/* Reserve room for content border */
	position: relative; 				/* for WinIE */
	
/*	remove comment to set background on this...

	background: #0000FF;			/* background colour to help locate elements during layout */
}

/** inner-content
*   -------------
*	- keeps the actual main content and the right-hand panel
*	together within the main wrapper, but allows the left-hand
*	panel to be positioned beside this content
**/
.inner-content {
	width: 100%;
	float: right;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 0 1px;			/* puts borders between middle and the side columns. */
	margin: 0 -1px;					/* compensate for the borders because of
				   													100% width declaration */
}

/** page-content
*   ------------
*   - this is the container for the actual content of the page,
*   which goes between the left and right side bars. If you want to,
*	you can set a width of e.g. 92%, which ensures that there is always
*	some room on the side (before the right side panel.)  Make sure this
*	has the same background as main-wrapper unless you want to see where
*	the page-content stops within the centre column.
**/
.page-content {
	background: #FFF;				/* default black text on white background */
	color: #000;
	padding: 0.5em 1em;				/* 0.5em top and bottom, 1em left and right */
	float: left;					/* should position on left edge of inner-content */
}

/** page-sidebar-left
*   -----------------
*   - contains the left-hand side bar within the page-container,
*   which could be a navigation menu (just as an example)
*
*	See the notes on sizing in page-sidebar-right!
**/
.page-sidebar-left {
	background: #F8F8F8;			/* default pale gray background */
	color: #000000;					/* default black text */
	width: 9em;         			/* 1em less than .main border width */
	margin-left: -10em;				/* overlay left border exactly */
	padding: 1px 0.4em;				/* 1px top and bottom, 0.4em left and right */
	float: left;					/* keep it to the left of inner-content within main-wrapper */
	position: relative; 			/* avoid WinIE peekaboo bug */
	
	border-top: 1px solid #CCCCCC;
	margin-top: -1px;
}

/** page-footer
*   -----------
*   - sits at the very bottom of the page to finish it up;
*   contains copyright, contact, modification date, etc.
**/
.page-footer {
	clear: both;
	background:#999999;				/* default mid gray background */
	color: #eee;					/* default light grey text */
	padding: 1px 0.5em 0.5em 0.5em; /* avoid margin collapse */
	border-top: 1px solid #666666;

}

/* clear floats to stretch column lengths */
.main-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* zoom stretches float containers in WinIE. If you're a 
stickler for validation, put this in a conditional comment
in the head of the html file or as an extra style definition
.main-wrapper {
	zoom: 1;
}
 */

/* inline-block stretches float container in MacIE
   and prevents bizarre container widths */
* html>body .inner-content,
* html>body .page-content,
* html>body .main-wrapper {
	display: inline-block;
}

/* end float clearing */
* html>body .page-content {
	margin-right: -100%;
}