@charset "iso-8859-1";

/*******************************************************************************
*  skidoo_redux.css : 2007.01.31 : ruthsarian@gmail.com
* -----------------------------------------------------------------------------
*  Skidoo is a three-column, float-based layout utilizing negative margins to
*  provide column placement and cross-browser compatibility. There have been
*  several incarnations of this layout: original skidoo, skidoo too, and now
*  skidoo redux. This is the latest, most compatble and up-to-date version of
*  the skidoo layout available. It is recommended you use this layout and not
*  an older version of skidoo.
*
*  This layout is not for the faint of heart. Beginners will have problems
*  understanding the nuances, but through a little experimentation of different
*  variables, should be able to gain an understanding of what does what. For
*  experienced developers this is best served as a reference tool, explaining
*  what bugs are experienced on what browsing platforms for this and similar
*  layouts. It could be used as a map in working your way through bugs that
*  exist in your own layout.
*
*  DISCUSSION TOPICS
*    - why left/right margins need (semi-)static widths (ie. no percentages)
*    - setting width of left/right columns
*    - why columns drop
*    - a general overview of float-based layouts and why they're "funny"
*
*
* ------------------------------------------------------------------------------
*  This stylesheet is released into the public domain.
*******************************************************************************/

/*******************************************************************************
 * 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_consistencies.css";
@import "rmenu.css";

/*******************************************************************************
 * BASIC LAYOUT MECHANICS
 *
 * GENERAL NOTES
 *   - yes, that's a lot of DIVs for a three-column layout. there is a reason
 *     it all. first, all the columns must be floated to prevent a 3-pixel text
 *     jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around
 *     this one and need the extra markup. But using all floats can have
 *     positive consequences, especially when using floated elements that need
 *     to be cleared, but without clearing the other columns of the layout.
 *   - NEGATIVE MARGINS is an approach to the three-column CSS layout that seems
 *     to have the most compatibility and potential. the real strength of this
 *     idea is to have the ability to provide different colors (or images) as
 *     the background for each column. traditional three-column layouts can't
 *     do this because the columns are only as tall as needed to fit their
 *     content. in other words they don't run the full height of the layout.
 *     negative margins gives us a means to fake this functionality. borders
 *     (or padding, or margins) applied on #outer-column-container reserve the
 *     space where the left and right columns will live. all three columns are
 *     floated. since the columns are cleared inside #inner-column-container,
 *     #inner-column-container (and #outer-column-container) will be as tall as
 *     the tallest of the three columns. this means the borders will also be
 *     this tall, giving the visual appearance that all three columns are the
 *     same height. one "gotcha" on this approach is that the two side columns
 *     won't be cleared if they exist entirely outside the space of the parent
 *     element (#inner-column-container) where we clear the three columns. So
 *     they need to be made to overlap the area of the middle column by at
 *     least 1 pixels. This is why the outer columns have a 1 pixel margin on
 *     their inner edge and the middle column (and source-order-container)
 *     have negative margins (to make room for the 1px margin from the outer
 *     columns).
 *

 * #page-container
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 *
 * #outer-column-container
 *   - reserves space for the left and right columns. using borders allows you
 *     to use the border color to act as the background color for the left and
 *     right columns. background color could then act as the background of the
 *     middle column.
 *
 * #inner-column-container
 *   - provides the single-pixel black border between the middle column and
 *     its outside brothers.
 *
 * #source-order-container
 *   - source ordered layouts place the main content at the top of the page. to
 *     do this with CSS in a three-column layout you need to wrap two of the
 *     three columns in an element (DIV) to float them together as if it was a
 *     a single column.
 *   - this element contains both the #middle-column and #left-column elements.
 *
 * #middle-column, #left-column, #right-column
 *   - containers for the each of the three columns in the layout
 *
 * #footer
 *   - bottom of your webpage. a place to put copyright and contact information
 *
 * .clear-columns
 *   - this class is assigned to an empty div placed after the last (floating)
 *     column inside a block that contains two or more floating columns. it
 *     clears the floats, forcing the element containing the columns to
 *     visually contain all of its columns. there are alternative approaches
 *     to clearing which do not require this extra markup (see
 *     http://www.positioniseverything.net/easyclearing.html) however I find
 *     this method is much more effective and compatible for the task at hand.
 *     also, it should be evident by now that markup bloat is not a concern
 *     with this particular layout.
*/
.clear-columns
{
    clear: both;
}
#outer-column-container
{
    border-left: solid 182px #fff;	/* left column's width and background
					   color */
    border-right: solid 208px #fff;	/* right column's width and background
					   color */
}
#inner-column-container
{
    width: 100%;		/* force this element to take the full width
				   between the left and right columns. this is
				   especially important as children of this
				   element will have width:100%; set, and how
				   that 100% value is interpreted depends on
				   the width of it's parent (this element). */
}
#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: -182px;	/* move it further left. the value here should
				   be the same value as the left border width
				   on #outer-column-container, but negative */
    width: 182px;		/* 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. see general notes above. */
}
#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: -208px;	/* move it further right. the value here should
				   be the same value as the right border width
				   on #outer-column-container, but negative */
    width: 208px;		/* 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 */
}
#adminPanel
{
    float: left; margin-left: -182px; width:784px; background-color: #fff;
}
#adminPanel button#closeAdminPanel
{
    float: right;
}
/*******************************************************************************
 * 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; leave this stylesheet untouched.
*/
html, body { 
    margin:0; padding:0; text-align:center;  
}
body {
    background:#f6f6f6 url(/images/site/main-bg.jpg) repeat-y 50% 0;
}
#page-container { 
    width:992px; text-align:left; margin-left:auto; margin-right:auto; background-color:#362164;
}

#masthead
{
    padding-top: 1px;		/* hack to force teh entire masthead to
					   receive the background color */
    margin: 0;
}
#inner-column-container
{
    border: solid 1px #000;
    border-width: 0 1px;
    margin: 0 -1px;			/* compensate for the borders because of
					   100% width declaration */
}
#middle-column div.rMenu-center
{
    border-bottom: solid 1px #000;	/* border along the bottom of the
					   horizontal menu at the top of
					   the middle column */
}
#footer
{
    border-top: solid 1px #000;	/* 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: 5px;			/* margin, instead of padding, used to
					   induce margin collapse if needed by
				 	   child elements */
}


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