@charset "iso-8859-1";

/*******************************************************************************
 * EXTERNAL STYLESHEETS
 *
 * visual_consistencies.css
 *   - sets margins and padding on generic HTML elements so that every browsers
 *     has the same values rather than relying on the default values which vary
 *     between browsers
 *
 * rmenu.css
 *   - menu system based on unordered lists. too much to explain here, see
 *     the referenced stylesheet for more information.
 */
 @import "visual.css";
 @import "rmenu.css";


.clear-columns
{
	clear: both;
}

#outer-column-container
{
	border-left: solid 13em;	/* left column's width and background color */
	border-right: solid 13em;	/* right column's width and background color */
}

#inner-column-container
{
	width: 100%;		/* forces this element to take the full width between the left and right columns */
}

#source-order-container
{
	float: left;		/* float left so the right column, which is outside this element, has a place to go. */
	width: 100%;		/* force this to go as wide as possible */
	margin-right: -1px;	/* make room for the right-column's overlap */
}

#left-column
{
	float: left;		/* float left, where it'll live */
	margin-left: -13em;	/* move it further left. the value here should be the same value as the left border width on #outer-column-container, but negative */
	width: 13em;		/* need to set a definite width, should be the same width as the left border width on #outer-column-container */
	margin-right: 1px;	/* overlap the middle column to help with clearing. */
}

#middle-column
{
	float: right;		/* middle column goes right of the left column since the two share the same parent element */
	width: 100%;		/* make the middle column as wide as possible for a fluid layout. this is not possible if it's parent element, #source-order-container, wasn't also at 100% width */
	margin-left: -1px;	/* make room for the left-column's overflap */
}

#right-column
{
	float: right;		    /* float on the right side of the layout */
	margin-right: -13em;	/* move it further right. the value here should be the same value as the right border width on #outer-column-container, but negative */
	width: 13em;		    /* need to set a definite width, should be the same width as the right border width on #outer-column-container */
	margin-left: 1px;	    /* overlap the middle column */
}

/*******************************************************************************
 * BASE THEME
 *
 * Setup basic styling for the layout. This will set gutterspace and generate a
 * basic border structure for the layout. Real layout styling belongs in a separate "theme" stylesheet */

body
{
	background-color: #FFFAFA;
	color: #000;
	padding: 0;			/* padding on the body element when javascript min-width is in use will create problems in IE/Win 6. */
	margin: 14px 0;		/* horizontal margins belong on #page-container. vertical margins are not there as well due to small
					       rendering issues in IE/Win 5 when viewport is shorter than webpage */
    scrollbar-base-color: #009393;
    scrollbar-arrow-color: #fff;
    scrollbar-DarkShadow-Color: #20B2AA;
}

html {
    scrollbar-base-color: #009393;
    scrollbar-arrow-color: #fff;
    scrollbar-DarkShadow-Color: #20B2AA;
}


#page-container
{
	background-color: #f5f5f5;	/* background for the middle column */
	border: solid 2px #009393;	/* border around the entire layout */
	min-width: 600px;		    /* limit how narrow the layout will shrink before it stops. */
	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.) */
}

#masthead
{
	padding-top: 1px;		            /* hack to force the entire masthead to receive the background color */
	border-bottom: solid 2px #009393;	/* three of the four sides of this block will already have borders courtesy of the #page-container element so we 
					                       only need to render the bottom. */
}

#inner-column-container
{
	border: solid 2px #009393;
	border-width: 0 1px;
	margin: 0 -1px;			/* compensate for the borders because of 100% width declaration */
}

#middle-column div.rMenu-center
{
	border-bottom: solid 2px #009393;	/* border along the bottom of the horizontal menu at the top of the middle column */
}

#footer
{
	border-top: solid 2px #009393;	/* same situation as the masthead but this time we're rendering the top border. */
	padding-bottom: 1px;		/* hack to force the entire footer to receive the background color */
}

.inside
{
	margin: 10px;			/* margin, instead of padding, used to induce margin collapse if needed by child elements */
}

/* COMMON Browser HACKS USED HERE */
 
.clear-columns
{
	/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;		
}

* html #page-container
{
	/* \*/ height: 0.1%;	/* IE/Win 5 needs this to prevent rendering issues if a minimum width is applied to this element and the viewport is sized
				               narrower than it's minimum width. however this breaks IE/Mac so a comment hack is used to hide it. */
	position: relative;	    /* IE/Mac 5.0 seems to need this. without it any child element with position: relative isn't rendered. */
}

* html #middle-column, * html #left-column, * html #right-column,
* html #source-order-container
{
	/* hide from IE/Mac \*/
	overflow: visible;	    /* a bug through IE/Win 6 causes the widths of text boxes to be calculated narrower than they render, causing overflow of their parent
				               elements. we need to explicitly handle this overflow. IE/Win 5.0 does not handle visible overflow correctly and so on some layouts,
				               at some viewport widths you'll get a horizontal scroll bar. */
	/* hide from IE/Mac \*/
	position: relative;	    /* this resolves rendering bugs in IE/Win. without this the columns don't render on screen or text jog. */
}

* html #middle-column
{
	margin-right: -4px;	    /* fix 3-pixel text jog in IE/Win 5.0. -4px because we also have to compensate for the overlaps from the left and right columns */
	margin-right/* */: 0;	/* reset value on 5.5 and later using comment hack to hide this rule from 5.0 */
}

* html #middle-column .inside
{
	margin-right: 14px;		    /* compensate for negative margin in previous rule */
	margin-right:/* */: 10px;	/* reset margins for 5.5 and later */
}

* html #masthead, * html #footer
{
	/* hide from IE/Mac \*/
	height: 0.1%;		/* this is to fix an IE 5.0 bug. setting this value forces these elements to contain their child elements, meaning margins will no longer collapse. */
	height/**/: auto;	/* reset for IE/Win 5.5 and later by hiding this rule from 5.0 with the empty comment hack. also hidden from IE/Mac for the same reason. */
}

* html #masthead .inside, * html #footer .inside
{
	margin-top: 0;
	margin-bottom: 0;	/* since margins no longer collapse due to previous rules we remove vertical margins from the .inside class */
	margin/* */: 10px;	/* reset for IE 5.5 and later */
}

* html .inside
{
	margin: 10px 0.75em;	/* i don't yet understand this bug in IE 5.0 which forces the right column down if the side margins are at a very specific value.
				               if your side column widths are set in EMs, 0.75em seems to work fine. */
	margin/* */: 10px;	    /* reset for IE 5.5 and later */
}

* html #inner-column-container 
{
	display: block;
}

* html #source-order-container
{
	margin-right: -100%;	    /* IE/Mac will force #source-order-container  to the width of #left-column, even though that element is no longer inside it. this
				                negative margin will help IE/Mac keep the three columns together under narrower viewports than normal.*/
	/* \*/ margin-right: -1px;  /* reset the above hack for IE/Win */
}